#btnSignalR
{
	background-color:#ff0000;
	background:linear-gradient(#ff0000, #aa0000);
	border:2px solid #aa0000;
	border-radius:50%;
	cursor:pointer;
	height:24px;
	outline:none;
	position:absolute;
	right:24px;
	top:50%;
	transform:translateY(-50%);
	width:24px;
}

#btnSignalR.connected
{
	background-color:#00ff00;
	background:linear-gradient(#00ff00, #00aa00);
	border:2px solid #00aa00;
}

#divSignalROverlay
{
	display:none;
	height:100%;
	left:0px;
	position:fixed;
	top:0px;
	width:100%;
}

#divSignalROverlay.show
{
	display:block;
}

#divSignalRPopup
{
	background-color:#ffffff;
	border-radius:2px;
	box-shadow:0px 39px 56px 3.5px rgba(0, 0, 0, 0.24), 0px 15px 79px 1.5px rgba(0, 0, 0, 0.16);
	display:none;
	padding:24px;
	position:absolute;
	right:24px;
	top:calc(50% + 24px);
	width:200px;
}

#divSignalRPopup.show
{
	animation-duration:0.1s;
	animation-name:showSignalRPopup;
	display:block;
	opacity:1;
}

#divSignalRPopup:before
{
	border-bottom:5px solid #ffffff;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	content:"";
	height:0px;
	position:absolute;
	right:10px;
	top:-5px;
	width:0px;
}

#divSignalRPopup .btnReconnect
{
	margin-top:24px;
}

#divSignalRPopup .imgReconnect
{
	float:right;
	margin:5px 0px 0px 8px;
	transform:rotate(45deg);
}

#divSignalRPopup .btnReconnect.reconnecting .imgReconnect
{
	animation:rotateReconnect 1s linear infinite;
}

/* ANIMATIONS */
@keyframes showSignalRPopup
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

@keyframes rotateReconnect
{
	from {transform:rotate(45deg);}
	to   {transform:rotate(405deg);}
}