/*------------------------------------------------------------------------------
Loaded in wp-admin for query string `hello=buddypress`.

@since 3.0.0

--------------------------------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0 - Typography and colour
2.0 - Dashicons
3.0 - Elements
	3.1 - Backdrop and container
	3.2 - Modal footer
	3.3 - Modal header
	3.4 - Modal content
4.0 - Content styles
	4.1 - Backdrop and container
	4.2 - Footer content
	4.3 - Header content
	4.4 - Content content
5.0 - Media
6.0 - Media Queries
	6.1 - Desktop Medium
	6.2 - Desktop Large
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
 * 1.0 - Typography and colour
 *----------------------------------------------------------------------------*/
:root {
	--bp-hello-color-primary: #d34600;
	--bp-hello-color-secondary: #e5e5e5;
	--bp-hello-container-size: 15%;
}

#bp-hello-container a {
	color: var(--bp-hello-color-primary);
}

#bp-hello-container a:hover {
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	color: black;
}

#bp-hello-container .bp-hello-header h1 {
	line-height: 1.7;
	font-size: 21px;
	font-weight: 400;
}

.bp-hello-content p {
	font-size: 16px;
}

/*------------------------------------------------------------------------------
 * 2.0 - Dashicons
 *----------------------------------------------------------------------------*/
.bp-hello-close .button {
	padding: 5px !important;
}

.bp-hello-close .close-modal:before {
	content: "\f158";
	color: #23282d;
	/* wp toolbar */
	font: 400 1.5em/1 dashicons;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: none !important;
}

.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	color: var(--bp-hello-color-primary);
}

.bp-hello-social li a:before {
	color: #23282d;
	/* wp toolbar */
	font: 400 30px/0.6 dashicons;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: none !important;
}

.bp-hello-social li a:hover:before {
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	color: var(--bp-hello-color-primary);
}

.bp-hello-social li a.support:before {
	content: "\f448";
}

.bp-hello-social li a.twitter:before {
	content: "\f301";
}

/*------------------------------------------------------------------------------
 * 3.0 - Elements
 *----------------------------------------------------------------------------*/
/*
 * 3.1 - Backdrop and container
 */
#bp-hello-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 9998;
	display: none;
}

#bp-hello-container {
	position: fixed;
	top: 0;
	bottom: 80px;
	z-index: 99999;
}

.bp-disable-scroll {
	overflow: hidden;
}

/*
 * 3.2 - Modal footer
 */
.bp-hello-footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	height: 58px;
	max-height: 58px;
}

.bp-hello-social-cta,
.bp-hello-social-links {
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
}

.bp-hello-social-links ul {
	display: inline-block;
}

.bp-hello-social li {
	position: relative;
	bottom: -5px;
	display: inline-block;
	list-style-type: none;
	margin-bottom: 0;
}

.bp-hello-social li:last-child a {
	margin-right: 4px;
}

/*
 * 3.3 - Modal header
 */
.bp-hello-header {
	height: 58px;
	max-height: 58px;
}

/*
 * 3.4 - Modal content
 */
.bp-hello-content {
	padding: 0 25px;
	height: calc(100% - 58px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/*------------------------------------------------------------------------------
 * 4.0 - Content styles
 *----------------------------------------------------------------------------*/
/*
 * 4.1 - Backdrop and container
 */
#bp-hello-backdrop {
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-transition: opacity 0.15s ease-out;
	-o-transition: opacity 0.15s ease-out;
	transition: opacity 0.15s ease-out;
}

#bp-hello-container {
	background-color: white;
}

/*
 * 4.2 - Footer content
 */
.bp-hello-footer {
	border-radius: 0 0 3px 3px;
	background-color: white;
	border-top: 1px solid var(--bp-hello-color-secondary);
	padding: 6px 25px;
}

.bp-hello-footer p {
	font-size: 15px;
}

.bp-hello-social-cta {
	text-align: right;
}

.bp-hello-social-links {
	text-align: left;
}

.bp-hello-social li a {
	text-decoration: none;
}

/*
 * 4.3 - Header content
 */
.bp-hello-header {
	padding: 6px 25px;
}

.bp-hello-header h1 {
	width: calc(100% - 51px);
}

#bp-hello-container .bp-hello-header {
	border-bottom: 1px solid var(--bp-hello-color-secondary);
}

.bp-hello-title {
	text-align: right;
}

.bp-hello-close {
	position: absolute;
	top: 20px;
	left: 25px;
	text-align: left;
}

/*
 * 4.4 - Content content
 */
.bp-hello-content {
	background-color: white;
}

/*------------------------------------------------------------------------------
 * 5.0 - Media
 *----------------------------------------------------------------------------*/
.bp-hello-content img {
	border-radius: 2px;
	max-width: 100%;
}

.bp-hello-content iframe {
	width: 100%;
}

/*------------------------------------------------------------------------------
 * 6.0 - Media Queries
 *----------------------------------------------------------------------------*/
/*
 * 6.1 - Desktop Medium
 */
@media only screen and (min-width: 1024px) {
	#bp-hello-backdrop {
		display: block;
	}
	#bp-hello-container {
		position: fixed;
		top: 60px;
		right: var(--bp-hello-container-size);
		left: var(--bp-hello-container-size);
		bottom: 30px;
		z-index: 9999;
		border-radius: 3px;
	}
	#bp-hello-container .bp-hello-header h1 {
		line-height: inherit;
	}
	.bp-hello-header {
		height: auto;
		max-height: inherit;
		padding: 6px 30px;
	}
	.bp-hello-close {
		left: 30px;
	}
	.bp-hello-close .close-modal:before {
		line-height: 0.7;
	}
	.bp-hello-footer {
		position: fixed;
		right: var(--bp-hello-container-size);
		left: var(--bp-hello-container-size);
		bottom: 30px;
		z-index: 10000;
		height: auto;
		max-height: inherit;
		padding: 6px 30px;
	}
	.bp-hello-content {
		height: calc(100% - 90px);
		padding: 0 30px;
	}
	.bp-hello-content p {
		font-size: 14px;
	}
}

/**
 * 6.2 - Desktop Large
 */
@media screen and (min-width: 1280px) {
	#bp-hello-container,
	.bp-hello-footer {
		right: calc((100% - 896px) / 2);
		left: calc((100% - 896px) / 2);
	}
}
