/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    THIS FILE IS ONL FOR STYLES THAT OVERRIDE THE NATIVE BOOTSTRAP STYLES.
    Do not put non-Bootstrap styles here.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.row {
    margin: 0px;
}

.navbar li, .navbar ul li {
    font-size: 1.25rem;
}

.navbar a, .navbar ul a {
    color: var(--color-light);
    background-color: var(--color-dark);
}

.navbar-nav > li > a:focus, .navbar-nav > li > a:hover {
    color: var(--color-link-hover);
    background-color: transparent;
}

.navbar a:hover, .navbar a:focus {
    color: var(--color-link-hover);
    background-color: transparent;
}

.dropdown-menu {
    padding: 5px;
    border: 0px;
    width: max-content;
    background-color: var(--color-dark);
}

.navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus {
    color: var(--color-link-hover);
    background-color: var(--color-dark);
}

.navbar-nav {
    flex-direction: row;
}

    .bp-btn, .navbar-nav .bp-btn, .navbar-nav ul .bp-btn {
        color: var(--color-light) !important;
        background-color: var(--color-blue) !important;
        border-color: var(--color-blue);
        padding: 0.175rem 0.75rem;
    }

        .bp-btn:hover, .navbar-nav .bp-btn:hover, .navbar-nav ul .bp-btn:hover {
            color: var(--color-light);
            background-color: var(--color-btn-hover);
            border-color: var(--color-btn-hover-border);
        }

        .bp-btn:not(:disabled):not(.disabled):active, .bp-btn:not(:disabled):not(.disabled).active,
        .show > .bp-btn.dropdown-toggle {
            color: var(--color-light);
            background-color: var(--color-btn-hover-border);
            border-color: var(--color-btn-not-border);
        }

            .bp-btn:not(:disabled):not(.disabled):active:focus, .bp-btn:not(:disabled):not(.disabled).active:focus,
            .show > .bp-btn.dropdown-toggle:focus {
                box-shadow: 0 0 0 0.2rem rgba(33, 155, 217, 0.5);
            }

@media (min-width:450px) { /* not 576px; */
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1
    }
}