.sidebar{display:none;color:var(--bg-font-clear);background:var(--sidebar-overlay);position:fixed;left:0;top:0;right:0;bottom:0;z-index:21;overflow:hidden}.sidebar__content{position:absolute;background:var(--bg-light-accent);height:100%;width:80%;max-width:320px;overflow-y:auto;right:0;box-shadow:-5px 0 5px 0 rgba(0,0,0,0.75);-webkit-box-shadow:-5px 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:-5px 0 5px 0 rgba(0,0,0,0.2)}.sidebar hr{height:1px;border:none;background:var(--bg-light-shade);margin:8px 0}.sidebar__top{background:var(--bg-light-shade);padding:16px 0}.sidebar__title{font-weight:bold;display:flex;align-items:center;margin:16px}.sidebar__button{color:var(--bg-font-clear);font-size:1.2rem;display:flex;align-items:center;height:32px;text-decoration:none;padding:8px}.sidebar__button:hover{background:var(--bg-light-accent)}.sidebar__button--with-bg{color:var(--hl-font-clear);background:var(--hl-dark-shade);font-weight:bold;padding:24px;border-radius:10px;border:none;cursor:pointer;margin:8px;width:calc(100% - 16px);font-size:1rem;box-sizing:border-box}.sidebar__button--with-bg:hover{background:var(--hl-light-shade)}.sidebar__hidden,.sidebar__reply-arrow,.sidebar__archive,.sidebar__bookmark,.sidebar__gears,.sidebar__reports{position:relative;display:flex}.sidebar__hidden::before{content:'';-webkit-mask-image:url("/img/hide.svg");-webkit-mask-size:cover;-webkit-mask-repeat:no-repeat;mask-image:url("/img/hide.svg");mask-size:cover;mask-repeat:no-repeat;background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__reply-arrow::before{content:'';-webkit-mask-image:url("/img/reply-arrow.svg");mask-image:url("/img/reply-arrow.svg");background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__archive::before{content:'';-webkit-mask-image:url("/img/archive.svg");mask-image:url("/img/archive.svg");background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__bookmark::before{content:'';-webkit-mask-image:url("/img/bookmark.svg");mask-image:url("/img/bookmark.svg");background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__gears::before{content:'';-webkit-mask-image:url("/img/gear.svg");mask-image:url("/img/gear.svg");background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__reports::before{content:'';-webkit-mask-image:url("/img/report.svg");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;mask-image:url("/img/report.svg");mask-repeat:no-repeat;mask-position:center center;background:var(--color-icon);width:20px;height:20px;margin:auto 8px}.sidebar__mark-dot{text-align:center;vertical-align:center;font-size:0.6rem;position:absolute;background:var(--color-like);border-radius:50%;padding:2px;right:2px;top:-4px;color:#fff;width:10px;height:10px;border:2px solid var(--bg-light-shade)}.sidebar--opened{display:block;-webkit-animation:fadeIn 0.25s}.sidebar--closing{-webkit-animation:fadeOut 0.30s}.sidebar--opened .sidebar__content{-webkit-animation:appearFromRight 0.25s}.sidebar--closing .sidebar__content{-webkit-animation:disappearToRight 0.30s}@keyframes appearFromRight{0%{right:-100%}100%{right:0}}@keyframes disappearToRight{0%{right:0}100%{right:-110%}}@keyframes fadeIn{0%{background:rgba(0,0,0,0)}100%{background:var(--sidebar-overlay)}}@keyframes fadeOut{0%{background:var(--sidebar-overlay)}90%{background:rgba(0,0,0,0)}100%{background:rgba(0,0,0,0)}}