/*
 * New chat window
 *
 */

 .chat-wrapper{
 	font-family: Open Sans, sans-serif;
 	width: 300px;
 	height: 100%;
 	position: absolute;
 	bottom: 0;
 	right: 0;
 	z-index: 999;
 	letter-spacing: 0;
 }
 .chat-wrapper p{
 	font-size: 12px;
 	letter-spacing: 0;
 }
 .chat-wrapper .float-right{
 	float:right;
 }
 .chat-wrapper .float-left{
 	float:left;
 }
 .chat-wrapper .clear{
 	clear:both;
 }
 .chat-wrapper a{
 	text-decoration: none;
 	cursor: pointer;
 }
 .chat-wrapper h3{
 	line-height: 100%;
 	font-size: 14px;
 	font-weight: 600;
 	padding: 0;
 	margin: 0;
 }

 .chat-wrapper .chat-count{
 	color:#fff;
 	background:#3b006a;
 	position: relative;
 	cursor:pointer;
 }
 .chat-wrapper .chat-count .notification{
 	position: absolute;
 	top:-10px;
 	left:-10px;
 	color: #fff;
 	padding:3px 7px;
 	border-radius: 10px;
 	background: #d50000;
 }
 .chat-wrapper .chat-list-wrapper{
 	height:50%;
 	background:#edeef2;
 	position:absolute;
 	bottom:50%;
 	right: 0;
 }
 .chat-wrapper .chat-list-personas{
 	height:100%;
 	max-height: 90%;
 	overflow-y: auto;
 	overflow-x: hidden;
 }
 .chat-wrapper .chat-list-wrapper.push-down{
 	bottom:34px;
 	height: calc(100% - 34px);
 }
 .chat-wrapper .chat-conversation-wrapper{
 	height:50%;
 	width: 100%;
 	position:absolute;
 	background:#edeef2;
 	bottom:0;
 	right: 0;
 	border:1px solid #e1e1e1;
 }
 .chat-wrapper .conversation-wrapper{
 	height: calc(90% - 28px);
 	overflow-y: auto;
 }
 .chat-wrapper .chat-list{
 	width: 300px;
 }
 .chat-wrapper .persona-action span.notification{
 	background: #d50000;
 	border-radius: 10px;
 	color: #fff;
 	padding:2px 7px;
 	margin-right: 5px;
 	margin-top:3px;
 	font-size: 12px;
 	display: block;
 	float: left;
 }
 .chat-wrapper span.removed a{
 	font-size: 17px;
 	font-weight:700;
 	color:#333;
 	padding:2px;
 	display: block;
 	margin-right: 5px;
 	float: left;
 }
 .chat-wrapper span.status{
 	font-size: 17px;
 	font-weight:700;
 	padding:2px;
 	display: block;
 	margin-right: 5px;
 	float: left;
 	margin-top: 8px;
 }
 .chat-wrapper .status.online {
     border-color: #65a830;
     border-width: 2px;
     background-color: #65a830;
 }
 .chat-wrapper .status.offline {
     border-color: #999;
     border-width: 2px;
     background-color: #999;
 }
 .chat-wrapper .status {
     display: inline-block;
     margin: 4px;
     width: 12px;
     height: 12px;
     border-radius: 9px;
     border: 2px solid transparent;
     box-sizing: border-box;
     position: relative;
 }
 .chat-wrapper .grow, .chat-wrapper .fade, .chat-wrapper .spin {
     backface-visibility: none;
     perspective: 1000;
     transform: translate3d(0, 0, 0);
 }
 .chat-wrapper .status.online:before {
     content: '';
     margin-left: -5px;
     margin-top: -5px;
     width: 4px;
     height: 4px;
     background: #65a830;
     border-radius: 5px;
 }
 .chat-wrapper .status.offline:before {
     content: '';
     margin-left: -5px;
     margin-top: -5px;
     width: 4px;
     height: 4px;
     background: #999;
     border-radius: 5px;
 }
 .chat-wrapper .status:before {
     position: absolute;
     top: 82%;
     left: 82%;
 }

 /*Chat Message*/
 .chat-wrapper .chat-message{
  margin: 0 !important;
 	padding: 0;
 	background: #fff;
 	position: absolute;
 	border-top: 1px solid #e1e1e1;
 	bottom: 0;
 	width: 100%;

 }
 .chat-wrapper .chat-message textarea{
 	font-size: 12px;
 	overflow: hidden;
 	border: 0;
 	display: block;
 	height: 0;
 	margin: 0;
 	min-height: 34px;
 	max-height: 84px;
 	outline: none;
 	resize: none;
 	padding: 10px;
 	width: 100%;
 	-webkit-appearance: none;
   -webkit-border-radius: 0;
 	border-radius: 0;
 }

 /*Converstaion*/
 .chat-wrapper .chat-conversation-header{
 	background:#8b00ff;
 	position: relative;
 	z-index: 1;
 }
 .chat-wrapper .chat-action{
 	color: #fff;
 	padding:7px 10px;
 	font-size: 14px;
 	cursor: pointer;
 }
 .chat-wrapper .chat-action .icon-minus{
 	margin-right:5px;
 }
 .chat-wrapper .indicator{
 	font-size: 14px;
 }
 .chat-wrapper .chat-persona-name{
 	font-weight: 700;
 	padding: 10px;
 	height: 15px;
  color: #fff;
 }
 .chat-wrapper #chat-count{
 	font-weight: 500;
 	padding: 10px;
 	margin-right: 10px;
 	line-height: 100%;
 	font-size: 14px;
 	font-weight: 500;
 }
 .chat-wrapper .close-btn a{
 	padding:10px;
 	line-height: 15px;
 	display: block;
 	color: #fff;
 	text-decoration: none;
 }
 .chat-wrapper .chat-conversation-wrapper.minimized{
 	height: 34px;
 	transition: all 0.2s ease-in-out;
 }
 .chat-wrapper .chat-conversation-wrapper.minimized .chat-message,
 .chat-wrapper .chat-conversation-wrapper.minimized .conversation-wrapper{
 	display: none;
 }

 /**/

 .chat-wrapper .persona-avatar{
 	position: relative;
 }
 .chat-wrapper a.profile{
 	float:left;
 }
 .chat-wrapper .persona-avatar img {
   display: block;
 	width: 28px;
 	width: 28px;
 	border-radius: 50%;
 	margin-right: 5px;
 	position: relative;
 }
 .chat-wrapper .persona-name a{
 	font-size: 11px;
 	line-height: 28px;
 	font-weight: 700;
 	color: #333;
 	letter-spacing: -.25px;
 	text-decoration: none;
 }
 .chat-wrapper .persona-name a:hover{
 	color: #666;
 }

 /*Conversation*/
 .chat-wrapper .discussion {
   list-style: none;
   background: #e5e5e5;
   margin: 0;
   padding: 0 0 50px 0;
 }
 .chat-wrapper .discussion li {
   padding: 0.5rem;
   overflow: hidden;
   display: flex;
 }
 .chat-wrapper .discussion .avatar {
   width: 40px;
   position: relative;
 	margin-right: 10px;
 }
 .chat-wrapper .discussion .avatar img {
  display: block;
 	width: 36px;
 	width: 36px;
 	border-radius: 50%;
 }

 @import url(http://weloveiconfonts.com/api/?family=typicons);
 [class*="typicons-"]:before {
   font-family: 'Typicons', sans-serif;
 }

 .chat-wrapper .self {
   justify-content: flex-end;
   align-items: flex-end;
 }
 .chat-wrapper .self .messages {
   order: 1;
   border-bottom-right-radius: 0;
   background: #fff;
 	color: #333;

 	border-radius: 12px;
 }
 .chat-wrapper .self .avatar {
   order: 2;
 	margin-left: 10px;
 }

 .chat-wrapper .messages {
   background: #8b00ff;
 	color: #fff;
   padding: 10px;
 	border-radius: 12px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 .chat-wrapper .messages p {
   margin: 0 0 0.2rem 0;
 }
 .chat-wrapper .messages time {
   font-size: 10px;
   color: #ccc;
 }


 /**/
 .chat-wrapper .chat-list-header{
 	background: #343436;
 	color:#fff;
 	padding: 8px 8px 8px 0;
 	text-align: right;
 }
 .chat-wrapper .chat-list-header a{
 	color:#fff;
 	height: 30px;
 }
 .chat-wrapper .persona{
 	padding:5px;
 	border-bottom: 1px solid #e1e1e1;
 }
 /*Color Scheme*/



 /*Scroll for chrome*/
 .chat-wrapper ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
 .chat-wrapper ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
     border-radius: 10px;

     background: rgba(222,222,222,0.8);
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 }
 .chat-wrapper ::-webkit-scrollbar {
     width: 10px;
 }


 .chat-content-wrapper .wrap{

 	font-family: Open Sans, sans-serif;
 	width: 50%;
 	margin: 0 auto;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul{
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li{
 	text-align: center;
 	float:left;
 	padding:20px 0;
 	width: 20%;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li img{
 	width: 72px;
 	height:72px;
 	margin-bottom: 15px;
 	object-fit: cover;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li h3{
 	font-weight: 700;
 	font-size: 14px;
 	color: #111;
 	margin: 0;
 	padding: 0;
 	text-transform: uppercase;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li p{
 	font-size: 13px;
 	color:#333;
 	padding: 0;
 	margin: 0 0 10px 0;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li a{
 	text-decoration: none;
 	color:#fff;
 	background: red;
 	padding:3px 8px;
 	font-size: 11px;
 	text-transform: uppercase;
 	border-radius: 5px;
 }
 .chat-content-wrapper .c-persona .c-persona-list ul li a:hover{
 	text-decoration: none;
 	color:#fff;
 	background: #a70000 ;
 	padding:3px 8px;
 	font-size: 11px;
 	text-transform: uppercase;
 	border-radius: 5px;
 }


 /*Loading*/

 .spinner {
   width: 28px;
   height: 28px;
   border-radius: 100%;
   margin: auto;
   position: absolute;
   left: -5;
   right: 0;
   top: -1px;
   bottom: 0;
   margin: auto;
 }
 .model-1 .spinner {
   color: #f00;
   -webkit-animation: color-bubble 2s linear 0s infinite;
   animation: color-bubble 2s linear 0s infinite;
 }
 .model-1 .spinner:after, .model-1 .spinner:before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   border-radius: 100%;
   box-shadow: 0 0 0 3px;
   -webkit-animation: spinner-bubble 1.3s linear 0s infinite;
   animation: spinner-bubble 1.3s linear 0s infinite;
   margin: auto;
   width: 10px;
   height: 10px;
   opacity: 0;
 }
 .model-1 .spinner:before {
   -webkit-animation: spinner-bubble 1.3s linear 2s infinite;
   animation: spinner-bubble 1.3s linear 2s infinite;
 }

 .model-2 {
   background: #4B346F;
 }
 .model-2 .spinner {
   border: 1px solid;
   -webkit-animation: rotate 1.3s linear 0s infinite, color-bubble 3s linear 0s infinite;
   animation: rotate 1.3s linear 0s infinite, color-bubble 3s linear 0s infinite;
 }
 .model-2 .spinner:after {
   content: '';
   position: absolute;
   width: 15px;
   height: 15px;
   background: #fff;
   border-radius: 100%;
   -webkit-animation: color-change 3s linear 0s infinite;
   animation: color-change 3s linear 0s infinite;
   left: -5px;
   top: 18px;
 }

 .model-5 {
   background: #034BB5;
 }
 .model-5 .spinner {
   border: 5px solid transparent;
   border-bottom-color: #19A5DF;
   border-top-color: #19A5DF;
   -webkit-animation: rotate 1.5s linear 0s infinite;
   animation: rotate 1.5s linear 0s infinite;
 }
 .model-9 {
   background: #12846D;
 }
 .model-9 .spinner:after, .model-9 .spinner:before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 50px;
   height: 50px;
   border: 5px solid transparent;
   border-bottom: 5px solid red;
   border-radius: 100%;
   -webkit-animation: rotate 1s linear infinite;
   animation: rotate 1s linear infinite;
 }
 .model-9 .spinner:before {
   width: 40px;
   height: 40px;
   -webkit-animation-direction: reverse;
   animation-direction: reverse;
 }
 @-webkit-keyframes spinner-bubble {
   from {
     width: 10px;
     height: 10px;
     opacity: .8;
   }
   to {
     width: 50px;
     height: 50px;
     opacity: 0;
   }
 }
 @keyframes spinner-bubble {
   from {
     width: 10px;
     height: 10px;
     opacity: .8;
   }
   to {
     width: 50px;
     height: 50px;
     opacity: 0;
   }
 }
 @-webkit-keyframes color-bubble {
   0% {
     color: #009DDC;
   }
   33% {
     color: #50B949;
   }
   66% {
     color: #EE2D24;
   }
   100% {
     color: #FEB825;
   }
 }
 @keyframes color-bubble {
   0% {
     color: #009DDC;
   }
   33% {
     color: #50B949;
   }
   66% {
     color: #EE2D24;
   }
   100% {
     color: #FEB825;
   }
 }
 @-webkit-keyframes color-change {
   0% {
     background: #009DDC;
   }
   33% {
     background: #50B949;
   }
   66% {
     background: #EE2D24;
   }
   100% {
     background: #FEB825;
   }
 }
 @keyframes color-change {
   0% {
     background: #009DDC;
   }
   33% {
     background: #50B949;
   }
   66% {
     background: #EE2D24;
   }
   100% {
     background: #FEB825;
   }
 }
 @-webkit-keyframes rotate {
   from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes rotate {
   from {
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @-webkit-keyframes rotateRct {
   0% {
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   }
   50% {
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   }
   100% {
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
   }
 }
 @keyframes rotateRct {
   0% {
     -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   }
   50% {
     -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
   }
   100% {
     -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
   }
 }
 @-webkit-keyframes size {
   from {
     width: 70px;
     height: 70px;
   }
   to {
     width: 30px;
     height: 30px;
   }
 }
 @keyframes size {
   from {
     width: 70px;
     height: 70px;
   }
   to {
     width: 30px;
     height: 30px;
   }
 }
 @-webkit-keyframes shadow {
   from {
     box-shadow: 0px 0 0 1px inset;
   }
   to {
     box-shadow: 50px 0 0 1px inset;
   }
 }
 @keyframes shadow {
   from {
     box-shadow: 0px 0 0 1px inset;
   }
   to {
     box-shadow: 50px 0 0 1px inset;
   }
 }
 @-webkit-keyframes shadowSize {
   0% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   20% {
     box-shadow: 15px 0 0 5px, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   40% {
     box-shadow: 15px 0 0 0, 30px 0 0 5px, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   60% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 5px, 60px 0 0 0, 75px 0 0 0;
   }
   80% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 5px, 75px 0 0 0;
   }
   100% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 5px;
   }
 }
 @keyframes shadowSize {
   0% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   20% {
     box-shadow: 15px 0 0 5px, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   40% {
     box-shadow: 15px 0 0 0, 30px 0 0 5px, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0;
   }
   60% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 5px, 60px 0 0 0, 75px 0 0 0;
   }
   80% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 5px, 75px 0 0 0;
   }
   100% {
     box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 5px;
   }
 }

/*============================================================================*/

body{
  background: transparent;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

h4, h5 {
	line-height: 1.5em;
	margin: 0;
}

hr {
	background: #e9e9e9;
    border: 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 1px;
    margin: 0;
    min-height: 1px;
}

img {
    border: 0;
    display: block;
    height: auto;
    max-width: 100%;
}

input {
	border: 0;
	color: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    margin: 0;
}

p { margin: 0; }

.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after { clear: both; }

/* ---------- LIVE-CHAT ---------- */

#live-chat {
	bottom: 0;
	font-size: 12px;
	right: 24px;
	position: fixed;
	width: 265px;
}

#live-chat header {
	border-radius: 5px 5px 0 0;
	color: #fff;
	cursor: pointer;
	padding: 8px 24px;
}

#live-chat h4 {
	font-size: 16px;
}

#live-chat h5 {
	font-size: 10px;
}

#live-chat form {
	padding: 10px 24px;
	margin: 0;
}

#live-chat input[type="text"] {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px;
	outline: none;
}

.chat-message-counter {
	background: #e62727;
	border: 1px solid #fff;
	border-radius: 50%;
	display: none;
	font-size: 12px;
	font-weight: bold;
	height: 28px;
	left: 0;
	line-height: 28px;
	margin: -15px 0 0 -15px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 28px;
}

.chat-close {
	background: #1b2126;
	border-radius: 50%;
	color: #fff;
	display: block;
	float: right;
	font-size: 10px;
	height: 16px;
	line-height: 16px;
	margin: 2px 0 0 0;
	text-align: center;
	width: 16px;
}

.chat {
	background: #fff;
}

.chat-history {
	height: 252px;
	padding: 8px 24px;
	overflow-y: scroll;
}

.chat-message {
	margin: 16px 0;
}

.chat-message img {
	border-radius: 50%;
	float: left;
}

.chat-message-content {
	margin-left: 56px;
}

.chat-time {
	float: right;
	font-size: 10px;
}

.chat-feedback {
	font-style: italic;
	margin: 0 0 0 80px;
}

*Form*/
	.form_content{
		margin: 0 auto;
    width: 80%;
	}
	.control-group{
		padding: 5px 0;
	}
	label{
		color: #686868;
    font-size: 12px;
    font-weight: 300;
	}
	input, textarea{
		background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #696969;
    border-radius: 3px;
    padding: 8px 6px;
    width: 100%;
	}
	.btn{
		background-clip: padding-box;
    border: 0 none;
    border-radius: 2px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 -3px 0 rgba(129, 163, 48, 0.3) inset;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 9px 6px 11px;
    width: 100%;
	}
	.btn:hover{
		opacity:0.6;
	}

	/*Chat Box*/

.info{
	padding:10px 20px;
	text-align: center;
	color: #686868;
    font-size: 12px;
    font-weight: 300;
	border-bottom: 1px solid #e1e1e1;
	line-height: 140%;
}
	.chat_logo{
		padding: 10px 0;
	}
.chat_footer{
	background-color: #F5F5F5;
	color: #B4B4B4;
	padding: 0px;
	line-height: 35px;
	height: 35px;
	}

.chat_footer .powered {
    text-align: right;
    white-space: nowrap;
}
.chat_footer .powered {
    padding-right: 25px;
}
.chat_footer p {
    padding: 0px;
    font-size: 10px;
}
.chat_footer p a{
	color:#B4B4B4;
	text-decoration: underline;
}