.header_button{display:inline-block;width:50px;height:40px;text-align:center;font-size:32px;line-height:40px;border-radius:10px;background-color:#fff;margin-bottom:8px;margin-right:8px}.header_button.active{background-color:gray}.header_button .badge:empty{display:none}.header_button .badge{position:absolute;background-color:#e65050;color:#fff;border-radius:7px;font-size:14px;min-width:14px;line-height:normal;padding:2px;transform:translate(calc(8px - 100%),-5px)}.notification{display:none;font-size:22px;border:1px grey solid;border-radius:5px;padding:10px;background-color:#fff;margin:10px}.notification.highlight{display:block}.notification.error{background-color:#f08080}#notification_tray{position:absolute;bottom:0}#player:not(.preview){display:none}#player.preview audio{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#preview_background{position:absolute;top:0;bottom:0;width:100%;height:100%;background-color:#000a}.user_name{font-weight:700}.pronouns{color:gray;font-size:.8em}.pronouns:before{content:" ("}.pronouns:after{content:")"}.channel{padding-left:4px;border-left:2px solid lightgrey;margin:4px 0;cursor:pointer;text-overflow:ellipsis;overflow:hidden;text-wrap:nowrap}.channel:hover,.channel.current{background-color:#f0f0f0}.channel .name{font-size:18px}.channel .artist{display:inline;color:gray}.header_text_input{position:sticky;top:0;width:100%}.header_text_input.bottom{bottom:0}.header_text_input input{display:block;width:min(512px,100% - 20px);height:28px;margin:0 auto 10px;padding:2px 8px}.header_text_input.bottom input{margin:10px auto 0}#channels{max-width:512px;margin:auto}.track{padding-left:4px;border-left:2px solid lightgrey;margin:4px 0}.track:hover{background-color:#f0f0f0}.track .left{width:calc(100% - 85px);text-overflow:ellipsis;overflow:hidden;text-wrap:nowrap}:not(.post)>.track .left{line-height:38px}.track .right{float:right;text-align:right}.track .artist{display:inline;color:gray}.track .album{display:inline;color:gray;font-style:italic}#tracks{max-width:512px;margin:auto}.post.past{opacity:.5}.post.obsolete{display:none}.post.current .track{background-color:transparent!important}#app:not(.mobile) #queue{width:30%;min-width:400px;max-width:512px;margin:0 auto;overflow-y:scroll;padding:10px}#queue.dragging{background-color:#f0f0f0;position:relative}#queue.dragging .drag_icon{font-size:100px;display:block;position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%);transform-origin:center}#queue:not(.dragging) .drag_icon{display:none}#queue.dragging :not(.drag_icon){display:none}.file_input{background-color:#f0f0f0;display:block;cursor:pointer;padding-bottom:8px;border-left:2px solid lightgrey;margin:4px 0;text-align:center;font-size:30px;line-height:30px}.file_input input{display:none}.message{border-left:2px solid lightgray;padding-left:4px;margin:4px 0}.message .user_name{font-weight:700}.message .pronouns{color:gray;font-size:.8em}.message .pronouns:before{content:" ("}.message .pronouns:after{content:")"}#messages,#settings{max-width:512px;margin:auto}.category title{display:inline-block;font-weight:700;text-transform:capitalize;margin-bottom:10px}.setting input{width:calc(70% - 10px);height:20px}.setting label{display:inline-block;width:calc(30% - 20px);padding:10px;text-transform:capitalize}body{margin:0;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column}#header{background-color:#d3d3d3;padding-top:8px;padding-left:8px}#channel_header{font-size:32px;line-height:40px}#app.mobile #channel_header{display:block}#app:not(.mobile) #channel_header{float:right;width:30%;min-width:400px;max-width:512px;padding:0 10px}#channel_header>*{display:inline-block;text-align:center;vertical-align:top;background-color:#fff;min-width:50px;height:40px;border-radius:10px;margin-bottom:8px;margin-right:8px}#channel_header>*:first-child{font-size:24px;padding:0 8px}a{cursor:pointer}#content{display:flex;overflow:hidden;flex-direction:row;height:100%}#main{overflow:hidden;overflow-y:scroll;flex:1 1 auto;padding:10px}