/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 21 2025 | 20:33:08 */
@use 'bootstrap-variables';
@use 'bootstrap-mixins';


.players-list {
	--player-list-columns: 1;
	--player-list-column-gap: 1rem;
	--player-list-row-gap: 1rem;
	padding: 2.5rem 1.5rem 15vh;
	max-width: 1400px;
	margin-inline: auto;
    display: grid;
	column-gap: var(--player-list-column-gap);
	row-gap: var(--player-list-row-gap);
    grid-template-columns: repeat(var(--player-list-columns), 1fr);
}

@media screen and (min-width: 500px) {
	.players-list {
		--player-list-columns: 2;
	}
}

@media screen and (min-width: 769px) {
	.players-list {
		--player-list-columns: 3;
		padding: 2rem 4rem 25vh;
	}	
}

@media screen and (min-width: 1200px) {
	.players-list {
		--player-list-columns: 4;
	}	
}

.players-controls {
	display: grid;
    align-items: center;
    justify-content: center;
	grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 3rem 6rem 0;
    gap: 1rem;
	
	@media screen and (max-width: 768px) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 0 !important;
		padding: 2rem;
	}
	
	label {
		&:nth-of-type(1) { grid-column: 2 }
		&:nth-of-type(2) { grid-column: 3 }

		&> span {
			font-weight: bolder;
			text-transform: uppercase;
			letter-spacing: 0.4px;
			font-size: 0.75rem;
			display: block;
			margin: 0 0 .15rem;
		}
	}

	input#player-search,
	select#player-sort {
    	border: 2px solid var(--color-accent-navy);
	    border-radius: 100vw;
	    font-size: 1rem;
	    padding: 0.85rem 1rem !important;
	    background-color: #fff;
	    line-height: 1;
	}

}