.footerlinks{
    color:blueviolet;
    text-decoration:none;
}

.footerlinks:hover{
    color:aqua;
}


#footer1{
    background:border-box;
    color:brown;

}

*{

    margin:0;
    padding:0;
    border:none;
    outline:none;
    box-sizing:border-box;
    font-family:'Arial Unicode MS';

}

body{

    display:inline-flex;


}

.sidebar{

    position:sticky;
    top:20px;
    left:20px;
    bottom:20px;
    width:212px;
    height:100vh;
    padding:0 1.7rem;
    color:#fff;
    overflow:hidden;
    transition:all 0.1s linear;
    background:rgba(113,99,186,255);
    
}

.sidebar hover{
    width:240px;
    transition:0.5s;
}
.logo{

    height:80px;
    padding:16px;

}

.menu{

    height:88%;
    position:relative;
    list-style:none;
    padding:0;


}


.menu li{

    padding:1rem;
    margin:8px 0;
    border-radius:8px;
    transition:all 0.5s ease-in-out;

}


.menu li:hover .active{

    background:#e0e0e058;
}


.menu a{

    color:#fff;
    font-size:14px;
    text-decoration:none;
    display:flex;
    align-items:center;
    column-gap:1.5rem;

}

.menu a span{

    overflow:hidden;

}

.menu a i{

    font-size:1.2rem;

}

.main-content{

    position:relative;
    background:#ebe9e9;
    width:100%;
    padding:1rem;
}

.header-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    /*flex-wrap:wrap;*/
    background:#fff;
    border-radius:10px;
    padding:2px 2rem;
    margin-bottom:1rem;

}

.header-title{

    color:rgba(113,99,186,255);
}

.user-info{

    display:flex;
    align-items:center;
    column-gap:1rem;
}

.search-box{
    background:rgb(237,237,237);
    border-radius:15px;
    color:rgba(113,99,186,255);
    display:flex;
    align-items:center;
    column-gap:5px;
    padding:4px 12px;
}

.search-box input{

    background:transparent;
    padding:10px;

}

.search-box i{
    font-size:1.2rem;
    cursor:pointer;
    transition:all 0.5s ease-out;
}

.search-box i:hover{

    transform:scale(1.2);
}