/* MAIN CSS*/
.tff .stat {
	font-size: 1.1em;
}

.tff .stat:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
  	font-size: 0.9em;
  	margin-right: 5px;
}

.tff .stat.time {
	color: #F47B42;
}
.tff .stat.time:before {
	content: '\f017';
}

.tff .stat.date {
	color: #f44242;
}
.tff .stat.date:before {
	content: '\f073';
}

/* FILTER BUTTONS */
#tffFilterButtons  {
	display: flex;
   	flex-wrap: wrap;
   	flex-direction: row;
  	margin-left: -4px;
  	margin-right: -4px;
}

#tffFilterButtons > button {
	flex: 1 10%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-width: 50px;
	height: 45px;
	margin: 4px 4px;
  	padding: 0px 18px;
  
  	color: #eeeeee;
  	font-size: 1.1em;
  	font-weight: 700;
  	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  	/*background: #0c0d11;*/
    background: var(--box--backgroundColor);
  	outline: none;
  	border: none;
  	border-radius: 10px;
  
  	cursor: pointer;
  	transition: 200ms ease;
}

#tffFilterButtons > button:hover {
	filter: brightness(1.2);
}

#tffFilterButtons > button:active {
	filter: brightness(0.9);
}

#tffFilterButtons > button.active {
	background-color: #ff4500;
}

/* roster */
#tffFilterButtons > button.leaders {
	background: #FF0033;
}

#tffFilterButtons > button.leaders.active {
	box-shadow: 0 0 10px #FF0033;
}

#tffFilterButtons > button.developers {
	background: #2958DA;
}

#tffFilterButtons > button.developers.active {
	box-shadow: 0 0 10px #2958DA;
}

#tffFilterButtons > button.managers {
	background: linear-gradient(90deg, #71AAE2, #8175BB);
}

#tffFilterButtons > button.managers.active {
	box-shadow: 0 0 10px #71AAE2;
}

/*#tffFilterButtons > button.cwmanagers {
	background: #8175BB;
}

#tffFilterButtons > button.cwmanagers.active {
	box-shadow: 0 0 10px 8671E2;
}*/

#tffFilterButtons > button.members {
	background: #ff4500;
}


#tffFilterButtons > button.members.active {
	box-shadow: 0 0 10px #ff4500;
}

#tffFilterButtons > button.trials {
	background: #669999;
}

#tffFilterButtons > button.trials.active {
	box-shadow: 0 0 10px #669999;
}

#tffFilterButtons > button.legends {
	background: #E7DD4F;
}

#tffFilterButtons > button.legends.active {
	box-shadow: 0 0 10px #E7DD4F;
}

#tffFilterButtons > button.squads {
	background: #AAA;
}

#tffFilterButtons > button.squads.active {
	box-shadow: 0 0 10px #AAA;
}

#tffFilterButtons > button.formers {
	background: #989898;
}

#tffFilterButtons > button.formers.active {
	box-shadow: 0 0 10px #989898;
}

#tffFilterButtons > button.friends {
	background: #ED0C62;
}

#tffFilterButtons > button.formers.friends {
	box-shadow: 0 0 10px #ED0C62;
}

/* cw */
#tffFilterButtons > button.won {
	background: #168E62;
}

#tffFilterButtons > button.won.active {
	box-shadow: 0 0 10px #168E62;
}

#tffFilterButtons > button.lost {
	background: #D83734;
}

#tffFilterButtons > button.lost.active {
	box-shadow: 0 0 10px #D83734;
}

#tffFilterButtons > button.tied {
	background: #F2B033;
}

#tffFilterButtons > button.tied.active {
	box-shadow: 0 0 10px #F2B033;
}

/* search bar */
/*#tffSearchBar {
	display: flex;
  	flex-direction: row;
}

#tffSearchBar input[type='search'] {
	width: 100% !important;
	background-color: #0c0d11 !important;
}

.searchInput{
 	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  	width: 100%;
  	border-radius: 10px;
}*/

#searchInput{
  width: 100% !important;
  max-width: inherit;
}

.searchBar{
  	display: flex;
    flex-direction: row;
    justify-content: center;
  	align-items: center; 
}

.ipsApp input[type="search"]{
	max-width: 100% !important;
  	width: 100% !important;
    border-radius: 10px !important;
  	margin: 10px 0px !important;
  	padding: 10px 45px !important;
}

.icon {
 	/*margin-right: -40px !important;*/
  	position: relative;
  	margin: 0px;
  	/*right: -25px;*/
  	z-index: 2;
}
@media screen and (max-width: 710px) {
	#tffFilterButtons > button { margin: 5px !important; }
}