﻿.select-image-container,
.select-image-container * {
	position: relative;
}
.select-image-wrapper {
	position: relative;
}
	.select-image-wrapper .select-image {
		width: 100%;
		/*aspect-ratio: 0.75; not needed anymore*/
		/*padding-bottom: 75%; not needed anymore*/
		max-height: 100%;
		max-width: 100%;
		text-align: center;
	}
		.select-image-wrapper .select-image .select {
			width: 100%;
			max-height: 100%;
		}
			.select-image-wrapper .select-image .select div.icon {
				width: 50%;
				max-height: 100%;
				background-color: white;
			}
				.select-image-wrapper .select-image .select div.icon {
					/*display: none;*/
					border: 0.4rem solid lightgray;
				}
					.select-image-wrapper .select-image .select div.icon.selected {
						display: block;
						border: 0.4rem solid greenyellow;
					}
				.select-image-wrapper .select-image .select div.icon.bet-card {
					background-color: pink;
				}
				.select-image-wrapper .select-image .select div.icon img {
					width: 100%;
					max-height: 100%;
					max-width: 100%;
				}

	.select-image-wrapper.readonly .select-image {
		overflow-y: unset;
	}
		.select-image-wrapper.readonly .select-image div.icon {
			width: 100%;
		}
	.select-image-wrapper:not(.readonly) {
		position: absolute;
		top: 0;
		padding-bottom: 20%;
		height: 0;
		max-width: 100%;
		overflow: unset;
	}
	.select-image-wrapper:not(.readonly) .select-image {
	}
		.select-image-wrapper:not(.readonly) .select-image .select {
			display: flex;
			flex-flow: wrap;
			max-width: 30vw;
			overflow-y: scroll;
			background-color: lightgray;
		}
			.select-image-wrapper:not(.readonly) .select-image .select div.icon {
				z-index: 1000;
			}


.select-player {
	color: white;
	text-align: center;
	border: 1px solid transparent;
}
	.select-player.selected {
		border-color: yellow;
	}
	.select-player:hover {
		background-color: black !important;
	}

.select-colours {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
	.select-colours .select-colour {
		padding: 0.25rem;
		border: 1px solid transparent;
		border-radius: 0.5rem;
	}
	.select-colours .select-colour:hover {
		border-color: white;
	}

@media (orientation: portrait) {

	.select-image-wrapper:not(.readonly) .select-image .select {
		max-width: 90vw;
	}


	.player .meeples .select-image-wrapper:not(.readonly) .select-image {
		/*overflow-x: scroll;*/
		/*overflow-y: hidden;*/
	}
	.player .meeples .select-image-wrapper:not(.readonly) .select-image .select {
		display: flex;
		flex-direction: row;
		max-width: unset;
		width: 100%;
	}
		.player .meeples .select-image-wrapper:not(.readonly) .select-image div.icon {
			width: 50%;
		}
}