/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}


/* ---------------------------------------- common */

@media (max-width: 767px) {
	main { padding: 3em 0 6em; }
}

@media (min-width: 768px) {
	main { padding: 5em 0 8em; }
	#players { padding: 0 1.5em; }
}

/* ---------------------------------------- players */

#players h2 {
	text-align: center;
	font-weight: 600;
	margin: 0 0 2em;
}

@media (max-width: 767px) {
	#players h2 { 
		font-size: clamp(0.938rem, 0.714rem + 1.12vw, 1.25rem);
	}
}

@media (min-width: 768px) {
	#players h2 { 
		font-size: clamp(1.125rem, -1.358rem + 5.17vw, 1.875rem);
	}
}

/* cate */

#players .cate {
	background: #eee;
	border-radius: 10px;
	text-align: center;
	padding: 1.5em 1em;
	margin: 0 0 5em;
}
#players .cate h3 {
	text-align: center;
	font-weight: 500;
	margin: 0 0 1.25em;
}

#players .cate ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#players .cate ul li {
	background: #fff;
	border: 1px #da1c1c solid;
	border-radius: 10px;
	text-align: center;
}
#players .cate ul li span {
	display: block;
	padding: .5em;
}
#players .cate ul li span:first-child {
	color: #fff;
	background: #da1c1c;
	border-radius: 10px 10px 0 0;
}
#players .cate ul + p {
	text-align: right;
	margin: 1.5em 0 0;
}

@media (max-width: 767px) {
	#players .cate h3 {
		font-size: clamp(0.938rem, 0.714rem + 1.12vw, 1.25rem);
	}
	#players .cate ul li {
		width: 40%;
	}
	#players .cate ul li:nth-child( n + 3 ) {
		margin: 1em 0 0;
	}
}

@media (min-width: 768px) {
	#players .cate h3 {
		font-size: clamp(1rem, 0.172rem + 1.72vw, 1.25rem);
	}
	#players .cate ul li {
		width: 20%;
	}
}

/* playersList */

#playersList th,
#playersList td {
	border-bottom: 1px #b5b5b5 solid;
	text-align: center;
	padding: 1em;
}
#playersList thead {
	color: #da1c1c;
	border-bottom: 2px #b5b5b5 solid;
}

/* Datatable customize */
#playersList_wrapper { padding: 1.5em 0; }
#playersList_wrapper .dt-paging {
	display: none !important;
}
#playersList_wrapper .dt-column-title { 
	color: #da1c1c;
	text-align: center; 
}

#playersList tbody tr:hover {
	background: #da1c1c;
	cursor: pointer;
}
#playersList tbody tr:hover th,
#playersList tbody tr:hover td {
	color: #fff;
}

@media (max-width: 767px) {

	#playersList {
		min-width: 800px;
	}
	
	/* Datatable customize */
    div.dt-container div.dt-layout-row:not(.dt-layout-table) {
        display: flex !important;
		justify-content: space-between;
		align-items: center;
    }

}

@media (min-width: 768px) {
	#playersList {
		width: 100%;
	}
}