html, body{
	height: 100%;
}

body{
	font-family: Monospace;
	background: #fff;
	margin: 0;
}

a {
	color: black;
	text-decoration: underline;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: min-content 1fr min-content;
	gap: 0px 0px;
	grid-template-areas:
            "header header"
            "sessions chat"
            "footer footer";
	height: 100vh;
}

.tab-container {
	border-left: 1px solid #7f3f98;
	border-right: 1px solid #7f3f98;
	grid-area: sessions;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

@media (max-width: 600px) {
	.container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content minmax(80vh, auto) min-content;
		gap: 0px 0px;
		grid-template-areas:
                "header"
                "sessions"
                "chat"
                "footer";
		height: 100vh;
	}

	.tab-container {
		overflow-y: visible;
		border-bottom: 1px solid #7f3f98;
	}
}

.header {
	align-self: start;
	grid-area: header;
	height: fit-content;
	border-bottom: 1px solid #7f3f98;
	width: 100%;
}

.chat {
	grid-area: chat;
	border-left: 1px solid #7f3f98;
	border-right: 1px solid #7f3f98;
	overflow: hidden;
	height: auto;
	display: flex;
	flex-direction: column;
	position: relative;
}

.chat h2 {
	margin: 13.5px 12px;
}

.footer {
	justify-self: start;
	align-self: end;
	grid-area: footer;
	height: fit-content;
	border-top: 1px solid #7f3f98;
	text-align: end;
	align-content: end;
	width: 100%;
}

.tab {
	border: 1px solid #7f3f98;
	background-color: #7f3f98;
}

.tab button {
	background-color: inherit;
	color: white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

.tab button:hover {
	background-color: #613074;
}

.tab button.active {
	background-color: #703886;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	flex-grow: 1;
}

.header span {
	color: #7f3f98;
	font-weight: bold;
	font-size: 20px;
}

#offline{
	padding: 20px 10px;
	font-size: 14px;
}

#offline .big{
	font-size: 32px;
	line-height: 32px;
}

#msgs {
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
}

.msgs {
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
}

.msgs li {
	list-style: none;
	margin: 0;
	overflow: hidden;
	margin-bottom: 5px;
	display: flex;
}

.message-from-self {
	padding-right: 6px;
	justify-content: flex-end;
	text-align: right;
	display: flex;
}

.message-from-self div span.prefix {
	padding-left: 0;
	font-size: 0px;
}

.message-from-self div span.timestamp {
	margin-left: 0;
	margin-right: 12px;
	padding-right: 0;
	padding-left: 12px;
}
.message-from-self div div.message {
	text-align: right;
	margin-left: auto;
}

#typing li {
	display: inline-block;
	margin-right: 5px;
}

.msgs li .body {
	display: block;
	overflow: hidden;
	word-wrap: break-word;
}

.msgs li .body img {
	max-width: 25vw;
	max-height: 25vh;
}

.msgs li .message {
	position: relative;
	padding: 6px 12px;
	border-radius: 1.3em;
	text-align: left;
	background: #e5e4e4;
	display: block;
	width: fit-content;
	max-width: max-content;
}

.msgs li .timestamp {
	display: inline-block;
	position: relative;
	margin-left: 16px;
	font-size: 10px;
	color: gray;
	padding-right: 12px;
}

.msgs li .timestamp span {
	font-size: 0px;
}

.msgs li .prefix{
	margin-top: 10px;
}

.msgs li .prefix,
.msgs li .suffix {
	padding-left: 12px;
	display: inline-block;
	color: rgba(0, 0, 0, .40);
	font-size: 12px;
	clear: both;
}

@media only screen and (max-width: 600px){
	.msgs li .message {
		max-width: 75vw;
	}
}

.msgs li .writing {
	
}

.msgs li .writing .one,
.msgs li .writing .two,
.msgs li .writing .three {
	opacity: .2;
	animation: dot 2s infinite;
	-webkit-animation: dot 2s infinite;
}

.msgs li .writing .one {
	animation-delay: 0.0s;
	-webkit-animation-delay: 0.0s;
}

.msgs li .writing .two {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}

.msgs li .writing .three {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	padding-right: 2px;
}

@-webkit-keyframes dot {
		0% { opacity: .2; }
	 25% { opacity:	1; }
	100% { opacity: .2; }
}

@keyframes dot {
		0% { opacity: .2; }
	 25% { opacity:	1; }
	100% { opacity: .2; }
}

.msgs li.in .message {
	float: left;
	margin-left: 20px;
}

.msgs li.in .message:before,
.msgs li.in .message:after {
	right: 100%;
	top: 18px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.msgs li.in .message:after {
	border-right-color: #fff;
	border-width: 8px;
	margin-top: -8px;
}

.msgs li.in .message:before {
	border-right-color: #bbb;
	border-width: 9px;
	margin-top: -9px;
}

.msgs li.in .prefix,
.msgs li.in .suffix {
	padding-left: 30px;
	text-align: left;
}

.msgs li.out .message {
	float: right;
	margin-right: 20px;
}

.msgs li.out .message:before,
.msgs li.out .message:after {
	left: 100%;
	/*top: 50%;*/ top: 18px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.msgs li.out .message:after {
	border-left-color: #fff;
	border-width: 8px;
	margin-top: -8px;
}

.msgs li.out .message:before {
	border-left-color: #bbb;
	border-width: 9px;
	margin-top: -9px;
}

.msgs li.out .prefix,
.msgs li.out .suffix {
	padding-right: 30px;
	text-align: right;
}

.msgs li.split {
	text-align: center;
	position: relative;
	padding: 20px 0;
}

.msgs li.split:before {
	content: "";
	display: block;
	border-top: solid 1px #bbb;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	z-index: 1;
}

.msgs li.split .text {
	display: inline-block;
	background: #e5e5e5;
	padding: 0 20px;
	position: relative;
	z-index: 5;
	color: #666;
}

#emic {
	position: absolute;
	border: 1px solid #bbb;
	width: 250px;
	height: 210px;
	margin: 0;
	padding: 0;
	font-size: 0;
	overflow: auto;
	margin-left: auto;
	bottom: 88px;
	right: 0px;
}

#emic li{
	display: inline-block;
	list-style-type: none;
	padding: 5px;
	cursor: pointer;
}

#emic li:hover{
	box-shadow: 0px 0px 5px 1px white;
}

.chat-box {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	position: relative;
	border-top: 1px solid #7f3f98;
	margin: 0;
	padding: 0;
	padding-left: 12px;
	height: auto
}

.chat-form	{
	background: #fff;
	padding: 10px;
	position: relative;
}

.chat-form .form-control {
	display: inline-block;
	width: 100%;
	border: 1px solid #bbb;
	border-radius: 0;
	padding: 10px;
	margin: 0;
	color: #333;
	background-color: #fff;
	font-size: 14px;
	box-shadow: none;
	height: 39px;
	box-sizing: border-box;
}

.chat-form .form-control:focus {
	outline: 0;
	box-shadow: none;
}

#send{
	background: none;
	color: white;
	text-transform: uppercase;
	padding: 5px;
	margin: 0 10px 0 0;
	border: 1px solid white;
	border-radius: 0;
}

#emic_btn {
	float: right;
	margin: 0;
	position: absolute;
	right: 10px;
	bottom: 40px;
	margin-top: 35px;
	z-index: 100;
	background: none;
	border: none;
	padding: 8px;
}

#users, #users li{
	margin: 0;
	padding: 0;
	display: inline-block;
}

#users li:after {
	content: "•";
	padding: 0 5px;
}

#users li:last-child:after {
	content: "";
}

.sessions-box{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.session {
	background: #2f2a2a;
	border: 1px solid #dc3545;
	color: white;
	width: auto;
}

.session.sess-female {
	border: 1px solid #dc3545;
}

.session.sess-male {
	border: 1px solid #0056b3;
}

.session.sess-other{
	border: 1px solid #218838;
}

.session div {
	padding: 8px;
}

.session.sess-female .session-header{
	background: #dc3545;
}

.session.sess-male .session-header{
	background: #0056b3;
}

.session.sess-other .session-header{
	background: #218838;
}

.session-footer{
	color: gray;
	font-size: 10px;
	text-align: right;
}


form.form * {
	box-sizing: border-box;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button.input-group_input,
input::-webkit-inner-spin-button.input-group_input{
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number].input-group_input {
	-moz-appearance: textfield;
}

.input-group {
	position: relative;
	--x: 14px;
	--y: 10px;
	margin-bottom: 15px;
}

.input-group_label,
.input-group_input,
.submit-btn {
	font-size: 14px;
	font-family: monospace;
}

.input-group_label,
.input-group_input {
	background: #1f1b1b;
}

.input-group_input {
	border: 1px solid #7f3f98;
	outline: none;
	width: 100%;
	padding: var(--y) var(--x);
	color: white;
}

.input-group_input, .input-group_error {
	--left: 0;
	left: var(--left);
	position: relative;
}

.input-group_input:is(:focus,:not(:placeholder-shown)) ~ .input-group_label,
.input-group_input:is(:not(.unfocussed)) ~ .input-group_label,
.input-group_input.has_error ~ .input-group_label{
	top: calc(var(--y) - 20px);
	font-size: 0.7rem;
	border-color: #7f3f98;
	color: #7f3f98;
}

.input-group_label {
	position: absolute;
	background-color: #1f1b1b;
	left: calc(var(--x) - 6px);
	top: calc(var(--y) - 0px);
	border: 1px solid transparent;
	padding: 0 6px;
	margin: 0;
	cursor: text;
	transition: top 300ms, font-size 300ms,
	border-color 300ms;
}

.input-group_error {
	color: #ff4444;
	display: block;
	visibility: hidden;
	margin-left: var(--x);
	margin-top: 1px;
	font-size: 0.6rem;
}

.input-group_input:not(:focus,.unfocussed):invalid,
.input-group_input.has_error:not(:focus,.unfocussed) {
	color: #ff4444;
	animation: error-shake 600ms;
	border: 2px solid #ff4444;
}

.input-group_input:not(:focus,.unfocussed):invalid ~ .input-group_error,
.input-group_input.has_error:not(:focus,.unfocussed) ~ .input-group_error {
	visibility: visible;
	animation: error-shake 600ms;
}

@keyframes error-shake {
	0% {
		--left: -10px;
	}
	20% {
		--left: 8px;
	}
	40% {
		--left: -6px;
	}
	60% {
		--left: 4px;
	}
	80% {
		--left: -2px;
	}
	100% {
		--left: 0;
	}
}

.input-group_input:not(:focus,.unfocussed):invalid ~ .input-group_label,
.input-group_input.has_error:not(:focus,.unfocussed) ~ .input-group_label {
	color: #ff4444;
	border-color: #ff4444;
}

.submit-btn {
	max-width: 300px;
	width: 100%;
	padding: 15px;
	cursor: pointer;
	border: none;
	background-color: rgb(0, 128, 55);
	color: white;
}