body.login {
    background-color: #ffffff !important;
}

.login h1 a, .login h1 {
    background-image: url('images/ISW-Westland-Praktijkcollege-logo.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 320px !important;
    height: 120px !important;
    text-indent: -9999px !important;
    outline: none !important;
    margin-bottom: 25px !important;
}

.login h1 a {
    display: block !important;
}

#loginform {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    padding: 32px !important;
    border-top: 4px solid #2980b9 !important;
}

.login .button-primary {
    background-color: #2980b9 !important;
    border: none !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.2) !important;
    cursor: pointer !important;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background-color: #da2128 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(218, 33, 40, 0.3) !important;
    transform: translateY(-2px) !important;
}

.login .button-primary:active {
    background-color: #da2128 !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 5px rgba(218, 33, 40, 0.3) !important;
}

.login #nav a,
.login #backtoblog a {
    color: #2980b9 !important;
    text-decoration: none !important;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #da2128 !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #2980b9 !important;
    box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.1) !important;
    outline: none !important;
}

#login-message {
  border-left-color: #da2128 !important;
  background-color: #ffffff !important;
}