@font-face{
    font-family:Noto Sans;
    /*font-style:normal;
    font-weight:400;*/
    src:url(https://altruischat.zaedev.cc/assets/f72b5ce64feb2086.woff2) format("woff2");
  }
  /*@font-face{
    font-family:Noto Sans;
    font-style:bold;
    font-weight:700;
    src:url(/assets/cb2006dbced0e246.woff2) format("woff2");
  }*/
  :root{
    --base-font:"Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --monospace-font:Consolas,monospace;
    --heading-font:"Times New Roman", serif;
  }
  
  body{background:#101010;color:white;}
  #login{
    border:1px solid green;
    display:inline-block;
    margin:5px;
    padding:5px;
  }
  #hotbar{
    display:none;
    border:1px solid green;
    margin:5px;
    padding:5px;
  }
  #settingspane{
    /*display:none;*/
    border:1px red dotted;
    width:50vw;
  }
  #guilds{
    border:1px solid #606060;
    display:inline-block;
    padding:0px;
    margin:0px;
    overflow-x:auto;
    max-height:3.5em;
    max-width:90%;
    white-space:nowrap;
  }
  #guilds{
    /*display:inline-flex;*/
    overflow-x:auto;
    overflow-y:visible;
  }
  #chans{
    border:1px solid #404040;
    display:inline-block;
    padding:5px;
    margin:5px;
    overflow-y:auto;
    /*min-height:1em;*/
    max-height:7em;
    max-width:95%;
    max-width:calc(100% - 2em);
  }
  /*#chans>a{margin-left:1em;margin-right:1em;}*/
  #msgsbox{
    border:1px solid grey;
    padding:15px;
    min-height:100px;
    height:75vh;
    width:95%;
    overflow-x:wrap;
    overflow-y:scroll;
    font-weight:normal;
    font-family:var(--base-font);
  }
  #msgs:empty::before{
    content:"no messages";
    color:grey;
    font-size:.7em;
  }
  .chan,dc-chan{
    text-decoration:underline;
    cursor:pointer;
    --color:#3040f0;
    color:var(--color);
    margin-left:.2em;
    margin-right:.2em;
  }
  .chan:hover,dc-chan:hover{color:#5060ff;}
  .chan:active,dc-chan:active{color:red;}
  .chan:hover{color:hsl(from var(--color) h calc(s + 20) calc(l + 20));}
  .chan.forum{--color:#880}
  .chan.news{--color:#0f0}
  .chan.voice, .chan.stage_voice{/*color:#a00060;*/--color:#8000a0;}
  .chan.category{--color:grey;width:fit-content;outline:1px dotted green;}
  .chan.thread, .chan.private_thread{--color:brown;}
      /* allow globally enabling the blockization of categories */
  .blockcategs .chan.category{display:block;padding-left:1em;}
  .subchans{border:1px dotted silver;display:inline-block;margin:.2em;padding-left:1em;}
  /*.chan.noperms,.noperms{text-decoration-color:red;text-decoration-thickness:0;}*/
  .chan.noperms,.noperms{text-decoration:1px red solid underline;}
  .chan.nsfw::before, .nsfw::before{
    color:red;
    content:"\1f51e";/* 18+ sign */
    content:"\2022"; /* filled bullet*/
    content:"\25e6"; /* hollow bullet*/
  }
  /*.chan.nsfw-unknown::before{content:"?";color:red;}*/
  .guild0{
    border:1px dotted #800000;
    margin:.5em;
    padding:.4em;
  }
  .guild{
    display:inline-block;
    width:2.5em;
    height:2.5em;
    border:1px dotted #800000;
    margin:.25em;
    vertical-align:top;
  }
  .guildicon{
    width:2.5em;height:2.5em;
    font-family:var(--base-font);
  }
  #slate{
    /*margin-left:calc(50% - 15em);*/
    width:50%;
    transform:translateX(20vw);
    background:#303030;
    color:white;
  }
  #slate.editing{border:2px solid #33f !important}
  #slate.replying{border:2px solid #82f !important}
  #sendbtn{
    transform:translateX(20vw) translateY(-3em);
    height:2em;
  }
  #debug{height:1em;overflow:hidden;margin-bottom:2em;}
  #debug.verbose{height:auto;background:#201010}
  #popup{
    display:inline-block;
    position:absolute;
    top:0px;
    left:-1000px;
    background:inherit;
    border:1px dotted red;
    border-radius:.2em;
    padding:.2em;
  }
  /**/
  a[href],a[onclick],a{
    color:#0080ff;
    text-decoration:underline;
    cursor:pointer;
  }
  input{
    background:#303030;
    color:white;
  }
  pre{
    background:#000000;
    color:#e0e0e0;
    border:1px dotted grey;
    border-radius:.4em;
    padding:.4em;
    width:min-content;
  }
  code{
    background:#000000;
    color:#e0e0e0;
  }
  h1,h2,h3,h4{margin-block:.5em;font-family:var(--heading-font);}
  .err{color:red;}
  .fade{color:slategrey;}/*#707070;}*/
  .midfade{color:darkgrey;}/*#a0a0a0;}*/
  .small{font-size:.7em;}
  /*.semismall{font-size:.85em;}*/
  .timestamp{text-decoration:grey dashed underline;background-color:#8885;}
  .qbox{ /* quote-box "symbol" */
    border-left:3px solid grey;
    padding-left:.5em;
  }
  .rbox::before{ /* reply indenter */
    content:"";
    display:inline-block;
    border-left:1px solid red;
    border-top:1px solid red;
    border-top-left-radius:.4em;
    width:2em;
    height:.6em;
    margin-left:1.2em;
  }
  .rbox{font-size:.85em;color:darkgrey;}
  .rbox>img{max-width:1em;max-height:1em;}
  .reflink{min-height:.75em;min-width:1em;display:inline-block;}
  /* space-dividing */
  .folded{display:none;} /* aka hidden until opened */
  .third{
    width:30vw;
    min-width:30vw;
    max-width:30vw;
    margin:1vw;
  }
  .msgbody{/*the body of a msg, text+embeds+files+components+reactions*/
    display:inline-block;
    max-width:95%;
  }
  .msgcont{/*the body text of a msg*/
    /*margin-left:2.2em; not needed with .msgbody*/
    overflow-wrap: break-word;
  }
  .msgcont:empty::before{
    color:#888888a0;
    content:"...";
  }
  .msg{/*the whole message, embeds and all*/
    margin-bottom:1.5vmin;
    max-width:100vw;
  }
/*
  .msg.editing{border:2px solid #33f !important}
  .msg.replying{border:2px solid #82f !important}
*/
  .msg.editing{background:#3333ff40;}
  .msg.replying{background:#8822ff40;}
  .msg.selected{background:#20802040}
  .user{
    font-weight:bold;
    color:#0a0;
    cursor:pointer;
  }
  .msg>.user,#hotbar>.user,.rbox>.user{
    color:#474;
    text-decoration:underline;
  }
  img.pfp{width:2em;height:2em;vertical-align:middle;}
  .msg>img.pfp{
    float:left;
    margin-right:.3em;
  }
  #chans .pfp{zoom:.75;}
  .embed{
    max-width:75vmin;
    width:max-content;
    /*max-height:70vmin;*/
    display:block;
    margin:1vmin;
    padding:.5em;
    border:1px dashed #6000b0;
    --color:#6000b0;
    background: #404040;
    /*word-break:break-word;*/
    white-space:pre-wrap;
    border-left-color: var(--color);
  }
  .embed:not(:empty){
    border-left-width:thick;
    border-left-style:solid;
    --color:black;
  }
  /*
  .embed:empty{
    --color:attr(border-color);
  }
  */
  img.embed{
    max-height:70vmin;
    max-width:70vmin;
    width:auto;
    height:auto;
    /* causes issues for the automatic image sizing, but is needed for tiny images to be visible */
    /*min-height:25vmin;*/
  }
  *.embed a{color: #4060ff;}/**/
  .embed-field{
    max-width:73vmin;
    max-height:95%;
    display:inline-block;
    margin:1vmin;
    padding:.25em;
    border:1px dotted #707070;
    background: #404040;
  }
  img.embed-field{
    max-height:50vmin;
    height:auto;
    width:auto;
    object-fit:scale-down;
  }
  .component img.embed-field{}
  .components:not(:empty){
    outline:1px dotted silver;
    display:block;
    width:fit-content;
  }
  .componentsRow{
    display:block;border:1px dotted #8888;
  }
  .component{
    display:inline-block;
    /*border:1px solid silver;*/
  }
  .componentSection{display:flex;align-items:center;}
  .componentSection>span{display:inline-flex;}
  .componentSection>span:first-child{flex:auto;}
  .component a,.componentsRow a{display:inline-block;}
  .component button{
    color:white;
    border:1px solid white;border-radius:.25em;
    margin:.1em;padding:.2em .3em;
  }
  .component button[disabled]{opacity:.75;border-color:transparent;}
  .btn_blue{background-color:#4040f0;}
  .btn_grey{background-color:#909090;}
  .btn_green{background-color:#409040;}
  .btn_red{background-color:#f04040;}
  .react{
    display:inline-block;
    border: 1px dashed grey;
    border-radius: .2em;
    height:1.6em;
    vertical-align:middle;
    padding: .1em;
    margin-left:.5em;
    background:#ffffff20;
  }
  .react>*{
    vertical-align:inherit;
    margin:0em .1em;
  }
  .thumbnail{
    /*TODO: scale img rather can constricting*/
    object-fit:scale-down;
    max-width:4em;
    max-height:4em;
    float:right;
  }
  /* spoilin */
  .spoil{
    color:transparent!important;
    background-color:black;
    border:1px dashed yellow;
    cursor:pointer;
  }
  /*not sure why, but this is the only one that does correct width and "blocks"*/
  .spoil.media{display:block;width:fit-content;}
  .spoil.media:not(.unspoil)::before{/*label media spoilers with text overlay*/
    content: "[spoiler]";
    color:white;
    display:block;
    position:relative;
    font-family:var(--monospace-font);
    left:50%;/*set "left edge" to half of media...*/
    margin-left:-4.5ch;/*...but then move left half the text, so actually is centered*/
    height:0;
    top:1em;
  }
  .spoil > *{
    opacity:0!important;
    pointer-events:none;
  }
  .spoil.unspoil{
    color:inherit!important;
    background-color:#303030;
    border:1px dotted yellow;
    cursor:unset;
  }
  .spoil.unspoil > *{
    opacity:100!important;
    pointer-events:inherit;
  }
  
  .emoji{
    max-height:1.5em;
    max-width:1.5em;
    vertical-align:middle;
  }
  #securitywarning{
    display:none;
    padding:.5em;
    border:2px solid #ff8080;
  }
  #debugconsole{display:none;}
  body.debug #debugconsole{display:block;}
  #e_magg:not(:empty){min-height:5vh;}

  ::-webkit-scrollbar{width:.5rem;height:.5rem}
  ::-webkit-scrollbar-track{background:#000}
  ::-webkit-scrollbar-thumb{background:#C0C0C0;border-radius:.2rem}
  ::-webkit-scrollbar-thumb:hover{background:#A0A0A0}
  /* firefox only supports these for now */
  body, body *{
    scrollbar-width:thin;
    scrollbar-color:#C0C0C0 #000;
  }
  /* unset them for "debugging" outside firefox */
  body.debugcss, body.debugcss *{
    scrollbar-color:unset;
    scrollbar-width:unset;
  }
  /*
  ::-webkit-scrollbar-track-piece:start:vertical{background: linear-gradient(#f00, #0f0) no-repeat center/1px 100%;}
  ::-webkit-scrollbar-track-piece:start:horizontal{background: linear-gradient(#f00, #0f0) no-repeat center/100% 1px;}
  */
  ::-webkit-scrollbar-button{background:#60C060;height:.75rem;width:.75rem;max-height:10%;max-width:10%}
  ::-webkit-scrollbar-button:start{background:#C06060}      
  
  ::-webkit-scrollbar-corner{background:#000;border:.5px dotted silver}
  ::-webkit-resizer{}