.lr_social_invite_results
	margin-left: -1%
	margin-right: -1%
.lr_si_contact_container
	float: left
	width: 23%
	padding: 1%
.lr_si_contact
	padding: 15px
	border: 1px solid
	border-color: #ccc
	background-color: #fff
	border-radius: 4px
.lr_si_contact_img
	display: block
	margin: 0 auto
	margin-bottom: 10px
	width: 75px !important
	height:75px
	overflow: hidden
	img
		width: 75px
.lr_si_contact_title
	margin: 0
	text-align: center
	margin-bottom: 10px
	font-size: 16px
	height: 25px
	overflow: hidden
	color: #333
	font-weight: 500
.lr-social-invite-switch
	display: none
span[class*="lr-img-icon-"]
	&.social-invite
		width: 32px
		height: 32px
		line-height: 32px
		text-align: center
		padding: inherit
	&.social-invite-login
		font-size: 16px
		width: 100%
		height: 32px
		line-height: 32px
		text-align: center
		padding: inherit
.lr-social-invite-login-switch
	display: none
/*Social Invite*/
.lrcustomfriendinvite_widgetpopup
	width: 100%
	height: 100%
	position: fixed
	top: 0
	right:0
	left:0
	bottom:0
	z-index: 9000
/* This parent can be any width and height */
.lrcustomfriendinvite_widgetpopup
	text-align: center 
	/* The ghost, nudged to maintain perfect centering */
	&:before
		content: ''
		display: inline-block
		height: 100%
		vertical-align: middle
		margin-right: -0.25em /* Adjusts for spacing */
.lr-popupbox-overlay
	z-index: 6
	background: #f2f2f2
	position: fixed
	top: 0
	right: 0
	bottom: 0
	left: 0
	opacity: 0.7
	filter unquote('.lr-popupbox-namebox alpha(opacity=50)')
.lr-socialbox,.lr-popupbox-inner
	-webkit-animation: slideDown .5s ease 1
	-moz-animation: slideDown .5s ease 1
	-ms-animation: slideDown .5s ease 1
	animation: slideDown .5s ease 1
.lr_si_providerbox, .lr_si_messagebox
	padding: 10px 20px 30px
.lr-si-box-bottom-btn
	background: #2299dd
	color: #fff
	cursor: pointer
	border-radius: 0 10px
.lr-friendnamebox
	display: inline-block
	background: #D1EEFF
	border: 1px solid #B6E2FB
	border-radius: 2px
	color: #444
	font-size: 14px
	cursor: pointer
	margin: 0 4px 4px 0
	padding: 0 25px 0 10px
	position: relative
	white-space: nowrap
	&:hover
		cursor: pointer
.lr-si-btn
	background-color: #f7f7f7
	border: 1px solid #ccc
	cursor: pointer
	font-weight: 400
	white-space: nowrap
	padding: 5px 10px
	width: 100%

/*Start of Customize SI Widget*/
.lrcustomfriendinvite_widgetpopup:before
  content: ''
  display: inline-block
  height: 100%
  vertical-align: middle
  margin-right: -0.25em /* Adjusts for spacing */
.lr-popupbox-overlay
	z-index: 6
	background: #f2f2f2
	position: fixed
	top: 0
	right: 0
	bottom: 0
	left: 0
	opacity: 0.7
	filter unquote('.lr-popupbox-namebox alpha(opacity=50)')
.lr-wait
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0px 
	z-index: 1040
	background: rgba(27,134,184,0.9)
	overflow-y: hidden
.lr-wait-img
	text-align: center
	height: 100%
	&:before
		content: ''
		display: inline-block
		height: 100%
		vertical-align: middle
		margin-right: -0.25em
	img
		display: inline-block
		vertical-align: middle
.lr-popupbox-inner
	z-index: 25
	background: #fff
	position: relative
	border: 1px solid #eee
	border-radius: 8px
	max-width: 480px
	width: 100%
	display: inline-block
	vertical-align: middle

.lr-popupbox-content
	height: auto
.lr-popupbox-close
	position: absolute
	right: 20px
	top: 6px
	font-size: 28px
	color: #ddd
	cursor: pointer
	padding: 0 5px
	&:hover
		text-decoration: none
		color: #2299dd
.lr-popupbox-heading
	height: auto
	padding: 10px 20px
	border-bottom: 1px solid #eee
	font-size: 24px
	margin-bottom: 10px
.lr-popupbox-provider
	color: #fff
	cursor: pointer
	height: 42px
	line-height: 42px
	width: 100%
	margin-bottom: 10px
	text-align: center
	border-radius: 2px
	position: relative
	-webkit-transition: all 0.2s ease-in-out
	transition: all 0.2s ease-in-out
	&:before
		position: absolute
		font-size: 20px
		left: 0
		width: 55px
		border-right: 1px solid rgba(255,255,255,0.2)
	&:hover
		-webkit-transform scale(1.02)
		transform scale(1.02)
.lr-providertext
	text-transform: capitalize
	&:before
		content: "Invite "
		text-transform: none
	&:after
		content: " Contacts"
		text-transform: none
.lr-popupbox-namebox
	overflow-y: auto
	margin: 0
	text-align: left
.lr-si-box-textbox textarea
	height: 130px
.lr-si-box-bottom-btn
	background: #2299dd
	color: #fff
	cursor: pointer
	border-radius: 0 10px
	&:hover
		text-decoration: none
.lr-si-box-bottom-bbtn
	color: #ddd
	cursor: pointer
	position: absolute
	width: 42px
	left: 6px
	top: 10px
	-webkit-transition: all 0.2s ease-in-out
	transition: all 0.2s ease-in-out
	&:hover
		left: 3px
		color: #2299dd
.lr-friendnamebox
	display: inline-block
	background: #D1EEFF
	border: 1px solid #B6E2FB
	border-radius: 2px
	color: #444
	font-size: 14px
	cursor: pointer
	margin: 0 4px 4px 0
	padding: 0 25px 0 10px
	position: relative
	white-space: nowrap
	&:hover
		cursor: pointer
	.remove
		position: absolute
		display: inline-block
		width: 24px
		right: 0
		text-align: center
		&:before
			content: "\00D7"
.lr-fri-errormessage
	color: #D9223C
	display: block
	font-family: Arial,Helvetica,sans-serif
	font-size: 12px
	height: 17px
	margin: 2px 2px 2px 0px
	width: 362px
.lr-fri-successmessage
	color: #96c111
	display: block
	font-family: Arial,Helvetica,sans-serif
	font-size: 13px
	height: 17px
	margin: 2px 2px 2px 0px
	width: 362px
.invitefriend-list
	position: relative
	width: 100%
	/* height: 40px; */
	border: 1px solid #eee
	margin-bottom: 20px
	outline: none
	border-radius: 0 10px
	padding: 0 10px
	-moz-box-sizing: border-box
	-ms-box-sizing: border-box
	-webkit-box-sizing: border-box
	box-sizing: border-box
	input
		border: 0
		margin: 0
		padding: 10px 0
		border-radius: 0
		&:focus
			box-shadow: none
.lr-output-shadow
	position: absolute
	visibility: hidden
	top: 93%
	left: -1px
	right: -1px
	text-align: left
.lr-output
	border: 1px solid #eee
	border-top: 0px
	background: #fff
	max-height: 172px
	overflow-y: auto
.lr-output > div
	padding: 5px 10px
	cursor: pointer
.lr-popupbox-heading[class*="lr-header"]:before
	content: ""
	font-family: "lr-ss-font"
	display: inline-block
	width: 32px
	height: 32px
	font-size: 20px
	line-height: 32px
	color: #fff
	-webkit-font-smoothing: antialiased
	margin-right: 10px
	margin-left: -10px
	border-radius: 0 5px
.lr-popupbox-heading.lr-header-google:before
	content: "\e609"
	background-color:#dd4b39
.lr-popupbox-heading.lr-header-linkedin:before
	content: "\e60d"
	background-color:#007bb6
.lr-popupbox-heading.lr-header-twitter:before
	content: "\e622"
	background-color:#55acee
.lr-popupbox-heading.lr-header-yahoo:before
	content: "\e628"
	background-color:#400090
[data-provider="google"]
	background-color: #dd4b39
[data-provider="facebook"]
	background-color: #3b5998
[data-provider="linkedin"]
	background-color: #007bb6
[data-provider="twitter"]
	background-color: #55acee
[data-provider="yahoo"]
	background-color: #400090
[data-provider]
	color: white
.lr_si_success
	padding: 5px 10px
	background: #e4f1fe
	border: 1px solid #29d
	color: #29d
.lr_si_error
	padding: 5px 10px
	background: #ffb2b2
	border: 1px solid #d22
	color: #d22
.lr_si_response
	padding: 5px 15px
	margin-bottom: 10px
.lr-si-box input
	width: 100%