.mp-failedpaymentsMain .itemDetailListt .row.failedpaymentsTitleRow {
  background-color: #f0f8ff;
  padding-bottom: 10px !important;
  max-width: 100%;
  justify-content: flex-start;
}

.mp-failedpaymentsMain .itemDetailListt .row.failedpaymentsTitleRow .titleCol {
  font-weight: 700;
  font-size: 18px;
  color: #18355f;
  max-width: 28%;
  flex-basis: 28%;
}

.mp-failedpaymentsMain .itemDetailListt .row {
  padding-left: 18px !important;
  justify-content: flex-start;
}

.mp-failedpaymentsMain .itemDetailListt .row .valueCol {
  max-width: 28%;
  flex-basis: 28%;
  font-size: 16px;
  color: #000;
}
.mp-failedpaymentsMain {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 22px;
  margin-top: 30px !important;
}

.mp-failedpaymentsMain h4 {
  font-size: 20px;
  color: #000;
  font-weight: 600;
  padding: 5px;
}

@media (max-width: 767px) {
  .mp-failedpaymentsMain .itemDetailListt .row.failedpaymentsTitleRow .titleCol {
    font-weight: 700;
    font-size: 18px;
    color: #18355f;
    max-width: 100%;
    flex-basis: 100%;
  }
  .mp-failedpaymentsMain .itemDetailListt .row .valueCol {
    max-width: 100%;
    flex-basis: 100%;
    font-size: 16px;
    color: #000;
  }
  .mp-failedpaymentsMain {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 12px;
    margin-top: 30px !important;
  }
  .mp-failedpaymentsMain h4 {
    font-size: 18px;
  }
}

#goToPaymentDetail {
  margin-block: 2rem;
  font-size: 18px;
  font-weight: 500;
}

button#ACHDepositButton {
  margin-top: 15px;
}
label#descriptorCodeLabel {
  font-weight: 600;
  font-size: 18px;
  color: #18355f;
  max-width: 50%;
  padding-bottom: 20px;
}
input#descriptorCode {
  max-width: 50%;
}
#ACHDepDesTitle {
  color: #006ac4;
  font-family: Poppins;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 36px;
  margin-bottom: 0;
  max-width: 50%;
  /* min-height: 120px; */
}

button#ACHDepositButton {
  margin-top: 15px;
}
label#descriptorCodeLabelMp {
  font-weight: 600;
  font-size: 18px;
  color: #18355f;
  max-width: 50%;
  padding-bottom: 20px;
}
input#descriptorCodeMp {
  max-width: 50%;
}
#ACHDepDesTitleMp {
  color: #006ac4;
  font-family: Poppins;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 36px;
  margin-bottom: 0;
  max-width: 50%;
  /* min-height: 120px; */
}
/* -------- Search Box ----------- */
.selectboxSearchWrapper {
  display: flex;
  justify-content: space-between;
  column-gap: 50px;
}
.search-wrapper {
  position: relative;
  width: 100%;
  margin-top: 28px !important;
  /*     max-width: 100%; */
}

.search-input {
  width: 100%;
  height: 50px;
  padding: 8px 12px 8px 36px; /* space for icon */
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  max-width: 100%;
}

.search-input::placeholder {
  color: #101828;
  font-weight: 300;
  font-size: 12px;
}

.search-input:focus {
  border-color: #98a2b3;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 55%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #667085;
  pointer-events: none;
}

.search-results {
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.search-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.search-item:hover {
  background-color: #f2f4f7;
}

.searchResultsWrapper {
  position: relative;
  width: 100%;
  max-width: 50%;
  flex-basis: 50%;
}
/* -------- Search Box ----------- */

/* -------- Bill and payment loader ----------- */
.billLoader,
.paymentLoader {
  color: #ccc;
  font-size: 18px;
  justify-content: center;
  padding: 20px 0;
}
.loaderr {
  width: 20px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side, #ccc 90%, #fff) 0 / calc(100% / 3) 100% no-repeat;
  animation: l2 1s steps(3) infinite;
}
@keyframes l2 {
  to {
    background-position: 150%;
  }
}

/* -------- Bill and payment loader ----------- */

/* --------- conditional popup --------- */
.conditionPopup {
  position: fixed;
  top: 20px;
  background-color: #fff;
  max-width: 775px;
  right: 0px;
  border-radius: 28px;
  margin: 0 10px;
}

.conditionPopup-inner {
  border: 2px solid #001926;
  margin: 0;
  border-radius: 28px;
  position: relative;
}

.conditionPopup-text p {
  margin: 10px 0 0;
  padding: 38px 15px;
  font-size: 18px;
  color: #000;
  font-weight: 400;
}

.conditionPopup-crossIcon {
  position: absolute;
  right: 25px;
  top: 10px;
  cursor: pointer;
}

.conditionPopup-crossIcon img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

.closeAblePopup,
.up-closeAblePopup {
  position: fixed;
  max-width: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 110px 50px;
  text-align: center;
  z-index: 9999;
  background-color: #006ac6;
  color: #fff;
}
a#closeAblePopupClose,
a#up-closeAblePopupClose {
  color: #fff;
  text-decoration: underline;
}
/* --------- conditional popup --------- */
div#progressBarssLogo img {
  max-width: 400px;
  width: 100%;
}

div#progressBarssLogo {
  margin-bottom: 50px;
}

#progressBarss {
  max-width: 520px;
  width: 100%;
  padding: 30px 15px 20px;
}
.progressBarss .progMessagess {
  font-weight: 700;
  color: #fff;
  font-size: 22px;
  max-width: 380px;
  margin: 0 auto;
  padding: 70px 0 50px;
}
.progressBarss .progressTextss {
  font-size: 18px;
  font-weight: 600;
  padding: 5px 0 0;
  color: #fff;
}
.dnrsss {
  font-size: 14px;
  line-height: normal;
  padding: 20px 0 0;
  font-weight: 600;
  color: #fff;
}
.progressBarss .bottomTextss {
  font-size: 12px;
  line-height: normal;
  padding: 15px 0;
  font-weight: 600;
  color: #fff;
}
.LoadingWrapperss {
  background-color: rgb(255 134 29 / 67%);
  border-radius: 0 15px 15px 0;
}

.progMessageAlert p a {
  font-size: 18px;
  font-weight: 400;
  text-decoration: underline;
}
#progressBarAlert {
  max-width: 520px;
  width: 100%;
  padding: 30px 15px 20px;
}

.progMessageAlert h4 {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
}

.progMessageAlert p {
  font-size: 18px;
  font-weight: 400;
}

.progressBarAlert .progMessageAlert {
  font-weight: 700;
  color: #000;
  font-size: 22px;
  max-width: 385px;
  margin: 0 auto;
  padding: 70px 0 35px;
}
.progressBarAlert .progressTextAlert {
  font-size: 18px;
  font-weight: 600;
  padding: 5px 0 0;
  color: #000;
}

.progressBarAlert .bottomTextAlert {
  font-size: 12px;
  line-height: normal;
  padding: 15px 0;
  font-weight: 600;
  color: #000;
}

.dnrsAlert {
  font-size: 14px;
  line-height: normal;
  padding: 5px 0 0;
  font-weight: 600;
  color: #000;
}

.dnrsAlert strong {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
}

.dnrsAlert strong button {
  font-size: 16px;
  background: #f38020;
  border: 1px solid #f38020;
}

button#CloseManualUsage {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
}

div#goToUpdatePaymentTab,
div#paymentDetails,
div#makePaymentMethods {
  margin-left: 37px;
}
div#paymentDetails ul {
  padding-left: 15px;
  /*     padding: 0;
    list-style: none; */
  margin-bottom: 20px;
}
div#paymentDetails ul li,
div#paymentDetails ul li span {
  font-weight: 400;
  font-size: 16px;
}
button#opt1Submit {
  align-items: center;
  background-color: #f38020;
  color: #fff;
  display: inline-block;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 0px;
  transition: all 0.3s ease-in;
  margin-bottom: 20px;
}

button#opt1Submit:hover,
button#opt1Submit:active {
  background-color: #006ac6;
  color: #fff;
}
div#mp-jnpiays-credit {
  margin-bottom: 20px;
}

div#andtext,
div#andtextMp {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #425b76;
  max-width: 410px;
  margin-bottom: 15px;
}
div#andtext h4,
div#andtextMp h4 {
  font-size: 18px;
  margin: 0;
  margin-top: 14px;
}

div#finalCheck-error,
div#finalCheck-errorUp {
  font-size: 16px;
  font-weight: 400;
}
input#ACHDepositAmount1,
input#ACHDepositAmount1Up {
  max-width: 410px;
  margin-bottom: 4px;
  margin-top: 10px;
}

input#ACHDepositAmount2,
input#ACHDepositAmount2Up {
  max-width: 410px;
  margin-bottom: 4px;
}

div#ACHDepositAmount1-error-message,
div#ACHDepositAmount1-error-messageUp {
  font-size: 14px;
  color: red;
  margin-bottom: 10px;
}

div#ACHDepositAmount2-error-message,
div#ACHDepositAmount2-error-messageUp {
  font-size: 14px;
  color: red;
  margin-bottom: 10px;
}

button#ACHDepositButton,
button#ACHDepositButtonUp {
  max-width: 410px;
  align-items: center;
  background-color: #f38020;
  color: #fff;
  display: inline-block;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 0;
  transition: all 0.3s ease-in;
}
button#ACHDepositButton:hover,
button#ACHDepositButton:active,
button#ACHDepositButtonUp:hover,
button#ACHDepositButtonUp:active {
  background-color: #006ac6;
  color: #fff;
}

.hidden {
  display: none !important;
}

div#stripeBankCreditMain,
div#stripeBankCreditMainUp {
  max-width: 600px;
}
.stripePaymentMessage > p {
  font-size: 18px;
  margin-bottom: 15px;
}
/* -------- stripe css --------- */
.stripe-container {
  margin-bottom: 40px;
}
div#payment-element,
div#payment-elementUp {
  margin-bottom: 20px;
}
div#error-message.error-message,
div#error-messageUp.error-message {
  margin-top: 5px;
}
.stripePaymentMessage p {
  color: #494a52;
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 15px;
}
button.stripePaymentButton {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 700;
  height: 50px;
  letter-spacing: 0;
  line-height: 26px;
  /*     margin-bottom: 25px; */
  max-width: 620px;
  padding: 0;
  text-align: center;
  width: 100%;
  background-color: #00314b;
  color: #fff;
  /*     margin-top: 40px; */
}
/* ------------ stripe css ------------- */
/* ---------- enrollment tab items ------------- */
.listContent ul:not(last-child) {
  border-bottom: 1px solid #e2e8f0;
}
.enrolledAccounts-list {
  border: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
}
.allreadySubmitDetail,
.mp-allreadySubmitDetail,
.mp-amountDetail {
  margin-bottom: 35px !important;
}
.mp-amountDetail {
  background-color: #f0f8ff;
  margin-top: -10px !important;
  border-radius: 0 0 14px 14px;
}
.allreadySubmitDetail .itemDetailList,
.mp-allreadySubmitDetail .itemDetailList,
.mp-amountDetail .itemDetailListt {
  margin-top: 0 !important;
  border: none !important;
}

.mp-amountDetail .itemDetailListt .row .valueCol {
  max-width: 152.67px;
  width: 100%;
  text-align: right;
}
.valueCol.finalAmount {
  max-width: 110.67px !important;
}
/* utility login info */
.featureNotAvailable h2 {
  color: #1b1b1b;
  font-size: 24px;
  text-align: center;
  font-weight: 600;
  margin-top: 100px;
}
div#have-online-details > div > h2 {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

ul.accountNumbersUl li span {
  padding: 10px;
}

ul.accountNumbersUl {
  display: flex;
  gap: 20px;
  padding: 0;
  list-style-type: none;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

ul.accountNumbersUl li {
  cursor: pointer;
}

ul.accountNumbersUl li span {
  background-color: #fff;
}
ul.accountNumbersUl li {
  min-height: 53px;
}
div.meterWrapper h4 {
  margin-bottom: 20px;
  margin-top: 20px;
}

ul#meterList {
  list-style-type: none;
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  padding: 0px;
}

ul#meterList li {
  border: 1px solid black;
  padding: 5px 10px;
  background: #fff;
  cursor: pointer;
}

div#accounterror {
  font-size: 20px;
}
/* utility login info */

/* ---------- View Popup ------------- */
.accountDetailsView-outer {
  padding: 15px 0;
}
.accountDetailsView-main.mCustomScrollbar {
  overflow: hidden;
  height: 892px;
}

.accountDetailsView-main {
  position: fixed;
  background: #fff;
  padding: 20px 0 40px;
  max-width: 74%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.accCrosssBtn img {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.accCrosssBtn {
  text-align: right;
  position: absolute;
  right: 20px;
  top: 10px;
}
.accountDetailsView-inner {
  max-width: 70%;
  background-color: #fcf0e7;
  margin: 0 auto !important;
}

.accountDetailsView-header ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.accountDetailsView-content ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1.5920000076293945px solid #c8ced4;
}

.accountDetailsView-header {
  background-color: #f0801f;
  padding: 15px 15px;
}

.accountDetailsView-content {
  padding: 10px 25px 15px;
}

.accountDetailsView-header ul li {
  color: #ffffff;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0px;
}

.accountDetailsView-content ul li.accountDetailsViewTitle {
  font-size: 18px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 600;
}

.accountDetailsView-content ul li {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}
.accountDetailsView-bottom-text p {
  font-size: 22px;
  color: #000000;
  font-weight: 500;
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
}

.accountDetailsView-bottom-text {
  margin-top: 30px;
}

.accountDetailsView-bottom-text p a {
  font-size: 22px;
  font-weight: 500;
  color: #f18020;
}

.accountDetailsView-bottom-text p a:hover,
.accountDetailsView-bottom-text p a:active {
  font-size: 22px;
  font-weight: 500;
  color: #f18020;
  text-decoration: underline;
  font-family: Poppins, sans-serif !important;
}

.accountDetailsView-content ul:last-child {
  border: none;
}

/* Overlay behind the popup */
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 999; /* Behind the popup but above everything else */
  display: none;
}

/* When overlay is active */
.body-overlay.active {
  display: block;
}

/* Disable scroll on body */
body.no-scroll {
  overflow: hidden;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgb(240 128 31) !important;
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000 !important;
}
@media (max-width: 1440px) {
  .accountDetailsView-main.mCustomScrollbar {
    height: 770px;
    overflow: hidden;
  }
  .accountDetailsView-content ul {
    padding: 6px 0;
  }
  .accountDetailsView-content {
    padding: 10px 25px 10px;
  }
  .accountDetailsView-bottom-text {
    margin-top: 20px;
  }
  .accountDetailsView-bottom-text p a,
  .accountDetailsView-bottom-text p a:hover {
    color: #f18020;
    font-size: 18px;
    font-weight: 500;
  }
  .accountDetailsView-bottom-text p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .accountDetailsView-main.mCustomScrollbar {
    height: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    /*         padding: 0; */
  }
  .mCustomScrollBox {
    height: auto !important;
  }
  .accountDetailsView-main {
    max-width: 98%;
    padding: 20px 0 40px;
  }
  .accountDetailsView-inner {
    max-width: 90%;
    margin: 50px auto 0;
    margin-top: 45px !important;
  }
  .accCrosssBtn {
    right: 50%;
    top: 10px;
  }
  .accountDetailsView-content {
    padding: 10px 10px 15px;
  }
  .accountDetailsView-content ul li.accountDetailsViewTitle {
    font-size: 16px;
    max-width: 100%;
    text-wrap: wrap;
  }
  .accountDetailsView-content ul li {
    font-size: 16px;
    max-width: 100%;
    text-wrap: wrap;
  }
  .accountDetailsView-bottom-text p a,
  .accountDetailsView-bottom-text p a:hover {
    font-size: 16px;
  }
  .accountDetailsView-bottom-text p {
    font-size: 16px;
    max-width: 90%;
  }
  .accountDetailsView-header ul li {
    font-size: 16px;
  }
  .mCSB_inside > .mCSB_container {
    margin-right: 0px !important;
  }
  .accountDetailsView-main .page-center {
    padding: 0 10px;
  }
  .accountDetailsView-content ul {
    padding: 5px 0;
  }
  .accountDetailsView-header {
    padding: 10px;
  }
}
@media (max-width: 540px) {
  .accountDetailsView-content ul li,
  .accountDetailsView-content ul li.accountDetailsViewTitle {
    font-size: 14px;
  }
}
/* ---------- View Popup ------------- */

.enrolledAccounts-header {
  text-align: center;
  /*     background-color: #f38020; */
  padding: 13px 0;
  background-color: #f0f8ff;
}
.enrolledAccounts-header h2 {
  font-size: 24px;
  color: #1b1b1b;
  font-weight: 600;
  font-family: "Poppins";
  margin: 0;
}
.enrolledAccounts-main {
  margin-top: 50px;
  margin-bottom: 150px;
}

.listHeadings ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
  padding: 10px 50px;
  border-bottom: 1px solid #e2e8f0;
}

.enrolledAccounts-list {
  padding: 0px 0px 0;
}

.enrolledAccounts-btn {
  padding: 0 50px 100px;
  text-align: right;
}

.listContent ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 10px 50px;
}
.enrolledAccounts-btn a {
  border-radius: 10px;
  background-color: #f18020;
  padding: 10px 30px;
  letter-spacing: 0px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  font-family: Poppins, sans-serif;
  display: inline-block;
  margin-top: 20px;
}

.enrolledAccounts-btn a:hover,
.enrolledAccounts-btn a:active {
  font-family: Poppins, sans-serif;
  font-weight: 500;
}
.listHeadings ul {
  margin-bottom: 0px;
}

.listHeadings ul li {
  color: #18355f;
  font-size: 14px;
  text-transform: uppercase;
  text-align: left;
  font-weight: 700;
}
.listContent ul li {
  color: #000000;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
}
li.list_account {
  max-width: 175px;
  width: 100%;
  margin-right: 20px;
}

li.list_name {
  max-width: 130px;
  width: 100%;
  margin-right: 20px;
}

li.list_address {
  max-width: 420px;
  width: 100%;
  margin-right: 20px;
}

li.list_status {
  max-width: 230px;
  width: 100%;
  margin-right: 20px;
}

li.list_manage {
  max-width: 170px;
  width: 100%;
  margin-right: 20px;
  /*     cursor: pointer; */
}
li.lastBtn.list_manage {
  cursor: pointer;
}

li.lastBtn {
  color: #f18020 !important;
  font-weight: 600 !important;
}

p.error-message {
  color: red;
  font-size: 14px;
  padding: 10px 0;
}

@media (max-width: 767px) {
  .enrolledAccounts-header h2 {
    font-size: 24px;
  }
  .banner-p0pnf-main .banner-artboard-1-heading.page3prac-heading h1 {
    font-size: 38px;
  }
  .listHeadings ul li {
    font-size: 14px;
  }
  .listContent ul li {
    font-size: 16px;
  }
  .enrolledAccounts-btn a {
    font-size: 16px;
  }
  .enrolledAccounts-list {
    padding: 0px 0px;
  }
  .enrolledAccounts-btn {
    padding: 0;
  }
}

@media (max-width: 540px) {
  .enrolledAccounts-list {
    display: flex;
    padding: 0px 0px;
    justify-content: center;
  }
  .listHeadings ul {
    margin-bottom: 15px;
    flex-direction: column;
    padding: 5px;
  }
  .listContent ul {
    flex-direction: column;
    padding: 5px;
  }
  .enrolledAccounts-btn {
    text-align: center;
    padding: 0;
  }
}
/* ---------- enrollment tab items ------------- */

div#have-online-details iframe {
  height: 600px !important;
  max-width: 540px;
}

/* ----------- make a payment ---------------- */
input#amountField {
  padding-left: 10px;
}
p#amountErrorMessage {
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 0px;
}
.checkAmountSectionWrapper {
  padding-bottom: 0px;
}
.checkAmountBelowtext {
  padding-top: 10px;
  padding-bottom: 25px;
}
.checkAmountBelowtext p {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  input#amountField {
    width: 100%;
  }
  .amountFieldWrapper {
    display: flex;
    align-items: center;
  }
  div#checkAmountSection {
    /* flex-direction: column; */
    flex-wrap: wrap;
  }
}
/* ----------- make a payment ---------------- */
#ICCMSG,
#iBNMSG,
#mp-ICCMSG,
#mp-iBNMSG {
  font-size: 20px;
  text-align: center;
}

.success-message,
.success-messageMp {
  font-size: 14px;
  color: green;
  font-weight: 600;
  padding-top: 10px;
}
button:hover,
a:hover,
button:active,
a:active {
  font-weight: inherit;
}
a:active,
button:active,
a:focus,
button:focus {
  font-family: inherit;
}
.update-card-info:hover,
.changeDefMetUpdate-card-info:hover,
.changeDefMetUpdateup-strp-update-card-info:hover,
.mp-update-card-info:hover,
.mp-strp-update-card-info:hover,
.up-strp-update-card-info:hover,
.update-card-info:active,
.mp-update-card-info:active,
.mp-strp-update-card-info:active,
.up-strp-update-card-info:active {
  background-color: #006ac6;
}
.upPyTitle h2 {
  font-size: 22px;
  font-weight: 500;
  color: #020617;
  line-height: 28px;
  margin-bottom: 30px;
}

div#checkAmountSection {
  display: flex;
  gap: 20px;
}
button#amountCheckButton {
  background-color: #006ac6;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px !important;
  padding: 8px 16px;
  transition: all .3sease-in;
}
button#amountCheckButton:hover,
button#amountCheckButton:active {
  background-color: #f38020;
  font-family: inherit;
  font-weight: 500;
}

.disabled {
  opacity: 0.5; /* Make it look disabled */
  cursor: not-allowed; /* Show not-allowed cursor */
  filter: grayscale(80%); /* Slightly dull the color */
}

.default-method label,
.mp-default-method label {
  font-size: 14px !important;
  line-height: 1;
}
.jnpiays-bank,
.mp-jnpiays-bank {
  padding-bottom: 15px;
}
.default-method,
.mp-default-method {
  display: flex;
  align-items: center;
  margin-bottom: 15px !important;
  margin-top: -10px !important;
  margin-left: 35px !important;
}

a#update-card-info,
a#mp-update-card-info,
a#mp-strp-update-card-info,
a#up-strp-update-card-info,
a#changeDefMetUpdate-card-info,
a#changeDefMetUpdateup-strp-update-card-info {
  align-items: center;
  background-color: #f38020;
  color: #fff;
  display: inline-block;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 0px;
  transition: all 0.3s ease-in;
}
a#update-card-info {
  margin-top: 10px;
}
.jnpiays-credit .radioLabelContainer,
.mp-jnpiays-credit .mp-radioLabelContainer {
  padding-bottom: 15px;
}
.radioLabelContainer {
  align-items: center;
  display: flex;
}
.mp-radioLabelContainer {
  align-items: center;
  display: flex;
}
input[type="radio"]:before {
  content: none !important;
}
input[type="radio"] {
  margin-right: 18px !important;
}
@supports (-moz-appearance: none) {
  input[type="radio"]::before {
    content: none !important;
  }
}
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 18px !important;
  height: 18px !important;
  border: 1px solid #c8ced4 !important;
  border-radius: 50% !important;
  position: relative;
  outline: none;
  cursor: pointer;
}

input[type="radio"]:checked {
  background-color: #00bdd0 !important;
  /*   box-shadow: inset 0 0 0 4px white !important; */
}

/* ---- progress bar --------------- */
#progressBarIl {
  max-width: 520px;
  width: 100%;
  padding: 30px 15px 20px;
}
.progressBarIl .progMessageIl {
  font-weight: 700;
  color: #000;
  font-size: 22px;
  max-width: 385px;
  margin: 0 auto;
  padding: 70px 0 100px;
}
.progressBarIl .progressTextIl {
  font-size: 18px;
  font-weight: 600;
  padding: 5px 0 0;
  color: #000;
}
.dnrsIl {
  font-size: 14px;
  line-height: normal;
  padding: 5px 0 0;
  font-weight: 600;
  color: #000;
}
.progressBarIl .bottomTextIl {
  font-size: 12px;
  line-height: normal;
  padding: 15px 0;
  font-weight: 600;
  color: #000;
}
.LoadingWrapperIl {
  background-color: rgb(255 134 29 / 67%);
  border-radius: 15px;
}
/* ---- progress bar --------------- */

.featureNotAvailable h2 a {
  color: #f38020;
}

.featureNotAvailable h2 a:hover {
  font-size: 24px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-weight: 500;
}
/* -------------- Icheck ----------------- */
div#jnpiays-bank p,
div#mp-jnpiays-bank p {
  margin-left: 35px;
}
div#jnpiays-credit p,
div#mp-jnpiays-credit p {
  margin-left: 35px;
}

.jnpiays-bank-details,
.mp-jnpiays-bank-details,
.jnpiays-credit-details,
.mp-jnpiays-credit-details {
  display: none;
}
.fwto-wrapper label .mp-radioLabelContainer {
  margin-bottom: 15px;
}
.jnpiays-bank label,
.mp-jnpiays-bank label,
.fwto-wrapper label {
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
}

.jnpiays-bank label input,
.mp-jnpiays-bank label input,
.fwto-wrapper label input {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  z-index: 989;
}

.jnpiays-credit label input,
.mp-jnpiays-credit label input {
  z-index: 989;
}

.jnpiays-bank label p,
.mp-jnpiays-bank label p,
.fwto-wrapper label p {
  font-size: 14px;
  line-height: 22px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  margin: 10px 0 20px;
}

.jnpiays-bank-details,
.mp-jnpiays-bank-details {
  background-color: rgba(0, 189, 208, 0.102);
  padding: 20px 30px;
  min-height: 568px;
  margin-bottom: 50px !important;
}

.jnpiays-bank-details h4,
.mp-jnpiays-bank-details h4 {
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  text-align: center;
}

.jnpiays-bank-details > input,
.jnpiays-bank-details > select,
.mp-jnpiays-bank-details > input,
.mp-jnpiays-bank-details > select {
  height: 50px;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  border: 1px solid #c8ced4 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  color: #6e757c !important;
  font-weight: 500;
  font-family: "Poppins";
  margin-bottom: 15px;
}

.jnpiays-bank-details > img,
.mp-jnpiays-bank-details > img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 15px;
}

.jnpiays-bank-details label,
.mp-jnpiays-bank-details label {
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
}

.jnpiays-credit label,
.mp-jnpiays-credit label {
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
}

.jnpiays-credit label input[type="number"],
.mp-jnpiays-credit label input[type="number"],
.jnpiays-credit label input[type="text"],
.mp-jnpiays-credit label input[type="text"] {
  height: 50px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #c8ced4;
}

.jnpiays-credit label p,
.mp-jnpiays-credit label p {
  font-size: 14px;
  line-height: 22px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  margin: 10px 0;
}

.jnpiays-credit-details,
.mp-jnpiays-credit-details {
  background-color: rgba(0, 189, 208, 0.102);
  margin-bottom: 50px;
  min-height: 568px;
  padding: 20px 30px;
}

.jnpiays-credit-details h4,
.mp-jnpiays-credit-details h4 {
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
  text-align: center;
}

.jnpiays-credit-details > input,
.mp-jnpiays-credit-details > input,
.jnpiays-credit-details > select,
.mp-jnpiays-credit-details > select {
  height: 50px;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  border: 1px solid #c8ced4 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  color: #6e757c !important;
  font-weight: 500;
  font-family: "Poppins";
  margin-bottom: 15px;
}

.jnpiays-credit-details > img,
.mp-jnpiays-credit-details > img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 15px;
}

.jnpiays-credit-details label,
.mp-jnpiays-credit-details label {
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  font-weight: 500;
  font-family: "Poppins";
}
.jnpiays-heading h4,
.mp-jnpiays-heading h4 {
  max-width: 620px;
  min-height: 52px;
  font-size: 24px;
  letter-spacing: 0px;
  line-height: 32px;
  color: #495057;
  font-weight: 500;
  font-family: "Poppins";
  margin: 0 0 20px;
}

.jnpiays-form form,
.mp-jnpiays-form form {
  background: none;
}

.jnpiays-form label,
.mp-jnpiays-form label {
  max-width: 587px;
  min-height: 67px;
  font-size: 20px;
  line-height: 30px;
  color: #495057;
  font-weight: 500;
  font-family: "Poppins";
  margin-bottom: 30px;
}

.jnpiays-form label p,
.mp-jnpiays-form label p {
  max-width: 587px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: #6e757c;
  font-weight: 500;
  font-family: "Poppins";
  margin: 8px 0 0;
}

.jnpiays-form label p a,
.mp-jnpiays-form label p a {
  color: #f18020;
  font-weight: 500;
  font-family: "Poppins";
  font-size: 16px;
  line-height: 24px;
}

.jnpiays-form label p a:hover,
.mp-jnpiays-form label p a:hover,
.jnpiays-form label p a:active,
.mp-jnpiays-form label p a:active {
  color: #f18020;
  font-weight: 500;
  font-family: "Poppins";
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
}
.jnpiays-form input,
.mp-jnpiays-form input {
  width: 23px;
  height: 23px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #c8ced4;
}
label.jnpiays-ccexccv {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jnpiays-ccex {
  position: relative;
  max-width: 339px !important;
  width: 100% !important;
}

.jnpiays-ccex input {
  max-width: 339px !important;
  width: 100% !important;
}

label.jnpiays-ccexccv > input {
  border-radius: 5px !important;
  background-color: #ffffff !important;
  border: 1px solid #c8ced4 !important;
  max-width: 206px !important;
  min-height: 50px !important;
  width: 100% !important;
}

.jnpiays-ccex img {
  position: absolute;
  right: 10px;
  top: 10px;
}

.jnpiays-bank-details,
.jnpiays-bank-details iframe,
.mp-jnpiays-bank-details,
.mp-jnpiays-bank-details iframe,
.jnpiays-credit-details,
.jnpiays-credit-details iframe,
.mp-jnpiays-credit-details,
.mp-jnpiays-credit-details iframe {
  max-width: 600px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .jnpiays-credit-details input::placeholder,
  .mp-jnpiays-credit-details input::placeholder {
    font-size: 16px;
  }
  .jnpiays-ccex {
    max-width: 100% !important;
  }

  .jnpiays-ccex input {
    max-width: 100% !important;
  }

  label.jnpiays-ccexccv > input {
    max-width: 100% !important;
  }
}
/* -------------- Icheck ----------------- */
.tabinInfo {
  margin-top: 28px !important;
}

.ssmainsection-main #popup {
  background-color: #fff;
  display: none;
  /*     left: 50%; */
  padding: 70px 20px;
  position: unset;
  text-align: center;
  /*     top: 50%; */
  /*     transform: translate(-50%, -50%); */
  width: 100%;
  z-index: 1000;
  max-width: 100%;
  min-height: 100%;
  align-content: center;
}
.login-details {
  display: flex;
  flex-direction: column;
  text-align: justify;
  max-width: 500px;
  margin: 0 auto;
}
.login-details button:disabled {
  opacity: 0.5;
}
.accountEmailId {
  padding-top: 20px;
}
.login-details button {
  align-items: center;
  background-color: #f18020;
  color: #000;
  display: flex;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 700;
  height: 50px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 26px;
  text-align: center;
}

.login-inner {
  min-width: 520px;
  width: fit-content;
  margin: 0 auto;
  padding: 40px 30px;

  text-align: center;

  background-color: hsl(215deg 15% 84% / 5%);
  border: 1px solid #d1d6dd;
  border-radius: 15px;
  box-shadow: var(--shadow-elevation-medium);
}

.login-header h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.login-footer {
  display: flex;
  flex-direction: column;
}

.login-details input[type="email"]:focus,
.login-details input[type="password"]:focus {
  border: 2px solid #667eea;
}

#password-message {
  display: block;
  margin-bottom: 15px;
}

.login-details label {
  font-size: 20px;
  color: #000;
}
#wrong-message {
  display: none;
}
.login-details input {
  margin-block-end: 0;
}
.login-details input::placeholder {
  font-weight: 400;
  font-size: 0.875rem;
}
#popup p {
  color: #000;
  font-size: 20px;
  margin: 0;
}
#popup a {
  color: #006ac6;
  text-decoration: underline;
  font-size: 16px;
  font-weight: 600;
}
#overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.banner-artboard-1-main.banner-p0pnf-main.banner-p2mu-main {
  padding: 150px 0 115px !important;
}

.font14,
.font14 * {
  font-size: 14px;
  font-weight: 500;
  color: #020617;
  line-height: 20px;
}
.font18,
.font18 * {
  font-size: 18px;
  font-weight: 500;
  color: #020617;
  line-height: 20px;
}
.font16,
.font16 * {
  font-size: 16px;
  font-weight: 500;
  color: #020617;
  line-height: 20px;
}
.black_color *,
.black_color {
  color: #020617;
}
.blue_gray *,
.blue_gray {
  color: #64748b;
}
.pwderror {
  padding: 5px 0;
  font-size: 15px;
  color: red;
}

/* Overall Dashboard  and Header Part */
.ssmainsection-outer {
  padding: 40px 0 80px;
}
.contactSection span.svg-icon {
  display: inline-block;
  line-height: 0;
}
.ssmainsection {
  display: flex;
  background-color: #006ac6;
  border-radius: 15px;
}
.headerSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contactSection {
  display: flex;
  gap: 16px;
  width: 657px;
  justify-content: end;
}
.yourSubs {
  width: calc(100% - 660px);
}
.itemDetailList .row,
.itemDetailListt .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ssmainsection {
  padding: 90px 62px 120px 30px;
  position: relative;
}
.ssmainsection-tabs {
  width: 310px;
}
.ssmainsection-tabContent * {
  margin: 0;
}
.ssmainsection-tabContent {
  padding: 30px;
  background-color: #fff;
  border-radius: 16px;
  width: calc(100% - 310px);
}

/* Notice Region — the container above all Panels (see module.html).
   Carries no intrinsic box, so an empty region cannot open a visible gap; any spacing is the
   Alert panel's own responsibility. `:empty` is belt-and-braces on top of that, and only
   matches because the element is authored with no whitespace inside it.

   `container-type: inline-size` so the Alert panel can respond to the width it ACTUALLY has.
   A viewport media query cannot express that here: `.ssmainsection-tabContent` is
   `calc(100% - 310px)` beside the Tab rail down to 991px and then jumps to `width: 100%` when
   `.ssmainsection` becomes a column — so the content column gets WIDER as the viewport
   narrows past that point, and any single viewport breakpoint is wrong on one side of it. */
.notice-region {
  margin: 0;
  padding: 0;
  border: 0;
  container-type: inline-size;
  container-name: ea-notice;
}
.notice-region:empty {
  display: none;
}

/* ─── Customer Alerts ──────────────────────────────────────────────────────────
   Design variation 1a, the grouped panel. Built by
   js/src/modules/self-serve/customer-alerts-panel.ts, which is the only writer here.

   TYPOGRAPHY DEFERRED: the design specifies Poppins 600 for titles and Source Sans 3
   400/700 for body and UI copy. Only Poppins is loaded by this theme, and adding a
   second Google font is out of scope for this ticket, so every rule below uses the
   portal's Poppins at the design's sizes, weights and spacing. Reconsider Source Sans 3
   during the planned broader CSS pass rather than font-by-font here.

   ONE TREATMENT: there is no severity column in HubDB, so every row is informational —
   cyan header dot, info tile, info stroke. The design's warning and neutral palettes are
   deliberately not present. */

.ea-alerts {
  background: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 34, 51, 0.05);
  overflow: hidden;
  /* The 2rem gap belongs to the panel, not to the region: an empty Notice Region has no
     panel and so opens no gap, without depending on the `:empty` rule to undo one. */
  margin-bottom: 2rem;
}

.ea-alerts__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #f7f9fb;
  border-bottom: 1px solid #e4eaf0;
}

.ea-alerts__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00b4c7;
}

.ea-alerts__count {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #0f2233;
}

.ea-alerts__list {
  display: flex;
  flex-direction: column;
}

.ea-alert {
  display: grid;
  /* Third column collapses on its own when the row has no actions element. */
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef2f6;
}

.ea-alert:last-child {
  border-bottom: 0;
}

.ea-alert__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The tile sets `color`, and the icon strokes with `currentColor`. */
.ea-alert__icon--info {
  background: #e0f6f8;
  color: #008d9c;
}

.ea-alert__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Without this a long unbroken word in the Message stretches the grid column. */
  min-width: 0;
}

.ea-alert__titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ea-alert__title {
  margin: 0;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #0f2233;
}

.ea-alert__message {
  font-size: 14px;
  line-height: 1.5;
  color: #46596b;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.ea-alert__message p {
  margin: 0 0 8px;
}

.ea-alert__message p:last-child {
  margin-bottom: 0;
}

.ea-alert__message ul,
.ea-alert__message ol {
  margin: 8px 0 0;
  padding-left: 22px;
}

.ea-alert__message a {
  color: #006abb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ea-alert__message a:hover {
  color: #00b4c7;
}

.ea-alert__actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* The secondary button treatment: every row is informational, and the design pairs the
   primary orange button with warning severity only. An anchor rather than a button —
   a CTA is a static destination in this release, never a portal action. */
.ea-alert__cta {
  display: inline-block;
  font-size: 14px;
  /* font-weight: 700; */
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #c9d6e0;
  color: #0f2233;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ea-alert__cta:hover {
  background-color: #006abb;
  border-color: #006abb;
  color: #fff;
}

.ea-alert__cta:focus-visible {
  outline: 2px solid #006abb;
  outline-offset: 2px;
}

/* The design stacks below ~680px of content width — the panel's own width, which the
   container query above makes directly askable. Browsers without container-query support fall
   back to the desktop grid, which stays readable; it simply does not stack. */
@container ea-notice (max-width: 680px) {
  .ea-alert {
    grid-template-columns: 28px 1fr;
    row-gap: 10px;
  }

  /* Icon stays beside the title; the message and CTA drop below both. */
  .ea-alert__body {
    grid-column: 2;
  }

  .ea-alert__actions {
    grid-column: 1 / -1;
  }

  .ea-alert__cta {
    /* A full-width target with the 44px minimum height a finger needs. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
}
.ssmainsection-tabs ul {
  display: flex;
  flex-direction: column;
  gap: 17px;
  list-style-type: none;
  padding: 0;
  padding-top: 27px;
  margin: 0;
}
.ssmainsection-tabs ul li {
  padding: 0;
  border-radius: 11.49px 0px 0px 11.49px;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  cursor: pointer;
  transition: all ease-in 0.3s;
}
.ssmainsection-tabs ul li.active,
.ssmainsection-tabs ul li:hover,
.ssmainsection-tabs ul li:active {
  color: #1b1b1b;
  background-color: #fff;
}

/* The Tab Trigger is a real <button> so it can be focused and keyed; it was an <li>, which
   could be neither. It carries the padding the <li> gave up, so the whole visual area is
   clickable rather than just the text, and inherits everything else from the <li> so the
   existing appearance is unchanged. */
.ssmainsection-tabs ul li .tab-trigger {
  display: block;
  width: 100%;
  padding: 21px 18px;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ssmainsection-tabs ul li .tab-trigger:focus-visible {
  outline: 2px solid #1b1b1b;
  outline-offset: -2px;
}

/* Inactive Panels are `hidden` (and `inert`) rather than inline `display: none`. Stated
   explicitly so a future `display` on a Panel class cannot quietly un-hide one. */
.ssmainsection-tabContent > [role="tabpanel"][hidden] {
  display: none;
}
.ssmainsection-tabContent h4 {
  color: #1b1b1b;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
  margin-bottom: 15px;
}
.ssmainsection-tabContent h5 {
  line-height: 24px;
  margin: 0;
}
.ssmainsection-tabContent .contactSection a:hover,
.ssmainsection-tabContent .contactSection a:active {
  font-weight: 600;
  font-family: inherit;
  color: #006ac6;
}
.ssmainsection-tabContent .contactSection a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.23px;
  text-align: center;
  color: #1b1b1b;
  padding: 11px 10px 11px 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all ease-in 0.3s;
}
.ssmainsection-tabContent .liveChat a:hover,
.ssmainsection-tabContent .liveChat a:active {
  background-color: #006ac6;
  color: #fff;
}
.ssmainsection-tabContent .liveChat a {
  display: flex;
  align-items: center;
  background-color: #f38020;
  color: #fff;
}

/* Account Balance */
.accountBalance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  background-color: #f0f8ff;
  border-radius: 14px;
  padding: 15px 30px;
}
.accountBalance .accountTitle p {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #64748b;
}
.accountBalance .amount p {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: #1b1b1b;
  margin-top: 4px;
}
.accountBalance .accountBalanceCol2 a:hover,
.accountBalance .accountBalanceCol2 a:active {
  font-weight: 500;
  background-color: #f38020;
  font-family: inherit;
}
.accountBalance .accountBalanceCol2 a {
  font-size: 14px;
  transition: all ease-in 0.3s;
  font-weight: 500;
  line-height: 24px;
  padding: 6px 16px;
  background-color: #006ac6;
  color: #fff;
  display: inline-block;
  border-radius: 8px;
}

/* Select Field */
.SelectAnotherSub {
  margin-top: 28px;
}
.SelectAnotherSub select {
  border: 1px solid #e2e8f0 !important;
  appearance: none;
  width: 100%;
  padding: 10px 39px 10px 19px !important;
  font-size: 14px !important;
  line-height: 24px;
  color: #020617 !important;
}
.selectField {
  position: relative;
  flex-basis: 50%;
  max-width: 50%;
  width: 100%;
}
.selectField:after {
  position: absolute;
  content: "";
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M2 4L8.5 11L15 4" stroke="%23020617" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

/* Home */
.ssmainsection-tabContent .itemDetailList,
.ssmainsection-tabContent .itemDetailListt {
  margin-top: 26px;
}
.ssmainsection-tabContent .itemDetailList,
.ssmainsection-tabContent .itemDetailListt {
  margin-top: 26px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
}
.ssmainsection-tabContent .itemDetailList .row,
.ssmainsection-tabContent .itemDetailListt .row {
  padding: 16px 44px;
}
.ssmainsection-tabContent .itemDetailList .row:not(:last-child),
.ssmainsection-tabContent .itemDetailListt .row:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}
.ssmainsection-tabContent .itemDetailList .titleCol,
.ssmainsection-tabContent .itemDetailList .valueCol,
.ssmainsection-tabContent .itemDetailListt .titleCol,
.ssmainsection-tabContent .itemDetailListt .valueCol {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #020617;
}
.ssmainsection-tabContent .itemDetailList .row:nth-child(even),
.ssmainsection-tabContent .itemDetailListt .row:nth-child(even) {
  background-color: #f7f8fa;
}

/* contact_preference */
.ssmainsection-tabContent .contact_infos_inner .row {
  display: flex;
  gap: 37px;
  align-items: center;
  padding-bottom: 21px;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox .row {
  padding-bottom: 34px;
  align-items: start;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox {
  padding: 34px 0 0;
  position: relative;
  border-bottom: 1px solid #e2e8f0;
}
/* .ssmainsection-tabContent .contact_infos_inner.checkbox:after { position: absolute; content: ''; width: calc(100% + 96px); height: 1px; background-color: #E2E8F0; left: -48px; } */
.ssmainsection-tabContent .contact_infos_inner .row div:first-child {
  width: 130px;
}
.ssmainsection-tabContent .contact_infos_inner .row div {
  max-width: 100%;
  width: 30.723%;
}
.ssmainsection-tabContent .contact_infos_inner .row label {
  display: none;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox .row label {
  display: block;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox .row label span {
  display: none;
}
.ssmainsection-tabContent .contact_infos_inner .row input[type="text"],
.ssmainsection-tabContent .contact_infos_inner .row input[type="email"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
}
.ssmainsection-tabContent .contact_infos_inner .row input::placeholder {
  font-size: 14px;
  line-height: 20px;
  color: #64748b;
}
.ssmainsection-tabContent .contact_infos_inner .row .new_info input {
  background-color: #fafafa !important;
}
.ssmainsection-tabContent .contact_infos_inner {
  padding: 21px 0;
}
.ssmainsection-tabContent .agreement_info_content p {
  color: #64748b;
  margin-top: 10px;
}
.ssmainsection-tabContent .agreement_info {
  padding: 34px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  margin-top: 13px;
}
.important_note {
  font-size: 13px;
  line-height: 20px;
  color: #f93a0b;
  margin-top: 2px;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox .row div:first-child {
  max-width: 723px;
  width: 100%;
  margin: 0;
}
.ssmainsection-tabContent .contact_infos_inner.checkbox .row div:not(:first-child) {
  width: 140px;
  margin: 0 auto;
  text-align: center;
}
.contact_infos_inner.checkbox span {
  display: block;
  margin-bottom: 4px;
}
.ssmainsection-tabContent .contact_infos_inner .row input[type="checkbox"] {
  padding: 0;
}
.ssmainsection-tabContent input[type="checkbox"] + .label {
  z-index: 1;
}
.button_parent {
  display: flex;
  gap: 22px;
  padding-top: 36px;
}
/* `.save_btn` and `.undo_btn` hold real <button>s now, not anchors. Both selectors are
   kept so the rules survive if either control is ever an anchor again. */
.save_btn a:hover,
.save_btn button:hover,
.customIframe a:hover,
.updatePwdBtn button:hover,
.save_btn a:active,
.save_btn button:active,
.customIframe a:active,
.updatePwdBtn button:active {
  font-weight: 500;
  background-color: #f38020;
  font-family: inherit;
}
.save_btn a,
.save_btn button,
.customIframe a,
.undo_btn a,
.undo_btn button,
.updatePwdBtn button {
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all ease-in 0.3s;
  font-weight: 500;
  line-height: 24px;
  padding: 8px 16px;
  background-color: #006ac6;
  color: #fff;
  display: inline-block;
  border-radius: 8px;
}
a:hover,
a:active {
  font-family: inherit;
  font-weight: inherit;
}
.undo_btn a,
.undo_btn button {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #000;
}
.undo_btn a:hover,
.undo_btn button:hover,
.undo_btn a:active,
.undo_btn button:active {
  background-color: #f38020;
  border: 1px solid #006ac6;
  color: #ffffff;
}

/* Bill&Payment */
.bill_payment .row {
  display: flex;
  background-color: #fff;
}
.bill_info_inner .row > div {
  width: 16.25%;
  padding: 8px 12px;
}
.bill_info_inner .row > div:first-child {
  width: 10%;
}
.bill_info_inner .row > div:last-child {
  width: 25%;
}
.payment_info_inner .row > div {
  width: 30%;
  padding: 8px 12px;
}
.payment_info_inner .row > div:first-child {
  width: 30%;
}
.payment_info_inner .row > div:last-child {
  width: 30%;
}
.bill_info_inner .row > div:not(:last-child),
.payment_info_inner .row > div:not(:last-child) {
  border-right: 2px solid #e2e8f0;
}
.bill_info_inner .row > div,
.payment_info_inner .row > div {
  border-bottom: 1px solid #e2e8f0;
}
.row.row_heading_part {
  background-color: #f0f8ff;
  border-radius: 12px 12px 0 0;
}
.row_inner_part {
  border-radius: 0 0 12px 12px;
}
.bill_payment .row_inner_part .row:nth-child(odd) {
  background-color: #f7f8fa;
}
.bill_info_inner,
.payment_info_inner {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.bill_info_inner > div:nth-child(even),
.payment_info_inner > div:nth-child(even) {
  background-color: #f7f8fa;
}
.bill_payment {
  padding: 21px 0;
}
.payment_info_outer {
  padding-top: 70px;
}

/* payementHistory */
.notFound {
  padding: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #020617;
}

/* "We could not load this" is a different fact from "there is nothing here", so it does not
   read as an empty result. Inherits .notFound's layout; only the colour distinguishes it. */
.notFound.loadError {
  color: #b42318;
}
/* payementHistory */

/* Contract */
.contracts_infos {
  padding: 21px 0;
}
.contracts .row {
  display: flex;
  background-color: #fff;
}
.contracts .row > div {
  width: 22.5%;
  padding: 8px 12px;
}
.contracts .row > div:last-child {
  width: 32.5%;
}
.contracts_info .row_inner_part .row:nth-child(odd) {
  background-color: #f7f8fa;
}
.contracts_info_inner {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 10px;
}
.contracts_info_inner > div:nth-child(even) {
  background-color: #f7f8fa;
}
.contracts_info_inner .row > div:not(:last-child) {
  border-right: 2px solid #e2e8f0;
}

/* Bill&Payment and Contracts */
.row.row_heading_part,
.row_inner_part {
  padding-right: 5px;
}
/* .row_inner_part { max-height: 150px; overflow-y: scroll; } */
/* .row_inner_part::-webkit-scrollbar-track { background-color: transparent; }
.row_inner_part::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
.row_inner_part::-webkit-scrollbar-thumb { background-color: #000000; } */
.row_inner a {
  color: #006ac6;
  text-decoration: underline;
}
.row_inner a:hover,
.row_inner a:active {
  color: #64748b;
  font-family: inherit;
  font-weight: 500;
}
.row.row_heading_part {
  background-color: #f0f8ff;
}
.bill_info,
.contracts_info,
.payment_info {
  max-height: 185px;
  overflow-y: auto;
}

.row_inner_part::-webkit-scrollbar-track,
.bill_info::-webkit-scrollbar-track,
.contracts_info::-webkit-scrollbar-track,
.payment_info::-webkit-scrollbar-track {
  background-color: transparent;
}
.row_inner_part::-webkit-scrollbar,
.bill_info::-webkit-scrollbar,
.contracts_info::-webkit-scrollbar,
.payment_info::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}
.row_inner_part::-webkit-scrollbar-thumb,
.bill_info::-webkit-scrollbar-thumb,
.contracts_info::-webkit-scrollbar-thumb,
.payment_info::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/* Left Side Deashboard Responsive */
.selected-tag {
  display: none;
  width: 100%;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Change Password */
.change_password #newPassword,
.change_password #confirmPassword {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
}
.change_password #newPassword::placeholder,
.change_password #confirmPassword::placeholder {
  font-size: 14px;
  line-height: 20px;
}
.change_password_inner > div {
  display: flex;
  align-items: center;
}
.change_password_inner > div label {
  width: 300px;
}
.change_password_inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 0;
}
span.toggle-password {
  position: absolute;
  right: 10px;
  z-index: 999;
  cursor: pointer;
}
.change_password_inner > div {
  position: relative;
}

.topBarMessage {
  text-align: center;
}
.topBarMessage p {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.ssmainsection-main {
  padding-top: 40px;
}

/* Logout Popup */
#logout-btn,
.popup-box button {
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  color: #1b1b1b;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  line-height: 18.23px;
  padding: 11px 10px 11px 16px;
  text-align: center;
  transition: all 0.3s ease-in;
  align-items: center;
  background-color: #f38020;
  color: #fff;
  display: flex;
  max-width: 140px;
  margin-top: 0;
  width: 100%;
  justify-content: center;
}

#logout-btn {
  position: absolute;
  right: 62px !important;
  top: 25px !important;
  bottom: unset !important;
}

#logout-btn:hover, #update-card-info:hover, #mp-update-card-info:hover, #mp-strp-update-card-info:hover, #up-strp-update-card-info:hover, #changeDefMetUpdate-card-info:hover, #changeDefMetUpdateup-strp-update-card-info:hover, #logout-btn:active, #update-card-info:active, #changeDefMetUpdate-card-info:active, #changeDefMetUpdateup-strp-update-card-info:active, #mp-update-card-info:active, #mp-strp-update-card-info:active, #up-strp-update-card-info:active, {
    background-color: #006ac6;
    color: #fff;
}
p.belowButtonText {
  padding: 10px 0;
  font-size: 14px;
  line-height: 22px;
  color: #000000;
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup-box h4 {
  color: #1b1b1b;
}
.popup-box {
  background: #fff;
  border-radius: 10px;
  padding: 25px 30px;
  text-align: center;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.enrollments {
  margin-top: 10px;
}
.welcomeFirstName {
  position: absolute;
  top: 25px !important;
  bottom: unset !important;
  left: 30px;
  margin-left: 310px;
}

.welcomeFirstName p {
  color: #fff;
  font-size: 24pt;
}

@media (min-width: 1680px) {
  /*  Overall Dashboard   */
  .ssmainsection-main .page-center {
    max-width: 1700px;
  }
}
@media (max-width: 1681px) {
    /*  Overall Dashboard   */
    .ssmainsection-tabs { width: 270px;}
    .ssmainsection-tabContent { width:calc(100% - 270px);}
    .ssmainsection { padding: 90px 30px; 52px }
    #logout-btn {bottom: 56px;position: absolute;right: 60px;}
    .ssmainsection-tabContent { padding: 30px 30px 52px;}
    /* contact_preference */
    /*     .ssmainsection-tabContent .contact_infos_inner.checkbox:after { left: -30px; width: calc(100% + 60px); } */
}
@media screen and (max-width:1440px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent { padding: 40px 30px; }
}
@media screen and (max-width:1280px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent h4 { font-size: 22px; }
    .ssmainsection-tabContent h5 { font-size: 14px; }
    .ssmainsection-tabContent .contactSection a { font-size: 12px; }
    .ssmainsection-tabs ul li { font-size: 16px; line-height: 22px; }

    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 38%; }
}
@media screen and (max-width:1231px){
    /*  Overall Dashboard   */
    /*   Header Part   */
    .headerSection { flex-direction: column; align-items: start; gap: 20px; }
    .contactSection { width: 100%; flex-wrap: wrap; justify-content: start; }
    .yourSubs { width: 100%; }

    /* Bill&Payment and Contract */
    .bill_info, .payment_info, .contracts_info { width: 100%; overflow-x: scroll; }
    .bill_info_inner, .payment_info_inner, .contracts_info_inner { width: 799px; }
    .bill_info::-webkit-scrollbar-track,
    .payment_info::-webkit-scrollbar-track,
    .contracts_info::-webkit-scrollbar-track { background-color: transparent; }
    .bill_info::-webkit-scrollbar,
    .payment_info::-webkit-scrollbar,
    .contracts_info::-webkit-scrollbar{ height: 5px; background-color: #F5F5F5; }
    .bill_info::-webkit-scrollbar-thumb,
    .payment_info::-webkit-scrollbar-thumb,
    .contracts_info::-webkit-scrollbar-thumb { background-color: #000000; }
    .yourSubs {display: none;}
}
@media screen and (max-width:1158px){
    .listContent ul li {
        font-size: 14px;
    }
    .listHeadings ul li {
        font-size: 14px;
    }
}
@media screen and (max-width:991px){
    /*  Overall Dashboard   */
    /*   Header Part   */
    .titleCol, .valueCol { width: 48%; }
    .valueCol { text-align: right; }
    .accountBalance { padding: 24px 16px; }
    .ssmainsection-tabs { max-width: 320px;  width:100%; position:relative; }
    .ssmainsection-tabContent { width: calc(100% - 220px);padding: 30px 20px; }
    .ssmainsection { padding: 90px 15px; 30px }
    .ssmainsection-tabs ul li .tab-trigger { padding:15px; }
    .ssmainsection { flex-direction: column; align-items: center; gap: 30px; }
    .ssmainsection-tabContent { width: 100%; }
    .selected-tag { cursor:pointer; display:block }
    .ssmainsection-tabs ul li,
    .ssmainsection-tabs ul li.active { border-radius: 12px; background: #f38020; color: #fff; }
    .ssmainsection-tabs ul li:hover, .ssmainsection-tabs ul li:active { color: #000; background-color: #fff; border-radius: 0px; }
    .ssmainsection-tabs ul { padding: 0; display: none; position: absolute; top: 100%;
        left: 0; overflow-y: scroll; width: 100%; background: #f38020; z-index: 1000; height: 200px; }
    .selected-tag {background-color: #fff;padding: 15px;border-radius: 12px;position:relative;}
    .selected-tag.no-lower-border { border-radius: 12px 12px 0 0; }
    .selected-tag::before { content: "▼"; position: absolute; right: 10px; top: 50%;
        transform: translateY(-50%); transition: all ease-in 0.3s; pointer-events: none; }
    .selected-tag.no-lower-border::before { transform: rotateX(180deg); top: 25%; }
    .ssmainsection-tabs ul::-webkit-scrollbar-track { background-color: transparent; }
    .ssmainsection-tabs ul::-webkit-scrollbar { width: 5px; background: #f38020; }
    .ssmainsection-tabs ul::-webkit-scrollbar-thumb { background-color: #000000; }
    .accountBalance { flex-wrap: wrap; gap: 10px; }

    /* contact_preference */
    /*     .ssmainsection-tabContent .contact_infos_inner.checkbox:after {
    left: -20px; width: calc(100% + 40px); } */

    /* Home */
    .ssmainsection-tabContent .itemDetailList .row, .ssmainsection-tabContent .itemDetailListt .row { padding: 15px; }
    #logout-btn {bottom: -62px;position: absolute;right: 60px;}
    .welcomeFirstName {left: 15px;margin-left: 0;}
}
@media(max-width:767px){
    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row { flex-wrap: wrap; align-items: start; gap: 15px; padding-bottom: 30px; }
    .ssmainsection-tabContent .contact_infos_inner .row label { display: block; }
    .ssmainsection-tabContent .contact_infos_inner .row div:first-child { width: 100%; }
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 48%; }
    .ssmainsection-tabContent .contact_infos_inner .row:first-child { opacity: 0; height: 0; }
    .ssmainsection-tabContent .contact_infos_inner.checkbox .row label span { display:block }
    .welcomeFirstName {position: absolute;top: 95px !important;bottom: unset !important;left: 0;margin-left: 0;max-width: 100%;width: 100%;text-align: center !important;}
    .welcomeFirstName p {color: #fff;font-size: 18pt;}
    .ssmainsection {padding: 150px 15px 90px;}
}
@media(max-width:640px){
    /*  Overall Dashboard   */
    .ssmainsection-tabContent { padding:30px 15px; }

    /* Change Password */
    .change_password_inner > div { flex-direction: column; }
    .change_password_inner > div label { width: 100%; padding-bottom: 4px; }
    .change_password_inner { gap: 15px; }
}
@media(max-width:575px){
    /* contact_preference */
    .ssmainsection-tabContent .contact_infos_inner .row div:first-child { width: 100%; }
    .ssmainsection-tabContent .contact_infos_inner .row div { max-width: 100%; width: 100%; }
    .ssmainsection-tabContent .itemDetailList .row, .ssmainsection-tabContent .itemDetailListt .row { flex-direction: column; align-items: center; }
    .titleCol, .valueCol { width: 100%; text-align: center; }
    .mp-amountDetail .itemDetailListt .row .valueCol{text-align: center;}
    .selectField {
        position: relative;
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
    }
    /* -------- Search Box ----------- */
    .selectboxSearchWrapper{
        column-gap: 0px;
        /*         row-gap:25px; */
        flex-direction: column;
    }

    .searchResultsWrapper {
        max-width: 100%;
        flex-basis: 100%;
    }
    .search-wrapper {
        margin-top: 10px !important;
        /* max-width: 100%; */
    }
    /* -------- Search Box ----------- */
}


/*  Ticket section styles  */

.ticket-main {
    margin-top: 28px; 
}

.ticket-main, .ticket-main button, .ticket-main input, .ticket-main select, .ticket-main p {
    font-size: 14px;
}

#new-service-request-form {
    margin: 42px 0 2em 0;
    background-color: #F0F8FF;
    padding: 15px 30px;
    border-radius: 14px;
}

#new-service-request-form h4, 
main.ticket-main #ticket-detail div.card-header h2.card-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    color: #64748B;
}

main.ticket-main #ticket-detail div.card-header {
    margin-bottom: 14px;
}

#new-service-request-form label {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #020617;
}

#new-service-request-form .SelectAnotherSub {
    margin-top: 0; 
}
#new-service-request-form select {
    margin-bottom: 0.5em;
    font-size: 14px;
}

#new-service-request-form #ticket-attachments {
    display:none; 
}

#new-service-request-form .attach-wrapper label {
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: inline-block;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 14px;
    transition: all .3s ease-in;
    cursor: pointer;
}

#new-service-request-form .button-row {
    margin-top: 14px;
}

#new-service-request-form .form-checkbox-row label {
    margin: 12px 32px 0 32px;
}

#new-service-request-form .form-checkbox-row input[type=checkbox] {
    appearance: auto;
}

.ticket-main hr {
    margin: 14px 0;
    border-width: 0;
}

#new-service-request .card-header button {
    float: right;
    margin-top: -38px;
    cursor: pointer;
}

main.ticket-main section.card div.table-wrapper table.history-table {
    width: 100%;
}

main.ticket-main section.card div.table-wrapper table.history-table tbody tr.row-clickable {
    cursor: pointer;
}

main.ticket-main section.card div.table-wrapper table.history-table tbody tr.row-clickable:hover {
    border-colo
}

main.ticket-main section.card div.table-wrapper table.history-table th {
    background-color: #f0f8ff;
    font-size: 14px;
    font-weight: 500;
    color: #020617;
    line-height: 20px;
    border: 1px solid #E2E8F0;
}

main.ticket-main section.card div.table-wrapper table.history-table td {
    background-color: #f7f8fa;
    font-size: 14px;
    font-weight: 500;
    color: #020617;
    line-height: 20px;
    border: 1px solid #E2E8F0
}

.ticket-main #ticket-detail .detail-grid, .ticket-main #ticket-detail .detail-box {
    background-color: #F0F8FF; 
}

.ticket-main #ticket-detail .detail-grid div, 
.ticket-main #ticket-detail .detail-box div,
.ticket-main #ticket-detail .detail-box p,
.ticket-main #ticket-detail div.conversation-box {
    border-bottom: 1px solid #E2E8F0;
    padding: 16px 44px;
}

.ticket-main #ticket-detail .reply-section #reply-attachments {
    display: none; 
}

.ticket-main #ticket-detail .reply-section div {
    margin-top: 14px;
}

.ticket-main #ticket-detail .reply-section textarea {
    width: 100%;
    height: 8em; 
}

.ticket-main #ticket-detail .reply-section .reply-footer label {
    align-items: center;
    background-color: #f38020;
    color: #fff;
    display: inline-block;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    margin: 14px 0;
    transition: all .3s ease-in;
    cursor: pointer;
}

.testLink {
    color: transparent; 
}
.testLink:hover {
    color: red; 
}

/* Fix for corner gap on finger tabs */
.ssmainsection-tabs ul li {
    margin-right: -1em;
}