.navbar {
    background-color: #17a2b8 !important;
}
 
/* body {
    background-color: rgb(205, 229, 236) !important;
} */

.navbar-brand {
    color: white !important;
}

/* Landing (Sign In) page, coloured like the Government of Guyana portal
   (portal.gov.gy): light grey page, white card, blue accent. Scoped to the
   login page; body[data-path] also outranks Frappe's login stylesheet, which
   loads after this one. */
body[data-path="login"] {
    --swdb-accent: #268cdf;
    --swdb-accent-dark: #1f74b9;
    --swdb-heading: #222222;
    --swdb-text: #595959;
    --swdb-muted: #7c7c7c;
    --swdb-border: #ebebeb;
    background-color: #fafafa;
    color: var(--swdb-text);
}

body[data-path="login"] .page-card {
    background-color: #ffffff;
    border: 1px solid var(--swdb-border);
    border-radius: 12px;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.05);
}

body[data-path="login"] .page-card-head h4 {
    color: var(--swdb-heading);
}

body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .sign-up-message {
    color: var(--swdb-text);
}

body[data-path="login"] label {
    color: var(--swdb-muted);
}

body[data-path="login"] .form-control:focus {
    border-color: var(--swdb-accent);
    box-shadow: 0 0 0 3px rgba(38, 140, 223, 0.15);
}

/* primary actions: Continue, Send Link, ... */
body[data-path="login"] .page-card-actions .es-button:not(.btn-login-option),
body[data-path="login"] .signup-disabled-message .es-button {
    background-color: var(--swdb-accent);
    border-color: var(--swdb-accent);
    color: #ffffff;
}

body[data-path="login"] .page-card-actions .es-button:not(.btn-login-option):hover,
body[data-path="login"] .page-card-actions .es-button:not(.btn-login-option):focus,
body[data-path="login"] .signup-disabled-message .es-button:hover {
    background-color: var(--swdb-accent-dark);
    border-color: var(--swdb-accent-dark);
    color: #ffffff;
}

/* secondary action (Login with password): outline, like the portal's buttons */
body[data-path="login"] .page-card-actions .btn-login-option {
    background-color: #ffffff;
    border: 1px solid var(--swdb-accent);
    color: var(--swdb-accent);
}

body[data-path="login"] .login-content a:not(.es-button) {
    color: var(--swdb-accent);
}

body[data-path="login"] .login-content a:not(.es-button):hover {
    color: var(--swdb-accent-dark);
}

/* on phones Frappe stretches the card to the full screen height, which pushed
   the NDMA logo below the fold */
@media (max-width: 767px) {
    body[data-path="login"] .page-card {
        min-height: auto;
    }
}

/* "Powered by NDMA" at the bottom of the page */
body[data-path="login"] .page-footer::after {
    content: "";
    display: block;
    width: min(320px, 80vw);
    aspect-ratio: 4180 / 1310;
    margin: 2.5rem auto 1.5rem;
    background: url("/assets/swdb/images/powered_by_ndma.png") center / contain no-repeat;
}