/* VMOS login page – replaces Login_BG.jpg (full-viewport cosmic banner) */

html, body.vmos-login-page {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body.vmos-login-page {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    background-color: #050a14;
    animation: vmosLoginFadeIn 2s ease-in-out;
}

@keyframes vmosLoginFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*.vmos-login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #050a14;
    background-image:
        radial-gradient(2px 2px at 5% 12%, rgba(180, 230, 255, 0.95) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 45%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
        radial-gradient(2px 2px at 18% 78%, rgba(140, 220, 255, 0.9) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 28%, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
        radial-gradient(2px 2px at 33% 62%, rgba(170, 240, 255, 0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42% 18%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 88%, rgba(160, 220, 255, 0.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 38%, rgba(255, 255, 255, 0.65) 0%, transparent 100%),
        radial-gradient(2px 2px at 66% 72%, rgba(180, 230, 255, 0.75) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 74% 22%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 55%, rgba(140, 220, 255, 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 82%, rgba(255, 255, 255, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse 220px 280px at 22% 48%, rgba(255, 252, 240, 0.35) 0%, rgba(255, 210, 240, 0.18) 32%, transparent 70%),
        radial-gradient(ellipse 380px 420px at 72% 38%, rgba(255, 252, 240, 0.55) 0%, rgba(255, 210, 240, 0.28) 28%, transparent 68%),
        radial-gradient(ellipse 600px 400px at 85% 65%, rgba(212, 74, 114, 0.22) 0%, transparent 65%),
        linear-gradient(
            118deg,
            #042318 0%,
            #0a4a2f 8%,
            #0d5c42 16%,
            #083a62 30%,
            #061e66 44%,
            #1a0f5c 56%,
            #3d1258 68%,
            #6b1a52 76%,
            #fff8ef 84%,
            #d44a72 90%,
            #2a0818 97%,
            #050208 100%
        );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}*/
.vmos-login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #042318;
    background-image: linear-gradient( 118deg, #042318 0%, #0a4a2f 10%, #0b4d58 24%, #083a62 38%, #0a2266 50%, #1f105e 63%, #44145e 75%, #6e1b54 86%, #501038 94%, #1e0616 100% );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    /*.vmos-login-backdrop::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.08) 47%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.07) 53%, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, rgba(0, 0, 0, 0.25) 100%);
        pointer-events: none;
    }*/
    .vmos-login-backdrop::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
        pointer-events: none;
    }

    /*.vmos-login-backdrop::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 70% at 18% 50%, rgba(0, 0, 0, 0.15) 0%, transparent 72%);
        pointer-events: none;
        z-index: 2;
    }*/
    .vmos-login-backdrop::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 55% 70% at 18% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 72%);
        pointer-events: none;
        z-index: 2;
    }

.vmos-login-left {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    max-width: 760px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.vmos-login-hub {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Circular ring: icons orbit outside, branding in center */
/*.vmos-login-ring {
    --ring-size: 580px;
    --orbit-radius: 232px;
    --chip-size: 88px;
    --chip-label-space: 20px;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    margin: 0 auto;
}*/
/* Circular ring: icons orbit inside with uniform clearance, branding in center */
.vmos-login-ring {
    --ring-size: 580px;
    --orbit-radius: 216px;
    --chip-size: 82px;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    margin: 0 auto;
}

    .vmos-login-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid rgba(255, 220, 140, 0.6);
        border-radius: 50%;
        background: rgba(0, 20, 40, 0.4);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 36px rgba(0, 0, 0, 0.45), 0 0 56px rgba(255, 200, 100, 0.14);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

.vmos-login-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    max-width: 62%;
    pointer-events: none;
}

.vmos-login-logo {
    width: 150px;
    height: 130px;
    flex-shrink: 0;
    object-fit: contain !important;
    /*image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;*/
    /*ilter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));*/
}

.vmos-login-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.08;
}

.vmos-login-vibrant {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.85);
}

.vmos-login-sub {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.8);
    margin-top: 4px;
}

/* Media icons on the ring (7 evenly spaced) */
/*.vmos-media-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: var(--chip-size);
    height: auto;
    margin:
        calc((var(--chip-size) + var(--chip-label-space) + 5px) / -2)
        0
        0
        calc(var(--chip-size) / -2);
    transform:
        rotate(calc(var(--i) * 51.4286deg - 90deg))
        translateY(calc(-1 * var(--orbit-radius)))
        rotate(calc(90deg - var(--i) * 51.4286deg));
}*/
/* Media icons on the ring (7 evenly spaced in a true symmetrical circle) */
.vmos-media-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--chip-size);
    height: var(--chip-size);
    margin: calc(var(--chip-size) / -2) 0 0 calc(var(--chip-size) / -2);
    transform: rotate(calc(var(--i) * 51.4286deg - 90deg)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(90deg - var(--i) * 51.4286deg));
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0.2s ease;
}

    .vmos-media-chip:hover {
        z-index: 10;
        transform: rotate(calc(var(--i) * 51.4286deg - 90deg)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(90deg - var(--i) * 51.4286deg)) scale(1.15);
    }

.vmos-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-size);
    height: var(--chip-size);
    flex-shrink: 0;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

/*.vmos-chip-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}*/

.vmos-media-chip:hover .vmos-chip-icon {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.95);
}

/*.vmos-chip-label {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.35px;
    white-space: nowrap;
    line-height: 1.1;
}*/
.vmos-chip-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.35px;
    white-space: nowrap;
    line-height: 1.1;
    pointer-events: none;
    transition: text-shadow 0.3s ease;
}

.vmos-media-chip:hover .vmos-chip-label {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.7);
}

.vmos-chip-print .vmos-chip-icon { background: linear-gradient(145deg, #1976d2, #0d47a1); }
.vmos-chip-online .vmos-chip-icon { background: linear-gradient(145deg, #00838f, #004d40); }
.vmos-chip-tv .vmos-chip-icon { background: linear-gradient(145deg, #7b1fa2, #4a148c); }
.vmos-chip-radio .vmos-chip-icon { background: linear-gradient(145deg, #ef6c00, #e65100); }
.vmos-chip-outdoor .vmos-chip-icon { background: linear-gradient(145deg, #388e3c, #1b5e20); }
.vmos-chip-cinema .vmos-chip-icon { background: linear-gradient(145deg, #c62828, #b71c1c); }
.vmos-chip-event .vmos-chip-icon { background: linear-gradient(145deg, #c2185b, #880e4f); }

/*body.vmos-login-page form {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
}*/
body.vmos-login-page form {
    position: relative;
    z-index: 3;
    margin-left: auto;
    margin-right: 0;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

body.vmos-login-page #UpdatePanel1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Floating enterprise footer - aligned with right login column to clear the media ring */
.vmos-login-footer {
    position: fixed;
    bottom: 16px;
    right: 22.5%;
    transform: translateX(50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 18px;
    background: rgba(10, 20, 40, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    user-select: none;
    pointer-events: none;
}

    .vmos-login-footer .vmos-footer-divider {
        color: rgba(255, 255, 255, 0.35);
        font-size: 10px;
    }

    .vmos-login-footer .vmos-footer-badge {
        display: inline-flex;
        align-items: center;
        padding: 1.5px 8px;
        border-radius: 10px;
        background: rgba(0, 114, 255, 0.22);
        border: 1px solid rgba(0, 114, 255, 0.45);
        color: #93c5fd;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
    }



@media (max-width: 1024px) {
    .vmos-login-left {
        width: 55%;
        max-width: 520px;
        padding: 16px;
    }

    /*.vmos-login-ring {
        --ring-size: 500px;
        --orbit-radius: 198px;
        --chip-size: 78px;
        --chip-label-space: 18px;
    }*/
    .vmos-login-ring {
        --ring-size: 500px;
        --orbit-radius: 184px;
        --chip-size: 72px;
    }

    .vmos-chip-label { font-size: 10px; }

    .vmos-login-vibrant { font-size: 32px; }
    .vmos-login-sub { font-size: 16px; }
    .vmos-login-logo { width: 56px; height: 62px; }
}

@media (max-width: 768px) {
    .vmos-login-left {
        position: relative;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 20px 12px 8px;
    }

    .vmos-login-ring {
        --ring-size: 440px;
        --orbit-radius: 174px;
        --chip-size: 70px;
        --chip-label-space: 16px;
    }

    .vmos-chip-label { font-size: 9px; }

    body.vmos-login-page {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
    }

    body.vmos-login-page form,
    body.vmos-login-page #UpdatePanel1 {
        justify-content: center;
    }

    .vmos-login-vibrant { font-size: 26px; }
    .vmos-login-sub { font-size: 14px; }
    .vmos-login-logo { width: 48px; height: 54px; }

    .vmos-login-footer {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 24px auto 16px;
        font-size: 11px;
        padding: 6px 14px;
        gap: 8px;
        white-space: normal;
        text-align: center;
    }
}

/*@media (max-width: 380px) {
    .vmos-login-ring {
        --ring-size: 400px;
        --orbit-radius: 158px;
        --chip-size: 64px;
        --chip-label-space: 15px;
    }*/
@media (max-width: 380px) {
    .vmos-login-ring {
        --ring-size: 380px;
        --orbit-radius: 138px;
        --chip-size: 56px;
    }

    .vmos-chip-label {
        font-size: 8px;
    }

    .vmos-login-vibrant {
        font-size: 22px;
    }

    .vmos-login-sub {
        font-size: 12px;
    }

    .vmos-login-footer {
        font-size: 10px;
        padding: 5px 10px;
        gap: 6px;
    }

        .vmos-login-footer .vmos-footer-badge {
            font-size: 9.5px;
            padding: 1px 6px;
        }
}