#flyerlink-fixed-header {
	top: 0px;
	border: 0px;
}	

#wrapper-inset {
	padding-top: 1px;
}

body.dev #wrapper-inset {
	padding-top: 1px;
}

#flyerlink-fixed-header-inset {
	background-color: #283339;
}

@media ( min-width: 1135px ) {
	#flyerlink-fixed-header {
		width: 100%;
		position: fixed;
		top: 0px;
		border: 0px;
		z-index: 10;
	}

	#wrapper-inset {
		padding-top: 58px;
	}

	body.dev #wrapper-inset {
		padding-top: 70px;
	}

	#flyerlink-fixed-header-inset {
		width: 100%;
		-webkit-box-shadow: 0 0 15px 0 #1a1a1a;
		-moz-box-shadow: 0 0 15px 0 #1a1a1a;
		box-shadow: 0 0 15px 0 #1a1a1a;
	}
}

body.dev #flyerlink-fixed-header-inset-dev-warning {
	background: url("/images/dev.png") 0 -8px repeat-x;
	height: 12px;
}

#flyerlink-fixed-header-search-links {
	padding: 5px;
	float: right;
}

#flyerlink-fixed-header-search-links a {
	margin-right: 5px;
}

/* Header bar: the logo and Go to on the left, search and Create in the middle, the icons and the
   account menu on the right. The left and right groups share the spare width equally, so the
   search stays centred; when space runs short the search box gives way rather than overlapping. */
#flyerlink-fixed-header-inset {
	position: relative;
	z-index: 10;
}

#header-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0 12px;
	color: #fff;
}

.header-bar-left,
.header-bar-right {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-bar-right {
	justify-content: flex-end;
	gap: 2px;
}

.header-bar-centre {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

#context-app {
	position: absolute;
	width: 0;
	height: 0;
}

.header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 6px 0 2px;
}

.header-logo img {
	height: 40px;
	display: block;
}

.header-bar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}

.header-bar-icon:hover,
.header-bar-icon:focus {
	background: rgba( 255, 255, 255, 0.1 );
	color: #fff;
}

/* Go to and Create */
.header-button {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px 0 12px;
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.header-button-goto {
	background: #9f74b2;
}

.header-button-goto:hover,
.show > .header-button-goto {
	background: #ad86be;
}

.header-button-create {
	background: #2196F3;
}

.header-button-create:hover,
.show > .header-button-create {
	background: #42a5f5;
}

.header-button:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.header-button:focus:not(:focus-visible) {
	outline: 0;
}

/* The dropdown panels. White, where the site's other dropdowns are teal */
.dropdown-menu.header-panel {
	margin-top: 8px;
	background: #fff;
	padding: 16px;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba( 20, 30, 36, 0.28 );
	color: #22303a;
	font-size: 15px;
	max-height: calc( 100vh - 80px );
	overflow-y: auto;
}

#flyerlink-fixed-header .header-panel .dropdown-item {
	padding: 7px 8px;
	border-radius: 6px;
	color: #22303a;
	white-space: normal;
}

#flyerlink-fixed-header .header-panel .dropdown-item:hover,
#flyerlink-fixed-header .header-panel .dropdown-item:focus {
	background: #eef4fb;
	color: #1976D2;
}

.header-section-title {
	padding: 0 8px 8px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5b6b75;
}

/* Icons sit in one 18px column, so the labels share a text edge. The id outranks Font
   Awesome's own fa-fw width */
#flyerlink-fixed-header .header-item-icon {
	flex-shrink: 0;
	width: 18px;
}

#flyerlink-fixed-header .header-item-icon {
	height: 13px;
	margin-right: 8px;
	font-size: 13px;
	color: #a7b4bc;
}

#flyerlink-fixed-header .header-logout .header-item-icon {
	color: inherit;
}

#flyerlink-fixed-header .header-panel .dropdown-item,
#flyerlink-fixed-header #header-search-panel .dropdown-item,
#flyerlink-fixed-header .header-mobile-links a {
	display: flex;
	align-items: center;
}

.header-panel kbd {
	padding: 0 6px;
	border: 1px solid #c9d2d8;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	color: #5b6b75;
	font-size: 12px;
	font-weight: 700;
}

/* Go to spans from the bar's left edge rather than from its button */
.header-bar-left .header-dropdown {
	position: static;
}

.dropdown-menu.header-goto-panel {
	top: 100%;
	left: 12px;
	width: max-content;
	max-width: calc( 100vw - 24px );
	margin-top: 4px;
}

.header-goto-columns {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 300px;
	grid-auto-columns: minmax( 150px, 200px );
	gap: 20px;
}

.header-goto-recent {
	padding: 12px 8px;
	border-radius: 10px;
	background: #f2f7fa;
}

.header-goto-section {
	display: flex;
	flex-direction: column;
	padding-top: 12px;
}

.header-goto-footer {
	margin-top: 16px;
	padding: 12px 8px 0;
	border-top: 1px solid #e3e8eb;
	color: #5b6b75;
	font-size: 14px;
}

.dropdown-item.header-recent-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

#flyerlink-fixed-header .header-recent-item .header-item-icon {
	margin-right: 0;
}

.header-recent-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-recent-code {
	flex-shrink: 0;
	color: #7a8a94;
	font-size: 12px;
}

.header-recent-empty {
	margin: 0;
	padding: 0 8px;
	color: #5b6b75;
	font-size: 14px;
}

/* Centred under its button */
.dropdown-menu.header-create-panel {
	left: 50%;
	width: min( 620px, calc( 100vw - 24px ) );
	transform: translateX( -50% );
}

.dropdown-menu.header-create-panel.show {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 12px;
}

.header-create-section {
	display: flex;
	flex-direction: column;
}

/* Account */
.header-bar-right > .header-dropdown {
	margin-left: 6px;
	padding-left: 8px;
	border-left: 1px solid rgba( 255, 255, 255, 0.18 );
}

.header-account-button {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.header-account-button:hover,
.show > .header-account-button {
	background: rgba( 255, 255, 255, 0.1 );
}

.header-account-button.dropdown-toggle::after {
	display: none;
}

.header-account-button img,
.header-mobile-account img {
	width: 30px;
	flex-shrink: 0;
}

.header-account-chevron {
	font-size: 12px;
}

.header-account-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.header-account-name,
.header-account-workgroup {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header-account-name {
	font-size: 14px;
	font-weight: 700;
}

.header-account-workgroup {
	font-size: 12px;
	color: #b7c3ca;
}

.dropdown-menu.header-account-panel {
	width: 300px;
}

.header-account-head {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
	padding: 0 8px 12px;
	border-bottom: 1px solid #e3e8eb;
}

.header-account-head .header-account-name {
	font-size: 16px;
}

.header-panel .header-account-workgroup,
#header-mobile-menu .header-account-workgroup {
	color: #5b6b75;
}

#flyerlink-fixed-header .header-panel .dropdown-item.header-logout,
#flyerlink-fixed-header #header-mobile-menu .header-logout {
	color: #b3261e;
}

/* Recent calls */
#telepath-header-cell {
	position: relative;
}

#telepath-active-calls {
	margin-left: 8px;
	font-size: 15px;
}

/* Search */
#context-search-form {
	position: relative;
	flex: 0 1 auto;
	width: 600px;
	min-width: 240px;
	margin: 0;
}

.header-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 8px 0 12px;
	border-radius: 8px;
	background: #fff;
	color: #5b6b75;
	font-weight: 400;
}

#flyerlink-fixed-header-inset.search-open .header-search-box {
	box-shadow: 0 0 0 3px #5ECECE;
}

/* The id outranks the site-wide input rule, which would add a border, padding and 12px text */
#flyerlink-fixed-header .header-search-box input,
#flyerlink-fixed-header .header-search-box input:focus {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	color: #22303a;
	font-size: 15px;
}

#flyerlink-fixed-header .header-search-box input::placeholder {
	color: #7a8a94;
	font-size: 15px;
	opacity: 1;
}

#flyerlink-fixed-header .header-search-submit {
	flex-shrink: 0;
	margin: 0 -4px;
	padding: 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #5b6b75;
	cursor: pointer;
}

#flyerlink-fixed-header .header-search-submit:hover {
	background: #eef1f3;
	color: #1976D2;
}

#header-search-close,
#header-search-toggle {
	display: none;
}

/* What to search in: a dropdown like Go to and Create, opening under the right of the search box */
.header-search-scope {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	height: 28px;
	margin-right: -2px;
	padding: 0 8px 0 10px;
	border: 0;
	border-radius: 6px;
	background: #eef1f3;
	color: #3d4c55;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.header-search-scope:hover,
.show > .header-search-scope {
	background: #e3e8eb;
}

.header-search-scope.dropdown-toggle::after {
	display: none;
}

.header-search-scope svg {
	font-size: 10px;
}

.dropdown-menu.header-scope-panel {
	right: -6px;
	width: 300px;
	margin-top: 13px;
	padding: 8px;
}

.dropdown-menu.header-scope-panel.show {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 4px;
}

#flyerlink-fixed-header .header-scope-panel .dropdown-item.active {
	background: #eef4fb;
	color: #1976D2;
	font-weight: 700;
}

#header-search-panel {
	display: none;
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	width: 100%;
	max-height: 400px;
	overflow-y: auto;
	padding: 12px 8px 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 48px rgba( 20, 30, 36, 0.28 );
	color: #22303a;
}

#flyerlink-fixed-header-inset.search-open #header-search-panel {
	display: block;
}

#flyerlink-fixed-header-inset.search-open #header-search-panel.has-query {
	display: none;
}

#flyerlink-fixed-header #header-search-panel .dropdown-item {
	padding: 7px 8px;
	border-radius: 6px;
	color: #22303a;
	white-space: normal;
}

#flyerlink-fixed-header #header-search-panel .dropdown-item:hover {
	background: #eef4fb;
}

#header-menu-toggle,
#header-mobile-menu,
#flyerlink-fixed-header-inset.menu-open .header-menu-toggle-open,
#flyerlink-fixed-header-inset:not(.menu-open) .header-menu-toggle-close {
	display: none;
}

/* The labels on the right go before the search is pushed off centre */
@media ( max-width: 1799.98px ) {
	#telepath-active-calls {
		display: none;
	}
}

@media ( max-width: 1699.98px ) {
	.header-account-text {
		display: none;
	}
}

/* Go to and Create keep their colour but lose their labels */
@media ( max-width: 1199.98px ) {
	.header-bar-left,
	.header-bar-right {
		flex: 0 0 auto;
	}

	.header-bar-centre {
		flex: 1 1 auto;
	}

	#context-search-form {
		flex: 1 1 auto;
		width: auto;
	}

	.header-button {
		justify-content: center;
		width: 44px;
		padding: 0;
	}

	.header-button-label,
	.header-button.dropdown-toggle::after {
		display: none;
	}

	/* Go to wraps its columns, with recently viewed across the top */
	.dropdown-menu.header-goto-panel {
		width: calc( 100vw - 24px );
	}

	.header-goto-columns {
		grid-auto-flow: row;
		grid-template-columns: repeat( auto-fill, minmax( 170px, 1fr ) );
	}

	.header-goto-recent {
		grid-column: 1 / -1;
		columns: 2 240px;
		column-gap: 20px;
		padding: 12px 8px;
	}

	.header-goto-recent .header-section-title {
		column-span: all;
	}
}

/* Phones: Go to, Create and the account move into a menu under the bar, and search opens over it */
@media ( max-width: 767.98px ) {
	#header-bar {
		position: relative;
		gap: 6px;
		padding: 0 6px 0 8px;
	}

	.header-logo img {
		height: 34px;
	}

	.header-bar-left .header-dropdown,
	.header-bar-centre .header-dropdown,
	.header-bar-right > .header-dropdown {
		display: none;
	}

	#header-menu-toggle {
		display: flex;
	}

	#header-search-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 40px;
		height: 38px;
		padding: 0 12px;
		overflow: hidden;
		border: 0;
		border-radius: 19px;
		background: rgba( 255, 255, 255, 0.14 );
		color: #d9e1e5;
		font-size: 15px;
		white-space: nowrap;
	}

	#context-search-form {
		display: none;
		position: absolute;
		top: 9px;
		left: 8px;
		right: 8px;
		z-index: 3;
		min-width: 0;
	}

	#flyerlink-fixed-header-inset.search-open #context-search-form {
		display: block;
	}

	#header-search-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 16px;
		background: #eef1f3;
		color: #5b6b75;
	}

	#header-search-panel {
		max-height: calc( 100vh - 80px );
		overflow-y: auto;
	}

	#flyerlink-fixed-header-inset.menu-open #header-mobile-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc( 100vh - 70px );
		overflow-y: auto;
		padding: 8px 16px 0;
		background: #fff;
		box-shadow: 0 12px 24px rgba( 20, 30, 36, 0.3 );
		color: #22303a;
	}
}

.header-mobile-section {
	border-bottom: 1px solid #e3e8eb;
}

.header-mobile-section summary {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 4px;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.header-mobile-section summary::-webkit-details-marker {
	display: none;
}

.header-mobile-section summary::after {
	content: '';
	width: 8px;
	height: 8px;
	margin: 0 4px 4px auto;
	border-right: 2px solid;
	border-bottom: 2px solid;
	transform: rotate( 45deg );
}

.header-mobile-section[open] > summary::after {
	margin-bottom: -4px;
	transform: rotate( -135deg );
}

.header-mobile-create {
	border-bottom: 0;
}

.header-mobile-create > summary {
	justify-content: center;
	margin: 4px 0 8px;
	border-radius: 10px;
	background: #2196F3;
	color: #fff;
}

.header-mobile-create > summary::after {
	margin-left: 0;
}

.header-mobile-create .header-section-title {
	padding: 8px 4px 4px;
}

.header-mobile-links {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	padding: 0 0 8px 20px;
}

#flyerlink-fixed-header #header-mobile-menu a {
	color: #22303a;
}

.header-mobile-links a {
	padding: 10px 4px;
}

.header-mobile-section .dropdown-item {
	width: auto;
	padding: 8px 4px 8px 20px;
	white-space: normal;
}

.header-mobile-section .header-recent-empty {
	padding: 0 4px 12px 20px;
}

/* The phone menu's items, 3px larger than the desktop menus' so they're easy to read on a phone */
#flyerlink-fixed-header #header-mobile-menu .header-mobile-links a,
#flyerlink-fixed-header #header-mobile-menu .header-recent-name,
#flyerlink-fixed-header #header-mobile-menu .header-recent-code,
#flyerlink-fixed-header #header-mobile-menu .header-recent-empty,
#flyerlink-fixed-header #header-mobile-menu .header-account-workgroup,
#flyerlink-fixed-header #header-mobile-menu .header-logout {
	font-size: 15px;
}

#flyerlink-fixed-header #header-mobile-menu .header-account-name {
	font-size: 17px;
}

#flyerlink-fixed-header #header-mobile-menu .header-item-icon {
	height: 16px;
	font-size: 16px;
}

.header-mobile-account {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
}

.header-mobile-account .header-account-text {
	display: flex;
}

.header-mobile-account .header-logout {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

#flyerlink-fixed-header a {
	color: white;
	text-decoration: none;
}

#flyerlink-fixed-header-label #news-count span {
	padding-top: 4px;
	padding-right: 12px;
	padding-bottom: 4px;
	padding-left: 12px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.3 );
	border-radius: 3px 3px 3px 3px;
	background-color: #59a100;
}

#flyerlink-fixed-header-label #news-count span:hover {
	text-decoration: underline;
}


.cf:before, .cf:after{
    content:"";
    display:table;
}
 
.cf:after{
    clear:both;
}
 
.cf{
    zoom:1;
}    


/* Form wrapper styling */
.form-wrapper {
	padding-top: 2px;
}
 
/* Form text input */
 
.form-wrapper input {
    width: 130px;
    padding: 5px 5px;
    float: left;    
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;    
		height: 15px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    
 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0 5px;
    cursor: pointer;
    height: 25px;
	font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background: #009688;
    border-radius: 0 3px 3px 0px;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
}   
   
.form-wrapper button:hover{     
  background: #26A69A;
	text-decoration: none;
}   
   
.form-wrapper button:active {
	padding-top: 2px;
}
.form-wrapper button:focus{   
  background: #26A69A;
	outline: 0;   
}
 
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}


/* Our Moot overrides */
.moot {
	font-size: 16px;
}

.moot .m-header {
	height: 48px;
	background-image: url( /images/logos/w3pin_logo.png );
	background-repeat: no-repeat;
	background-position: 28px 10px;
}

.moot .m-face {
	border-radius: 50px;
}

.moot .m-title, .moot .m-cat a {
	font-weight: 700;
}

.moot .m-get-replies {
	margin-top: -1.2em;
	margin-bottom: 20px;
	padding-top: 0;
	padding-bottom: 0;
}

.moot a.m-me {
	display: none;
}

.moot button, .moot .m-button {
	background-color: #59a100 !important;
}

.moot .m-more-moots::after, .moot .m-get-replies .m-to-tail::after {
	color: #59a100 !important;
}

.moot em {
	font-weight: 700;
}

.moot em.m-icon {
	font-family: icon;
}

.moot .m-newcount {
	margin-top: -0.4em;
}

.moot .m-seed {
	margin-bottom: 20px;
}

.moot .m-header .m-wrap {
	padding: 0 4em;
}

.moot .m-body strong {
	font-weight: 700;
}

.moot .m-body em {
	font-weight: 400;
}

.moot .m-page {
	width: 80%;
}

.moot .m-sidebar {
	width: 20%;
}

.moot .m-wrap {
	max-width: 1000px;
}

.moot .m-body p {
	margin-bottom: 5px;
}

.moot .m-body p.m-empty {
	display: none;
}

.moot .m-thumb img {
	max-width: 200px;
	height: auto;
	border: 1px solid #aaa;
	margin-top: 5px;
	margin-bottom: 5px;
}

.moot .m-image::before {
	content: '';
}

svg.fa-trash-alt {
	color : #777;
}

svg.fa-trash-alt:hover {
	color : darkred;
	cursor: pointer;
}

button svg.fa-trash:hover {
	color : darkred;
	cursor: pointer;
}

.ck-button svg.fa-trash-alt {
	color: white;
}


/* Override Vue to not circle the icons in alerts */
.v-alert__icon {
	border-radius: 0 !important;
}




.xdebug-error {
	position: absolute;
	z-index: 100000;
	left: 50px;
	width: calc(100% - 100px);
	top: 100px;
}