* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body,html {
	display:flex;
	margin:0px;
	padding:0px;
	align-items:center;
	justify-content:center;
	height:100%;
	width:100%;
	font-family: "Open Sans",Verdana, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
	accent-color:orange;
	overflow:hidden;
	background:wheat;
	
	--main-bg: rgb(220,220,220);
	--transparent-hover: rgba(0,0,0,0.2);
	--pop-box-shandow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	--container-background: rgb(240,240,240);
	--component-background: rgba(100,100,100,0.2);
}

flex {
	display:flex;
}

td {
	padding:5px;
}

svg {
	fill: CanvasText;
	margin: 0;
	padding:0;
}

h1,h2,h3,h4,h5 {
	padding: 0;
	margin: 0;
}

a {
	color:black;
}

a:hover {
	background-color: var(--transparent-hover);
	text-decoration: none;
}

select {
	border:none;
	cursor:pointer;
	background: var(--component-background);
	padding:4px;
	border-radius:8px;
}

select:hover {
	outline:1px solid gray;
	background: var(--transparent-hover);
}

body {
	position: relative;
}

.cb {
	width: 30px;
	height:30px;
	border-radius: 100%;
	background: transparent;
	cursor: pointer;
	margin: 2px;
	flex-shrink:0;
}

.cb:hover {
	background:var(--transparent-hover);
}

centeredPopup {
	display:block;
	min-width: 300px;
	max-width: 100%;
	max-height: 100%;
	background-color: var(--container-background);
	border-radius: 8px;
	padding:8px;
	animation-name: dialogappear;
	animation-duration: 0.5s;
	box-shadow: var(--pop-box-shandow);
}

centeredPopup.closing {
	transform:scale(0.8);
	opacity:0;
	animation-name: dialogdisappear;
}

centeredPopup.docked {
	background-color: var(--main-bg);
	border-radius:0;
	animation-name: dialogappeardocked;
	animation-duration: 0.5s;
	max-width:100%;
	max-height:100%;
	box-shadow: none;
}

centeredPopup.docked.closing {
	transform:scale(0.8);
	opacity:0;
	animation-name: dialogdisappeardocked;
}

main {
	display:flex;
	width:100%;
	height:100%;
	animation-name: mainappear;
	animation-duration: 0.3s;
	overflow:hidden;
}

leftarea {
	height:100%;
	width:25%;
	background-color: var(--main-bg);
	display:flex;
	flex-direction: column;
	position:relative;
	transition: opacity 1s;
	flex-shrink: 0;
}

rightarea {
	height:100%;
	width:100%;
	display:flex;
	flex-direction: column;
	background: var(--container-background);
	min-width: 0;
}

mchat {
	width: 100%;
	height:100%;
	display:flex;
	flex-direction: column;
}

input, textarea {
	border:none;
	padding:5px;
	border-radius:8px;
	outline:none;
	font: inherit;
	background-color: var(--component-background);
}

input:focus, textarea:focus {
	outline:1px solid gray;
	background-color: var(--transparent-hover);
}

button {
	border:none;
	padding:5px;
	border-radius:8px;
	cursor:pointer;
	margin:2px;
	background-color: var(--component-background);
	transition: background-color 200ms;
}
button:not(:disabled):hover {
	background-color: var(--transparent-hover);
	outline:1px solid gray;
}
button:disabled {
	opacity:0.5;
	cursor: default;
}

.clist {
	display:block;
	width: 100%;
	height:100%;
	overflow:auto;
	padding:4px;
}

.bbar {
	display:flex;
	flex-shrink:0;
	min-height:30;
	align-items:center;
}

titlebar {
	display:flex;
	height: 48px;
	width:100%;
	background-color: var(--main-bg);
	align-items:center;
	flex-shrink:0;
}

.transparentbtn {
	background:transparent;
	cursor:pointer;
}

.buttonlabel {
	background: transparent !important;
}

.circleimg {
	border-radius: 100%;
	width: 32px;
	height: 32px;
	margin: 4px;
	background:white;
	flex-shrink: 0;
	box-shadow: var(--pop-box-shandow);
}

.errorlabel {
	color: red;
	padding: 2px;
	text-align:center;
	display:block;
}

.infolabel {
	padding: 2px;
	text-align:center;
	display:block;
}

button.fab {
	background:orange;
	width:60px;
	height:60px;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 30px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 1;
	box-shadow: var(--pop-box-shandow);
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
button.fab:hover {
	background:gold;
	box-shadow: none;
}

button.fab.secondary {
	background: var(--component-background);
	width:40px;
	height:40px;
	border-radius: 20px;
}

button.fab.secondary:hover {
	background: var(--transparent-hover);
}


button.fab:hover:active {
	transform:scale(0.8);
}

.contextmenu > *, .customctx > div > * {
	width:100%;
}

.contextmenu button, .customctx button {
	border:none;
	white-space: nowrap;
	padding:6px 32px 6px 32px;
	background: transparent;
	margin:0px;
}
.contextmenu button:hover:not(:disabled), .customctx button:hover:not(:disabled), .customctx button:focus-visible {
	background: var(--transparent-hover);
}
.contextmenu {
	outline: 1px solid gray;
	z-index: 100;
	border-radius:8px;
	background: var(--container-background);
	transition: opacity 200ms;
	box-shadow: var(--pop-box-shandow);
}

.customctx {
	z-index:100;
	transition: opacity 200ms;
}
.customctx > div {
	outline: 1px solid gray;
	border-radius:8px;
	background: var(--container-background);
	transition: opacity 200ms;
	animation-name: ctxappear;
	animation-duration: 200ms;
	box-shadow: var(--pop-box-shandow);
	margin-bottom: 8px;
}

.popupmenu {
	position: fixed;
	outline: 1px solid gray;
	z-index: 100;
	border-radius:8px;
	overflow: auto;
	background: var(--container-background);
	transition: opacity 200ms;
	/*max-height: 0px;*/
	opacity: 0;
	display: flex;
	flex-direction: column;
	box-shadow: var(--pop-box-shandow);
}

.popupmenu > button {
	display: flex;
	align-items: center;
	background: transparent;
}

.popupmenu > button:hover, .popupmenu > button:focus-visible {
	background: var(--transparent-hover);
}

.popupmenu > button > div {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.popupmenu > button > label {
	padding: 4px 32px 4px 4px;
	display: block;
	cursor: pointer;
}

.emojilist {
	width: 400px;
	height: 60vh;
	overflow: auto;
}

.emojilist > button {
	width: 40px;
	height: 40px;
	font-size: larger;
}

.emojilist > button:not(:hover) {
	background: transparent;
}

.loading {
	animation-name: loading;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background-color:gray;
	color: transparent;
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.loading::before {
	content: '';
	width: 10%;
	background-color: lightgray;
	position: absolute;
	top: 0;
	bottom: 0;
	animation-name: loadingbar;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.bgcover {
	background: rgba(0,0,0,0.3);
	display:flex;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:6;
	animation-name: bgappear;
	animation-duration: 200ms;
}

.bgcover.closing {
	animation-name: bgdisappear;
	opacity:0;
	pointer-events: none;
}

.mediabar {
	height: 28px;
	font-size: small;
	display: flex;
	align-items: center;
}

.mediabar > button {
	width: 28px;
	height: 28px;
	border-radius: 0;
}

.mediabar > button:not(:hover) {
	background: transparent;
}

.mediabar > label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* ------ CHAT AREA ------ */

.messagescont {
	width: 100%;
	height:100%;
	position: relative;
	min-height: 0;
}

.messagescont > messageslist {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.messagescont > messageslist.pinned {
	background-color: var(--main-bg);
	transform-origin: center top;
	animation-name: topgrowfly;
	animation-duration: 200ms;
	z-index: 2;
}

messageslist {
	display:flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0px 10% 0px 10%;
	background-color: var(--container-background);
}

msgscont {
	display:flex;
	flex-direction: column;
}

msgscont > msgcont:not(:first-child) > img {
	visibility: hidden;
}

msgscont > msgcont:not(:first-child) > msgmain > msgsender {
	display: none;
}

msgcont:focus-visible {
	background: var(--transparent-hover);
}

pinbar {
	display:flex;
	height: 56px;
	width:100%;
	background-color: var(--main-bg);
	align-items:center;
	flex-shrink:0;
}
pinbar > .replycont {
	flex-shrink: initial;
}

.replycont {
	display:flex;
	width:100%;
	flex-direction:column;
	flex-shrink:0;
	padding:6px;
	opacity:0.7;
	margin: 5px;
	border-radius: 5px;
	border-left: 3px solid white;
	text-align: inherit;
	font-size: inherit;
	background:transparent;
}

.replycont:hover {
	opacity: 1;
}

.replycont > label {
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

attachmentscont {
	display:flex;
	width:100%;
	flex-shrink:0;
	/*padding:6px;*/
	overflow: auto;
	/*height: 52px;*/
}
attachmentscont > uploaditm {
	min-height: min-content;
}

.msgimg {
	width:64px;
	height:64px;
	object-fit: cover;
	margin:2px;
	border-radius:8px;
	cursor:pointer;
	transition: box-shadow 200ms;
}
.msgimg:hover {
	box-shadow: var(--pop-box-shandow);
}

uploaditm {
	width:52px;
	height:52px;
	margin:6px;
	position:relative;
	overflow:hidden;
	border-radius: 8px;
	background: rgba(0,0,0,0.1);
}
uploaditm > div {
	position:absolute;
	top:0;
	left:0;
	right:0;
	left:0;
}
uploaditm > div > img {
	object-fit: cover;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
uploaditm > button {
	position:absolute;
	top: 5px;
	right: 5px;
	background: rgba(0,0,0,0.1);
	border-radius:100%;
	width:30px;
	height:30px;
}

uploaditm > button:hover {
	background: rgba(255,0,0,0.2);
}

msgbar {
	display:flex;
	width:100%;
	flex-direction:column;
	flex-shrink:0;
	background-color: var(--main-bg);
}

msgbar > div {
	display:flex;
	min-height: 48px;
	width:100%;
	align-items:center;
	flex-shrink:0;
}


msgbar > div > textarea {
	min-height: 40px;
	border-radius: 20px;
	margin: 4px;
	width: 100%;
	resize: vertical;
}

.chatitem {
	display:flex;
	padding: 8px;
	border-radius: 0px;
	width:100%;
	/*height:54px;*/
	margin: unset;
	cursor:pointer;
	text-align: inherit;
	font-size: inherit;
	background:transparent;
	border-bottom: 1px solid gray;
}

.chatitem:hover, .chatitem:focus-visible {
	background: var(--transparent-hover);
	border-bottom: 1px solid transparent;
}

.chatitem.active {
	background: rgba(255,170,0,0.4);
	border-bottom: 1px solid transparent;
}

.chatitem > img {
	border-radius: 100%;
	width: 40px;
	height: 40px;
	margin-right: 5px;
	flex-shrink:0;
	background:white;
	box-shadow: var(--pop-box-shandow);
}

.chatitem > infoarea {
	display:flex;
	flex-direction: column;
	width:100%;
	overflow: hidden; 
}

.chatitem > infoarea > label {
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden; 
	width:100%;
	cursor:pointer;
}

.chatitem > infoarea > titlecont {
	display:flex;
	align-items: center;
	
}

.chatitem > infoarea > titlecont > h4 {
	width:100%;
	cursor:pointer;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	min-width:0;
	display:block;
}

.chatitem > infoarea > titlecont > time {
	white-space: nowrap;
	flex-shrink: 0;
	font-size:9px;
	cursor:pointer;
	display: block;
}

ma {
	display:block;
	margin:auto;
}

.reactionsbar {
	width: 315px;
}

.reactionsbar > button.emoji {
	transition: transform 100ms;
	border-radius: 100%;
	font-size: 20px;
	width: 35px !important;
	height: 35px;
	padding: 4px !important;
	flex-shrink: 0;
	outline: none !important;
}
.reactionsbar > button.reacted {
	background-color: var(--transparent-hover);
	transform: scale(0.9);
}
.reactionsbar > button.emoji:hover:not(.reacted) {
	transform: scale(1.2);
}
.reactionsbar > button.emoji:active {
	transform: scale(0.9);
}

msgcont {
	width:100%;
	display:flex;
	position: relative;
	/*align-items: flex-end;*/
	animation-name: msgcappear;
	animation-duration: 0.5s;
	flex-shrink: 0;
	transition: background-color 200ms;
	padding: 2px;
}

msgcont.hint {
	background: rgba(255, 200, 0, 0.5);
}

msgcont > .selectid {
	border: 1px solid CanvasText;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	font-size: medium;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	align-self: center;
	animation-name: slideright;
	animation-duration: 200ms;
}

msgcont.selected {
	background-color: orange;
}

msgcont.selected > .selectid{
	background-color: orange;
}

messageslist:not(.selection) > msgcont:not(.selected) > .selectid {
	display: none;
}

msgcont > img {
	width: 40px;
	height:40px;
	border-radius: 100%;
	margin: 0px 8px 0px 8px;
	background:white;
	box-shadow: var(--pop-box-shandow);
	/*position: absolute;*/
}

msgcont > img.hidden {
	visibility: hidden;
}

msgmain {
	display:flex;
	flex-direction:column;
	max-width: 80%;
	/*margin: 0px 56px 0px 56px;*/
}

msgmain > msgbubble {
	display:block;
	border-radius: 6px;
	padding: 6px;
	background: rgba(100,100,100,0.4);
	width:auto;
	animation-name: msgbappear;
	animation-duration: 0.5s;
	box-shadow: var(--pop-box-shandow);
}

msgmain > msgsender.hidden {
	display:none;
}

msgmain.sender > msgbubble {
	background: rgba(255,170,0,0.4);
}

msgmain.sender > msgsender {
	display:none;
}

msgmain > msgsender > label {
	font-size: 10px;
	font-weight: bold;
}

msgmain > msgtime > label {
	font-size: 10px;
}

msgmain > msgtime {
	display:flex;
}

msgreacts {
	display: block;
	min-width: 100%;
}

msgreacts > button {
	display: inline-flex;
	border-radius: 18px;
	height:26px;
	align-items:center;
	justify-content: center;
	margin:2px;
	padding: 4px;
}
msgreacts > button:hover {
	opacity: 0.9;
}

msgreacts > button * {
	cursor:pointer;
}

msgreacts > button.rcted {
	background: rgba(255,255,255,1) !important;
	color:black;
}

/*msgreacts > button.rcted > label:first-child {
	animation-name: reactappear;
	animation-duration: 0.5s;
}*/

.filed {
	display:flex;
	align-items:center;
	border-radius:5px;
	padding:8px;
	cursor:pointer;
	background: transparent;
	text-align: left;
}

.filed:hover {
	background: var(--transparent-hover);
}

.filed > div:first-child {
	background-color: orange;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	flex-shrink: 0;
}

.filed > div > label {
	cursor:pointer;
	overflow-wrap:anywhere;
}

.filed > div > label:first-child {
	font-weight:bold;
}

.typinglabel {
	font-size: 9px;
	padding: 2px;
	transition: opacity 0.5s;
}

/* ------ ANIMATIONS ------ */

@keyframes bgappear {
	from {opacity:0;}
}

@keyframes bgdisappear {
	from {opacity:1;}
}

@keyframes ctxappear {
	from {transform:scale(0.8);}
}

@keyframes loading {
	0%   {opacity:0.3;}
	50%  {opacity:0.8;}
	100% {opacity:0.3;}
}
@keyframes loadingbar {
	from {width: 10%; left: -10%;}
	to {width:100%; left: 100%;}
}

@keyframes msgbappear {
  from {transform:scale(0.9);}
}
@keyframes msgcappear {
	from {opacity:0;}
}

@keyframes dialogappear {
  from {transform:scale(0.8);opacity:0;}
}
@keyframes dialogdisappear {
  from {transform:scale(1);opacity:1;}
}

@keyframes dialogappeardocked {
	from {transform:scale(0.8) translateX(100%);opacity:0;}
	to {transform:scale(1) translateX(0);opacity:1;}
}
@keyframes dialogdisappeardocked {
	from {transform:scale(1) translateX(0);opacity:1;}
	to {transform:scale(0.8) translateX(100%);opacity:0;}
}

@keyframes mainappear {
	from {transform:translateX(100%);opacity:0;}
}

@keyframes reactappear {
	0% {transform:scale(0.8);opacity:0;}
	50% {transform:scale(1.1);}
}

@keyframes topgrowfly {
	0% {transform: scaleY(0);opacity: 0;}
	100% {transform:scaleY(1);}
}

@keyframes slideup {
  	from {transform:translateY(100%);opacity:0;}
	to {transform:translateY(0);opacity:1;}
}

@keyframes slidedown {
	from {transform:translateY(0);opacity:1;}
  	to {transform:translateY(100%);opacity:0;}
}

@keyframes slideright {
	from {transform:translateX(-100%);opacity:0;}
  	to {transform:translateX(0);opacity:1;}
}


/* ------ MEDIA RULES ------ */

@media only screen and (min-width: 2000px) {
	messageslist {
		padding: 0px 15% 0px 15%;
	}
}
/*@media only screen and (min-width: 1900px) {
	main {
		width:98%;
		height:98%;
		border-radius:8px;
	}
	body {
		font-size:20px;
	}
}*/


@media only screen and (max-width: 1024px) {
	messageslist {
		padding: 0;
	}
	centeredPopup {
		max-width:100%;
		max-height:100%;
	}
}

@media only screen and (max-width: 800px) {
	leftarea {
		width:100%;
	}
	rightarea {
		display:none;
		position:absolute;
		top:0;
		left:0;
		transition: transform 0.5s;
		transform: translateX(100%);
	}
	centeredPopup {
		width:100%;
		height:100%;
		animation-name: slideup;
		border-radius: 0px;
	}
	centeredPopup.closing {
		animation-name: slidedown;
	}
}

@media (prefers-color-scheme: dark) {
	html,body {
		background:#2b230c;
		--main-bg: rgb(40,40,40);
		--transparent-hover: rgba(255,255,255,0.2);
		--container-background: rgb(30,30,30);
		--component-background: rgba(120,120,120,0.2);
	}
	filed > div > label, a {
		color:white;
	}
}

@media (prefers-reduced-motion) {
	* {
		transition: none !important;
		animation:none !important;
	}
}

@media print {
	leftarea, .customctx, titlebar, pinbar, msgbar, .bgcover, centeredPopup {
		display:none !important;
	}
	rightarea {
		display:block !important;
		background:white;
		color:black;
	}
	msgcont {
		break-inside: avoid;
	}
	messageslist,html,body,main {
		overflow:visible !important;
		background:white;
	}
}