/*
#28486C - dark blue
#3a699e - light blue
#A0C55F - light green
*/
html {height:100%;}
body {
    height:100%;
    background-color:#fff;
    color:#333;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:16px;
    line-height: 1.6;
}
a {
    color:#28486C;
}
a:hover {
    color:#3a699e;
}
.content-wrapper {
    min-height:100%;
    position:relative;
    margin:0;
    padding:0;
}
main {
    min-height:100%;
    padding-bottom:75px;
}
h1 {
    font-family: 'Montserrat',sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    color:#28486C;
    margin:1em 0 0.5em 0;
}
h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.3;
    margin:1em 0 0.5em 0;
}
h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.4;
    margin:1em 0 0.5em 0;
}
h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.5;
    margin:1em 0 0.5em 0;
}
.font-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.font-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}
main .container.maincontent {
    background-color: #fff;
    -webkit-box-shadow: 0 4px 25px -4px #aaa;
    box-shadow: 0 4px 25px -4px #aaa;
    padding-bottom: 10px;
    min-height:25em;
}

/* BUTTONS --------------------------------------------------------------------------- */
.btn-clearwhite {
    background-color: inherit;
    color:#fff;
    border:1px solid #fff;
}
.btn-clear{
    background-color: inherit;
    color:#333;
    border:1px solid #666;
}
/* HEADER --------------------------------------------------------------------------- */
header .navbar-default {
    background-color: #28486C;
    color:#fff;
    border:none;
    border-radius:0;
    height:125px;
}
/* Bootstrap 5 lays a .navbar and its .container out as flex rows; this header is the Bootstrap 3
   two-row design (brand and user menu above, the justified menu below), so it keeps block flow. */
header .navbar,
header .navbar-default > .container {
    display:block;
}
header .navbar-default > .container::after {
    content:"";
    display:block;
    clear:both;
}
.navbar .navbar-brand {
    background-color:red;
}
.navbar .navbar-brand {
    padding:0;
    height:75px;
    text-align: center;
    float:none;
    white-space:normal;
}
.navbar-brand a {
    color:#fff;
    text-decoration: none;
    text-align: center;
}
.navbar-brand .brand-h1 {
    color:#fff;
    font-size:1.5em;
    line-height:2.75em;
}
.navbar-brand img {
    margin:0 auto;
}
.navbar-default .navbar-toggler {
    float:right;
    margin-right:2em;
}
main #user-banner {
    min-height:2em;
    margin-bottom:1em;
    font-style: italic;
    text-align: center;
}
/* NAVIGATION --------------------------------------------------------------------------- */
.primary-nav {
    background-color:inherit;
    border:none;
}
.primary-nav li a {
    color:#fff;
    background-color: #28486C;
    border-radius:0px;
    font-size:14px;
}
.primary-nav li a:hover, .primary-nav li a:active,
.primary-nav li a:focus, .primary-nav li a.focus, .primary-nav li.active a,
.primary-nav .nav-link:hover, .primary-nav .nav-link:focus, .primary-nav .nav-link.show,
.primary-nav > li > a:focus, .primary-nav > li > a:hover {
    background-color: #3a699e;
    color:#fff;
}

.nav-justified > li > a, .nav-justified .nav-link {
    text-align:left;
    width:100%;
    margin:0;
    border-bottom:1px solid #fff;
}
.user-menu .btn {
    margin:0 10px 0 0;
    border-radius: 4px !important;
}
.user-menu a.navbar-left {
    color:#fff;
    text-decoration: underline;
}
.btn-group.user-menu {
    float:right !important;
}
.user-menu li .caption {
    margin-left:10px;
}
.user-menu .navbar-collapse {
    width:100% !important;
}
.navbar-default .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-default .navbar-toggler:hover .navbar-toggler-icon,
.navbar-default .navbar-toggler:active .navbar-toggler-icon,
.navbar-default .navbar-toggler:focus .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23888888' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* FOOTER --------------------------------------------------------------------------- */
footer {
    height:70px;
    position:absolute;
    bottom:0;
    width:100%;
}
footer .row {
    margin:0;
    padding:0;
}
footer .navbar-default {
    background-color: #28486C;
    border:none;
    border-radius:0px;
    color:#fff;
    padding-top:5px;
    margin:0;
    height:70px;
}
footer a, footer a:hover {
    color:#fff;
}
footer .powered-by span {
    float:right;
    margin-top:19px;
}
footer .powered-by img {
    float:right;
    margin-top:5px;
    margin-right:20px;
    height:40px;
}
footer .legal {
    margin:10px 0 0 0;
}
footer .legal a {
    margin-left:20px;
}
footer .fas {
    margin-right:5px;
}
/* MISC --- */

.shadowed {
    -webkit-box-shadow: -25px 0 25px -30px #aaa, 25px 0 25px -30px #aaa;
    box-shadow: -25px 0 25px -30px #aaa, 25px 0 25px -30px #aaa;
}
.agencyBalanceSummary {
    margin-top: 1em;
}

/* MEDIA QUERIES --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    header {
        height:140px;
        box-shadow: 0px 2px 10px #aaa;
        margin-bottom:1em;
    }
    main {
        padding-bottom:100px;
    }
    main .container.maincontent {
        min-height:34em;
    }
    header .navbar-default {
        height:100px;
        background-color:#fff;
    }
    .navbar .navbar-brand {
        float:left;
        margin:0;
        height:100px;
    }
    .navbar-brand .brand-h1 {
        font-size:2em;
        line-height:1em;
        float:left;
        clear:both;
        padding:30px 0 0 25px;
        color:#000;
    }
    #navbar-collapse-1 {
        background-color:#28486C;
        min-height:2.5em;
    }
    #navbar-collapse-1 .container {
        padding:0;
    }
    .nav-justified > li > a, .nav-justified .nav-link {
        text-align:left;
        width:100%;
        margin:0;
        border:none;
    }
    .primary-nav li a {
        border-radius:0px;
    }
    .nav-justified > li > a, .nav-justified .nav-link {
        text-align:center;
        margin-bottom:0;
    }
    .primary-nav li ul.inner-nav {
        width:750px;
    }
    .primary-nav li ul.inner-nav li a {
        background-color:#fff;
        color:#28486C;
        border:none;
        border-radius:0px;
        padding:0.5em 1em;
    }
    .primary-nav li ul.inner-nav li a:hover {
        background-color: #28486C;
        color:#fff;
        text-decoration: none;
    }
    .primary-nav li .state-block {
        float:left;
        width:175px;
        border-right:1px solid #eee;
        padding-bottom:1em;
    }
    .primary-nav li .state-block:first-of-type {
        padding-left:1em;
    }
    .primary-nav li .state-block:last-of-type {
        border:none;
    }
    .primary-nav li .state-block li a {
        display:block;
        width:100%;
    }
    .user-menu {
        margin:40px 0 0 0;
    }
    .agencyBalanceSummary {
        margin-top: 0;
    }
}
@media (min-width:993px) {
    .navbar .navbar-brand {
        padding:0;
    }
    .navbar-brand .brand-h1 {
        padding:30px 0 0 0;
    }

    .user-menu {
        margin:40px -15px 0 0;
    }
    .primary-nav li ul.inner-nav {
        width:850px;
    }
    .primary-nav li .state-block {
        width:200px;
    }
}
@media (max-width:992px) {
    .container {
        width:100%;
    }
    header .navbar .container {
        padding-left:0;
    }
    .navbar {
        margin-bottom:0;
    }
    .navbar-brand img {
        margin-left:35px;
    }
}
@media (max-width:768px) {
    .navbar-brand img {
        height:75px;
    }
    .navbar-brand img {
        margin-left:0;
    }
}