/* --- Navbar --- */
.nav-link-jay,
.nav-link-jay:link,
.nav-link-jay:visited {
    color: var(--color-jay-dark);
    font-size: 1.1rem;
}

.nav-link-jay:hover,
.nav-link-jay:focus,
.nav-link-jay:focus-visible,
.nav-link-jay:active {
    color: var(--color-jay-dark-50);
    font-size: 1.1rem;
}

.navbar-nav .nav-link-jay.active {
    color: var(--color-jay-dark-50);
    font-size: 1.1rem;
    font-weight: 600;
}

.navbar-nav .nav-link-jay {
    padding-left: 1rem!important;
    padding-right: 1rem!important;
}


/* --- Canvas --- */
.offcanvas.offcanvas-end {
    width: 300px;
    border-radius: .75rem 0 0 .75rem;
    border-color: var(--color-jay-dark);
}

.offcanvas .offcanvas-body ul {
    list-style-type: none;
}
    
.offcanvas .offcanvas-body ul li a:hover,
.offcanvas .offcanvas-body ul li a:focus,
.offcanvas .offcanvas-body ul li a:focus-visible,
.offcanvas .offcanvas-body ul li a:focus-within,
.offcanvas .offcanvas-body ul li a:active,
.offcanvas .offcanvas-body ul li a:target {
    background-color: var(--color-jay-light);
    border-radius: .5rem;
}

.offcanvas .offcanvas-body ul hr {
    border-color: var(--color-jay-dark);
    color: var(--color-jay-dark);
    opacity: .5;
}


/* --- Accordion --- */
.accordion-button:not(.collapsed) {
    background-color: var(--color-jay-light);
    border-bottom: 1px solid var(--color-jay-dark);
    color: var(--color-jay-dark-50);
}

.accordion-button {
    padding: .25rem 1rem;
    min-height: calc(1.5 * 1.5rem + 2 * .25rem + 1px)
}

.accordion-item {
    border: 1px solid var(--color-jay-dark);
}

/* --- Card --- */
.card-jay {
    border: 1px solid var(--color-jay-dark);
}

.card-jay > .card-header {
    background-color: var(--color-jay-light);
    border-bottom: 1px solid var(--color-jay-dark);
    padding: .25rem 1rem;
    display: flex;
    align-items: center;
    min-height: calc(1.5 * 1.5rem + 2 * .25rem + 1px)
}

.card-jay > .card-header > h2 {
    margin: 0;
}

.card-jay > .card-body {
    padding: 0 1rem;
}

.card-jay > .card-header-icon > i {
    margin-right: .5rem;
    font-size: 1.5rem;
}

.card-jay > .card-header-only {
    border-bottom: 0!important;
    border-bottom-left-radius: 6px!important;
    border-bottom-right-radius: 6px!important;
}

.card-body-list > ul > li {
    padding: .25rem .5rem;
}

@media (max-width: calc(992px - 1px)) {
    .card-aside {
        margin-top: 2rem;
    }
}

@media (min-width: 992px) {
    .h-100-lg {
        height: 100%;
    }
}