/* Grand Ridge National Bank tenant branding.
 * Brand source: https://www.grnbank.com/
 */

:root {
    --grn-primary: #a4343a;
    --grn-primary-dark: #752529;
    --grn-deep: #50191c;
    --grn-accent: #de781f;
    --grn-cream: #fbf1e8;
    --grn-ink: #332d2d;
    --grn-border: #e6e7e9;
}

body {
    color: var(--grn-ink);
}

a {
    color: var(--grn-primary);
}

a:hover,
a:focus {
    color: var(--grn-primary-dark);
}

/* Header and tenant marks */
.topnavbar {
    background-color: #fff;
    background-image: none;
    border-bottom: 3px solid var(--grn-primary);
    box-shadow: 0 1px 4px rgba(80, 25, 28, 0.16);
}

.topnavbar .navbar-header {
    background-color: #fff;
}

.topnavbar .nav-link,
.topnavbar .nav-link em {
    color: var(--grn-deep);
}

.topnavbar .nav-link:hover,
.topnavbar .nav-link:focus {
    color: var(--grn-primary);
    background-color: var(--grn-cream);
}

.logo-large,
.logo-login {
    display: block;
    box-sizing: border-box;
    content: url("assets/grnbank-logo.jpg");
    object-fit: contain;
    object-position: center;
    background: none !important;
    border: 0 !important;
    outline: 0;
    box-shadow: none;
    padding-left: 0 !important;
}

.logo-large {
    width: 200px;
    height: 38px;
}

.logo-small {
    display: block;
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    content: url("assets/grnbank-icon.png");
    object-fit: contain;
    object-position: center;
    padding-left: 0 !important;
    background: none !important;
    border: 0 !important;
    outline: 0;
    box-shadow: none;
}

.logo-login {
    width: 280px;
    max-width: 100%;
    height: 64px;
}

.card-flat .login-product-logo.d-none {
    display: block !important;
    width: 120px;
    max-width: 52%;
    height: auto;
    margin: 16px auto 0;
}

.card-flat > .card-header.bg-dark,
#splash .card-header.bg-dark {
    background-color: #fff !important;
    border-bottom: 4px solid var(--grn-primary);
    padding: 16px 20px;
}

/* Navigation */
.sidebar-nav > li > a:focus,
.sidebar-nav > li > a:hover,
.sidebar-nav > li > .nav-item:focus,
.sidebar-nav > li > .nav-item:hover,
.sidebar-subnav > li > a:focus,
.sidebar-subnav > li > a:hover,
.sidebar-subnav > li > .nav-item:focus,
.sidebar-subnav > li > .nav-item:hover {
    color: var(--grn-primary);
}

.sidebar-nav > li.active,
.sidebar-nav > li.active > a,
.sidebar-nav > li.active > .nav-item,
.sidebar-nav > li.active .sidebar-nav,
.sidebar-nav > li.open,
.sidebar-nav > li.open > a,
.sidebar-nav > li.open > .nav-item,
.sidebar-nav > li.open .sidebar-nav {
    color: var(--grn-deep);
    background-color: var(--grn-cream);
}

.sidebar-nav > li.active,
.sidebar-nav > li.open {
    border-left-color: var(--grn-primary);
}

.sidebar-nav > li.active > a > em,
.sidebar-nav > li.active > .nav-item > em,
.sidebar-nav > li.open > a > em,
.sidebar-nav > li.open > .nav-item > em,
.sidebar-subnav > li.active > a,
.sidebar-subnav > li.active > .nav-item {
    color: var(--grn-primary);
}

.sidebar-subnav > li.active > a::after,
.sidebar-subnav > li.active > .nav-item::after {
    border-color: var(--grn-primary);
    background-color: var(--grn-primary);
}

.wrapper .section-container {
    background-color: #f7f7f8;
}

/* Primary controls */
.btn-primary {
    color: #fff;
    background-color: var(--grn-primary);
    border-color: var(--grn-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--grn-accent);
    border-color: var(--grn-accent);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(222, 120, 31, 0.25);
}

.form-control:focus {
    border-color: var(--grn-accent);
}

.bg-primary {
    background-color: var(--grn-primary) !important;
}

.bg-primary-dark {
    color: #fff !important;
    background-color: var(--grn-deep) !important;
}

.text-primary {
    color: var(--grn-primary) !important;
}

.text-warning {
    color: var(--grn-accent) !important;
}

.badge-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.progress-bar,
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: var(--grn-primary);
    border-color: var(--grn-primary);
}

.page-link {
    color: var(--grn-primary);
}

.page-link:hover,
.page-link:focus {
    color: var(--grn-deep);
}

.table thead th {
    border-bottom-color: var(--grn-primary);
}

.table-hover tbody tr:hover {
    background-color: var(--grn-cream);
}