/* navbar search bar */

.search-box {
    margin: 0 var(--s1);
}

.bonsai-searchform #bonsai_q {
    margin: 0;
}

.bonsai-searchform #bonsai_q:focus {
    outline: var(--color-brand);
}

.bonsai-searchform .bonsai-searchbutton {
    right: 0.5rem;
}

.navbar {
    z-index: 990;
    background-color: #0000;
    width: 100%;
    position: fixed
}

.w-nav {
    z-index: 1000;
    position: relative
}

.w-nav:after {
    clear: both
}

.navbar > nav.container-nav.w-container {
    display: flex;
    justify-content: space-between;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto
}

.navbar > nav.container-nav.container-nav {
    z-index: 993;
    max-width: var(--body-measure);
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative
}

.nav-bg, .nav-bg > center-l {
    will-change: background;
    background-color: rgb(13, 56, 61);
}

.navbar > nav.container-nav .w-nav-brand {
    float: left;
    color: #333;
    text-decoration: none;
    position: relative
}

.navbar > nav.container-nav .logo-embed {
    color: var(--color-brand-light);
    display: flex;
    align-items: center;
    height: 100%;
    align-self: center;
}

.navbar .w-embed:before, .w-embed:after {
    content: " ";
    grid-area: 1/1/2/2;
    display: table
}

.navbar .w-embed:after {
    clear: both
}

.navbar > nav.container-nav .descriptive-text {
    color: #0000;
    font-size: 2px;
    line-height: 1;
    position: absolute
}

.navbar > nav.container-nav .nav-menu {
    background-color: var(--color-transparent);
    align-items: center;
    display: flex
}

.navbar > nav.container-nav .w-nav-menu {
    /*float: right;*/
    position: relative
}

[data-nav-menu-open] {
    background: #c8c8c8;
    min-width: 200px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: visible;
    display: block !important
}

.navbar > nav.container-nav .w-nav[data-collapse=all] .w-nav-menu {
    display: none
}

nav.nav-menu .nav-menu-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.nav-link-wrap {
    position: relative;
}

.navbar > nav.container-nav .w-nav-link {
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    text-decoration: none;
    display: inline-block;
    position: relative
}

nav .w-nav-link.w--current {
    color: #0082f3
}

nav .link-nav {
    color: var(--color-lightish);
    cursor: pointer;
    letter-spacing: 0.0333em;
    font-size: 16px;
    font-weight: 500;
    line-height: 14px;
    display: block
}

nav .link-nav:hover {
    color: var(--color-brand-light);
    text-decoration: none
}

nav .link-nav.w--current {
    color: var(--color-brand-dark)
}

nav .link-nav.dd {
    grid-column-gap: 4px;
    flex-direction: row;
    margin-left: 0;
    padding-right: 12px;
    display: flex
}

nav .w-dropdown {
    text-align: left;
    z-index: 900;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: relative
}


nav .w-dropdown.w--open {
    z-index: 901;
}

nav .link-nav-dark-bg.dd {
    grid-column-gap: 4px;
    margin-left: 0;
    display: flex
}

nav .w-dropdown-btn, .navbar > nav.container-nav .w-dropdown-toggle, nav .w-dropdown-link {
    vertical-align: top;
    color: var(--color-lightish);
    text-align: left;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    padding: 12px;
    position: relative
}

nav .w-dropdown-btn, .navbar > nav.container-nav .w-dropdown-toggle:hover {
    color: var(--color-brand-light);
}

.nav .w-dropdown-toggle {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    display: inline-block
}

nav .w-dropdown-toggle:focus {
    outline: 0
}

nav .dd-icon {
    object-fit: cover;
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: 0
}

nav .w-dropdown-list {
    min-width: 100%;
    display: none;
    position: absolute
}

nav .w-dropdown-list.w--open {
    display: block
}

nav .resources-dropdown {
    background-color: rgb(13, 56, 61);
}

nav .dd-link {
    color: white;
    cursor: pointer;
    font-weight: 550;
    transition: all .2s ease-in-out;
    font-size: 14px;
}

nav .dd-link:hover {
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark);
    text-decoration: none
}

nav .dd-link.w--current {
    background-color: var(--color-dark);
    color: var(--color-brand-light)
}

nav .dd-link.w--current:hover {
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark)
}

nav .w-dropdown-link {
    display: block
}

nav .w-dropdown-link.w--current {
    color: white;
}

nav .w-dropdown-link:focus {
    outline: 0
}

.navbar > nav.container-nav .nav-link-wrap.nav-search-container {
    flex: 0 auto;
    align-items: center;
    display: flex
}

.navbar > nav.container-nav .btn-login:hover {
    color: var(--color-brand-dark)
}

.navbar > nav.container-nav .btn-login.dark-bg {
    color: white
}

.navbar > nav.container-nav .btn-login.dark-bg:hover {
    text-decoration: underline
}

.navbar > nav.container-nav .w-button {
    color: #fff;
    line-height: inherit;
    cursor: pointer;
    background-color: #3898ec;
    border: 0;
    border-radius: 0;
    padding: 9px 15px;
    text-decoration: none;
    display: inline-block
}

.navbar > nav.container-nav input.w-button {
    -webkit-appearance: button
}

.navbar > nav.container-nav .btn-login {
    color: var(--color-brand-dark);
    cursor: pointer;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    margin-left: 5vw;
    margin-right: 30px;
    padding: 5px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px
}

.navbar > nav.container-nav .btn {
    border: 1.5px solid var(--color-brand-light);
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark);
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 11px 18px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    transition: all .2s ease-in-out
}

.navbar > nav.container-nav .btn:hover {
    border-color: var(--color-brand-secondary);
    background-color: var(--color-brand-secondary);
    color: var(--color-brand-dark);
    text-decoration: none
}

.navbar > nav.container-nav .btn.nav {
    margin-left: 16px;
    padding: 13px 20px 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px
}

.navbar > nav.container-nav .btn.margin-auto {
    margin-left: auto;
    margin-right: auto;
    display: inline-block
}

.navbar > nav.container-nav .btn.code-copy-button {
    color: var(--color-brand-dark);
    background-color: #fffc;
    border-style: none;
    border-radius: 4px;
    flex: none;
    padding: 6px;
    position: absolute;
    inset: 18px 18px auto auto
}

.navbar > nav.container-nav .menu-btn, .menu-btn.w--open {
    background-color: var(--color-transparent);
    padding-left: 0;
    padding-right: 0
}

.navbar > nav.container-nav .w-nav-button {
    float: right;
    cursor: pointer;
    -webkit-tap-highlight-color: #0000;
    tap-highlight-color: #0000;
    -webkit-user-select: none;
    user-select: none;
    padding: 18px;
    font-size: 24px;
    display: none;
    position: relative
}

.navbar > nav.container-nav .w-nav-button:focus {
    outline: 0
}

.navbar > nav.container-nav .w-nav-button.w--open {
    color: #fff;
}

.navbar > nav.container-nav .w-nav[data-collapse=all] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
    display: block
}

.navbar > nav.container-nav .menu-lines {
    background-color: var(--color-transparent)
}

.navbar > nav.container-nav .menu-bot-line-light,
.navbar > nav.container-nav .menu-mid-line-light,
.navbar > nav.container-nav .menu-top-line-light {
    background-color: var(--color-brand-dark);
    position: absolute;
    width: 40px;
    margin-inline: auto;
    height: 2px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(0);
    transition: all 0.5s
}

.navbar > nav.container-nav .menu-mid-line-light {
    transform: translateY(1rem);
}

.navbar > nav.container-nav .menu-bot-line-light {
    transform: translateY(2rem);
}

.navbar > nav.container-nav .nav-shadow-light {
    opacity: 0;
    width: 100%;
    position: absolute;
    inset: 0%;
    box-shadow: 0 1px 3px #0000004d
}

.navbar .w-nav-overlay {
    width: 100%;
    display: none;
    position: absolute;
    margin-top: -0.25rem;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden
}

.navbar .w-nav-overlay [data-nav-menu-open] {
    top: 0
}

.navbar.w-nav[data-animation=over-left] .w-nav-overlay {
    width: auto
}

.navbar.w-nav[data-animation=over-left] .w-nav-overlay, .w-nav[data-animation=over-left] [data-nav-menu-open] {
    z-index: 1;
    top: 0;
    right: auto
}

.navbar.w-nav[data-animation=over-right] .w-nav-overlay {
    width: auto
}

.navbar.w-nav[data-animation=over-right] .w-nav-overlay, .w-nav[data-animation=over-right] [data-nav-menu-open] {
    z-index: 1;
    top: 0;
    left: auto
}

@media screen and (min-width: 1280px) {
    .navbar > nav.container-nav .nav-menu {
        background-color: rgba(255, 0, 0, 0) !important;
    }
}

@media screen and (max-width: 1279px) {
    nav .w-dropdown-link {
        padding: 1.25rem;
    }

    nav .w-dropdown-toggle[aria-expanded="true"] {
    }

    nav .w-dropdown-list {
        top: 0;
        margin-left: 8rem;
        border-radius: var(--border-radius);
        border: solid var(--color-brand-light) var(--border-thin);
    }

    nav .w-dropdown-link {
        padding: 0.8rem;
    }

    .navbar > nav.container-nav .brand {
        margin-top: 0.33rem;
    }

    .navbar.w-nav[data-collapse="medium"] .w-nav-menu {
        display: none;
    }

    .navbar.w-nav[data-collapse="medium"] .w-nav-button {
        display: block;
    }

    .navbar > nav.container-nav .w--open {
        transform: rotate(90deg);
    }

    .navbar > nav.container-nav .w--open .menu-top-line-light {
        transform-origin: 50% 50%;
        transform: rotate(45deg) translateY(6px) translateX(6px);
        top: 1rem;
    }

    .navbar > nav.container-nav .w--open .menu-mid-line-light {
        display: none;
    }

    .navbar > nav.container-nav .w--open .menu-bot-line-light {
        transform-origin: 50% 50%;
        transform: rotate(-45deg) translateY(6px) translateX(-6px);
        top: 1rem;
    }

    .navbar > nav.container-nav .menu-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        display: block;
        text-align: center;
    }

    .navbar > nav.container-nav .menu-lines {
        cursor: pointer;
        position: relative;
        width: 40px;
        height: 40px;
        transition: all 0.5s
    }

    nav.nav-menu .nav-menu-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar .w-nav-overlay > nav.nav-menu {
        background-color: #f5f8fa;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 20px 20px;
        display: flex;
    }

    .navbar .nav-menu-wrapper .btn-login {
        margin-bottom: 20px;
    }

    .navbar .nav-menu-wrapper .nav-link-wrap {
        margin-bottom: 1.25rem;
    }

    .navbar > nav.container-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media screen and (max-width: 991px) {
    .brand {
        margin-top: 0.25rem;
    }

    .navbar > nav.container-nav .menu-mid-line-light {
        transform: translateY(0.5rem);
    }

    .navbar > nav.container-nav .menu-bot-line-light {
        transform: translateY(1rem);
    }

    .navbar {
        z-index: 993
    }

    .navbar > nav.container-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar > nav.container-nav.w-container {
    }

    .navbar > nav.container-nav .brand {
        margin-top: 0.33rem;
    }

    .navbar.w-nav .w-nav-overlay > nav.nav-menu {
        background-color: var(--color-light-grey);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 20px 20px;
        display: flex
    }

    .w-nav[data-collapse=medium] > nav.w-nav-menu {
        display: none
    }

    .navbar > nav.nav-menu .nav-menu-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar > nav.nav-menu .nav-link-wrap {
        margin-left: 0;
    }

    .navbar > nav.nav-menu .link-nav {
        margin-top: 10px;
        margin-left: 0;
    }

    .navbar > nav.nav-menu .dropdown {
        margin-left: 0
    }

    .navbar > nav.nav-menu .link-nav-dark-bg.dd {
        white-space: nowrap
    }

    .navbar > nav.nav-menu .dd-icon {
        flex: none;
        margin-top: 0
    }

    .navbar > nav.nav-menu .resources-dropdown.w--open {
        background-color: #0000;
        position: static
    }

    .navbar > nav.nav-menu .dd-link {
        color: var(--color-brand-light);
        background-color: #0000;
        margin-left: 20px;
        padding: 10px 0
    }

    .navbar > nav.nav-menu .dd-link:hover {
        background-color: #0000
    }

    .navbar > nav.nav-menu .dd-link.w--current {
        color: var(--color-brand-dark);
        background-color: #0000;
        font-weight: 600
    }

    .navbar > nav.nav-menu .dd-link.w--current:hover {
        background-color: #0000
    }

    .navbar > nav.nav-menu .nav-link-wrap {
        margin-left: 0
    }

    .navbar > nav.nav-menu .btn-login {
        margin: 10px auto 10px 0
    }

    .navbar > nav.nav-menu .btn.nav {
        margin-top: 10px;
        margin-left: 0;
        margin-right: auto
    }

    .navbar > nav.container-nav .menu-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        text-align: center;
    }

    .navbar > nav.container-nav .menu-btn.w--open {
        background-color: #0000
    }

    .navbar > nav.container-nav .w-nav[data-collapse=medium] .w-nav-button {
        display: block
    }

    .navbar > nav.container-nav .menu-lines {
        cursor: pointer;
        position: relative;
        width: 40px;
        height: 40px;
        transition: all 0.5s
    }

    .navbar > nav.container-nav .menu-top-line-light {
        background-color: var(--color-brand-dark);
        border-radius: 2px;
        width: 40px;
        height: 3px;
        padding-bottom: 0;
        padding-right: 0;
        position: relative
    }

    .navbar > nav.container-nav .menu-mid-line-light {
        background-color: var(--color-brand-dark);
        border-radius: 2px;
        width: 40px;
        height: 3px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-bottom: 0;
        padding-right: 0;
        position: relative
    }

    .navbar > nav.container-nav .menu-bot-line-light {
        background-color: var(--color-brand-dark);
        border-radius: 2px;
        width: 40px;
        height: 3px;
        padding-bottom: 0;
        padding-right: 0;
        position: relative
    }

}

@media screen and (max-width: 767px) {
    .navbar > nav.container-nav, .navbar > nav.container-nav .nav-menu {
        padding-left: 40px;
        padding-right: 40px
    }

    .navbar > nav.container-nav .brand {
        padding-left: 0
    }

    .navbar > nav.container-nav .w-nav-brand {
        padding-left: 10px
    }

    .navbar > nav.container-nav, .navbar > nav.container-nav .nav-menu {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar.w-nav[data-collapse=small] .w-nav-menu {
        display: none
    }

    .navbar.w-nav[data-collapse=small] .w-nav-button {
        display: block
    }

}

@media screen and (max-width: 479px) {

    .navbar.w-nav .w-nav-overlay > nav.nav-menu {
        background-color: var(--color-light-grey);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px 40px 20px;
        display: flex
    }

    .navbar > nav.container-nav, .nav-menu {
        padding-left: 24px;
        padding-right: 24px
    }

    .navbar > nav.container-nav.w-container {
        max-width: none
    }

    .navbar > nav.container-nav .brand {
        width: auto;
        height: 30px
    }

    .navbar > nav.container-nav, .navbar > nav.container-nav .nav-menu {
        padding-left: 24px;
        padding-right: 24px
    }

    .navbar.w-nav[data-collapse=tiny] .w-nav-menu {
        display: none
    }

    .navbar > nav.container-nav .menu-btn {
        margin-top: -4px
    }

    .navbar.w-nav[data-collapse=tiny] .w-nav-button {
        display: block
    }
}