html{
	min-height:100%;
}

body {
	padding:0;
	margin:0;
	background: radial-gradient(#002455,#001C40);
	font-family: sans-serif;
}
button.func{
	background:none;
	border:none; 
	color:blue;
	font-weight: bold;
	font-size: 50;
}


.genericInputBackground{
	width: 40vw;
	height: 40vh;
	top:30%;
	left:30%;
	background-color: #808080;
	position: fixed;
	border:1px solid #000;
	transition: opacity 1s;
}
.genericInput{
	width:90%;
	height:90%;
	top:5%;
	margin:auto;
	background-color: white;
	word-wrap: break-word;
  	white-space: pre-wrap;
	box-sizing: border-box;
	position:relative;
	padding:2px;
}


.inputPanel{
	min-width:70%;
	min-height:70%;
	max-width:70%;
	max-height:70%;
	background-color: #808080;
	top:15%;
	left:15%;
	position: fixed;
	opacity: 0;
	padding: 10px;
	border:1px solid #000;
	visibility: hidden;
	transition: opacity 1s;
}
#panelInside{
	width:60vw;
	height:40vh;
	word-wrap: break-word;
}
.optionPanel{
	min-width:15%;
	min-height:20%;
	max-width:75%;
	max-height:70%;
	background-color: #404050;
	position: fixed;
	opacity: 0;
	padding: 10px;
	border:3px solid #000;
	visibility: hidden;
	transition: opacity 0.2s;
	outline: none;
}
.optionPanel > div {
	cursor: pointer;
	color:#00FF00;
	font-weight: normal;
	font-size: 20px;
}
.optionPanel > div:hover{
	color:#FF0000;
	transition: color 0.2s;
}


.messagePanel{
	min-width:15%;
	min-height:20%;
	max-width:75%;
	max-height:70%;
	background-color: #404050;
	position: fixed;
	opacity: 0;
	padding: 10px;
	border:3px solid #000;
	visibility: hidden;
	transition: opacity 0.2s;
	outline: none;
}
.messagePanel > div {
	cursor: pointer;
	color:#00FF00;
	font-weight: normal;
	font-size: 20px;
}
.messagePanel > div:hover{
	color:#FF0000;
	transition: color 0.2s;
}


.inputPanel > div {
	max-width: 60vw;
	max-height: 60vh;
	background-color: white;
	margin: 1%;
}


.clickableIconsTab{
	cursor: pointer;
}

.mainContainer {
  display: flex;
}



.leftContainer {
	background-color: #404040;
	min-height:100%;
	height:100vh;
	max-width: 25%;
	overflow: auto;
	position:relative;
}

.leftSuggest > div {
	overflow-x: auto;
	margin-bottom: 3vh;
	max-height:25vh;
  	white-space: pre-wrap;
	box-sizing: border-box;
	word-wrap: break-word;
}

.leftCard > div {
	margin:2%;
	overflow-x: auto;
	box-sizing: border-box;
	max-height:25vh;
  	white-space: pre-wrap;
	word-wrap: break-word;
}

.addItem {
	background-color: "#606060";
	text-align: center;
	cursor: pointer;
	user-select: none;
}




.rightContainer {
	background-color: #400000;
	min-height:100%;
	height:100vh;
	min-width:10vw;
	max-width: 25%;
	overflow: auto;
	box-sizing: border-box;
	margin-left:auto;
}

.rightContainer > div {
	margin:2%;
	overflow-x: auto;
	box-sizing: border-box;
	max-height:25vh;
}

.centerContainer{
	padding:2%;
	min-width:50vw;
	max-width:50vw;
	height:calc(100vh - 2vh);
	max-height:100vh;
	box-sizing: border-box;
	display:flex;
	flex-direction: column;
	align-items: flex-end;
}


.mainInput{
/*	margin:20%;*/
	height:10%;
	min-width:100%;
	max-width: 100%;
	margin-top:auto;
	box-sizing: border-box;
	max-height: 20vh;
	resize:vertical;
	min-height:3%;
	overflow-y:auto;
	background-color: white;
/*	display: block;*/
	word-wrap: break-word;
	white-space: pre-wrap;
	padding:2px;
}




.chat{
	width:100%;
	height:100%;

	background-color: rgba(255,255,255,0.05);
	margin-bottom: 0%;
	border-radius: 15px;
	overflow: auto;
  	white-space: pre-wrap;
	font-size: 20px;
}

.jer{
	width:100%;
	display:inline-block;
	margin-top:2px;
	color:white;
}

.textBubble{
	border-radius: 7px;
	margin-left: 4px;
	margin-right: 4px;
	padding-left:4px;
	padding-right:4px;
	background-color: rgba(0,0,0,0.1);
	display:inline-block;
	font-weight: normal;
}


.textBubble.left{
	float:left;
	max-width:90%;
	text-align: left;
	word-wrap: break-word;
}
.textBubble.right{
	max-width:90%;
	float:right;
	text-align: right;
	word-wrap: break-word;
}
.textBubble.cent{
	width:90%;
	margin: auto;
	display: block;
	text-align: center;
	color:yellow;
	word-wrap: break-word;
}

.blockMessage{
	color:lightblue;
}

.clickSpan{
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
}

.emptySpan{
	user-select: all;
	background-color: #E0E0FF;
	white-space: pre;
	cursor: pointer;
}
.verified{
	background-color: #00000F;
	white-space: pre-wrap;
	color:#FF7F00;
	margin-left: 2px;
	margin-right: 2px;
}

.selfReference{
	color:limegreen;
}

.collapsed{
	color:red;
}


.sb2::-webkit-scrollbar {
    width: 12px;
}

.sb2::-webkit-scrollbar-track {
/*    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.9); */
    border-radius: 10px;
/*    background-color: rgb(0,24,70);*/
	background: linear-gradient(
		45deg,
		rgb(125,0,225) 0%,
		rgb(255,255,0) 100%

	);
}

.sb2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px     rgba(0,0,0,0.5); 
	background-color: rgb(0,200,0);
}