/*!
 * Screets Chat X - Base Template
 * Author: @screetscom
 *
 * COPYRIGHT (c) 2015 Screets d.o.o. All rights reserved.
 * This  is  commercial  software,  only  users  who have purchased a valid
 * license  and  accept  to the terms of the  License Agreement can install
 * and use this program.
 */

@charset "UTF-8";

/* Fixed to corner version */
	.scx-w-fixed .scx-chat-btn,
	.scx-w-fixed .scx-attention,
	.scx-w-fixed .scx-popup {
		position: fixed;
	}

.scx-chat-btn,
.scx-popup {
	display: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: 'liga', 'kern';
	z-index: 999991;
	cursor: default;
}

.scx-attention { display: none; z-index: 999981; }
.scx-attention.scx-active { 
	display: block; 
	-webkit-animation: SCX_fadeIn 400ms;
			animation: SCX_fadeIn 400ms;
}
.scx-attention .scx-wrap { position: relative; }

.scx-attention .scx-close {
	display: none;
	position: absolute;
    top: 7px;
    right: 7px;
    color: #444;
    background-color: rgba( 255, 255, 255, .3 );
    border: 1px solid rgba( 0,0,0, .3 );
    padding: 1px 4px 2px 4px;
    line-height: 1;
    font-size: 13px;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
    border-radius: 5px;
    cursor: pointer;
}
.scx-attention .scx-close:hover { background-color: #fff; }
.scx-attention:hover .scx-close {
	display: block;
	-webkit-animation: SCX_fadeIn 400ms;
			animation: SCX_fadeIn 400ms;
}

/**
 * Useful
 */
	.scx-hide { display: none; }

/**
 * Defaults
 */
 	.scx-w em, .scx-w i { font-style: italic; }
	.scx-w strong, .scx-w b { font-weight: bold; }

	.scx-w small {
		color: #999999;
		font-size: 13px;
		line-height: 1.2;
		padding: 0;
		margin: 0;
		font-family: Helvetica, Arial, sans-serif;
	}
	.scx-w input[type="email"],
	.scx-w input[type="number"],
	.scx-w input[type="search"],
	.scx-w input[type="text"],
	.scx-w input[type="tel"],
	.scx-w input[type="url"],
	.scx-w input[type="password"],
	.scx-w textarea,
	.scx-w select {
		width: 100%;
		height: 34px;
		padding: 6px 10px;
		/* The 6px vertically centers text on FF, ignored by Webkit */
		margin: 0;
		background-color: #fff;
		border-width: 1px;
		border-style: solid;
		box-shadow: none;
		line-height: 1.3;
		-webkit-transition: border 300ms, background 300ms;
				transition: border 300ms, background 300ms;
		box-sizing: border-box;
	}
	.scx-w input[type="email"].scx-error,
	.scx-w input[type="number"].scx-error,
	.scx-w input[type="search"].scx-error,
	.scx-w input[type="text"].scx-error,
	.scx-w input[type="tel"].scx-error,
	.scx-w input[type="url"].scx-error,
	.scx-w input[type="password"].scx-error,
	.scx-w textarea.scx-error,
	.scx-w select.scx-error {
		color: #e54045;
		border-color: #e54045;
	}
	.scx-w input[type="email"]:disabled,
	.scx-w input[type="number"]:disabled,
	.scx-w input[type="search"]:disabled,
	.scx-w input[type="text"]:disabled,
	.scx-w input[type="tel"]:disabled,
	.scx-w input[type="url"]:disabled,
	.scx-w input[type="password"]:disabled,
	.scx-w textarea:disabled,
	.scx-w select:disabled {
		color: #ccc;
	}
	.scx-w input[type="email"],
	.scx-w input[type="number"],
	.scx-w input[type="search"],
	.scx-w input[type="text"],
	.scx-w input[type="tel"],
	.scx-w input[type="url"],
	.scx-w input[type="password"],
	.scx-w textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.scx-w textarea {
		min-height: 65px;
		padding-top: 6px;
		padding-bottom: 6px;
		resize: none;
	}
	.scx-w input[type="email"]:focus,
	.scx-w input[type="number"]:focus,
	.scx-w input[type="search"]:focus,
	.scx-w input[type="text"]:focus,
	.scx-w input[type="tel"]:focus,
	.scx-w input[type="url"]:focus,
	.scx-w input[type="password"]:focus,
	.scx-w textarea:focus,
	.scx-w select:focus {
		background-color: #fafafa;
		outline: 0;
	}
	.scx-w input[type="email"]:focus.scx-error,
	.scx-w input[type="number"]:focus.scx-error,
	.scx-w input[type="search"]:focus.scx-error,
	.scx-w input[type="text"]:focus.scx-error,
	.scx-w input[type="tel"]:focus.scx-error,
	.scx-w input[type="url"]:focus.scx-error,
	.scx-w input[type="password"]:focus.scx-error,
	.scx-w textarea:focus.scx-error,
	.scx-w select:focus.scx-error {
		color: #e54045;
		border-color: #e54045;
	}
	.scx-w label,
	.scx-w legend {
		display: block;
		color: #999999;
	}
	.scx-w input[type="checkbox"],
	.scx-w input[type="radio"] {
		display: inline;
	}
/**
 * Chat button
 */
	.scx-chat-btn {
		padding: 0 40px 0 20px;
		height: 37px;
		line-height: 36px;
		-webkit-transition: background 500ms;
				transition: background 500ms;
		cursor: pointer;
	}
	.scx-chat-btn.scx-active {
		display: block;
		-webkit-animation: SCX_fadeInUp 400ms;
				animation: SCX_fadeInUp 400ms;
	}
	.scx-chat-btn .scx-title {
		line-height: 1;
	}
	.scx-chat-btn .scx-ico {
		position: absolute;
		top: 0;
		right: 12px;
		height: 37px;
		line-height: 36px;
	}
	
	.scx-chat-btn .scx-count {
		display: none;
		position: absolute;
		top: -16px;
		left: 10px;
		color: #333;
		font-weight: bold;
		font-size: 14px;
		font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
		background-color: yellow;
		line-height: 1;
		padding: 3px;
		border-radius: 20px;
		border-width: 1px;
		border-style: solid;
		min-width: 23px;
		text-align: center;
	}
	.scx-chat-btn.scx-new-msg .scx-count {
		display: block;
		-webkit-animation: SCX_blink 0.3s cubic-bezier(0.2, 0, 1, 1) infinite alternate;
				animation: SCX_blink 0.3s cubic-bezier(0.2, 0, 1, 1) infinite alternate;
	}

/**
 * Popup
 */
	.scx-popup {
		overflow-x: hidden;
		overflow-y: hidden;
		box-sizing: border-box;
		/*-webkit-box-shadow: 0 1px 15px rgba( 0, 0, 0, 0.1 );
					 -moz-box-shadow: 0 1px 15px rgba( 0, 0, 0, 0.1 );
								box-shadow: 0 1px 15px rgba( 0, 0, 0, 0.1 );*/
		/* Placeholder text color -- selectors need to be separate to work. */
	}

	.scx-popup a {
		color: #42d18c;
	}
	.scx-popup a:hover {
		color: #31c97f;
	}
	.scx-popup.scx-active {
		/* Popup opening */
	}
	.scx-popup.scx-active._scx-open {
		display: block;
		-webkit-animation: SCX_fadeInUp 400ms;
				animation: SCX_fadeInUp 400ms;
	}
	.scx-popup.scx-active._scx-open._scx-updated {
		-webkit-animation: none;
				animation: none;
	}
	.scx-popup.scx-active._scx-updated .scx-content {
		-webkit-animation: SCX_fadeIn 600ms;
				animation: SCX_fadeIn 600ms;
	}
	
	.scx-popup .scx-header {
		text-align: center;
		font-size: 17px;
		height: 37px;
		line-height: 35px;
		-webkit-transition: background 500ms;
				transition: background 500ms;
		cursor: pointer;
	}
	.scx-popup .scx-header .scx-ico {
		position: absolute;
		top: 0;
		right: 12px;
		height: 37px;
		line-height: 36px;
	}
	.scx-popup .scx-content {
		border-width: 1px;
		border-style: solid;
		border-top: none;
	}
	.scx-popup .scx-footer {
		font-family: Helvetica, Arial, sans-serif;
		font-size: 12px;
		color: #999;
		text-align: center;
		margin-top: 10px;
	}
	.scx-popup ::-webkit-input-placeholder {
		color: #ccc;
	}
	.scx-popup :-moz-placeholder {
		color: #ccc;
	}
	.scx-popup :-ms-input-placeholder {
		color: #ccc;
	}
	.scx-popup ::-moz-placeholder {
		color: #ccc;
		opacity: 1;
		/* Since FF19 lowers the opacity of the placeholder by default */
	}

/**
 * Online mode
 */
	.scx-online-mode {
		line-height: 1;
	}
	.scx-popup.scx-online-mode .scx-content {
		padding: 0;
	}
	.scx-online-mode .scx-ntf {
		text-align: left;
	}
	.scx-online-mode .scx-ntf .scx-wrap {
		margin: 0;
	}
	.scx-online-mode .scx-current-op {
		display: none;
		position: relative;
		font-size: 13px;
		line-height: 1.3;
	}
	.scx-online-mode .scx-current-op.scx-active {
		display: block;
	}
	.scx-online-mode .scx-current-op.scx-online .scx-current-op-status {
		color: #42d18c;
	}
	.scx-online-mode .scx-current-op.scx-offline .scx-current-op-status {
		color: #999999;
	}
	.scx-online-mode .scx-current-op .scx-meta {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 85px;
		margin-bottom: 10px;
		border-top: 1px solid #fff;
		background: #efefef;
		background: -moz-linear-gradient(top, #efefef 0%, #efefef 1%, #ffffff 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, #efefef), color-stop(1%, #efefef), color-stop(100%, #ffffff));
		background: -webkit-linear-gradient(top, #efefef 0%, #efefef 1%, #ffffff 100%);
		background: -o-linear-gradient(top, #efefef 0%, #efefef 1%, #ffffff 100%);
		background: -ms-linear-gradient(top, #efefef 0%, #efefef 1%, #ffffff 100%);
		background: linear-gradient(to bottom, #efefef 0%, #efefef 1%, #ffffff 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#ffffff', GradientType=0);
	}
	.scx-online-mode .scx-current-op-avatar {
		position: absolute;
		top: -10px;
		max-width: 50px;
		border: 2px solid #fff;
	}
	.scx-online-mode .scx-current-op-name {
		font-weight: 600;
	}
	.scx-online-mode .scx-content {
		padding: 0;
	}
	.scx-online-mode .scx-reply-box {
		position: absolute;
		width: 100%;
		bottom: 0;
		right: 0;
		display: table;
		width: 100%;
		border-collapse: separate;
		background-color: #fafafa;
		padding: 10px;
		border-width: 1px;
		border-style: solid;
		font-size: 0;
		box-sizing: border-box;
	}
	.scx-online-mode textarea.scx-reply {
		width: 100%;
		margin: 0;
		font-size: 16px;
		padding: 7px 10px;
		height: 54px;
		min-height: 54px;
		border-width: 1px;
		border-style: solid;
		background-color: #fff;
		resize: none;
	}
	.scx-online-mode textarea.scx-reply:focus {
		background-color: #fff;
	}

/**
 * Offline mode
 */
	.scx-ntf.scx-ntf-offline-top .scx-wrap {
		margin-top: 0;
	}

/**
 * Conversation
 */
	
	.scx-cnv {
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 300px;
		min-height: 100px;
	}

	.scx-cnv .scx-msg {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		text-align: left;
		pointer-events: none;
	}
	.scx-cnv .scx-msg a {
		display: inline-block;
		width: 65%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		pointer-events: all;
	}
	.scx-cnv .scx-msg .scx-msg-img {
		display: block;
		margin: 2px 0;
	}
	.scx-cnv .scx-msg .scx-msg-img img:not(.emoji) {
		width: 120px;
		max-width: 100%;
		border: 1px solid #dddddd;
		padding: 1px;
	}
	.scx-cnv .scx-msg img.emoji {
		height: 1.5em;
		margin: 0 .05em 0 .1em;
		vertical-align: -0.3em;
	}
	.scx-cnv .scx-msg.scx-you .scx-msg-wrap {
		max-width: 80%;
		color: #444444;
		background-color: #c8f7be;
		margin-left: auto;
		margin-right: 10px;
		padding: 7px 11px 8px 11px;
	}
	.scx-cnv .scx-msg.scx-you .scx-msg-wrap:after {
		position: absolute;
		content: ' ';
		width: 0;
		height: 0;
		left: auto;
		right: 0;
		top: 8px;
		bottom: auto;
		border: 5px solid;
		border-color: #c8f7be transparent transparent #c8f7be;
	}
	.scx-cnv .scx-msg.scx-you .scx-msg-author,
	.scx-cnv .scx-msg.scx-you .scx-msg-avatar {
		display: none;
	}
	.scx-cnv .scx-msg.scx-you .scx-msg-time {
		color: #444444;
		opacity: 0.3;
	}
	.scx-cnv .scx-msg.scx-other .scx-msg-wrap {
		margin-left: 40px;
	}
	.scx-cnv .scx-msg-wrap {
		font-size: 14px;
		line-height: 1.3;
		margin-bottom: 15px;
	}
	.scx-cnv .scx-msg-avatar {
		position: absolute;
		top: 3px;
		left: 0;
	}
	.scx-cnv .scx-msg-avatar > img {
		max-width: 30px;
	}
	.scx-cnv .scx-msg-author {
		display: block;
		font-weight: bold;
		font-size: 12px;
	}
	.scx-cnv .scx-msg-author:after {
		content: ':';
	}
	.scx-cnv .scx-msg-time {
		float: right;
		color: #ccc;
		font-size: 10px;
		font-family: Verdana, Geneva, sans-serif;
		text-transform: uppercase;
	}

/**
 * Form
 */
	.scx-form {
		margin: 0;
		margin-bottom: 20px;
	}
	.scx-form .scx-label {
		display: none;
		color: #999;
		font-size: 12px;
		font-family: Helvetica, Arial, sans-serif;
		margin-bottom: 5px;
	}
	.scx-form .scx-label:after {
		content: ': ';
	}
	.scx-form .scx-label._scx-show {
		display: block;
		-webkit-animation: SCX_fadeInUp 600ms;
		animation: SCX_fadeInUp 600ms;
	}
	.scx-form .scx-req {
		color: #e54045;
		font-size: 16px;
	}
	.scx-form .scx-send {
		text-align: center;
	}

/**
 * Buttons
 */
	.scx-button {
		display: inline-block;
		height: 33px;
		line-height: 31px;
		text-align: center;
		text-transform: normal;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		box-sizing: border-box;
		outline: 0;
	}
	.scx-button:active {
		outline: 0;
	}
	
	.scx-button.scx-small {
		font-size: 14px;
		height: 25px;
		line-height: 25px;
		padding: 0 15px;
	}
	.scx-button.scx-disabled,
	.scx-button.scx-disabled:hover {
		pointer-events: none;
		opacity: 0.6;
	}


/** 
 * Icons
 */

	@font-face {
		font-family: 'scx';
		src: url('../fonts/scx.eot?84640015');
		src: url('../fonts/scx.eot?84640015#iefix') format('embedded-opentype'),
			 url('../fonts/scx.woff?84640015') format('woff'),
			 url('../fonts/scx.ttf?84640015') format('truetype'),
			 url('../fonts/scx.svg?84640015#scx') format('svg');
		font-weight: normal;
		font-style: normal;
	}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'scx';
    src: url('../font/scx.svg?84640015#scx') format('svg');
  }
}
*/
 
	[class^="scx-ico-"]:before, [class*=" scx-ico-"]:before {
		font-family: "scx";
		font-style: normal;
		font-weight: normal;
		speak: none;

		display: inline-block;
		text-decoration: inherit;
		width: 1em;
		margin-right: .2em;
		text-align: center;
		/* opacity: .8; */

		/* For safety - reset parent styles, that can break glyph codes*/
		font-variant: normal;
		text-transform: none;

		/* fix buttons height, for twitter bootstrap */
		line-height: 1em;

		/* Animation center compensation - margins should be symmetric */
		/* remove if not needed */
		margin-left: .2em;

		/* you can be more comfortable with increased icons size */
		/* font-size: 120%; */

		/* Font smoothing. That was taken from TWBS */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	 
		/* Uncomment for 3D effect */
		/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
	}
	 
	.scx-ico-chat:before { content: '\e800'; } /* '' */
	.scx-ico-down:before { content: '\e801'; } /* '' */
	.scx-ico-up:before { content: '\e802'; } /* '' */
	.scx-ico-left:before { content: '\e803'; } /* '' */
	.scx-ico-right:before { content: '\e804'; } /* '' */
	.scx-ico-send:before { content: '\e805'; } /* '' */
	.scx-ico-like:before { content: '\e806'; } /* '' */
	.scx-ico-dislike:before { content: '\e807'; } /* '' */

/** 
 * Notifications 
 */
	.scx-ntf {
		display: none;
		line-height: 1.3;
		text-align: center;
	}
	.scx-ntf.scx-active {
		display: block;
		-webkit-animation: SCX_fadeIn 600ms;
		animation: SCX_fadeIn 600ms;
	}
	.scx-ntf a {
		color: #333333;
		font-weight: 600;
		text-decoration: underline;
	}
	.scx-ntf .scx-wrap {
		color: #333333;
		margin: 15px 0;
	}
	.scx-ntf .scx-success,
	.scx-ntf .scx-success a {
		color: #42d18c;
	}
	.scx-ntf .scx-error,
	.scx-ntf .scx-error a {
		color: #e54045;
	}
	.scx-ntf .scx-warn,
	.scx-ntf .scx-warn a {
		color: #deb887;
	}
	.scx-ntf .scx-info,
	.scx-ntf .scx-info a {
		font-style: italic;
	}
	.scx-ntf .scx-wait,
	.scx-ntf .scx-wait a {
		color: #deb887;
		-webkit-animation: SCX_blink 0.5s cubic-bezier(0.2, 0, 1, 1) infinite alternate;
		animation: SCX_blink 0.5s cubic-bezier(0.2, 0, 1, 1) infinite alternate;
	}
/**
 * Spacing
 */
	.scx-form .scx-inner,
	.scx-lead {
		margin-bottom: 20px;
	}

	.scx-line {
		margin-bottom: 11px;
		line-height: 1;
		/* Fix textarea extra space issue */
	}

	/* For devices larger than 550px */
	@media (max-width: 550px) {

		.scx-w .scx-popup {
			width: 100vw;
			height: 100vh;
			max-height: 100vh;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border-radius: 0;
		}
		.scx-w .scx-popup .scx-content {
			border-radius: 0;
			border: none;
		}

	}

/**
 * Animations
 */
	@keyframes SCX_blink {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@-webkit-keyframes SCX_blink {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@-webkit-keyframes SCX_fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 50%, 0);
			transform: translate3d(0, 50%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@keyframes SCX_fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 50%, 0);
			transform: translate3d(0, 50%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@-webkit-keyframes SCX_fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes SCX_fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@-webkit-keyframes SCX_fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@keyframes SCX_fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@-webkit-keyframes SCX_zoomInUp {
		from {
			opacity: 0;
			-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		}
	}
	@keyframes SCX_zoomInUp {
		from {
			opacity: 0;
			-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}
		60% {
			opacity: 1;
			-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		}
	}
	@-webkit-keyframes SCX_fadeInRight {
		from {
			opacity: 0;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@keyframes SCX_fadeInRight {
		from {
			opacity: 0;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
		}
	}
	@-webkit-keyframes SCX_slideInUp {
		from {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			visibility: visible;
		}
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}
	@keyframes SCX_slideInUp {
		from {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			visibility: visible;
		}
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}