﻿.cpb-menu {
    background-color: var(--cpb-header);
    position: fixed;
    top:0;
    width: 372px;
    color: var(--cpb-background);
    font-weight: 500;
    height: 100%;
    transition: 125ms;
    transition-delay:250ms;
    overflow:clip;
    z-index:1045;
}
    .cpb-menu * {
        transition: 0ms;
    }
    .cpb-menu.closed {
        width:34px;
    }
    .cpb-menu.pinned, .cpb-menu:hover {
        width: 260px;
    }
    .cpb-menu .navbar-brand {
        background-color:#fff;
        display:inline-block;
        height:28px;
        width:28px;
        border-radius:14px;
        padding:0 1px 1px 1px;
        margin-top: 4px;
    }
    .cpb-menu img {
        height: 26px;
        width: 26px;
    }

    .cm-toggler {
        cursor: pointer;
        display: inline-block;
    }
.menu-pin {
    display:inline-block;
    transform:rotate(45deg);
    right:0.125em;
    cursor:pointer;
}
    .menu-pin:hover {
        color: rgba(0,0,0,0.6);
    }
    .cpb-menu.pinned .menu-pin {
        color: rgba(0,0,0,0.6);
        transform: rotate(0);
    }
.cpb-menu.pinned .menu-pin:hover {
    color: unset;
}
#cpb-main {
    padding-left: 48px;
}
.cpb-menu.pinned + #cpb-main {
    padding-left: 272px;
}
.cpb-menu a {
    padding: 0.25em;
    color: var(--cpb-background);
    text-decoration: none;
    display:block;
    font-weight:400;
}

.cpb-menu li {
    text-wrap: nowrap;
}

    .cpb-menu li:hover, a.dropdown-item:hover {
        background-color: rgba(0,0,0,.35);
        color: var(--cpb-background);
    }

.cpb-menu .accordion-item, .cpb-menu .accordion-button {
    background: none;
    border:none;
    color:var(--cpb-background2);
}
.cpb-menu ul {
    list-style-type: none;
    margin-left: 2em;
    background: none;
    padding: 0;
    border: none;
    height: 100%;
}
.cpb-menu > ul {
    margin: 0;
}
    .cpb-menu ul.show {
        float: none;
        display: block;
    }
    .cpb-menu button {
        padding: 0.25em;
    }
.menu-active{
    width:100%;
    display:inline-block;
}
.menu-active::after {
    content:'\F231';
    font-family:bootstrap-icons;
    position:relative;
    float:right;
    left:-0.75em;
    display:inline-block;
}