@font-face {
    font-family: Lato;
    src: url(/chat/assets/fonts/lato-bold-webfont.eot);
    src: url(/chat/assets/fonts/lato-bold-webfont.eot?#iefix) format('embedded-opentype'),url(/chat/assets/fonts/lato-bold-webfont.woff2) format('woff2'),url(/chat/assets/fonts/lato-bold-webfont.woff) format('woff'),url(/chat/assets/fonts/lato-bold-webfont.ttf) format('truetype'),url(/chat/assets/fonts/lato-bold-webfont.svg#latobold) format('svg');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(/chat/assets/fonts/lato-bold-webfont.eot);
    src: url(/chat/assets/fonts/lato-bold-webfont.eot?#iefix) format('embedded-opentype'),url(/chat/assets/fonts/lato-bold-webfont.woff2) format('woff2'),url(/chat/assets/fonts/lato-bold-webfont.woff) format('woff'),url(/chat/assets/fonts/lato-bold-webfont.ttf) format('truetype'),url(/chat/assets/fonts/lato-bold-webfont.svg#latolight) format('svg');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(/fonts/lato-regular-webfont.eot);
    src: url(/fonts/lato-regular-webfont.eot?#iefix) format('embedded-opentype'),url(/chat/assets/fonts/lato-regular-webfont.woff2) format('woff2'),url(/chat/assets/fonts/lato-regular-webfont.woff) format('woff'),url(/chat/assets/fonts/lato-regular-webfont.ttf) format('truetype'),url(/chat/assets/fonts/lato-regular-webfont.svg#latoregular) format('svg');
    font-weight: 400;
    font-style: normal
}

html, body, div, span, p, h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
}

body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	font-size: 16px;
	font-family: 'Open Sans', 'Roboto', sans-serif;
	background-image: linear-gradient(to bottom,#f4f4f4,#f4f4f4);
}

body::after {
  position: fixed;
  z-index: -1;
  background-image: linear-gradient(to bottom,#FF5A00,#FF5A00);
  width: 100%;
  height: 127px;
  content: '';
  top: 0;
  left: 0;
}

ul {
	margin: 0;
	list-style-type: none;
	padding: 0;
}

#contentWrapper {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

#chatWrapper {
	border: 1px solid #efefef;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.2);
	text-align: center;
	background: #efefef;
	height: 50%;
	width: 50%;
	min-height: 20em;
	margin: auto;
	position: relative;
	display: flex;
	border-radius: 4px;
}

#chatBackground {
	background-image: url("/chat/assets/img/splash2.png");
	background-size: 366.5px 666px;
	background-repeat: repeat repeat;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 65%;
	opacity: .06;
}

@media screen and (min-width: 800px) {
	#chatWrapper {
	    width: 900px;
	    height: calc(100% - 150px);
	    margin: 0 auto;
	    top: 19px;
	}
}

@media screen and (max-width: 799px) {
	#chatWrapper {
		width: 100%;
    	height: calc(100% - 150px);
    	margin: 0 auto;
    	top: 19px;
	}
}

#chatBox {
	overflow-x: hidden;
	overflow-y: scroll;
	height: calc(100% - 61px);
	width: 65%;
	text-align: left;
	padding: 10px;
	font-family: 'Helvetica Neue';
	position: absolute;
	right: 0;
	box-sizing: border-box;
}

#chatPanel1 {
	width: 35%;
	background: #fff;
	font-family: 'Open Sans', sans-serif;
}

.chat-header {
	height: 59px;
	background-color: #f2f2f2;
}

#chatMenu {
	overflow-y: scroll;
	max-height: calc(100% - 59px);
}

.chat-client {
	height: 72px;
	margin: 0;
	width: 100%;
	padding: 0;
	position: relative;
  cursor: pointer;
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.chat-client-avatar {
  border-radius: 50%;
  overflow: hidden;
	display: flex;
	padding: 0 15px 0 13px;
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: -1px;
}

.avatar {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}


.icon-user-default {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjEycHgiIGhlaWdodD0iMjEycHgiIHZpZXdCb3g9IjAgMCAyMTIgMjEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMTIgMjEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjREZFNUU3IiBkPSJNMTA1Ljk0NiwwLjI1QzE2NC4zMTgsMC4yNSwyMTEuNjQsNDcuNTk2LDIxMS42NCwxMDYNCgljMCw1OC40MDQtNDcuMzIyLDEwNS43NS0xMDUuNjk1LDEwNS43NUM0Ny41NzEsMjExLjc1LDAuMjUsMTY0LjQwNCwwLjI1LDEwNkMwLjI1LDQ3LjU5Niw0Ny41NzEsMC4yNSwxMDUuOTQ2LDAuMjV6Ii8+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTczLjU2MSwxNzEuNjE1Yy0wLjYwMS0wLjkxNS0xLjI4Ny0xLjkwNy0yLjA2NS0yLjk1NWMtMC43NzctMS4wNDktMS42NDUtMi4xNTUtMi42MDgtMy4yOTkNCgkJYy0wLjk2NC0xLjE0NC0yLjAyNC0yLjMyNi0zLjE4NC0zLjUyN2MtMS43NDEtMS44MDItMy43MS0zLjY0Ni01LjkyNC01LjQ3Yy0yLjk1Mi0yLjQzMS02LjMzOS00LjgyNC0xMC4yMDQtNy4wMjYNCgkJYy0xLjg3Ny0xLjA3LTMuODczLTIuMDkyLTUuOTgtMy4wNTVjLTAuMDYyLTAuMDI4LTAuMTE4LTAuMDU5LTAuMTgtMC4wODdjLTkuNzkyLTQuNDQtMjIuMTA2LTcuNTI5LTM3LjQxNi03LjUyOQ0KCQljLTE1LjMxLDAtMjcuNjI0LDMuMDg5LTM3LjQxNiw3LjUyOWMtMC4zMzgsMC4xNTMtMC42NTMsMC4zMTgtMC45ODUsMC40NzRjLTEuNDMxLDAuNjc0LTIuODA2LDEuMzc2LTQuMTI4LDIuMTAxDQoJCWMtMC43MTYsMC4zOTMtMS40MTcsMC43OTItMi4xMDEsMS4xOTdjLTMuNDIxLDIuMDI3LTYuNDc1LDQuMTkxLTkuMTUsNi4zOTVjLTIuMjEzLDEuODIzLTQuMTgyLDMuNjY4LTUuOTI0LDUuNDcNCgkJYy0xLjE2MSwxLjIwMS0yLjIyLDIuMzg0LTMuMTg0LDMuNTI3Yy0wLjk2NCwxLjE0NC0xLjgzMiwyLjI1LTIuNjA5LDMuMjk5Yy0wLjc3OCwxLjA0OS0xLjQ2NCwyLjA0LTIuMDY1LDIuOTU1DQoJCWMtMC41NTcsMC44NDgtMS4wMzMsMS42MjItMS40NDcsMi4zMjRjLTAuMDMzLDAuMDU2LTAuMDczLDAuMTE5LTAuMTA0LDAuMTc0Yy0wLjQzNSwwLjc0NC0wLjc5LDEuMzkyLTEuMDcsMS45MjYNCgkJYy0wLjU1OSwxLjA2OC0wLjgxOCwxLjY3OC0wLjgxOCwxLjY3OHYwLjM5OGMxOC4yODUsMTcuOTI3LDQzLjMyMiwyOC45ODUsNzAuOTQ1LDI4Ljk4NWMyNy42NzgsMCw1Mi43NjEtMTEuMTAzLDcxLjA1NS0yOS4wOTUNCgkJdi0wLjI4OWMwLDAtMC42MTktMS40NS0xLjk5Mi0zLjc3OEMxNzQuNTk0LDE3My4yMzgsMTc0LjExNywxNzIuNDYzLDE3My41NjEsMTcxLjYxNXoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTA2LjAwMiwxMjUuNWMyLjY0NSwwLDUuMjEyLTAuMjUzLDcuNjgtMC43MzdjMS4yMzQtMC4yNDIsMi40NDMtMC41NDIsMy42MjQtMC44OTYNCgkJYzEuNzcyLTAuNTMyLDMuNDgyLTEuMTg4LDUuMTItMS45NThjMi4xODQtMS4wMjcsNC4yNDItMi4yNTgsNi4xNS0zLjY3YzIuODYzLTIuMTE5LDUuMzktNC42NDYsNy41MDktNy41MDkNCgkJYzAuNzA2LTAuOTU0LDEuMzY3LTEuOTQ1LDEuOTgtMi45NzFjMC45MTktMS41MzksMS43MjktMy4xNTUsMi40MjItNC44NGMwLjQ2Mi0xLjEyMywwLjg3Mi0yLjI3NywxLjIyNi0zLjQ1OA0KCQljMC4xNzctMC41OTEsMC4zNDEtMS4xODgsMC40OS0xLjc5MmMwLjI5OS0xLjIwOCwwLjU0Mi0yLjQ0MywwLjcyNS0zLjcwMWMwLjI3NS0xLjg4NywwLjQxNy0zLjgyNywwLjQxNy01LjgxMQ0KCQljMC0xLjk4NC0wLjE0Mi0zLjkyNS0wLjQxNy01LjgxMWMtMC4xODQtMS4yNTgtMC40MjYtMi40OTMtMC43MjUtMy43MDFjLTAuMTUtMC42MDQtMC4zMTMtMS4yMDItMC40OS0xLjc5Mw0KCQljLTAuMzU0LTEuMTgxLTAuNzY0LTIuMzM1LTEuMjI2LTMuNDU4Yy0wLjY5My0xLjY4NS0xLjUwNC0zLjMwMS0yLjQyMi00Ljg0Yy0wLjYxMy0xLjAyNi0xLjI3NC0yLjAxNy0xLjk4LTIuOTcxDQoJCWMtMi4xMTktMi44NjMtNC42NDYtNS4zOS03LjUwOS03LjUwOWMtMS45MDktMS40MTItMy45NjYtMi42NDMtNi4xNS0zLjY3Yy0xLjYzOC0wLjc3LTMuMzQ4LTEuNDI2LTUuMTItMS45NTgNCgkJYy0xLjE4MS0wLjM1NS0yLjM5LTAuNjU1LTMuNjI0LTAuODk2Yy0yLjQ2OC0wLjQ4NC01LjAzNS0wLjczNy03LjY4LTAuNzM3Yy0yMS4xNjIsMC0zNy4zNDUsMTYuMTgzLTM3LjM0NSwzNy4zNDUNCgkJQzY4LjY1NywxMDkuMzE3LDg0Ljg0LDEyNS41LDEwNi4wMDIsMTI1LjV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==);
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjEycHgiIGhlaWdodD0iMjEycHgiIHZpZXdCb3g9IjAgMCAyMTIgMjEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMTIgMjEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjREZFNUU3IiBkPSJNMTA1Ljk0NiwwLjI1QzE2NC4zMTgsMC4yNSwyMTEuNjQsNDcuNTk2LDIxMS42NCwxMDYNCgljMCw1OC40MDQtNDcuMzIyLDEwNS43NS0xMDUuNjk1LDEwNS43NUM0Ny41NzEsMjExLjc1LDAuMjUsMTY0LjQwNCwwLjI1LDEwNkMwLjI1LDQ3LjU5Niw0Ny41NzEsMC4yNSwxMDUuOTQ2LDAuMjV6Ii8+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTczLjU2MSwxNzEuNjE1Yy0wLjYwMS0wLjkxNS0xLjI4Ny0xLjkwNy0yLjA2NS0yLjk1NWMtMC43NzctMS4wNDktMS42NDUtMi4xNTUtMi42MDgtMy4yOTkNCgkJYy0wLjk2NC0xLjE0NC0yLjAyNC0yLjMyNi0zLjE4NC0zLjUyN2MtMS43NDEtMS44MDItMy43MS0zLjY0Ni01LjkyNC01LjQ3Yy0yLjk1Mi0yLjQzMS02LjMzOS00LjgyNC0xMC4yMDQtNy4wMjYNCgkJYy0xLjg3Ny0xLjA3LTMuODczLTIuMDkyLTUuOTgtMy4wNTVjLTAuMDYyLTAuMDI4LTAuMTE4LTAuMDU5LTAuMTgtMC4wODdjLTkuNzkyLTQuNDQtMjIuMTA2LTcuNTI5LTM3LjQxNi03LjUyOQ0KCQljLTE1LjMxLDAtMjcuNjI0LDMuMDg5LTM3LjQxNiw3LjUyOWMtMC4zMzgsMC4xNTMtMC42NTMsMC4zMTgtMC45ODUsMC40NzRjLTEuNDMxLDAuNjc0LTIuODA2LDEuMzc2LTQuMTI4LDIuMTAxDQoJCWMtMC43MTYsMC4zOTMtMS40MTcsMC43OTItMi4xMDEsMS4xOTdjLTMuNDIxLDIuMDI3LTYuNDc1LDQuMTkxLTkuMTUsNi4zOTVjLTIuMjEzLDEuODIzLTQuMTgyLDMuNjY4LTUuOTI0LDUuNDcNCgkJYy0xLjE2MSwxLjIwMS0yLjIyLDIuMzg0LTMuMTg0LDMuNTI3Yy0wLjk2NCwxLjE0NC0xLjgzMiwyLjI1LTIuNjA5LDMuMjk5Yy0wLjc3OCwxLjA0OS0xLjQ2NCwyLjA0LTIuMDY1LDIuOTU1DQoJCWMtMC41NTcsMC44NDgtMS4wMzMsMS42MjItMS40NDcsMi4zMjRjLTAuMDMzLDAuMDU2LTAuMDczLDAuMTE5LTAuMTA0LDAuMTc0Yy0wLjQzNSwwLjc0NC0wLjc5LDEuMzkyLTEuMDcsMS45MjYNCgkJYy0wLjU1OSwxLjA2OC0wLjgxOCwxLjY3OC0wLjgxOCwxLjY3OHYwLjM5OGMxOC4yODUsMTcuOTI3LDQzLjMyMiwyOC45ODUsNzAuOTQ1LDI4Ljk4NWMyNy42NzgsMCw1Mi43NjEtMTEuMTAzLDcxLjA1NS0yOS4wOTUNCgkJdi0wLjI4OWMwLDAtMC42MTktMS40NS0xLjk5Mi0zLjc3OEMxNzQuNTk0LDE3My4yMzgsMTc0LjExNywxNzIuNDYzLDE3My41NjEsMTcxLjYxNXoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTA2LjAwMiwxMjUuNWMyLjY0NSwwLDUuMjEyLTAuMjUzLDcuNjgtMC43MzdjMS4yMzQtMC4yNDIsMi40NDMtMC41NDIsMy42MjQtMC44OTYNCgkJYzEuNzcyLTAuNTMyLDMuNDgyLTEuMTg4LDUuMTItMS45NThjMi4xODQtMS4wMjcsNC4yNDItMi4yNTgsNi4xNS0zLjY3YzIuODYzLTIuMTE5LDUuMzktNC42NDYsNy41MDktNy41MDkNCgkJYzAuNzA2LTAuOTU0LDEuMzY3LTEuOTQ1LDEuOTgtMi45NzFjMC45MTktMS41MzksMS43MjktMy4xNTUsMi40MjItNC44NGMwLjQ2Mi0xLjEyMywwLjg3Mi0yLjI3NywxLjIyNi0zLjQ1OA0KCQljMC4xNzctMC41OTEsMC4zNDEtMS4xODgsMC40OS0xLjc5MmMwLjI5OS0xLjIwOCwwLjU0Mi0yLjQ0MywwLjcyNS0zLjcwMWMwLjI3NS0xLjg4NywwLjQxNy0zLjgyNywwLjQxNy01LjgxMQ0KCQljMC0xLjk4NC0wLjE0Mi0zLjkyNS0wLjQxNy01LjgxMWMtMC4xODQtMS4yNTgtMC40MjYtMi40OTMtMC43MjUtMy43MDFjLTAuMTUtMC42MDQtMC4zMTMtMS4yMDItMC40OS0xLjc5Mw0KCQljLTAuMzU0LTEuMTgxLTAuNzY0LTIuMzM1LTEuMjI2LTMuNDU4Yy0wLjY5My0xLjY4NS0xLjUwNC0zLjMwMS0yLjQyMi00Ljg0Yy0wLjYxMy0xLjAyNi0xLjI3NC0yLjAxNy0xLjk4LTIuOTcxDQoJCWMtMi4xMTktMi44NjMtNC42NDYtNS4zOS03LjUwOS03LjUwOWMtMS45MDktMS40MTItMy45NjYtMi42NDMtNi4xNS0zLjY3Yy0xLjYzOC0wLjc3LTMuMzQ4LTEuNDI2LTUuMTItMS45NTgNCgkJYy0xLjE4MS0wLjM1NS0yLjM5LTAuNjU1LTMuNjI0LTAuODk2Yy0yLjQ2OC0wLjQ4NC01LjAzNS0wLjczNy03LjY4LTAuNzM3Yy0yMS4xNjIsMC0zNy4zNDUsMTYuMTgzLTM3LjM0NSwzNy4zNDUNCgkJQzY4LjY1NywxMDkuMzE3LDg0Ljg0LDEyNS41LDEwNi4wMDIsMTI1LjV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==;
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjEycHgiIGhlaWdodD0iMjEycHgiIHZpZXdCb3g9IjAgMCAyMTIgMjEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMTIgMjEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjREZFNUU3IiBkPSJNMTA1Ljk0NiwwLjI1QzE2NC4zMTgsMC4yNSwyMTEuNjQsNDcuNTk2LDIxMS42NCwxMDYNCgljMCw1OC40MDQtNDcuMzIyLDEwNS43NS0xMDUuNjk1LDEwNS43NUM0Ny41NzEsMjExLjc1LDAuMjUsMTY0LjQwNCwwLjI1LDEwNkMwLjI1LDQ3LjU5Niw0Ny41NzEsMC4yNSwxMDUuOTQ2LDAuMjV6Ii8+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTczLjU2MSwxNzEuNjE1Yy0wLjYwMS0wLjkxNS0xLjI4Ny0xLjkwNy0yLjA2NS0yLjk1NWMtMC43NzctMS4wNDktMS42NDUtMi4xNTUtMi42MDgtMy4yOTkNCgkJYy0wLjk2NC0xLjE0NC0yLjAyNC0yLjMyNi0zLjE4NC0zLjUyN2MtMS43NDEtMS44MDItMy43MS0zLjY0Ni01LjkyNC01LjQ3Yy0yLjk1Mi0yLjQzMS02LjMzOS00LjgyNC0xMC4yMDQtNy4wMjYNCgkJYy0xLjg3Ny0xLjA3LTMuODczLTIuMDkyLTUuOTgtMy4wNTVjLTAuMDYyLTAuMDI4LTAuMTE4LTAuMDU5LTAuMTgtMC4wODdjLTkuNzkyLTQuNDQtMjIuMTA2LTcuNTI5LTM3LjQxNi03LjUyOQ0KCQljLTE1LjMxLDAtMjcuNjI0LDMuMDg5LTM3LjQxNiw3LjUyOWMtMC4zMzgsMC4xNTMtMC42NTMsMC4zMTgtMC45ODUsMC40NzRjLTEuNDMxLDAuNjc0LTIuODA2LDEuMzc2LTQuMTI4LDIuMTAxDQoJCWMtMC43MTYsMC4zOTMtMS40MTcsMC43OTItMi4xMDEsMS4xOTdjLTMuNDIxLDIuMDI3LTYuNDc1LDQuMTkxLTkuMTUsNi4zOTVjLTIuMjEzLDEuODIzLTQuMTgyLDMuNjY4LTUuOTI0LDUuNDcNCgkJYy0xLjE2MSwxLjIwMS0yLjIyLDIuMzg0LTMuMTg0LDMuNTI3Yy0wLjk2NCwxLjE0NC0xLjgzMiwyLjI1LTIuNjA5LDMuMjk5Yy0wLjc3OCwxLjA0OS0xLjQ2NCwyLjA0LTIuMDY1LDIuOTU1DQoJCWMtMC41NTcsMC44NDgtMS4wMzMsMS42MjItMS40NDcsMi4zMjRjLTAuMDMzLDAuMDU2LTAuMDczLDAuMTE5LTAuMTA0LDAuMTc0Yy0wLjQzNSwwLjc0NC0wLjc5LDEuMzkyLTEuMDcsMS45MjYNCgkJYy0wLjU1OSwxLjA2OC0wLjgxOCwxLjY3OC0wLjgxOCwxLjY3OHYwLjM5OGMxOC4yODUsMTcuOTI3LDQzLjMyMiwyOC45ODUsNzAuOTQ1LDI4Ljk4NWMyNy42NzgsMCw1Mi43NjEtMTEuMTAzLDcxLjA1NS0yOS4wOTUNCgkJdi0wLjI4OWMwLDAtMC42MTktMS40NS0xLjk5Mi0zLjc3OEMxNzQuNTk0LDE3My4yMzgsMTc0LjExNywxNzIuNDYzLDE3My41NjEsMTcxLjYxNXoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTA2LjAwMiwxMjUuNWMyLjY0NSwwLDUuMjEyLTAuMjUzLDcuNjgtMC43MzdjMS4yMzQtMC4yNDIsMi40NDMtMC41NDIsMy42MjQtMC44OTYNCgkJYzEuNzcyLTAuNTMyLDMuNDgyLTEuMTg4LDUuMTItMS45NThjMi4xODQtMS4wMjcsNC4yNDItMi4yNTgsNi4xNS0zLjY3YzIuODYzLTIuMTE5LDUuMzktNC42NDYsNy41MDktNy41MDkNCgkJYzAuNzA2LTAuOTU0LDEuMzY3LTEuOTQ1LDEuOTgtMi45NzFjMC45MTktMS41MzksMS43MjktMy4xNTUsMi40MjItNC44NGMwLjQ2Mi0xLjEyMywwLjg3Mi0yLjI3NywxLjIyNi0zLjQ1OA0KCQljMC4xNzctMC41OTEsMC4zNDEtMS4xODgsMC40OS0xLjc5MmMwLjI5OS0xLjIwOCwwLjU0Mi0yLjQ0MywwLjcyNS0zLjcwMWMwLjI3NS0xLjg4NywwLjQxNy0zLjgyNywwLjQxNy01LjgxMQ0KCQljMC0xLjk4NC0wLjE0Mi0zLjkyNS0wLjQxNy01LjgxMWMtMC4xODQtMS4yNTgtMC40MjYtMi40OTMtMC43MjUtMy43MDFjLTAuMTUtMC42MDQtMC4zMTMtMS4yMDItMC40OS0xLjc5Mw0KCQljLTAuMzU0LTEuMTgxLTAuNzY0LTIuMzM1LTEuMjI2LTMuNDU4Yy0wLjY5My0xLjY4NS0xLjUwNC0zLjMwMS0yLjQyMi00Ljg0Yy0wLjYxMy0xLjAyNi0xLjI3NC0yLjAxNy0xLjk4LTIuOTcxDQoJCWMtMi4xMTktMi44NjMtNC42NDYtNS4zOS03LjUwOS03LjUwOWMtMS45MDktMS40MTItMy45NjYtMi42NDMtNi4xNS0zLjY3Yy0xLjYzOC0wLjc3LTMuMzQ4LTEuNDI2LTUuMTItMS45NTgNCgkJYy0xLjE4MS0wLjM1NS0yLjM5LTAuNjU1LTMuNjI0LTAuODk2Yy0yLjQ2OC0wLjQ4NC01LjAzNS0wLjczNy03LjY4LTAuNzM3Yy0yMS4xNjIsMC0zNy4zNDUsMTYuMTgzLTM3LjM0NSwzNy4zNDUNCgkJQzY4LjY1NywxMDkuMzE3LDg0Ljg0LDEyNS41LDEwNi4wMDIsMTI1LjV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==;
}

.chat-client-body {
	border-top: 1px solid #f2f2f2;
	padding-right: 15px;
	display: flex;
	-webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
}

.chat-client-primary {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	line-height: normal;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	text-align: left;
	margin-top: -1px;
}

.chat-client-secondary {
	margin-top: 3px;
    min-height: 20px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
	font-size: 13px;
    line-height: 19px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.chat-client-name {
	text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.chat-client-meta {
	line-height: 14px;
	margin-top: 4px;
	color: rgba(0,0,0,.4);
	font-size: 12px;
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-left: 6px;
}

.chat-client-meta .chat-client-time {
    text-transform: capitalize;
}

.chat-client-status {
		display: flex;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(0,0,0,.6);
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: left;
}

.ellipsify {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#chatbox ul, #title {
	color: #6d6d6d;
}

#messageBox {
	width: 65%;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	right: 0;
  background-color: #f5f1ee;
  padding: 10px 30px;
	color: black;
}

#messageInput {
	font-family: 'Open Sans', sans-serif;
	font-size: 13.6px;
	height: 3em;
	width: 100%;
	border: 1px solid #fefefe;
	background: #fefefe;
	padding: 1em;
	color: #4b4b4b;
	border-radius: 5px;
}

#titleWrapper {
	width: 100%;
	text-align: left;
}

#title {
	font-family: 'Comic Sans Ms';
	padding: 5px 5px 5px 20px !important;
	margin: 0;
	font-weight: 600;
}

#logo {
	height: 30px;
	display: inline-block;
}

#logoWrapper{
	padding-bottom: 20px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.msg {
	padding-left: 9%;
  padding-right: 9%;
  margin-bottom: 12px;
  position: relative;
}

.bubble {
	padding: 6px 7px 20px 9px;
}

.bubble-text .message-meta {
  bottom: 3px;
  right: 7px;
}

.message-meta {
    position: absolute;
    bottom: -5px;
    right: 0;
    font-size: 11px;
    color: rgba(0,0,0,.45);
    line-height: 15px;
    height: 15px;
}

.message {
}

.message-sender {
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  text-transform: capitalize;
  line-height: 20px;
  height: 20px;
  font-weight: 600;
  margin-bottom: 1px;
  color: #74cff8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-content {
	position: relative;
	font-size: 13.6px;
  line-height: 19px;
  font-family: 'Open Sans',sans-serif;
  word-wrap: break-word;
  color: #262626;
}

.message-content::after {
    content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    display: inline;
}

.message-timestamp {
  vertical-align: top;
  margin-top: 1px;
  display: inline-block;
}

.message-in:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
}

.tail.message-in:before {
  content: '';
  position: absolute;
  left: -11px;
  bottom: 3px;
  width: 12px;
  height: 19px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.message-in {
  background-color: #fff;
  float: left;
}

.message-out {
	background-color: #dcf8c6;
	float: right;
}

.tail.message-out:before {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 12px;
    height: 19px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.message-out::before {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
}

.tail.message-out:before {
    right: -11px;
}

.message-in, .message-out {
    border-radius: 7.5px;
    position: relative;
    box-shadow: 0 1px .5px rgba(0,0,0,.13);
}

.msg:after {
    content: '';
    display: table;
    clear: both;
}

.left-the-chat {
	color: red;
	font-style: italic;
}

.disconnected-client {
    opacity: .3;
}

.connected .chat-client-name::after {
    content: ' \25CF';
    font-size: 10px;
    color: #8bc34a;
}

*::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2)
}

*::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08)
}

@media screen and (max-width : 667px) {
	body {
		margin: 0;
		padding: 0;
		zoom: 1.1;
	}

	#contentWrapper {
		margin-top: 53px;
		overflow:hidden;
	}

	#chatWrapper {
		width: 100%;
		height: 100%;
		transform: initial;
		position: fixed;
		left: 0;
		top: 53px;
		overflow-y: scroll;
	}

	#chatPanel1 {
		width: 0;
		visibility: hidden;
	}

	#chatBox {
		height: calc(100% - 81px);
		width: 100%;
	}

/*	#chatPanel2 {
		position: fixed;
    left: 0;
    right: 0;
    top: 53px;
    bottom: 30px;
    height: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
	}*/

	#titleWrapper {
		position: fixed;
		left: 0;
		top: 0;
		padding: 10px;
	}
	#logoWrapper {
		visibility: hidden;
	}

	#messageBox {
		width: 100%;
		padding: 0;
		position: fixed;
		height: initial;
		border: 0;
		box-shadow: none;
	}

	#messageForm, #messageInput {
		width: inherit;
		height: inherit;
		max-width: initial;
	}
	#messageInput {
		padding: 10px;
		border-radius:initial;
	}
	#messageForm {
    box-sizing: border-box;
	}
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}

.modal-backdrop.in {
	background: #efefef;
}

.modal-content {
	box-shadow: none;
	border: 0;
	font-family: 'Lato','Open Sans', sans-serif;
}

#welcome-wrapper {
	font-family: 'Lato', 'Open Sans', sans-serif;
	width: 100%;
	padding: 10px;
	background: #fff;
	text-align: center;
	position: relative;
}

#welcome-wrapper .input-group {
	display: inline-table;
	margin-top: 10px;
	width: 100%;
}

#welcome-title h1 {
	-webkit-font-smoothing: antialiased;
	font-size: 20px;
	color: rgba(64,64,64,1);
	font-weight: 700;
	margin: 5px;
	letter-spacing: .3px;
}

.light-blue {
	color: #33a0ff;
}

#welcome-message {
	font-size: 14px;
	color: rgba(0,0,0,.4);
	font-weight: 400;
}

#welcome-content {
	top: 50%;
  text-align: center;
  position: absolute;
  transform: translateY(-50%);
  margin: auto;
  width: 100%;
}

#nicknameInput {
	font-size: 10px;
	font-family: 'Open Sans';
	padding: 4px;
	font-weight: lighter;
	border: 1px solid #efefef;
}