﻿body, html {
	height: 100%;
	margin: 0;
}

#BotIframe {
	height: 500px;
	width: 350px;
	max-width: 1500px;
	border: none;
	box-shadow: 0 0 20px 4px rgba(51,51,51,.25);
	position: absolute !important;
	bottom: -62px !important;
	right: 1%;
	z-index: 2;
}

#BotIframe.botCollapsed{
	opacity:0;
}

.botCollapsed .wc-console,.botCollapsed .welcomeText{
	display:none;
}

.botCollapsed #wrapper	{
	opacity:0;
}

.bg {
	background-image: url("../images/background.jpg");
	height: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}

.wc-console {
	position: relative !important;
}

.wc-message-groups, wc-chatview-panel {
	position: inherit !important;
}

.wc-message-groups {
	height: 300px;
}

#BotIframe {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	z-index: 10;
}

.botCollapsed {
	width: 70px !important;
	min-width: 70px !important;
	height: 70px !important;
	border-radius: 50%;
	left: auto !important;
}

.app-page:hover {
	color: #fff;
	background: #243c5e !important;
	transition: color .2s ease, background-color .2s ease;
	text-decoration: none;
}

/* Mobile version */
@media(max-width: 450px) {

	/* Main Bot iframe */
	#BotIframe {
		width: 100%;
		height: 100%;
	}
}

select::-ms-expand {
	display: none;
}

/* Mobile version landscape */
@media (min-width : 0px) and (max-width : 767px) and (orientation : landscape) {
	#BotIframe {
		width: 100%;
		height: 100%;
		bottom: 0% !important;
		right: 0%;
		top: -20px;
	}
}

@media (min-width : 0px) and (max-width : 767px) {
	#BotIframe {
		width: 100%;
		height: 100%;
		bottom: 0% !important;
		right: 0%;
		top: -20px;
	}
}


@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
		#BotIframe {
			width: 100%;
			height: 100%;
			bottom: 0% !important;
			right:0%;
		}
}

@media only screen and (min-device-width: 411px) and (max-device-height: 767) { 
	#BotIframe {
		width: 100%;
		height: 100%;
		bottom: 0% !important;
		right:0%;
	}
}

