```css
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy: #06152b;
    --navy-light: #0b2342;
    --blue: #123e70;
    --gold: #d4af37;
    --gold-light: #f0d675;
    --white: #ffffff;
    --muted: #9eb0c6;
    --border: rgba(255, 255, 255, 0.10);
    --card: rgba(7, 25, 48, 0.88);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    color: var(--white);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(28, 103, 180, 0.28),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(212, 175, 55, 0.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #03101f,
            #09294c 55%,
            #041426
        );
}

/* =========================
   LOGIN
   ========================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    padding: 38px;

    background: rgba(6, 21, 43, 0.92);
    border: 1px solid var(--border);
    border-radius: 20px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 38px;
}

.logo {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--gold);
    color: var(--navy);

    font-size: 19px;
    font-weight: 800;
}

.brand h1 {
    font-size: 21px;
    margin-bottom: 4px;
}

.brand p {
    color: var(--muted);
    font-size: 13px;
}

.login-heading {
    margin-bottom: 25px;
}

.login-heading h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.login-heading p {
    color: var(--muted);
    font-size: 14px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #dce5ee;
}

input {
    width: 100%;

    padding: 14px 15px;
    margin-bottom: 18px;

    border: 1px solid #29425f;
    border-radius: 10px;

    outline: none;

    background: #041426;
    color: white;

    font-size: 14px;
}

input:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.10);
}

button {
    border: none;
    border-radius: 10px;

    padding: 13px 18px;

    background: var(--gold);
    color: var(--navy);

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
    opacity: 0.94;
}

button:disabled {
    cursor: wait;
    opacity: 0.65;
}

#loginMessage {
    min-height: 22px;
    margin-top: 15px;

    text-align: center;

    font-size: 13px;
}

.protected {
    margin-top: 30px;

    text-align: center;

    color: #71849b;

    font-size: 11px;
    letter-spacing: 0.4px;
}

/* =========================
   DASHBOARD
   ========================= */

#dashboardPage {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.dashboard-page {
    min-height: 100vh;
}

.dashboard-header {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 32px;

    background: rgba(3, 15, 31, 0.90);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(12px);
}

.dashboard-header h1 {
    font-size: 21px;
}

.dashboard-header p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.dashboard-header button {
    background: transparent;
    color: white;

    border: 1px solid rgba(255, 255, 255, 0.18);
}

.dashboard-header button:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.dashboard-main {
    width: min(1200px, calc(100% - 48px));

    margin: 0 auto;

    padding: 38px 0 60px;
}

.welcome-card {
    padding: 34px;
    margin-bottom: 25px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(13, 53, 92, 0.90),
            rgba(5, 22, 43, 0.94)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);
}

.eyebrow {
    color: var(--gold-light);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.welcome-card h2 {
    font-size: 32px;
    margin-bottom: 8px;
}

.welcome-card p:last-child {
    color: var(--muted);
    font-size: 14px;
}

.dashboard-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.dashboard-card {
    min-height: 205px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    background: var(--card);

    border: 1px solid var(--border);
    border-radius: 17px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(12px);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(212, 175, 55, 0.45);
}

.dashboard-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.dashboard-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    flex: 1;

    margin-bottom: 20px;
}

.dashboard-card button {
    align-self: flex-start;

    padding: 10px 15px;
}

/* =========================
   EMPLOYER SEARCH
   ========================= */

.search-panel {
    margin-bottom: 35px;

    padding: 28px;

    background: var(--card);

    border: 1px solid var(--border);
    border-radius: 17px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(12px);
}

.search-panel h3 {
    font-size: 20px;

    margin-bottom: 22px;
}

.search-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 22px;
}

.search-grid label {
    display: block;
}

.search-grid input {
    margin-bottom: 0;
}

.search-button {
    padding: 12px 20px;
}

.results-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.results-heading h2 {
    font-size: 27px;
}

#resultCount {
    color: var(--gold-light);

    font-size: 13px;

    font-weight: 700;
}

#results {
    display: grid;

    gap: 18px;
}

.worker-card {
    padding: 25px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 17px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(12px);
}

.worker-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.worker-name {
    font-size: 21px;

    font-weight: 800;

    margin-bottom: 5px;
}

.worker-id {
    color: var(--muted);

    font-size: 12px;
}

.verification-badge {
    padding: 7px 11px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;

    white-space: nowrap;
}

.verification-badge.verified {
    background:
        rgba(99, 210, 151, 0.12);

    color: #63d297;

    border:
        1px solid rgba(99, 210, 151, 0.30);
}

.verification-badge.pending {
    background:
        rgba(240, 214, 117, 0.10);

    color: var(--gold-light);

    border:
        1px solid rgba(240, 214, 117, 0.25);
}

.worker-details {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    padding: 18px 0;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}

.worker-details div,
.worker-card-bottom div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.worker-details strong,
.worker-card-bottom strong {
    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}

.worker-details span,
.worker-card-bottom span {
    color: white;

    font-size: 13px;
}

.worker-card-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;
}

.worker-card-bottom button {
    padding: 10px 15px;
}

.empty-state {
    padding: 45px 25px;

    text-align: center;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 17px;
}

.empty-state h3 {
    margin-bottom: 8px;

    font-size: 18px;
}

.empty-state p {
    color: var(--muted);

    font-size: 13px;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 850px) {

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-grid {
        grid-template-columns: 1fr;
    }

    .worker-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .dashboard-header {
        padding: 14px 18px;
    }

    .dashboard-header h1 {
        font-size: 18px;
    }

    .dashboard-main {
        width: min(100% - 30px, 520px);

        padding-top: 25px;
    }

    .welcome-card {
        padding: 25px;
    }

    .welcome-card h2 {
        font-size: 25px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        min-height: 180px;
    }

    .search-panel {
        padding: 20px;
    }

    .results-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .worker-card {
        padding: 20px;
    }

    .worker-card-top {
        flex-direction: column;
    }

    .worker-card-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .worker-card-bottom button {
        width: 100%;
    }
}
```

/* ==========================================================
   SKILLTRUST ZAMBIA - SUPPLIED LOGIN TEMPLATE
   Appended styles: existing dashboard styles remain untouched.
   ========================================================== */

body:has(.login-page) {
    margin: 0;
    min-height: 100vh;
    background: #f4f5fb;
}

.login-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #f4f5fb;
}

.login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: clamp(28px, 5vw, 76px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
    color: #172033;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
}

.login-page::before {
    content: "";
    display: block;
    min-height: 100vh;
    background-image: url("../assets/templates/login%20template.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    order: 1;
}

.login-card .brand {
    margin-bottom: 42px;
}

.login-card .brand h1 {
    color: #172033;
}

.login-card .brand p,
.login-card .login-heading p {
    color: #737b8e;
}

.login-card .logo {
    background: linear-gradient(135deg, #7258df, #a16bea);
    color: #ffffff;
}

.login-card .login-heading {
    margin-bottom: 30px;
}

.login-card .login-heading h2 {
    color: #172033;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.8px;
}

.login-card label {
    color: #30384a;
}

.login-card input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    border: 1px solid #dfe3ec;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    padding: 12px 14px;
}

.login-card input:focus {
    outline: 2px solid #a99af5;
    outline-offset: 1px;
    border-color: #7258df;
}

.login-card button[type="submit"] {
    min-height: 48px;
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
    background: #7258df;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.login-card button[type="submit"]:hover {
    background: #5d43c9;
    transform: translateY(-1px);
}

.login-card button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.login-card #loginMessage {
    margin-top: 14px;
    min-height: 20px;
    overflow-wrap: anywhere;
}

.login-card .protected {
    color: #858b9b;
    font-size: 12px;
}

@media (max-width: 760px) {
    .login-page {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .login-page::before {
        min-height: 190px;
        width: 100%;
        order: 1;
        background-position: center 45%;
    }

    .login-card {
        min-height: auto;
        padding: 32px 24px;
        order: 2;
    }

    .login-card .brand {
        margin-bottom: 28px;
    }
}

/* LOGIN PAGE: USE THE APPROVED BACKGROUND TEMPLATE */
body:has(.login-page) {
    margin: 0;
    min-height: 100vh;
}

body:has(.login-page) .login-page {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background-image: url("../assets/templates/background%20template.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Do not display the old login-template image */
body:has(.login-page) .login-page::before {
    display: none;
    content: none;
}

/* Keep only the real, working login form */
body:has(.login-page) .login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    min-height: auto;
    padding: 36px;
    order: initial;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.16);
    color: #172033;
}

body:has(.login-page) .login-card .protected {
    margin-top: 24px;
    text-align: center;
}

@media (max-width: 480px) {
    body:has(.login-page) .login-page {
        padding: 18px 12px;
    }

    body:has(.login-page) .login-card {
        padding: 26px 20px;
    }
}

/* ======================================================
   SKILLTRUST ZAMBIA - TEAL LOGIN TEMPLATE
   ====================================================== */

body.skilltrust-login {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
}

body.skilltrust-login .login-page {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 20px 70px;
    background-image: url("../assets/templates/background%20template.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Hide the previous split-screen image */
body.skilltrust-login .login-page::before {
    display: none;
    content: none;
}

/* Digital clock */
body.skilltrust-login .zambia-clock {
    position: absolute;
    top: 24px;
    right: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: #ffffff;
    text-align: right;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

body.skilltrust-login .clock-location {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

body.skilltrust-login #zambiaClock {
    font-family: Consolas, monospace;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
}

body.skilltrust-login #zambiaDate {
    font-size: 12px;
}

body.skilltrust-login .clock-zone {
    font-size: 9px;
    letter-spacing: 1.5px;
    opacity: 0.9;
}

/* Centered translucent teal panel */
body.skilltrust-login .login-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 390px;
    min-height: auto;
    padding: 58px 38px 25px;
    margin-top: 24px;
    order: initial;
    display: block;
    color: #ffffff;
    text-align: center;
    background: rgba(8, 48, 53, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

/* Circular user icon */
body.skilltrust-login .login-avatar {
    position: absolute;
    top: -37px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #ffffff;
    background: #0b3e43;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

body.skilltrust-login #loginTitle {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

body.skilltrust-login .login-subtitle {
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    letter-spacing: 1px;
}

/* Input fields */
body.skilltrust-login .login-field {
    margin-bottom: 24px;
    text-align: left;
}

body.skilltrust-login .login-field label {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

body.skilltrust-login .login-field input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 39px;
    padding: 8px 2px;
    color: #ffffff;
    font-size: 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

body.skilltrust-login .login-field input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

body.skilltrust-login .login-field input:focus {
    border-bottom: 2px solid #ffffff;
    outline: none;
}

/* Rounded white login button */
body.skilltrust-login #loginButton {
    box-sizing: border-box;
    width: 100%;
    min-height: 43px;
    margin-top: 5px;
    padding: 11px 20px;
    color: #103c40;
    font-size: 14px;
    font-weight: 700;
    background: #ffffff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

body.skilltrust-login #loginButton:hover {
    background: #e5eeee;
    transform: translateY(-1px);
}

body.skilltrust-login #loginButton:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

body.skilltrust-login #loginMessage {
    min-height: 18px;
    margin-top: 12px;
    color: #ffffff;
    font-size: 12px;
    overflow-wrap: anywhere;
}

body.skilltrust-login .protected {
    margin-top: 17px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}

@media (max-width: 600px) {
    body.skilltrust-login .login-page {
        padding: 125px 18px 50px;
        background-position: center;
    }

    body.skilltrust-login .zambia-clock {
        top: 18px;
        right: 18px;
    }

    body.skilltrust-login .login-card {
        max-width: 360px;
        padding: 55px 26px 22px;
        margin-top: 10px;
    }
}


/* FIX: LOAD BACKGROUND FROM INSIDE THE WEBSITE FOLDER */
body.skilltrust-login .login-page {
    background-image: url("assets/templates/background%20template.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #16474a;
}

/* ==========================================================
   SKILLTRUST LOGIN - FOREST BACKGROUND CORRECTION
   ========================================================== */

body.skilltrust-login .login-page {
    position: relative;
    min-height: 100vh;
    background-image: url("assets/templates/forest-background.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #16474a;
}

/* Remove the old template-image overlay. */
body.skilltrust-login .login-page::before {
    content: none !important;
    display: none !important;
}

/* Keep the login panel above the background. */
body.skilltrust-login .login-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: min(480px, calc(100vw - 36px));
    max-width: 480px;
    background: rgba(8, 48, 52, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Keep the Zambia clock visible above the background. */
body.skilltrust-login .zambia-clock {
    position: absolute;
    z-index: 3;
}

/* Keep the login button and fields readable. */
body.skilltrust-login .login-card label,
body.skilltrust-login .login-card input,
body.skilltrust-login .login-card #loginMessage {
    position: relative;
    z-index: 2;
}


/* HIGH-RESOLUTION LOGIN BACKGROUND */
body.skilltrust-login .login-page {
    background-image: url("assets/templates/forest-background-source.jpg") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #16474a;
}

/* Keep the real login panel readable and cover the original panel. */
body.skilltrust-login .login-card {
    width: min(520px, calc(100vw - 36px));
    max-width: 520px;
    background: #083034 !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* HIDE THE ORIGINAL CREDENTIALS BEHIND THE REAL LOGIN PANEL */
body.skilltrust-login .login-card {
    position: relative;
    z-index: 5;
    background: #083034 !important;

    /* Extend the solid panel to cover the embedded credentials. */
    box-shadow:
        0 0 0 45px #083034,
        0 18px 50px rgba(0, 0, 0, 0.4);
}


/* SKILLTRUST LOGIN: LARGE CRIMSON ZAMBIA CLOCK */
body.skilltrust-login .login-card .zambia-clock {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    box-sizing: border-box;
    margin: 22px 0 26px;
    padding: 22px 16px;

    background: linear-gradient(135deg, #b51f30, #851526) !important;
    color: #ffffff !important;
    border: 1px solid #ed737d;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

    text-align: center;
    z-index: 6;
}

body.skilltrust-login .login-card .clock-location {
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
}

body.skilltrust-login .login-card #zambiaClock {
    display: block;
    color: #ffffff !important;
    font-size: clamp(34px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

body.skilltrust-login .login-card #zambiaDate {
    color: #ffe0e3 !important;
    font-size: 15px;
    font-weight: 500;
}

body.skilltrust-login .login-card .clock-zone {
    color: #ffd0d5 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

/* COMPACT LOGIN PANEL — KEEP ALL CONTENT CLEAR */
body.skilltrust-login .login-card {
    padding: 28px 32px !important;
    gap: 0 !important;
}

/* Reduce space around the heading */
body.skilltrust-login .login-card h1 {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
}

body.skilltrust-login .login-card .login-subtitle {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Keep the red clock clear but less tall */
body.skilltrust-login .login-card .zambia-clock {
    margin: 10px 0 18px !important;
    padding: 14px 12px !important;
    gap: 4px !important;
    border-radius: 12px !important;
}

body.skilltrust-login .login-card .clock-location {
    font-size: 13px !important;
}

body.skilltrust-login .login-card #zambiaClock {
    font-size: clamp(28px, 4vw, 36px) !important;
    letter-spacing: 1px !important;
}

body.skilltrust-login .login-card #zambiaDate {
    font-size: 13px !important;
}

body.skilltrust-login .login-card .clock-zone {
    font-size: 11px !important;
}

/* Reduce space between login fields */
body.skilltrust-login .login-card .login-field {
    margin-bottom: 12px !important;
}

/* Keep the login button comfortably spaced */
body.skilltrust-login .login-card #loginButton {
    margin-top: 8px !important;
}

/* Ensure the complete panel can fit on shorter screens */
@media (max-height: 800px) {
    body.skilltrust-login .login-page {
        min-height: 100vh;
        height: auto;
        padding-top: 18px;
        padding-bottom: 18px;
        box-sizing: border-box;
    }

    body.skilltrust-login .login-card {
        padding: 22px 28px !important;
    }

    body.skilltrust-login .login-avatar {
        width: 54px !important;
        height: 54px !important;
    }
}


/* LIGHT GREEN LOGIN PANEL */
body.skilltrust-login .login-card {
    background: #c9edcf !important;
    border: 1px solid #a2d9ad !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important;
}

/* LOGIN HEADING AND SUBTITLE */
body.skilltrust-login .login-card h1 {
    color: #153b28 !important;
}

body.skilltrust-login .login-card .login-subtitle {
    color: #315c40 !important;
}

/* STUDENT / MEMBER ID — ORANGE */
body.skilltrust-login .login-card .login-field:has(#studentNumber) input,
body.skilltrust-login .login-card #studentNumber {
    background: #ffbd72 !important;
    border: 1px solid #e78b36 !important;
    color: #42240b !important;
}

body.skilltrust-login .login-card .login-field:has(#studentNumber) label {
    color: #66370f !important;
}

/* PASSWORD — PURPLE */
body.skilltrust-login .login-card .login-field:has(#password) input,
body.skilltrust-login .login-card #password {
    background: #d8b9f4 !important;
    border: 1px solid #a779d5 !important;
    color: #35154f !important;
}

body.skilltrust-login .login-card .login-field:has(#password) label {
    color: #4a2467 !important;
}

/* PLACEHOLDER TEXT */
body.skilltrust-login .login-card #studentNumber::placeholder {
    color: #805025 !important;
}

body.skilltrust-login .login-card #password::placeholder {
    color: #68458a !important;
}

/* KEEP THE RED CLOCK AND WHITE CLOCK TEXT */
body.skilltrust-login .login-card .zambia-clock {
    background: linear-gradient(135deg, #b51f30, #851526) !important;
    border-color: #ed737d !important;
    color: #ffffff !important;
}

/* AVATAR COLOURS */
body.skilltrust-login .login-card .login-avatar {
    background: #e9f8e9 !important;
    color: #245a38 !important;
}


/* LIGHT GREEN LOGIN PANEL */
body.skilltrust-login .login-card {
    background: #c9edcf !important;
    border: 1px solid #a2d9ad !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important;
}

/* LOGIN HEADING AND SUBTITLE */
body.skilltrust-login .login-card h1 {
    color: #153b28 !important;
}

body.skilltrust-login .login-card .login-subtitle {
    color: #315c40 !important;
}

/* STUDENT / MEMBER ID — ORANGE */
body.skilltrust-login .login-card .login-field:has(#studentNumber) input,
body.skilltrust-login .login-card #studentNumber {
    background: #ffbd72 !important;
    border: 1px solid #e78b36 !important;
    color: #42240b !important;
}

body.skilltrust-login .login-card .login-field:has(#studentNumber) label {
    color: #66370f !important;
}

/* PASSWORD — PURPLE */
body.skilltrust-login .login-card .login-field:has(#password) input,
body.skilltrust-login .login-card #password {
    background: #d8b9f4 !important;
    border: 1px solid #a779d5 !important;
    color: #35154f !important;
}

body.skilltrust-login .login-card .login-field:has(#password) label {
    color: #4a2467 !important;
}

/* PLACEHOLDER TEXT */
body.skilltrust-login .login-card #studentNumber::placeholder {
    color: #805025 !important;
}

body.skilltrust-login .login-card #password::placeholder {
    color: #68458a !important;
}

/* KEEP THE RED CLOCK AND WHITE CLOCK TEXT */
body.skilltrust-login .login-card .zambia-clock {
    background: linear-gradient(135deg, #b51f30, #851526) !important;
    border-color: #ed737d !important;
    color: #ffffff !important;
}

/* AVATAR COLOURS */
body.skilltrust-login .login-card .login-avatar {
    background: #e9f8e9 !important;
    color: #245a38 !important;
}


/* CLEAR, LARGER SKILLTRUST LOGIN FOOTER */
body.skilltrust-login footer,
body.skilltrust-login .login-footer {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

/* Style the exact project signature if it is a paragraph or span */
body.skilltrust-login footer p,
body.skilltrust-login footer span,
body.skilltrust-login .login-footer p,
body.skilltrust-login .login-footer span {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

/* Give the footer a subtle dark backing for contrast */
body.skilltrust-login footer,
body.skilltrust-login .login-footer {
    display: block;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 12px auto !important;
    padding: 9px 16px;
    background: rgba(5, 35, 31, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
}


/* FIX THE ACTUAL SKILLTRUST SIGNATURE */
body.skilltrust-login .login-card .protected {
    display: block !important;
    width: fit-content !important;
    max-width: 100%;
    box-sizing: border-box;

    margin: 22px auto 0 !important;
    padding: 11px 18px !important;

    color: #ffffff !important;
    background: #123d30 !important;
    border: 1px solid #a9e6bd !important;
    border-radius: 9px !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85) !important;

    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 480px) {
    body.skilltrust-login .login-card .protected {
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
        padding: 10px 12px !important;
    }
}


/* =========================================================
   MODERN ZAMBIA CLOCK
   Changes only the clock on the login page.
   ========================================================= */

body.skilltrust-login .login-card .zambia-clock {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    width: 100% !important;
    box-sizing: border-box !important;
    margin: 14px 0 22px !important;
    padding: 15px 12px !important;

    background: linear-gradient(
        135deg,
        rgba(105, 15, 31, 0.96),
        rgba(163, 24, 43, 0.96)
    ) !important;

    border: 1px solid rgba(255, 135, 145, 0.75) !important;
    border-radius: 15px !important;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 25px rgba(100, 0, 15, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    text-align: center !important;
    color: #ffffff !important;
    text-shadow: none !important;
    overflow: hidden !important;
}

body.skilltrust-login .login-card .clock-location {
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    line-height: 1.5 !important;
}

body.skilltrust-login .login-card #zambiaClock {
    display: block !important;
    color: #ffffff !important;
    font-family: "Consolas", "Courier New", monospace !important;
    font-size: clamp(27px, 4vw, 35px) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 18px rgba(255, 190, 195, 0.24) !important;
}

body.skilltrust-login .login-card #zambiaDate {
    color: #ffe1e4 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

body.skilltrust-login .login-card .clock-zone {
    margin-top: 2px !important;
    color: #ffbdc4 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    opacity: 1 !important;
}

@media (max-width: 480px) {
    body.skilltrust-login .login-card .zambia-clock {
        margin: 12px 0 18px !important;
        padding: 12px 8px !important;
    }
}


/* SKILLTRUST LARGE ANALOG CLOCK START */
body.skilltrust-login .login-card .zambia-clock {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    margin: 18px 0 24px !important;
    padding: 18px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    color: #fff !important;
    text-align: center !important;
    overflow: visible !important;
}

body.skilltrust-login .analog-clock-face {
    width: clamp(205px, 27vw, 250px) !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 9px !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 0 9px rgba(255, 36, 66, .38))
            drop-shadow(0 0 23px rgba(255, 20, 55, .16)) !important;
}

body.skilltrust-login #analogClockSvg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

body.skilltrust-login .analog-clock-rim {
    fill: #10131c;
    stroke: #ff304d;
    stroke-width: 2.5;
}

body.skilltrust-login .analog-clock-inner {
    fill: #10131c;
    stroke: rgba(255, 115, 130, .45);
    stroke-width: 1;
}

body.skilltrust-login .analog-tick {
    stroke: rgba(255, 255, 255, .58);
    stroke-width: 1.4;
    stroke-linecap: round;
}

body.skilltrust-login .analog-tick.major {
    stroke: #ff6578;
    stroke-width: 2.3;
}

body.skilltrust-login .analog-clock-numbers {
    fill: #fff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
}

body.skilltrust-login .analog-hour-hand {
    stroke: #fff;
    stroke-width: 5.5;
    stroke-linecap: round;
}

body.skilltrust-login .analog-minute-hand {
    stroke: #f4f6fb;
    stroke-width: 3.5;
    stroke-linecap: round;
}

body.skilltrust-login .analog-second-hand {
    stroke: #ff304d;
    stroke-width: 1.7;
    stroke-linecap: round;
}

body.skilltrust-login .analog-clock-pin {
    fill: #ff304d;
    stroke: #fff;
    stroke-width: 1.5;
}

body.skilltrust-login .login-card .clock-location {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    line-height: 1.5 !important;
}

body.skilltrust-login .login-card #zambiaClock {
    display: block !important;
    color: #fff !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
}

body.skilltrust-login .login-card #zambiaDate {
    color: #d9dce5 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body.skilltrust-login .login-card .clock-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 3px !important;
    color: #ff697c !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

body.skilltrust-login .clock-zone-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ff304d !important;
    box-shadow: 0 0 9px rgba(255, 48, 77, .8) !important;
}

@media (max-width: 480px) {
    body.skilltrust-login .analog-clock-face {
        width: 205px !important;
    }

    body.skilltrust-login .login-card .zambia-clock {
        margin: 12px 0 18px !important;
        padding: 12px 6px !important;
    }
}
/* SKILLTRUST LARGE ANALOG CLOCK END */



/* SKILLTRUST LOGIN SIDE-BY-SIDE LAYOUT */
body.skilltrust-login .login-page {
    box-sizing: border-box;
    width: 100%;
}

body.skilltrust-login .login-layout {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 76px);
    box-sizing: border-box;
}

body.skilltrust-login .login-layout > .login-card {
    flex: 0 1 460px;
    min-width: 0;
}

body.skilltrust-login .login-clock-panel {
    flex: 0 1 340px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.skilltrust-login .login-clock-panel .zambia-clock {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    overflow: visible !important;
}

body.skilltrust-login .login-clock-panel .clock-location {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-align: center !important;
}

body.skilltrust-login .login-clock-panel #zambiaClock {
    display: block !important;
    color: #fff !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
}

body.skilltrust-login .login-clock-panel #zambiaDate {
    color: #d9dce5 !important;
    font-size: 12px !important;
    text-align: center !important;
}

body.skilltrust-login .login-clock-panel .clock-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #ff697c !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
}

@media (max-width: 760px) {
    body.skilltrust-login .login-layout {
        flex-direction: column;
        gap: 18px;
    }

    body.skilltrust-login .login-layout > .login-card {
        flex: 0 1 auto;
        width: min(100%, 460px);
    }

    body.skilltrust-login .login-clock-panel {
        flex: 0 1 auto;
        width: 100%;
    }

    body.skilltrust-login .login-clock-panel .analog-clock-face {
        width: 190px !important;
    }
}
/* END SKILLTRUST LOGIN SIDE-BY-SIDE LAYOUT */


/* FINAL FIX: KEEP LOGIN PANEL AND CLOCK SIDE BY SIDE */
body.skilltrust-login .login-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 35px 24px !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(24px, 4vw, 60px) !important;
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
}

body.skilltrust-login .login-layout > .login-card {
    flex: 0 1 520px !important;
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.skilltrust-login .login-clock-panel {
    flex: 0 1 300px !important;
    width: 300px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.skilltrust-login .login-clock-panel .zambia-clock {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.skilltrust-login .login-clock-panel .analog-clock-face {
    width: clamp(190px, 22vw, 240px) !important;
    max-width: 100% !important;
}

@media (max-width: 760px) {
    body.skilltrust-login .login-page {
        padding: 24px 16px !important;
    }

    body.skilltrust-login .login-layout {
        flex-direction: column !important;
        gap: 20px !important;
    }

    body.skilltrust-login .login-layout > .login-card {
        width: 100% !important;
        max-width: 460px !important;
        flex: 0 1 auto !important;
    }

    body.skilltrust-login .login-clock-panel {
        width: 100% !important;
        flex: 0 1 auto !important;
    }

    body.skilltrust-login .login-clock-panel .analog-clock-face {
        width: 185px !important;
    }
}
/* END FINAL LOGIN LAYOUT FIX */


/* DEFINITIVE LOGIN CLOCK OVERLAY FIX */
body.skilltrust-login main.login-page {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 35px 24px !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-layout {
    display: flex !important;
    position: relative !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 48px !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-layout > .login-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    flex: 0 1 500px !important;
    width: 500px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.skilltrust-login .login-layout > .login-clock-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    flex: 0 1 300px !important;
    width: 300px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.skilltrust-login .login-clock-panel .zambia-clock {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-clock-panel .analog-clock-face {
    position: relative !important;
    width: 240px !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 16px !important;
}

body.skilltrust-login .login-clock-panel #analogClockSvg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 760px) {
    body.skilltrust-login main.login-page {
        padding: 24px 16px !important;
    }

    body.skilltrust-login .login-layout {
        flex-direction: column !important;
        gap: 24px !important;
    }

    body.skilltrust-login .login-layout > .login-card {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: 460px !important;
    }

    body.skilltrust-login .login-layout > .login-clock-panel {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: 320px !important;
    }

    body.skilltrust-login .login-clock-panel .analog-clock-face {
        width: 190px !important;
    }
}
/* END DEFINITIVE LOGIN CLOCK OVERLAY FIX */


/* SKILLTRUST LOGIN: CREDENTIALS LEFT, CLOCK RIGHT */

body.skilltrust-login main.login-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 32px 24px !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 500px) minmax(0, 300px) !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: clamp(28px, 5vw, 64px) !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-layout > .login-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.skilltrust-login .login-layout > .login-clock-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 300px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.skilltrust-login .login-clock-panel .zambia-clock {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.skilltrust-login .login-clock-panel .analog-clock-face {
    width: clamp(190px, 22vw, 240px) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 16px !important;
}

body.skilltrust-login .login-clock-panel #analogClockSvg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 760px) {
    body.skilltrust-login main.login-page {
        padding: 24px 16px !important;
    }

    body.skilltrust-login .login-layout {
        grid-template-columns: minmax(0, 460px) !important;
        row-gap: 24px !important;
    }

    body.skilltrust-login .login-layout > .login-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
        max-width: 460px !important;
    }

    body.skilltrust-login .login-layout > .login-clock-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;
        max-width: 300px !important;
        justify-self: center !important;
    }
}

/* END CREDENTIALS LEFT, CLOCK RIGHT */

/* SKILLTRUST LOGIN: SHIFT CREDENTIALS LEFT */
main.login-page .login-layout {
    overflow: visible !important;
}

main.login-page .login-layout > .login-card {
    transform: translateX(-40px) !important;
    position: relative !important;
    z-index: 50 !important;
}

@media (max-width: 760px) {
    main.login-page .login-layout > .login-card {
        transform: none !important;
    }
}
/* END SHIFT CREDENTIALS LEFT */


/* SKILLTRUST FIX: REMOVE ARTIFICIAL PANEL OUTLINE */
body.skilltrust-login .login-layout > .login-card {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important;
    transform: translateX(-40px) !important;
    position: relative !important;
    z-index: 50 !important;
}

@media (max-width: 760px) {
    body.skilltrust-login .login-layout > .login-card {
        transform: none !important;
    }
}
/* END PANEL OUTLINE FIX */


/* SOLID BLUE BACKGROUND - PRESERVE CREDENTIALS AND CLOCK */
body.skilltrust-login,
body.skilltrust-login main.login-page {
    background: #0756B8 !important;
    background-image: none !important;
}

body.skilltrust-login .login-page::before,
body.skilltrust-login .login-page::after,
body.skilltrust-login main.login-page::before,
body.skilltrust-login main.login-page::after {
    display: none !important;
    content: none !important;
}

body.skilltrust-login .login-layout {
    background: transparent !important;
    background-image: none !important;
}

body.skilltrust-login .login-layout > .login-card,
body.skilltrust-login .login-layout > .login-clock-panel {
    position: relative !important;
    z-index: 5 !important;
}
/* END SOLID BLUE BACKGROUND */


/* =====================================================
   SKILLTRUST: OVERLAPPING CLOCK + ANIMATED COLOR RING
   ===================================================== */

/* Desktop: clock on the left, credentials on the right */
body.skilltrust-login .login-layout {
    display: grid !important;
    grid-template-columns: 300px 500px !important;
    column-gap: 25px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* Move the clock toward the credentials panel */
body.skilltrust-login .login-layout > .login-clock-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    transform: translateX(65px) !important;
    margin-right: 0 !important;
    overflow: visible !important;
}

/* Keep the credentials panel visible */
body.skilltrust-login .login-layout > .login-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    transform: none !important;
}

/* Prepare the clock for its circular animated ring */
body.skilltrust-login .zambia-clock {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

/* Thick rotating ring with a changing rainbow of colors */
body.skilltrust-login .zambia-clock::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -17px !important;
    border-radius: 50% !important;
    padding: 9px !important;

    background: conic-gradient(
        from 0deg,
        #00e5ff,
        #246bfe,
        #a855f7,
        #ff36b7,
        #ffcc33,
        #42ff9e,
        #00e5ff
    ) !important;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;

    pointer-events: none !important;
    z-index: -1 !important;

    animation:
        skilltrust-ring-rotate 7s linear infinite,
        skilltrust-ring-colors 5s linear infinite !important;
}

/* Continuous rotation */
@keyframes skilltrust-ring-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Continuously shift the ring's colors */
@keyframes skilltrust-ring-colors {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

/* Small screens: stack the panels and remove the overlap */
@media (max-width: 760px) {
    body.skilltrust-login .login-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 35px !important;
        justify-items: center !important;
    }

    body.skilltrust-login .login-layout > .login-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 500px !important;
        transform: none !important;
    }

    body.skilltrust-login .login-layout > .login-clock-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;
        transform: none !important;
        margin: 15px 0 !important;
    }
}

/* END CLOCK AND ANIMATED RING */


/* ==========================================================
   FINAL CLOCK DESIGN: RIGHT SIDE, HALF OVERLAP, WHEEL RING
   ========================================================== */

/* Solid blue background stays unchanged */
body.skilltrust-login,
body.skilltrust-login main.login-page {
    background: #0756B8 !important;
    background-image: none !important;
}

/* Credentials on the left, clock on the right */
body.skilltrust-login .login-layout {
    display: grid !important;
    grid-template-columns: 500px 330px !important;
    column-gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* Credentials panel stays on the left */
body.skilltrust-login .login-layout > .login-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    transform: none !important;
}

/* Clock sits on the right and overlaps by half its width */
body.skilltrust-login .login-layout > .login-clock-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 330px !important;
    position: relative !important;
    z-index: 20 !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Enlarge the clock itself */
body.skilltrust-login .login-clock-panel .zambia-clock {
    width: 330px !important;
    height: 330px !important;
    max-width: none !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border-radius: 50% !important;
}

/* Let the clock face fill its enlarged container */
body.skilltrust-login .login-clock-panel .zambia-clock svg {
    width: 100% !important;
    height: 100% !important;
}

/* Thick colour ring placed close to the clock's edge */
body.skilltrust-login .login-clock-panel .zambia-clock::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -6px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 10px !important;

    background: conic-gradient(
        #00e5ff,
        #246bfe,
        #a855f7,
        #ff36b7,
        #ffcc33,
        #42ff9e,
        #00e5ff
    ) !important;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;

    pointer-events: none !important;
    z-index: -1 !important;
    animation:
        skilltrust-ring-rotate 5s linear infinite,
        skilltrust-ring-colors 6s linear infinite !important;
}

/* Rotate the ring around its own centre like a wheel */
@keyframes skilltrust-ring-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Continuously change the ring colours */
@keyframes skilltrust-ring-colors {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* Small screens: keep both elements visible without overlap */
@media (max-width: 760px) {
    body.skilltrust-login .login-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 35px !important;
        justify-items: center !important;
    }

    body.skilltrust-login .login-layout > .login-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 500px !important;
        transform: none !important;
    }

    body.skilltrust-login .login-layout > .login-clock-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        transform: none !important;
        margin: 10px 0 20px !important;
    }

    body.skilltrust-login .login-clock-panel .zambia-clock {
        width: min(330px, 78vw) !important;
        height: min(330px, 78vw) !important;
    }
}

/* END FINAL WHEEL CLOCK DESIGN */


/* CLOCK FACE FIX: REMOVE RING AND PUT TIME INSIDE THE FACE */

/* Remove all previously added rotating-ring effects */
body.skilltrust-login .zambia-clock::before,
body.skilltrust-login .zambia-clock::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make the clock a positioning container */
body.skilltrust-login .login-clock-panel .zambia-clock {
    position: relative !important;
    width: 330px !important;
    height: 330px !important;
    overflow: visible !important;
}

/* Keep the analog face at the centre */
body.skilltrust-login .zambia-clock .analog-clock-face {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Place the digital time inside the lower part of the clock face */
body.skilltrust-login .zambia-clock #zambiaClock {
    position: absolute !important;
    left: 50% !important;
    top: 69% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    display: block !important;
    width: 78% !important;
    text-align: center !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Place the date inside the face, below the digital time */
body.skilltrust-login .zambia-clock #zambiaDate {
    position: absolute !important;
    left: 50% !important;
    top: 79% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    display: block !important;
    width: 85% !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Hide the extra labels beneath the clock */
body.skilltrust-login .zambia-clock .clock-location,
body.skilltrust-login .zambia-clock .clock-zone {
    display: none !important;
}

/* END CLOCK FACE FIX */


/* FINAL CLOCK ADJUSTMENTS */

/* Make the clock slightly larger and preserve the overlap */
body.skilltrust-login .login-layout {
    grid-template-columns: 500px 360px !important;
}

body.skilltrust-login .login-layout > .login-clock-panel {
    width: 360px !important;
}

body.skilltrust-login .login-clock-panel .zambia-clock {
    width: 360px !important;
    height: 360px !important;
}

/* Remove the rotating circle using stronger selectors */
body.skilltrust-login .login-clock-panel .zambia-clock::before,
body.skilltrust-login .login-clock-panel .zambia-clock::after,
body.skilltrust-login .login-clock-panel::before,
body.skilltrust-login .login-clock-panel::after,
body.skilltrust-login .login-clock-panel .analog-clock-face::before,
body.skilltrust-login .login-clock-panel .analog-clock-face::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Keep the analog clock face properly sized */
body.skilltrust-login .login-clock-panel .analog-clock-face,
body.skilltrust-login .login-clock-panel .zambia-clock svg {
    width: 100% !important;
    height: 100% !important;
}

/* Show the date ABOVE the digital time */
body.skilltrust-login .login-clock-panel .zambia-clock #zambiaDate {
    position: absolute !important;
    left: 50% !important;
    top: 62% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
    width: 90% !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

/* Put the digital time below the date */
body.skilltrust-login .login-clock-panel .zambia-clock #zambiaClock {
    position: absolute !important;
    left: 50% !important;
    top: 71% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
    width: 85% !important;
    text-align: center !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

/* Keep the clock face clean */
body.skilltrust-login .login-clock-panel .zambia-clock .clock-location,
body.skilltrust-login .login-clock-panel .zambia-clock .clock-zone {
    display: none !important;
}

/* END FINAL CLOCK ADJUSTMENTS */



/* =========================================================
   SKILLTRUST ZAMBIA — PREMIUM LOGIN EXPERIENCE
   Isolated to body.skilltrust-login
   ========================================================= */

body.skilltrust-login {
    --login-bg: #071426;
    --login-panel: #0c1d32;
    --login-cyan: #49d9ed;
    --login-blue: #2479e8;
    --login-muted: #91a5bd;
    --login-white: #f4f8ff;

    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    color: var(--login-white) !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    background:
        radial-gradient(ellipse at 12% 12%, rgba(28, 105, 195, .23), transparent 38%),
        radial-gradient(ellipse at 90% 88%, rgba(30, 195, 219, .10), transparent 34%),
        linear-gradient(135deg, #061020 0%, #0a1c33 52%, #071426 100%) !important;
}

body.skilltrust-login .login-page {
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 42px 5vw !important;
}

body.skilltrust-login .login-layout {
    width: min(1240px, 100%) !important;
    min-height: 720px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .82fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(151, 191, 231, .17) !important;
    border-radius: 30px !important;
    background: rgba(8, 23, 42, .82) !important;
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .48),
        0 0 70px rgba(31, 125, 210, .08),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
}

/* LEFT BRAND SHOWCASE */

body.skilltrust-login .login-showcase {
    min-width: 0 !important;
    min-height: 720px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 43px 48px 30px !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse at 50% 57%, rgba(31, 121, 207, .22), transparent 44%),
        radial-gradient(ellipse at 4% 100%, rgba(29, 206, 222, .12), transparent 38%),
        linear-gradient(150deg, rgba(13, 43, 75, .97), rgba(7, 24, 44, .98)) !important;
    border-right: 1px solid rgba(150, 195, 231, .12) !important;
}

body.skilltrust-login .login-showcase::before {
    content: "" !important;
    position: absolute !important;
    width: 430px !important;
    height: 430px !important;
    top: 170px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(89, 202, 231, .07) !important;
    pointer-events: none !important;
}

body.skilltrust-login .login-showcase::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .16 !important;
    background-image: radial-gradient(rgba(157, 214, 255, .5) .7px, transparent .7px) !important;
    background-size: 23px 23px !important;
    mask-image: linear-gradient(to bottom, black, transparent 82%) !important;
}

body.skilltrust-login .showcase-top {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
}

body.skilltrust-login .showcase-brand-mark {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    border: 1px solid rgba(94, 216, 237, .4) !important;
    border-radius: 15px !important;
    color: #6ce4f2 !important;
    background: linear-gradient(145deg, rgba(43, 148, 197, .25), rgba(17, 57, 91, .5)) !important;
    box-shadow: 0 8px 28px rgba(22, 163, 205, .12), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.skilltrust-login .showcase-brand-mark svg {
    width: 31px !important;
    height: 31px !important;
}

body.skilltrust-login .showcase-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.skilltrust-login .showcase-brand-name {
    color: #f4f9ff !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    letter-spacing: -.7px !important;
}

body.skilltrust-login .showcase-brand-country {
    color: #75c9df !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 3.4px !important;
}

body.skilltrust-login .showcase-edition {
    margin-left: auto !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(146, 193, 224, .17) !important;
    border-radius: 30px !important;
    color: #9bb7d0 !important;
    background: rgba(255,255,255,.035) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.25px !important;
    white-space: nowrap !important;
}

body.skilltrust-login .showcase-content {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 30px !important;
}

body.skilltrust-login .showcase-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 23px !important;
    color: #8bd8e9 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
}

body.skilltrust-login .eyebrow-line {
    width: 27px !important;
    height: 2px !important;
    background: #4bd7e9 !important;
    box-shadow: 0 0 12px rgba(75, 215, 233, .65) !important;
}

body.skilltrust-login .showcase-content h1 {
    margin: 0 !important;
    color: #f3f8ff !important;
    font-size: clamp(39px, 4.2vw, 57px) !important;
    line-height: 1.12 !important;
    font-weight: 750 !important;
    letter-spacing: -2.5px !important;
}

body.skilltrust-login .showcase-content h1 span {
    color: #59d8e9 !important;
    text-shadow: 0 0 35px rgba(62, 206, 229, .19) !important;
}

body.skilltrust-login .showcase-description {
    max-width: 430px !important;
    margin: 20px 0 0 !important;
    color: #a7bbd0 !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
}

/* TRUST NETWORK ILLUSTRATION */

body.skilltrust-login .trust-visual {
    position: relative !important;
    width: min(100%, 440px) !important;
    height: 230px !important;
    margin: 14px auto 0 !important;
}

body.skilltrust-login .visual-orbit {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    border: 1px solid rgba(89, 208, 230, .13) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}

body.skilltrust-login .orbit-one {
    width: 165px !important;
    height: 165px !important;
}

body.skilltrust-login .orbit-two {
    width: 245px !important;
    height: 245px !important;
    border-style: dashed !important;
    border-color: rgba(89, 208, 230, .16) !important;
}

body.skilltrust-login .orbit-three {
    width: 335px !important;
    height: 210px !important;
    transform: translate(-50%, -50%) rotate(-24deg) !important;
    border-color: rgba(71, 145, 222, .17) !important;
}

body.skilltrust-login .visual-core {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    left: 50% !important;
    width: 104px !important;
    height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transform: translate(-50%, -50%) !important;
    color: #65e1ed !important;
    filter: drop-shadow(0 0 18px rgba(59, 204, 228, .2)) !important;
}

body.skilltrust-login .visual-core-inner {
    width: 77px !important;
    height: 77px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(96, 223, 238, .58) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(39, 133, 179, .36), rgba(8, 35, 62, .94)) !important;
    box-shadow: 0 0 32px rgba(43, 194, 221, .17), inset 0 0 18px rgba(86, 212, 232, .08) !important;
}

body.skilltrust-login .visual-core-inner svg {
    width: 55px !important;
    height: 55px !important;
}

body.skilltrust-login .visual-core > span {
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
}

body.skilltrust-login .visual-node {
    position: absolute !important;
    z-index: 4 !important;
    width: 43px !important;
    height: 43px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(119, 209, 235, .42) !important;
    border-radius: 14px !important;
    color: #8be5f0 !important;
    background: linear-gradient(145deg, #173d5e, #0c233d) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.25), 0 0 20px rgba(65, 188, 220, .1) !important;
}

body.skilltrust-login .visual-node svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body.skilltrust-login .node-worker {
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.skilltrust-login .node-verify {
    bottom: 20px !important;
    left: 16% !important;
}

body.skilltrust-login .node-opportunity {
    right: 16% !important;
    bottom: 20px !important;
}

body.skilltrust-login .visual-connector {
    position: absolute !important;
    z-index: 1 !important;
    height: 1px !important;
    transform-origin: left center !important;
    background: linear-gradient(90deg, transparent, rgba(81, 203, 230, .48), transparent) !important;
}

body.skilltrust-login .connector-one {
    width: 95px !important;
    top: 79px !important;
    left: 27% !important;
    transform: rotate(-37deg) !important;
}

body.skilltrust-login .connector-two {
    width: 95px !important;
    top: 79px !important;
    right: 27% !important;
    transform: rotate(217deg) !important;
}

body.skilltrust-login .connector-three {
    width: 160px !important;
    left: 50% !important;
    bottom: 48px !important;
    transform: translateX(-50%) !important;
}

body.skilltrust-login .visual-caption {
    position: absolute !important;
    bottom: 0 !important;
    color: #6f9bb9 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

body.skilltrust-login .caption-left {
    left: 2% !important;
}

body.skilltrust-login .caption-right {
    right: 2% !important;
}

body.skilltrust-login .showcase-bottom {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(154, 196, 226, .12) !important;
    color: #7898b4 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
}

body.skilltrust-login .showcase-bottom-dot,
body.skilltrust-login .secure-indicator-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 50% !important;
    background: #55d9bd !important;
    box-shadow: 0 0 11px rgba(85, 217, 189, .6) !important;
}

body.skilltrust-login .showcase-bottom-country {
    margin-left: auto !important;
    color: #5d829f !important;
}

/* RIGHT LOGIN PANEL */

body.skilltrust-login .login-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 720px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 48px clamp(32px, 4vw, 64px) 35px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(39, 113, 176, .12), transparent 38%),
        linear-gradient(155deg, rgba(12, 29, 50, .99), rgba(8, 21, 38, .99)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.skilltrust-login .login-card-top {
    position: absolute !important;
    top: 35px !important;
    left: clamp(32px, 4vw, 64px) !important;
    right: clamp(32px, 4vw, 64px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.skilltrust-login .login-mobile-brand {
    display: none !important;
    align-items: center !important;
    gap: 9px !important;
    color: #edf6ff !important;
    font-size: 15px !important;
    font-weight: 750 !important;
}

body.skilltrust-login .login-mobile-brand strong {
    color: #64d9e9 !important;
    font-weight: 650 !important;
}

body.skilltrust-login .mobile-brand-icon {
    width: 33px !important;
    height: 33px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(89, 212, 231, .35) !important;
    border-radius: 10px !important;
    color: #69deec !important;
}

body.skilltrust-login .mobile-brand-icon svg {
    width: 23px !important;
    height: 23px !important;
}

body.skilltrust-login .secure-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #8da9c3 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
}

body.skilltrust-login .secure-indicator-dot {
    width: 6px !important;
    height: 6px !important;
    flex-basis: 6px !important;
}

body.skilltrust-login .login-heading {
    margin: 42px 0 36px !important;
}

body.skilltrust-login .login-overline {
    display: block !important;
    margin-bottom: 15px !important;
    color: #5bd5e7 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 2.8px !important;
}

body.skilltrust-login .login-heading h2 {
    margin: 0 !important;
    color: #f2f7ff !important;
    font-size: clamp(32px, 3vw, 40px) !important;
    font-weight: 750 !important;
    line-height: 1.17 !important;
    letter-spacing: -1.4px !important;
}

body.skilltrust-login .login-heading p {
    margin: 14px 0 0 !important;
    color: #91a7bd !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* INPUTS */

body.skilltrust-login .login-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

body.skilltrust-login .login-field {
    width: 100% !important;
    margin: 0 0 23px !important;
}

body.skilltrust-login .login-field label {
    display: block !important;
    margin: 0 0 10px !important;
    color: #dce9f7 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
}

body.skilltrust-login .password-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.skilltrust-login .login-input-wrap {
    position: relative !important;
    width: 100% !important;
    height: 57px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(140, 176, 209, .22) !important;
    border-radius: 12px !important;
    background: rgba(4, 15, 29, .62) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body.skilltrust-login .login-input-wrap:focus-within {
    border-color: rgba(77, 208, 231, .78) !important;
    background: rgba(7, 25, 43, .94) !important;
    box-shadow: 0 0 0 4px rgba(65, 190, 220, .09), 0 0 22px rgba(50, 172, 214, .08) !important;
}

body.skilltrust-login .input-icon {
    width: 48px !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    color: #6e9bb9 !important;
}

body.skilltrust-login .input-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body.skilltrust-login .login-input-wrap input {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 14px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    color: #f0f7ff !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .15px !important;
}

body.skilltrust-login .login-input-wrap input::placeholder {
    color: #647c94 !important;
    opacity: 1 !important;
}

body.skilltrust-login .login-input-wrap input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

body.skilltrust-login .password-toggle {
    height: 34px !important;
    min-width: 54px !important;
    margin: 0 9px 0 4px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(103, 164, 199, .22) !important;
    border-radius: 8px !important;
    color: #72d9e8 !important;
    background: rgba(46, 125, 161, .12) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
    cursor: pointer !important;
    transition: background .2s ease, border-color .2s ease !important;
}

body.skilltrust-login .password-toggle:hover {
    transform: none !important;
    border-color: rgba(91, 216, 235, .55) !important;
    background: rgba(46, 150, 180, .2) !important;
    opacity: 1 !important;
}

/* SIGN-IN BUTTON */

body.skilltrust-login #loginButton.login-submit {
    width: 100% !important;
    min-height: 57px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    margin: 8px 0 0 !important;
    padding: 0 22px !important;
    border: 1px solid rgba(116, 225, 239, .42) !important;
    border-radius: 12px !important;
    color: #041827 !important;
    background: linear-gradient(105deg, #58d9e9 0%, #4bc4e7 52%, #55aef1 100%) !important;
    box-shadow: 0 12px 28px rgba(35, 167, 209, .19), inset 0 1px 0 rgba(255,255,255,.45) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: .8px !important;
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

body.skilltrust-login #loginButton.login-submit:hover {
    transform: translateY(-2px) !important;
    opacity: 1 !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 16px 34px rgba(35, 167, 209, .27), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

body.skilltrust-login #loginButton.login-submit:active {
    transform: translateY(0) !important;
}

body.skilltrust-login #loginButton.login-submit:disabled {
    cursor: wait !important;
    opacity: .7 !important;
    transform: none !important;
}

body.skilltrust-login #loginButton.login-submit svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    transition: transform .2s ease !important;
}

body.skilltrust-login #loginButton.login-submit:hover svg {
    transform: translateX(4px) !important;
}

body.skilltrust-login #loginMessage {
    min-height: 24px !important;
    margin: 15px 0 0 !important;
    color: #a9c1d8 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

body.skilltrust-login .login-security-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin-top: 22px !important;
    color: #7895ae !important;
    font-size: 10px !important;
    letter-spacing: .2px !important;
}

body.skilltrust-login .login-security-note svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    stroke: #5acdbb !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body.skilltrust-login .login-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;
    margin-top: 38px !important;
}

body.skilltrust-login .footer-rule {
    width: 28px !important;
    height: 1px !important;
    background: rgba(135, 174, 207, .2) !important;
}

body.skilltrust-login .protected {
    margin: 0 !important;
    color: #71879e !important;
    text-align: center !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    letter-spacing: 1px !important;
}

/* ACCESSIBILITY */

body.skilltrust-login button:focus-visible,
body.skilltrust-login input:focus-visible {
    outline: 2px solid #62dbea !important;
    outline-offset: 3px !important;
}

/* TABLET */

@media (max-width: 1000px) {
    body.skilltrust-login .login-page {
        padding: 25px !important;
    }

    body.skilltrust-login .login-layout {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr) !important;
        min-height: 680px !important;
    }

    body.skilltrust-login .login-showcase {
        min-height: 680px !important;
        padding: 35px 30px 25px !important;
    }

    body.skilltrust-login .login-card {
        min-height: 680px !important;
        padding-right: 32px !important;
        padding-left: 32px !important;
    }

    body.skilltrust-login .login-card-top {
        left: 32px !important;
        right: 32px !important;
    }

    body.skilltrust-login .showcase-edition {
        display: none !important;
    }

    body.skilltrust-login .showcase-content h1 {
        font-size: 43px !important;
    }

    body.skilltrust-login .trust-visual {
        transform: scale(.9) !important;
        transform-origin: center center !important;
    }
}

/* MOBILE */

@media (max-width: 720px) {
    body.skilltrust-login {
        min-height: 100svh !important;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(31, 119, 189, .2), transparent 45%),
            linear-gradient(145deg, #071426, #0b2038 65%, #071426) !important;
    }

    body.skilltrust-login .login-page {
        min-height: 100svh !important;
        align-items: flex-start !important;
        padding: 16px !important;
    }

    body.skilltrust-login .login-layout {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 22px !important;
    }

    body.skilltrust-login .login-showcase {
        display: none !important;
    }

    body.skilltrust-login .login-card {
        min-height: 0 !important;
        width: 100% !important;
        padding: 28px 25px 25px !important;
        border-radius: 22px !important;
        background:
            radial-gradient(ellipse at 100% 0%, rgba(39, 113, 176, .14), transparent 42%),
            linear-gradient(155deg, #0c1d32, #09182b) !important;
    }

    body.skilltrust-login .login-card-top {
        position: static !important;
        margin-bottom: 39px !important;
    }

    body.skilltrust-login .login-mobile-brand {
        display: flex !important;
    }

    body.skilltrust-login .secure-indicator {
        font-size: 8px !important;
        letter-spacing: 1px !important;
    }

    body.skilltrust-login .login-heading {
        margin: 0 0 30px !important;
    }

    body.skilltrust-login .login-heading h2 {
        font-size: 35px !important;
    }

    body.skilltrust-login .login-field {
        margin-bottom: 20px !important;
    }

    body.skilltrust-login .login-card-footer {
        margin-top: 32px !important;
    }
}

@media (max-width: 380px) {
    body.skilltrust-login .login-page {
        padding: 10px !important;
    }

    body.skilltrust-login .login-card {
        padding: 23px 18px 22px !important;
    }

    body.skilltrust-login .login-heading h2 {
        font-size: 31px !important;
    }

    body.skilltrust-login .login-mobile-brand {
        font-size: 13px !important;
    }

    body.skilltrust-login .secure-indicator {
        font-size: 7px !important;
    }
}

/* REDUCED MOTION PREFERENCE */

@media (prefers-reduced-motion: reduce) {
    body.skilltrust-login *,
    body.skilltrust-login *::before,
    body.skilltrust-login *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body.skilltrust-login .brand-tagline {
    margin: 13px 0 0 !important;
    color: #59d8e9 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.45px !important;
    line-height: 1.6 !important;
}
/* END PREMIUM LOGIN EXPERIENCE */


/* GRAPHITE DIAGONAL LOGIN UPDATE */

/* Main page background: override the older blue main.login-page rule */
body.skilltrust-login {
    background-color: #090e14 !important;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(49, 91, 112, .13), transparent 42%),
        radial-gradient(ellipse at 85% 80%, rgba(36, 157, 171, .07), transparent 38%),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 44px,
            rgba(172, 197, 211, .035) 45px,
            transparent 46px
        ),
        linear-gradient(135deg, #080d13 0%, #111923 52%, #090e14 100%) !important;
}

/* Target the actual main element, not just the body */
body.skilltrust-login main.login-page {
    box-sizing: border-box !important;
    background-color: #090e14 !important;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(49, 91, 112, .13), transparent 42%),
        radial-gradient(ellipse at 85% 80%, rgba(36, 157, 171, .07), transparent 38%),
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 44px,
            rgba(172, 197, 211, .035) 45px,
            transparent 46px
        ),
        linear-gradient(135deg, #080d13 0%, #111923 52%, #090e14 100%) !important;
}

/* Desktop and tablet: use available screen height without clipping content */
@media (min-width: 721px) {

    body.skilltrust-login main.login-page {
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        height: auto !important;
        padding: 24px clamp(18px, 3vw, 48px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.skilltrust-login main.login-page .login-layout {
        box-sizing: border-box !important;
        width: min(1240px, 100%) !important;
        height: auto !important;
        min-height: calc(100svh - 48px) !important;
        max-height: none !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        overflow: visible !important;
        background: #111923 !important;
        border-color: rgba(180, 210, 225, .10) !important;
        box-shadow:
            0 30px 90px rgba(0, 0, 0, .48),
            0 0 0 1px rgba(180, 210, 225, .06) !important;
    }

    body.skilltrust-login main.login-page .login-layout .login-showcase {
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        background-color: #111923 !important;
        background-image:
            radial-gradient(ellipse at 50% 55%, rgba(52, 104, 119, .13), transparent 48%),
            repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 34px,
                rgba(180, 205, 218, .045) 35px,
                transparent 36px
            ),
            linear-gradient(145deg, #151f29 0%, #101821 58%, #0b131b 100%) !important;
        border-right-color: rgba(170, 195, 210, .12) !important;
    }

    body.skilltrust-login main.login-page .login-layout .login-card {
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        background-color: #111923 !important;
        background-image:
            radial-gradient(ellipse at 100% 0%, rgba(56, 112, 133, .09), transparent 42%),
            repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 48px,
                rgba(180, 205, 218, .025) 49px,
                transparent 50px
            ),
            linear-gradient(155deg, #18232e 0%, #111a24 100%) !important;
    }
}

/* Mobile: preserve the existing single-panel layout */
@media (max-width: 720px) {

    body.skilltrust-login {
        background-color: #090e14 !important;
        background-image:
            repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 38px,
                rgba(172, 197, 211, .035) 39px,
                transparent 40px
            ),
            linear-gradient(145deg, #0b1118, #111b25 65%, #090e14) !important;
    }

    body.skilltrust-login main.login-page {
        background-color: #090e14 !important;
        background-image:
            repeating-linear-gradient(
                135deg,
                transparent 0,
                transparent 38px,
                rgba(172, 197, 211, .035) 39px,
                transparent 40px
            ),
            linear-gradient(145deg, #0b1118, #111b25 65%, #090e14) !important;
    }

    body.skilltrust-login main.login-page .login-layout {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.skilltrust-login main.login-page .login-layout .login-card {
        min-height: 0 !important;
        height: auto !important;
        background-color: #111923 !important;
        background-image:
            radial-gradient(ellipse at 100% 0%, rgba(56, 112, 133, .09), transparent 42%),
            linear-gradient(155deg, #18232e 0%, #111a24 100%) !important;
    }
}

/* END GRAPHITE DIAGONAL LOGIN UPDATE */

/* =========================================================
   LOGIN FIT AND PROFESSIONAL ICON REFINEMENT
   Desktop screens between 650px and 760px high
   ========================================================= */

@media (min-width: 721px) and (min-height: 650px) and (max-height: 760px) {

    body.skilltrust-login main.login-page {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100svh !important;
        min-height: 100svh !important;
        padding: 14px clamp(18px, 3vw, 42px) !important;
        align-items: center !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.skilltrust-login main.login-page .login-layout {
        box-sizing: border-box !important;
        width: min(1240px, 100%) !important;
        height: calc(100svh - 28px) !important;
        min-height: 0 !important;
        max-height: calc(100svh - 28px) !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, .82fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    /* LEFT PANEL */

    body.skilltrust-login .login-showcase {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 25px 34px 18px !important;
        overflow: visible !important;
    }

    body.skilltrust-login .showcase-brand-mark {
        box-shadow: none !important;
        border-radius: 11px !important;
    }

    body.skilltrust-login .showcase-brand-mark svg {
        width: 27px !important;
        height: 27px !important;
    }

    body.skilltrust-login .showcase-content {
        margin-top: 10px !important;
    }

    body.skilltrust-login .showcase-eyebrow {
        margin-bottom: 12px !important;
        gap: 9px !important;
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    body.skilltrust-login .eyebrow-line {
        box-shadow: none !important;
    }

    body.skilltrust-login .showcase-content h1 {
        font-size: clamp(32px, 3.25vw, 43px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.8px !important;
    }

    body.skilltrust-login .showcase-content h1 span {
        text-shadow: none !important;
    }

    body.skilltrust-login .showcase-description {
        margin-top: 11px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    /* SIMPLER TRUST ILLUSTRATION */

    body.skilltrust-login .trust-visual {
        height: 150px !important;
        margin: 5px auto 0 !important;
        transform: none !important;
    }

    body.skilltrust-login .orbit-one {
        width: 125px !important;
        height: 125px !important;
    }

    body.skilltrust-login .orbit-two {
        width: 185px !important;
        height: 135px !important;
        border-style: solid !important;
        border-color: rgba(89, 208, 230, .12) !important;
    }

    body.skilltrust-login .orbit-three {
        display: none !important;
    }

    body.skilltrust-login .visual-core {
        width: 90px !important;
        height: 105px !important;
        filter: none !important;
    }

    body.skilltrust-login .visual-core-inner {
        width: 66px !important;
        height: 66px !important;
        border-radius: 17px !important;
        background: rgba(17, 53, 76, .9) !important;
        box-shadow: none !important;
    }

    body.skilltrust-login .visual-core-inner svg {
        width: 45px !important;
        height: 45px !important;
    }

    body.skilltrust-login .visual-node {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #142b40 !important;
        box-shadow: none !important;
    }

    body.skilltrust-login .visual-node svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 1.9 !important;
    }

    body.skilltrust-login .visual-caption {
        font-size: 7px !important;
        letter-spacing: 1.5px !important;
    }

    body.skilltrust-login .showcase-bottom {
        padding-top: 10px !important;
    }

    /* RIGHT PANEL */

    body.skilltrust-login .login-card {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 22px clamp(28px, 3vw, 42px) 18px !important;
        overflow: visible !important;
    }

    body.skilltrust-login .login-card-top {
        top: 18px !important;
        left: clamp(28px, 3vw, 42px) !important;
        right: clamp(28px, 3vw, 42px) !important;
    }

    body.skilltrust-login .login-heading {
        margin: 30px 0 20px !important;
    }

    body.skilltrust-login .login-overline {
        margin-bottom: 8px !important;
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    body.skilltrust-login .login-heading h2 {
        font-size: clamp(29px, 2.7vw, 35px) !important;
        line-height: 1.12 !important;
    }

    body.skilltrust-login .login-heading p {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    body.skilltrust-login .login-field {
        margin-bottom: 14px !important;
    }

    body.skilltrust-login .login-field label {
        margin-bottom: 7px !important;
        font-size: 11px !important;
    }

    body.skilltrust-login .login-input-wrap {
        height: 48px !important;
        border-radius: 10px !important;
    }

    body.skilltrust-login .input-icon {
        width: 43px !important;
        flex-basis: 43px !important;
    }

    body.skilltrust-login .input-icon svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 1.9 !important;
    }

    body.skilltrust-login .password-toggle {
        height: 31px !important;
    }

    body.skilltrust-login #loginButton.login-submit {
        min-height: 49px !important;
        margin-top: 5px !important;
        box-shadow: 0 5px 15px rgba(35, 167, 209, .13) !important;
    }

    body.skilltrust-login #loginMessage {
        min-height: 18px !important;
        margin-top: 8px !important;
        font-size: 11px !important;
    }

    body.skilltrust-login .login-security-note {
        margin-top: 12px !important;
        font-size: 9px !important;
    }

    body.skilltrust-login .login-card-footer {
        margin-top: 18px !important;
    }
}
/* SKILLTRUST LOGIN PLATFORM HEADLINE TICKER */
body.skilltrust-login .login-news-ticker {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 !important;
    padding: 11px 13px !important;
    overflow: hidden !important;
    border: 1px solid rgba(78, 205, 204, .22) !important;
    border-left: 2px solid #39c9bd !important;
    border-radius: 9px !important;
    background: linear-gradient(90deg, rgba(17, 75, 83, .35), rgba(10, 33, 52, .5)) !important;
}

body.skilltrust-login .ticker-label {
    flex: 0 0 auto !important;
    color: #73e0d4 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap !important;
}

body.skilltrust-login .ticker-window {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent) !important;
}

body.skilltrust-login .ticker-track {
    display: flex !important;
    width: max-content !important;
    animation: skilltrust-headline-scroll 42s linear infinite !important;
    will-change: transform !important;
}

body.skilltrust-login .ticker-sequence {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 17px !important;
    padding-right: 17px !important;
    white-space: nowrap !important;
}

body.skilltrust-login .ticker-sequence span {
    color: #c1d5e5 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
}

body.skilltrust-login .ticker-sequence i {
    color: #48cfc2 !important;
    font-size: 8px !important;
    font-style: normal !important;
}

body.skilltrust-login .login-news-ticker:hover .ticker-track {
    animation-play-state: paused !important;
}

@keyframes skilltrust-headline-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    body.skilltrust-login .ticker-track {
        animation: none !important;
        transform: none !important;
    }

    body.skilltrust-login .ticker-window {
        overflow-x: auto !important;
        mask-image: none !important;
    }
}