/* ============================= */
/* TITLE */
/* ============================= */

.login-title {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    color:rgb(255, 255, 255);
}


/* ============================= */
/* FORM */
/* ============================= */

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 10px 0;
}


.login-form__formgrup {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


/* ============================= */
/* LINKS */
/* ============================= */

.login-form a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}


/* ============================= */
/* LABEL */
/* ============================= */

.login-form__label {
    font-size: 1.1em;
    color:rgb(255, 255, 255);
    visibility: hidden;
    position: absolute;
}


/* ============================= */
/* INPUT */
/* ============================= */

.login-form__input {
    border: 1px solid #ccc;
    background-color:rgb(25, 25, 25);
    color:rgb(255, 255, 255);
    border-radius: 4px;
    box-sizing: border-box;
    height: 35px;
    max-width: 350px;
    width: 100%;
}

.login-form__input:focus, {
    outline: none;
    border-color: #4da3ff;
    background-color: #202020;
    box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.25);
}

.login-form__input:not(:focus):invalid {
    animation: headshake 200ms cubic-bezier(.4,.1,.6,.9) 2;
}


/* ============================= */
/* BUTTON */
/* ============================= */

.login-form__button {
    position: relative;
    background-color: #007bff;
    color: white;
    overflow: hidden;
    padding: 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    width: auto;
    transition: background 0.3s ease;
}

.login-form__button:hover {
    background-color: #0056b3;
}


/* ============================= */
/* MESSAGES */
/* ============================= */

.login-form__errordiv {
    color: red;
    padding: 10px;
    border: 1px solid red;
    background-color: #ffe6e6;
    word-wrap: break-word;
}


/* ============================= */
/* ANIMATIONS */
/* ============================= */

@keyframes headshake {
    0% {
        border: 1px solid #b20a37;
    }
    25% {
        transform: translateX(10px);

    }
    75% {
        transform: translateX(-10px);
    }
    100% {
        border: 1px solid #b20a37;
    }
}