` per line; render them as stacked
blocks (no margin) so they read like prod's `...
` lines. */
.v2-pub-tnc-msg strong,
.v2-pub-tnc-msg b { font-weight: bold; }
.v2-pub-tnc-msg em,
.v2-pub-tnc-msg i { font-style: italic; }
.v2-pub-tnc-msg u { text-decoration: underline; }
.v2-pub-tnc-msg p { display: block; margin: 0; }
.v2-pub-tnc-msg p:empty { min-height: 1em; }
.v2-pub-tnc-doclink {
font-size: 16px;
line-height: 20px;
margin-bottom: 0;
}
.v2-pub-tnc-doclink a {
font-family: 'Lato', sans-serif;
color: #2541DD;
text-decoration: underline;
cursor: pointer;
font-weight: 500;
font-size: 16px;
line-height: 20px;
}
.v2-pub-tnc-doclink a:hover {
color: #1A33B8;
}
/* Submit disabled state — when captcha/terms gate is open */
.v2-pq-submit-bottom.v2-pub-submit-disabled,
.v2-pq-header-submit-btn.v2-pub-submit-disabled {
pointer-events: none;
opacity: 0.45;
cursor: not-allowed;
}
/* ---------- Terms & Conditions document viewer modal (Figma 1288:84648) ---------- */
.v2-pub-tnc-modal {
display: none;
position: fixed;
z-index: 1100;
inset: 0;
width: 100%;
height: 100%;
background: rgba(15, 18, 35, 0.55);
overflow: auto;
}
.v2-pub-tnc-modal.v2-pub-tnc-modal-open {
display: flex;
align-items: center;
justify-content: center;
animation: v2PubTncBackdropIn 0.18s ease-out;
}
.v2-pub-tnc-modal .modal-content.custom-tc-modal {
background: #FFFFFF;
border-radius: 12px;
width: calc(100% - 32px);
max-width: 780px;
height: 86vh;
max-height: 86vh;
min-height: 480px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 4px 55px -18px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.v2-pub-tnc-modal.v2-pub-tnc-modal-open .modal-content.custom-tc-modal {
animation: v2PubTncModalIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes v2PubTncBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes v2PubTncModalIn {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.v2-pub-tnc-modal .tc-modal-header {
align-self: stretch;
color: #4F66E4;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
padding: 0;
margin: 0;
border: none;
text-align: center;
}
.v2-pub-tnc-modal .tc-modal-body {
align-self: stretch;
flex: 1;
min-height: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
overscroll-behavior: contain;
}
.v2-pub-tnc-modal #pdf_viewer {
flex: 1;
overflow-y: auto;
margin-bottom: 0;
padding-right: 12px;
color: #5C5C5C;
font-family: 'Lato', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
text-align: justify;
scrollbar-width: thin;
scrollbar-color: #4F66E4 #F2F2F2;
}
.v2-pub-tnc-modal #pdf_viewer::-webkit-scrollbar {
width: 7px;
}
.v2-pub-tnc-modal #pdf_viewer::-webkit-scrollbar-track {
background: #F2F2F2;
border-radius: 64px;
}
.v2-pub-tnc-modal #pdf_viewer::-webkit-scrollbar-thumb {
background: #4F66E4;
border-radius: 64px;
}
.v2-pub-tnc-modal #canvas_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.v2-pub-tnc-modal .pdf-page-canvas {
width: 100%;
max-width: 100%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
border-radius: 4px;
animation: v2PubTncPageIn 0.25s ease-out;
}
@keyframes v2PubTncPageIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.v2-pub-tnc-skeleton {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 0 12px;
}
.v2-pub-tnc-skel-line {
height: 14px;
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(15, 18, 35, 0.06) 0%,
rgba(15, 18, 35, 0.12) 50%,
rgba(15, 18, 35, 0.06) 100%
);
background-size: 200% 100%;
animation: v2PubTncShimmer 1.4s ease-in-out infinite;
}
.v2-pub-tnc-skel-line--title { height: 22px; width: 38%; margin-bottom: 6px; }
.v2-pub-tnc-skel-line--95 { width: 95%; }
.v2-pub-tnc-skel-line--90 { width: 90%; }
.v2-pub-tnc-skel-line--85 { width: 85%; }
.v2-pub-tnc-skel-line--80 { width: 80%; }
.v2-pub-tnc-skel-line--70 { width: 70%; }
.v2-pub-tnc-skel-line--60 { width: 60%; }
@keyframes v2PubTncShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.v2-pub-tnc-modal-actions {
align-self: stretch;
display: flex;
justify-content: center;
padding: 0;
border: none;
margin: 0;
}
.v2-pub-tnc-accept {
background: #4F66E4;
color: #FFFFFF;
border: 1px solid #4F66E4;
border-radius: 2px;
width: 191px;
height: auto;
padding: 4px 12px;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 24px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.v2-pub-tnc-accept:hover {
background: #3D52C6;
border-color: #3D52C6;
}
/* When the org requires viewing the full TnC content before continuing, the
button is locked until the user scrolls to the bottom of #pdf_viewer.
visibility:hidden (not display:none) preserves the action bar's height so
the modal layout doesn't jump when the button is revealed. */
.v2-pub-tnc-accept.v2-pub-tnc-accept--locked {
visibility: hidden;
}
body.v2-pub-tnc-modal-locked {
overflow: hidden;
}
/* ---------- Unavailable / error page — Figma 1645:76384 ---------- */
.v2-pub-page.v2-pub-error-state {
background: #FFFFFF;
}
.v2-pub-page.v2-pub-error-state .v2-pq-header-right,
.v2-pub-page.v2-pub-error-state #v2PqHeaderSubmit {
display: none;
}
.v2-pub-error-page {
display: flex;
align-items: stretch;
width: 100%;
flex: 1 1 auto;
background: #FFFFFF;
min-height: calc(100vh - 72px);
}
.v2-pub-error-text-col {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 96px 0;
box-sizing: border-box;
}
.v2-pub-error-content {
width: 640px;
max-width: 100%;
padding-left: 32px;
padding-right: 64px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
}
.v2-pub-error-text {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.v2-pub-error-heading {
font-family: 'Lato', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 1.35;
letter-spacing: -0.6px;
color: #1F1F1F;
margin: 0;
width: 544px;
max-width: 100%;
}
.v2-pub-error-supporting {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #7A7A7A;
margin: 0;
width: 480px;
max-width: 100%;
}
.v2-pub-error-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
background: #FFFFFF;
border: 1px solid #C2C2C2;
border-radius: 4px;
font-family: 'Lato', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #5C5C5C;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.v2-pub-error-back-btn:hover {
background: #FAFAFA;
border-color: #A3A3A3;
}
.v2-pub-error-back-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.v2-pub-error-illustration {
flex: 0 0 720px;
background: #F9F9F9;
position: relative;
align-self: stretch;
align-content: center;
text-align: center;
}
.v2-pub-error-link-off {
position: absolute;
left: 240px;
top: 265px;
width: 240px;
height: 240px;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.v2-pub-userinfo {
padding: 12px 24px;
}
.v2-pub-tnc-block {
padding: 24px 60px;
}
.v2-pub-error-page {
flex-direction: column;
min-height: auto;
}
.v2-pub-error-text-col {
justify-content: center;
padding: 60px 24px;
}
.v2-pub-error-content {
width: 100%;
max-width: 640px;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
}
.v2-pub-error-illustration {
flex: 0 0 auto;
width: 100%;
height: 360px;
}
.v2-pub-error-link-off {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
}
@media (max-width: 768px) {
.v2-pub-header {
padding: 0 16px;
height: auto;
min-height: 56px;
flex-wrap: wrap;
}
.v2-pub-userinfo {
padding: 12px 16px;
}
.v2-pub-userinfo-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.v2-pub-field {
width: 100%;
flex: 0 0 auto;
}
.v2-pub-submit-footer.v2-pq-submit-footer {
padding: 16px 16px;
}
.v2-pub-tnc-block {
padding: 20px 16px;
}
.v2-pub-captcha-wrap .g-recaptcha {
transform: scale(0.85);
}
.v2-pub-tnc-modal .modal-content.custom-tc-modal {
width: calc(100% - 16px);
height: 92vh;
max-height: 92vh;
min-height: 0;
padding: 16px;
}
.v2-pub-tnc-accept {
width: 100%;
max-width: 240px;
}
.v2-pub-error-text-col {
padding: 40px 16px;
}
.v2-pub-error-content {
gap: 32px;
}
.v2-pub-error-heading {
font-size: 24px;
letter-spacing: -0.4px;
width: 100%;
}
.v2-pub-error-supporting {
font-size: 16px;
line-height: 24px;
width: 100%;
}
.v2-pub-error-illustration {
height: 280px;
}
.v2-pub-error-link-off {
width: 160px;
height: 160px;
}
}
/* ============================================================
Success state (Figma 1288:84676)
- Navy-blue full-bleed background under a sticky white header
- Centered white card with Lottie confetti tick + thank-you copy
============================================================ */
.v2-pub-page.v2-pub-success-state {
background: #123075;
}
/* Hide the Submit action on the success page, but keep the right column in the
flex flow (visibility:hidden, not display:none) so the `--centered` header's
`logo | center | right` balance survives — display:none drops the right
column, letting the logo grow and shove the centred title to the right edge. */
.v2-pub-page.v2-pub-success-state .v2-pq-header-right {
visibility: hidden;
}
.v2-pub-page.v2-pub-success-state #v2PqHeaderSubmit {
display: none;
}
.v2-pub-success-wrap {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 176px 24px 48px;
background: #123075;
}
.v2-pub-success-card {
width: 480px;
height: 360px;
max-width: 100%;
background: #FFFFFF;
border-radius: 12px;
padding: 36px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
}
.v2-pub-success-anim {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -180px;
}
.v2-pub-success-anim svg {
width: 100%;
height: 100%;
display: block;
}
/* Static fallback: nested green rings + check tick (matches Figma static spec) */
.v2-pub-success-anim--fallback {
position: relative;
}
.v2-pub-success-anim--fallback::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
border-radius: 50%;
background: #D1FADF;
border: 23.33px solid #ECFDF3;
box-sizing: border-box;
}
.v2-pub-success-anim--fallback::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: #12B76A;
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
}
.v2-pub-success-text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
margin-top: -210px;
}
.v2-pub-success-title {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
color: #3D3D3D;
}
.v2-pub-success-sub {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #7A7A7A;
}
/* Reference number shown after a successful public submission. Mirrors the
authenticated flow's success screen (process_questionnaire_v2.css
.v2-pq-success-ref) — centered label + value with top/bottom dividers. */
.v2-pub-success-ref {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 16px 0;
border-top: 1px solid #E5E5EA;
margin-top: 4px;
}
.v2-pub-success-ref-label {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #6B7280;
}
.v2-pub-success-ref-value {
font-family: 'Lato', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #1F1F1F;
}
/* Configurable per-evaluation thanks message (Evaluation.thanksText). Sits
below the standard sub-line; newlines from the configured value are rendered
as
so multi-paragraph messages don't collapse into a single run. */
.v2-pub-success-thanks {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #5C5C5C;
margin-top: 8px;
max-width: 520px;
white-space: normal;
word-break: break-word;
}
@media (max-width: 768px) {
.v2-pub-success-wrap {
padding: 80px 16px 32px;
}
.v2-pub-success-card {
padding: 28px 20px;
gap: 48px;
}
.v2-pub-success-anim {
width: 160px;
height: 160px;
}
}
/* ---------- MLRA Expected Due Date (Case 3 — L0 in MLRA + enableConfig + dueType in (1,3))
Mirrors old UI public_create_dc.jsp:1648-1672 (mlra-assign-due-wrap) with V2 styling.
The wrap sits between the last section and captcha/T&C, full-width white card with
left-aligned label + 300px-wide date input on the right. Reuses .v2-pq-text-input
styling so the cursor + calendar icon behave the same as in-question date pickers. */
.v2-pub-mlra-due-wrap {
width: 100%;
max-width: 880px;
margin: 16px auto 0;
box-sizing: border-box;
background: #FFFFFF;
padding: 16px 24px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: space-between;
}
.v2-pub-mlra-due-label {
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
color: #5C5C5C;
line-height: 24px;
margin: 0;
}
.v2-pub-mlra-due-input-wrap {
flex: 0 0 300px;
max-width: 300px;
width: 300px;
}
.v2-pub-mlra-due-input {
width: 100%;
box-sizing: border-box;
padding-right: 42px;
cursor: pointer;
}
.v2-pub-mlra-due-input.v2-pub-mlra-due-readonly {
background: #F5F5F5;
color: #7A7A7A;
cursor: not-allowed;
}
@media (max-width: 768px) {
.v2-pub-mlra-due-wrap {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.v2-pub-mlra-due-input-wrap {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
}
}
/* ===== External-query per-question OTP (phone valType 9 / email valType 12) =====
The user types a phone/email inline, validates via OTP, then the rest of the
questions appear. Reuses .v2-pq-text-input / .v2-pq-phone-wrap visual language. */
.v2-extqry-otp-validated {
background: #F9FAFB;
color: #344054;
cursor: default;
}
.v2-extqry-otp-actions {
margin-top: 14px;
display: flex;
justify-content: center;
}
.v2-extqry-otp-validate-btn {
appearance: none;
border: none;
cursor: pointer;
background: #4F66E4;
color: #FFFFFF;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 10px 28px;
border-radius: 8px;
}
.v2-extqry-otp-validate-btn:hover {
background: #3F54C4;
}
.v2-extqry-otp-hint {
margin: 16px auto 0;
text-align: center;
color: #667085;
font-size: 13px;
line-height: 18px;
}