/* PickupPoints Info */
.stockpoints-info-wrapper {
	position: fixed;
	top: 0;
	background: var(--main-background-color);
	height: 100%;
	right: -350px;
	z-index: 99999;
	width: 340px;
	overflow-y: scroll;
	visibility: hidden;
	transition: all 0.6s;
}

.stockpoints-info-wrapper::-webkit-scrollbar {
	width: 0;
}

.stockpoints-visible {

	visibility: visible;
	right: 0;
}

.stockpoints-info-header {
	font-weight: bold;
	position: sticky;
	z-index: 9;
	top: 0;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 1em;
}

.stockpoints-info-header .close {
	cursor: pointer;
}

.stockpoints-info-header > .close:hover {
	fill: var(--main-hover-color);
}

.stockpoints-info-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding-bottom: 10px;
	margin: 1em;
}

.stockpoint-card {
	border: 1px solid var(--main-color);
	padding: 0.8em;
	line-height: 2em;
	border-radius: 3px;
}

.stockpoint-card svg {
	font-size: 1.3rem;
}

.varblock-stock {
	flex-direction: column;
}

.stockpoints-info {
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 5px;
	margin-top: 5px;
}

.stockpoints-info div, 
.stockpoint-card p,
.stockstatus.stock:not(.badge) {
	font-size: 14px;
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 10px;
	/*padding: .5em;*/
}

.stockpoints-mask {
	z-index: 9999 !important;
}

.stockpoints-info-list .qProgress .mask {
	opacity: 0.5;
}

.stockpoints-info-list .qProgress .content {
	top: 40%;
}

.stockpoint-notinstock {
	color: var(--notinstock-color); 
	fill: var(--notinstock-color) !important;
}

.stockpoint-instock {
	color: var(--instock-color);
	fill: var(--instock-color) !important;
}

.stockpoint-fewinstock {
	color: var(--fewinstock-color);
	fill: var(--fewinstock-color) !important;
}

.infoicon {
	color: var(--pickuppointsinfo-icon-color);
	fill: var(--pickuppointsinfo-icon-color) !important;
}

.no-scroll {
	overflow-y: hidden;
}

/* Design Plus adjustments*/
.stockpoints-info-header h2 {
	font-size: 1.2em;
}

.designPlus .stockpoint-card h2 {
	font-size: 1em;
}

.designPlus .stockpoint-card p {
	font-size: .9em;
}

.designPlus .button.primary {
	color: var(--main-button-primary-font-color);
	fill: var(--main-button-primary-font-color);
	background-color: var(--main-button-primary-color);
	border-color: transparent;
}

.designPlus .button.primary:hover {
	color: var(--main-button-primary-font-color-hover);
	fill: var(--main-button-primary-font-color-hover);
	background-color: var(--main-button-primary-color-hover);
}

.designPlus .sidebar-stockpoints-open {
	text-decoration: underline;
	color: var(--main-button-primary-color);
}