body {
}

#head {
    background: #383838 url(../content/images/logos/boatfixglobal-small.png) center center no-repeat;
}

a, .btn-link, .theme-dark .jGrowl .btn-link, .page-link {
    color: hsl(220, 72%, 31%);
}

:root {
    --color-primary: hsl(220, 72%, 31%);
    --color-secondary: hsl(220, 72%, 31%); /*hsl(200, 100%, 64%);*/ /* h,s,l+28*/
}

#nav-primary a.active, #nav-primary ul li.appMenu-item--active-trail, nav.panel-menu ul li.active, .nav-active, #group-all-assets > .group-header, #group-all-assets, #group-all-fences, #group-all-fences > .group-header, #group-all-places, #group-all-places .group-header, #group-all-shared-views, #group-all-shared-views .group-header, .card-selected {
    border-color: hsl(220, 72%, 31%);
}

#nav-utility, #nav-primary a:hover, .bg-primary, .btn-primary:hover, .theme-dark #map-functions .dropdown-menu a:hover, .theme-dark .dropdown-menu a.active, .theme-dark .dropdown-menu a.active:focus,
.theme-dark .dropdown-menu a:focus, .theme-dark #map-functions .dropdown-menu button:hover, .custom-control .custom-control-input:checked ~ .custom-control-label::before, #shared-view-banner, .primary-background {
    background-color: hsl(220, 72%, 31%);
}

.custom-control-input:active ~ .custom-control-label::before, .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: hsl(220, 72%, 90%);
}

.custom-control-input:focus ~ .custom-control-label::before, .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem hsla(220, 72%, 31%, 0.25);
}

.custom-control .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: hsla(220, 72%, 31%, 0.5);
}

/* color 2 - slightly darker */
a:hover, .btn-link:hover, .page-link:hover {
    color: hsl(220, 69%, 24%); /* h,s-3,l-7*/
}

#iconApp #nav-toggle {
    background-color: hsl(220, 69%, 24%); /* h,s-3,l-7*/
}

.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:hover, .btn-primary:disabled, .btn-primary.disabled, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .form-control:focus, .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:not(:disabled):active ~ .custom-control-label::before, .custom-control-input:focus:not(:checked) ~ .custom-control-label::before, #shared-view-banner, .primary-border, .theme-dark.full-page .pagination li.page-item.active a.page-link {
    border-color: hsl(220, 69%, 13%); /* h,s-3,l-18*/
}

    .btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:disabled, .btn-primary.disabled, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .progress-bar, .theme-dark.full-page .pagination li.page-item.active a.page-link {
        background-color: hsl(220, 69%, 27%); /* h,s-3,l-4*/
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:focus, .form-control:focus, .page-link:focus {
            box-shadow: 0 0 0 0.2rem hsla(220, 18%, 46%, 0.5); /* h */
        }

#nav-utility {
    background-color: #222;
}

#nav-header {
    background-color: #333;
    border-bottom: 1px solid #222;
}