/**
 * Styles shared between all of the account pages
 *
 * body_class: account bg-dark
 *
 * @author      Jim Mock
 * @copyright   2022, ON1
 */

/*------------------------------------------------------------------------------
 * Account header
 -----------------------------------------------------------------------------*/
body.account #site-header {
	background-color: transparent !important;
	z-index: 9;
}

body.account #account-header {
	background: url(https://ononesoft.cachefly.net/wp-content/themes/on1/images/account/hero-bg@2x.jpg) bottom left no-repeat;
	background-size: cover;
	margin-top: -56px;
	width: 100%;
}

@media (max-width: 575.98px) {
	body.account #account-header {
		background: url(https://ononesoft.cachefly.net/wp-content/themes/on1/images/account/hero-bg.jpg) center center no-repeat;
		background-size: cover;
	}
}

body.account #account-header .avatar-container { position: relative; }

body.account #account-header .avatar-container a {
	border: none;
	text-decoration: none;
}

body.account #account-header .avatar-container img.avatar {
	backface-visibility: hidden;
	border: 3px solid transparent;
	border-radius: 100%;
	display: block;
	height: auto;
	opacity: 1;
	width: 128px;
}

body.account #account-header .avatar-container:hover img.avatar { opacity: 0.2; }
body.account #account-header .avatar-container .plus-user img.avatar { border: 3px solid #fe842a; }

body.account #account-header .avatar-container .plus-user .icon-badge.plus-icon {
	bottom: 0;
	position: absolute;
	right: 0.4rem;
}

body.account #account-header .avatar-container .hover-state {
	left: 50%;
	opacity: 0;
	position: absolute;
	text-align: center;
	top: 60%;
	transform: translate(-50%, -50%);
	width: 100%;
}

body.account #account-header .avatar-container:hover .hover-state { opacity: 1; }

body.account #account-header .avatar-container .text {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	width: 100%;
}

body.account #account-header .avatar-container .text .fa-camera {
	font-size: 1.5rem;
	margin-left: 2px;
}

body.account #account-header #plus-resources-dropdown {
	display: inline-block;
	font-size: 0.75rem;
	margin-top: 0.5rem;
}

body.account #account-header #plus-resources.dropdown-menu {
	background: #282828;
	border: 1px solid #1e1e1e;
	color: #eaeaea;
	font-size: 0.875rem;
	margin-top: 0;
	padding: 0.75rem 0.5rem;
}

body.account #account-header #plus-resources.dropdown-menu a { color: #bdbdbe; }

body.account #account-header #plus-resources.dropdown-menu i {
	margin-right: 0.625rem;
	padding-bottom: 3px;
	vertical-align: middle;
}

body.account #account-header #plus-resources.dropdown-menu a:hover i { color: #fd6f16; }
body.account #account-header #plus-resources.dropdown-menu .dropdown-item { padding: 0.5rem 1.5rem; }

body.account #account-header #plus-resources.dropdown-menu .dropdown-item:hover {
	background: #303030;
	border-radius: 3px;
	color: #fff;
}

body.account #account-header #plus-resources-dropdown.dropdown-toggle::after {
	border: none;
	content: '\f107';
	font-family: 'Font Awesome 6 Pro';
	font-size: 0.75rem;
	line-height: 1;
	margin-left: 0.313rem;
	margin-top: -1px;
	vertical-align: middle;
}

body.account #account-header-nav {
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
}

body.account #account-header-nav .nav .nav-link {
	color: #bdbdbe;
	font-size: 1rem;
	padding: 0.375rem 0.75rem;
}

body.account #account-header-nav .nav a.nav-link:hover, body.account #account-header-nav .nav .nav-link a:hover { color: #eaeaea; }
body.account #account-header-nav .nav .nav-item.last a.nav-link { padding-right: 0; }

@media (max-width: 575.98px) {
	body.account #account-header-nav .nav .nav-item {
		display: block;
		width: 100%;
	}
}

body.account #account-header-nav .nav .nav-link.active {
	background: linear-gradient(to right, #fd6a18 0%, #e3187f 100% ) !important;
	color: #fff;
	font-weight: 700;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/*
body.account #account-header-nav .nav .dropdown-menu {
	background: #282828;
	border: 1px solid #1e1e1e;
	color: #eaeaea;
	font-size: 0.875rem;
	margin-top: 0;
	padding: 0.625rem 0;
}

body.account #account-header-nav .nav .dropdown-menu a { color: #bdbdbe; }

body.account #account-header-nav .nav i {
	margin-right: 0.625rem;
	padding-bottom: 3px;
	vertical-align: middle;
}

body.account #account-header-nav .nav a:hover i { color: #fd6f16; }

body.account #account-header-nav .nav .dropdown-menu .dropdown-header {
	font-weight: 700;
	padding: 0.5rem 1.25rem;
}

body.account #account-header-nav .nav .dropdown-menu .dropdown-item { padding: 0.5rem 1.5rem; }

body.account #account-header-nav .nav .dropdown-menu .dropdown-item:hover {
	background: #303030;
	color: #fff;
}

body.account #account-header-nav .nav .dropdown-toggle::after {
	border: none;
	content: '\f107';
	font-family: 'Font Awesome 6 Pro';
	font-size: 0.875rem;
	line-height: 1;
	margin-left: 0.313rem;
	margin-top: -0.125rem;
	vertical-align: middle;
}
*/