/* Responsive */
@media (min-width: 320px) and (max-width: 700px) {
	:root {
		--mobile-navbar-height: 58px;
		--mobile-footer-height: 30px;
		--mobile-breadcrumb-height: 24px;
		--border-color: #808080;
		--dropdown-max-width: 260px;
	}
	/* Layout adjustments */
	#wrap {
		display: flex;
		flex-direction: column;
		margin-top: var(--mobile-navbar-height);
		margin-bottom: var(--mobile-footer-height);
		min-height: calc(100vh - (var(--mobile-navbar-height) + var(--mobile-breadcrumb-height)));
		min-height: calc(100svh - (var(--mobile-navbar-height) + var(--mobile-breadcrumb-height)));
	}
	#page-body {
		flex: 1;
	}
	/* Header navbar */
	#page-header > .navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--mobile-navbar-height);
		z-index: 500;
		max-width: 100%;
		border-radius: 0;
		background-color: #12A3EB;
		background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
		background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
		background-repeat: repeat-x;
		padding: 0;
		margin: 0;
	}
	/* Avatar styling */
	#page-header a.header-avatar img {
		border-radius: 50%;
	}
	#page-header ul#nav-main .header-profile {
		background-color: #fff;
		border-radius: 5px;
		padding: 1px 4px 0px 4px;
		line-height: 24px;
		margin-top: 1px;
	}
	/* Main navigation */
	#page-header ul#nav-main {
		height: 28px;
		padding: 2px 8px;
		font-size: 1.2em;
		line-height: 1;
		border-bottom: 1px solid var(--border-color);
		
	}
	#page-header #nav-main > li > a,
	#page-header #nav-main > li > a > i,
	#page-header ul#nav-breadcrumbs a,
	#page-header ul#nav-breadcrumbs span {
		color: #fff;
	}
	/* Hide spans by default, show specific ones */
	#page-header ul#nav-main span {
		display: none;
	}
	#page-header ul#nav-main li#username_logged_in span,
	#page-header li#quick-links .dropdown  span,
	#page-header ul#nav-main .dropdown-contents span {
		display: inline-block;
	}
	/* Navigation icons */
	#page-header ul#nav-main i {
		font-size: 1.1em;
		transform: scale(1.5);
		margin: 8px 5px 0 5px;
	}
	#page-header ul#nav-main i.fa-bell {
		transform: scale(1.3);
	}
	/* Dropdown styling */
	#page-header ul#nav-main .dropdown-contents {
		font-size: 12px;
		max-width: var(--dropdown-max-width);
	}
	#page-header ul#nav-main .dropdown-contents img {
		display: none;
	}
	#page-header ul#nav-main .dropdown-contents div.notification_text {
		margin-left: 0;
	}
	/* Breadcrumbs */
	#page-header #nav-breadcrumbs {
		height: 24px;
		font-size: 1.1em;
		padding: 0 8px;
	}
	#page-header #nav-breadcrumbs li.breadcrumbs {
		max-width: 80%;
		height: 24px;
		white-space: nowrap;
		overflow: hidden;
	}
	#page-header li.breadcrumbs {
		padding-top: 1px;
	}
	/* Footer navbar */
	#page-footer > .navbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 500;
		display: block;
		height: var(--mobile-footer-height);
		font-size: 1.3em;
		line-height: 1.5em;
		border-radius: 0;
		background-color: #12A3EB;
		background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
		background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
		background-repeat: repeat-x;
		padding: 0;
		margin: 0;
	}
	/* Copyright adjustments */
	.copyright {
		text-align:left;
		border-top: 1px solid var(--border-color);
		padding-top: 4px;
		padding-left: 0px;
	}
	.copyright p.footer-row {
		line-height:12px;
	}
}
/* Desktop */
@media screen and (max-width: 900px) and (min-width: 701px) {
	#page-header ul#nav-main li.rightside span {
		display:none;
	}
	#page-header ul#nav-main li#username_logged_in span,
	#page-header li#quick-links .dropdown  span,
	#page-header ul#nav-main .dropdown-contents span {
		display:inline-block;
	}
}
@media (min-width: 701px) {
	html,
	body {
		scroll-padding-top: 58px;
		padding: 0;
	}
	#wrap {
		display: flex;
		flex-direction: column;
		min-height: calc(100dvh - 20px);
		border-radius: 0;
		margin-top: -2px;
	}
	#page-body {
		flex: 1;
	}
	#wrap > #page-header {
		margin-top: 48px;
	}
	#wrap > #page-footer {
		margin-bottom: 10px;
	}
	#page-header > .navbar {
		position: fixed;
		top: 0;
		left: 50%;
        transform: translateX(-50%);
		width: calc(100% - 56px);
		max-width: 1152px;
		height: 60px;
		z-index: 500;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background-color: #12A3EB;
		background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
		background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
		background-repeat: repeat-x;
		padding: 0;
		margin: 0;
	}
	#page-header #nav-main > li > a,
	#page-header #nav-main > li > a > i,
	#page-header ul#nav-breadcrumbs a,
	#page-header ul#nav-breadcrumbs span {
		color: #fff;
	}
	#page-header ul#nav-main {
		max-width: 1152px;
		height: 28px;
		padding: 2px 8px;
		font-size: 1.2em;
		line-height: 1;
		border-bottom: 1px solid #808080;
	}
	#page-header ul#nav-main .header-profile {
		background-color: #fff;
		border-radius: 5px;
		padding: 1px 4px 0px 4px;
		line-height: 24px;
		margin-top: 1px;
	}
	/* Navigation icons */
	#page-header ul#nav-main i {
		font-size: 1.1em;
		transform: scale(1.5);
		margin: 8px 5px 0 5px;
	}
	#page-header ul#nav-main i.fa-bell {
		transform: scale(1.3);
	}
	#page-header ul#nav-breadcrumbs {
		height: 24px;
		font-size: 1.1em;
		padding: 0 8px;
	}
	#page-header #nav-breadcrumbs li.breadcrumbs {
		max-width: 80%;
		height: 24px;
		white-space: nowrap;
		overflow: hidden;
	}
	#page-header li.breadcrumbs {
		padding-top: 1px;
	}
	/* Footer navbar */
	#page-footer > .navbar {
		position: fixed;
		bottom: 0;
		left: 50%;
        transform: translateX(-50%);
		width: calc(100% - 56px);
		max-width: 1152px;
		z-index: 500;
		height: 30px;
		font-size: 1.3em;
		line-height: 1.5em;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: #12A3EB;
		background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
		background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
		background-repeat: repeat-x;
		padding: 0;
		margin: 0;
	}
}
/* Responsive and Desktop shared */
#page-header #toggle-theme .icon {
	position: relative;
	top: 1px;
	color: #fff;
}
ul#nav-footer > li.breadcrumbs a,
ul#nav-footer > li > a,
ul#nav-footer > li > a > i {
	color: #fff;
}
/* Footer icons */
ul#nav-footer .fa-bars {
	font-size: 1.6em;
	line-height: 1.4em;
}
ul#nav-footer .fa-home {
	font-size: 19px;
	vertical-align: text-center;
}
/* Footer text visibility */
ul#nav-footer .rightside a span {
	display: none;
}
ul#nav-footer {
	padding: 0 8px;
}
ul#nav-footer ul.dropdown-contents span {
	display: inline;
}
#nav-footer li.breadcrumbs {
	width: calc(100% - 60px);
}
/* Dark Mode */
html.phpbb-dark-mode #page-header > .navbar,
html.phpbb-dark-mode #page-footer > .navbar { 
	background-color: #1e2c3d;
	background-image: linear-gradient(to bottom, #2a3e55 0%, #1e2c3d 35%, #192533 70%, #111922 100%);
	background-repeat: repeat-x;
	border: none !important;
}
html.phpbb-dark-mode #page-header > .navbar a,
html.phpbb-dark-mode #page-header > .navbar i,
html.phpbb-dark-mode #page-header ul#nav-breadcrumbs *,
html.phpbb-dark-mode #page-footer > .navbar a,
html.phpbb-dark-mode #page-footer > .navbar i { color: #7cc1ff !important; }
html.phpbb-dark-mode #wrap > #page-footer {
	margin-bottom: 14px;
}