.labelTop
{
    margin: 5px 2px;
}

.radio-wrapper-20 input[type="radio"]:focus {
    outline: 0;
    border-color: #2260ff;
    box-shadow: 0 0 0 4px #b5c9fc;
}

.radio-wrapper-20 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    justify-content: center;
}

    .radio-wrapper-20 input[type="radio"] {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

        .radio-wrapper-20 input[type="radio"]:checked + span {
            box-shadow: 0 0 0 0.0625em #0043ed;
            background-color: #dee7ff;
            z-index: 1;
            color: #0043ed;
        }

    .radio-wrapper-20 label span {
        display: block;
        cursor: pointer;
        background-color: #fff;
        padding: 0.375em .75em;
        position: relative;
        margin-left: .0625em;
        box-shadow: 0 0 0 0.0625em #b5bfd9;
        letter-spacing: .05em;
        color: #3e4963;
        text-align: center;
        transition: background-color .5s ease;
    }

    .radio-wrapper-20 label:first-child span {
        border-radius: .375em 0 0 .375em;
    }

    .radio-wrapper-20 label:last-child span {
        border-radius: 0 .375em .375em 0;
    }


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
.form-control:focus {
    border-color: #CCC !important; /* subtle gray */
    box-shadow: 0 0 0 0.15rem rgba(108, 117, 125, 0.25) !important;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* animate.css (loaded in _Layout): entrance animations are short, and the delay-Ns helpers step in quarter-seconds */
:root { --animate-duration: .6s; --animate-delay: .25s; }

html {
  position: relative;
  min-height: 100%;
}
.translucentbg
{
    background:rgba(255,255,255,0.7) ;
    border-radius: 20px;
    height: 100% !important;
}

.translucentbg1 {
    background: rgba(255, 255, 255, 0.48);
    border-radius: 10px;
    backdrop-filter: blur(20px);
}

.selection-placeholder {
    padding: 40px 20px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #4b5563;
}

.placeholder-icon {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.7;
}

.placeholder-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937;
}

.placeholder-text {
    font-size: 15px;
    max-width: 500px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ======================================
   OnlineApplication Specific Styles
   ====================================== */

/* ======================================
   Common Validation Styles
   ====================================== */
.validation-error {
    color: red;
    font-size: small;
    display: block;
}

/* ======================================
   Welcome Page Styles
   ====================================== */
.welcome-page html, 
.welcome-page body, 
.welcome-page form {
    height: 100%;
}

@media only screen and (max-width: 1100px) {
    .welcome-page .background {
        height: 150vh;
    }
}

.welcome-page .col-xs-12 {
    height: 412px;
    width: 1116px;
}

.welcome-page .background span.descr {
    height: auto !important;
}

/* ======================================
   Identity Page Styles
   ====================================== */
.identity-page .background {
    min-height: 100vh; 
    height: 900px;
}

@media only screen and (max-width: 1370px) {
    .identity-page .background {
        height: 120vh; 
    }
}

.identity-page #NationalityOptions input[type="radio"] {
    margin-right: 5px;
}

.identity-page #NationalityOptions label {
    margin-left: 5px;
    padding-right: 14px;
}

/* ======================================
   IdentityNext (Application Form) Page Styles
   ====================================== */
.identity-next-page .container { 
    transform: scale(0.85); 
}

.identity-next-page .phonecode { 
    width: 30%; 
    float: left; 
    margin-right: 4px; 
    height: calc(2.25rem + 2px); 
}

.identity-next-page .phoneno { 
    width: 68%; 
    float: left; 
}

 

.identity-next-page .card { 
    width: 1100px; 
    margin-right: 400px; 
}

/* ======================================
   Terms and TermsandConditions Page Styles
   ====================================== */

.terms-modal-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

    .terms-modal-content h1, .terms-modal-content h2, .terms-modal-content h3, .terms-modal-content h4 {
        color: #2c3e50;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    .terms-modal-content p {
        margin-bottom: 1rem;
    }

    .terms-modal-content ol, .terms-modal-content ul {
        margin-bottom: 1rem;
        padding-left: 2rem;
    }

    .terms-modal-content li {
        margin-bottom: 0.5rem;
    }

    .terms-modal-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }

    .terms-modal-content th, .terms-modal-content td {
        border: 1px solid #dee2e6;
        padding: 8px;
        text-align: left;
    }

    .terms-modal-content th {
        background-color: #f8f9fa;
        font-weight: bold;
    }
@media only screen and (max-width: 1370px) {
    .terms-page .vcentr {
        position: relative;
        top: 50%;
        left: auto;
        transform: none;
    }
}

.terms-page .vcentr {
    text-align: justify !important;
}

.terms-page table {
    width: 100%;
    border-collapse: collapse;
}

.terms-page th, 
.terms-page td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
   

/* Gentle pulse animation */
@keyframes gentlePulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
        transform: scale(1.02);
    }
}

/* Fade in/out text animation */
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Rotating border animation */
@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hand-pointer {
        font-size: 28px;
    }
    
    .reminder-text {
        font-size: 14px;
    }
    
    .selection-reminder {
        padding: 12px;
    }
}

/* Smooth fade out transition */
.selection-reminder.fade-out {
    animation: fadeOutReminder 0.5s ease-out forwards;
}

@keyframes fadeOutReminder {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}
/* Fix dropdown arrow for select elements with form-control class */
select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* OR use a custom background arrow */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}
.category-header {
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.category-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Validation Error Modal Styling */
#validationErrorModal .modal-header {
    border-bottom: 3px solid #dc3545;
}

#validationErrorModal .list-unstyled li {
    padding: 8px 12px;
    border-left: 3px solid #dc3545;
    background-color: #f8d7da;
    border-radius: 4px;
    margin-bottom: 8px;
}

#validationErrorModal .list-unstyled li i {
    font-size: 1.1rem;
}

/* ======================================
   Application Form -- portal layout
   [Header card] -> [Select Your Programme card] -> [Application Form card].
   --oa-accent is the Submit button colour from Online Application Settings.
   ====================================== */
.oa-container { max-width: 1200px; padding-top: 24px; padding-bottom: 40px; }

.oa-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(14px);
    padding: 28px 32px;
    margin-bottom: 20px;
}

/* Header card */
/* No card box: logo and name sit directly on the page background, so the name is light for contrast. */
.oa-header { padding: 12px 32px; margin-bottom: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.oa-header-logo { max-height: 90px; width: auto; }
.oa-header-name { margin-top: 10px; font-size: 1.35rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

.oa-card-head { margin-bottom: 20px; }
.oa-card-title { font-size: 1.35rem; font-weight: 600; color: #111827; margin: 0; }
.oa-card-subtitle { margin: 4px 0 0; color: #6b7280; font-size: .95rem; }
.oa-card-subtitle:empty { display: none; }

.oa-btn { border: 0; border-radius: 10px; padding: .6rem 1.4rem; font-weight: 600; }
.oa-btn:disabled { opacity: .55; }

/* Select Your Programme -- plain labels, no numbered steps */
.oa-select-card .labelTop { display: block; margin: 0 0 6px; font-weight: 500; color: #374151; }
.oa-select-actions { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Application Form -- section headings (hidden sections simply aren't shown) */
.oa-section { margin-top: 8px; padding: 4px 0 8px; }
.oa-form-card .parentCategoryLabel h5 {
    font-size: 1.05rem; font-weight: 600; color: #111827;
    margin: 18px 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.oa-form-card .childCategoryLabel h5 { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin: 6px 0 12px; }
.oa-form-card .parentCategoryLabel h5:empty,
.oa-form-card .childCategoryLabel h5:empty { display: none; }

/* Two-column, label-on-top fields. The field rows keep their ids/markup (col-md-4 label + col-md-8 input)
   so the settings-driven show/hide keeps working -- only the layout changes here. */
.oa-form-card :is(.col-md-11, .col-md-12):has(> .row.m-2) {
    flex: 0 0 100%; max-width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px;
}
.oa-form-card :is(.col-md-11, .col-md-12) > .row.m-2 { margin: 0 0 14px !important; }
.oa-form-card :is(.col-md-11, .col-md-12) > .row.m-2 > .col-md-4,
.oa-form-card :is(.col-md-11, .col-md-12) > .row.m-2 > .col-md-8 { flex: 0 0 100%; max-width: 100%; width: 100%; }
.oa-form-card :is(.col-md-11, .col-md-12) > .row.m-2 > .col-md-4 label { margin-bottom: 6px !important; font-weight: 500; color: #374151; }
/* Long text takes the full width */
.oa-form-card :is(.col-md-11, .col-md-12) > .row.m-2:has(textarea) { grid-column: 1 / -1; }

.oa-declaration .form-check { margin: 0; }

.oa-form-actions {
    position: sticky; bottom: 16px; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 0 16px; padding: 14px 20px;
    background: #fff; border: 1px solid #e6e8f0; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(30, 35, 70, 0.08);
}
/* Hidden together with the button (the field-settings script hides the button until the form is loaded) */
.oa-form-actions:has(> #submitApplicationBtn[style*="display: none"]) { display: none; }
.oa-form-actions-note { margin: 0; color: #6b7280; font-size: .9rem; }

/* Field icons -- same pattern as ElvisSettings' .os-input-icon (icons are Bootstrap Icons, added by application-form-icons.js) */
.oa-input-icon { position: relative; }
.oa-input-icon > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #6b7280; font-size: .95rem; pointer-events: none; z-index: 2;
}
.oa-input-icon > .form-control, .oa-input-icon > .form-select { padding-left: 38px; }
.oa-input-icon:focus-within > i { color: var(--oa-accent, #0d6efd); }
.oa-input-icon:has(> :disabled) > i { opacity: .5; }
.oa-input-icon:has(> [style*="display: none"]) > i { display: none; }

/* ---- One-page shell: sticky "Application" navigation + the whole application ---- */
.oa-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}
.oa-sidebar {
    align-self: stretch;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    border-radius: 8px 0 0 8px;
}
.oa-sidebar-inner { position: sticky; top: 24px; padding: 28px 20px; }
.oa-sidebar-title { margin: 0 0 12px 12px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.oa-nav { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oa-nav a {
    position: relative; z-index: 1;               /* above the sliding highlight */
    display: block; padding: 8px 12px;
    border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
    color: #4b5563; font-size: .92rem; text-decoration: none;
    transition: color .2s ease;
}
.oa-nav a:hover { color: #111827; }
.oa-nav a:focus-visible { outline: 2px solid var(--oa-accent, #0d6efd); outline-offset: -2px; }
.oa-nav a[aria-current="true"] { color: #111827; font-weight: 600; }

/* Preview entries (before a programme is chosen): greyed out, not clickable, not focusable */
.oa-nav .oa-nav-disabled {
    display: block; padding: 8px 12px;
    border-left: 3px solid transparent;
    color: #a3acb9; font-size: .92rem;
    cursor: not-allowed; user-select: none;
}

/* The highlight: one element that slides (and resizes) to the current entry -- see application-form-nav.js */
.oa-nav-indicator {
    position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0;
    background: #fff; border-left: 3px solid var(--oa-accent, #0d6efd); border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 3px rgba(30, 35, 70, 0.08);
    opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .oa-nav-indicator, .oa-nav a { transition: none; }
}

.oa-main { min-width: 0; padding: 28px 32px 8px; background: #f6f8fb; border-radius: 0 8px 8px 0; }

/* ---- Section cards: same look as ElvisSettings' .os-card / .os-section-title ----
   Heading = icon + title in the institution colour; sub heading = the smaller muted line under it. */
.oa-shell .oa-select-card,
.oa-shell .oa-form-card .oa-section,
.oa-shell .oa-empty-card {
    padding: 22px 23px; margin: 0 0 18px;
    background: #fff; border: 1px solid #e6e8f0; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 35, 70, 0.05);
}
.oa-shell .oa-form-card { margin: 0; }
.oa-shell .oa-card-head { margin: 0 0 18px; padding: 0; border: 0; }

.oa-shell .oa-card-title,
.oa-shell .oa-form-card .parentCategoryLabel h5 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 4px; padding: 0; border: 0;
    color: var(--oa-accent, #0d6efd);
    font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.oa-shell .oa-card-title::before,
.oa-shell .oa-form-card .parentCategoryLabel h5::before {
    content: var(--oa-icon, "\f4e1");
    font-family: "bootstrap-icons" !important; font-style: normal; font-weight: 400; line-height: 1;
    font-size: 15px; letter-spacing: 0; text-transform: none;
}
.oa-shell .oa-card-subtitle { margin: 0; color: #667085; font-size: 13px; }
.oa-shell .oa-form-card .parentCategoryLabel h5 { margin-bottom: 14px; }
.oa-shell .oa-form-card .childCategoryLabel h5 {
    margin: 4px 0 12px; color: #667085;
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* One icon per section (Bootstrap Icons codepoints; the headings themselves are filled in by the field-settings script) */
.oa-select-card { --oa-icon: "\f6fe"; }
#divCandidateContainer { --oa-icon: "\f4e1"; }
#divGuardianParentContainer { --oa-icon: "\f4d0"; }
#divIntakeContainer { --oa-icon: "\f214"; }
#divAcademicsContainer { --oa-icon: "\f6fe"; }
#divMarketingContainer { --oa-icon: "\f484"; }
#divTermsandCondition { --oa-icon: "\f52f"; }

/* Application title (Online Application Settings > Heading) in the page header */
.oa-header-title { margin-top: 2px; font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.oa-shell [id^="oaSection"], .oa-shell .oa-section, .oa-shell .oa-form-card, .oa-shell [id$="CommunicationContainer"] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Tablet / mobile: the navigation becomes a compact horizontal bar that stays at the top */
@media (max-width: 991.98px) {
    .oa-shell { grid-template-columns: minmax(0, 1fr); }
    .oa-sidebar {
        position: sticky; top: 0; z-index: 20;
        border-right: 0; border-bottom: 1px solid #e5e7eb; border-radius: 8px 8px 0 0;
    }
    .oa-sidebar-inner { position: static; padding: 8px 12px; }
    .oa-sidebar-title { display: none; }
    .oa-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .oa-nav::-webkit-scrollbar { display: none; }
    .oa-nav a { white-space: nowrap; border-left: 0; border-radius: 6px 6px 0 0; padding: 8px 12px; }
    .oa-nav .oa-nav-disabled { white-space: nowrap; border-left: 0; padding: 8px 12px; }
    .oa-nav-indicator { width: 0; height: 100%; background: transparent; box-shadow: none; border-left: 0; border-bottom: 3px solid var(--oa-accent, #0d6efd); border-radius: 6px 6px 0 0; }
    .oa-main { padding: 24px 20px 0; }
    .oa-shell [id^="oaSection"], .oa-shell .oa-section, .oa-shell .oa-form-card { scroll-margin-top: 64px; }
}

@media (max-width: 767.98px) {
    .oa-card { padding: 20px 16px; border-radius: 12px; }
    .oa-shell .oa-select-card, .oa-shell .oa-form-card .oa-section { padding: 18px 16px; }
    /* Small screens: the sticky bar is just the Submit button */
    .oa-form-actions { padding: 10px 12px; bottom: 8px; }
    .oa-form-actions-note { display: none; }
    .oa-form-card :is(.col-md-11, .col-md-12):has(> .row.m-2) { grid-template-columns: minmax(0, 1fr); }
    .oa-select-actions .oa-btn, .oa-form-actions .oa-btn { width: 100%; }
}

/* ---- "No application found": centred empty state in the same card style as Select Your Programme ---- */
.oa-shell .oa-empty-card { padding: 30px 23px 28px; }
.oa-empty-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.oa-empty-illustration { width: min(340px, 100%); height: auto; display: block; }
.oa-empty-title {
    margin: 10px 0 8px; color: var(--oa-accent, #0d6efd);
    font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
/* Same text style as the sidebar entries (.oa-nav a): .92rem, grey #4b5563 */
.oa-empty-message { margin: 0; max-width: 520px; color: #4b5563; font-size: .92rem; font-weight: 500; text-wrap: balance; }
.oa-empty-hint { margin: 6px 0 0; max-width: 520px; color: #667085; font-size: 13px; text-wrap: balance; }

/* Animation, in the style of app_offline.htm: the form floats, the magnifier sweeps over it, sparkles twinkle */
.oa-empty-doc,
.oa-empty-lens,
.oa-empty-shadow,
.oa-empty-spark { transform-box: fill-box; transform-origin: center; }
.oa-empty-doc { animation: oaEmptyFloat 3.2s ease-in-out infinite; }
.oa-empty-shadow { animation: oaEmptyShadow 3.2s ease-in-out infinite; }
.oa-empty-lens { animation: oaEmptyScan 4s ease-in-out infinite; }
.oa-empty-q { animation: oaEmptyPulse 2s ease-in-out infinite; }
.oa-empty-spark { animation: oaEmptyTwinkle 2.4s ease-in-out infinite; }
.oa-empty-spark-2 { animation-delay: 1.1s; }

@keyframes oaEmptyFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes oaEmptyShadow  { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .7; } }
@keyframes oaEmptyScan    { 0%, 100% { transform: translate(-20px, -6px) rotate(-4deg); } 50% { transform: translate(18px, 8px) rotate(4deg); } }
@keyframes oaEmptyPulse   { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes oaEmptyTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
    .oa-empty-doc, .oa-empty-lens, .oa-empty-shadow, .oa-empty-q, .oa-empty-spark { animation: none; }
}

/* ---- Welcome page: same portal look as the Application Form ---- */
/* The header text is white, so portal pages need a dark colour behind it when no background image loads. */
body:has(.oa-container) { background-color: #015b95; }

.oa-welcome-card { max-width: 900px; margin: 20px auto; padding: 36px 40px; text-align: center; background: #fff; border: 1px solid #e6e8f0; }
.oa-header-title-lg { font-size: 1.75rem; font-weight: 600; }
.oa-welcome-description { margin: 0 auto 28px; max-width: 720px; color: #4b5563; font-size: 1rem; text-align: left; }
.oa-welcome-description:empty { display: none; }
.oa-btn-accent { display: inline-block; background: var(--oa-accent, #0d6efd); color: #fff; text-decoration: none; }
.oa-btn-accent:hover, .oa-btn-accent:focus { color: #fff; filter: brightness(.92); }