src/pages/Home_serverId_channel/Home_serverId_channel.scss
.main{
    &__sidebar{
        flex:0 0 16.45%;
        // min-width: 23.9rem;
        background-color: #2C2F33;
        color: #fff;
        display: flex;
        flex-direction: column;
        &-header{
            display: flex;
            align-items: center;
            padding: .58rem 1.5rem .58rem 2.25rem;
            font-size: 1.7rem;
            border-bottom: 1px solid #23272a;
        }
       
    }
    &__channels{
        color:gray;
        &-header{
            display: flex;
            align-items: center;
            padding: 1.4rem 1.2rem .4rem .5rem;
            font-family: 'Whitney-medium';
            letter-spacing: .03rem;          
        }
        &-expand{
           width: .6rem;
           height: .6rem;
           margin-right: .5rem;
           display: inline-block;
           color:#8e9297;
        }
        &-text{
            font-size: 1.3rem;
        }
        &-addicon{
            margin-left: auto;
            cursor: pointer;
        }
    }
    &__voice{
        margin-top: auto;
        border-bottom:1px solid #35383d;
    }
    
}

.chat{
    flex: 0 1 67%;
    background-color: #35383d;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x:hidden;
    &__message{
        flex-direction: column-reverse;
        overflow: auto;
        display: flex;
        padding-bottom: 1rem;
        &::-webkit-scrollbar {
            width: 10px;
          }
        &::-webkit-scrollbar-track {
            background: #2e3338;
            background-clip: content-box;
            }
        &::-webkit-scrollbar-thumb {
            background: #202225;
            height:1rem;
            }          
    }
    &__searchbar{
        margin-top: auto;
    }
}

.main__roles{
    flex:1;
    background-color: #303136;
}