@import url('https://fonts.googleapis.com/css?family=Open+Sans');
#g-popup-desktop-iframe{
	height: 450px !important;
	position: fixed !important; 
	bottom: 30px !important; 
	width: 305px !important; 
	height: 450px !important;
	border: none !important; 
	margin: 0 !important; 
	padding: 0 !important; 
	overflow: hidden !important; 
	z-index:2147483647 !important;
	opacity: 1 !important;
	box-shadow: 0 13px 29px rgba(0, 0, 0, 0.16) !important;
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    overflow: hidden !important;
	visibility: hidden;
}

#g-popup-mobile-control{	
	-webkit-transform-origin: unset !important;
    -ms-transform-origin: unset !important;
    -o-transform-origin: unset !important;
    transform-origin: unset !important;
	position: fixed !important;
	bottom: 30px !important;
	z-index: 2147483646 !important; 
	width: 80px !important; 
	height: 80px !important;
	display: none;
	cursor: pointer !important;
	outline: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	margin-bottom: 0px !important;
	top: unset !important;
}

#g-popup-mobile-unread-messages{
	visibility: hidden;
	font-family: 'Open Sans', sans-serif !important;
	position: absolute !important;
    right: 0 !important;
    top: -10px !important;
    width: 30px !important;
    height: 30px !important;
    display: table !important;
    text-align: center !important;
}

#g-popup-mobile-unread-messages>div{
	display: table-cell !important;
    vertical-align: middle !important;
    border-radius: 50% !important;
    background-color: #ff9800 !important;
    color: #eee !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

#g-popup-mobile-wrapper{
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-animation: moz-gcoin 16s infinite;
	-webkit-animation: webkit-gcoin 16s infinite;	
	animation: gcoin 16s infinite;
}

#g-popup-mobile-control .g-popup-mobile-logo{
	position: absolute !important;
	top: 0px !important;
	background-image: url(../img/logo_cloud.png) !important;
	background-color: #be1a40 !important;
	background-repeat: no-repeat !important;
	background-position: center;
	/*background-position: center !important; */
	background-size: 45% !important;
	/* box-shadow: 0 5px 20px #0237a0 !important;  */
	border-radius: 50% !important;
	z-index: 2147483645 !important;
	width: 80px !important;
	height: 80px !important; 
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);

	animation: g-logo-animate 8s infinite;
	animation-delay: 3s;
	-webkit-animation: webkit-g-logo-animate 8s infinite;
	-webkit-animation-delay: 3s;
	-moz-animation: moz-g-logo-animate 8s infinite;
	-moz-animation-delay: 3s;
}

#g-popup-mobile-control .g-popup-mobile-logo-waves-1{
	position: absolute !important;
	top: 0px !important; 
	border-radius: 50% !important;
	animation: g-logo-waves 5s linear 1s infinite;
	-moz-animation: g-moz-logo-waves 5s linear 1s infinite;
	-webkit-animation: g-webkit-logo-waves 5s linear 1s infinite;
	background: #ffffff !important;
	z-index: 2147483644 !important;
	width: 80px !important;
	height: 80px !important;
}

#g-popup-mobile-control .g-popup-mobile-logo-b{
	background-image: url(../img/g-logo.png);
	position: absolute !important;
	top: 0px !important;
	background-color: #be1a40 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 53% !important;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .4) !important;
	border-radius: 50% !important;
	z-index: 2147483645 !important;
	width: 80px !important;
	height: 80px !important;
	cursor: pointer !important;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#g-popup-mobile-control .g-happy-new-year-hat{
	background-image: url(https://bitbucket.org/grizzlyjavateam/glead_static/raw/master/other/hat_glead.png);
	height: 70px !important;
	width: 70px !important;
	position: absolute !important;
	background-size: cover !important;
	z-index: 2147483645 !important;
	right: 28px;
	bottom: 23px;
}

@keyframes g-logo-waves{
	0% {transform: scale(1);opacity:1;} 
	20% {transform: scale(1.3);opacity:0;} 
	100% {transform: scale(1.3);opacity:0;}
} 

@-webkit-keyframes g-webkit-logo-waves{
	0% {-webkit-transform: scale(1);opacity:1;} 
	20% {-webkit-transform: scale(1.3);opacity:0;} 
	100% {-webkit-transform: scale(1.3);opacity:0;}
}

@-moz-keyframes g-moz-logo-waves{
	0% {-moz-transform: scale(1);opacity:1;} 
	20% {-moz-transform: scale(1.3);opacity:0;} 
	100% {-moz-transform: scale(1.3);opacity:0;}
}

@keyframes gcoin{
	0%, 83.3% {transform: rotateY(0deg);transform: rotateY(0deg);}
	86%, 98.1% {transform: rotateY(180deg);transform: rotateY(180deg);}
	100% {transform: rotateY(0deg);transform: rotateY(0deg);}
}
	
@-webkit-keyframes webkit-gcoin{
	0%, 83.3% {-webkit-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
	86%, 98.1% {-webkit-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
	100% {-webkit-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
}

@-moz-keyframes moz-gcoin{
	0%, 83.3% {-moz-transform: rotateY(0deg);-moz-transform: rotateY(0deg);}
	86%, 98.1% {-moz-transform: rotateY(180deg);-moz-transform: rotateY(180deg);}
	100% {-moz-transform: rotateY(0deg);-moz-transform: rotateY(0deg);}
}

@keyframes g-logo-animate {
	0% {background-position: 45% 45%;}
	1% {background-position: 55% 45%;}
	2% {background-position: 45% 55%;}
	3% {background-position: 55% 55%;}
	4% {background-position: 45% 50%;}
	5% {background-position: 55% 50%;}
	6% {background-position: 50% 50%;}
}

@-webkit-keyframes webkit-g-logo-animate {
	0% {background-position: 45% 45%;}
	1% {background-position: 55% 45%;}
	2% {background-position: 45% 55%;}
	3% {background-position: 55% 55%;}
	4% {background-position: 45% 50%;}
	5% {background-position: 55% 50%;}
	6% {background-position: 50% 50%;}
}

@-moz-keyframes moz-g-logo-animate {
	0% {background-position: 45% 45%;}
	1% {background-position: 55% 45%;}
	2% {background-position: 45% 55%;}
	3% {background-position: 55% 55%;}
	4% {background-position: 45% 50%;}
	5% {background-position: 55% 50%;}
	6% {background-position: 50% 50%;}
}