:root{
	--bs-body-font-size: 14px;
}


.messages div.row{
	b order-bottom: 1px solid grey;
	margin: 6px 0px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}
.messages div.row:nth-child(1){
	b order-top: 1px solid grey;
}

.messages div.row .u{
	display:inline-block;
	padding: 5px;
	border-right: 1px solid #cccccc;
	width: 100px;
	background-color: #eeeeee;
}

.messages div.row .u>div:nth-child(1){
	font-weight:bold;
	background-color: white;
	padding: 3px;
	cursor: pointer;
}
.messages div.row .u>div:nth-child(2){
	font-size:70%;
	display: inline-block;
}
.messages div.row .u>div:nth-child(3){
	font-size:70%;
	display: inline-block;
	padding-left: 5px;
}
.messages div.row .u>div:nth-child(4){
	font-size:70%;
}





.messages div.row .t{
	d isplay:inline-block;
	vertical-align: top;
	padding-left: 0px;
	position: relative;
	w hite-space: nowrap;
}

.messages div.row .t>div:nth-child(1):empty{
	display: none;
}
.messages div.row .t>div:nth-child(1){
	float: left;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 3px;
	font-size: 80%;
	margin: 0px 5px -5px 0px;
	font-weight:bold;
}

.messages div.row .t>div:nth-child(2){
	padding: 0px 5px 0px 5px;
	vertical-align: top;
	margin-bottom: 30px;
}


.messages div.row .t .adds{
	display: inline-block;
	position: absolute;
	right: 7px;
	bottom: 10px;
	font-size: 70%;
}
.messages div.row .t .adds>div{
	cursor: pointer;
	display: inline-block;
	border: 1px solid gray;
	padding: 0px 2px;
	margin: 0px 3px;
}
.messages div.row .t .adds>div:hover{
        background-color: #00cc00;
}
.messages div.row .t .adds>div.delete{
	border-color: red;
}


.messages div.row.statusReplyToMe .t{
	background-color: #FFFFCC;
}

.messages div.row.statusQuoteToMe .t .txt .quoted{
	background-color: #FFFFCC;
}

.messages div.row .readed{
	position: absolute;
	top: 0px;
	right: 5px;
}
.messages div.row .readed.status-5 svg{
	filter: invert(0.5) sepia(1) saturate(9) hue-rotate(64deg);
}
.replyBlock{
	display: none;
	white-space: nowrap;
}

.t .callsign{
	cursor: s-resize;
}
.replyBlock .callsign{
	cursor: s-resize;
	font-weight: bold;
	font-style: italic;
	background-color: pink;	
	margin-left:5px;
	margin-right:5px;
	padding: 0px 5px;

	display: inline-block;
}
.flagReply .t{
	background-color: pink;
}
.postForm{
	margin-top: 20px;
	margin-bottom: 10px;
}

.postForm .inputText{
	width: 100%;
	resize: vertical;
	min-height: 26px;
	h eight: 30px;
	m in-height: 30px;
}
.btns{
	white-space: nowrap;
}
.btnSend, .btnRefresh, .btnClear, .btnOnline{
	cursor:pointer;
	display: inline-block;
	margin-right:5px;
}

.user .name{
	white-space: nowrap;
}
.user .name span{
	font-weight: bold;
	cursor:pointer;
}
.logout{
	cursor:pointer;
}
.input-group-text{
	height: 100%;
}

.refPrev{
	display: none;
}
.refPrev svg{
	cursor: pointer;
}

.logOnly{
	display: none;
}

.scrollToTop {
    display:none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease-out;

}

.scrollToTop:hover{
    opacity: 0.7;
}

.replys{
	margin: 0px 10px 5px 5px;
	font-size: 80%;
	color: #999999;
	b ottom: 0px;
	p osition: absolute;
	display:inline-block;
}
.replys span{
	cursor: s-resize;
	font-weight: bold;
	margin-left: 5px;
	font-size: 80%;
}

.likes{
    display:inline-block;
    margin-bottom: 5px;
}
.likes>span{
    margin-left: 5px;
    cursor: default;
    cursor: default;
    background-color: #cccccc;
    border-radius: 15px;
    padding: 0px 10px 3px;
}
.likes>span.meLike{
    background-color: #FFFFCC !important;
    border: 1px solid #cccccc;
}
.likes>span .cnt{
    font-size: 90%;
    padding-right: 1px;
}
.likes>span .likeText{
}

#testWindow{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 200px;
    height: 200px;
    z-index: 9999;

}

.messages .online .u{
  border-right: 1px solid #00cc00 !important;
  background-color: #a9ffa9 !important;
}


/* likes */

#popupLike {
  position: absolute;
  display: none;
  width: 190px;
  h eight: 60px;
  top: 200px;
  background-color: white;
  border: 1px solid black;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}

#popupLike div{
  display: inline-block;
  margin: 5px;
  font-size: 150%;
  cursor: pointer;
  border-radius: 10px;
  width: 35px;
  height: 35px;
  text-align: center;
}

#popupLike div:hover{
  background-color: #00cc00;
}




.rightcol{
  float:right;
  width: 10%;
  b order: 1px solid black;
  margin-left: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
  min-width: 65px;
}

.rightcol span{
  background-color: #a9ffa9;
  display: block;
  text-align: center;
}
.rightcol div{
  padding-left: 5px;
   font-weight: bold;
  cursor: pointer;
}


.topRightBtns{
  position: absolute;
  top: 3px;
  right: 10px;
  cursor: pointer;
}


.chatList{
  border-bottom: 1px solid #cccccc;
  padding: 5px 12px;	
  display: none;
}
.chatList .btnChat{
    display: inline-block;
    border: 1px solid #cccccc;
    padding: 3px;
    font-weight: bold;
    margin: 0px 5px 5px 0px;
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}
.chatList .btnChat.current{
    background-color: orange;
    color: white;
}
.chatList .btnChat .close{
    position: absolute;
    top: -5px;
    right: 2px;
}
.chatList .btnChat .close:hover{
    color: red;
}
.chatList .btnChat .cnt{
    position: absolute;
    top: 5px;
    right: 1px;
    font-size: 8pt;
    background-color: orange;
    /* border: 1px solid orange; */
    /* background-color: white; */
    border-radius: 45px;
    font-size: 80%;
    cursor: default !important;
    color: white;
    padding: 1px 2px;
}

.chatCaption{
    display: none;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #cccccc;
}

#popupUserInfo {
  position: absolute;
  display: none;
  width: 210px;
  h eight: 60px;
  top: 200px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}

#popupUserInfo .caption{
  font-weight: bold;
  text-align:center;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 3px;
}


#popupUserInfo .menu{
  padding: 3px 5px;
  cursor: pointer;
}

#popupUserInfo .menu:hover{
  background-color: orange;
  color: white;
}

#popupUserInfo .menu>div{
  display: inline-block;
  float: right;
}


#popupUserInfo .spacer{
  border: 1px solid #cccccc;
  margin: 2px 0px 2px 0px;
}

.checkCode{
    text-align: center;
    font-weight: bold;
    border: 1px solid red;
    color: red;
    padding: 5px;
    background-color: #55FFFF;
}