:root{--primary-color:#272727;--text:#fff;--white:#fff;--sidebar-primary:#2c7395;--sidebar-primary-light:#3891bc;--sidebar-primary-hover:#20556e;--sidebar-background:#fcfcfd;--background:#f1f3ff;--full-bg:#c7d2dc;--text-link:#424662;--headline:#7686bc;--cta-background:#ebf3ff;--cta-background-darker:#cfd5ff;--cta-background-border:#cdd2f3;--cta-text:#1c2035;--neutral:#e6e8f0;--expand-button:#4a516d;--logout:#fa7575;--text:#303651;--text-lighter:#697089}body{font-family:Work Sans,sans-serif;background:var(--full-bg);font-size:16px;padding:1rem}body,html{height:100%}*{margin:0;padding:0;box-sizing:border-box}.sidebar{position:sticky;top:0;left:0;height:97vh;padding:1rem 0;border-radius:1rem;width:100%;max-width:18rem;display:flex;flex-direction:column;color:var(--white);background:var(--sidebar-background);transition:max-width .1s ease-in-out;overflow:hidden}body.collapsed .sidebar{max-width:5rem;display:flex;align-items:center;overflow:visible}body.collapsed .sidebar-content{overflow:hidden}body.collapsed .hide{position:absolute;display:none}body.collapsed .subscription-item{justify-content:center}.search__wrapper{padding:0 1rem;position:relative}.search__wrapper input{background:var(--background);height:2.5rem;width:100%;border-radius:.5rem;padding:0 .5rem 0 2rem;flex-grow:1;outline:none;border:none}.search__wrapper svg{position:absolute;z-index:2;top:50%;left:1.625rem;transform:translateY(-50%);pointer-events:none;right:1.5rem}body.collapsed .search__wrapper svg{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);color:var(--text-link);stroke:var(--text-link)}.search__wrapper input::-webkit-input-placeholder{color:var(--text-link);white-space:nowrap}body.collapsed .search__wrapper input{max-width:2.5rem;padding:.5rem}body.collapsed .search__wrapper input::-webkit-input-placeholder{color:transparent}.sidebar-top-wrapper{display:flex}.sidebar-top{position:relative;align-items:start;overflow:hidden;height:4rem;padding-bottom:1rem}.sidebar-top,body.collapsed .sidebar-top{display:flex;justify-content:center;flex-direction:column}.logo__wrapper{display:flex;align-items:center;color:var(--text-link);font-weight:700;text-decoration:none;font-size:1.125rem;gap:1rem;padding:0 1rem}.logo-small{height:2rem;width:2rem;overflow:hidden;object-fit:cover}.sidebar-links{margin-top:1rem;width:100%}.sidebar-links h2{margin-left:1rem;color:var(--headline);font-size:1rem;font-weight:500;line-height:1.125rem;margin-bottom:.5rem;animation:fadeIn .2s ease-in-out}body.collapsed h2{display:none}.sidebar-links ul{list-style-type:none;position:relative;display:flex;column-gap:.5rem;flex-direction:column;margin:0;padding:0}.sidebar-links li{color:var(--text-link)}.sidebar-links li a,body.collapsed .sidebar-links li{display:flex;justify-content:center;align-items:center}.sidebar-links li a{color:var(--text-link);flex-grow:1;padding:0 1rem;gap:1rem;height:3rem;text-decoration:none;transition:background-color .2s ease-in-out}.sidebar-links li a .link{flex-grow:1;overflow:hidden;white-space:nowrap;animation:fadeIn .2s ease-in-out}.sidebar-links li a img{height:2.125rem;width:2.125rem}.sidebar-links li a:hover,.sidebar-links li a:hover svg{color:var(--sidebar-primary)}.sidebar__action__wrapper{overflow-x:hidden;margin:auto 1rem 0}.sidebar__action{padding:1rem;background-color:var(--cta-background);border-radius:1rem;min-width:1rem;color:var(--cta-text);animation:fadeIn .2s ease-in-out}.sidebar__action p{margin-bottom:.75rem;margin-top:.5rem;color:var(--text)}.sidebar__action h2{margin-bottom:.5rem}.sidebar__action button{border:0;margin-top:.5rem;width:100%;cursor:pointer;font-weight:600;height:2.612rem;font-size:1.125rem;color:var(--neutral);border-radius:.75rem;background:linear-gradient(90deg,var(--sidebar-primary) -.38%,var(--sidebar-primary-light) 100.02%)}.sidebar__action .progress-bar{width:5rem;height:5rem;border-radius:50%;font-size:larger;display:flex;font-weight:600;align-items:center;justify-content:center;background:radial-gradient(closest-side,var(--cta-background) 79%,transparent 80% 100%),conic-gradient(var(--sidebar-primary) 60%,var(--cta-background-darker) 0);margin-bottom:1rem}body.collapsed .sidebar__action{display:none}.sidebar-content{flex-grow:1;overflow-y:auto;margin-right:-.5rem}.sidebar-content,.subscriptions-list-container{padding-right:.5rem}.avatar__wrapper{position:relative;display:flex}.avatar{display:block;width:2.5rem;height:2.5rem;object-fit:cover;cursor:pointer;border-radius:50%}.avatar__name{display:flex;flex-direction:column;gap:.25rem;white-space:nowrap}.avatar__name,.user-name{animation:fadeIn .2s ease-in-out}.user-name{font-weight:600;text-align:left;color:var(--text)}.email{color:var(--text-lighter);font-size:.8125rem}.email,.logout{animation:fadeIn .2s ease-in-out}.logout{margin-left:auto}.logout svg{color:var(--logout)}body.collapsed .logout{display:none}.expand-btn{position:absolute;display:grid;place-items:center;cursor:pointer;right:-.5rem;top:1rem;border:1px solid var(--cta-background-border);background-color:var(--background);z-index:2;width:2rem;height:2rem;border-radius:.5rem}.expand-btn svg{transform:rotate(-180deg);stroke:var(--expand-button);width:1.25rem;height:1.25rem}body.collapsed .expand-btn svg{transform:rotate(-1turn)}.bottom-links{margin-top:auto}@keyframes fadeIn{0%{width:0;opacity:0}to{opacity:1;width:100%}}@media (max-width:768px){.sidebar{max-width:95%;position:fixed;height:auto;z-index:10}body.collapsed .sidebar{max-width:4rem}}.subscriptions-list-container{max-height:100%;overflow-y:auto;margin-top:.5rem}.subscriptions-list{list-style:none;padding:0;margin:0}.subscription-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:var(--text-link);padding:.5rem .5rem .5rem 1rem;width:100%;cursor:pointer}.link{flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:.5rem;margin-right:.5rem}.subscription-item:last-child{border-bottom:none}.avatar-small{width:30px;height:30px;border-radius:50%;object-fit:cover;border-radius:.25rem}.subscription-item .link{display:block;flex-grow:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:.5rem}.subscription-item:hover .link{color:var(--sidebar-primary-hover)}.sidebar__profile{display:flex;align-items:center;gap:.75rem;flex-direction:row;padding:0 1rem;color:var(--text-link);overflow-x:hidden;min-height:2.6125rem;margin-top:auto}body.collapsed .search__wrapper{display:flex;justify-content:center}body.collapsed .expand-btn{right:-1.5rem}body.collapsed .logo__wrapper,body.collapsed .sidebar-top-wrapper{justify-content:center;overflow:visible}.sidebar-links li a:hover,.sidebar-links li.active a{border-left:4px solid var(--sidebar-primary);padding-left:.75rem}.sidebar-links li a:hover .link,.sidebar-links li.active a .link{color:var(--text-link)}.circle{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:8px}.red-circle{background-color:var(--logout)}.blue-circle{background-color:var(--sidebar-primary)}.live-indicator{position:relative}.live-indicator span{position:absolute}.online-status{margin-right:-.4rem}.live-indicator,.online-status{display:inline-flex;align-items:center;justify-content:center}.indicator{width:10px;height:10px}.indicator,.indicator-breathing{background-color:red;border-radius:50%}.indicator-breathing{display:block;width:24px;height:24px;opacity:.3;animation:breathing 2s infinite}@keyframes breathing{0%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:.4}to{opacity:0}}.indicator-container{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;margin-left:auto}.buttons-container{display:flex;flex-direction:column;align-items:center;margin-top:1rem}.show-less-btn,.show-more-btn{color:var(--sidebar-primary);border:none;padding:.5rem 1rem;margin:.25rem 0;border-radius:.25rem;cursor:pointer;transition:background-color .3s ease}li{cursor:pointer}.main-content{flex-grow:1;padding:20px;width:80%}.main-container{display:flex}