@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;400;700;900&display=swap');
html,body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Tajawal', sans-serif;
	background-color:#222;
}

::-webkit-scrollbar {
	width: 10px;
	border-radius: 10px;
}

::-webkit-scrollbar-track {
	background: #444; 
}

::-webkit-scrollbar-thumb {
	background-color: #888; 
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #777; 
}

#temp {
	color:white;
	font-size: 20px;
	margin-bottom: 20px;
}

#content {
	width: 1100px;
	/* background-color:red; */
}

#reloadPlayers {
	background-color:#333;
	width:460px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:10px;
}

#reloadText {
	color:white;
}

#reload {
	color: white;
	cursor: pointer;
	transition: .3s;
	background-color: #232323;
	padding:10px;
	margin:7px;
	font-size:15px;
	border-radius: 10px;
}

#reload:hover {
	color: #b5b5b5;
}

#playersContainer {
	background-color:#333;
	width:700px;
	height: 600px;
	border-radius: 10px;
	margin-top:20px;
	display:flex;
	flex-direction:column;
	/* justify-content:center; */
	align-items:center;

}

#header {
	width:100%;
	height:50px;
	/* background-color:red; */
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
}

#players {
	width:100%;
	height: 100%;
	display:flex;
	overflow:hidden;
}

#playersList {
	width:50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:20px;
	overflow-y:auto;
}

#search {
	width:300px;
	height: 50px;
	background-color:#444;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius: 10px;
}

#searchInput {
	all:unset;
	width:70%;
	height: 30px;
	/* background-color:#333; */
	color:white;
	border:none;
	border-radius: 10px;
	padding:5px;
}

#searchIcon {
	color:white;
}

.player {
	color:white;
	background-color:#444;
	width:85%;
	display:flex;
	padding:10px;
	justify-content:space-between;
	align-items: center;
	border-radius:10px;
	transition: .3s;
	cursor: pointer;
	overflow: clip;
	height: 30px;
}

.playerName {
	width:50%;
	height: 100%;
	overflow: hidden;
	display:flex;
	/* justify-content:center; */
	align-items:center;
}

.playerId {
	width:50%;
	height: 100%;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow: hidden;
}

.player:hover {
	background-color:#555;
}

.player:active {
	background-color:#666;
	scale: 0.99;
}

.activePlayer {
	background-color:#666;
}

#playerActions {
	width:50%;
	height: 100%;
	/* background-color: red; */
	display: none;
	flex-direction: column;
	align-items: center;
}

.action {
	width:100%;
	height: 50px;
	/* background-color: red; */
	display:flex;
	justify-content:center;
	align-items:center;
	/* gap:20px; */
}

.inputAction {
	all:unset;
	color:white;
}

.btnAction {
	color:white;
	background-color:#232323;
	padding:10px;
	border-radius: 10px;
	cursor: pointer;
	margin-left:10px;
}

#banTime {
	all:unset;
	width: 50px;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
}