/*Config*/
:root {
    --brand-logo-path:      url('dist/img/logo.svg');
    --font-color:           #000000;
    --mal-color:            rgb(228,28,34);
    --mal-logo-path:        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNTEgMTIyIiB3aWR0aD0iODBweCI+DQogICAgPGcgaWQ9ImhlYXJ0IiBzdHlsZT0iZmlsbDojMDAwMDAwOyI+DQogICAgICAgIDxwYXRoIGQ9Ik0xMzYuMjkyIDYxLjEwODlDMTQxLjM2MyA1Ni4wMjY2IDE0Ni4zMzggNTEuMDQxMSAxNTEgNDYuMzcwMkMxMzYuMTI0IDMxLjE5NTggMTIxLjAzMSAxNS44Mjc4IDEwNS42MjYgMC4xMjEwMDhDOTUuNjk5OCAxMC4wNDM2IDg1LjYzIDIwLjEzNTcgNzUuNTEyIDMwLjI3NjFDNjUuNTYyMyAyMC4xMzU3IDU1LjU2NDUgOS45MjI2MyA0NS44MzExIDBDMzAuMzUzOCAxNS4zOTIyIDE1LjA5MjggMzAuNjE1IDAgNDUuNjQ0MUM0LjcxMDQ5IDUwLjQ2MDIgOS41ODkyMSA1NS40Njk5IDE0LjczMjMgNjAuNzQ1OUMyNC43NzgxIDUwLjYwNTQgMzQuODcyIDQwLjQxNjYgNDUuMjMwMyAyOS45ODU3QzU1LjQ0NDQgNDAuNDE2NiA2NS40MTgxIDUwLjYyOTYgNzUuNjMyMiA2MS4wNjA1Qzg1Ljc5ODIgNTAuODQ3NSA5NS44OTIxIDQwLjcwNyAxMDYuMjAyIDMwLjM0ODdDMTE2LjQxNiA0MC43Nzk2IDEyNi4zOSA1MC45OTI3IDEzNi4yOTIgNjEuMTA4OVpNNzUuMTI3NSAxMjEuOTc2QzkwLjM0MDQgMTA2LjgyNiAxMDUuNjUgOTEuNTU0NSAxMjAuNzkgNzYuNDUyN0MxMTYuMDMyIDcxLjU2NCAxMTEuMTI5IDY2LjUzMDEgMTA1Ljg0MiA2MS4xMDg5Qzk1LjY3NTggNzEuMzQ2MiA4NS40NjE3IDgxLjYwNzYgNzUuMDA3MyA5Mi4xMzUzQzY0Ljg0MTMgODEuNzI4NiA1NC43NDc0IDcxLjM5NDYgNDQuNzk3NyA2MS4yMjk5QzM5Ljc3NDggNjYuMjE1NCAzNC43NzU5IDcxLjE3NjggMjkuODk3MiA3Ni4wMTcxQzQ0Ljk5IDkxLjM2MDggNjAuMTU0OSAxMDYuODAxIDc1LjEwMzUgMTIyTDc1LjEyNzUgMTIxLjk3NloiPjwvcGF0aD4NCiAgICA8L2c+DQo8c2NyaXB0IHhtbG5zPSIiPjwvc2NyaXB0Pjwvc3ZnPg==");
    --mal-secondary-color:  #005283;
    --ml-border-radius:     14px;
    --ml-primary:           #4E78BC;;
    --ml-secondary:         #FFC01A;;
}
/*Config*/

/*Hide unused Elements*/
.login .language-switcher {
    display: none;
}
/*Hide unused Elements*/

body.login {
    background: linear-gradient(135deg,var(--ml-primary) 0%,var(--ml-secondary) 100%);
}

body.login h1.wp-login-logo a {
    background-image: var(--brand-logo-path);
}

body.login #nav,
body.login #backtoblog {
    text-align: center;
}

body.login #nav a,
body.login #backtoblog a {
    color:var(--font-color);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color:var(--ml-primary);
}

body.login form#loginform label,
body.login #login-message p {
    color:var(--font-color);
    font-size: 16px;
}

body.login form#loginform,
body.login #login-message,
body.login #lostpasswordform,
body.login .notice{
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,.3);
    border-radius: var(--ml-border-radius);
    box-shadow: unset;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), 0 24px 48px rgba(0, 0, 0, 0.22);
    outline: none;
}

body.login form#loginform .button.wp-hide-pw {
    top:3px;
}

body.login form#loginform input[type="text"],
body.login form#lostpasswordform input[type="text"],
body.login form#loginform input[type="password"] {
    border: 1px solid var(--ml-primary);
    border-radius: var(--ml-border-radius);
    box-shadow: unset;
    box-shadow: unset;
    outline: none;
    padding: 6px 16px;
}

body.login form#loginform input[type="text"]:focus,
body.login form#loginform input[type="password"]:focus {
    border: 1px solid var(--ml-secondary);
    box-shadow: 0 0 8px var(--ml-secondary);
}

body.login form#loginform #wp-submit,
body.login form#lostpasswordform #wp-submit {
    background-color: var(--ml-primary);
    border-color: var(--ml-primary);
    border-radius: var(--ml-border-radius);
    color: var(--font-color);
}

body.login .my-login-info {
    bottom: 20px;
    position: absolute;
    right: 20px;
}

body.login .ml-icon {
    animation: breath 2.5s ease-in-out infinite;
    background-image: var(--mal-logo-path);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 20px;
    margin-left: 10px;
    width: 20px;
}

body.login .my-login-info p,
body.login .my-login-info p a {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: max-content;
}

body.login .my-login-info p{
    color: var(--mal-secondary-color)
}

body.login .my-login-info p a {
    color: var(--mal-color);
}

@keyframes breath {
    0%, 100% {
        transform: scale(1);
    }

    50%      {
        transform: scale(1.2);
    }
}