body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #ffffff;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login {
    height: 100vh;
    width: 100vw;
    background: #020024;
    background: linear-gradient(45deg, rgba(7, 5, 100, 1) 0%, rgba(9, 9, 171, 1) 45%, rgba(0, 212, 255, 1) 100%);
    position: relative;
    overflow: hidden;
}


.login::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    background: radial-gradient(#00c1cb5f, transparent, transparent);
    width: 60vh;
    height: 60vh;
    transition: 0.5s, var(--y) 0s, var(--x) 0s;
    pointer-events: none;
    /* Add this - prevents blocking clicks */
}

.login:hover::before {
    opacity: 1;
}

.login-card {
    --sign-in-container-width: 70vw;
    --sign-in-container-height: 60vh;

    width: var(--sign-in-container-width);
    height: var(--sign-in-container-height);

    margin-left: calc((100vw - var(--sign-in-container-width)) / 2);
    margin-right: calc((100vw - var(--sign-in-container-width)) / 2);



    /* From https://css.glass */
    background: rgba(100, 100, 100, 0.5);
    border-radius: 16px;
    box-shadow: 0 0 100px rgba(0, 0, 0, 1);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}




/* left side's panel */

.login-left-panel {
    max-width: calc(0.35 * var(--sign-in-container-width));
    width: calc(0.35 * var(--sign-in-container-width));
    max-height: var(--sign-in-container-height);
    height: var(--sign-in-container-height);
    padding-left: 3%;
    padding-right: 3%;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.login-left-logo-image img {
    max-height: 40%;
    max-width: 40%;

    max-width: 40%;
    width: 40%;

    background-color: rgba(241, 241, 241, 0.131);
    border-radius: 20%;
    margin-right: 1%;

    display: inline-block;
}

.login-left-logo-text {
    text-align: center;
    display: inline-block;
}

.login-left-image {
    font-size: 0;
    margin: 5% 0% 5% 0%;
    /* top,right,bottom,left */
}



/* right side's panel */

.login-right-panel {
    max-height: var(--sign-in-container-height);
    height: var(--sign-in-container-height);
    width: calc(0.65 * var(--sign-in-container-width));
    max-width: calc(0.65 * var(--sign-in-container-width));
    background-color: rgba(255, 255, 255, 0.123);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
}

.login-right-panel-top {
    text-align: center;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 1.25em;
    font-weight: 600;
}

.login-right-panel-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2vh;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
}

.login-input-container {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-inline-start: 9%;
}

.signin-input-field {
    border-bottom: 1px solid rgb(0, 0, 0);
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    font-size: 1em;
    background: transparent;
    color: #ffffff;
}

.signin-input-field::placeholder {
    color: #9c9c9c;
}

.signin-input-field.email-field {
    width: 50.4%;
}

.signin-input-field.password-field {
    width: 44%;
}

label.login-input-container {
    font-size: 14px;
    color: #ff0000;
    align-items: center;
}

.error {
    font-size: 0.9em;
    color: #ff0000;
    background-color: rgb(255, 255, 255);
    padding: 0.1vh 0.5vw 0.1vh 0.5vw;
    margin-top: 5px;
}

.error::before {
    background: #2d2d2d6d;
}

.error::after {
    background: #000000;
}

.credential-error p {
    font-size: 1em;
    color: #ff0000;
    background-color: rgb(255, 255, 255);
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.toggle-password {
    padding: 0;
}

.toggle-password img {

    background: rgb(249, 249, 249);
    cursor: pointer;
    height: 1.5vw;
    width: 1.5vw;
}

.signin-submit-button {
    display: inline-block;
    background-color: #8c52ff;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 1vh 1vh 1vh 1vh;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
    width: fit-content;
    padding: 1vh 1vw 1vh 1vw;

}

.signin-submit-button:hover {
    background-color: #0051ff;
}

.login-sign-up-link {
    text-align: center;
    margin-top: 1vh;
    background-color: rgba(0, 0, 0, 0.282);
    width: fit-content;
    align-self: center;
    padding: 1vh 1vw 1vh 1vw;
    border-radius: 1vh 1vh 1vh 1vh;
}

.login-sign-up-link p {
    display: inline;
}

.login-sign-up-link a {
    color: #8c52ff;
    text-decoration: none;
    font-weight: bold;
}

.login-sign-up-link a:hover {
    text-decoration: underline;
}