#button_container {
 	display: flex;
  	gap: 10px;
  	margin-bottom: 10px;
  	flex-wrap: wrap;
}

#button_container > button {
 	padding: 15px 10px;
  	flex: 1 0 20%;
  	border: none;
  	border-radius: var(--radius-2);
  	color: #fff;
  	font-weight: 700;
  	background-color: var(--box--backgroundColor);
  	text-shadow: 1px 1px black;
}

.mt-10 {
  margin-top: 10px;
}

#button_container > button:hover {
 	cursor: pointer; 
  	background: rgb( var(--theme-timeline_color) ); 
}

#button_container > button span:nth-child(1) {
 	float: left; 
}

#button_container > button span:nth-child(2) {
 	float: right; 
}

#button_container > button.active {
 	background-color: rgb( var(--theme-timeline_color) ); 
}

input[type="text"] {
  	border-radius: var(--radius-2) !important;
  	flex: 1 0;
  	padding: 10px;
  	width: 100%;
  	max-width: inherit !important;
}

#searchContainer {
 	margin-top: 10px;
  	display: flex;
  	justify-content: flex-end;
}

.text-left { text-align: left; }

#tffMaps .mapBox {
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: center;
   padding: 5px 5px;
}

#tffMaps .mapBox .mapInfo {
   display: flex;
   flex-direction: column;
}

#tffMaps .mapBox .mapInfo span:first-child {
   	font-size: 16px;
 	font-weight: bold;
   	margin: 0 0 3px 0;
}

#tffMaps .mapBox .mapInfo span:nth-child(2) {
 	font-size: 15px;
   	color: rgb( var(--theme-text_light) )
}

#tffMaps .mapBox .mapInfo .mapAuthor {
	color: rgb( var(--theme-timeline_color) ); 
}

#tffMaps .mapStat:before {
  	font: var(--fa-font-solid);
	font-weight: 900;
  	font-size: 0.9em;
  	margin-right: 3px;
}

#tffMaps .mapStat.playedCount {
	color: #EA9FDC;
}
#tffMaps .mapStat.playedCount:before {
  	content: '\f144';
}