body{background: black; color: #ccc; margin:0px;     overflow-wrap: break-word;   font-family:monospace; /*overflow-x:hidden;*/}
a{word-break: break-all;}

/*#app{height:100%;}*/
#buf     {    border: solid 1px gray;   border-color: transparent transparent gray transparent;   padding-bottom:5px;     white-space: pre-wrap; font-family: monospace;   }
#buf-grid{    border: solid 1px gray;   border-color: transparent transparent gray transparent;   padding-bottom:5px;     white-space: pre-wrap; font-family: monospace;   display:grid;  /*grid-template-columns: auto auto auto auto;*/   }
/*#buf-grid{    border: solid 1px gray;   border-color: transparent transparent gray transparent;   padding-bottom:5px;     white-space: pre-wrap; font-family: monospace;   display:grid; gap:0px; align-content: stretch;}*/
.buf-grid-item{ width:100%;   /*align-content: center;*/  }

#osd{position:fixed; top:0px; right:0px; padding:2px; background:black; color:lime;}


#getbacklog{
  background:#363;
  padding:20px;
  text-align:center;
  cursor: pointer; 
}

/* scale-down */
/*.jpgdiv{width-max:100%;}  object-fit:contain; margin: auto;  */
/*.jpgdiv{text-align:center;}*/
.jpg{max-width:100%; max-height:500px;    }
.jpg2{width:100%; aspect-ratio:1;    object-fit:contain; }
.jpg3{width:100%; aspect-ratio:1;    object-fit:cover; }
.jpg2-top{position:absolute; top:0px;  left:0px; right:10px; white-space: nowrap; overflow-x:hidden;  background:rgba(0,0,0,0.5); }
.jpg2-bottom{position:absolute; bottom:0px;  left:0px; right:20px; white-space: nowrap; overflow-x:hidden;  background:rgba(0,0,0,0.5); }


.pt{cursor: pointer; user-select:none;}
.pt2{cursor: pointer;}

#tst{
  white-space: pre-wrap;
  font-family: monospace;
}
.m{
  white-space: pre-wrap;
  font-family: monospace;

/*  padding-left: 28ch;
  text-indent: -28ch; */

  /*text-indent: 4em;*/
}

.separator{color:lime;}
.inout{color:cadetblue;}
.priv{color:violet;}

/*.url{color:navy;}*/
.vip_op{color:lime}
.vip_plus{color:yellow}
.vip_priv{color:violet}


.time{color: gray;}

.nick-0{color: green;}
.nick-1{color: yellow;}
.nick-2{color: brown;}
.nick-3{color: orange;}
.nick-4{color: lightblue;}
.nick-5{color: magenta;}

.nick-red{color: red;}
.nick-green{color: lime;}
.nick-white{color: white;}
.nick-gray{color: gray;}

.yellow{color:yellow}
.lime{color:lime}

#scroller1{user-select:none; background:#363; padding: 8px; cursor: pointer; position:fixed; right:30px; top:30px; border: solid 1px black;   }
#scroller2{user-select:none; background:goldenrod; padding: 8px; cursor: pointer; position:fixed; right:30px; bottom:100px; text-align:center; /*opacity:80%;*/}
#scroller3{user-select:none; background:chocolate; padding: 6px; cursor: pointer; position:fixed; right:30px; bottom:30px;}
#scroller4{user-select:none; background:gray; padding: 8px; cursor: pointer; position:fixed; right:30px; top:30px;}
.sm{font-size:smaller;}
.bg{font-size:120%;}

/* calc(100% - 20px)     -60px with button aligned  */
#inp{/*font-family:monospace;*/ width: calc(100% - 52px); background: black; color: white; position:fixed; left:0; bottom:0; padding:10px;   border:none;   outline: none;    padding-right:50px}
/*#inpbt{width:50px; background: black; color: white; position:fixed; right:0; bottom:0; padding:10px;   border:solid 1px #333;   outline: none;}*/
#btinp{width:20px; height:20px; background: transparent; color: white; position:fixed; right:0; bottom:0; padding:10px;   border:solid 1px #333; text-align:center;  border-color: transparent transparent transparent #333;}



/*#inp{width: 100%; background: black; color: white; }*/
/*#inp{ / * font-family:monospace; * / width: calc(100% - 20px); background: black; color: white; position:fixed; left:0; bottom:0; padding:10px; border: solid 1px #222;   border-color: #222 transparent transparent transparent;           outline: none;}*/
/*#inp:focus{border: solid 1px #444;  border-color: #444 transparent transparent transparent;    outline: none;}*/
/*#inp:focus{width: 100%; background: black; color: white; position:fixed; left:0; bottom:0; padding:10px; border: solid 1px #444;  border-color: #444 transparent transparent transparent;    outline: none;}*/

/*
inpuf{border: solid 1px gray;}
inpuf:focus{border: solid 1px gray;}
*/

a:link { color: #00B0FF; }
a:visited { color: #8020FF; }
/* a:hover { color: blue; } */
/*
a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
*/



.grid-1{grid-template-columns: auto;}
.grid-2{grid-template-columns: auto auto;}
.grid-3{grid-template-columns: auto auto auto;}
.grid-4{grid-template-columns: auto auto auto auto;}
.grid-5{grid-template-columns: auto auto auto auto auto;}
.grid-6{grid-template-columns: auto auto auto auto auto auto;}
.grid-7{grid-template-columns: auto auto auto auto auto auto auto;}
.grid-8{grid-template-columns: auto auto auto auto auto auto auto auto;}
.grid-9{grid-template-columns: auto auto auto auto auto auto auto auto auto;}
.grid-10{grid-template-columns: auto auto auto auto auto auto auto auto auto auto;}


#slideshow{position:fixed;left:0px;right:0px;top:0px;bottom:0px; background:black;}
#slideshow-off  {position:fixed;right:0px;top:0px; background:rgba(0,0,0,0.5); color:white; padding:20px; font-size:200%;}
#slideshow-left  {position:fixed;left:0px; top:50%; transform: translate(0, -50%); background:rgba(0,0,0,0.5); color:white; padding:20px; font-size:200%;}
#slideshow-right  {position:fixed;right:0px; top:50%; transform: translate(0, -50%); background:rgba(0,0,0,0.5); color:white; padding:20px; font-size:200%;}

#slideshow-cover{position:fixed;left:0px;top:0px; background:rgba(0,0,0,0.5); color:white; padding:20px; font-size:200%;}
#slideshow-url{position:fixed;right:0px;bottom:0px; background:rgba(0,0,0,0.5); color:white; padding:20px; font-size:200%;}
.slideshowimg{width:100%; height:100%;    /*object-fit:contain;*/ }
.slideshowtxt{position:absolute; bottom:0px;  left:0px;  /*white-space: nowrap; overflow-x:hidden;  background:rgba(0,0,0,0.5);*/ }
.txt2{background:rgba(0,0,0,0.5);}