html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{--micro: 4px;--tiny: 8px;--small: 12px;--medium: 16px;--large: 24px;--xlarge: 36px}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-vc{display:flex;align-items:center}.flex-hc{display:flex;justify-content:center}.flex-1{display:flex;flex:1}.flex-sb{display:flex;justify-content:space-between}.mb-micro{margin-bottom:var(--micro)}.mt-micro{margin-top:var(--micro)}.mr-micro{margin-right:var(--micro)}.ml-micro{margin-left:var(--micro)}.mb-tiny{margin-bottom:var(--tiny)}.mt-tiny{margin-top:var(--tiny)}.mr-tiny{margin-right:var(--tiny)}.ml-tiny{margin-left:var(--tiny)}.mb-small{margin-bottom:var(--small)}.mt-small{margin-top:var(--small)}.mr-small{margin-right:var(--small)}.ml-small{margin-left:var(--small)}.mb-medium{margin-bottom:var(--medium)}.mt-medium{margin-top:var(--medium)}.mr-medium{margin-right:var(--medium)}.ml-medium{margin-left:var(--medium)}.mb-large{margin-bottom:var(--large)}.mt-large{margin-top:var(--large)}.mr-large{margin-right:var(--large)}.ml-large{margin-left:var(--large)}.mb-xlarge{margin-bottom:var(--xlarge)}.mt-xlarge{margin-top:var(--xlarge)}.mr-xlarge{margin-right:var(--xlarge)}.ml-xlarge{margin-left:var(--xlarge)}.main{height:100vh}.home{--nav-height: 70px;height:100%;display:grid;grid-template-rows:var(--nav-height) 1fr;grid-template-columns:auto 1fr}.home__main{--home-pad-vert: 10px;--home-pad-horiz: 18px;height:calc(100vh - var(--nav-height) - 2 * var(--home-pad-vert));overflow:auto;padding:var(--home-pad-vert) var(--home-pad-horiz);background-color:#fff;border-radius:12px 12px 0 0}.sidenav{height:calc(100vh - var(--nav-height) - 48px);width:250px;border-left:none;border-bottom:none;padding:var(--large) 0}.sidenav__name{display:flex;align-items:center}.sidenav__section{user-select:none;margin-bottom:12px}.sidenav__section:last-child{margin-bottom:0}.sidenav__section-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.sidenav__section-item{display:grid;grid-template-areas:"avatar name close" "avatar name close";grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-decoration:none;color:inherit;font-size:var(--small);padding:10px var(--medium);border-bottom:1px solid #bcbcbc}.user-avatar{grid-area:avatar;border-radius:50%;width:24px;height:24px}.user-name{grid-area:name}.message-preview{grid-area:message;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.room-close{grid-area:close;visibility:hidden}.sidenav__section-item:hover{background-color:#bcbcbc}.sidenav__section-item:hover>.room-close{visibility:visible}.topnav{height:50px;grid-column:1 / -1}.topnav__title{display:grid;font-size:40px;align-items:center;padding-left:var(--medium);padding-top:var(--medium);grid-template-columns:auto 1fr;grid-gap:10px}.top_nav-img{height:50px;width:50px}.add-dm{height:100%;display:grid;grid-template-rows:auto auto 1fr;grid-gap:var(--medium);background-color:#fff;border-radius:12px}.add-dm__title{border-left:none;padding:var(--small);padding-bottom:none}.add-dm__to{padding:var(--small);border:1px solid #ced4da}.add-dm__input{padding:0 var(--medium)}.add-dm__messaging{padding:0 var(--medium);padding-bottom:var(--medium)}.active-message{height:100%}.room{height:100%;display:grid;grid-template-rows:1fr auto;overflow:hidden}.room-messages{overflow:auto}.room-message{display:grid;padding:10px 20px;grid-template-areas:"avatar heading" "avatar messages";grid-template-columns:50px 1fr;transition:all .1s ease-in-out}.room-message:hover{background-color:#e2edf7;border-radius:12px}.room-message__avatar{grid-area:avatar}.room-message__heading{grid-area:heading;display:flex;align-items:center;gap:var(--tiny)}.room-message__messages{grid-area:messages}html{background-color:#ccc5b9;color:#000;font-family:Poppins,sans-serif}html,body,#root{height:100vh;overflow:hidden}