.blur {
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00000047;
    /* backdrop-filter: blur(1px); */
    animation-name: fadeIn;
    animation-duration: 0.4s;
    z-index: 1;

    .popup {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 30px;
        width: 300px;
        max-width: 64vw;
        padding: 30px;
        color: #282828;
        box-shadow: 2px 2px 10px #0000006b;
    }

    .popup .close {
        cursor: pointer;
        stroke: #000000;
        display: flex;
        justify-content: flex-end;
        height: 0px;
        translate: 10px -10px;
    }

    .popup .close {
        stroke-width: 0px;

    }

    .popup H2 {
        /* text-align: center; */
        color: #000000;
        font-size: 1.7em;
    }

    .popup p {
        /* text-align: center; */
        color: #282828;
        margin: 0;
    }

    .popup b {
        color: #000000;
        margin: 10px;
    }

    .popup form {
        width: 300px;
        display: flex;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
        padding: 10px 0;
        max-width: 100%;
    }

    .popup .ComDiv {
        display: flex;
    }

    .popup .com {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
        width: 50%;
        align-items: center;
    }

    .com img {
        width: 30px;
        border-radius: 15px;
        border: solid;
        border-color: #009688;

    }




    /* loginForm */
    .formDiv {
        width: 100%;
        max-width: 520px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        transition: transform .18s ease, box-shadow .18s ease;
        /* animation: fadeUp 400ms ease-in-out forwards; */
    }

    .loginForm:focus-within,
    .loginForm:hover {
        transform: translateY(-2px);
    }

    /* Title block */
    .tit h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 6px;
    }

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

    /* Inputs */
    .inputDiv {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 6px;
        width: 100%;
    }

    .inputDiv label {
        font-size: 13px;
        color: var(--muted);
    }

    .inputDiv input {
        height: 44px;
        padding: 0px 15px;
        border: none;
        border-radius: 10px;
        background: transparent;
        font-size: 14px;
        outline: none;
        transition: box-shadow .12s ease, border-color .12s ease;
        margin: 5px;
        width: -webkit-fill-available;
    }

    .inputDiv input::placeholder {
        color: #bfc6d3
    }

    .inputDiv input:focus {
        border-color: var(--accent);
        box-shadow: 0 4px 18px rgba(43, 124, 255, 0.12);
    }

    /* Hidden native form actions area is replaced by button below */
    #SignIn {
        display: block;
    }

    /* Footer and links */
    .loginFooter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
    }

    .loginFooter a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 600;
        font-size: 12px;
    }

    .loginFooter a:hover {
        text-decoration: underline
    }

    .actionDiv {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }



    /* Google Sign-in wrapper */
    .googleSignIn {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .g_id_signin {
        margin-top: 6px;
        display: inline-block;
        vertical-align: middle
    }

    /* Response panel (hidden by default) */
    .loginResponse {
        /* width:340px; */
        /* max-width:38%; */
        /* min-height: 160px; */
        background: linear-gradient(180deg, #fff, #fbfdff);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        transition: opacity .18s ease, transform .18s ease;
    }

    /* Hide by default; show via JS by removing this class or changing style */
    .loginResponse[hidden],
    #loginResponse[hidden] {
        display: none
    }

    /* Icons container */
    .ico {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.03);
        color: var(--muted);
    }

    #ok {
        background: rgba(16, 185, 129, 0.12);
        color: var(--success)
    }

    #wrongPassword {
        background: rgba(239, 68, 68, 0.08);
        color: var(--danger)
    }

    #wrongEmail {
        background: rgba(245, 158, 11, 0.08);
        color: var(--warning)
    }

    #NoUsr {
        background: rgba(43, 124, 255, 0.08);
        color: var(--accent)
    }

    /* Response text */
    #hello {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
    }

    #message {
        font-size: 13px;
        color: var(--muted);
        margin-top: -4px;
    }

    /* Small screens */
    @media (max-width:920px) {
        .loginDiv {
            flex-direction: column;
            align-items: center
        }

        .loginResponse {
            width: 100%;
            max-width: 520px;
            margin-left: 0
        }

        .loginForm {
            max-width: 720px
        }
    }

    /* Utility */
    .hidden {
        display: none !important
    }

    .center {
        display: flex;
        align-items: center;
        justify-content: center
    }



    /* input */
    .popup input[type="checkbox" i] {
        padding: 3px;
    }

    .popup input[type="email"],
    input[type="text"],
    input[type="tel"],
    input[type="url"] {
        padding: 0px 15px;
        margin: 5px;
        border: none;
        border-radius: 10px;
        font-weight: 400;
        background: #f8f9f9;
        color: #101010;
    }

    .popup input[type="submit"] {
        cursor: pointer;
        padding: 12px 15px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        background-color: #000000;
        color: #ffffff;
        font-weight: 600;
    }

    .popup input:focus {
        outline-color: #5497ee;

    }

    .popup input:disabled {
        outline-color: #c1c1c1;
    }

    .popup input:invalid:focus-visible {
        outline-color: #ff9595;
    }

    .popup input:valid {
        outline-color: #5497ee;
    }

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

    .separator {
        height: 1px;
        background-color: #d1d1d1;
        width: 100%;
        margin: 10px;
    }

    .separator p {
        font-size: 12px;

    }
}


    @keyframes fadeIn {
        0% {
            opacity: 0%;
        }

        100% {
            opacity: 100%;
        }
    }

    @keyframes fadeUp {
        0% {
            opacity: 0%;
            height: 0%;
            width: 0%;
        }

        100% {
            opacity: 100%;
            height: 100%;
            width: 100%;
        }
    }

    @keyframes fadeOut {
        0% {
            opacity: 100%;
        }

        100% {
            opacity: 0%;
        }
    }