/*************** SIDEBAR ********************/

.player.sidebar {
    width:1630px;
}
.player.sidebar > .poster,
.player.sidebar > .video {
    right:360px;
    transition: bottom .5s;
}
.player.sidebar > .side {
    position:absolute;
    left:auto;
    top:10px;
    right:10px;
    bottom:10px;
    width:340px;
}

/*************** CHAT ********************/
.side > ul {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:48px;
    margin:0;
    padding:0;
    white-space:nowrap;
}
.side.nomenu > ul {
    display:none;
}
.side > ul li:after {
    position: absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background-color:var(--highlight);
    opacity:0;
    transition:opacity .5s;
    content: "";
}
.side > ul li.selected:after {
    opacity:1;
}
.side > ul li.selected a {
    background-color:var(--highlight-background);
}
.side > ul li {
    position:relative;
    display:inline-block;
    height:49px;
    margin-right:2px;
    padding:0;
    background:rgba(0,0,0,.4);
}
.side > ul li:last-child {
    border-right:0;
}
.side > ul a {
    position:relative;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:#ccc;
    cursor:pointer;
    transition:background-color .5s;
}
.side > ul a:hover {
    background:var(--highlight-background);
}
.side > ul a:before {
    width:20px;
    height:20px;
    line-height:20px;
    font-size:20px;
    text-shadow: 1px 1px #000;
}

.side > div {
    position:absolute;
    top:50px;
    right:0;
    left:0;
    bottom:0;
    font-size:13px;
    color:#999;
    overflow:hidden;
    background:rgba(0,0,0,.4);
}
.side.nomenu > div {
    top:0;
}

.side > div > * {
    position: absolute;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    pointer-events:none;
    visibility:hidden;
}
.side > div > div.selected {
    left:0;
    pointer-events:inherit;
}
.side > div > .left {
    left:-100%;
}
.side > div > .visible {
    visibility:visible;
    transition:left .25s;
}
body:not(.safari) .player .chat {
    display:grid;
    grid-template-rows:1fr auto;
}
body:not(.safari) .player .chat > div:first-child {
    position: relative;
}
.safari .player .chat  > div:first-child {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:108px;
}
.safari .player .chat  > div:last-child {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
}
.player .chat > div:last-child {
    padding: 10px;
}

.player .chat .comments {
    position:absolute;
    top:10px;
    left:0;
    right:0;
    bottom:0;
    line-height:19px;
    overflow:hidden;
    -webkit-overflow-scrolling: touch;
}
.player .chat .scroll {
    transition:filter 1s;
}
.player .chat .scroll.blur {
    filter:blur(5px);
    pointer-events: none;
}
.player .chat [contenteditable="true"] {
    width:auto;
    box-sizing:border-box;
    resize:none;
    font-size:13px;
    line-height:18px;
    color:#ccc;
    margin:0 0 10px 0;
    overflow:hidden;
}
.player .chat .empty::before {
    content : "Send a message...";
    color   : #777;
    pointer-events: none;
}
.player .chat a {
    margin:2px;
    padding:8px 12px;
    font-size:13px;
}

.player .chat a.emoji {
    padding:0;
    border:3px solid var(--highlight);
    width:25px;
    height:25px;
}
.comments.questions-only .msg:not(.question) {
    display:none;
}

.comments .msg {
    margin: 1px 7px;
    padding: 8px;
    border-radius: 5px;
    position: relative;
}
.comments .msg.question:last-child {
    margin-bottom:5px;
}
.comments .msg span {
    font-weight:bold;
}
.comments .msg.question {
    background: var(--highlight-background);
}
.chat b .icon {
    display:inline-block;
    width:16px;
    height:16px;
    background-size:contain;
    vertical-align: top;
    margin: 1px 5px 2px 0;
}
.chat b .icon.staff {
    background-image: url(../img/push.png);
}
.chat b .icon.mod {
    background-image: url(../img/mod.png);
}

.chat .checkbox  {
    display: inline-block;
    padding: 8px 2px;
    margin: 2px;
    height: 16px;
    line-height: 16px;
}

.chat .checkbox > * {
    vertical-align: text-bottom;
}

/************* MODERATOR OPTIONS *********************/

.moderator .msg:hover {
    background-color: #211;
}
.player .chat .msg a {
    position: absolute;
    width:16px;
    height:16px;
    border-radius:5px;
    padding:4px;
    top:3px;
    right:2px;
    font-weight:normal;
    border:1px solid #000;
    box-shadow: 0 0 2px rgba(0,0,0,.5);
}

.player .chat .msg a:nth-last-child(2) {
    right:30px;
}

.bannedUser {
    background-color: #313030;
}