.userContainer {
 	display: flex; 
}

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;
}

.self-center {
 	align-self: center; 
}


.button_container {
 	display: flex;
  	gap: 10px;
  	flex-wrap: wrap;
}

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

.button_container > button:hover {
 	cursor: pointer; 
}

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

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


.button_container > button.won{ background-color: rgba(45, 195, 59, 0.25); }
.button_container > button.lost { background-color: rgba(246, 54, 49, 0.25); }
.button_container > button.tied { background-color: rgba(238, 167, 16, 0.25); }

.button_container > button.won:hover { background-color: rgba(45, 195, 59, 1); }
.button_container > button.lost:hover { background-color: rgba(246, 54, 49, 1); }
.button_container > button.tied:hover { background-color:  rgba(238, 167, 16, 1); }

.button_container > button.won.selected { background-color: rgba(45, 195, 59, 1); }
.button_container > button.lost.selected { background-color: rgba(246, 54, 49, 1); }
.button_container > button.tied.selected { background-color:  rgba(238, 167, 16, 1); }


/******************************************************************************************************************/

.box {
 	border-radius: var(--radius-2) !important;
  	background-color: rgba( var(--theme-text_color), 0.05 );
  	width: max-content;
    padding: 5px 10px;
  	text-shadow: 1px 1px black;
  	font-weight: 700;
}

.no-wrap { text-wrap: nowrap; }

.clanwarImage {
 	width: 48px;
  	height: 48px;
  	align-items: center;
}

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

.clanwarBox {
 	display: flex; 
}

.tag { font-weight: 700; text-shadow 1px 1px black; }

.clanwarInfo {
 	flex: none;
  	align-self: center; 
  	margin-left: 20px;
}

span.won { background-color: rgb(45, 195, 59); }
span.tied { background-color: rgb(238, 167, 16); }
span.lost { background-color: rgb(246, 54, 49); }

@media only screen and (max-width: 797px) {
  .hidden {
      	display: none; 
  }
  
  .button_container > button {
   	flex: 1 0 40%; 
  }
  
  table {
    font-size: 10px;
  }
}