:root {
    --contentWidth: 81.5vw;
    
    --primary-bg-color: #20252B;
    --primary-fg-color: #ffffff;
    --secondary-fg-color: #B9BEC6;
}

* {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

body {
    background-color: var(--primary-bg-color);
    
    font-family: Inter;
    color: var(--primary-fg-color);
}

main {
    width: var(--contentWidth);

    margin:0 auto;
}

.disabled-link {
    pointer-events: none;
}

.hidden {
  display: none;
}

.mumbleserver {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.channel {
    margin: 10px 0;
}

.channelheader {
    color: var(--secondary-fg-color);
    fill: var(--secondary-fg-color);
    
    user-select: none;
    cursor: pointer;
}

.channelheader:hover {
    color: var(--primary-fg-color);
    fill: var(--primary-fg-color);
}

.icon {
    vertical-align: middle;
}

.channelname {
    vertical-align: middle;
    
    color: inherit;
    text-decoration: none;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.childlist {
  list-style-type: none;
  
  padding-left: 25px;
}

.user {
    margin: 4px 0;
}

.username {
    vertical-align: middle;
    
    color: var(--secondary-fg-color);
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.muteIconContainer, .deafIconContainer {
    fill: var(--secondary-fg-color);
    
    float: right;
}

@media screen and (max-width:1000px) {
    
    main {
        width: 100%;
    }

}