/* itm */

.itmlist {
	display: grid;
	gap: 5px;
}

.itmbox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}

.itmimg {
	display: block;
}

.itmcontent {
}

/* server */
.server {
	/* server */
	--server-bg-color: rgb(20, 119, 12);
	--server-border-color: rgba(155, 255, 160, 0.3);
	--server-box-shadow-color: rgba(160, 255, 152, 0.35);
	--server-color: rgb(138, 218, 94);
	opacity: 1;
	background-color: var(--color-primary);
	border-radius: 1.25rem;
	min-height: 2.375rem;
	box-sizing: border-box;
	padding: 0.375rem 0.5rem 0.375rem 1rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	/* font-family: "Intro", "Open Sans", Tahoma, Arial, sans-serif;
    font-family: var(--font-1); */
	grid-gap: 1rem;
	gap: 1rem;
}

[data-server-status="beta"] {
	--server-bg-color: rgb(113, 98, 12);
	--server-border-color: rgba(255, 228, 155, 0.3);
	--server-box-shadow-color: rgba(255, 227, 152, 0.35);
	--server-color: rgb(220, 195, 94);
}

[data-server-status="off"] {
	--server-bg-color: rgb(119, 62, 12);
	--server-border-color: rgba(255, 167, 155, 0.45);
	--server-box-shadow-color: rgba(255, 164, 152, 0.49);
	--server-color: rgb(239, 126, 104);
}

.server__name {
	color: rgb(255, 255, 255);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.server__status {
	min-height: 1.625rem;
	background-color: var(--server-bg-color);
	border: 0.125rem solid var(--server-border-color);
	border-radius: 1rem;
	box-shadow: inset 0 0 0.375rem 0 var(--server-box-shadow-color);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 3rem;
	padding: 0.3125rem 0.625rem;
	color: var(--server-color);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* servers-list */

.servers-list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

@media (min-width: 1200px) {
	.servers-list {
		position: absolute;
		right: 20px;
		top: calc(100% + 10px);
	}
}

@media (min-width: 1540px) {
	.servers-list {
		position: static;
	}
}
