/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
img { 
	vertical-align: middle
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 62.5%
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
b, strong {
	font-weight: bold;
}
i, em {
	font-style: italic
}
a {
	text-decoration: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
body {
	font-family: Helvetica, Arial, sans-serif;
	background-color: #FFF
}

	body.small {
		background-color: transparent;
	}
	
	input,
	button {
		width: 100%;
		display: block;
		padding: 1em;
		font-size: 1.2em;
		outline: none;
		border: 0 none;
		border-top: 1px solid #CCC;
		font-family: inherit;
		box-sizing: border-box;
		color: inherit;
	}
	button {
		cursor: pointer;
	}
	
/* WELCOME */
#welcome {
	position: fixed;
	width: 100%;
	bottom: 0;
	top: 3.8em;
}
	#welcome form {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: calc(100% - 4em);
	}
	#welcome label {
		font-size: 1.2em;
		padding: 1em;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		display: block;
		float: left;
		width: 6.5em;
		text-align: right;
		box-sizing: border-box;
		line-height: 1.2em;
	}
	#welcome input {
		text-align: center;
		background-color: transparent;
		border: 0 none;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		float: left;
		width: calc(100% - 6.5em);
		line-height: 1.2em;
	}
	#welcome button {
		border: 0 none;
	}

/* DISCONNECTED */
/*.offline header {
	background-color: #333
}*/

.offline #welcome {
	background-color: #FFF;
}

	.offline #welcome p {
		color: #999;
		font-size: 1.3em;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 75%;
		line-height: 1.7em;
		text-align: center;
	}

/* CHAT WINDOW */
header {
	font-size: 1.3em;
	font-weight: bold;
	padding: 1em;
	border-radius: 0.5em 0.5em 0 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 20;
	cursor: pointer;
}
header svg {
	display: none;
}
header .fa {
	float: right;
}
body.opened header .fa:before {
	content: "\f068"
}
#chat:before {
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	content: "";
	position: absolute;
	width: 100%;
	top: 3.9em;
	height: calc(100% - 3.9em);
	box-sizing: border-box;
	z-index: 200;
	pointer-events: none;
}
#chat #main {
	padding: 1.5em;
	position: fixed;
	top: 3.9em;
	bottom: 4em;
	padding-bottom: 3.5em;
	overflow: auto;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff
}

#chat #user {
	display: none;
}

#chat #main .gif {
	display: block;
	max-width: 80%;
	margin: 15px 0;
}

#chat #main .gif.me {
	float: right;
}

	#chat #main .gif.me:after {
		content: "";
		display: block;
		clear: both;
	}

#chat #main .gif img {
	width: 100%;
}

#chat #main p {
	font-size: 1.3em;
	margin-bottom: 1em;
	line-height: 1.5em;
}
#chat #main p.legal {
	color: #999;
	border-bottom: 1px solid #CCC;
	padding-bottom: 1em;
	margin-bottom: 1em;
	font-size: 1.1em;
}

#chat #main p.legal a {
	color: inherit;
	text-decoration: underline;
}

#chat #main p:last-child {
	margin-bottom: 0;
}

#chat #main p.closed {
	text-align: center;
    font-size: 1.1em;
    color: #999;	
    position: relative;
}

	#chat #main p.closed span {
		background-color: #FFF;
		padding: 0 0.5em;
		position: relative;
		z-index: 2;
	}

#chat #main .time {
	color: #999;
	font-size: 0.75em
}

#chat #footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #FFF;
}
	#chat #footer small {
		font-size: 1.1em;
		display: none;
		margin: 1em;
	}
	
	#chat #footer input {
		border: 0 none;		
	}
	
body.small header {
	border-radius: 0;
}
body.small.closed header .fa,
body.small.closed #chat {
	display: none !important;
}
body.small.closed header {
	width: 4em;
	height: 4em;
	border-radius: 100%;
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.2);
	position: absolute;
	right: 1em;
	top: 0;
	left: auto;
	animation: highlight 2s;
	animation-iteration-count: infinite;
}
body.small.closed.left header {
	right: auto;
	left: 1em;
}
body.small.closed.m-center header {
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}
body.small.closed header h1 {
	text-indent: -9999em;
}
body.small.closed svg {
	display: block;
	width: 100%;
	height: 100%;
}
body.small.closed .svg {
	animation: highlight 2s;
	animation-iteration-count: infinite;
}
body.small.closed #chat {
	display: none;
}
body.small input {
	font-size: 16px
}

/* NEW THEME */
body.chat #chat #main .divider {
	display: block;
}

body.chat #chat #main .message {
	background-color: #F6F6F6;
    display: inline-block;
    border-radius: 5px;
    margin-top: 5px;
    padding: 5px 10px;
    font-size: 1em;
    color: #333;
    text-align: left;
}

body.chat #chat #main p.me {
	margin-left: 20px;
	text-align: right;
}

body.chat #chat #main p.her {
	margin-right: 20px;
}

body.chat #chat #main strong span {
	display: none;
}

/* MODERN */
body.modern {
	font-family: Muli;
}

body.modern header {
    border-radius: 0;
    padding-right: 0.8em;
    padding-bottom: 0.6em;
    padding-top: 0.9em;
}

body.modern #chat:before {
	display: none;
}

body.modern #chat #footer input {
    margin: 1em;
    border: 1px solid #CCC;
    background-color: #FAFAFA;
    border-radius: 2em;
    padding: 0.5em 1em;
    width: calc(100% - 2em);
}

body.modern header .icons {
	margin-top: -3px;
}

body.modern header .fa-plus {
	position: relative;	
    width: 18px;
    height: 18px;
    margin: -3px 2px 2px 0;
}

	body.modern.opened header .fa-plus:after {
		width: 0;
	}
	
body.modern header .fa-plus:before,
body.modern header .fa-plus:after {
	content: "";
	width: 18px;
	height: 1px;
	background-color: #FFF;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -1px;
    transition: width 0.3s ease-in;
}

body.modern header .fa-plus:after {
	transform: rotate(90deg);
}

body.modern #chat #user {
    height: 6em;
    position: fixed;
    top: 3.6em;
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 20;
}

	body.modern #chat #user .avatar {
		width: 4em;
		margin-right: 1em;
	}
	
	body.modern #chat #user img {
		width: 4em;
		height: 4em;
		object-fit: cover;
		border-radius: 100%;
	}
	
	body.modern #chat #user .info {
		width: calc(100% - 4em);
	}
	
		body.modern #chat #user .info .name {
			font-size: 1.4em;
		}
	
		body.modern #chat #user .info .status {
			margin-top: 0.5em;
			opacity: 0.5;
		}
		
			body.modern #chat #user .info .status:before {
			    display: inline-block;
			    content: "";
			    vertical-align: middle;
			    margin-right: 5px;
			    width: 7px;
			    height: 7px;
			    background-color: #55d366;
			    border-radius: 100%;
			    margin-top: -2px;
	    	}
	    	
	    body.modern #chat #user .info .buttons {
		    position: absolute;
		    right: 1em;
		    top: 0;
		    display: block;
	    }
	    
	    	body.modern #chat #user .info .buttons span {
	    	    display: inline-block;
			    vertical-align: middle;
			    width: 20px;
			    height: 20px;
			    background-image: url(../images/like.svg);
			    cursor: pointer;
			    background-size: contain;
			    opacity: 0.5;
			    transition: opacity 0.2s ease-in;
			    display: none;
	    	}
	    	
	    	body.modern #chat #user .info .buttons span:hover,
	    	body.modern #chat #user .info .buttons span.active {
		    	opacity: 1;
	    	}
	    	
	    	body.modern #chat #user .info .buttons span.inactive {
		    	opacity: 0;
		    	cursor: default;
		    	pointer-events: none;
	    	}
	    	
	    	body.modern #chat #user .info .buttons span.dislike {
		    	transform: rotate(180deg) scale(-1,1);
		    	margin-left: 1em;
	    	}
	    	
	    	body.modern #chat #user .info .buttons span.active {
			    background-image: url(../images/like-active.svg);
		    	cursor: default;
		    	pointer-events: none;
	    	}

body.modern #chat #main {
	top: 9.6em;
}

body.modern #chat #main p {
	margin-bottom: 0.5em;
}

body.modern #chat #main p.her + p.me,
body.modern #chat #main p.me + p.her {
	margin-top: 1em;
}

body.modern #chat #main .time,
body.modern #chat #main strong {
	display: none;
}

body.modern #chat #main .message {
	background-color: #F5F5F5;
    border-radius: 2em;
    padding: 0.5em 1em;
    text-align: left;
    display: inline-block;
    line-height: 1.2em;
}

body.modern #chat #main p.me {
	text-align: right;
}

body #chat .buttons {
	margin: 20px 0;
}

/* ACCEPT TOS */
#largeLegal {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #FFF;
	text-align: center;
    padding: 0 2em;
    box-sizing: border-box;
}

	#largeLegal button {
		border: 0 none;
		margin-top: 1em;
	}
	
	body.modern #chat #largeLegal p {
		font-size: 1.2em;
	}