.sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
}

.bg-sidebr {
    position: relative;
    background-color: #87B988;
    height: 100%;
}

.bg-sidebr::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 0;
    background-image: url('../images/bg-sidbar.svg');
    height: 100%;
    background-size: cover;
}

.bg-sidebr .items {
    position: relative;
    z-index: 10;
}

.bg-sidebr .title p {
    font-size: 25px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

.link-sidebar {
    border-radius: 0 100vw 100vw 0;
}

.link-sidebar.active {
    position: relative;
    color: #87B988 !important;
    background-color: #fff !important;
    padding-right: 1rem !important;
}

.link-sidebar.active::before,
.link-sidebar.active::after {
    --border-radius: 2rem;
    content: "";
    position: absolute;
    left: 0;
    width: var(--border-radius);
    height: var(--border-radius);
    border-radius: 100vw;
    background-color: #87B988;
}


.link-sidebar.active::after {
    bottom: calc(var(--border-radius) * -1);
    border-radius: 100vw 0 0vw 0;
    box-shadow: -10px -10px 0px 10px #fff;
}

.link-sidebar.active::before {
    top: calc(var(--border-radius) * -1);
    border-radius: 0 0vw 0vw 100vw;
    box-shadow: -10px 10px 0px 10px white;
}

.link-sidebar .image-active {
    display: none;
}

.link-sidebar.active .image-active {
    display: block;
}

.link-sidebar.active .image-defalt {
    display: none;
}