/* Stile generale per il login */

@media screen and (max-width: 1024px)  {
  #gotchimon-world-login {
	margin-top: 40%;
  }  
}

/* Stile del contenuto del login */
.gotchimon-login-content {
    text-align: center; /* Centra il contenuto */
}

/* Stile dei messaggi di errore */
.error-message {
    background-color: #f8d7da; /* Colore di sfondo rosso chiaro */
    color: #721c24; /* Colore del testo rosso scuro */
    border: 1px solid #f5c6cb; /* Bordo rosso chiaro */
    padding: 10px; /* Padding interno */
    margin-bottom: 20px; /* Margine sotto il messaggio */
    border-radius: 5px; /* Angoli arrotondati */
}

/* Stile del modulo di login */
.login-form {
    margin-top: 5px; /* Margine sopra il modulo */
}

/* Stile per i campi di input */
#user_login {
    width: 100%; /* Larghezza totale */
    margin: 10px 0; /* Margine verticale */
    border: 1px solid #ccc; /* Bordo grigio chiaro */
    border-radius: 5px; /* Angoli arrotondati */
    box-sizing: border-box; /* Includi padding e bordo nella larghezza totale */
	background-color: #FFF568;
}

#user_pass {
    width: 70%; /* Larghezza totale */
    margin: 10px 0; /* Margine verticale */
    border: 1px solid #ccc; /* Bordo grigio chiaro */
    border-radius: 5px; /* Angoli arrotondati */
    box-sizing: border-box; /* Includi padding e bordo nella larghezza totale */
	background-color: #FFF568;
}

/* Stile per il pulsante di login */
.login-form input[type="submit"] {
    background-color: #11e00e; /* Colore verde del pulsante */
	background-image: linear-gradient(to top, rgba(0, 100, 0, 0.8), rgba(2, 113, 1, 0.5) 50%, rgba(2, 113, 1, 0.2));
    color: black; /* Colore del testo bianco */
    border: 3px solid black; /* Rimuovi il bordo */
    padding: 10px; /* Padding interno */
    margin-top: 10px; /* Margine sopra il pulsante */
    border-radius: 8px; /* Angoli arrotondati */
    cursor: pointer; /* Cursore a forma di mano */
    font-size: 20px; /* Dimensione del font */
	font-weight: bold;
	width: 55%;
}

/* Stile per il pulsante di login al passaggio del mouse */
.login-form input[type="submit"]:hover {
    background-color: #357ABD; /* Colore blu scuro al passaggio del mouse */
}

/* Stile del link di registrazione */
.login-form a {
    color: #4A90E2; /* Colore blu per il link */
    text-decoration: none; /* Rimuovi la sottolineatura */
}

.login-form a:hover {
    text-decoration: underline; /* Sottolinea al passaggio del mouse */
}

.gotchimon-world-link {
	color: #4A90E2; /* Colore blu per il link */
    text-decoration: none; /* Rimuovi la sottolineatura */
}

.gotchimon-world-link:hover {
    text-decoration: underline; /* Sottolinea al passaggio del mouse */
}

p {
  position: relative; /* il contenitore diventa "anchor" */
}

p input[type="password"] {
  width: 100%;
  padding-right: 2.5rem; /* spazio per l’occhietto */
  box-sizing: border-box;
}

.toggle-password {
  position: absolute;
  right: 2rem; /* distanza dal bordo destro dell’input */
  top: 75%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}

.toggle-password:hover {
  color: #000;
}

.registration-page-link {
  font-size: 9px;
}