/*___________________________________ TYPOGRAPHY ____________________ */
html {
	font: 16px droid-sans, sans-serif !important;
	overflow: hidden;
}
body {
	font-family: inherit;
	font-size:1em;
	color: #000;
	background: white;
	padding:0px;
	margin:0;
}
#welcome
{
	top: 0;
	border-radius:0;
	box-shadow:0;
	padding:0;
	color:#0c2344;
	margin: 0;
	transform: translateX(-50%);
	width: 100%;
	height: calc(100% - 1px);
	background:#FFF url('https://www.nationalwindscreens.co.uk/images/webchat/n-bg.png') 100% 100% / 180px auto no-repeat;
}
#welcome h1
{
	margin-top: 2.2rem;
	margin-bottom: 2rem;
	font-size: 2em;
	color: rgb(228,18,28);
	font-weight: 200;
	padding-left: 1.5rem;
}
#welcome_connecting {
	background: url('https://www.nationalwindscreens.co.uk/images/webchat/Webchat-loading-graphic.gif') 0 center / contain no-repeat;
	height: 20px;
}
#welcome > div
{
	margin-top: 0.5rem;
	font-size: 1em;
	padding-left: 1.5rem;
}
#welcome > div:not(#welcome_connect_wrap) input
{
	max-width: 14rem;
}
#welcome > div#welcome_connect_wrap
{
	text-align: left;
}
#welcome > div#welcome_connect_wrap > input
{
	margin-top: 2rem;
	border-radius: 0;
	text-transform: capitalize;
	background: rgb(12,35,68);
}
#queueing
{
	top: 40%;
	border-radius: 0;
	box-shadow: none;
	background: none;
	padding: 10px;
	color: #000;
	text-align: center;
	margin: 0;
	transform: translate(-50%, -50%);
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}
#queueing #queueing_status
{
	background: url('https://www.nationalwindscreens.co.uk/images/webchat/Webchat-loading-graphic.gif') center center / contain no-repeat;
	width: 100px;
}
.vrm-input {
  position: relative; }

.vrm-input input {
  background: #fef61d !important;
  color: #000 !important;
  text-transform: uppercase;
  font-family: CharlesWrightBoldCaps;
  font-weight: 700;
  text-align: center;
  border: 0 !important;
  font-size: 1.75em !important;
  max-width: 14.25rem !important;
  padding: 0 !important;
  height: 1.4em !important;
  line-height: normal !important; 
  border-radius: 0.1em;
}

.vrm-input input::placeholder {
  opacity: 0.2; }

.vrm-input input::-ms-clear {
  display: none; }
#queueing h3
{
	font-size: 1.7rem;
	line-height: 1.2;
	font-weight: 400;
}

#no_endpoint
{
	top: 40%;
	border-radius: 0;
	box-shadow: none;
	background: none;
	padding: 10px;
	color: #000;
	text-align: center;
	margin: 0;
	transform: translate(-50%, -50%);
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}
#no_endpoint h3
{
	font-size: 1.7rem;
	line-height: 1.2;
	font-weight: 400;
}

#error
{
	top: 40%;
	border-radius: 0;
	box-shadow: none;
	background: none;
	padding: 10px;
	color: #000;
	text-align: center;
	margin: 0;
	transform: translate(-50%, -50%);
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}
#error h3
{
	font-size: 1.7rem;
	line-height: 1.2;
	font-weight: 400;
}

.panel
{
	width: 20em;
	background-color:black
}
.form_panel {
	width: 18em;
}


h1{
	color:#0c2344;
	font-size:16px;
}

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #0c2344;
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 10px 30px 11px 30px;
	text-transform: uppercase;
	vertical-align: bottom;
}
#chat #text_size {
	min-width: 4em;
}
#chat #chat_history {
	background: #eee;
	height: calc(100% - 7.25rem);
}
#chat #chat_messages {
	margin-top: 1rem;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	position: relative;
}
#chat #chat_messages .message_wrap {
	opacity: 1 !important;
	transform: translateY(10%);
}
#chat #chat_messages .message_wrap .message {
	background-image: none !important;
	border: none !important;
	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
#chat #chat_messages .message_wrap .message:not(.you) .message_user {
	padding-left: 2rem;
	position: relative;
}
#chat #chat_messages .message_wrap .message:not(.you) .message_user::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	background:#FFF url('https://www.nationalwindscreens.co.uk/images/webchat/NW.png') center center / 80% auto no-repeat;
	border-radius: 50%;
	-webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    1px 1px 3px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         1px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
#chat #chat_messages .message_wrap .message::before {
	content: '';
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
	position: absolute;
	left: 2rem;
	bottom: calc(100% - 3px);
}
#chat #chat_messages .message_wrap .message.you::before {
	border-bottom: 10px solid #d2e3f9;
	left: calc(100% - 1rem);
	transform: translateX(-100%);
}
#chat #chat_messages .message_wrap .message.you {
	background: #d2e3f9 !important;
}
#chat #chat_messages .message_wrap .message .message_date {
	display: none;
}
#chat #chat_messages .message_wrap .message_tick {
	display: none;
}
#chat #chat_messages .message_wrap .message .message_user {
	color: #000;
	font-weight: 600;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
#chat #chat_messages .message_wrap .message.you .message_user {
	color: rgb(12,35,68);
}
#chat #chat_messages .message_wrap .message .message_text {
	margin-top: 0.2rem;
}

#chat_footer
{
	background:#FFFFFF;
	padding: 0.75em 0.5em;
	display: flex;
	justify-content: space-between;
	height: 3em;
	-webkit-box-shadow: 0px -2px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    0px -2px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         0px -2px 5px 0px rgba(50, 50, 50, 0.25);
}
#chat_footer #chat_message_wrap {
	border-radius: 0;
	position: static;
	flex: 0 0 70%;
	max-width: 70%;
	border-color: #000;
}
#chat_footer #chat_message_wrap #chat_message {
	height: 1.8rem;
	padding: 0.5em 0.25em;
}
#chat_footer #chat_send {
	border-radius: 0;
	position: static;
	flex: 0 0 25%;
	max-width: 25%;
	width: auto;
	text-transform: capitalize;
	background: rgb(12,35,68) !important;
	font-size: 1.1em;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
}
#chat_connectedto {
	color: #000 !important;
	font-weight: 400;
	background: none !important;
	position: relative;
}
#chat_info {
	padding: 0.25em 0.75em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff !important;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.25);
}
#chat_info_buttons {
	float: none;
	display: flex;
}
#chat_info_buttons button {
	position: static;
	text-transform: none;
	border-radius: 0;
}
#chat_end {
	margin-left: 0;
	min-width: 6.5em;
}
@media (min-width:36em) {
	#chat_end {
		min-width: 4.9em;
	}
}
#text_size {
	margin-left: 0.5em;
}
#text_size span {
	font-size: 0.8em;
}
#chat_connectedto::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 30px;
	background: url('https://www.nationalwindscreens.co.uk/images/webchat/NW.png') center center / contain no-repeat;
}
#chat_send
{
	font-size:12px;
	text-transform:uppercase;
	padding: 0 !important;
	width: 5em;
}
.bg_action_highlight, .bg_minor_highlight, .bg_action_highlight, .bg_minor_highlight:hover {
	background: #0c2344 !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
}

#chat_send a
{
	background:#DDE6EA;
}

.bg_action_highlight a
{
	background:blue;
}