@charset "utf-8";

body
{
	background-color: hsla(0, 0%, 70%, 1);
}

#Chat > div:first-of-type .x-color,
#Chat > div:first-of-type .x-message,
#Chat > div:first-of-type .x-mention
{
	border-top-color: hsla(0, 0%, 100%, 1);
}

#insert .x-color,
#insert .x-message,
#insert .x-mention
{
	border-bottom-color: hsla(0, 0%, 100%, 1);
}

#Chat > div:first-of-type .x-focus,
#Chat > div:first-of-type .x-icon,
#Chat > div:first-of-type .x-sender,
#Chat > div:first-of-type .x-time
{
	border-top-color: hsla(0, 0%, 90%, 1);
}

#insert .x-focus,
#insert .x-icon,
#insert .x-sender,
#insert .x-time
{
	border-bottom-color: hsla(0, 0%, 90%, 1);
}

.history + :not(.history) .x-color,
.history + :not(.history) .x-message,
.history + :not(.history) .x-mention
{
	border-top-color: hsla(0, 0%, 100%, 1) !important;
}

.history + :not(.history) .x-focus,
.history + :not(.history) .x-icon,
.history + :not(.history) .x-sender,
.history + :not(.history) .x-time
{
	border-top-color: hsla(0, 0%, 90%, 1) !important;
}

.x-focus,
.x-icon,
.x-sender,
.x-time,
.history .x-message,
.history .x-mention,
.history.status .x-color,
.history.event .x-color
{
	background-color: hsla(0, 0%, 90%, 1) !important;
}

.firstFocus > .x-focus
{
	border-top-color: hsla(0, 0%, 90%, 1);
}

.status,
.event
{
	color: hsla(0, 0%, 59%, 1) !important;
}

.status:hover,
.event:hover
{
	color: hsla(0, 0%, 33%, 1) !important;
}

.status .x-color,
.event .x-color
{
	background-color: hsla(0, 0%, 100%, 1) !important;
}

.history .x-focus,
.history .x-icon,
.history .x-sender,
.history .x-time
{
	background-color: hsla(0, 0%, 80%, 1) !important;
}

.x-hover > .x-message,
.x-hover:not(.mention) > .x-mention
{
	background-color: hsla(0, 0%, 90%, 1) !important;
}

.history.x-hover > .x-message,
.history.x-hover:not(.mention) > .x-mention
{
	background-color: hsla(0, 0%, 80%, 1) !important;
}

.focus .x-focus
{
	background: hsla(0, 0%, 18%, 1) !important;
}

.x-line
{
	background-color: hsla(0, 0%, 80%, 1);
}

.history .x-line
{
	background-color: hsla(0, 0%, 65%, 1);
}

.x-message,
.x-mention
{
	background-color: hsla(0, 0%, 100%, 1);
}

.message:not(.history):not(.consecutive) .x-color,
.message:not(.history):not(.consecutive) .x-message,
.message:not(.history):not(.consecutive) .x-mention
{
	border-top-color: hsla(0, 0%, 100%, 1);
}

.message.history:not(.consecutive) .x-color,
.message.history:not(.consecutive) .x-message,
.message.history:not(.consecutive) .x-mention
{
	border-top-color: hsla(0, 0%, 90%, 1);
}

/*----------*/

#x-topic
{
	color: hsla(0, 0%, 18%, .8);
}

#x-topic #x-wrap
{
	background-color: hsla(0, 0%, 85%, .85);
	/*border-bottom: 1px solid hsl(0, 0%, 87%) !important;
	-webkit-box-shadow: 0px 1px 2px hsla(0, 0%, 0%, .2);*/
	border-bottom: .1em solid hsl(0, 0%, 87%) !important;
	-webkit-box-shadow: 0px .1em .2em hsla(0, 0%, 0%, .2);
}

#x-topic .x-toggle
{
	/*-webkit-box-shadow: 0px 1px 2px hsla(0, 0%, 0%, .2), 0px 0px 2px hsla(0, 0%, 0%, .2);*/
	-webkit-box-shadow: 0px .1em .2em hsla(0, 0%, 0%, .2), 0px 0px .2em hsla(0, 0%, 0%, .2);
}

#x-topic .x-toggle#x-hide,
#x-topic .x-toggle#x-show:hover
{
	background-color: hsla(0, 0%, 90%, 1);
}

#x-topic .x-toggle#x-hide:hover,
#x-topic .x-toggle#x-show
{
	background-color: hsla(0, 0%, 95%, 1);
}
