body.login {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #5AA8D0 -10%, #3997BE 26.38%, #394B85 100%);
    font-family: 'Open Sans', sans-serif;
}

body.login div#login {
    width: 380px;
    padding: 0;
    margin: 16px;
}

/* Logo Login Page */
body.login div#login .wp-login-logo {
    margin-bottom: 32px;
}

body.login div#login .wp-login-logo a {
    background-image: var(--logo-wiki);
    pointer-events: none;
    margin-bottom: 0;
}

body.login div#login .wp-login-logo:after {
    content: 'Wiki';
    display: inline-block;
    color: var(--action-focus, #74C7E9);
    text-align: center;
    font-family: 'Flood Std', sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -2.5px;
    text-transform: uppercase;
    transform: rotate(-5.613deg);
}

/* Notice Messages Login Page */
body.login div#login .notice-error,
body.login div#login .notice-warning,
body.login div#login .notice-success,
body.login div#login .notice-info {
    margin: 32px 0 0;
    padding: 16px;
    border-left: none;
    border-radius: 16px;
}

body.login div#login .notice-error {
    background-color: var(--error-lightest, #FBE5E8);
}

body.login div#login .notice-warning {
    background-color: var(--warning-lightest, #FFF6E9);
}

body.login div#login .notice-success {
    background-color: var(--success-lightest, #E8F5EF);
}

body.login div#login .notice-info {
    background-color: var(--primary-lightest, #F3FAFD);
}

body.login div#login .notice-error p,
body.login div#login .notice-warning p,
body.login div#login .notice-success p,
body.login div#login .notice-info p {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

body.login div#login .notice-error p:before,
body.login div#login .notice-warning p:before,
body.login div#login .notice-success p:before,
body.login div#login .notice-info p:before {
    display: inline-block;
    height: 24px;
    margin-right: 4px;
    vertical-align: middle;
}

body.login div#login .notice-error p:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="%23D70015"/></svg>');
}

body.login div#login .notice-warning p:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"><path d="M1.5 21H23.5L12.5 2L1.5 21ZM13.5 18H11.5V16H13.5V18ZM13.5 14H11.5V10H13.5V14Z" fill="%23FFA620"/></svg>');
}

body.login div#login .notice-success p:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M10.74 16.14L17.085 9.795L15.825 8.535L10.74 13.62L8.175 11.055L6.915 12.315L10.74 16.14ZM12 21C10.755 21 9.585 20.7638 8.49 20.2913C7.395 19.8188 6.4425 19.1775 5.6325 18.3675C4.8225 17.5575 4.18125 16.605 3.70875 15.51C3.23625 14.415 3 13.245 3 12C3 10.755 3.23625 9.585 3.70875 8.49C4.18125 7.395 4.8225 6.4425 5.6325 5.6325C6.4425 4.8225 7.395 4.18125 8.49 3.70875C9.585 3.23625 10.755 3 12 3C13.245 3 14.415 3.23625 15.51 3.70875C16.605 4.18125 17.5575 4.8225 18.3675 5.6325C19.1775 6.4425 19.8188 7.395 20.2913 8.49C20.7638 9.585 21 10.755 21 12C21 13.245 20.7638 14.415 20.2913 15.51C19.8188 16.605 19.1775 17.5575 18.3675 18.3675C17.5575 19.1775 16.605 19.8188 15.51 20.2913C14.415 20.7638 13.245 21 12 21Z" fill="%23169C64"/></svg>');
}

body.login div#login .notice-info p:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.1 16.5H12.9V11.1H11.1V16.5ZM12 9.3C12.255 9.3 12.4688 9.21375 12.6413 9.04125C12.8138 8.86875 12.9 8.655 12.9 8.4C12.9 8.145 12.8138 7.93125 12.6413 7.75875C12.4688 7.58625 12.255 7.5 12 7.5C11.745 7.5 11.5312 7.58625 11.3588 7.75875C11.1863 7.93125 11.1 8.145 11.1 8.4C11.1 8.655 11.1863 8.86875 11.3588 9.04125C11.5312 9.21375 11.745 9.3 12 9.3ZM12 21C10.755 21 9.585 20.7638 8.49 20.2913C7.395 19.8188 6.4425 19.1775 5.6325 18.3675C4.8225 17.5575 4.18125 16.605 3.70875 15.51C3.23625 14.415 3 13.245 3 12C3 10.755 3.23625 9.585 3.70875 8.49C4.18125 7.395 4.8225 6.4425 5.6325 5.6325C6.4425 4.8225 7.395 4.18125 8.49 3.70875C9.585 3.23625 10.755 3 12 3C13.245 3 14.415 3.23625 15.51 3.70875C16.605 4.18125 17.5575 4.8225 18.3675 5.6325C19.1775 6.4425 19.8188 7.395 20.2913 8.49C20.7638 9.585 21 10.755 21 12C21 13.245 20.7638 14.415 20.2913 15.51C19.8188 16.605 19.1775 17.5575 18.3675 18.3675C17.5575 19.1775 16.605 19.8188 15.51 20.2913C14.415 20.7638 13.245 21 12 21Z" fill="%232A6076"/></svg>');
}

body.login div#login .notice-error p {
    color: var(--error, #A10010);
}

body.login div#login .notice-warning p {
    color: var(--warning, #8D6708);
}

body.login div#login .notice-success p {
    color: var(--success, #11754B);
}

body.login div#login .notice-info p {
    color: var(--info-main, #2A6076);
}

/* Login Form Login Page */
body.login div#login form#loginform,
body.login div#login form#lostpasswordform {
    margin: 16px 0 32px;
    padding: 32px 24px;
    border-radius: 16px;
    background: var(--background-paper, #FFFFFF);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 4px 6px 0 rgba(0, 0, 0, 0.10);
}

body.login div#login form#loginform label,
body.login div#login form#lostpasswordform label {
    color: var(--text-primary, #1D4152);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 8px;
}

body.login div#login form#loginform input.input,
body.login div#login form#lostpasswordform input.input {
    border-radius: 24px;
    background: var(--background-paper, #FFFFFF);
    box-shadow: var(--shadow--main);
    padding: 12px 16px;
    color: var(--text-primary, #1D4152);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 16px 0;
    border: none;
}

body.login div#login form#loginform input.input:focus,
body.login div#login form#lostpasswordform input.input:focus {
    padding: 10px 14px;
    border: 2px solid var(--action-focus, #74C7E9);
    background: var(--background-paper, #FFFFFF);
    box-shadow: var(--shadow--main);
}

/* Remember Me Checkbox Login Page */
body.login div#login form#loginform #rememberme {
    margin: -4px 4px 0 0;
}

body.login div#login form#loginform .forgetmenot label {
    color: var(--text-primary, #1D4152);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

/* Hide/Show Password Button Login Page */
body.login div#login form#loginform .button.wp-hide-pw {
    min-width: 48px;
    min-height: 48px;
}

body.login div#login form#loginform .button.wp-hide-pw:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

body.login div#login form#loginform .button.wp-hide-pw .dashicons-hidden:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="%231D4152"/></svg>');
}

body.login div#login form#loginform .button.wp-hide-pw .dashicons-visibility:before {
    content: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="%231D4152"/></svg>');
}

/* Submit Button Login Page */
body.login div#login form#loginform #wp-submit,
body.login div#login form#lostpasswordform #wp-submit {
    border-radius: 32px;
    background-color: var(--action-hover, #FF5722);
    padding: 8px 24px;
    border: none;
    color: var(--text-white, #FFFFFF);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

body.login div#login form#loginform #wp-submit:focus,
body.login div#login form#lostpasswordform #wp-submit:focus {
    box-shadow: none;
}

body.login div#login form#loginform #wp-submit:hover,
body.login div#login form#lostpasswordform #wp-submit:hover {
    color: var(--action-hover, #FF5722);
    background-color: var(--text-white, #FFFFFF);
    border: 2px solid var(--action-hover, #FF5722);
    padding: 6px 22px;
}

/* Navigation Links Login Page */
body.login div#login #nav {
    text-align: center;
}

body.login div#login #nav a {
    color: var(--action-selected, #FFFFFF);
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.login div#login #backtoblog a {
    color: var(--action-selected, #FFFFFF);
}

/* WPO365 Button Login Page */
body.login div#login form#loginform .wpo365-mssignin-wrapper {
    margin: 32px 0;
    padding: 0;
}

body.login div#login form#loginform .wpo365-mssignin-button {
    border-radius: 32px;
    border: 1px solid var(--action-secondary, #1D4152);
}

body.login div#login form#loginform .wpo365-mssignin-button .wpo365-mssignin-label {
    color: var(--action-secondary, #1D4152);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}