/* Carpokes Header Dashboard - base image version */

/* Kill old Header Banner background/color behavior */
.headerbar,
.dashboard-header,
.headerbar .dashboard-header,
.headerbar .header-dashboard,
.headerbar .cp-headerdash-base-wrap,
.cp-headerdash-base-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
}

/* Also defeat inline background styles from ACP/config if present */
.headerbar[style],
.dashboard-header[style],
.header-dashboard[style] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Keep the phpBB/headerbar area from creating padding or horizontal scroll */
.headerbar {
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
}

/* Main dashboard wrapper */
.dashboard-header {
	position: relative;
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
}

.headerbar .header-dashboard {
	display: block !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 100%;
	overflow: hidden !important;
}

/* Hide the original phpBB header identity block */
.headerbar #site-description,
.headerbar .site-description,
.headerbar h1,
.headerbar p.skiplink {
	display: none !important;
}

/* Keep our hidden accessibility block out of view */
.dashboard-header #hidden {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -100;
}

/* Old IE fallback retained from original extension */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.headerbar .header-dashboard {
		width: 100% !important;
	}
}

/* Search box positions retained from original extension */
.headerdashboard-search-1 {
	top: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-2 {
	top: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-3 {
	bottom: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-4 {
	bottom: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-7 {
	bottom: -5px;
	left: 39%;
	position: absolute;
	z-index: 5;
}

/* Hide old mobile banner area from original extension */
.headerbar .mobile-header-dashboard {
	display: none !important;
}

/* Search styling retained from original extension */
.navbar #search-box {
	box-shadow: none;
	margin: auto;
	padding: 5px;
}

.rtl .navbar #search-box {
	float: left;
}

.navbar .button-search-end {
	border-radius: 0px 4px 4px 0px;
}

.rtl .navbar .button-search-end {
	border-radius: 4px 0px 0px 4px;
}

/* Base banner image wrapper */

.cp-headerdash-base-wrap {
	position: relative;
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 10px auto 12px auto;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.cp-headerdash-base-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Overlay layer for future counters/photos */
.cp-headerdash-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Temporary overlay alignment boxes */

.cp-overlay-test {
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	border: 2px solid rgba(255, 0, 0, 0.95);
	background: rgba(255, 255, 0, 0.25);
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-shadow: 0 1px 2px #000;
	pointer-events: none;
}

/* Left gauge odometer window */
.cp-overlay-members {
	left: 8.8%;
	top: 63.5%;
	width: 8.6%;
	height: 6.2%;
	padding-top: 0.7%;
}

/* Right gauge odometer window */
.cp-overlay-posts {
	left: 84.1%;
	top: 63.5%;
	width: 8.6%;
	height: 6.2%;
	padding-top: 0.7%;
}

/*
	Center photo windows.
	These now cover the full photo/window openings much more closely.
	When we switch from test boxes to real images, these same coordinates
	will become the image slots.
*/

/* Center photo window 1 */
.cp-overlay-photo-1 {
	left: 24.0%;
	top: 39.0%;
	width: 25.6%;
	height: 50.5%;
	padding-top: 13.0%;
}

/* Center photo window 2 */
.cp-overlay-photo-2 {
	left: 50.8%;
	top: 39.0%;
	width: 26.3%;
	height: 50.5%;
	padding-top: 13.0%;
}

/* Responsive */

@media only screen and (max-width: 900px) {
	.headerbar .header-dashboard {
		display: block !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 12px);
		max-width: 100%;
		margin: 8px auto 10px auto;
		overflow: hidden;
	}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.headerbar .header-dashboard {
		display: block !important;
		border-radius: 0 !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 8px) !important;
		max-width: 100% !important;
		margin: 6px auto 8px auto;
		overflow: hidden;
	}

	.cp-headerdash-base-image {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		border-radius: 6px;
	}

	.cp-headerdash-overlay {
		display: block !important;
	}

	.cp-overlay-test {
		border-width: 1px;
		font-size: 9px;
	}
}