/* ========================================================================== NIESBUD Public Registration theme Layered over css/main.css. Scoped to .public-reg (set on by PublicReg.master, or on a wrapper div for pages using other masters). ========================================================================== */ body.public-reg { background: #eef2f6; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ body.public-reg .app-header { background: linear-gradient(135deg, #1b6896 0%, #134f74 100%); box-shadow: 0 2px 8px rgba(16, 42, 67, 0.18); } body.public-reg .app-header__logo { background: transparent; font-weight: 700; letter-spacing: 0.5px; } /* -------------------------------------------------------------------------- Page title bar -------------------------------------------------------------------------- */ .public-reg .app-title { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 42, 67, 0.08); padding: 18px 24px; margin-bottom: 24px; } .public-reg .app-title h1 { font-size: 1.45rem; font-weight: 700; color: #14395b; } .public-reg .app-title h1 .fa { color: #1b6896; margin-right: 10px; } .public-reg .app-title p { color: #64748b; margin: 4px 0 0; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .public-reg .tile { border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06); padding: 24px; } /* -------------------------------------------------------------------------- Section titles inside cards -------------------------------------------------------------------------- */ .public-reg .pr-section-title { display: flex; align-items: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #1b6896; border-bottom: 2px solid #e8eef4; padding-bottom: 8px; margin: 6px 0 18px; } .public-reg .pr-section-title .fa { margin-right: 8px; font-size: 0.9rem; } .public-reg .pr-section-title.pr-section-title--gap { margin-top: 28px; } /* -------------------------------------------------------------------------- Read-only program information -------------------------------------------------------------------------- */ .public-reg .pr-info .form-group { margin-bottom: 16px; } .public-reg .pr-info .control-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: #8094a8; font-weight: 700; margin-bottom: 0; } .public-reg .form-control.pr-static, .public-reg .form-control.pr-static[readonly], .public-reg .form-control.pr-static[disabled] { background: transparent; border: 0; border-bottom: 1px dashed #d7e0ea; border-radius: 0; box-shadow: none; height: auto; padding: 2px 0 6px; color: #14395b; font-weight: 600; opacity: 1; text-overflow: ellipsis; } /* -------------------------------------------------------------------------- Labels, hints and required markers -------------------------------------------------------------------------- */ .public-reg .control-label { font-weight: 600; color: #33475b; font-size: 0.9rem; } .public-reg .req { color: #d9534f; margin-left: 2px; } .public-reg .form-text { color: #8094a8; } /* -------------------------------------------------------------------------- Inputs -------------------------------------------------------------------------- */ .public-reg input.form-control:not(.pr-static), .public-reg select.form-control { min-height: 42px; border-radius: 8px; border-color: #cfd8e3; } .public-reg textarea.form-control { border-radius: 8px; border-color: #cfd8e3; } .public-reg .form-control:focus { border-color: #1b6896; box-shadow: 0 0 0 0.2rem rgba(27, 104, 150, 0.15); } .public-reg input[type="file"].form-control { height: auto; padding: 0.45rem 0.6rem; } .public-reg .form-group { margin-bottom: 1.15rem; } /* Validator messages */ .public-reg span.text-danger { display: block; font-size: 0.82rem; margin-top: 4px; } /* Radio button lists (rendered as tables by ASP.NET) */ .public-reg .pr-radio label { font-weight: 400; margin: 0 4px 0 6px; color: #33475b; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .public-reg .btn-primary { background: #1b6896; border-color: #1b6896; border-radius: 8px; font-weight: 600; padding: 0.55rem 1.8rem; } .public-reg .btn-primary:hover, .public-reg .btn-primary:focus { background: #134f74; border-color: #134f74; } .public-reg .pr-submit-row { display: flex; justify-content: flex-end; border-top: 1px solid #eef2f6; margin-top: 12px; padding-top: 18px; } /* -------------------------------------------------------------------------- Notice banners -------------------------------------------------------------------------- */ .public-reg .pr-note { display: flex; align-items: flex-start; border-radius: 8px; padding: 12px 16px; font-weight: 600; margin-bottom: 16px; } .public-reg .pr-note .fa { margin: 3px 10px 0 0; } .public-reg .pr-note--info { background: #eaf4fb; color: #155e86; border: 1px solid #cfe6f5; } .public-reg .pr-note--danger { background: #fdecec; color: #a12622; border: 1px solid #f5cccc; } /* -------------------------------------------------------------------------- Upload boxes and croppie containers -------------------------------------------------------------------------- */ .public-reg .pr-upload { border: 2px dashed #cfd8e3; border-radius: 10px; background: #fbfcfe; padding: 16px; height: 100%; } .public-reg .pr-upload .control-label { display: block; } .public-reg .pr-upload-hint { font-size: 0.85rem; color: #8094a8; margin-bottom: 8px; } .public-reg .pr-upload-hint--warn { color: #a12622; font-weight: 600; } .public-reg #croppieContainer, .public-reg #croppieContainerSign, .public-reg #croppieContainerPan, .public-reg #croppieContainerQualify { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 12px; margin-top: 10px; max-width: 100%; overflow: visible; } /* Hide croppie boxes until an image is loaded into them */ .public-reg #croppieContainer:empty, .public-reg #croppieContainerSign:empty, .public-reg #croppieContainerPan:empty, .public-reg #croppieContainerQualify:empty { display: none; } .public-reg .croppie-container, .public-reg .cr-boundary { max-width: 100%; } .public-reg .cr-boundary { overflow: hidden; } /* External zoom bar used by the croppie setup */ .public-reg .zoom-bar { margin-top: 8px; padding: 6px 8px; background: #fff; border: 1px solid #e9ecef; border-radius: 0.25rem; } .public-reg .zoom-bar input[type="range"] { width: 100%; } /* -------------------------------------------------------------------------- OTP / credentials step -------------------------------------------------------------------------- */ .public-reg .pr-otp { border-left: 4px solid #1b6896; } .public-reg .pr-cred .form-control[disabled] { background: #f4f7fa; border-color: #cfd8e3; font-weight: 700; letter-spacing: 0.5px; color: #14395b; opacity: 1; } /* -------------------------------------------------------------------------- Success / confirmation page -------------------------------------------------------------------------- */ .public-reg .pr-success { text-align: center; padding: 10px 0 4px; } .public-reg .pr-success img { width: 64px; height: 64px; margin-bottom: 12px; } .public-reg .pr-success h2 { font-size: 1.4rem; font-weight: 700; color: #1d7a3f; } .public-reg .pr-success p { color: #64748b; } .public-reg .pr-kv-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; height: calc(100% - 14px); } .public-reg .pr-kv-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: #8094a8; font-weight: 700; } .public-reg .pr-kv-value { font-weight: 700; color: #14395b; word-break: break-word; } .public-reg .pr-kv-item--highlight { background: #eaf4fb; border-color: #9ec9e2; } /* -------------------------------------------------------------------------- "Program not found" state -------------------------------------------------------------------------- */ .public-reg .pr-notfound { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06); text-align: center; padding: 48px 24px; } .public-reg .pr-notfound .fa { font-size: 2.6rem; color: #d9534f; margin-bottom: 14px; } .public-reg .pr-notfound h2 { font-size: 1.3rem; font-weight: 700; color: #14395b; } .public-reg .pr-notfound p { color: #64748b; margin-bottom: 0; } /* -------------------------------------------------------------------------- DOB datepicker trigger layout (moved from MasterPage inline styles) -------------------------------------------------------------------------- */ .public-reg .dob-datepicker-wrap { display: flex; align-items: stretch; } .public-reg .dob-datepicker-wrap > input.form-control { flex: 1 1 auto; width: auto; min-width: 0; margin-right: 8px; } .public-reg .dob-datepicker-wrap > .ui-datepicker-trigger { flex: 0 0 42px; width: 42px; height: 42px; padding: 7px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff; cursor: pointer; object-fit: contain; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .public-reg .tile { padding: 16px; } .public-reg .app-title { padding: 14px 16px; margin-bottom: 16px; } .public-reg .app-title h1 { font-size: 1.2rem; } .public-reg .pr-submit-row { justify-content: stretch; } .public-reg .pr-submit-row .btn { width: 100%; } }