/* ============================================
   obdx-base.css — OBDX Production CSS
   Oracle Banking Digital Experience Framework
   Aman Bank — replaced from production source
   ============================================ */

.grow {
  height: 0;
  transform: scale(0);
  opacity: 0
}
.grow-end {
  transform: scale(1);
  opacity: 1;
  transition: .7s, opacity .3s ease-in-out
}
body, html {
  height: 100%;
  -webkit-text-size-adjust: none;
  min-height: 100vh;
  position: relative
}
body {
  padding: 0;
  margin: 0;
  background: #fff;
  font-size: .9rem;
  color: #003559;
  overflow-y: scroll;
  -webkit-text-size-adjust: none
}
body::after, body::before {
  box-sizing: border-box;
  content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  background-color: #fafafa;
  z-index: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .4s .4s
}
[dir=rtl] body::after, [dir=rtl] body::before { right: 0 }
[dir=ltr] body::after, [dir=ltr] body::before { left: 0 }
body::before { top: 0; transform: translateY(-100%) }
body::after { bottom: 0; transform: translateY(100%) }
body.page-is-changing::after, body.page-is-changing::before {
  transform: translateY(0);
  transition: transform .4s
}
article, aside, footer, header, hgroup, main, nav, section { display: block }
.cd-cover-layer {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 3;
  visibility: hidden;
  background-color: #003559;
  transition: opacity .4s .4s, visibility .8s
}
.page-is-changing .cd-cover-layer {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility
}
.page-is-changing .cd-logo {
  position: fixed;
  z-index: 4;
  background: url(../images/brand/logo.svg) no-repeat;
  top: 40%;
  animation: .8s animatezoom;
  left: calc(50% - 5.6rem);
  width: 11.3rem;
  height: 10%
}
.cd-loading-bar {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 50%;
  height: .1rem;
  width: 90%;
  visibility: hidden;
  transition: visibility .4s, transform .4s ease-in;
  backface-visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(255, 255, 255, .4)
}
.cd-loading-bar::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform: scaleX(0);
  transform-origin: left center
}
[dir=rtl] .cd-loading-bar::before { right: 0 }
[dir=ltr] .cd-loading-bar::before { left: 0 }
.page-is-changing .cd-loading-bar {
  visibility: visible;
  transform: translateX(-50%) translateY(-50%) scaleX(.3)
}
.page-is-changing .cd-loading-bar::before {
  animation-duration: .8s;
  animation-delay: .8s;
  animation-name: example;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in
}
.se-pre-con.load-bar {
  position: relative;
  width: 100%;
  height: 5px;
  z-index: 3;
  background-color: #82bee3
}
.se-pre-con.load-bar .bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center
}
.se-pre-con.load-bar .bar:nth-child(1) { background-color: #3287c6; animation: 3s linear infinite loading }
.se-pre-con.load-bar .bar:nth-child(2) { background-color: #2b95d9; animation: 3s linear 1s infinite loading }
.se-pre-con.load-bar .bar:nth-child(3) { background-color: #82bee3; animation: 3s linear 2s infinite loading }
@media screen and (max-width:780px) {
  .page-is-changing .cd-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/brand/logo.svg) no-repeat;
    position: fixed;
    z-index: 4;
    margin: 0;
    top: 40%;
    left: calc(50% - 5.6rem);
    width: 11.3rem;
    height: 10%
  }
}
@keyframes animatezoom { 0%, 100% { transform: scale(1) } 1% { transform: scale(.6) } }
@keyframes example { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes loading { from { left: 50%; width: 0; z-index: 100 } 33.3333% { left: 0; width: 100%; z-index: 10 } to { left: 0; width: 100% } }
@keyframes loading-bar {
  0% { left: -100%; background: rgba(0, 135, 191, .5); box-shadow: inset 0 0 .6rem .1rem rgba(117, 182, 255, .5), 0 0 2.5rem .1rem #6987ff }
  50% { left: 100%; transform: rotateY(0) }
  51% { transform: rotateY(180deg) }
  100% { left: -100%; transform: rotateY(180deg); background: #0087bf; box-shadow: inset 0 0 .6rem .1rem rgba(117, 182, 255, .5), 0 0 1.9rem .1rem rgba(105, 135, 255, .3) }
}

/* ── OBDX Icon Font ── */
@font-face {
  font-family: obdx;
  src: url(../fonts/obdx.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block
}
[data-icon]:before {
  font-family: obdx !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
[class*=" icon-"]:before, [class^=icon-]:before {
  font-family: obdx !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.icon-account-access:before { content: "\e056" }
.icon-account-holder:before { content: "\e057" }
.icon-add-occupation:before { content: "\f010" }
.icon-add-on-card:before { content: "\e05a" }
.icon-alert:before { content: "\e05b" }
.icon-apply:before { content: "\e05c" }
.icon-approvals:before { content: "\e05d" }
.icon-arrow:before { content: "\e05e" }
.icon-arrow-down:before,
body .oj-button-menu-dropdown-icon:before,
body .oj-combobox-open-icon:before,
body .oj-select-open-icon:before { content: "\e05f" }
.icon-arrow-left:before { content: "\e061" }
.icon-arrow-right:before { content: "\e062" }
.icon-arrow-up:before { content: "\e063" }
.icon-assets:before { content: "\e064" }
.icon-attachment:before { content: "\e065" }
.icon-auto-pay:before { content: "\e066" }
.icon-back-arrow:before { content: "\e067" }
.icon-bank-details:before { content: "\e068" }
.icon-block-debit-card:before { content: "\e069" }
.icon-branch-details:before { content: "\e07a" }
.icon-calendar:before { content: "\e07b" }
.icon-cancel:before { content: "\e07c" }
.icon-cancel-card:before { content: "\e07d" }
.icon-card-preference:before { content: "\e07e" }
.icon-cc-mastercard:before { content: "\e07f" }
.icon-cc-visa:before { content: "\e070" }
.icon-change:before { content: "\e071" }
.icon-check:before { content: "\e072" }
.icon-check-box:before { content: "\e073" }
.icon-cheque-status-enquiry:before { content: "\e074" }
.icon-claim-money:before { content: "\e075" }
.icon-close:before { content: "\e076" }
.icon-comments:before { content: "\e077" }
.icon-compress:before { content: "\e078" }
.icon-confirm:before { content: "\e079" }
.icon-contact-info:before { content: "\e08a" }
.icon-copy:before { content: "\e08b" }
.icon-create:before { content: "\e08c" }
.icon-cross:before { content: "\e08d" }
.icon-current-assets:before { content: "\e08e" }
.icon-current-liabilities:before { content: "\e08f" }
.icon-dashboard:before { content: "\e080" }
.icon-debit-card:before { content: "\e081" }
.icon-delete:before { content: "\e082" }
.icon-delivery-preferences:before { content: "\e083" }
.icon-disbursement-detail:before { content: "\e084" }
.icon-download:before { content: "\e085" }
.icon-drop-down:before { content: "\e086" }
.icon-drop-left:before { content: "\e087" }
.icon-drop-right:before { content: "\e088" }
.icon-drop-up:before { content: "\e089" }
.icon-edit:before { content: "\e09a" }
.icon-eligibility:before { content: "\e09b" }
.icon-employment:before { content: "\e09c" }
.icon-exchange:before { content: "\e09d" }
.icon-expand:before { content: "\e09e" }
.icon-expense:before { content: "\e09f" }
.icon-eye:before { content: "\e090" }
.icon-eye-slash:before { content: "\e091" }
.icon-facebook:before { content: "\e092" }
.icon-fees-charges:before { content: "\e093" }
.icon-file-pdf:before { content: "\e094" }
.icon-file-text:before { content: "\e095" }
.icon-file-upload:before { content: "\e096" }
.icon-filter:before { content: "\e097" }
.icon-foreign-exchange:before { content: "\e098" }
.icon-forward-arrow:before { content: "\f00a" }
.icon-funds:before { content: "\f00b" }
.icon-goals:before { content: "\f00c" }
.icon-google-plus:before { content: "\f00d" }
.icon-heart:before { content: "\f00e" }
.icon-heart-fill:before { content: "\f00f" }
.icon-help:before { content: "\f000" }
.icon-high-priority:before { content: "\f001" }
.icon-history:before { content: "\f002" }
.icon-home:before { content: "\f003" }
.icon-host:before { content: "\f004" }
.icon-income:before { content: "\f005" }
.icon-information:before { content: "\f006" }
.icon-insurance:before { content: "\f007" }
.icon-interest-certificate:before { content: "\f008" }
.icon-issue:before { content: "\f009" }
.icon-liabilities:before { content: "\f01a" }
.icon-limit:before { content: "\f01b" }
.icon-linkedin:before { content: "\f01c" }
.icon-loans:before { content: "\f01d" }
.icon-location-arrow:before { content: "\f01e" }
.icon-login:before { content: "\f01f" }
.icon-logout:before { content: "\f020" }
.icon-mailbox-view:before { content: "\f022" }
.icon-maintenance:before { content: "\f023" }
.icon-medium-priority:before { content: "\f024" }
.icon-menu-bar:before { content: "\e000" }
.icon-minus-circle:before { content: "\e001" }
.icon-module:before { content: "\e002" }
.icon-more:before { content: "\e003" }
.icon-more-vertical:before { content: "\e004" }
.icon-move:before { content: "\e005" }
.icon-no:before { content: "\e006" }
.icon-offers:before { content: "\e007" }
.icon-ok:before { content: "\e008" }
.icon-on-screen-alerts:before { content: "\e009" }
.icon-onboarding:before { content: "\e00a" }
.icon-others:before { content: "\e00b" }
.icon-password:before { content: "\e00c" }
.icon-pay:before { content: "\e00d" }
.icon-payments:before { content: "\e00e" }
.icon-pfm:before { content: "\e00f" }
.icon-phone:before { content: "\e010" }
.icon-plus:before { content: "\e011" }
.icon-plus-circle:before { content: "\e012" }
.icon-pre-processed:before { content: "\e013" }
.icon-primary-info:before { content: "\e014" }
.icon-print:before { content: "\e015" }
.icon-proof-of-identity:before { content: "\e016" }
.icon-push-notifications:before { content: "\e017" }
.icon-qr-code:before { content: "\e018" }
.icon-quick-access:before { content: "\e019" }
.icon-radio:before { content: "\e01a" }
.icon-radius:before { content: "\e01b" }
.icon-re-centre:before { content: "\e01c" }
.icon-received:before { content: "\e01d" }
.icon-redeem:before { content: "\e01e" }
.icon-refresh:before { content: "\e01f" }
.icon-reject:before { content: "\e020" }
.icon-remarks:before { content: "\e021" }
.icon-repay:before { content: "\e022" }
.icon-repayment:before { content: "\e023" }
.icon-reply:before { content: "\e024" }
.icon-reports:before { content: "\e025" }
.icon-request:before { content: "\e026" }
.icon-request-chequebook:before { content: "\e027" }
.icon-request-money:before { content: "\e028" }
.icon-request-parameters:before { content: "\e029" }
.icon-request-pin:before { content: "\e02a" }
.icon-review:before { content: "\e02b" }
.icon-save:before { content: "\e02c" }
.icon-schedule:before { content: "\e02d" }
.icon-search:before { content: "\e02e" }
.icon-security-question:before { content: "\e02f" }
.icon-sent-mail:before { content: "\e030" }
.icon-setting:before { content: "\e031" }
.icon-share:before { content: "\e032" }
.icon-sms:before { content: "\e033" }
.icon-sort:before { content: "\e034" }
.icon-sort-asc:before { content: "\e035" }
.icon-sort-desc:before { content: "\e036" }
.icon-specifications:before { content: "\e037" }
.icon-spends:before { content: "\e038" }
.icon-split:before { content: "\e039" }
.icon-star:before { content: "\e03a" }
.icon-start-transfer:before { content: "\e03b" }
.icon-steps:before { content: "\e03c" }
.icon-stop-transfer:before { content: "\e03d" }
.icon-stop-unblock-cheque:before { content: "\e03e" }
.icon-submit:before { content: "\e03f" }
.icon-subscription:before { content: "\e040" }
.icon-success:before { content: "\e041" }
.icon-summary:before { content: "\e042" }
.icon-tds:before { content: "\e043" }
.icon-text:before { content: "\e044" }
.icon-top-up:before { content: "\e046" }
.icon-transfer:before { content: "\e047" }
.icon-trends:before { content: "\e048" }
.icon-twitter:before { content: "\e049" }
.icon-undo:before { content: "\e04a" }
.icon-unfavourite:before { content: "\e04b" }
.icon-update:before { content: "\e04c" }
.icon-upload:before { content: "\e04d" }
.icon-verify:before { content: "\e050" }
.icon-view-casa:before { content: "\e051" }
.icon-view-edit:before { content: "\e052" }
.icon-view-statement:before { content: "\e053" }
.icon-warning:before { content: "\e054" }
.icon-yes:before { content: "\e055" }
.icon-gas:before { content: "\f011" }
.icon-electricity:before { content: "\f012" }
.icon-dth:before { content: "\f013" }
.icon-music:before { content: "\f014" }
.icon-medical:before { content: "\f015" }
.icon-internet:before { content: "\f016" }
.icon-water:before { content: "\f018" }
.icon-telecom:before { content: "\f019" }
.icon-multi-select:before { content: "\f04a" }
.icon-keyboard:before { content: "\f04b" }
.icon-thumbs-up:before { content: "\e045" }
.icon-mailbox:before { content: "\f04c" }
.icon-mail-box:before { content: "\f04d" }
.icon-search-line:before { content: "\f04e" }
.icon-reset-fit:before { content: "\f05a" }
.icon-zoom-out:before { content: "\f05b" }
.icon-zoom-in:before { content: "\f05c" }
.icon-liquidity-management:before { content: "\f05d" }
.icon-detail-view:before { content: "\f05e" }
.icon-tabular-view:before { content: "\f05f" }
.icon-summary-view:before { content: "\f025" }
.icon-assets-info:before { content: "\f026" }
.icon-basic-primary-info:before { content: "\f027" }
.icon-card-addon:before { content: "\f028" }
.icon-card-balance-transfer:before { content: "\f029" }
.icon-expense-info:before { content: "\f06a" }
.icon-funding-table:before { content: "\f06b" }
.icon-identity-info:before { content: "\f06c" }
.icon-income-info:before { content: "\f06d" }
.icon-liabilities-info:before { content: "\f06e" }
.icon-occupation-info:before { content: "\f06f" }
.icon-primary-registration:before { content: "\f021" }
.icon-property-info:before { content: "\f031" }
.icon-vehicle-info:before { content: "\f032" }
.icon-virtual-account:before { content: "\f033" }
.icon-requirements:before { content: "\f034" }
.icon-account-funding:before { content: "\f035" }
.icon-account-summary:before { content: "\f036" }
.icon-application-status-history:before { content: "\f037" }
.icon-application-repayment-input:before { content: "\f038" }
.icon-application-fees-input:before { content: "\f039" }
.icon-application-fees-view:before { content: "\f07a" }
.icon-application-loan-statement-input:before { content: "\f07b" }
.icon-application-offer:before { content: "\f07c" }
.icon-card-additional-preferences:before { content: "\f07d" }
.icon-card-delivery-preferences:before { content: "\f07e" }
.icon-auto-pay-copy:before { content: "\f07f" }
.icon-card-holder-preferences:before { content: "\f030" }
.icon-card-membership:before { content: "\f040" }
.icon-card-preferences:before { content: "\f041" }
.icon-loan-account-preference:before { content: "\f042" }
.icon-loan-account-summary:before { content: "\f043" }
.icon-loan-account-configuration:before { content: "\f044" }
.icon-anti-money-laundering:before { content: "\f045" }
.icon-downward-arrow:before { content: "\f048" }
.icon-pause:before { content: "\f049" }
.icon-play:before { content: "\f08a" }
.icon-upward-arrow:before { content: "\f08b" }
.icon-resume:before { content: "\f08c" }
.icon-add:before { content: "\f08d" }
.icon-accounts:before { content: "\f08e" }
.icon-new-account:before { content: "\f08f" }
.icon-user:before { content: "\f050" }
.icon-user-group:before { content: "\f051" }
.icon-chat:before { content: "\f052" }
.icon-upi:before { content: "\f053" }
.icon-re-initiate:before { content: "\f054" }
.icon-minus:before { content: "\f055" }
.icon-tree:before { content: "\f047" }

[dir=rtl] .icon-login { transform: rotate(180deg) }
[dir=rtl] .icon-arrow-left:before { content: "\e062" }
[dir=rtl] .icon-arrow-right:before { content: "\e061" }
[dir=rtl] .icon-back-arrow:before { content: "\f00a" }
[dir=rtl] .icon-forward-arrow:before { content: "\e067" }
[dir=rtl] .icon-drop-left:before { content: "\e088" }
[dir=rtl] .icon-drop-right:before { content: "\e087" }

/* ── Roboto Font (from Google Fonts CDN) ── */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── OBDX Production :root Variables ── */
:root {
  --header-gradient-start-color: rgb(255, 255, 255);
  --header-gradient-end-color: rgb(255, 255, 255);
  --header-gradient-direction: right;
  --header-foreground-color: rgb(2, 98, 159);
  --header-border-bottom-color: rgb(218, 218, 218);
  --footer-gradient-start-color: rgb(0, 53, 89);
  --footer-gradient-end-color: rgb(0, 53, 89);
  --footer-gradient-direction: right;
  --welcome-box-gradient-start-color: rgb(0, 53, 89);
  --welcome-box-gradient-end-color: rgb(0, 53, 89);
  --welcome-box-gradient-direction: right;
  --button-primary-border-color: rgb(0, 53, 89);
  --button-primary-gradient-start-color: rgb(0, 53, 89);
  --button-primary-gradient-end-color: rgb(0, 53, 89);
  --button-primary-gradient-direction: right;
  --button-secondary-border-color: rgb(126, 25, 70);
  --button-secondary-gradient-start-color: rgb(126, 25, 70);
  --button-secondary-gradient-end-color: rgb(126, 25, 70);
  --button-secondary-gradient-direction: right;
  --button-tertiary-border-color: rgb(83, 87, 95);
  --button-help-border-color: rgb(0, 53, 89);
  --button-help-gradient-start-color: rgb(0, 53, 89);
  --button-help-gradient-end-color: rgb(0, 53, 89);
  --button-help-gradient-direction: right;
  --button-help-foreground-color: rgb(255, 255, 255);
  --buttonset-border-color: rgb(0, 53, 89);
  --buttonset-label-foreground-color: rgb(0, 53, 89);
  --buttonset-selected-border-color: rgb(0, 53, 89);
  --buttonset-selected-gradient-start-color: rgb(0, 53, 89);
  --buttonset-selected-gradient-end-color: rgb(0, 53, 89);
  --buttonset-selected-gradient-direction: right;
  --modal-window-header-gradient-start-color: rgb(0, 53, 89);
  --modal-window-header-gradient-end-color: rgb(0, 53, 89);
  --modal-window-header-gradient-direction: right;
  --nav-default-foreground-color: rgb(0, 106, 181);
  --nav-hover-foreground-color: rgb(0, 106, 181);
  --nav-hover-border-color: rgba(0, 106, 181, 0);
  --nav-selected-foreground-color: rgb(0, 106, 181);
  --nav-selected-border-color: rgb(0, 106, 181);
  --overlay-header-foreground-color: rgb(0, 53, 89);
}
:root {
  --base-dimension-docked-menu-height: 5.5rem;
  --base-dimension-menu-width: 18rem;
  --base-color-primary: #2c3251;
  --base-color-secondary: #003559;
  --base-color-secondary-text: #003559;
  --base-color-success: #2E7D32;
  --base-color-warning: #c35409;
  --base-color-warning-light: #fdf4e3;
  --base-color-success-light: #e7f6e8;
  --base-color-danger-light: #fdefef;
  --base-color-secondary-text-white: #e8e8e8;
  --base-color-danger: #dc2518;
  --base-border-default: rgba(44,50,81,0.1);
  --base-background-primary: #fff;
  --base-background-tertiary: #e7e7e9;
  --base-background-secondary: #fafafa;
  --base-background-disable: rgba(44,50,81,0.2);
  --base-text-primary: #2c3251;
  --base-text-secondary: rgba(44,50,81,0.8);
  --base-text-tertiary: #2c3251;
  --base-font-family: Roboto, sans-serif;
  --base-font-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,700";
  --base-font-weight-regular: 400;
  --base-font-weight-light: 300;
  --base-font-weight-bold: 700;
  --base-font-size-small: .7rem;
  --base-font-size-large: 1rem;
  --base-font-size-larger: 1.1rem;
  --base-font-size-default: .9rem;
  --base-font-size-medium: .8rem;
  --link-hover: #0A8BE6;
  --link-base: #006ab5;
  --link-font-size: .9rem;
  --link-font-weight: 400;
  --base-input-color: #fff;
  --base-transaprent-color: rgba(0,0,0,0);
  --button-height: 2.3rem;
  --button-padding: 0 0.5rem;
  --button-align: flex-start;
  --button-icon: none;
  --button-font-weight: 300;
  --button-color: #000;
  --button-font-size-text: .9rem;
  --button-font-size-icon: 1.1rem;
  --button-primary-gradient-start-color: #003559;
  --button-primary-gradient-end-color: #003559;
  --button-primary-gradient-direction: bottom;
  --button-primary-foreground-color: #fff;
  --button-primary-font-size: .9rem;
  --button-primary-font-weight: 300;
  --button-primary-border-radius: .1rem;
  --button-primary-border-width: .055rem;
  --button-primary-border-color: #003559;
  --button-secondary-gradient-start-color: rgba(44,50,81,0.8);
  --button-secondary-gradient-end-color: rgba(44,50,81,0.8);
  --button-secondary-gradient-direction: bottom;
  --button-secondary-foreground-color: #fff;
  --button-secondary-font-size: .9rem;
  --button-secondary-font-weight: 300;
  --button-secondary-border-radius: .1rem;
  --button-secondary-border-width: .055rem;
  --button-secondary-border-color: rgba(44,50,81,0.8);
  --button-tertiary-gradient-start-color: rgba(44,50,81,0.7);
  --button-tertiary-gradient-end-color: rgba(44,50,81,0.7);
  --button-tertiary-gradient-direction: bottom;
  --button-tertiary-foreground-color: #fff;
  --button-tertiary-font-size: .9rem;
  --button-tertiary-font-weight: 300;
  --button-tertiary-border-radius: .1rem;
  --button-tertiary-border-width: .055rem;
  --button-tertiary-border-color: rgba(44,50,81,0.7);
  --button-help-gradient-start-color: #fff;
  --button-help-gradient-end-color: #fff;
  --button-help-gradient-direction: bottom;
  --button-help-foreground-color: #006AB5;
  --button-help-font-size: .9rem;
  --button-help-font-weight: 300;
  --button-help-border-radius: .1rem;
  --button-help-border-width: .055rem;
  --button-help-border-color: #006AB5;
  --form-line-height: 1.8rem;
  --form-padding: 1.3rem 0.6rem 0;
  --form-padding-small: 0.6rem 0 0;
  --form-border-width: .1rem;
  --form-shadow: none;
  --form-title-text-transform: none;
  --form-header-foreground-color: #2c3251;
  --form-header-font-size: 1.1rem;
  --form-header-font-weight: 400;
  --form-input-background-base: rgba(0,0,0,0);
  --form-input-background-hover: rgba(0,0,0,0);
  --form-input-background-focus: rgba(0,0,0,0);
  --form-input-background-disable: rgba(0,0,0,0);
  --form-input-text: .9rem;
  --form-input-color-base: #2c3251;
  --form-input-color-hover: #fff;
  --form-input-color-focus: #2c3251;
  --form-input-color-disable: rgba(44,50,81,0.7);
  --form-input-border-radius: 0;
  --form-input-border-color: #ccc;
  --form-input-button-height: 2.3rem;
  --form-input-button-border-radius: .3rem;
  --form-input-button-border-width: 0;
  --form-gradient-start-color: #fff;
  --form-gradient-end-color: #fff;
  --form-gradient-direction: bottom;
  --form-foreground-color: #2c3251;
  --form-font-size: .9rem;
  --form-font-weight: 400;
  --form-icon-size: 8rem;
  --form-label-foreground-color: rgba(44,50,81,0.8);
  --form-label-font-size: .8rem;
  --form-label-font-weight: 300;
  --form-info-txt-foreground-color: #2c3251;
  --form-info-txt-font-size: .8rem;
  --form-info-txt-font-weight: 300;
  --form-page-title-foreground-color: #2c3251;
  --form-page-title-font-size: 1.1rem;
  --form-page-title-font-weight: 400;
  --banner-padding: .6rem;
  --banner-background: #ebecec;
  --banner-text-primary: rgba(44,50,81,0.8);
  --banner-text-secondary: #2c3251;
  --banner-gradient-start-color: #ebecec;
  --banner-gradient-end-color: #ebecec;
  --banner-gradient-direction: bottom;
  --banner-foreground-color: #2c3251;
  --banner-font-size: .9rem;
  --banner-font-weight: 400;
  --review-banner-gradient-start-color: #fdf4e3;
  --review-banner-gradient-end-color: #fdf4e3;
  --review-banner-gradient-direction: bottom;
  --review-banner-border-color: #B86200;
  --review-banner-border-width: .4rem;
  --review-banner-border-radius: .01rem;
  --review-banner-foreground-color: #2c3251;
  --review-banner-font-size: .8rem;
  --review-banner-font-weight: 700;
  --nav-hover-text: #006c75;
  --nav-hover-border: #006c75;
  --nav-hover-background: #e7e7e9;
  --nav-hover-gradient-start-color: #EDEDED;
  --nav-hover-gradient-end-color: #e7e7e9;
  --nav-hover-gradient-direction: bottom;
  --nav-hover-border-color: #006c75;
  --nav-hover-border-width: .2rem;
  --nav-hover-border-radius: .01rem;
  --nav-hover-foreground-color: #007580;
  --nav-hover-font-size: 1rem;
  --nav-hover-font-weight: 400;
  --nav-selected-text: #003559;
  --nav-selected-border: #003559;
  --nav-selected-background: #fff;
  --nav-selected-border-color: #003559;
  --nav-selected-border-width: .2rem;
  --nav-selected-border-radius: .01rem;
  --nav-selected-foreground-color: #003559;
  --nav-selected-font-size: 1rem;
  --nav-selected-font-weight: 400;
  --nav-default-text: #2c3251;
  --nav-default-border: none;
  --nav-default-background: #fff;
  --nav-default-foreground-color: #2c3251;
  --nav-default-font-size: .9rem;
  --nav-default-font-weight: 400;
  --table-header-background: #f5f5f5;
  --table-header-color: #333;
  --table-header-gradient-start-color: #fff;
  --table-header-gradient-end-color: #fff;
  --table-header-gradient-direction: bottom;
  --table-header-foreground-color: #333;
  --table-header-font-size: .9rem;
  --table-header-font-weight: 400;
  --table-body-gradient-start-color: #fff;
  --table-body-gradient-end-color: #fff;
  --table-body-gradient-direction: bottom;
  --table-body-foreground-color: #2c3251;
  --table-body-font-size: .9rem;
  --table-body-font-weight: 300;
  --table-body-icon-size: 8rem;
  --table-tr-hover-color: rgba(231,231,231,0.6);
  --table-border-color: #fff;
  --table-border-width: .05rem;
  --table-border-radius: 0;
  --list-drop-background: #c2eaf3;
  --scroll-track: #e6e6e6;
  --scroll-thumb: #999;
  --menu-background: #fff;
  --menu-gradient-start-color: #fff;
  --menu-gradient-end-color: #fff;
  --menu-gradient-direction: bottom;
  --menu-foreground-color: #02629f;
  --menu-font-size: .9rem;
  --menu-font-weight: 400;
  --menu-hover-color: #003d69;
  --menu-selected-color: purple;
  --menu-icon-font-size: 1.3rem;
  --welcome-box-gradient-start-color: #003559;
  --welcome-box-gradient-end-color: #003559;
  --welcome-box-gradient-direction: bottom;
  --welcome-box-font-size: .9rem;
  --welcome-box-font-weight: 400;
  --welcome-box-foreground-color: #fff;
  --color-white: #fff;
  --color-deep-yellow: #fbce4a;
  --color-deep-yellow-darken: #F3b705;
  --header-foreground-color: #fff;
  --header-height: 3.4rem;
  --header-small-height: 3rem;
  --header-gradient-start-color: #003559;
  --header-gradient-end-color: #003559;
  --header-border-bottom-color: #003559;
  --header-gradient-direction: bottom;
  --header-font-size: 1rem;
  --header-font-weight: 300;
  --header-icon-size: 1.3rem;
  --footer-gradient-start-color: #003559;
  --footer-gradient-end-color: #003559;
  --footer-gradient-direction: bottom;
  --footer-font-size: .8rem;
  --footer-foreground-color: #fff;
  --footer-height: 2rem;
  --help-panel-gradient-start-color: #fff;
  --help-panel-gradient-end-color: #fff;
  --help-panel-gradient-direction: bottom;
  --help-panel-foreground-color: #2c3251;
  --help-panel-font-size: .9rem;
  --help-panel-font-weight: 400;
  --help-panel-icon-size: 5rem;
  --help-panel-header-foreground-color: #2c3251;
  --help-panel-header-font-size: 1.05rem;
  --help-panel-header-font-weight: 700;
  --app-background-gradient-direction: bottom;
  --app-background-gradient-start-color: #fafafa;
  --app-background-gradient-end-color: #fafafa;
  --modal-window-header-gradient-direction: bottom;
  --modal-window-header-gradient-start-color: #003559;
  --modal-window-header-gradient-end-color: #003559;
  --modal-window-header-foreground-color: #fff;
  --modal-window-header-font-size: 1rem;
  --modal-window-header-font-weight: 300;
  --modal-window-body-gradient-direction: bottom;
  --modal-window-body-gradient-start-color: #fff;
  --modal-window-body-gradient-end-color: #fff;
  --modal-window-body-foreground-color: #2c3251;
  --modal-window-body-font-size: .9rem;
  --modal-window-body-font-weight: 300;
  --buttonset-gradient-direction: bottom;
  --buttonset-gradient-start-color: #fff;
  --buttonset-gradient-end-color: #fff;
  --buttonset-border-color: #cbcccd;
  --buttonset-border-width: .05rem;
  --buttonset-border-radius: .01rem;
  --buttonset-label-foreground-color: #003559;
  --buttonset-label-font-size: .8rem;
  --buttonset-label-font-weight: 400;
  --buttonset-selected-gradient-direction: bottom;
  --buttonset-selected-gradient-start-color: #003559;
  --buttonset-selected-gradient-end-color: #003559;
  --buttonset-selected-border-color: #fff;
  --buttonset-selected-border-width: .0155rem;
  --buttonset-selected-border-radius: .1rem;
  --buttonset-selected-label-foreground-color: #fff;
  --buttonset-selected-label-font-size: .8rem;
  --buttonset-selected-label-font-weight: 400;
  --disabledinput-gradient-direction: bottom;
  --disabledinput-gradient-start-color: #fafafa;
  --disabledinput-gradient-end-color: #fafafa;
  --disabledinput-foreground-color: #2c3251;
  --disabledinput-font-size: .9rem;
  --disabledinput-font-weight: 300;
  --confirm-screen-border-color: #003559;
  --confirm-screen-border-width: .4rem;
  --confirm-screen-border-bottom-color: rgba(44,50,81,0.1);
  --confirm-screen-border-bottom-width: .05rem;
  --confirm-screen-border-radius: .01rem;
  --confirm-screen-text-foreground-color: #2c3251;
  --confirm-screen-text-font-size: .9rem;
  --confirm-screen-text-font-weight: 700;
  --confirm-screen-success-border-color: #003559;
  --confirm-screen-success-border-width: .4rem;
  --confirm-screen-success-border-radius: .01rem;
  --confirm-screen-success-gradient-direction: bottom;
  --confirm-screen-success-gradient-start-color: #e7f6e8;
  --confirm-screen-success-gradient-end-color: #e7f6e8;
  --confirm-screen-error-border-color: #e42323;
  --confirm-screen-error-border-width: .4rem;
  --confirm-screen-error-border-radius: .01rem;
  --confirm-screen-error-gradient-direction: bottom;
  --confirm-screen-error-gradient-start-color: rgba(228,35,35,0.1);
  --confirm-screen-error-gradient-end-color: rgba(228,35,35,0.1);
  --widget-border-color: #2c3251;
  --widget-border-width: .05rem;
  --widget-border-radius: .1rem;
  --widget-header-foreground-color: #fff;
  --widget-header-font-size: 1rem;
  --widget-header-font-weight: 400;
  --widget1-gradient-direction: bottom;
  --widget1-gradient-start-color: #82bee3;
  --widget1-gradient-end-color: #04629f;
  --widget1-foreground-color: #fff;
  --widget1-font-size: 1rem;
  --widget1-font-weight: 400;
  --accordion-border-color: rgba(44,50,81,0.1);
  --accordion-border-width: .0556rem;
  --accordion-border-radius: 0;
  --accordion-header-gradient-direction: bottom;
  --accordion-header-gradient-start-color: #fff;
  --accordion-header-gradient-end-color: #fff;
  --accordion-header-foreground-color: rgba(0,0,0,0.85);
  --accordion-header-font-size: 1rem;
  --accordion-header-font-weight: 400;
  --accordion-header-icon-size: 4rem;
  --accordion-body-gradient-direction: bottom;
  --accordion-body-gradient-start-color: #fff;
  --accordion-body-gradient-end-color: #fff;
  --accordion-body-foreground-color: rgba(0,0,0,0.85);
  --accordion-body-font-size: 1rem;
  --accordion-body-font-weight: 400;
  --overlay-gradient-direction: bottom;
  --overlay-gradient-start-color: #fff;
  --overlay-gradient-end-color: #fff;
  --overlay-header-foreground-color: var(--base-color-primary);
  --overlay-header-font-size: 1.1rem;
  --overlay-header-font-weight: 400;
  --form-title-margin: 0.55rem 0
}

/* ── Body base (production) ── */
body, html {
  height: 100%;
  -webkit-text-size-adjust: none;
  min-height: 100vh;
  position: relative
}
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to var(--app-background-gradient-direction), var(--app-background-gradient-start-color), var(--app-background-gradient-end-color));
  font-family: var(--base-font-family);
  font-size: var(--base-font-size-default);
  color: var(--base-text-primary);
  overflow-y: scroll;
  -webkit-text-size-adjust: none;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover
}
body ::-webkit-scrollbar { width: .3rem; height: .3rem }
body ::-webkit-scrollbar-track { background: var(--scroll-track) }
body ::-webkit-scrollbar-thumb { background: var(--scroll-thumb) }
img path { fill: var(--base-color-primary) }
obdx-component { width: 100%; height: 100% }
template { display: none }
.left { text-align: left }
.right, [dir=rtl] .left { text-align: right }
[dir=rtl] .right { text-align: left }
.center { text-align: center }
.flex-left { justify-content: flex-start }
.flex-right { justify-content: flex-end }
.flex-center { justify-content: center }
.hide { display: none }
.hide-label { font-size: 0 !important; height: 0; position: absolute }
.hide-label label { font-size: 0 !important }
.pull-right { float: right }
.pull-left, [dir=rtl] .pull-right { float: left }
[dir=rtl] .pull-left { float: right }
.margin-auto { margin: 0 auto }
.full-width { width: 100% }
.full-height { height: 100% }
.error { color: var(--base-color-danger) }
.info { color: var(--base-text-primary) }
.warning { color: var(--base-color-warning) }
a:hover, a:link, a:visited {
  text-decoration: none;
  color: var(--link-base);
  font-size: var(--link-font-size);
  font-weight: var(--link-font-weight)
}
a:focus { outline: 0; color: var(--link-hover) }
.break-word { word-wrap: break-word; white-space: normal }
.word-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden }
.word-nowrap { white-space: nowrap }
.seperator { border-bottom: .05rem solid !important }
.icons { font-size: calc(var(--base-font-size-default) + .4rem) }
.icons.disabled { color: var(--form-input-color-disable) !important; cursor: default }

/* ── OJ Flex Layout ── */
.oj-flex { display: flex; flex-wrap: wrap }
.oj-flex-items-pad > .oj-flex-item { padding: 0 0.5rem }
.oj-flex-item { box-sizing: border-box }
.oj-sm-12 { flex: 0 0 100%; max-width: 100% }

/* ── OJ Input Styles (production) ── */
.oj-inputtext-input, .oj-inputpassword-input {
  min-height: var(--form-line-height) !important;
  line-height: var(--form-line-height);
  font-size: var(--form-input-text);
  border-radius: var(--form-input-border-radius);
  color: var(--form-input-color-base);
  background-color: var(--form-input-background-base);
  transition-duration: .5s;
  outline: 0;
  border: 0;
  padding: 0 !important;
  border-bottom: .05rem solid var(--form-input-border-color);
  width: 100%;
  font-family: inherit;
}
.oj-inputtext-input:focus, .oj-inputpassword-input:focus {
  border: 0;
  border-bottom: .05rem solid var(--form-input-color-focus)
}

/* ── OBDX Login Form (Production — fixed overlay modal) ── */
.login-form-web-container .loginContainer {
  position: fixed;
  top: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0,0,0,.4)
}
[dir=rtl] .login-form-web-container .loginContainer { right: 0 }
[dir=ltr] .login-form-web-container .loginContainer { left: 0 }
.login-form-web-container .loginContainer .loginFormContainereng {
  position: relative;
  top: 9.4rem;
  max-width: 35rem;
  display: flex;
  padding: 3rem;
  background-color: var(--base-background-primary)
}
[dir=rtl] .login-form-web-container .loginContainer .loginFormContainereng { right: 6.3rem }
[dir=ltr] .login-form-web-container .loginContainer .loginFormContainereng { left: 6.3rem }
.login-form-web-container .loginContainer .loginFormContainerar {
  position: relative;
  top: 9.4rem;
  max-width: 35rem;
  display: flex;
  padding: 3rem;
  background-color: var(--base-background-primary)
}
[dir=rtl] .login-form-web-container .loginContainer .loginFormContainerar { right: 5.3rem }
[dir=ltr] .login-form-web-container .loginContainer .loginFormContainerar { left: 5.3rem }
.login-form-web-container .loginContainer .loginPopUp { max-width: 35rem }
[dir=rtl] .login-form-web-container .loginContainer .quick-links { padding-right: 2rem }
[dir=ltr] .login-form-web-container .loginContainer .quick-links { padding-left: 2rem }
.login-form-web-container .loginContainer .quick-links .quick-links-container-items {
  font-size: small;
  padding: 10px
}
.login-form-web-container .loginContainer .quick-links img.icons-links {
  height: 2rem;
  word-break: break-word
}
.login-form-web-container .loginContainer .login-logo {
  background-color: var(--base-color-secondary);
  text-align: center;
  padding: .5rem 1rem
}
.login-form-web-container .loginContainer .login-logo img { width: 12.5rem }
.login-form-web-container .loginContainer input[type=password],
.login-form-web-container .loginContainer input[type=text] {
  padding: 0 0 0 1.9rem !important;
  width: auto
}
[dir=rtl] .login-form-web-container .loginContainer input[type=password],
[dir=rtl] .login-form-web-container .loginContainer input[type=text] {
  padding: 0 1.9rem 0 0 !important
}
.login-form-web-container .loginContainer .icons {
  position: absolute;
  margin: .2rem;
  z-index: 2
}
.login-form-web-container .loginContainer .row { padding: .5rem .6rem }
.login-form-web-container .danger { color: var(--base-color-danger) }
.login-form-web-container .login-enclosure__password { padding: .6rem 0 }
.login-form-web-container .login-enclosure .loginButton { width: 225px; margin: .6rem 0 }
.login-form-web-container .login-enclosure__seperator { padding: 0 .3rem }
@media only screen and (max-width:767px) {
  .login-form-web-container .loginContainer {
    background: none;
    width: 75%;
    margin: 0 auto;
    padding: 1.3rem
  }
  [dir=rtl] .login-form-web-container .loginContainer { right: auto }
  [dir=ltr] .login-form-web-container .loginContainer { left: auto }
  .login-form-web-container .loginContainer .login-logo img { width: 9.4rem }
  .login-form-web-container .loginContainer .login-logo { display: none }
}

/* ── Mobile Landing Quick Links ── */
.mobile-landing-container .product-quick-links h3 {
  font-size: 1.9rem;
  text-align: center;
  color: var(--base-text-primary);
  font-weight: 400
}
.mobile-landing-container .product-quick-links-flex-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-flow: row wrap;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style: none
}
.mobile-landing-container .product-quick-links-flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 2em;
  text-align: center;
  min-width: 7.5rem;
  margin: 0 0 1.3rem
}
.mobile-landing-container .product-quick-links .icon-title {
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--base-text-primary);
  width: 100%;
  font-size: 1rem;
  line-height: normal;
  text-transform: capitalize
}
.mobile-landing-container .product-quick-links .icons {
  color: var(--base-text-primary);
  font-size: 4.4rem;
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  background-size: cover
}

/* ── Goals Section ── */
.goals-container .goals { background: #d9efff }
.goals-container .goals .parallaxbox {
  background-image: url(../images/content/goals.png);
  height: 28.1rem;
  background-position: top center
}
.goals-container .goals .movingbox {
  position: relative;
  padding: 5rem .6rem;
  margin: 0 auto;
  max-width: 75rem;
  text-align: right
}
[dir=rtl] .goals-container .goals .movingbox { text-align: left }
.goals-container .goals h3.goal-tile-heading {
  font-size: 1.9rem;
  color: var(--base-text-primary);
  font-weight: 400
}
.goals-container .goals .quote {
  font-size: 1.1rem;
  color: var(--base-text-primary);
  letter-spacing: .4
}
.goals-container .goals .quote .author {
  text-align: right;
  color: var(--base-text-secondary);
  font-style: italic
}
[dir=rtl] .goals-container .goals .quote .author { text-align: left }
@media only screen and (max-width:767px) {
  .goals-container .goals .parallaxbox {
    height: 10.3rem;
    background-position: left bottom;
    background-attachment: scroll;
    background-size: contain
  }
  .goals-container .goals .movingbox { padding: .5rem 1.3rem }
  .goals-container .goals h3.goal-tile-heading { font-size: 1.3rem }
  .goals-container .goals .quote { font-size: .8rem }
}

/* ── Loan Showcase ── */
.loan-showcase-container .loan-showcase { background: #e7f3d8 }
.loan-showcase-container .loan-showcase .parallaxbox {
  background-image: url(../images/content/parallax.svg);
  height: 26.9rem;
  background-position: bottom right;
  background-size: 73% 26.9rem;
  background-repeat: no-repeat;
  max-width: 75rem
}
.loan-showcase-container .loan-showcase .movingbox { padding: 1.9rem .6rem; width: 25% }
.loan-showcase-container .loan-showcase h3 { font-size: 1.9rem; color: var(--base-text-secondary); font-weight: 400 }
@media only screen and (max-width:767px) {
  .loan-showcase-container .loan-showcase .parallaxbox { height: 17.5rem; background-position: bottom center; background-size: 100%; background-attachment: scroll }
  .loan-showcase-container .loan-showcase .movingbox { padding: .5rem 1.3rem; width: auto; text-align: right }
  [dir=rtl] .loan-showcase-container .loan-showcase .movingbox { text-align: left }
  .loan-showcase-container .loan-showcase h3 { font-size: 1.1rem }
}

/* ── Page Banner (production) ── */
.page-banner-container .page-banner {
  background: url(../images/content/banner.jpg) 0 0/cover no-repeat;
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center
}
.page-banner-container .page-banner .banner-text .sub-text { color: var(--color-white); font-size: 1.9rem }
.page-banner-container .page-banner .banner-text span { color: var(--color-white) }
.page-banner-container .page-banner .action-button-primary {
  background: var(--button-primary-gradient-start-color) !important;
  box-shadow: none !important;
  border: 0 !important
}
@media only screen and (min-width:768px) and (max-width:1023px) {
  .page-banner-container .page-banner { height: 20rem }
}
@media only screen and (max-width:767px) {
  .page-banner-container .page-banner { height: 9rem; font-size: 200% }
  .page-banner-container .page-banner .banner-text .sub-text { font-size: 60% }
}

/* ── Floating Panel ── */
.floating-panel-container .floating-panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 11;
  background: rgba(0,0,0,.3)
}
.floating-panel-container .floating-panel .oj-panel { padding: .3rem .6rem; position: absolute; bottom: 4rem; height: auto; width: 100%; box-shadow: -.2rem -.2rem .3rem rgba(0,0,0,.3) }
.floating-panel-container .floating-panel .oj-panel ul { padding: 0; margin: 0 }
.floating-panel-container .floating-panel .oj-panel ul li { border-bottom: .05rem solid var(--base-border-default); display: block; padding: .6rem 0 }
.floating-panel-container .floating-panel .oj-panel ul li:last-child { border-bottom: 0 }
.floating-panel-container .floating-panel .oj-panel ul li a { color: var(--base-text-primary) }

/* ── Bank Products ── */
.bank-products-container .product-quick-links h3 {
  font-size: 1.9rem;
  text-align: center;
  color: var(--base-text-primary);
  font-weight: 400
}
.bank-products-container .product-quick-links-flex-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-flow: row wrap;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style: none
}
.bank-products-container .product-quick-links-flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 2em;
  text-align: center;
  margin: 0 0 1.3rem
}
.bank-products-container .product-quick-links .icons {
  color: var(--base-text-primary);
  font-size: 4.2rem;
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  background-size: cover
}

/* ── Company Links / Footer Section ── */
.company-links-container .company-links {
  background-color: #212121;
  padding-bottom: 1.9rem;
  font-size: .8rem
}
.company-links-container .company-links h3 { font-size: 1.9rem; color: var(--color-white); font-weight: 400 }
.company-links-container .company-links .im-heading { padding-top: 1.9rem; padding-bottom: .6rem; font-weight: 400; font-size: .9rem; color: #e5e5e5 }
.company-links-container .company-links .social-icons .icons {
  font-size: 1.3rem;
  color: var(--base-text-primary);
  padding: .2rem .3rem;
  border-radius: 50%;
  background: var(--base-background-primary)
}
.company-links-container .company-links .anc-links { display: inline-block; color: #bebcb9; font-size: .8rem; margin-top: .3rem }

/* ── Tools & Calculators ── */
.tools-and-calculators-container .tc { padding: .6rem; max-width: 80rem !important; margin: 0 auto }
.tools-and-calculators-container .tc h3 { font-size: 1.9rem; color: var(--base-text-secondary); font-weight: 400 }
.tools-and-calculators-container .tc-flex-container { justify-content: space-around; width: 100%; list-style: none; padding-bottom: 1.9rem; flex-wrap: nowrap }
.tools-and-calculators-container .tc-flex-container-listItems .icons {
  transition: transform .1s ease-out;
  font-size: 3rem;
  color: var(--base-text-primary);
  padding: 1.3rem 1.3rem .6rem;
  border: .05rem solid #595959;
  border-radius: 50%
}

/* ── Modal Window ── */
.modal-window-container .modal-window {
  position: fixed;
  display: none;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 5;
  opacity: 0;
  transition: opacity .4s ease-in;
  pointer-events: none;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}
.modal-window-container .modal-window__container {
  overflow: hidden;
  min-width: 31.3rem;
  max-width: 80%;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: .1rem .1rem .6rem 0 rgba(0,0,0,.45);
  background: var(--base-background-primary);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}
[dir=rtl] .modal-window-container .modal-window__container { right: 50%; transform: translate(50%, -50%) }
[dir=ltr] .modal-window-container .modal-window__container { left: 50% }
.modal-window-container .modal-window .modal-header {
  width: 100%;
  background: linear-gradient(to var(--modal-window-header-gradient-direction), var(--modal-window-header-gradient-start-color), var(--modal-window-header-gradient-end-color));
  height: 2.8rem;
  color: var(--modal-window-header-foreground-color)
}
.modal-window-container .modal-window .modal-header__text { padding: 1rem 1.3rem; font-size: var(--modal-window-header-font-size); font-weight: var(--modal-window-header-font-weight); display: inline-block }
.modal-window-container .modal-window .modal-header__close { float: right; padding: 1rem 1.3rem; font-size: var(--modal-window-header-font-size); color: var(--modal-window-header-foreground-color) !important; cursor: pointer }
[dir=rtl] .modal-window-container .modal-window .modal-header__close { float: left }
.modal-window-container .modal-window .modal-body-content {
  background: linear-gradient(to var(--modal-window-body-gradient-direction), var(--modal-window-body-gradient-start-color), var(--modal-window-body-gradient-end-color));
  color: var(--modal-window-body-foreground-color);
  font-size: var(--modal-window-body-font-size);
  font-weight: var(--modal-window-body-font-weight);
  max-height: 70vh;
  overflow-y: auto;
  padding: .6rem
}
@media only screen and (max-width:767px) {
  .modal-window-container .modal-window__container { min-width: 95% }
}

/* ── OJ Panel ── */
.oj-panel {
  background-color: var(--base-background-primary);
  border-radius: var(--widget-border-radius);
  border-width: var(--widget-border-width);
  border-style: solid;
  border-color: var(--base-border-default);
  padding: 0 0 .6rem;
  height: 100%
}
.oj-panel h3 {
  font-size: var(--widget-header-font-size);
  color: var(--base-text-primary);
  text-transform: var(--form-title-text-transform);
  margin: .6rem 0;
  font-weight: var(--base-font-weight-regular);
  direction: ltr;
  display: inline-block
}

/* ── Animations ── */
.fade-in { animation: 15s fade-in; transition: opacity .5s linear }
.parallax { position: relative; bottom: 0 }
.parallax .movingbox { position: relative; height: auto; padding: 3.1rem }
.parallax .parallaxbox {
  position: relative;
  height: 80%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto
}
.wind-screen-wiper {
  animation: 5s wind-screen-wiper;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  position: relative;
  top: -1px
}

/* ── Form Main Container ── */
.form-main-container {
  background: linear-gradient(to var(--form-gradient-direction), var(--form-gradient-start-color), var(--form-gradient-end-color));
  padding: var(--form-padding);
  color: var(--form-foreground-color);
  font-size: var(--form-font-size);
  font-weight: var(--form-font-weight);
  height: 100%;
  box-sizing: border-box
}
.form-main-container h1 { display: none }
.form-main-container label {
  color: var(--form-label-foreground-color);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  float: none
}
.form-main-container .hide-label, .form-main-container .hide-label label { font-size: 0 !important }

/* ── Button Container ── */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--button-align);
  padding: 1.3rem .6rem
}
.button-container.flex-right { justify-content: flex-end }

/* ── Action Buttons (production) ── */
.action-button-primary {
  border-color: var(--button-primary-border-color);
  background: linear-gradient(to var(--button-primary-gradient-direction), var(--button-primary-gradient-start-color), var(--button-primary-gradient-end-color));
  color: var(--button-primary-foreground-color);
  border-style: solid;
  border-width: var(--button-primary-border-width);
  border-radius: var(--button-primary-border-radius);
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Footer ── */
.footer {
  position: relative;
  bottom: 0;
  z-index: 0;
  background: linear-gradient(to var(--footer-gradient-direction), var(--footer-gradient-start-color), var(--footer-gradient-end-color));
  width: 100%;
  height: var(--footer-height);
  line-height: var(--form-line-height);
  text-align: center;
  display: block;
  color: var(--footer-foreground-color);
  font-size: var(--footer-font-size);
  font-weight: var(--footer-font-weight);
  overflow: hidden
}

/* ── Status Classes ── */
.status { white-space: nowrap }
.status.in-progress { color: var(--base-color-warning) }
.status.processed { color: var(--base-color-success) }
.status.deleted, .status.expired, .status.rejected { color: var(--base-color-danger) }

/* ── Tags ── */
.tags {
  display: inline-block;
  padding: .2rem .3rem;
  font-size: var(--base-font-size-small);
  margin: .1rem 0;
  text-align: center;
  border-radius: .25rem;
  font-weight: var(--base-font-weight-light)
}

/* ── Keyframes ── */
@keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes animatezoom { 0%, 100% { transform: scale(1) } 1% { transform: scale(.6) } }
@keyframes ripple-out {
  0%, 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent }
  15% { box-shadow: 0 0 0 0 var(--base-color-secondary), 0 0 0 0 rgba(255,255,255,.4), 0 0 0 0 var(--base-color-secondary), 0 0 0 0 rgba(0,0,0,.08) }
  70% { box-shadow: 0 0 .3rem 0 var(--base-color-secondary), 0 0 .6rem 1.3rem transparent, 0 0 2.5rem .1rem var(--base-color-secondary), 0 0 .3rem 2.5rem transparent }
}
@keyframes wind-screen-wiper {
  0% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%) }
  20% { opacity: .5; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) }
  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) }
}
@keyframes flip-down { 0% { transform: rotateX(90deg) } 100% { transform: rotateX(0) } }
@keyframes bounceUp { 0% { opacity: 0; transform: translate3d(0, 30px, 0) } to { transform: translateZ(0) } }

/* ── Responsive (max-width:767px) ── */
@media only screen and (max-width:767px) {
  .form-main-container { padding: var(--form-padding-small) }
  .button-container { padding: 0 .6rem 1.3rem }
  .mobile-landing-container .product-quick-links h3 { font-size: 125% }
  .mobile-landing-container .product-quick-links .icon-title { text-transform: none; font-size: .7rem }
  .mobile-landing-container .product-quick-links .icons { width: calc(4.4rem - 1.9rem); height: calc(4.4rem - 1.9rem) }
}
/* ============================================
   obdx-base.css — OBDX Production Component CSS
   Oracle Banking Digital Experience Framework
   Aman Bank Digital Platform
   ============================================ */

/* ── OJ Flex Layout Utilities ── */
.oj-flex {
  display: flex;
  flex-wrap: wrap;
}
.oj-flex-items-pad > .oj-flex-item {
  padding: 0 0.5rem;
}
.oj-flex-item {
  box-sizing: border-box;
}
.oj-sm-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ── OJ Input Styles ── */
.oj-inputtext-input,
.oj-inputpassword-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-input, #d1d5db);
  background: transparent;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: var(--base-font-size-default, 0.88rem);
  outline: none;
  transition: border-color 0.2s;
}
.oj-inputtext-input:focus,
.oj-inputpassword-input:focus {
  border-bottom-color: var(--primary, #006ab5);
}

/* ── OJ Button: action-button-primary (standalone) ── */
.action-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(
    to bottom,
    var(--button-primary-gradient-start-color, #003559),
    var(--button-primary-gradient-end-color, #002a47)
  );
  color: var(--white, #fff);
  font-family: inherit;
  font-size: var(--base-font-size-default, 0.88rem);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.action-button-primary:hover {
  opacity: 0.9;
}

/* ── OJ Misc Utilities ── */
.passwordPadding {
  padding-top: 0.6rem;
}
.left-right-margin10 {
  margin: 0.6rem 0;
  display: inline-block;
}
.center {
  text-align: center;
}

/* ── Scrollbar (scoped to body) ── */
body ::-webkit-scrollbar {
  width: 0.3rem;
  height: 0.3rem;
}
body ::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
body ::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}

/* ── Base Elements ── */
img path {
  fill: var(--base-color-primary);
}
obdx-component {
  width: 100%;
  height: 100%;
}
template {
  display: none;
}

/* ── Utility: Alignment ── */
.left {
  text-align: left;
}
.right,
[dir="rtl"] .left {
  text-align: right;
}
[dir="rtl"] .right {
  text-align: left;
}
.center {
  text-align: center;
}
.flex-left {
  justify-content: flex-start;
}
.flex-right {
  justify-content: flex-end;
}
.flex-center {
  justify-content: center;
}

/* ── Utility: Display ── */
.hide {
  display: none;
}
.hide-label {
  font-size: 0 !important;
  height: 0;
  position: absolute;
}
.hide-label label {
  font-size: 0 !important;
}
.pull-right {
  float: right;
}
.pull-left,
[dir="rtl"] .pull-right {
  float: left;
}
[dir="rtl"] .pull-left {
  float: right;
}
[dir="rtl"] .no-pad-cols {
  padding-right: 0 !important;
}
[dir="ltr"] .no-pad-cols,
[dir="rtl"] .no-pad-cols {
  padding-left: 0 !important;
}
[dir="ltr"] .no-pad-cols {
  padding-right: 0 !important;
}

/* ── Utility: Spacing & Sizing ── */
.margin-auto {
  margin: 0 auto;
}
.vertical-align-middle {
  margin: auto 0;
}
.no-margin {
  margin: inherit;
}
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}

/* ── Utility: Status Colors ── */
.error {
  color: var(--base-color-danger);
}
.info {
  color: var(--base-text-primary);
}
.warning {
  color: var(--base-color-warning);
}

/* ── Links ── */
a:hover,
a:link,
a:visited {
  text-decoration: none;
  color: var(--link-base);
  font-size: var(--link-font-size);
  font-weight: var(--link-font-weight);
}
a:focus {
  outline: 0;
  color: var(--link-hover);
}

/* ── Utility: Text ── */
.blank {
  visibility: hidden;
}
.break-word {
  word-wrap: break-word;
  white-space: normal;
}
.word-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.word-nowrap {
  white-space: nowrap;
}
.seperator {
  border-bottom: 0.05rem solid !important;
}

/* ── Icons ── */
.icons {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
}
.icons.disabled {
  color: var(--form-input-color-disable) !important;
  cursor: default;
}
.icons + span {
  vertical-align: super;
}
[dir="rtl"] .icons + span {
  padding-right: 0.3rem;
}
[dir="ltr"] .icons + span {
  padding-left: 0.3rem;
}

/* ── Misc ── */
.logo-in-background {
  background: url(../../images/error/card_bg.svg) top right/cover no-repeat;
}
input[type="password"]::-ms-reveal {
  display: none;
}
[dir="rtl"] :-ms-input-placeholder {
  padding: 0 0.4rem;
}
[dir="rtl"] input::placeholder {
  padding: 0 0.4rem;
}

/* ── CKEditor ── */
.ck-editor__editable {
  min-height: 200px;
  height: 100%;
  min-width: 25vw;
}
.ck-editor {
  min-width: 24vw;
}

/* ============ OJ (Oracle JET) Input Components ============ */
.oj-combobox .oj-combobox-choice,
.oj-inputdatetime .oj-inputdatetime-input,
.oj-inputnumber .oj-inputnumber-input,
.oj-inputpassword .oj-inputpassword-input,
.oj-inputtext .oj-inputtext-input,
.oj-select .oj-select-choice,
.oj-textarea .oj-textarea-input {
  min-height: var(--form-line-height) !important;
  line-height: var(--form-line-height);
  font-size: var(--form-input-text);
  border-radius: var(--form-input-border-radius);
  color: var(--form-input-color-base);
  background-color: var(--form-input-background-base);
  transition-duration: 0.5s;
  outline: 0;
  border: 0;
  padding: 0 !important;
  border-bottom: 0.05rem solid var(--form-input-border-color);
}
.oj-combobox .oj-combobox-choice:focus,
.oj-inputdatetime .oj-inputdatetime-input:focus,
.oj-inputnumber .oj-inputnumber-input:focus,
.oj-inputpassword .oj-inputpassword-input:focus,
.oj-inputtext .oj-inputtext-input:focus,
.oj-select .oj-select-choice:focus,
.oj-textarea .oj-textarea-input:focus {
  border: 0;
  border-bottom: 0.05rem solid var(--form-input-color-focus);
}
.oj-combobox .right .oj-combobox-choice,
.oj-inputdatetime .right .oj-inputdatetime-input,
.oj-inputnumber .right .oj-inputnumber-input,
.oj-inputpassword .right .oj-inputpassword-input,
.oj-inputtext .right .oj-inputtext-input,
.oj-select .right .oj-select-choice,
.oj-textarea .right .oj-textarea-input,
.right .oj-combobox .oj-combobox-choice,
.right .oj-inputdatetime .oj-inputdatetime-input,
.right .oj-inputnumber .oj-inputnumber-input,
.right .oj-inputpassword .oj-inputpassword-input,
.right .oj-inputtext .oj-inputtext-input,
.right .oj-select .oj-select-choice,
.right .oj-textarea .oj-textarea-input {
  text-align: right;
}
.oj-combobox [dir="rtl"] .right .oj-combobox-choice,
.oj-inputdatetime [dir="rtl"] .right .oj-inputdatetime-input,
.oj-inputnumber [dir="rtl"] .right .oj-inputnumber-input,
.oj-inputpassword [dir="rtl"] .right .oj-inputpassword-input,
.oj-inputtext [dir="rtl"] .right .oj-inputtext-input,
.oj-select [dir="rtl"] .right .oj-select-choice,
.oj-textarea [dir="rtl"] .right .oj-textarea-input,
[dir="rtl"] .right .oj-combobox .oj-combobox-choice,
[dir="rtl"] .right .oj-inputdatetime .oj-inputdatetime-input,
[dir="rtl"] .right .oj-inputnumber .oj-inputnumber-input,
[dir="rtl"] .right .oj-inputpassword .oj-inputpassword-input,
[dir="rtl"] .right .oj-inputtext .oj-inputtext-input,
[dir="rtl"] .right .oj-select .oj-select-choice,
[dir="rtl"] .right .oj-textarea .oj-textarea-input {
  text-align: left;
}

/* ── OJ InputText ── */
.oj-inputtext {
  max-width: 100%;
  min-width: inherit;
}
.alternate-primary .oj-inputtext .oj-inputtext-input {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputtext
  .oj-inputtext-input
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputtext
  .oj-inputtext-input
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputtext
  .oj-inputtext-input
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-inputtext .oj-inputtext-input input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-inputtext .oj-inputtext-input {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputtext
  .oj-inputtext-input
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputtext
  .oj-inputtext-input
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputtext
  .oj-inputtext-input
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-inputtext .oj-inputtext-input input::placeholder {
  color: var(--banner-text-secondary);
}
.oj-inputtext.oj-disabled .oj-inputtext-input {
  border-color: var(--base-background-primary);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  font-size: var(--disabledinput-font-size);
  font-weight: var(--disabledinput-font-weight);
  padding: 0;
}
.oj-inputtext.oj-read-only .oj-inputtext-input {
  font-size: var(--form-input-text);
}

/* ── OJ InputPassword ── */
.oj-inputpassword {
  max-width: 100%;
  min-width: inherit;
}
.alternate-primary .oj-inputpassword .oj-inputpassword-input {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputpassword
  .oj-inputpassword-input
  input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-inputpassword .oj-inputpassword-input {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputpassword
  .oj-inputpassword-input
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputpassword
  .oj-inputpassword-input
  input::placeholder {
  color: var(--banner-text-secondary);
}
.oj-inputpassword.oj-disabled .oj-inputpassword-input {
  border-color: var(--base-background-primary);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  font-size: var(--disabledinput-font-size);
  font-weight: var(--disabledinput-font-weight);
  padding: 0;
}
.oj-inputpassword.oj-read-only .oj-inputpassword-input {
  font-size: var(--form-input-text);
}

/* ── OJ InputNumber ── */
.oj-inputnumber {
  max-width: 100%;
  min-width: inherit;
}
.alternate-primary .oj-inputnumber .oj-inputnumber-input {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-inputnumber .oj-inputnumber-input input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-inputnumber .oj-inputnumber-input {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputnumber
  .oj-inputnumber-input
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-inputnumber .oj-inputnumber-input input::placeholder {
  color: var(--banner-text-secondary);
}
.oj-inputnumber.oj-disabled .oj-inputnumber-input {
  border-color: var(--base-background-primary);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  font-size: var(--disabledinput-font-size);
  font-weight: var(--disabledinput-font-weight);
  padding: 0;
}
.oj-inputnumber.oj-read-only .oj-inputnumber-input {
  font-size: var(--form-input-text);
}

/* ── OJ TextArea ── */
.oj-textarea {
  max-width: 100%;
  min-width: inherit;
}
.oj-textarea .oj-textarea-input {
  border: 0.05rem solid var(--form-input-border-color);
}
.oj-textarea .oj-textarea-input:focus {
  border: 0.05rem solid var(--form-input-color-focus);
}
.alternate-primary .oj-textarea .oj-textarea-input {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-textarea
  .oj-textarea-input
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-textarea
  .oj-textarea-input
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-textarea
  .oj-textarea-input
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-textarea .oj-textarea-input input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-textarea .oj-textarea-input {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-textarea
  .oj-textarea-input
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-textarea
  .oj-textarea-input
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-textarea
  .oj-textarea-input
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-textarea .oj-textarea-input input::placeholder {
  color: var(--banner-text-secondary);
}
.oj-textarea.oj-disabled .oj-textarea-input {
  border-color: var(--base-background-primary);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  font-size: var(--disabledinput-font-size);
  font-weight: var(--disabledinput-font-weight);
  padding: 0;
}
.oj-textarea.oj-read-only .oj-textarea-input {
  font-size: var(--form-input-text);
}

/* ── OJ InputDateTime ── */
.oj-inputdatetime {
  max-width: 100%;
  min-width: inherit;
}
.alternate-primary .oj-inputdatetime .oj-inputdatetime-input {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-inputdatetime .oj-inputdatetime-input {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-inputdatetime
  .oj-inputdatetime-input
  input::placeholder {
  color: var(--banner-text-secondary);
}
.oj-inputdatetime.oj-disabled .oj-inputdatetime-input {
  border-color: var(--base-background-primary);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  font-size: var(--disabledinput-font-size);
  font-weight: var(--disabledinput-font-weight);
  padding: 0;
}
.oj-inputdatetime.oj-read-only .oj-inputdatetime-input {
  font-size: var(--form-input-text);
}

/* ── OJ Select ── */
.oj-select {
  font-size: var(--form-input-text);
  min-width: 6rem;
}
.oj-select.oj-disabled .oj-select-choice {
  border-color: var(--form-input-border-color);
  background: var(--form-input-background-disable);
  color: var(--form-input-color-disable);
  border-bottom: 0;
  padding: 0;
  height: auto;
}
.oj-select.oj-disabled .oj-select-choice .oj-select-arrow {
  display: none;
}
.oj-select.oj-disabled .oj-select-choice .oj-select-chosen {
  color: var(--form-input-color-disable);
  font-size: var(--form-input-text);
}
.alternate-primary .oj-select .oj-select-choice {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-select
  .oj-select-choice
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-select .oj-select-choice input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-select
  .oj-select-choice
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-select .oj-select-choice input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-select .oj-select-choice .oj-combobox-input,
.alternate-primary .oj-select .oj-select-choice .oj-select-arrow,
.alternate-primary .oj-select .oj-select-choice .oj-select-chosen {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-select .oj-select-choice {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-select
  .oj-select-choice
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-select
  .oj-select-choice
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-select
  .oj-select-choice
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-select .oj-select-choice input::placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-select .oj-select-choice .oj-combobox-input,
.alternate-secondary .oj-select .oj-select-choice .oj-select-arrow,
.alternate-secondary .oj-select .oj-select-choice .oj-select-chosen {
  color: var(--banner-text-secondary);
}
.oj-select-multi.oj-disabled .oj-select-choices,
.oj-select-multi.oj-disabled .oj-select-selected-choice {
  border-color: var(--form-input-border-color);
  background: var(--form-input-background-disable);
  color: var(--form-input-color-disable);
  border-bottom: 0;
  padding: 0;
}
.oj-select-multi .oj-select-selected-choice {
  color: var(--form-input-color-base);
}

/* ── OJ Combobox ── */
.oj-combobox {
  font-size: var(--form-input-text);
  min-width: 6rem;
}
.oj-combobox.oj-disabled .oj-combobox-choice {
  border-color: var(--form-input-border-color);
  background: var(--form-input-background-disable);
  color: var(--form-input-color-disable);
  border-bottom: 0;
  padding: 0;
  height: auto;
}
.oj-combobox.oj-disabled .oj-combobox-choice .oj-combobox-arrow {
  display: none;
}
.oj-combobox.oj-disabled .oj-combobox-choice .oj-combobox-chosen {
  color: var(--form-input-color-disable);
  font-size: var(--form-input-text);
}
.alternate-primary .oj-combobox .oj-combobox-choice {
  color: var(--base-color-secondary-text);
  border-bottom: 0.08rem solid var(--base-color-secondary-text);
}
.alternate-primary
  .oj-combobox
  .oj-combobox-choice
  input:focus::-webkit-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-combobox
  .oj-combobox-choice
  input:focus::-moz-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary
  .oj-combobox
  .oj-combobox-choice
  input:focus:-ms-input-placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-combobox .oj-combobox-choice input::placeholder {
  color: var(--base-color-secondary-text);
}
.alternate-primary .oj-combobox .oj-combobox-choice .oj-combobox-input,
.alternate-primary .oj-combobox .oj-combobox-choice .oj-select-arrow,
.alternate-primary .oj-combobox .oj-combobox-choice .oj-select-chosen {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-combobox .oj-combobox-choice {
  color: var(--banner-text-secondary);
  border-bottom: 0.08rem solid var(--banner-text-secondary);
}
.alternate-secondary
  .oj-combobox
  .oj-combobox-choice
  input:focus::-webkit-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-combobox
  .oj-combobox-choice
  input:focus::-moz-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary
  .oj-combobox
  .oj-combobox-choice
  input:focus:-ms-input-placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-combobox .oj-combobox-choice input::placeholder {
  color: var(--banner-text-secondary);
}
.alternate-secondary .oj-combobox .oj-combobox-choice .oj-combobox-input,
.alternate-secondary .oj-combobox .oj-combobox-choice .oj-select-arrow,
.alternate-secondary .oj-combobox .oj-combobox-choice .oj-select-chosen {
  color: var(--banner-text-secondary);
}
.oj-combobox-multi.oj-disabled .oj-combobox-choices,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice {
  border-color: var(--form-input-border-color);
  background: var(--form-input-background-disable);
  color: var(--form-input-color-disable);
}
.oj-combobox-multi.oj-disabled .oj-combobox-choices input,
.oj-combobox-multi.oj-disabled .oj-combobox-selected-choice input {
  display: none;
}
.oj-combobox-multi .oj-combobox-selected-choice {
  color: var(--form-input-color-base);
}
.oj-combobox-input {
  background-color: transparent;
  font-size: var(--form-input-text);
}

/* ── OJ Select Arrow ── */
.oj-select-arrow {
  height: var(--form-line-height);
  line-height: var(--form-line-height);
  padding: 0 0.6rem;
  color: var(--base-color-secondary-text);
  position: relative;
}
[dir="rtl"] .oj-select-arrow {
  left: 0;
}
[dir="ltr"] .oj-select-arrow {
  right: 0;
}
.oj-listbox-results li {
  padding: 0.5rem 0.2rem;
  color: var(--form-input-color-base);
}
.oj-listbox-result-label {
  line-height: 1.3rem;
  min-height: auto;
}
[dir="rtl"] .oj-select-chosen.oj-select-default {
  padding: 0 0.4rem;
}
oj-option .slot-icon {
  vertical-align: middle;
  height: 20px;
  width: 86px;
  float: right;
}
[dir="rtl"] oj-option .slot-icon {
  float: left;
}

/* ── OJ Label ── */
.oj-label-required-icon {
  display: none;
}
.alternate-primary .oj-label-group {
  color: var(--base-color-secondary-text);
}
.alternate-secondary .oj-label-group {
  color: var(--banner-text-primary);
}
.oj-label-inline {
  margin-top: 0.6rem;
}
.oj-label {
  color: var(--base-text-secondary);
}

/* ── OJ InputNumber Buttonset ── */
.oj-inputnumber .oj-buttonset {
  border: 0;
}
.oj-inputnumber .oj-buttonset .oj-button,
.oj-inputnumber .oj-buttonset .oj-button.oj-default {
  border-color: transparent !important;
  background: 0 0 !important;
  padding: 0 !important;
}
.oj-inputnumber .oj-buttonset .oj-button.oj-hover {
  border-color: transparent !important;
}
.oj-menu-dropdown {
  font-size: var(--base-font-size-default);
}

/* ── OJ Round Buttons ── */
.round .oj-button {
  border-width: 0;
  border-radius: 1rem !important;
  margin: 0 0.2rem !important;
  height: 1.8rem;
  font-size: var(--base-font-size-default);
}
[dir="rtl"] .round.oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last {
  border-left: 0;
}
[dir="ltr"] .round.oj-buttonset-multi.oj-button-full-chrome .oj-buttonset-last {
  border-right: 0;
}

/* ── OJ Switch ── */
.oj-switch .oj-switch-track {
  height: 1.4rem;
  width: 2.6rem;
}
.oj-switch .oj-switch-thumb {
  height: 1.2rem !important;
  width: 1.2rem !important;
  position: absolute !important;
  top: 1rem !important;
}

/* ── OJ DateTime Disabled Icons ── */
.oj-disabled
  > .oj-inputdatetime-input-container
  .oj-inputdatetime-calendar-clock-icon,
.oj-disabled
  > .oj-inputdatetime-input-container
  .oj-inputdatetime-calendar-icon,
.oj-disabled > .oj-inputdatetime-input-container .oj-inputdatetime-time-icon {
  display: none;
}
.oj-inputdatetime-input-trigger {
  border-width: 0 0 0.05rem !important;
  border-color: var(--form-input-border-color);
  background-color: transparent !important;
}
.oj-inputdatetime-input:focus + span {
  border-color: var(--form-input-color-focus);
}

/* ============ OJ Table ============ */
.oj-table {
  width: 100%;
}
.oj-table .oj-table-header-row {
  color: var(--table-header-foreground-color);
  background: linear-gradient(
    to var(--table-header-gradient-direction),
    var(--table-header-gradient-start-color),
    var(--table-header-gradient-end-color)
  );
}
.oj-table .oj-table-column-header-cell {
  font-size: var(--table-header-font-size);
  font-weight: var(--table-header-font-weight);
  padding: 0 0 0 0.2rem;
  text-overflow: initial !important;
}
[dir="rtl"] .oj-table .oj-table-column-header-cell {
  padding: 0 0.2rem 0 0;
}
.oj-table .oj-table-column-header-cell.oj-focus {
  outline: 0;
}
.oj-table .oj-table-column-header-cell.right {
  text-align: right;
}
[dir="rtl"] .oj-table .oj-table-column-header-cell.right {
  text-align: left;
}
[dir="rtl"] .oj-table.oj-table-editable .oj-table-column-header-asc,
[dir="rtl"] .oj-table.oj-table-editable .oj-table-column-header-dsc {
  left: 0;
}
[dir="ltr"] .oj-table.oj-table-editable .oj-table-column-header-asc,
[dir="ltr"] .oj-table.oj-table-editable .oj-table-column-header-dsc {
  right: 0;
}
.oj-table .oj-table-data-cell {
  font-size: var(--table-body-font-size);
  white-space: normal;
  vertical-align: middle;
  color: var(--table-body-foreground-color);
}
.oj-table .oj-table-data-cell.oj-hover {
  background: var(--table-tr-hover-color);
}
.oj-table .oj-table-data-cell.amountWithoutSort {
  text-align: right;
}
[dir="rtl"] .oj-table .oj-table-data-cell.amountWithoutSort {
  text-align: left;
  padding-left: 0.9rem;
}
[dir="ltr"] .oj-table .oj-table-data-cell.amountWithoutSort {
  padding-right: 0.9rem;
}
.oj-table .oj-table-data-cell.right {
  text-align: right;
}
[dir="rtl"] .oj-table .oj-table-data-cell.right {
  text-align: left;
}
.oj-table .oj-table-data-cell a {
  color: var(--link-base);
}
.oj-table .oj-table-data-cell .oj-inputdatetime .oj-inputdatetime-input {
  border-bottom: 0.05rem solid var(--form-input-border-color);
}
.oj-table .oj-table-data-cell.oj-form-control-inherit .oj-form-control {
  font-size: inherit;
  height: 100%;
}
.oj-table .oj-table-hgrid-lines {
  border-bottom: 0 !important;
}
.oj-table .oj-table-no-data-message {
  padding: 1.3rem 0.9rem;
}
.oj-table .oj-table-body {
  background: linear-gradient(
    to var(--table-body-gradient-direction),
    var(--table-body-gradient-start-color),
    var(--table-body-gradient-end-color)
  );
  color: var(--table-body-foreground-color);
  font-size: var(--table-body-font-size);
  font-weight: var(--table-body-font-weight);
  border: 0;
}
.oj-table .oj-table-body.oj-hover {
  background: var(--base-background-tertiary) !important;
}
.oj-table table.oj-table-element {
  width: 100%;
}

/* ============ OJ ListView ============ */
.oj-listview {
  overflow: hidden;
  border-color: var(--base-border-default);
}
.oj-listview.oj-listview-card-layout {
  border-width: 0;
}
.oj-listview-item {
  background: 0 0 !important;
  border-bottom: 0.05rem solid var(--base-border-default);
}
.oj-listview-item.oj-selected.oj-hover.oj-focus {
  outline: 0;
}
.oj-listview-item.oj-drop {
  background-color: var(--list-drop-background) !important;
}
.oj-listview-empty-text {
  padding: 0.6rem;
}
.oj-listview-card-layout li {
  border: 0 !important;
}
.oj-listview-card-layout li.oj-listview-item {
  width: auto;
}
.design-dashboard-listview .oj-listview-no-data-message {
  min-height: 300px;
  text-align: center;
  padding: 6rem 1rem;
  font-size: 2rem;
}

/* ── OJ Paging Control ── */
.oj-pagingcontrol-nav-dot {
  line-height: inherit;
}
.oj-pagingcontrol-nav-dot .oj-pagingcontrol-nav-dot-bullet {
  width: 9px;
  height: 9px;
}
.oj-pagingcontrol-nav-dot .oj-pagingcontrol-nav-dot-bullet.oj-hover,
.oj-pagingcontrol-nav-dot .oj-pagingcontrol-nav-dot-bullet.oj-selected {
  background-color: var(--base-background-primary);
}
.oj-pagingcontrol .oj-label-inline {
  font-size: 0.9rem;
}

/* ============ OJ Accordion ============ */
.oj-accordion-collapsible.oj-collapsed > .oj-collapsible-header {
  border-width: 0 0 var(--accordion-border-width) 0;
}
.oj-accordion-collapsible.oj-expanded {
  border-bottom: var(--accordion-border-width) solid
    var(--accordion-border-color);
}
.oj-accordion-collapsible.oj-expanded > .oj-collapsible-header {
  border-width: 0;
}
.oj-accordion-collapsible > .oj-collapsible-header {
  display: block;
  padding: 0.8rem;
  border-bottom: var(--accordion-border-width) solid
    var(--accordion-border-color);
  border-radius: var(--accordion-border-radius);
  background: linear-gradient(
    to var(--accordion-header-gradient-direction),
    var(--accordion-header-gradient-start-color),
    var(--accordion-header-gradient-end-color)
  );
  font-size: var(--accordion-header-font-size);
  font-weight: var(--accordion-header-font-weight);
  color: var(--accordion-header-foreground-color);
}
.oj-accordion-collapsible
  > .oj-collapsible-header
  > .oj-collapsible-header-icon {
  padding: 0;
}
.oj-accordion-collapsible
  > .oj-collapsible-header
  > .oj-collapsible-header-icon.oj-collapsible-close-icon::before {
  font-family: obdx !important;
  content: "\e05f";
  color: var(--base-text-tertiary);
}
.oj-accordion-collapsible
  > .oj-collapsible-header
  > .oj-collapsible-header-icon.oj-collapsible-open-icon::before {
  font-family: obdx !important;
  content: "\e063";
}
.oj-accordion-collapsible > .oj-collapsible-header .success {
  color: var(--base-color-success);
}
.oj-accordion-collapsible > .oj-collapsible-header .alert {
  color: var(--base-color-danger);
}
.oj-accordion-collapsible
  > .oj-collapsible-header
  .oj-component-icon.oj-clickable-icon-nocontext.oj-collapsible-header-icon.oj-collapsible-open-icon,
.oj-accordion-collapsible > .oj-collapsible-header a {
  float: right;
}
[dir="rtl"]
  .oj-accordion-collapsible
  > .oj-collapsible-header
  .oj-component-icon.oj-clickable-icon-nocontext.oj-collapsible-header-icon.oj-collapsible-open-icon,
[dir="rtl"] .oj-accordion-collapsible > .oj-collapsible-header a {
  float: left;
}
.oj-accordion-collapsible
  > .oj-collapsible-header
  span.oj-collapsible-header-icon {
  float: right;
}
[dir="rtl"]
  .oj-accordion-collapsible
  > .oj-collapsible-header
  span.oj-collapsible-header-icon {
  float: left;
}
.oj-accordion-collapsible > .oj-collapsible-header .oj-collapsible-wrapper {
  background: linear-gradient(
    to var(--accordion-body-gradient-direction),
    var(--accordion-body-gradient-start-color),
    var(--accordion-body-gradient-end-color)
  );
}
.oj-accordion-collapsible > .oj-collapsible-wrapper > .oj-collapsible-content {
  border-width: 0;
  font-size: var(--accordion-body-font-size);
  font-weight: var(--accordion-body-font-weight);
  color: var(--accordion-body-foreground-color);
  background: linear-gradient(
    to var(--accordion-body-gradient-direction),
    var(--accordion-body-gradient-start-color),
    var(--accordion-body-gradient-end-color)
  );
}
.oj-accordion-collapsible.oj-disabled > .oj-collapsible-header {
  color: var(--accordion-disabled-foreground-color);
  font-size: var(--accordion-disabled-font-size);
  font-weight: var(--accordion-disabled-font-weight);
  background: linear-gradient(
    to var(--accordion-disabled-header-gradient-direction),
    var(--accordion-disabled-header-gradient-start-color),
    var(--accordion-disabled-header-gradient-end-color)
  );
}

/* ── OJ Train ── */
.oj-train-step-list-item .oj-train-button.oj-disabled .oj-train-button-text {
  color: rgba(0, 0, 0, 0.556);
}
.oj-train-step-list-item .oj-train-label {
  font-size: var(--form-input-text);
}
.oj-train-step-list-item .oj-train-label.oj-disabled {
  color: rgba(0, 0, 0, 0.556);
}

/* ── OJ Message ── */
.oj-message-status-icon {
  vertical-align: middle;
  padding-bottom: 0.2rem;
}
.oj-message-summary {
  display: none;
}
.oj-message-detail {
  font-size: var(--alert-notification-body-font-size);
  font-weight: var(--alert-notification-body-font-weight);
  color: var(--alert-notification-body-foreground-color);
  width: 100%;
}
.oj-message .oj-message-content {
  white-space: normal;
  position: relative;
  bottom: 0.2rem;
}
.oj-messages-notification .oj-message-body,
.oj-messages-notification .oj-message-header {
  background-color: inherit;
}
.oj-messages-container .oj-message-container {
  background: linear-gradient(
    to var(--alert-notification-gradient-direction),
    var(--alert-notification-gradient-start-color),
    var(--alert-notification-gradient-end-color)
  );
}
.oj-messages-container .oj-message-category h1 {
  font-size: var(--alert-notification-header-font-size);
  font-weight: var(--alert-notification-header-font-weight);
  color: var(--alert-notification-header-foreground-color);
}
[dir="rtl"] .oj-messages-notification {
  left: 0 !important;
}
[dir="ltr"] .oj-messages-notification {
  right: 0 !important;
}

/* ── OJ Popup ── */
.oj-popup .oj-popup-content {
  padding: 0.6rem;
}
.oj-popup .oj-popup-content .oj-checkboxset {
  width: 100%;
}
.oj-popup .oj-popup-content .oj-checkboxset .oj-checkbox-label {
  font-size: var(--base-font-size-default);
}
.oj-popup .oj-popup-content label {
  color: var(--form-label-foreground-color);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
}
.oj-popup .oj-popup-content .popup-link-item {
  font-size: var(--base-font-size-medium);
}

/* ── OJ Panel ── */
.oj-panel {
  background-color: var(--base-background-primary);
  border-radius: var(--widget-border-radius);
  border-width: var(--widget-border-width);
  border-style: solid;
  border-color: var(--base-border-default);
  padding: 0 0 0.6rem;
  height: 100%;
}
[dir="rtl"] .oj-panel {
  padding: 0 0 0.6rem;
}
.oj-panel h3 {
  font-size: var(--widget-header-font-size);
  color: var(--base-text-primary);
  text-transform: var(--form-title-text-transform);
  margin: 0.6rem 0;
  font-weight: var(--base-font-weight-regular);
  direction: ltr;
  display: inline-block;
}
.oj-panel .oj-listview {
  border: 0;
}
.oj-panel ul li:last-child {
  border-bottom: 0;
}
.oj-panel .icons.icon-arrow-right {
  font-size: 80%;
}

/* ============ Animation Classes ============ */
.fade-in {
  animation: 15s fade-in;
  transition: opacity 0.5s linear;
}
.grow {
  height: 0;
  transform: scale(0);
  opacity: 0;
}
.grow-end {
  transform: scale(1);
  opacity: 1;
  transition:
    0.7s,
    opacity 0.3s ease-in-out;
}
.parallax {
  position: relative;
  bottom: 0;
}
[dir="rtl"] .parallax {
  left: 0;
}
[dir="ltr"] .parallax,
[dir="rtl"] .parallax {
  right: 0;
}
[dir="ltr"] .parallax {
  left: 0;
}
.parallax .movingbox {
  position: relative;
  height: auto;
  padding: 3.1rem;
}
[dir="rtl"] .parallax .movingbox {
  transform: scaleX(-1);
}
.parallax .parallaxbox {
  position: relative;
  height: 80%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto;
}
[dir="rtl"] .parallax .parallaxbox {
  transform: scaleX(-1);
}
.parallax .oj-button.action-button-primary {
  width: auto;
}
.slide {
  opacity: 0;
}
.slide-right {
  transform:
    rotateY(-50deg) rotateZ(-5deg) translateX(3.1rem),
    opacity 0.3s ease-in-out;
}
.slide-left {
  transform:
    rotateY(50deg) rotateZ(-5deg) translateX(-3.1rem),
    opacity 0.3s ease-in-out;
}
.slide-end {
  opacity: 1;
  transform: rotateY(0);
  perspective: 6.3rem;
}
.wind-screen-wiper {
  animation: 5s wind-screen-wiper;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  position: relative;
  top: -1px;
}
.flip-down {
  animation: 0.7s linear flip-down;
  background: var(--base-color-danger);
  width: 100%;
}
.slide-and-resize {
  background-color: var(--color-deep-yellow);
}
.animate-top {
  position: relative;
  animation: 0.2s animatetop;
}
.bounceUp {
  animation: 0.6s bounceUp;
}

/* ============ ANON / ADMIN / CORPADMIN Dashboard ============ */
.ANON .dashboard .container {
  max-width: inherit;
  padding: 0;
}
.ANON .dashboard .container .widget-container {
  padding: 0;
}
.ANON .dashboard .container .widget-container section {
  margin: 0;
}
.ADMIN .dashboard .button-container .oj-button span.icons.oj-button-icon,
.ANON .dashboard .button-container .oj-button span.icons.oj-button-icon,
.CORPADMIN .dashboard .button-container .oj-button span.icons.oj-button-icon {
  font-size: 0;
}
[dir="rtl"]
  .ADMIN
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon,
[dir="rtl"]
  .ANON
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon,
[dir="rtl"]
  .CORPADMIN
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon {
  margin-left: 0 !important;
}
[dir="ltr"]
  .ADMIN
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon,
[dir="ltr"]
  .ANON
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon,
[dir="ltr"]
  .CORPADMIN
  .dashboard
  .button-container
  .oj-button
  span.icons.oj-button-icon {
  margin-right: 0 !important;
}
.ADMIN .oj-switch,
.ANON .oj-switch,
.CORPADMIN .oj-switch {
  padding-top: 0.5rem;
}

/* ============ Dashboard Layout ============ */
.dashboard {
  position: relative;
  min-height: calc(100vh - 2.5rem);
}
.dashboard.banner {
  background: 0 0;
  padding: 0;
}
.dashboard .main-menu {
  outline: 0;
  background: linear-gradient(
    to var(--menu-gradient-direction),
    var(--menu-gradient-start-color),
    var(--menu-gradient-end-color)
  );
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.18);
  width: var(--base-dimension-menu-width);
  height: calc(100% - var(--footer-height));
}
.dashboard .container {
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  margin: 0 auto;
  outline: 0;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.dashboard .container .page-header-container .comp-title {
  letter-spacing: 0.03rem;
  text-transform: capitalize;
  font-size: var(--form-page-title-font-size);
  font-weight: var(--form-page-title-font-weight);
  color: var(--form-page-title-foreground-color);
  margin: var(--form-title-margin);
}
.dashboard .container .page-header-container .comp-title.sub-heading {
  font-size: var(--widget-header-font-size);
  font-weight: var(--base-font-weight-light);
  margin: 0;
}
.dashboard .container .page-header-container.txn-page {
  max-width: 80rem;
  margin: 0 auto;
}
.dashboard .container .warning-container {
  background-color: var(--base-color-warning-light);
  line-height: 1.25rem;
  margin: 0 0.6rem 0.6rem;
}
[dir="rtl"] .dashboard .container .warning-container {
  border-right: 0.4rem solid var(--base-color-warning);
}
[dir="ltr"] .dashboard .container .warning-container {
  border-left: 0.4rem solid var(--base-color-warning);
}
.dashboard .container .warning-container .warning-text {
  padding: 0.6rem;
}
.dashboard .container .warning-container .warning-icon {
  color: var(--link-base);
  float: right;
  padding-top: 0.1rem;
}
[dir="rtl"] .dashboard .container .warning-container .warning-icon {
  float: left;
}
.dashboard .container .warning-container a .icons {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
}
.dashboard .container .widget-container {
  padding: 0.6rem 0;
}
.dashboard .container .main-content {
  padding: 0 0 3rem;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
.dashboard a.skip-main {
  position: absolute;
  overflow: hidden;
  z-index: -999;
}
[dir="rtl"] .dashboard a.skip-main {
  right: -62.4rem;
}
[dir="ltr"] .dashboard a.skip-main {
  left: -62.4rem;
}
.dashboard a.skip-main :focus,
.dashboard a.skip-main:active {
  color: var(--base-color-secondary-text);
  top: auto;
  padding: 0.6rem;
  margin: 0.6rem;
  font-size: 0.8em;
  z-index: 999;
  height: auto;
  width: auto;
  outline: dotted 0.1rem;
}
[dir="rtl"] .dashboard a.skip-main :focus,
[dir="rtl"] .dashboard a.skip-main:active {
  right: 0;
}
[dir="ltr"] .dashboard a.skip-main :focus,
[dir="ltr"] .dashboard a.skip-main:active {
  left: 0;
}
.dashboard section {
  margin-bottom: 1.1rem;
}
.dashboard .back-top {
  position: fixed;
  bottom: 2.5rem;
}
[dir="rtl"] .dashboard .back-top {
  right: 96%;
}
[dir="ltr"] .dashboard .back-top {
  left: 96%;
}
.dashboard .back-top a {
  display: block;
  text-align: center;
  transition: 2s;
}
.dashboard .back-top span {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.8rem;
  display: block;
  margin-bottom: 0.4rem;
  background: var(--header-foreground-color);
  color: var(--header-gradient-start-color);
  border-radius: 50%;
  transition: 1s;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.75);
}
.dashboard .right-overlay-panel {
  max-width: 95%;
  z-index: 5;
  height: 100%;
  padding: 0;
  background: linear-gradient(
    to var(--overlay-gradient-direction),
    var(--overlay-gradient-start-color),
    var(--overlay-gradient-end-color)
  );
}
.dashboard .right-overlay-panel .overlayHeader {
  color: var(--overlay-header-foreground-color);
  font-size: var(--overlay-header-font-size);
  font-weight: var(--overlay-header-font-weight);
  border-bottom: 1px solid var(--base-border-default);
  background: linear-gradient(
    to var(--form-gradient-direction),
    var(--form-gradient-start-color),
    var(--form-gradient-end-color)
  );
}
[dir="rtl"] .dashboard .right-overlay-panel .overlayHeader .headerTxt {
  padding-right: 20px;
}
[dir="ltr"] .dashboard .right-overlay-panel .overlayHeader .headerTxt {
  padding-left: 20px;
}
.dashboard .right-overlay-panel .overlayHeader .icons {
  padding-top: 24px;
}
[dir="rtl"] .dashboard .right-overlay-panel .overlayHeader .icons {
  padding-left: 20px;
}
[dir="ltr"] .dashboard .right-overlay-panel .overlayHeader .icons {
  padding-right: 20px;
}
.dashboard .label,
.dashboard label {
  font-size: var(--base-font-size-large);
}
.back-link {
  line-height: var(--form-line-height);
}

/* ── Warning Container ── */
.warning-container {
  background: var(--base-color-warning);
  line-height: 1.25rem;
  margin: 0.2rem 0.6rem;
}
[dir="rtl"] .warning-container {
  border-right: 0.4rem solid var(--base-color-warning);
}
[dir="ltr"] .warning-container {
  border-left: 0.4rem solid var(--base-color-warning);
}
.warning-container .warning-text {
  padding: 0.6rem 0;
}
.warning-container .warning-icon {
  color: var(--link-base);
  float: right;
  padding-top: 0.1rem;
}
[dir="rtl"] .warning-container .warning-icon {
  float: left;
}
.warning-container a .icons {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
}

/* ── Tooltip ── */
.tooltip {
  min-height: 1.3rem;
  width: 21.9rem;
  background-color: var(--base-background-primary);
  padding: 0.8rem;
  display: none;
  z-index: 1;
  border: 0.05rem solid var(--base-border-default);
  color: var(--base-text-primary);
  letter-spacing: 0.025em;
}
.tooltip-section {
  line-height: 1.3rem;
}
.tooltip-section .span-label {
  color: var(--base-text-secondary);
  vertical-align: super !important;
}
.tooltip-section .icon-help {
  color: var(--link-base);
}
[dir="rtl"] .tooltip-section .icon-help {
  margin-right: 0.3rem;
}
[dir="ltr"] .tooltip-section .icon-help {
  margin-left: 0.3rem;
}

/* ── Admin Icon Backgrounds ── */
.user-management-icon {
  background: url(../../images/admin-icons/user-management.svg) top center
    no-repeat;
}
.party-preferences {
  background: url(../../images/admin-icons/party-preferences.svg) top center
    no-repeat;
}
.user-group {
  background: url(../../images/admin-icons/user-group.svg) top center no-repeat;
}
.workflow-management {
  background: url(../../images/admin-icons/work-flow.svg) top center no-repeat;
}
.approver-rules {
  background: url(../../images/admin-icons/approver-rules.svg) top center
    no-repeat;
}
.party-account-access {
  background: url(../../images/admin-icons/party-account-access.svg) top center
    no-repeat;
}
.user-account-access {
  background: url(../../images/admin-icons/user-account-access.svg) top center
    no-repeat;
}
.file-identifier-maintenance {
  background: url(../../images/admin-icons/file-identifier.svg) top center
    no-repeat;
}
.user-file-identifier-mapping {
  background: url(../../images/admin-icons/user-file-identifier.svg) top center
    no-repeat;
}

/* ── Status Labels ── */
.status {
  white-space: nowrap;
}
.status.in-progress {
  color: var(--base-color-warning);
}
.status.processed {
  color: var(--base-color-success);
}
.status.deleted,
.status.expired,
.status.rejected {
  color: var(--base-color-danger);
}

/* ── Quick Link Icon Backgrounds ── */
.icon-part-full-redemption-img {
  background: url(../../images/quick-link-icons/part-full-redemption.svg) top
    left no-repeat;
  content: "";
}
.icon-top-up-img {
  background: url(../../images/quick-link-icons/top-up.svg) top left no-repeat;
  content: "";
}
.icon-statement-request-img {
  background: url(../../images/quick-link-icons/statement-request.svg) top left
    no-repeat;
  content: "";
}
.icon-open-term-deposit-img {
  background: url(../../images/quick-link-icons/open-term-deposit.svg) top left
    no-repeat;
  content: "";
}
.cheque-status-inquiry-img {
  background: url(../../images/quick-link-icons/cheque-status.svg) top left
    no-repeat;
}
.icon-cheque-stop-img {
  background: url(../../images/quick-link-icons/cheque-stop.svg) top left
    no-repeat;
  content: "";
}
.icon-cheque-img {
  background: url(../../images/quick-link-icons/cheque-book.svg) top left
    no-repeat;
  content: "";
}
.icon-edit-maturity-img {
  background: url(../../images/quick-link-icons/edit-maturity.svg) top left
    no-repeat;
  content: "";
}
.icon-loan-repayment-img {
  background: url(../../images/quick-link-icons/loan-repayment.svg) top left
    no-repeat;
  content: "";
}
.icon-loan-domastic-img {
  background: url(../../images/quick-link-icons/domestic-payment.svg) top left
    no-repeat;
  content: "";
}
.icon-scheduled-inquiry-img {
  background: url(../../images/quick-link-icons/scheduled-inquiry.svg) top left
    no-repeat;
  content: "";
}
.icon-redemption-enquiry-img {
  background: url(../../images/quick-link-icons/disbursement-enquiry.svg) top
    left no-repeat;
  content: "";
}
.icon-account-transfer-img {
  background: url(../../images/quick-link-icons/account-transfer.svg) top left
    no-repeat;
  content: "";
}
.icon-file-upload-img {
  background: url(../../images/quick-link-icons/file-upload-identifier.svg) top
    left no-repeat;
  content: "";
}
.icon-file-upload-enq-img {
  background: url(../../images/quick-link-icons/uploaded-file-inquiry.svg) top
    left no-repeat;
  content: "";
}
.icon-loan-repayment-adhoc-img {
  background: url(../../images/quick-link-icons/domestic-payment.svg) top left
    no-repeat;
  content: "";
}

/* ── Tags ── */
.tags {
  display: inline-block;
  padding: 0.2rem 0.3rem;
  font-size: var(--base-font-size-small);
  margin: 0.1rem 0;
  text-align: center;
  border-radius: 0.25rem;
  font-weight: var(--base-font-weight-light);
}

/* ============ Header ============ */
.header .sticky {
  position: fixed;
  width: 100%;
  background: var(--base-color-secondary);
  z-index: 5;
  top: 0;
}
.header .header-container {
  color: var(--header-foreground-color);
  background: linear-gradient(
    to var(--header-gradient-direction),
    var(--header-gradient-start-color),
    var(--header-gradient-end-color)
  );
  max-width: 100vw;
  z-index: 5;
  transition: box-shadow 0.2s;
}
.header .header-container .helpdesk-header-container {
  background: var(--base-background-tertiary);
  color: var(--base-text-secondary);
  display: flex;
  align-items: center;
}
[dir="rtl"] .header .header-container .helpdesk-header-container__icon {
  padding-left: 3.8rem;
}
[dir="ltr"] .header .header-container .helpdesk-header-container__icon {
  padding-right: 3.8rem;
}
[dir="rtl"] .header .header-container .helpdesk-header-container__title {
  padding-right: 3.2rem;
}
[dir="ltr"] .header .header-container .helpdesk-header-container__title {
  padding-left: 3.2rem;
}
.header .header-container .helpdesk-header-container-title__text {
  display: inline-block;
}
.header .header-container .fixed-header-container {
  justify-content: space-around;
  margin: 0 auto;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  height: var(--header-height);
  border-bottom: 1px solid var(--header-border-bottom-color);
}
.header .header-container .fixed-header-container .logo-container .icon-menu {
  padding: 0;
  float: left;
}
[dir="rtl"]
  .header
  .header-container
  .fixed-header-container
  .logo-container
  .icon-menu {
  float: right;
}
.header
  .header-container
  .fixed-header-container
  .logo-container
  .icon-logo
  img {
  width: auto !important;
  height: 2.8rem;
  margin-bottom: -5.5px;
  margin-top: -5.5px;
}
.header .header-container .alternate-primary .oj-combobox {
  max-width: 20rem;
  width: 20rem;
}
.header .header-container .comp-title {
  float: left;
  padding: 0 1.6rem;
  display: flex;
}
[dir="rtl"] .header .header-container .comp-title {
  float: right;
}
.header .header-container .comp-title h2 {
  font-size: var(--base-font-size-larger);
  font-weight: var(--base-font-weight-regular);
  color: var(--base-color-secondary-text);
  margin: 0;
  display: flex;
  align-items: center;
}
.header .header-container .badge {
  display: inline-block;
  min-width: 0.6rem;
  height: 0.6rem;
  padding: 0.3rem;
  font-size: var(--base-font-size-small);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 3.1rem;
  position: relative;
  bottom: 0.4rem;
  margin: 0 -0.8em;
  background: var(--base-color-danger);
  color: var(--color-white);
}
[dir="rtl"] .header .header-container .badge {
  right: 0;
}
[dir="ltr"] .header .header-container .badge {
  left: 0;
}
.header .header-container .icon-menu-bar {
  top: 0.2rem;
  position: relative;
  cursor: pointer;
  color: var(--base-color-secondary-text);
  font-size: calc(var(--base-font-size-default) + 0.6rem);
}
.header .header-container .icon-back-arrow {
  display: block;
  cursor: pointer;
  color: var(--header-foreground-color);
  float: left;
}
[dir="rtl"] .header .header-container .icon-back-arrow {
  float: right;
}
.header .header-container .menu-bar-container {
  background: 0 0;
  float: left;
}
[dir="rtl"] .header .header-container .menu-bar-container {
  float: right;
}
.header .header-container .header-nav-container {
  position: fixed;
}

/* ── Hamburger Icon ── */
.header .header-container .hamburger-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.4rem;
  transform: translate3d(0, 0, 0);
}
.header .header-container .hamburger-icon path {
  fill: none;
  transition:
    stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),
    stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-width: 2rem;
  stroke-linecap: round;
  stroke: var(--header-foreground-color);
  stroke-dashoffset: 0;
}
.header .header-container .hamburger-icon path.bottom,
.header .header-container .hamburger-icon path.top {
  stroke-dasharray: 240px 950px;
}
.header .header-container .hamburger-icon path.middle {
  stroke-dasharray: 240px 240px;
}
.header .header-container .hamburger-icon.cross path.bottom,
.header .header-container .hamburger-icon.cross path.top {
  stroke-dashoffset: -650px;
}
.header .header-container .hamburger-icon.cross path.middle {
  stroke-dashoffset: -115px;
  stroke-dasharray: 1px 220px;
}
.header .header-container .logo-container {
  height: 2.2rem;
}

/* ── Header Notifications ── */
.header .notification-clear-all {
  display: flex;
  justify-content: flex-end;
  background-color: var(--base-background-primary);
}
.header .notification-clear-all a {
  padding: 0.2rem 0.5rem 0 0;
}
[dir="rtl"] .header .notification-clear-all a {
  padding: 0.2rem 0 0 0.5rem;
}

/* ── Header Nav ── */
.header .nav-menu a {
  color: var(--header-foreground-color);
  font-weight: var(--header-font-weight);
  font-size: var(--header-font-size);
}
.header .nav-menu .lastLogin {
  font-size: var(--base-font-size-small);
}
.header .nav-menu ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  height: var(--header-height);
}
.header .nav-menu ul li {
  margin: auto 0;
  display: inline-flex;
  height: var(--header-icon-size);
}
.header .nav-menu ul li a {
  display: inline-flex;
}
.header .nav-menu ul li a .icons {
  padding: 0 0.4rem;
  font-size: var(--header-icon-size);
}
.header .nav-menu ul li a.no-navigation-logout {
  padding-top: 0.3rem;
}
.header .nav-menu ul li a.no-navigation-logout .icons {
  font-size: 1.6rem;
}
.header .nav-menu ul li #profileLauncher.icons {
  font-size: 1rem;
}
[dir="rtl"] .header .nav-menu ul li {
  padding-left: 1rem;
}
[dir="ltr"] .header .nav-menu ul li {
  padding-right: 1rem;
}
.header .nav-menu ul li:last-child {
  padding: 0;
}
.header .nav-menu ul li.loggedInUser {
  height: 2rem;
}
.header .nav-menu ul li.loggedInUser .welcomeUser {
  color: var(--header-foreground-color);
  font-weight: var(--header-font-weight);
  font-size: var(--header-font-size);
}

/* ── Header Launchers ── */
.header-mailbox-launcher {
  width: 25.6rem;
  min-height: 10rem;
}
.header-profile-launcher {
  width: 20rem;
}
.header-profile-launcher ul {
  list-style: none;
  padding: 0;
}
.header-profile-launcher ul li {
  padding: 0.6rem 0;
}
.header-profile-launcher ul li:hover {
  background-color: var(--base-border-default);
}

/* ============ Main Menu ============ */
.main-menu .menu-container .welcome-box {
  background: linear-gradient(
    to var(--welcome-box-gradient-direction),
    var(--welcome-box-gradient-start-color),
    var(--welcome-box-gradient-end-color)
  );
  color: var(--welcome-box-foreground-color);
  line-height: 1.3rem;
}
.main-menu .menu-container .welcome-box-text {
  margin-bottom: 1.2rem;
}
.main-menu .menu-container .welcome-box-item {
  padding-top: 0.3rem;
}
.main-menu .menu-container .welcome-box-item__name {
  font-weight: var(--base-font-weight-light);
}
.main-menu .menu-container .welcome-box-item__info {
  font-size: var(--base-font-size-medium);
}
.main-menu
  .menu-container
  .welcome-box-item
  .alternate-primary
  .oj-label-group {
  color: var(--welcome-box-foreground-color);
  font-size: var(--welcome-box-font-size);
  font-weight: var(--welcome-box-font-weight);
}
.main-menu
  .menu-container
  .welcome-box
  .alternate-primary
  .oj-select
  .oj-select-choice
  .oj-select-chosen {
  color: var(--welcome-box-foreground-color);
}
.main-menu .menu-container .navlist .seperator {
  height: 0.1rem;
}
.main-menu .menu-container .navlist .oj-navigationlist-item {
  color: var(--base-text-secondary);
  font-size: var(--base-font-size-default);
}
.main-menu
  .menu-container
  .navlist
  .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  color: var(--link-base);
}
.main-menu
  .menu-container
  .navlist
  .oj-navigationlist-item
  .oj-navigationlist-item-icon {
  font-size: var(--base-font-size-larger);
}
.main-menu .menu-container .navlist .oj-navigationlist-item-label {
  color: var(--menu-foreground-color);
}
.main-menu .menu-container .navlist .oj-navigationlist-item-label .icons {
  position: relative;
  color: var(--link-base);
}
[dir="rtl"]
  .main-menu
  .menu-container
  .navlist
  .oj-navigationlist-collapsible
  ul.oj-navigationlist-has-icons
  > .oj-navigationlist-item-element
  > ul {
  padding-right: 1.5rem;
}
[dir="ltr"]
  .main-menu
  .menu-container
  .navlist
  .oj-navigationlist-collapsible
  ul.oj-navigationlist-has-icons
  > .oj-navigationlist-item-element
  > ul {
  padding-left: 1.5rem;
}
.main-menu a.oj-navigationlist-item-content .oj-navigationlist-item-icon,
.main-menu a.oj-navigationlist-item-content .oj-navigationlist-item-label {
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  color: var(--menu-foreground-color);
}
.main-menu
  .oj-navigationlist-toolbar
  .oj-navigationlist-previous-icon.oj-component-icon.oj-clickable-icon-nocontext {
  color: var(--menu-foreground-color);
}
.main-menu a.oj-navigationlist-item-content .oj-navigationlist-item-icon {
  font-size: var(--menu-icon-font-size);
  display: flex;
}
.main-menu .oj-navigationlist-group-item a.oj-navigationlist-collapse-icon {
  color: var(--menu-foreground-color);
}
.main-menu
  li
  div.oj-navigationlist-group-item.oj-hover
  .oj-navigationlist-item-icon,
.main-menu
  li
  div.oj-navigationlist-group-item.oj-hover
  .oj-navigationlist-item-label,
.main-menu
  li.oj-hover
  a.oj-navigationlist-item-content
  .oj-navigationlist-item-icon,
.main-menu
  li.oj-hover
  a.oj-navigationlist-item-content
  .oj-navigationlist-item-label {
  color: var(--menu-hover-color);
}
.main-menu .oj-navigationlist-item.oj-hover:not(.oj-selected) {
  border-color: var(--base-color-secondary);
}

/* ============ Grid Main Container ============ */
.grid-main-container {
  max-width: 100%;
  background: var(--base-background-primary);
  box-shadow: none;
  color: var(--base-text-primary);
  font-size: var(--base-font-size-default);
  line-height: calc(var(--form-line-height) - 0.6rem);
}
.grid-main-container .label,
.grid-main-container label {
  font-size: var(--base-font-size-medium);
  color: var(--base-text-secondary);
  line-height: calc(var(--form-line-height) - 1.1rem);
}
.grid-main-container .amount,
.grid-main-container .description {
  font-size: var(--base-font-size-larger);
}
[dir="rtl"] .grid-main-container .amount label {
  padding-left: 0.6rem;
}
[dir="ltr"] .grid-main-container .amount label {
  padding-right: 0.6rem;
}
.grid-main-container .bal-amt-text {
  font-size: var(--base-font-size-default);
}
[dir="rtl"] .grid-main-container .bal-amt-text label {
  padding-left: 0.6rem;
}
[dir="ltr"] .grid-main-container .bal-amt-text label {
  padding-right: 0.6rem;
}
.grid-main-container .highlight-text {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
}
.grid-main-container .activity-amt {
  font-size: var(--base-font-size-default);
  padding-bottom: 0.2rem;
}
[dir="rtl"] .grid-main-container .activity-amt label {
  padding-left: 0.6rem;
}
[dir="ltr"] .grid-main-container .activity-amt label {
  padding-right: 0.6rem;
}
.grid-main-container .activity-amt .credit,
.grid-main-container .activity-amt .debit {
  font-size: var(--base-font-size-larger);
}
.grid-main-container .activity-amt .debit {
  color: var(--base-color-danger);
}
.grid-main-container .select-all {
  font-size: var(--base-font-size-default);
}
.grid-main-container .oj-listview {
  border: 0 !important;
}
.grid-main-container .oj-listview li {
  position: relative;
  padding: 0.6rem 0 0;
}
.grid-main-container .oj-listview li:first-child {
  border-top: 0;
}
.grid-main-container .oj-listview li .last-activity {
  position: absolute;
  bottom: 0.6rem;
}
[dir="rtl"] .grid-main-container .oj-listview li .last-activity {
  left: 0;
}
[dir="ltr"] .grid-main-container .oj-listview li .last-activity {
  right: 0;
}
.grid-main-container .oj-listview li .oj-flex {
  padding-bottom: 0;
}
.grid-main-container .oj-listview li .oj-flex .oj-flex-item {
  padding-bottom: 0.5rem;
}
.grid-main-container h3.heading {
  font-weight: var(--base-font-weight-regular);
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 0.05rem solid var(--base-border-default);
}
.grid-main-container img.delete {
  height: 1.5rem;
  width: 1.5rem;
}

/* ============ Form Main Container ============ */
.form-main-container {
  background: linear-gradient(
    to var(--form-gradient-direction),
    var(--form-gradient-start-color),
    var(--form-gradient-end-color)
  );
  padding: var(--form-padding);
  color: var(--form-foreground-color);
  font-size: var(--form-font-size);
  font-weight: var(--form-font-weight);
  height: 100%;
  box-sizing: border-box;
}
.form-main-container h1 {
  display: none;
}
.form-main-container .icons.icon-help {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
  color: var(--link-base);
}
.form-main-container .icons.icon-help:hover {
  color: var(--link-hover);
}
.form-main-container label {
  color: var(--form-label-foreground-color);
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  float: none;
}
.form-main-container .hide-label,
.form-main-container .hide-label label {
  font-size: 0 !important;
}
.form-main-container .info-text-small {
  font-size: var(--form-info-txt-font-size);
  color: var(--form-info-txt-foreground-color);
  font-weight: var(--form-info-txt-font-weight);
  line-height: calc(var(--form-line-height) - 0.9rem);
}
.form-main-container .highlight-text {
  font-size: var(--base-font-size-default);
  color: var(--base-text-primary);
}
.form-main-container .row-group {
  padding-bottom: 1.4rem;
}
.form-main-container .row-group:last-of-type {
  padding-bottom: 0;
}
.form-main-container .disclaimer {
  font-size: var(--form-info-text-font-size) !important;
  color: var(--form-info-txt-foreground-color) !important;
  font-weight: var(--form-info-text-font-weight);
}
.form-main-container .delete img,
.form-main-container .unfavorite img {
  height: 2.8rem;
  width: 2.8rem;
}
.form-main-container .add-profile-icon {
  height: 5.6rem;
  width: 5.6rem;
}
.form-main-container .disclaimer-container {
  background: var(--base-background-tertiary);
  border: 0.05rem solid var(--base-border-default);
  padding: 0 0.6rem;
  margin-top: 0.6rem;
}
.form-main-container .disclaimer-container .disclaimer-text {
  font-size: var(--form-info-text-font-size);
  color: var(--form-info-txt-foreground-color);
  font-weight: var(--form-info-text-font-weight);
}
.form-main-container .disclaimer-container a .icons {
  font-size: calc(var(--base-font-size-default) + 0.4rem);
  color: var(--base-text-primary);
  padding: 0.1rem 0 0;
  line-height: 2.5rem;
}
.form-main-container .disclaimer-container a:hover .icons {
  color: var(--link-base);
}

/* ── Review Banner ── */
.review-banner {
  border-radius: var(--review-banner-border-radius);
  background: linear-gradient(
    to var(--review-banner-gradient-direction),
    var(--review-banner-gradient-start-color),
    var(--review-banner-gradient-end-color)
  );
  margin: 0 0 0.5rem;
  padding: 0.6rem 0;
}
[dir="rtl"] .review-banner {
  border-right: var(--review-banner-border-width) solid
    var(--review-banner-border-color);
}
[dir="ltr"] .review-banner {
  border-left: var(--review-banner-border-width) solid
    var(--review-banner-border-color);
}
.review-banner__image img {
  height: 1.3rem;
}
.review-banner-content__header {
  text-transform: uppercase;
  font-size: var(--review-banner-font-size);
  color: var(--review-banner-foreground-color);
  font-weight: var(--review-banner-font-weight);
  display: inline-block;
  position: relative;
  bottom: 0.3rem;
  padding: 0.3rem;
}
.review-banner-content__message {
  padding: 0 1.6rem;
}

/* ============ Footer (OBDX Production) ============ */
.footer {
  position: relative;
  bottom: 0;
  z-index: 0;
  background: linear-gradient(
    to var(--footer-gradient-direction),
    var(--footer-gradient-start-color),
    var(--footer-gradient-end-color)
  );
  width: 100%;
  height: var(--footer-height);
  line-height: var(--form-line-height);
  text-align: center;
  display: block;
  color: var(--footer-foreground-color);
  font-size: var(--footer-font-size);
  font-weight: var(--footer-font-weight);
  overflow: hidden;
}
[dir="rtl"] .footer {
  right: 0;
}
[dir="ltr"] .footer {
  left: 0;
}

/* ── Help Panel ── */
.help-panel {
  background: linear-gradient(
    to var(--help-panel-gradient-direction),
    var(--help-panel-gradient-start-color),
    var(--help-panel-gradient-end-color)
  );
  color: var(--help-panel-foreground-color);
  font-size: var(--help-panel-font-size);
  font-weight: var(--help-panel-font-weight);
}
.help-panel .help-content {
  border: 0.05rem solid var(--base-border-default);
  padding: 1rem;
}
.help-panel .help-content-title {
  color: var(--help-panel-header-foreground-color);
  font-size: var(--help-panel-header-font-size);
  font-weight: var(--help-panel-header-font-weight);
  text-align: center;
}
.help-panel .help-content .help-item {
  margin: 1rem 0 0;
}
.help-panel .help-content .help-item img {
  height: var(--help-panel-icon-size);
  width: var(--help-panel-icon-size);
  margin: 0 0 0 calc(50% - var(--help-panel-icon-size) / 2);
  float: left;
}
[dir="rtl"] .help-panel .help-content .help-item img {
  margin: 0 calc(50% - var(--help-panel-icon-size) / 2) 0 0;
  float: right;
}

/* ============ Accordion Card ============ */
.accordion .card {
  margin-bottom: 0.6rem !important;
  max-width: 100%;
}
.accordion .card .card-header {
  background: var(--base-color-secondary-text);
  height: 4rem;
  background: linear-gradient(
    to var(--accordion-header-gradient-direction),
    var(--accordion-header-gradient-start-color),
    var(--accordion-header-gradient-end-color)
  );
  border-width: 0 0 var(--accordion-border-width) 0 !important;
  border-bottom: var(--accordion-border-width) solid
    var(--accordion-border-color);
  border-radius: var(--accordion-border-radius);
}
.accordion .card .card-header .card-icons-title {
  height: 100%;
}
.accordion .card .card-header .accordion-strip {
  width: 0.2rem;
  height: 2rem;
  background-color: var(--accordion-header-foreground-color);
  position: absolute;
  margin-top: 0.75rem;
}
.accordion .card .card-header .card-title {
  font-size: var(--accordion-header-font-size);
  font-weight: var(--accordion-header-font-weight);
  color: var(--accordion-header-foreground-color);
  margin: auto 0;
}
.accordion .card .card-header .card-expander {
  margin: auto 0;
}
.accordion .card .card-header .card-expander .icon {
  float: right;
  color: var(--accordion-header-foreground-color);
}
[dir="rtl"] .accordion .card .card-header .card-expander .icon {
  float: left;
}
.accordion .card .card-header .icon-alert,
.accordion .card .card-header .icon-success {
  color: var(--accordion-header-foreground-color);
}
.accordion .card .card-header .card-icon-container {
  text-align: center;
  height: 100%;
  width: 4rem;
}
[dir="rtl"] .accordion .card .card-header .card-icon-container {
  padding-right: 1rem;
}
[dir="ltr"] .accordion .card .card-header .card-icon-container {
  padding-left: 1rem;
}
.accordion .card .card-header .card-icon-container .card-icon {
  font-size: 1.6rem;
  height: 100%;
  align-items: center;
  display: flex;
  color: var(--accordion-header-foreground-color);
}
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-account-funding:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-account-holder:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-anti-money-laundering:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-assets-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-basic-primary-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-contact-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-expense-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-funding-table:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-identity-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-income-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-liabilities-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-occupation-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-offers:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-primary-registration:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-property-info:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-requirements:before,
.accordion
  .card
  .card-header
  .card-icon-container
  .card-icon.icon-vehicle-info:before {
  vertical-align: middle;
}
.accordion .card .card-body.form-main-container {
  border-width: 0;
  font-size: var(--accordion-body-font-size);
  font-weight: var(--accordion-body-font-weight);
  color: var(--accordion-body-foreground-color);
  background: linear-gradient(
    to var(--accordion-body-gradient-direction),
    var(--accordion-body-gradient-start-color),
    var(--accordion-body-gradient-end-color)
  );
}

/* ============ OJ Buttons ============ */
.oj-button.oj-button-full-chrome.action-button-primary,
.oj-button.oj-button-full-chrome.action-button-secondary,
.oj-button.oj-button-full-chrome.action-button-tertiary,
.oj-button.oj-button-full-chrome.help-button {
  border-width: var(--button-border-width);
  border-radius: var(--button-border-radius);
  box-shadow: none;
  text-shadow: none;
}
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--button-align);
  padding: 1.3rem 0.6rem;
}
.button-container.flex-right {
  justify-content: flex-end;
}
.oj-button.oj-button-full-chrome {
  margin: 0 0.5rem;
}
[dir="rtl"] .oj-button.oj-button-full-chrome:first-child {
  margin-right: 0;
}
[dir="ltr"] .oj-button.oj-button-full-chrome:first-child,
[dir="rtl"] .oj-button.oj-button-full-chrome:last-child {
  margin-left: 0;
}
[dir="ltr"] .oj-button.oj-button-full-chrome:last-child {
  margin-right: 0;
}

/* ── Button Primary States ── */
.oj-button.oj-button-full-chrome.action-button-primary.oj-default
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-primary.oj-focus
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-primary.oj-selected
  .oj-button-button {
  border-color: var(--button-primary-border-color);
  background: linear-gradient(
    to var(--button-primary-gradient-direction),
    var(--button-primary-gradient-start-color),
    var(--button-primary-gradient-end-color)
  );
  color: var(--button-primary-foreground-color);
  border-style: solid;
  border-width: var(--button-primary-border-width);
  border-radius: var(--button-primary-border-radius);
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-primary.oj-default
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-primary.oj-focus
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-primary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-primary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-primary.oj-disabled
  .oj-button-button {
  border-color: var(--disabledinput-foreground-color);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  border-style: solid;
  border-width: var(--button-primary-border-width);
  border-radius: var(--button-primary-border-radius);
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-primary.oj-disabled
  .oj-button-button
  .oj-button-icon {
  color: var(--disabledinput-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-primary.oj-hover
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-primary.oj-selected
  .oj-button-button {
  background: linear-gradient(
    to var(--button-primary-gradient-direction),
    var(--button-primary-gradient-start-color),
    var(--button-primary-gradient-end-color)
  );
  color: var(--button-primary-foreground-color);
  border-style: solid;
  border-width: var(--button-primary-border-width);
  border-radius: var(--button-primary-border-radius);
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-primary.oj-hover
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-primary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-primary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-primary-font-size);
  font-weight: var(--button-primary-font-weight);
}

/* ── Button Secondary States ── */
.oj-button.oj-button-full-chrome.action-button-secondary.oj-default
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-focus
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-selected
  .oj-button-button {
  border-color: var(--button-secondary-border-color);
  background: linear-gradient(
    to var(--button-secondary-gradient-direction),
    var(--button-secondary-gradient-start-color),
    var(--button-secondary-gradient-end-color)
  );
  color: var(--button-secondary-foreground-color);
  border-style: solid;
  border-width: var(--button-secondary-border-width);
  border-radius: var(--button-secondary-border-radius);
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-secondary.oj-default
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-focus
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-secondary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-secondary.oj-disabled
  .oj-button-button {
  border-color: var(--disabledinput-foreground-color);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  border-style: solid;
  border-width: var(--button-secondary-border-width);
  border-radius: var(--button-secondary-border-radius);
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-secondary.oj-disabled
  .oj-button-button
  .oj-button-icon {
  color: var(--disabledinput-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-secondary.oj-hover
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-selected
  .oj-button-button {
  background: linear-gradient(
    to var(--button-secondary-gradient-direction),
    var(--button-secondary-gradient-start-color),
    var(--button-secondary-gradient-end-color)
  );
  color: var(--button-secondary-foreground-color);
  border-style: solid;
  border-width: var(--button-secondary-border-width);
  border-radius: var(--button-secondary-border-radius);
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-secondary.oj-hover
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-secondary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-secondary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-secondary-font-size);
  font-weight: var(--button-secondary-font-weight);
}

/* ── Button Tertiary States ── */
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-default
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-focus
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-selected
  .oj-button-button {
  border-color: var(--button-tertiary-border-color);
  background: linear-gradient(
    to var(--button-tertiary-gradient-direction),
    var(--button-tertiary-gradient-start-color),
    var(--button-tertiary-gradient-end-color)
  );
  color: var(--button-tertiary-foreground-color);
  border-style: solid;
  border-width: var(--button-tertiary-border-width);
  border-radius: var(--button-tertiary-border-radius);
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-default
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-focus
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-tertiary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-disabled
  .oj-button-button {
  border-color: var(--disabledinput-foreground-color);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  border-style: solid;
  border-width: var(--button-tertiary-border-width);
  border-radius: var(--button-tertiary-border-radius);
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-disabled
  .oj-button-button
  .oj-button-icon {
  color: var(--disabledinput-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-hover
  .oj-button-button,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-selected
  .oj-button-button {
  background: linear-gradient(
    to var(--button-tertiary-gradient-direction),
    var(--button-tertiary-gradient-start-color),
    var(--button-tertiary-gradient-end-color)
  );
  color: var(--button-tertiary-foreground-color);
  border-style: solid;
  border-width: var(--button-tertiary-border-width);
  border-radius: var(--button-tertiary-border-radius);
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-hover
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.action-button-tertiary.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-tertiary-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-tertiary-font-size);
  font-weight: var(--button-tertiary-font-weight);
}

/* ── Button Help States ── */
.oj-button.oj-button-full-chrome.help-button.oj-default .oj-button-button,
.oj-button.oj-button-full-chrome.help-button.oj-focus .oj-button-button,
.oj-button.oj-button-full-chrome.help-button.oj-selected .oj-button-button {
  border-color: var(--button-help-border-color);
  background: linear-gradient(
    to var(--button-help-gradient-direction),
    var(--button-help-gradient-start-color),
    var(--button-help-gradient-end-color)
  );
  color: var(--button-help-foreground-color);
  border-style: solid;
  border-width: var(--button-help-border-width);
  border-radius: var(--button-help-border-radius);
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}
.oj-button.oj-button-full-chrome.help-button.oj-default
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.help-button.oj-focus
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.help-button.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-help-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}
.oj-button.oj-button-full-chrome.help-button.oj-disabled .oj-button-button {
  border-color: var(--disabledinput-foreground-color);
  background: linear-gradient(
    to var(--disabledinput-gradient-direction),
    var(--disabledinput-gradient-start-color),
    var(--disabledinput-gradient-end-color)
  );
  color: var(--disabledinput-foreground-color);
  border-style: solid;
  border-width: var(--button-help-border-width);
  border-radius: var(--button-help-border-radius);
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}
.oj-button.oj-button-full-chrome.help-button.oj-disabled
  .oj-button-button
  .oj-button-icon {
  color: var(--disabledinput-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}
.oj-button.oj-button-full-chrome.help-button.oj-hover .oj-button-button,
.oj-button.oj-button-full-chrome.help-button.oj-selected .oj-button-button {
  background: linear-gradient(
    to var(--button-help-gradient-direction),
    var(--button-help-gradient-start-color),
    var(--button-help-gradient-end-color)
  );
  color: var(--button-help-foreground-color);
  border-style: solid;
  border-width: var(--button-help-border-width);
  border-radius: var(--button-help-border-radius);
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}
.oj-button.oj-button-full-chrome.help-button.oj-hover
  .oj-button-button
  .oj-button-icon,
.oj-button.oj-button-full-chrome.help-button.oj-selected
  .oj-button-button
  .oj-button-icon {
  color: var(--button-help-foreground-color);
  margin-top: 0.3rem;
  font-size: var(--button-help-font-size);
  font-weight: var(--button-help-font-weight);
}

/* ── Buttonset ── */
.oj-buttonset {
  padding: 0.6rem 0;
}
.oj-buttonset .oj-button-jqui.oj-button-full-chrome {
  border-width: var(--buttonset-border-width);
  border-radius: var(--buttonset-border-radius);
  border-color: var(--buttonset-border-color);
  box-shadow: none;
  text-shadow: none;
  background-image: none;
}
.oj-buttonset .oj-button-jqui.oj-button-full-chrome.oj-default,
.oj-buttonset .oj-button-jqui.oj-button-full-chrome.oj-hover {
  background: linear-gradient(
    to var(--buttonset-gradient-direction),
    var(--buttonset-gradient-start-color),
    var(--buttonset-gradient-end-color)
  );
}
.oj-buttonset .oj-button-jqui.oj-button-full-chrome.oj-default .oj-button-label,
.oj-buttonset .oj-button-jqui.oj-button-full-chrome.oj-hover .oj-button-label {
  color: var(--buttonset-label-foreground-color);
  font-size: var(--buttonset-label-font-size);
  font-weight: var(--buttonset-label-font-weight);
}
.oj-buttonset .oj-button-jqui.oj-button-full-chrome.oj-selected {
  background: linear-gradient(
    to var(--buttonset-selected-gradient-direction),
    var(--buttonset-selected-gradient-start-color),
    var(--buttonset-selected-gradient-end-color)
  );
  border-width: var(--buttonset-selected-border-width);
  border-radius: var(--buttonset-selected-border-radius);
}
.oj-buttonset
  .oj-button-jqui.oj-button-full-chrome.oj-selected
  .oj-button-label {
  color: var(--buttonset-selected-label-foreground-color);
  font-size: var(--buttonset-selected-label-font-size);
  font-weight: var(--buttonset-selected-label-font-weight);
}
[dir="rtl"] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icon-end
  .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icons
  .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-buttonset
  .oj-button-text-icons
  .oj-button-icon.oj-end {
  margin-right: 0.42857rem;
}
[dir="ltr"] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icon-end
  .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icons
  .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-buttonset
  .oj-button-text-icons
  .oj-button-icon.oj-end,
[dir="rtl"] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icon-end
  .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icons
  .oj-button-icon.oj-end,
[dir="rtl"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-buttonset
  .oj-button-text-icons
  .oj-button-icon.oj-end {
  margin-left: 0.42857rem;
}
[dir="ltr"] .oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icon-end
  .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-button-text-icons
  .oj-button-icon.oj-end,
[dir="ltr"]
  .oj-buttonset
  html:not([dir="rtl"])
  .oj-buttonset
  .oj-button-text-icons
  .oj-button-icon.oj-end {
  margin-right: 0.42857rem;
}

/* ── Floating Button ── */
.floating-button {
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  box-shadow:
    0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.14),
    0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.12),
    0 0.2rem 0.1rem -0.1rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: fixed;
  background: linear-gradient(
    to var(--button-primary-gradient-direction),
    var(--button-primary-gradient-start-color),
    var(--button-primary-gradient-end-color)
  );
  bottom: 5rem;
  float: right;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  line-height: 3.2rem;
  text-align: center;
}
[dir="rtl"] .floating-button {
  left: 0.61rem;
  float: left;
}
[dir="ltr"] .floating-button {
  right: 0.61rem;
}
.floating-button:focus {
  outline: 0;
}
.floating-button .icons {
  color: var(--color-white);
}
.oj-inputnumber .oj-buttonset .oj-button.oj-default {
  border-color: var(--form-input-border-color);
}

/* ── Floating Panel ── */
.floating-panel-container .floating-panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.3);
}
.floating-panel-container .floating-panel .oj-panel {
  padding: 0.3rem 0.6rem;
  position: absolute;
  bottom: 4rem;
  height: auto;
  width: 100%;
  box-shadow: -0.2rem -0.2rem 0.3rem rgba(0, 0, 0, 0.3);
}
.floating-panel-container .floating-panel .oj-panel ul {
  padding: 0;
  margin: 0;
}
.floating-panel-container .floating-panel .oj-panel ul li {
  border-bottom: 0.05rem solid var(--base-border-default);
  display: block;
  padding: 0.6rem 0;
}
[dir="rtl"] .floating-panel-container .floating-panel .oj-panel ul li .icons {
  padding-left: 0.6rem;
}
[dir="ltr"] .floating-panel-container .floating-panel .oj-panel ul li .icons {
  padding-right: 0.6rem;
}
.floating-panel-container .floating-panel .oj-panel ul li:last-child {
  border-bottom: 0;
}
.floating-panel-container .floating-panel .oj-panel ul li a {
  color: var(--base-text-primary);
}

/* ── Offline Notification ── */
.offline-notification-container .offline-notification {
  display: flex;
  align-items: center;
  color: var(--base-color-secondary-text);
  justify-content: center;
  height: 1.9rem;
  text-align: center;
  font-size: var(--base-font-size-default);
  font-weight: var(--base-font-weight-light);
  position: fixed;
  bottom: 0;
  z-index: 101;
}
[dir="rtl"] .offline-notification-container .offline-notification {
  right: 0;
}
[dir="ltr"] .offline-notification-container .offline-notification {
  left: 0;
}
[dir="rtl"] .offline-notification-container .offline-notification-message {
  padding-left: calc(var(--form-line-height) - 0.4rem);
}
[dir="ltr"] .offline-notification-container .offline-notification-message {
  padding-right: calc(var(--form-line-height) - 0.4rem);
}
.offline-notification-container .offline-notification__messagea:link {
  color: var(--base-text-primary);
  text-decoration: underline;
}

/* ============ Responsive: Tablet ============ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .oj-table .oj-table-column-header-cell {
    font-size: var(--table-header-font-size);
  }
  .oj-table .oj-table-data-cell {
    font-size: 0.8rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .oj-combobox .oj-combobox-choice,
  .oj-inputdatetime .oj-inputdatetime-input,
  .oj-inputnumber .oj-inputnumber-input,
  .oj-inputpassword .oj-inputpassword-input,
  .oj-inputtext .oj-inputtext-input,
  .oj-select .oj-select-choice,
  .oj-textarea .oj-textarea-input {
    max-width: inherit;
  }
  .slide-right {
    transform: rotateY(-50deg) rotateZ(-5deg) translateX(31.3rem);
  }
  .slide-left {
    transform: rotateY(50deg) rotateZ(-5deg) translateX(-31.2rem);
  }
  .ADMIN .dashboard .container .form-main-container .label,
  .ANON .dashboard .container .form-main-container .label,
  .CORPADMIN .dashboard .container .form-main-container .label {
    line-height: calc(var(--form-line-height) * 1.5);
  }
  .dashboard .container .page-header-container .comp-title {
    display: none;
  }
  .dashboard .container .widget-container {
    padding: 0;
    margin-bottom: 2rem;
  }
  [dir="ltr"] .dashboard .back-top {
    left: auto;
  }
  [dir="rtl"] .dashboard .back-top {
    right: auto;
    left: 0;
  }
  [dir="ltr"] .dashboard .back-top {
    right: 0;
  }
  .dashboard .back-top span {
    border-radius: 0.3rem 0 0 0.3rem;
  }
  [dir="rtl"] .dashboard .back-top span {
    border-radius: 0.3rem 0.3rem 0 0;
  }
  .back-link {
    padding: 0 0 0 0.5rem;
  }
  [dir="rtl"] .back-link {
    padding: 0 0.5rem 0 0;
  }
  .tooltip-section .icon-help {
    font-size: 1.6rem;
  }
  .header .header-container .comp-title h2 {
    font-size: var(--base-font-size-large);
  }
  .header .header-container .icon-back-arrow {
    font-size: calc(var(--base-font-size-default) + 0.6rem);
  }
  .header .header-container .menu-bar-container.active {
    width: 3.3rem;
  }
}

/* ============ Responsive: Desktop ============ */
@media only screen and (min-width: 1024px) {
  .slide-and-resize {
    animation: 0.7s ease-out slide-and-resize;
    width: 15%;
  }
  .ADMIN .dashboard .container .form-main-container .label,
  .ANON .dashboard .container .form-main-container .label,
  .CORPADMIN .dashboard .container .form-main-container .label {
    line-height: calc(var(--form-line-height) * 1.5);
  }
  .dashboard .oj-offcanvas-shift-start .container {
    margin: 0;
  }
  .tooltip-section .icon-help {
    font-size: 1.4rem;
  }
  .header .header-container .icon-back-arrow {
    font-size: calc(var(--base-font-size-default) + 1.3rem);
  }
}

/* ============ Responsive: Mobile ============ */
@media only screen and (max-width: 767px) {
  .oj-combobox .oj-combobox-choice,
  .oj-inputdatetime .oj-inputdatetime-input,
  .oj-inputnumber .oj-inputnumber-input,
  .oj-inputpassword .oj-inputpassword-input,
  .oj-inputtext .oj-inputtext-input,
  .oj-select .oj-select-choice,
  .oj-textarea .oj-textarea-input {
    max-width: inherit;
  }
  .oj-accordion-collapsible > .oj-collapsible-header,
  .oj-accordion-collapsible
    > .oj-collapsible-header
    > .oj-collapsible-header-icon {
    padding: 0.6rem;
  }
  .slide-right {
    transform: rotateY(-50deg) rotateZ(-5deg) translateX(31.3rem);
  }
  .slide-left {
    transform: rotateY(50deg) rotateZ(-5deg) translateX(-3.1rem);
  }
  .dashboard .container .page-header-container .comp-title {
    display: none;
  }
  .dashboard .container .widget-container {
    padding: 0;
    margin-bottom: 1.3rem;
  }
  .dashboard .container .main-content {
    padding: 0 0 5rem;
  }
  [dir="ltr"] .dashboard .back-top {
    left: auto;
  }
  [dir="rtl"] .dashboard .back-top {
    right: auto;
    left: 0;
  }
  [dir="ltr"] .dashboard .back-top {
    right: 0;
  }
  .dashboard .back-top span {
    border-radius: 0.3rem 0 0 0.3rem;
  }
  [dir="rtl"] .dashboard .back-top span {
    border-radius: 0.3rem 0.3rem 0 0;
  }
  .dashboard .right-overlay-panel {
    max-width: 100%;
  }
  .tooltip-section .span-label {
    vertical-align: baseline !important;
  }
  .tooltip-section {
    margin-bottom: 0.25em;
    line-height: inherit;
  }
  .tooltip-section .icon-help {
    vertical-align: sub;
    font-size: 1.5rem;
  }
  .header .header-container .fixed-header-container {
    height: var(--header-small-height);
  }
  .header .header-container .comp-title {
    padding: 0;
  }
  .header .header-container .comp-title h2 {
    font-size: var(--base-font-size-large);
    color: var(--header-foreground-color);
  }
  .header .header-container .icon-back-arrow {
    font-size: calc(var(--base-font-size-default) + 0.4rem);
  }
  [dir="rtl"] .header .header-container .icon-back-arrow {
    padding-left: 0.6rem;
  }
  [dir="ltr"] .header .header-container .icon-back-arrow {
    padding-right: 0.6rem;
  }
  .header .header-container .menu-bar-container {
    margin-top: 0.5rem;
  }
  .header .header-container .menu-bar-container.active {
    width: 3.3rem;
  }
  .header .header-container .hamburger-icon svg {
    margin: 0;
  }
  .header .nav-menu ul {
    height: var(--header-small-height);
  }
  .grid-main-container .description {
    font-size: var(--base-font-size-default);
  }
  .form-main-container {
    padding: var(--form-padding-small);
  }
  .form-main-container .disclaimer-container {
    height: auto;
  }
  .form-main-container .disclaimer-container .disclaimer-text {
    font-size: var(--base-font-size-small);
  }
  .accordion .card .card-header {
    height: 3rem;
  }
  .accordion .card .card-header .accordion-strip {
    width: 0.2rem;
    height: 1.5rem;
    position: inherit;
  }
  .accordion .card .card-header .card-icon-container {
    width: 2rem;
  }
  [dir="rtl"] .accordion .card .card-header .card-icon-container {
    padding-right: 0.5rem;
  }
  [dir="ltr"] .accordion .card .card-header .card-icon-container {
    padding-left: 0.5rem;
  }
  .accordion .card .card-header .card-icon-container .card-icon {
    font-size: 1.5rem;
  }
  .button-container {
    padding: 0 0.6rem 1.3rem;
  }
  .oj-button.oj-button-full-chrome {
    margin: 0.5rem;
  }
  [dir="rtl"] .oj-button.oj-button-full-chrome.action-button-tertiary {
    margin-right: 0;
  }
  [dir="ltr"] .oj-button.oj-button-full-chrome.action-button-tertiary {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .header .header-container .icon-back-arrow {
    margin-top: 0.5rem;
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 3.1) {
  .header .header-container .hamburger-icon path {
    stroke-width: 0.5rem;
  }
}

/* ============ Keyframe Animations ============ */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animatezoom {
  0%,
  100% {
    transform: scale(1);
  }
  1% {
    transform: scale(0.6);
  }
}
@keyframes ripple-out {
  0%,
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 0 transparent,
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
  15% {
    box-shadow:
      0 0 0 0 var(--base-color-secondary),
      0 0 0 0 rgba(255, 255, 255, 0.4),
      0 0 0 0 var(--base-color-secondary),
      0 0 0 0 rgba(0, 0, 0, 0.08);
  }
  70% {
    box-shadow:
      0 0 0.3rem 0 var(--base-color-secondary),
      0 0 0.6rem 1.3rem transparent,
      0 0 2.5rem 0.1rem var(--base-color-secondary),
      0 0 0.3rem 2.5rem transparent;
  }
}
@keyframes wind-screen-wiper {
  0% {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
  }
  20% {
    opacity: 0.5;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
}
@keyframes flip-down {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes slide-and-resize {
  0% {
    width: 100%;
  }
  50% {
    background-color: var(--color-deep-yellow-darken);
  }
  100% {
    width: 15%;
    background-color: var(--color-deep-yellow);
  }
}
@keyframes animatetop {
  from {
    top: -20rem;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes bounceUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    transform: translateZ(0);
  }
}