/**
	 *
	 *  Video addition
	 *  2022-08-20 CB
	 *  TEMP: SHOULD BE REPLACED BY MICHAEL'S
	 *
	 */
	
/*
	.play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.play-icon .fas.fa-play-circle {
		cursor: pointer;
		font-size: 2.25rem;
		color: #fff;
		filter: drop-shadow(0 0 5px #111);
	}

	.video-converting {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #444;
	}

	.video-converting::after {
		content: 'Converting';
		font-size: 1.15rem;
	}
	
	.video-converting::before {
		content: '\f013';
		font-size: 2rem;
		font-weight: 900;
		font-family: 'Font Awesome 5 Free';
		animation: anim-spin 3s infinite linear;
	}

	.video-converting.video-thumbnail::after {
		display: none;
	}

	.video-converting.video-thumbnail::before {
		font-size: 1rem;
	}

	@keyframes anim-spin { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }

	.video-failed {
		background-color: #900;
	}

	.video-failed::after {
		content: 'Error';
		font-size: 1.15rem;
	}

	.video-failed::before {
		content: '\f071';
		animation: none;
	}

*/




/*
	Target: 1-col-layout.css

*/
.main-col-centered {
	max-width: 41rem;
	margin: 0 auto;
}


/*
	Target: TBD
	Maximum column width

*/
.all-col-max {
	max-width: 36rem;					/* Should be a variable defined in CSS_CONSTANT */
	margin-left: auto;					/* Don't want to override element's margin-top or bottom */
	margin-right: auto;
}


/*
	*** IMPORTANT ***
	More work is needed to harmonize the various paddings
	Different placeholder colors (depending on browsers?)

*/
input,
select,
textarea {
/*
	Prevent the automated zoom in Safari 
	on form elements (input, textarea, select, etc)
	when font-size < 16px (1em)
*/
	font-size: 1rem; 

/*
	Remove the shadow in Safari input boxes
*/
	-webkit-appearance: none;
}


label {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
}

hr {
	margin: 0;
	border: none;
	border-top: solid 1px #ddd;
}




.all-flex-row {
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	align-items: stretch;
}

.all-flex-row > * {
	flex: 0 0 1rem;
	margin: 0 1rem 0 0;
}

.all-flex-row > *:last-child {
	margin: 0;
}




.all-gradient-top,
.all-gradient-bottom {
	position: absolute;
	left: 0;
	right: 0;
}

.all-gradient-top {
	top: 0;
	color: #fff;
	padding: 0 0 7rem;
	background: linear-gradient(
		rgba(0,0,0,0.750) 0%,
		rgba(0,0,0,0.541) 19%,
		rgba(0,0,0,0.382) 34%,
		rgba(0,0,0,0.278) 47%,
		rgba(0,0,0,0.194) 56%,
		rgba(0,0,0,0.126) 65%,
		rgba(0,0,0,0.075) 73%,
		rgba(0,0,0,0.042) 80%,
		rgba(0,0,0,0.021) 86%,
		rgba(0,0,0,0.008) 91%,
		rgba(0,0,0,0.003) 95%,
		rgba(0,0,0,0.001) 98%,
		rgba(0,0,0,0.000) 100%
	);
}

.all-gradient-bottom {
	bottom: 0;
	color: #fff;
	padding: 7rem 0 0;
	background: linear-gradient(
		rgba(0,0,0,0.000) 0%,
		rgba(0,0,0,0.001) 2%,
		rgba(0,0,0,0.003) 5%,
		rgba(0,0,0,0.008) 9%,
		rgba(0,0,0,0.021) 14%,
		rgba(0,0,0,0.042) 20%,
		rgba(0,0,0,0.075) 27%,
		rgba(0,0,0,0.126) 35%,
		rgba(0,0,0,0.194) 44%,
		rgba(0,0,0,0.278) 53%,
		rgba(0,0,0,0.382) 66%,
		rgba(0,0,0,0.541) 81%,
		rgba(0,0,0,0.750) 100%
	);
}



/*
	Target: all.css

	Padding Top Right Bottom Left
	Medium size: 1.5rem

*/
.all-pad-trbl {
	padding: 1.5rem;
}

.all-pad-rbl {
	padding: 0 1.5rem 1.5rem;
}

.all-pad-trl {
	padding: 1.5rem 1.5rem 0;
}

.all-pad-tb {
	padding: 1.5rem 0;
}

.all-pad-rl {
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

.all-pad-t {
	padding: 1.5rem 0 0;
}

.all-pad-b {
	padding: 0 0 1.5rem;
}


/*
	Target: all.css

	Padding Top Right Bottom Left
	Small size: 1rem

*/
.all-pad-sm-trbl {
	padding: 1rem;
}

.all-pad-sm-trl {
	padding: 1rem 1rem 0;
}

.all-pad-sm-rbl {
	padding: 0 1rem 1rem;
}

.all-pad-sm-tb {
	padding: 1rem 0;
}

.all-pad-sm-rl {
	padding: 0 1rem;
}

.all-pad-sm-t {
	padding: 1rem 0 0;
}

.all-pad-sm-b {
	padding: 0 0 1rem;
}


/*
	Target: all.css

	Padding Top Right Bottom Left
	X-Small size: 0.5rem

*/
.all-pad-xs-trbl {
	padding: 0.5rem;
}

.all-pad-xs-b {
	padding: 0 0 0.5rem;
}



/*
	Visibility & Rating labels
	Could be specific to Profile only or more area

*/
.all-label-icons-right {
	display: flex;
}

.all-label-icons-right span {
	display: inline-flex;
	margin-left: auto;
}

.all-label-icons-right i {
	font-size: 1rem;
	margin: 0 !important;
	padding: 0 0 0 0.25rem !important;
	color: #ddd;
}

.all-label-icons-right i.on {
	color: #000;
}


/*
	2-col field presentation

*/
.all-fields-2-col {
	display: flex;
	padding: 0 0 1rem;
}

.all-fields-2-col:nth-last-of-type(1) {
	padding: 0;									/* Remove all padding for the last field block */
}

.all-fields-2-col > * {
	display: inline-flex;
	margin: 0;
}

.all-fields-2-col > label {
	flex: 40%;
	font-weight: 700;
	align-items: unset;							/* Keep label vertically on top */
	padding-right: 0.5rem;
}

.all-fields-2-col > span {
	flex: 60%;
}




.all-tip {
	background-color: #4ba0b5 !important;	/* bootstrap Info color */
	background-color: #53a451 !important;	/* bootstrap Success color */
	background-color: #555555 !important;
	border-radius: 0.5rem;
	color: #fff;
}

.all-tip i {
	color: #fff;
	padding-right: 0.75rem;
}



.all-image-cover {
	position: relative;
	background-color: #999;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.all-square {
	width: 100%;
	margin: 0;
	padding: 100% 0 0;
}


/*
	Current .actions class is depenant on .masonry-card
*/
.all-actions {
	display: flex;
	justify-content: center;
}

.all-actions > button {
	display: inline-flex;
	margin-right: 1rem;
}

.all-actions > button:last-of-type {
	margin-right: 0 !important;
}


/*
	Target: all.css (used by Profile, Trophy, Post area)

*/
.all-overlay {
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	background-color: rgba(255,255,255,1);
/*
	transform: translate3d(0);
	transition: background-color 0.25s ease;
*/
}

.all-overlay-2 {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-color: #fff;
/*
	background-color: #fff;
	transform: translate3d(0);
	transition: background-color 0.5s ease;
*/
}

.all-mask {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: rgba(0,0,0,0);
}


/*
	Used for overlay scroll management

*/
.all-noscroll {
	overflow: hidden;
}

.all-rotate:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.75);
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/tpro-loading.gif);
}



.all-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.5rem 1rem 0;
}

.all-filters > * {
	display: inline-flex;
	margin: 0.5rem 0.5rem 0 0;
}


.all-tag {
	display: inline-flex;
	margin: 0.5rem 0.5rem 0 0;
	font-family: 'Roboto Condensed';
	font-size: 1rem;
	font-weight: 900;
	border-radius: unset;
	transition: background-color 0.25s ease;
}

.UNUSED-all-tag:after {
	display: inline-flex;
	align-items: center;

	content: '\f111'; /* Full circle */
	content: '\f00c'; /* Check */
	content: '\f2ed'; /* Trash */
	content: '\f058'; /* Circled check */
	content: '\f057'; /* Circled times */
	content: '\f00d'; /* Times */
	content: '\f22d'; /* Small circle */

	font-family: 'Font Awesome\ 5 Free';
	font-weight: 700;
	padding: 0 0 0 0.66rem;
	color: #fff;
}



.prfl-member span {
	display: inline-block;
	vertical-align: top;
	width: 3.5rem;
	padding-top: 3.5rem;
	border-radius: 100%;
	background-size: 3.5rem;
}

.prfl-member h2 {
	display: inline-block;
	vertical-align: top;
	margin-left: 1rem;
}

.prfl-member b {
	display: block;
	font-family: 'Roboto';
	font-size: 0.8rem;
	font-weight: normal;
	color: #999;
}




.prfl-banner {
	height: 40vh;
	max-height: 300px;
	margin: 0 0 100px;
}

.prfl-banner > img {
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	right: 0;
	width: 200px;
	height: 200px;
	bottom: -100px;

	margin: 0 auto;
	padding: 0;
	border-radius: 100%;
	border: solid 1.5px #fff;
	background-color: #999;
}



/*
	*** OPTIONAL ***
	Used in document-personal.php
	The banner's height is set at a max-height of 300px
	Expending the banner's height when reaching specific width (currently set at 1025px)

*/
@media only screen and (min-width: 1025px) {

	.prfl-banner {
		height: 30vw;				/* Calculating 1025px / 300px (current max-height when width < 1025px) = 30% */
		max-height: 433px;			/* Calculating 700px (max width of left column) / 1.618 (Golden ratio) = 433px */
	}

}


.prfl-ico {
	display: flex;
	align-items: center;
	justify-content: center;
}



/*
	Override wait-screen class
	Change position from absolute to fixed
	Prevent sliding on iPhone

	Used in img/_uploadOrSelectImages
	Used in img/_cropImage

*/
.wait-screen {
	position: fixed !important;
}

.all-flex-centered,
.wait-screen-text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.wait-screen-text span {
	color: #fff;
	font-weight: 700;
	background-image: url(../images/tp-loading-black-2.gif);
	background-size: 2.5rem;
	background-repeat: no-repeat;
	background-position: top center;
	text-align: center;
	padding: 4rem 0 0;
}


/*
	Override invalid-feedback class
	Display, Height and Margin

*/
.invalid-feedback {
	display: block !important;
	width: 100%;
	height: auto;
	margin-top: 0.5rem;
}


/*
	Override sub-nav a class
	ScrollWidth does not show the parent padding-right
	Removing side-paddings from parent (sub-nav)
	Adding side-margins to start & end children elements

*/
.sub-nav {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.sub-nav > a:first-of-type {
	margin-left: 1rem !important;
}

.sub-nav > a:last-of-type {
	margin-right: 1rem !important;
}


/*
	*** REQUIRES MORE WORK *** To be harmonized with the non-action page navigation

	Target: profile.css or all.css

	Navigation classes for Action page
	In conjunction with setStickyNavHeader() function

*/
.nav-head {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #fff;

	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
}

.nav-head li {

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
	transition-delay: 0.01s;

}

.nav-head h1 {
	height:2.5rem;
	line-height: 2.5rem;
}

.nav-head li:first-child,
.nav-head li:last-child {
	border-bottom: solid 1px #ddd;
}

/*
	Remove border on banner when uploading
	so there is no separation between banner & tray

*/
#upld-head li:first-child {
	border: none;
}

.nav-head li:nth-of-type(1) {					/* *** REDUNDANT *** Override all-pad-trbl */
	padding: 2rem 1rem;
}

.nav-head h1 {
	font-size: 1.5rem;							/* Same as .location class */
	line-height: 2.5rem;
}

.nav-head-collapse {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 3px 14px 0 rgba(0,0,0,0.12);
}

.nav-head-collapse > li:nth-of-type(1) {
	padding: 0.25rem 1rem !important;
}

.nav-head-collapse > li.all-actions {
	padding: 0.75rem 0 !important;
}

.nav-head-collapse > li:last-of-type {
	border: none;
}



/*
	Used in Profile Preview to highlight
	Sportsman Since

*/
.prfl-highlight {
	background-color: #366;
	color: #fff;
}

.prfl-quoted > * {
	position: relative;
	padding: 0;
	font-style: italic;
	font-size: 1rem;
	display: inline-block;
}

.prfl-quoted > *::before {
	content: '\f10d';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 1rem;
	display: inline-block;
}


.flex {
	display: flex;

}

.flex * {
	display: inline-flex;
}



/*
	Applying these styles to a button element
	with a FA icon inside
	Why wrapping the icon in a button? So the disable attribute can be applied


*/
.all-btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: #327df6;
	cursor: pointer;
	margin: 0;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	transition: color 0.25s ease;
}



/*
	Adjust the left & right padding on input text
	to mimick Bootstrap select controls

*/
.form-control {
	padding: 0.375rem 1rem;
} 



/*
	JQuery smoothness theme adjustments

*/
.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.ui-menu-item-wrapper.ui-state-active {
	background-color: #0070f5 !important;
	background: #0070f5 !important;
	color: #fff !important;
	border: none !important;
	margin: 0;
}