:root
{
    --bs-primary: #4146a3;
    --bs-light-primary:#B8BADD;
    --bs-lighter-primary: #E7E8F4;
    --bs-secondary: #48465b;
    --bs-success: #26d49b;
    --bs-info: #8A00FF;
    --bs-warning: #ffac2f;
    --bs-danger: #e65b5e;
    --bs-light: #f1f5fc;
    --bs-dark: #272C99;
    --bs-white: #fff;

    --bs-primary-rgb: 65, 70, 163;
    --bs-light-primary-rgb:184, 186, 221;
    --bs-lighter-primary-rgb: 231, 232, 244;
    --bs-secondary-rgb: 72, 70, 91;
    --bs-success-rgb: 38, 212, 155;
    --bs-info-rgb: 138, 0, 255;
    --bs-warning-rgb: 255, 172, 47;
    --bs-danger-rgb: 230, 91, 94;
    --bs-light-rgb: 241, 245, 252;
    --bs-dark-rgb: 39, 44, 153;
}

.container-sidebar
{
    position: relative;
    width: 100%;
}

.navigation
{
    position: fixed;
    width: 250px;
    height: 100%;
    background: var(--bs-primary);
    border-left: 10px solid var(--bs-primary);
    transition: 0.5s;
    overflow: hidden;
}

.navigation.active
{
    width: 80px;
}

.navigation ul
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}

.navigation ul li
{
    position: relative;
    width: 100%;
    list-style: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.navigation ul li:hover,
.navigation ul li.clicked
{
    background: var(--bs-white);
}

.navigation ul li:hover a,
.navigation ul li.clicked a
{
    color: var(--bs-primary);
}

.navigation ul li:nth-child(1)
{
    margin-top: 20px;
    margin-bottom: 20px;
    pointer-events: none;
}

.navigation ul li a
{
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: var(--bs-white);
}

.navigation ul li a .icon
{
    position: relative;
    display: block;
    min-width: 60px;
    height:60px;
    line-height: 60px;
    text-align: center;
}

.navigation ul li a .icon img
{
    max-width: 100%;
    max-height: 85%;
    padding-right: 5px;
    justify-content: center !important;
    align-items: center !important;
}

.navigation ul li a .icon i
{
    font-size: 1.75em;

}

.navigation ul li a .title
{
    position: relative;
    display: block;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
}

/* curve outside */
.navigation ul li:hover a::before,
.navigation ul li.clicked a::before
{
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height:50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px 35px 0 10px var(--bs-white);
    pointer-events: none;
}

.navigation ul li:hover a::after,
.navigation ul li.clicked  a::after
{
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height:50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px -35px 0 10px var(--bs-white);
    pointer-events: none;
}

.main
{
    position: absolute;
    width: calc(100% - 260px);
    left: 250px;
    height: calc(100vh - 20px); 
    background: var(--bs-white);
    transition: 0.5s;
    margin: 10px 10px 10px 0; 
}

.main.active
{
    position: absolute;
    width: calc(100% - 90px);
    left: 80px;
    margin: 10px 10px 10px 0; 
}

.toggle
{
    width: 60px;
    height: 60px;
    font-size: 2.5em;
    border-radius : 50px;
}

.search
{
    position: relative;
    width: 100%;
    padding: 0 30px;
}

.search input
{
    border-radius : 40px;
}

.user
{
    width: 40px;
    height: 40px;
}

.user img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width:991px)
{
    .navigation
    {
        left: -300px;
    }

    .navigation.active
    {
        width: 300px;
        left: 0;
    }
    
    .main
    {
        width: 100%;
        left: 0;
    }

    .main.active
    {
        left:300px
    }
}