body{font-family:Inter,sans-serif}.Logoimg{height:45px}.shadow-bottom{box-shadow:0 2px 4px rgba(0,0,0,.1)}.textsmall{font-size:10px}.header-nav li:hover a{color:#673695!important}.login-box button a{color:#fff}.btnVerify{width:90px}.newIndex .input-group-text{font-size:14px;border:1px solid #ccc!important;border-top-right-radius:4px;background:#fff;border-bottom-right-radius:4px}.newIndex .input-group-text:focus{box-shadow:none;border-color:#0d6efd!important}.toggle-two-switch .switches-container{display:flex;padding:0;position:relative;background:#fff;line-height:30px!important;border-radius:.625rem;border:1px solid #dbdbdb}.toggle-two-switch .switches-container input{visibility:hidden;position:absolute;top:0}.toggle-two-switch .switches-container label{width:50%;padding:0;margin:0;text-align:center;cursor:pointer;line-height:30px;font-size:13px;color:rgba(33,37,41,.75)}.toggle-two-switch .switch-wrapper{position:absolute;top:0;bottom:0;width:50%;padding:.2rem;z-index:3;transition:transform .5s cubic-bezier(.77, 0, .175, 1)}.toggle-two-switch .toggle-switch-wrapper{border-radius:.5rem;background:#ff8a4c;height:100%}.toggle-two-switch .toggle-switch-wrapper div{font-size:13px;width:100%;text-align:center;opacity:0;display:block;color:#fff;transition:opacity .2s cubic-bezier(.77, 0, .175, 1) 125ms;will-change:opacity;position:absolute;top:0;left:0}.toggle-two-switch .switches-container input:first-of-type:checked~.switch-wrapper{transform:translateX(0)}.toggle-two-switch .switches-container input:nth-of-type(2):checked~.switch-wrapper{transform:translateX(100%)}.toggle-two-switch .switches-container input:nth-of-type(3):checked~.switch-wrapper{transform:translateX(200%)}.toggle-two-switch .switches-container input:first-of-type:checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(1){opacity:1}.toggle-two-switch .switches-container input:nth-of-type(2):checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(2){opacity:1}.toggle-two-switch .switches-container input:nth-of-type(3):checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(3){opacity:1}.toggle-three-switch .switches-container{display:flex;padding:0;position:relative;background:#fff;line-height:30px!important;border-radius:.625rem;border:1px solid #dbdbdb}.toggle-three-switch .switches-container input{visibility:hidden;position:absolute;top:0}.toggle-three-switch .switches-container label{width:33.33%;padding:0;margin:0;text-align:center;cursor:pointer;line-height:30px;font-size:13px;color:rgba(33,37,41,.75)}.toggle-three-switch .switch-wrapper{position:absolute;top:0;bottom:0;width:33.33%;padding:.2rem;z-index:3;transition:transform .5s cubic-bezier(.77, 0, .175, 1)}.toggle-three-switch .toggle-switch-wrapper{border-radius:.5rem;background:#ff8a4c;height:100%}.toggle-three-switch .toggle-switch-wrapper div{font-size:13px;width:100%;text-align:center;opacity:0;display:block;color:#fff;transition:opacity .2s cubic-bezier(.77, 0, .175, 1) 125ms;will-change:opacity;position:absolute;top:0;left:0}.toggle-three-switch .switches-container input:first-of-type:checked~.switch-wrapper{transform:translateX(0)}.toggle-three-switch .switches-container input:nth-of-type(2):checked~.switch-wrapper{transform:translateX(100%)}.toggle-three-switch .switches-container input:nth-of-type(3):checked~.switch-wrapper{transform:translateX(200%)}.toggle-three-switch .switches-container input:first-of-type:checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(1){opacity:1}.toggle-three-switch .switches-container input:nth-of-type(2):checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(2){opacity:1}.toggle-three-switch .switches-container input:nth-of-type(3):checked~.switch-wrapper .toggle-switch-wrapper div:nth-of-type(3){opacity:1}.toggle-three-switch.dgft-mode .switches-container{display:flex}.toggle-three-switch.dgft-mode .switch-wrapper,.toggle-three-switch.dgft-mode .switches-container label{width:50%!important}.toggle-three-switch.dgft-mode .switches-container input:nth-of-type(2):checked~.switch-wrapper{transform:translateX(100%)}.toggle-three-switch.dgft-mode .toggle-switch-wrapper div:nth-of-type(3){display:none!important}.mt-5rem{margin-top:5rem}.z-999{z-index:999}.priceBox h5{font-size:16px;font-weight:600;margin-bottom:2px}.container h1{font-size:34px}.text-orange{color:#ff8a4c}.tokenList ul li{font-size:14px}.tokenList ul{padding-left:10px}.tokenList h5{font-size:18px}.bg-primary-light{background:#ebf5ff}.bg-orange-light{color:#ff8a4c;font-weight:700;font-size:18px}.border-orange{border-color:#feecdc!important}.activeCertificate:hover{border-color:#feecdc!important;box-shadow:0 4px 30px 0 #fe9D661F;background-color:#fff}.btn-primary,.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background:#0d6efd;color:#fff!important}.border-medium-orange{border-color:#fcd9bd!important}.bg-light-orange{background:#feecdc}.text-purple{color:#6875f5}.bg-purple-light{background:#f6f5ff}.bg-purple{background:#edebfe}.bg-footer{background:linear-gradient(180deg,rgba(225,239,254,0) 0,#e1effe 100%)}.rounded-15-percent{border-radius:15%}.smaller{font-size:.75rem}.mt-swiper-btncontainer{display:flex;gap:15px;width:auto!important;height:100%;gap:30px}.swiper-button-next.swiper-button-disabled,.swiper-button-nexts.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled,.swiper-button-prevs.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.toggle-three-switch.dgft-mode .switch-wrapper.dgft-enabled{width:100%!important}.dgft-enabled-wrap{width:30%}.toggle-three-switch.dgft-mode .switches-container input:first-of-type:checked~.switch-wrapper{transform:translateX(0)}.mt-body{margin-top:75px}.mt-12px{margin-top:.75rem}.my-12px{margin-block:0.75rem}.mx-12px{margin-inline:0.75rem}.p-12px{padding:.75rem}.p-3rem{padding:3rem}.dsc-heading{font-size:1.25rem}.bg-orange{background:linear-gradient(180deg,#fff8f1 0,#fff 100%)}.ems-custom-btn{position:relative!important;height:40px!important;width:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid #9ca3af;border-radius:50%;background:#fff}.ems-arrowicon{height:14px!important;width:14px!important}.ems-custom-btn--next{transform:rotate(180deg);right:0}.swiper-button-next:after,.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{display:none}.greyscale{filter:grayscale(100%)}.ems-sliderfluid-wrapper{margin-right:-20px}.ems-sliderfluid-swiper{position:relative}.ems-recbox{border:1px solid #cddbfe;background:#fff;border-radius:20px;padding:1rem;display:grid;gap:15px;color:#111928;min-height:345px}.ems-recbox--purple{background:#edebfe;min-height:350px}.ems-recbox--purple .bg-white{min-height:175px}.drop-shadow{box-shadow:0 4px 30px 0 #fe9D661F}.small,small{font-size:.875rem!important}.login-box label{cursor:default}.login-box .form-control:focus{box-shadow:none;border-color:#0b5ed7}.d-flex-item{display:flex}.error-msg{color:#e02424}.form-error-control{border-color:#e02424;color:#e02424}.text-red{color:#d03801}.text-blue{color:#1c64f2}.border-grey{border:1px solid #d0d5dd}.login-box .iti--allow-dropdown{width:100%}.cursor-pointer{cursor:pointer}.extra-small{font-size:9px}.min-height-dsc{min-height:175px}.step1-step2-arrow{position:absolute;left:-6%;top:45%;transform:translateY(-50%)}.step2-step3-arrow{position:absolute;right:-6%;top:45%;transform:translateY(-50%)}.step1-step2-arrow img,.step2-step3-arrow img{width:1rem}.form-control::placeholder{color:#9ca3af;font-size:14px}#indian-user-login-box .fl-label{display:none}.mobileBox .otp-input{width:10%!important}.emailOtpBox{width:10%}.imgSec img{height:68px}ul.list-unstyled li img{height:22px}.amezonSec{padding:40px 50px;margin-top:14%;font-size:20px}.line{border:1px solid #feecdc}.testimonial-img{border-radius:15px;object-fit:cover;width:100%;height:100%}.testimonial-card{background-color:#fff;border-radius:15px;padding:20px 25px;box-shadow:0 4px 12px rgba(0,0,0,.06)}.ms-n2{margin-left:-23px}.box-shadow{--bs-box-shadow-sm:0 0.125rem 0.25rem #CDDBFE}.digitalSignatureContent{padding-bottom:180px}.mainsection{padding:50px 0 0}.trustedContent{padding:0;position:relative;top:-115px}.steps.bg-orange{padding-top:320px}.trustedContent .innerSec{position:absolute}.subFooter{font-size:12px}.hyundaiImg{height:26px}.airtelImg{height:24px}.trustBox{border:1px solid #cddbfe;background:#fff;border-radius:20px;padding:1.8rem}.paraTxt{min-height:135px}.px-3rem{padding:40px 130px}.certificateBox p{font-size:14px}.px-7{padding:0 100px}.timeline{position:relative;margin:4rem 0;padding:2rem 0}.timeline p{font-weight:bolder;font-size:14px}.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:4px;background:#f58220}.timeline-step{position:relative;margin-bottom:4rem}.timeline-content{position:relative;width:41%;background:#fff;border-radius:10px;display:flex;gap:1rem}.timeline-step.left .timeline-content{margin-right:auto}.timeline-step.right .timeline-content{margin-left:auto}.timeline-img{position:absolute;top:60px;left:50%;transform:translate(-50%,-50%);background:#fffaf5;color:#6236ff;font-weight:700;padding:.25rem .75rem;border-radius:20px;z-index:1}.timeline-year{position:absolute;top:52px;left:58%;transform:translate(-50%,-50%);color:#6236ff;font-weight:700;font-size:1.1rem}.timeline-icon{width:40px;height:40px}.yearLeft{position:absolute;top:60px;right:7%;transform:translate(-57%,-50%);color:#6236ff;font-weight:700;font-size:1.1rem}@media (min-width:768px){.ems-recbox{gap:25px;padding:1.8rem}}@media (max-width:1200px){.step1-step2-arrow,.step2-step3-arrow{display:none}.fs-7{font-size:.875rem}.fs-8{font-size:.75rem}.disabled-label{pointer-events:none;background:#f3f2f2;border-radius:17px;border-radius:.5rem}}@media (max-width:767px){.mt-body{margin-top:40px}.trustedContent .innerSec{position:initial}.steps.bg-orange{padding-top:20px}.trustedContent{top:0}.digitalSignatureContent{padding-bottom:0}.p-3rem{padding:16px}.timeline{position:relative;margin:40px 0 0;padding:0}.px-7{padding:0}.body p{font-size:14px}.container h1{font-size:26px}.mainsection{padding:35px 0 0}h2{font-size:28px}.paraTxt{font-size:14px}.px-3rem{padding:10px}.timeline::before{left:1%;top:-10px}.timeline-content{width:90%!important;margin:0 30px!important;display:block}.timeline-img{top:-9px;left:1%}.timeline-year,.yearLeft{left:23%;top:-10px;right:auto}.timeline p{font-weight:600;font-size:13px}.mt-5rem{margin-top:0rem}.amezonSec{padding:10px 10px 10px 30px;margin-top:10%;font-size:10px}.mobileBox .form-control{padding:2px 4px}main h2{font-size:20px}.navbar-brand img{height:36px}.bg-primary-light .d-flex-item{display:block}.dgft-enabled-wrap{width:100%}.ems-recbox{min-height:320px}.ems-sliderfluid-wrapper{margin-right:0}}@media (max-width:400px){.bg-white .small{font-size:.625rem!important}h2{font-size:20px}.searchImg{font-size:12px!important}.searchImg img{height:16px}.amezonSec{padding:10px 10px 10px 30px;margin-top:10%;font-size:6px}} /* ========================================================================== PaperlessForeignIndividual.jsp -- PR-B unified-wizard reskin ----------------------------------------------------------------------- Ported from the eMudhra design-system mockup (Foreign KYC Enrolment.html). Reskins the EXISTING bootstrap/eSctr-box markup in place (same ids/names, same JS hooks) rather than renaming classes. Every rule touching a shared class (.form-control, .fl-label, .eSctr-box, .dropzone-wrapper, .btn-orange) is scoped under #enrolDSC on purpose -- that id is reused by PaperlessIndividual.jsp, PaperlessOrganization.jsp, PaperlessForeignOrgKYC.jsp and the legacy PaperlessForeignIndividualKYC.jsp too. This file is also linked from Login.jsp/index.jsp/etc (pre-existing, unrelated rules above) -- do NOT drop the #enrolDSC scoping below, that's what keeps this block from leaking onto those other KYC pages. ========================================================================== */ /* NOTE: custom properties on :root are inert until referenced by var() -- no other page's CSS references --wz-*, so defining them globally here is safe. They're on :root (not #enrolDSC) specifically because the step-indicator markup below (.wz-steps) sits OUTSIDE #enrolDSC in the JSP (a preceding sibling, not a descendant) and still needs to read them. */ :root { --wz-primary: #ff8b00; --wz-primary-deep: #d9551a; --wz-blue: #1c64f2; --wz-blue-50: #ebf5ff; --wz-blue-800: #1e429f; --wz-ink: #111928; --wz-body: #374151; --wz-muted: #6b7280; --wz-subtle: #9ca3af; --wz-line: #e5e7eb; --wz-card-bg: #ffffff; --wz-section-bg: #f9fafb; --wz-ok: #03543f; --wz-ok-bg: #def7ec; --wz-ok-line: #bfe6cd; --wz-warn-bg: #fdf6b2; --wz-warn-line: #f5e08c; --wz-warn-text: #723b13; --wz-danger: #9b1c1c; --wz-danger-bg: #fde8e8; --wz-danger-line: #f8b4b4; --wz-radius-md: 12px; --wz-radius-lg: 16px; --wz-radius-xl: 20px; --wz-shadow-sm: 0 1px 3px rgba(17,25,40,.08), 0 1px 2px rgba(17,25,40,.04); --wz-font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; } #enrolDSC, #enrolDSC .wz-card, #enrolDSC .enrol-step { font-family: var(--wz-font); color: var(--wz-body); } /* Sticky right rail, matching the reference mockup's ".kyc-rail{position:sticky;top:78px}" (no fixed/sticky header on this page, so a smaller top offset is enough here). #enrolDSC is itself the flex row (Bootstrap "row g-2") -- without align-items:flex-start, Bootstrap's default stretch makes both columns equal height, which defeats sticky (it needs the rail to be its own, usually-shorter, natural height to visibly pin while the taller left column scrolls past underneath it -- otherwise the left column looked "blank" once its own content ended while the (equal-height-stretched, non-sticky) rail kept showing more below it). */ #enrolDSC { align-items: flex-start; } #enrolDSC > .col-md-3 { position: sticky; top: 16px; align-self: flex-start; } /* Sticky positioning was silently inert without this: legacy css/style.css sets "body{overflow:hidden;...}" sitewide. body has no explicit height (auto-sized to content), so this never visibly clips anything -- but it still makes body count as the "nearest scrolling ancestor" for sticky-positioning purposes, and body itself never actually scrolls (the viewport/html does), so any sticky descendant was pinned relative to a container that never moves, which looks identical to plain static positioning. styleNew.css loads AFTER style.css on this page, so this same-specificity override wins. NOTE: styleNew.css is also loaded by Login.jsp/index.jsp/etc (see file header) -- this override applies there too, but since it only restores default (non-clipping) behavior on an unconstrained-height body, it cannot introduce a new visual clip anywhere, only fix sticky wherever it's used. */ body { overflow: visible; } /* .wz-steps sits BEFORE #enrolDSC in the JSP (sibling, not descendant) -- these rules are deliberately unscoped. Safe: .wz-steps/.wz-step-* are unique classnames used nowhere else in the codebase (verified), so there's no cross-page collision risk without the prefix. */ .wz-steps { display: flex; gap: 10px; margin: 20px 0 18px; padding: 0; list-style: none; flex-wrap: wrap; justify-content: center; } .wz-steps li { flex: 1 1 200px; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--wz-radius-md); background: var(--wz-card-bg); border: 1.5px solid var(--wz-line); } .wz-steps li .wz-step-no { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--wz-section-bg); color: var(--wz-muted); } .wz-step-lb { display: flex; flex-direction: column; min-width: 0; } .wz-step-k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--wz-subtle); font-weight: 600; } .wz-step-v { font-size: 14px; font-weight: 500; color: var(--wz-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wz-steps li.wz-active { border-color: var(--wz-blue); background: var(--wz-blue-50); box-shadow: 0 1px 2px rgba(17,25,40,.05); } .wz-steps li.wz-active .wz-step-no { background: var(--wz-blue); color: #fff; } .wz-steps li.wz-active .wz-step-v { color: var(--wz-blue-800); } /* Completed-step tickmark (GoToStep() in PaperlessForeignIndividual.js swaps the number for a check icon on every step index below the current one). Not part of the reference mockup (which only defines an active state) -- added per explicit feedback as a completion cue. */ .wz-steps li.wz-completed { border-color: var(--wz-ok-line); background: var(--wz-ok-bg); } .wz-steps li.wz-completed .wz-step-no { background: var(--wz-ok); color: #fff; font-size: 13px; } .wz-steps li.wz-completed .wz-step-v { color: var(--wz-ok); } /* Document-discrepancy full-block state (resumeStep=="1D") -- same treatment as .wz-completed above, red-themed to match SQLTrackOrderStatus.java's "Discrepant" (bg-danger) status on Track Status. Declared after .wz-active/.wz-completed so it wins on the shared "wz-active wz-danger" combination (Step 1 stays the active step while also being flagged discrepant). */ .wz-steps li.wz-danger { border-color: var(--wz-danger-line); background: var(--wz-danger-bg); } .wz-steps li.wz-danger .wz-step-no { background: var(--wz-danger); color: #fff; } .wz-steps li.wz-danger .wz-step-v { color: var(--wz-danger); } /* Payment-success summary banner -- layered on the existing .wz-ok-banner component (see that rule above) so it matches the wizard's other compact banners instead of introducing its own bulkier padding/font sizing. Sits BEFORE .wz-steps in the JSP (sibling, not descendant of #enrolDSC), same reasoning as .wz-steps itself above, so deliberately unscoped here too. */ .wz-payment-card { margin-bottom: 4px; background-color:var(--wz-ok-bg); } /* No border/background here on purpose -- only the success message + its tick icon are green, matching PaperlessForeignIndividualKYC.jsp's reference (font-weight:bold; color:green on the message text only; its "Order No:"/"Purchase Reference No:"/"Product Details:" labels are plain bold text via .payment-head, not green). #enrolDSC .wz-otp-sent-ok's own color rule doesn't reach this banner (scoped, and this sits outside #enrolDSC), so it needs its own unscoped copy. The icon has no color of its own (Font Awesome icons default to currentColor), so it turns green too. */ .wz-payment-card .wz-otp-sent-ok { color: var(--wz-ok); font-weight: 700; font-size: 12px; } .wz-payment-card__grid { display: flex; flex-wrap: wrap; column-gap: 24px; } .wz-payment-card__lbl { font-weight: 600; color: var(--wz-ink); font-size: 11px; } .wz-payment-card__val { font-weight: 500; font-size: 12px; } .wz-payment-card__val label { margin: 0 4px 0 0; font-weight: 500;} #enrolDSC .wz-card { background: var(--wz-card-bg); border: 1px solid var(--wz-line); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-sm); padding: 0; margin-bottom: 18px; overflow: hidden; } #enrolDSC .wz-cardhd { padding: 18px 24px; border-bottom: 1px solid var(--wz-line); display: flex; align-items: center; gap: 12px; } #enrolDSC .wz-cardhd .wz-section-badge { width: 32px; height: 32px; font-size: 14px; border-radius: 50%; } #enrolDSC .wz-cardhd__t { font-size: 20px; font-weight: 700; color: var(--wz-ink); margin: 0; } #enrolDSC .wz-cardhd__s { font-size: 13px; color: var(--wz-muted); margin: 2px 0 0; } /* Step 3 video-language selector -- sits in .wz-cardhd's own right-side space (the title/ subtitle block next to it carries .flex-grow-1, so it always fills exactly what's left) instead of taking a separate full-width row above the video widget. Fixed, not shrinking -- #wzVrLangWrap wrapping onto its own line on narrow screens (media rule further down) handles the case where there isn't enough width, rather than letting the select get squeezed. */ #enrolDSC .wz-vr-lang { flex: 0 0 auto; width: 190px; } #enrolDSC .wz-vr-lang .eSctr-box { margin-bottom: 0; } /* Narrow screens: no room next to the title text at 190px -- wrap it onto its own full-width line under the title instead of squeezing it. Its own dedicated block (not reusing the later "compact header" override section further down this file, which applies at ALL widths, not just mobile -- that mismatch is what caused the selector to always render full-width below the title regardless of screen size on the first attempt at this). */ @media (max-width: 767px) { #enrolDSC #wzStep3Panel .wz-cardhd { flex-wrap: wrap; } #enrolDSC .wz-vr-lang { width: 100%; margin-top: 6px; } } #enrolDSC .wz-section { padding: 22px 24px; border-top: 1px solid var(--wz-line); } #enrolDSC .wz-section:first-child { border-top: 0; } #enrolDSC .wz-section-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } #enrolDSC .wz-section-badge { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--wz-blue-50); color: var(--wz-blue-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin-top: 1px; } #enrolDSC .wz-section-title { font-size: 18px; font-weight: 600; color: var(--wz-ink); margin: 0; } #enrolDSC .wz-section-sub { font-size: 13px; color: var(--wz-muted); margin: 3px 0 0; } #enrolDSC .wz-otp-sent-ok { color: var(--wz-ok); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; } #enrolDSC .wz-ok-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--wz-ok-bg); border: 1px solid var(--wz-ok-line); color: var(--wz-ok); border-radius: var(--wz-radius-md); padding: 13px 15px; font-size: 13px; line-height: 1.5; } #enrolDSC .wz-info-banner { background: var(--wz-blue-50); border: 1px solid #c3ddfd; color: var(--wz-blue-800); border-radius: var(--wz-radius-md); padding: 13px 15px; font-size: 13px; line-height: 1.5; margin-top: 16px; } #enrolDSC .wz-cta-bar { display: flex; justify-content: flex-end; margin-top: 4px; padding: 22px 24px; border-top: 1px solid var(--wz-line); } /* Ghost-style "Back" button (Step 2/3 -> Track page) -- was referenced on the Step 2 "Do it later" button already but never actually had a rule, so it rendered unstyled. No border by default (unlike Bootstrap's .btn-outline-secondary), matching the reference mockup's ems-btn--ghost look: plain text-weight button, subtle background/border only on hover/focus. */ #enrolDSC .wz-btn-outline { background: transparent; border: 1.5px solid transparent; color: var(--wz-body); font-weight: 500; padding: 13px 15px; border-radius: var(--wz-radius-md); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } #enrolDSC .wz-btn-outline:hover, #enrolDSC .wz-btn-outline:focus { background: var(--wz-section-bg); color: var(--wz-ink); border-color: var(--wz-line); } #enrolDSC .form-control, #enrolDSC .form-select, #enrolDSC select.form-control { border: 1px solid #d1d5db; border-radius: 8px; font-family: var(--wz-font); font-size: 12px; color: var(--wz-ink); transition: border-color .2s ease, box-shadow .2s ease; padding-top: 10px; height: 32px; } /* AB: the "height: 32px" above is sized for single-line inputs/selects, but this selector (.form-control) also matches the PAN Address