/*------------------------
   SEARCH
------------------------*/

#LSS_Result ul,
#LSS_Result li {
	list-style: none;
}


#LSS_Result::-webkit-scrollbar,
ul.LSS_Artiklar::-webkit-scrollbar,
ul.LSS_Artikelgrupper::-webkit-scrollbar {
	display: none;
}

.LSSordPris {
	text-decoration: line-through;
}

#LSS_Result .close {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	text-align: center;
	right: 1rem;
}

#LSS_Result .close:before,
.sokrutanWrap .Close:after {
	font-family: "Font Awesome 5 Pro";
	content: "\f00d";
	font-size: 24px;
	font-weight: 200;
	cursor: pointer;
}


@media only screen and (min-width: 48em) {

	/* #LSS_Result {
		background: var(--base-background1);
		position: absolute;
		right: 0;
		top: calc(100% + 1em);
		top: calc(100% + var(--gutter));
		width: calc(100% - 2rem + 2px);
		border: 1px solid var(--border-color1);
		max-height: 490px;
		overflow-y: auto;
		left: calc(1rem - 1px);
		padding: 1rem;
		box-shadow: var(--box-shadow1);
		border-top: 0px;
	} */

	#LSS_Result {
		background: var(--base-background1);
		position: absolute;
		right: 0;
		left: 0;
		top: 60px;
		width: 100%;
		border: 1px solid var(--border-color1);
		max-height: calc(100vh - 170px);
		overflow-y: auto;
		padding: 1rem;
		box-shadow: var(--box-shadow1);
		border-top: 0px;
	}
}

.sokrutanWrap {
	position: relative;
}
.sokrutanWrap .Close {
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    text-align: center;
    right: 1rem;
}




@media screen and (max-width: 48em) {


	.LSS_Container{
		margin: var(--gutter) 0;
	}
	.LSS_Container {
		 width: 100%;
	}

	#LSS_Result .close {
		display: none;
	}

	#LSS_Result {
		position: absolute;
		background: var(--base-background1);
		left: 0;
		top: 59px;
		overflow: auto;
		height: calc(100vh - 100px);
		width: 100%;
	}
	
	/* .sokrutan{display: none;} */
	.sokrutan{
		-webkit-transform: translate3d(0,-100%,0);
		-ms-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0);
		-webkit-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition: -webkit-transform 300ms ease-in-out;
		-webkit-transition: transform 300ms ease-in-out;
		transition: transform 300ms ease-in-out;
	}
	
	.sokrutan.active {
		display: block;
		width: 100%;
		max-width: none;
		z-index: -1;
		top: 48px;
		left: 0;
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		
	}

	.sokrutan {
		position: absolute;
		left: 50%;
		top: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	.LSS_Varumarken {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	#sokterm:focus + #lblTerm,
	#sokterm:active + #lblTerm {
		opacity: 1
	}	

	#sokterm::placeholder,
	#sokterm::-ms-input-placeholder,
	#sokterm::-webkit-input-placeholder {
		-webkit-transition: .3s color ease;
		-ms-transition: .3s color ease;
		transition: .3s color ease
	}

	#sokterm:focus::placeholder,
	#sokterm:focus::-webkit-input-placeholder,
	#sokterm:focus::-moz-placeholder,
	#sokterm:focus:-ms-input-placeholder{color: transparent}

	.matched-group-wrapper.tabs {
		padding: 0;
	}
}

.LSS_Artiklar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 1rem
}
.LSS_Artikel {
    display: flex;
    flex-direction: column;
}


.elastic_suggest{
	display: flex;
	flex-direction: column;
}
.elastic_suggest ul.elastic-search-result{
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--gutter)/2);
}
ul.elastic-search-result li a:after{
	content: ",";
}
ul.elastic-search-result li:last-child a:after{
	content: "";
}
.elastic--title {
    margin-right: var(--gutter);
}


ul.elastic-search-result.LSS_product {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
body.SE .elastic-search-result.LSS_product .PT_Lager.Lager1:after {
    content: "I webblager";
}
body.SE .elastic-search-result.LSS_product .PT_Lager.Lager2:after {
    content: "Tillfälligt slut";
}
body.EN .elastic-search-result.LSS_product .PT_Lager.Lager1:after {
    content: "In stock";
}
body.EN .elastic-search-result.LSS_product .PT_Lager.Lager2:after {
    content: "Out of stock";
}

@media screen and (max-width: 48em) {
	.LSS_Artiklar,
	ul.elastic-search-result.LSS_product  {
		grid-template-columns: repeat(2, 1fr);
		padding-bottom: var(--gutter);
	}
	.elastic_suggest{
		display: flex;
		flex-direction: column;
		margin-inline: calc(var(--gutter) / 2);
	}
	.elastic--btn{
		margin-inline: calc(var(--gutter) / 2);
	}
}





/*------------------------
	SEARCH
------------------------*/
.search-history-header{
	font-weight: 600;
	margin-bottom: calc(var(--gutter ) / 2);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	border-bottom: var(--border-std);
	line-height: 30px;
	display: block;
	width: 100%;
	margin-top: var(--gutter);
}

.search-history-header{
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
}
#search-history-clear{
	font-weight: normal;
	color: var(--danger-color);
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	font-size: 12px;

}
#search-history-clear:before{
	content: "-";
	margin: 0 calc(var(--gutter)/2);
	color: var(--base-color1);
}
#search-history-clear:after{
	font-family: "Font Awesome 5 Pro";
	content: "\f00d";
	font-weight: 200;
	color: var(--danger-color);
	margin-left: 5px;
	font-size: 8px;
	height: 12px;
	border: 1px solid var(--danger-color);
	border-radius: 20px;
	line-height: 11px;
	width: 12px;
	text-align: center;
	margin-top: 9px;
} 
.search-popular-li a:before{
	font-family: "Font Awesome 5 Pro";
	content: "\f005"; 
	font-weight: 200;
	margin-right: 5px;
	margin-top: 3px;
}
.search-history-li a:before{
	font-family: "Font Awesome 5 Pro";
	content: "\f017"; 
	font-weight: 200;
	margin-right: 5px;
	margin-top: 3px;
}
.LSS_Input:after{
	z-index: 5;
}
.matched-group-wrapper{
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	text-align: center;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin-bottom: calc(var(--gutter) * 2);
}
ul.matched-group-wrapper,
ul.matched-group-wrapper li{
	list-style: none;
	text-align: unset;
}
.matched-group-title{
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	text-align: center;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	border: 1px solid;
	border-color: var(--border-color1);
	cursor: pointer;
	margin: calc(var(--gutter)/2);
	height: 45px;
	padding:  0 calc(var(--gutter) * 2);
	color: var(--lowlight-color1);
	order: 1;
}

.matched-group-title * {
	cursor: pointer;
}
.matched-group-title.active label{
font-weight: bold;
}
.matched-group-title span{
	font-size: 12px;
	margin-left: 3px;
}
.matched-group-title.active {
	border: 1px solid #000;
	color: var(--base-color1);
}

.matched-group-item {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	margin: calc(var(--gutter) / 2);
}
.matched-group-item a{
    text-align: center;
    font-weight: 800;
    width: 100%;
    display: inline-block;
    border-radius: var(--border-radius2);
    cursor: pointer;
    padding: 0 1em;
    padding: 0 1em;
    height: calc(1em*2.5);
    line-height: calc(1em*2.5);
    border: 0;
    background: var(--cta-background1);
    color: var(--cta-color1);
}

li.matched-group-title.tab {
    border: 1px solid #000 !important;
    width: auto !important;
}
li.matched-group-title.tab:after {
    content: none !important;
}

/* DESKTOP*/
@media screen and (min-width: 48em) {
	.matched-group-item-wrap .elastic-search-product-results{
		width: 100%;
	}
}

.matched-group-item {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    margin: calc(var(--gutter) / 2);
}

.matched-group-item-wrap.active {
    margin-top: calc(var(--gutter) * 2) !important;
}

.matched-group-item-wrapper, 
.matched-group-item-wrap.active{
	-ms-flex-align: flex-start;
	-webkit-box-align: flex-start;
	align-items: flex-start;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex !important;
	width: 100%;
	flex-flow: wrap;
	border-bottom: none !important;
} 
.matched-group-item-wrap.active{
	margin-top: calc(var(--gutter) * 2);
}
.matched-group-item-wrap {
	display: none;
	order: 2 !important;
}