body.login {
    background: #F2F2F2;
    justify-content: center;
    align-items: center;
    height: 100vh;
	display: grid;
}

body.login div#login {
    width: 100%; /* Możesz dostosować szerokość dla lepszego wyświetlania */
    max-width: 400px; /* Maksymalna szerokość okna logowania */
    margin: 2rem;
    padding: 2rem;
    background: white; /* Tło dla okna logowania */
    border-radius: 10px; /* Zaokrąglenie rogów */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}


input[type="text"], input[type="password"] {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 2em;
    box-sizing: border-box;
	
}

.login input[type="submit"] {
    width: 100%;
    background-color: #333; /* Zmień kolor tła */
    border-color: #333;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
}

.login input[type="submit"]:hover {
    width: 100%;
    background-color: #2271B1; /* Zmień kolor tła */
    border-color: #2271B1;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
}

.login form{
		border: 0px;
}

.login .button.wp-hide-pw{
		top: 1,0rem;
		width: 1.25rem;
		height: 1.25rem;
		position: absolute;
		min-width: 40px;
		min-height: 52px;
		line-height: 2px;
}

.login .message {
    border-left: 4px solid #00a0d2; /* Zmień kolor border-left */
    padding: 1em;
    margin-left: 0;
    margin-bottom: 2em;
}

/* Style dla pól formularza */
body.login div#login form#loginform {
    box-shadow: none;
}

body.login div#login form#loginform p {
    margin-bottom: 20px; /* Odstęp między polami */
}

body.login div#login form#loginform p label {
    font-size: 14px; /* Rozmiar czcionki dla etykiet */
    color: #777; /* Kolor tekstu etykiet */
}

body.login div#login form#loginform input.input,
body.login div#login form#loginform input[type="password"],
body.login div#login form#loginform input[type="text"] {
    font-size: 16px; /* Rozmiar czcionki dla input */
    width: 100%;
    margin: 5px 0 15px;
    padding: 15px; /* Wypełnienie dla input */
    border: 1px solid #ddd; /* Subtelna obramówka */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); /* Wewnętrzny cień */
    border-radius: 5px; /* Zaokrąglenie rogów input */
}

body.login div#login form#loginform .button-primary {
    background-color: #333; /* Czarny tło dla przycisku */
    color: #fff; /* Biały tekst na przycisku */
    border-color: #000; /* Czarna obramówka */
    font-weight: bold;
    border-radius: 5px; /* Zaokrąglenie rogów */
    font-size: 18px; /* Rozmiar czcionki */
    height: 50px; /* Wysokość przycisku */
    line-height: 1; /* Wysokość linii */
}

body.login div#login form#loginform .button-primary:hover {
    background-color: #2271B1; /* Czarny tło dla przycisku */
    color: #fff; /* Biały tekst na przycisku */
    border-color: #2271B1; /* Czarna obramówka */
    font-weight: bold;
    border-radius: 5px; /* Zaokrąglenie rogów */
    font-size: 18px; /* Rozmiar czcionki */
    height: 50px; /* Wysokość przycisku */
    line-height: 1; /* Wysokość linii */
}


body.login div#login p#nav,
body.login div#login p#backtoblog {
    text-align: center; /* Wyśrodkowanie tekstów */
}

/* Dostosowanie komunikatów o błędach */
body.login div#login .message {
    border-left: 4px solid #00a0d2; /* Kolor obramówki dla komunikatów */
    padding: 12px;
    background-color: #fff; /* Białe tło komunikatu */
    box-shadow: 0 1px 3px rgba(0,0,0,.13); /* Cień komunikatu */
}

/* Jeśli potrzebujesz dostosować 'Checkbox' */
.login .forgetmenot label {
    font-size: 13px; /* Rozmiar czcionki dla 'Zapamiętaj mnie' */
}

/* Przyciski i linki dodatkowe */
.login #nav a, .login #backtoblog a {
    color: #555 !important; /* Kolor linków */
}

@media (max-width: 400px) {
    body.login div#login {
		width: 90%;
        margin: 10px;
    }
}