.login-container {
    width: 25em;
    margin: 2em auto;
    padding: 2em;
    border: 0.1em solid #ccc;
    border-radius: 0.5em;
    background-color: var(--form-background);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 1em;
}

.success-message, .error-message {
    font-size: 0.9em; /* Smulkesnis šriftas */
    padding: 0.8em;
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.success-message {
    color: var(--body-a-hover-color); /* žalsva spalva */
    border: 1px solid var(--body-a-hover-color); /* žalsvas kraštas */
}

.error-message {
    color: var(--error-border-color); /* Raudonai-morkava spalva */
    border: 1px solid var(--error-border-color); /* Raudonai-morkava kraštas */
}

.form-input select {
    width: 100%;
    padding: 0.8em;
    margin: 0.5em 0;
    border: 0.1em solid var(--background-color);
    border-radius: 0.5em;
    box-sizing: border-box;
    background-color: var(--input-background);
    font-size: 1em;
    color: var(--body-shadow-color);
}

.form-input input {
    width: 100%;
    padding: 0.8em;
    margin: 0.5em 0;
    border: 0.1em solid var(--background-color);
    border-radius: 0.5em;
    box-sizing: border-box;
}

.passwd-box {
    margin-bottom: 1em;
}

.passwd-title {
    display: block;
    margin-bottom: 0.5em;
}

.passwd-input {
    background: var(--input-background);
    width: 100%;
    border-radius: 0.5em;
    padding-right: 1em;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border: 0.1em solid var(--background-color);
    background-color: var(--input-background);
}

.passwd-input input {
	width: 100%;
    border: none;
    outline: none;
    font-size: 1.3em;
    color: var(--body-shadow-color);
    padding: 0.5em;
    border-radius: 0.5em;
}

.passwd-input img {
    width: 1.5em;
    cursor: pointer;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.5em; /* Tarpas tarp checkbox ir teksto */
    margin: 1em 0;
}

.checkbox-container input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    accent-color: var(--form-button-color); /* Pritaikoma prie mygtukų spalvos */
}

.checkbox-container label {
    font-size: 1em;
    color: var(--body-shadow-color);
    cursor: pointer;
}

.form-button {
    margin-top: 1em;
}

.login-container button {
    width: 100%;
    padding: 0.8em;
    border: none;
    border-radius: 0.5em;
    background-color: var(--form-button-color);
    color: white;
    font-size: 1em;
    cursor: pointer;
}

.login-container button:hover {
    background-color: var(--body-a-hover-color);
}

.register-link {
    font-size: 0.9em;
    text-align: center;
}

.register-link p {
    margin: 2em 0;
}

/* ================================================================= */
/* ======= didesniems ekranams ===================================== */
/* ================================================================= */
@media (min-width: 768px) {
    .login-container {
		width: 30em;
	}
	
	.register-link p {
        margin: 1.2em 0;
    }
}