.support {
	display: flex;
	background: lightgrey;
	flex-direction: column;
	flex-wrap: nowrap;
}

.support > header {
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	color: grey;
	border-bottom: 1px solid lightgrey;
	padding: 1px 4px;
	margin: 0;
	display: inline-block;
}
.support > header time {
	font-weight: 200;
	font-size: 0.8em;
	text-transform: lowercase;
	color: grey;
}
.support > header time.available {
	color: green;
}
.support .usernames {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background: white;
}
.support .chats {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

.support .usernames .username {
	margin: 1px;
	padding: 1px 4px;
	background: grey;
	color: white;
	order: 1;
}
.support .usernames .username.open {
	background: white;
	font-weight: 500;
	color: black;
}

.support .messages {
	display: none;
	background: whitesmoke;
}

.support .messages.open {
	display: block;
}
.support .messages .message {
	padding: 1px 4px;
	margin: 0;
	text-align: left;
}
.support .messages .message.reply {
	text-align: right;
}
.support .messages .message.unread .text {
}
.support .messages .message.read .text {
	color: grey;
}

.support .messages .message time {
	float: left;
	margin-right: 2mm;
	padding: 2px;
	display: inline-block;
	font-size: 0.8em;
	font-style: italic;
	color: darkcyan;
}
.support .messages .message.reply time {
	float: right;
	margin-left: 2mm;
	color: darkred;
}

.support footer {
	display: block;
	padding: 0;
	margin: 0;
	width: 100vw;
}
.support footer form {
	padding: 0;
	margin: 0;
}
.support footer input {
	width: -webkit-fill-available;
	margin: 0;
	padding: 0;
}
.support footer input:active {
}
.support footer input:hover {
}

#ad {
	position: fixed;
	display: block;
	margin: 0;
	cursor: help;
	padding: 1mm;
	z-index: 9;
	bottom: 12mm;
	right: 1cm;
	text-align: center;
	background: yellow;
	padding: 1mm 4mm;
	border-radius: 1mm;
	box-shadow: 1px 2px 6px RGBA(0,0,0,0.2);
	opacity:66%;
}
#ad:hover {
	opacity:100%;
}
#ad:before {
	content: "";
    position: absolute;
    bottom: -15px;
    left: 20px;
    border-width: 0 20px 15px 0px;
    border-style: solid;
    border-color: transparent yellow;
	z-index:-9;
    display: block;
    width: 0;
}


#ad > div:first-child {
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: uppercase;
	color: black;
}
#ad > div.live:first-child {
	color: red;
}
#ad > div:last-child {
	font-size: 1rem;
	font-weight: 200;
	font-style: italic;
	color: green;
}
#ad > div.offline:last-child {
	color: grey;
}
#ad > div.new:last-child {
	font-weight: 600;
}