/* Global navy-blue visual layer shared by every application screen. */
:root {
    --navy-950: #04111f;
    --navy-900: #071a2f;
    --navy-800: #0b2545;
    --navy-700: #123158;
    --navy-600: #173b67;
    --navy-400: #4f7cac;
    --navy-100: #e8eef7;
    --navy-50: #f4f7fb;
}

html {
    min-height: 100%;
    background: var(--navy-950);
}

body {
    background-color: var(--navy-900) !important;
    background-image:
        linear-gradient(rgba(4, 17, 31, .78), rgba(7, 26, 47, .84)),
        url('../images/navy-accessories-bg.png') !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.login-page {
    background-image: url('../images/login-navy-accessories-v2.png') !important;
    background-position: center center !important;
}

/* Keep content readable while letting the patterned backdrop show through. */
.container,
.main-content,
.content,
.dashboard-content,
.page-content {
    position: relative;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--navy-400) !important;
    box-shadow: 0 0 0 3px rgba(79, 124, 172, .18) !important;
}

::selection {
    color: #fff;
    background: var(--navy-600);
}

@media print {
    html,
    body {
        background: #fff !important;
    }
}