div.colorsContainerWrapper {
	position: relative;
}
.colors-selected-color-container-desktop{
	display: none;
}
div.duotone_list {
	position: relative;
	padding-left: 20px;
	padding-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	max-height: 300px;
	overflow-y: auto;
}
.duotone_figure_container_container{
	position: relative;
}
.duotone_figure_container {
	width: 82px;
	height: 82px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.duotone_figure_container:not(.disabled):hover, .duotone_figure_container.activecolour {
	border: 1px solid var(--accent-color);
}

.duotone_figure_container figure {
	margin: 0px;
}

.duotone_figure_container figure img {
	height: auto;
	max-width: 100%;
}

.duotone_color_title{
	text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
	font-size: 12px;
	font-weight: 500;
}
.duotone_color_not-in-stock{
	display: none;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
	z-index: 1;
}
.duotone_color_checkmark{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 50%;
	transform: translateX(-50%);
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: var(--accent-color);
	display: none;
	justify-content: center;
	align-items: center;
}
.activecolour + .duotone_color_checkmark{
	display: flex;
}

@media(min-width: 768px){
	.colors-selected-color-container-desktop{
		font-weight: 600;
		font-size: 13px;
		display: block;
		margin-bottom: 12px;
	}
	.colors-selected-color-container-desktop .colors-selected-color{
		color: var(--light-text-color);
	}
	div.duotone_list{
		max-height: 270px; /* 3 rows of colors + gap */
		padding-top: unset;
		padding-left: unset;
		gap: 12px;
	}
	.duotone_color_title{
		display: none;
	}
	.duotone_figure_container:not(.disabled):hover ~ .duotone_color_title, 
	.duotone_figure_container.disabled:hover ~ .duotone_color_not-in-stock{
		position: absolute;
		display: initial;
		width: fit-content;
		left: 50%;
        transform: translateX(-50%);
		margin-top: 3px;
		color: white;
		background-color: var(--accent-color);
		border-radius: 4px;
		padding: 4px 7px;
		z-index: 1;
	}
}