.sp_searchBox_wrapper{
    position: relative;
    margin-top:10px;
}
.sp_search_field {
    /* border: 1px solid slategrey; */
    padding: 5px;
}

.sp_search_heading{
    margin:0px;
}

.sp_alphabets{
    /* border:1px dashed grey; */
    margin-top: 22px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sp_alphabets .sp_alphabet{
    height: 36px;
    width: 35px;
    border: 1px solid #e7e5e5;
    padding: 7px;
    box-shadow: 2px 2px 7px #c7c7c7;
    display: flex;
    align-content: center;
    justify-content: center;
     
    
}
.sp_alphabets .sp_alphabet:hover{
     cursor: pointer;
     color:rgba(0, 0, 238, 0.927);
}
.sp_search_field{
    width: 100%;
}

.sp_search_field input{
  
    width: 100%;
    height: 40px;
    border: 0px;
    border-bottom: 1px solid grey;
}

.sp_search_field input:focus {
     
    outline: none;
    border-bottom: 1px solid rgb(33, 33, 33);
}

.sp_search_results ul{
    list-style-type: none !important;
    margin: 0px !important;
}

.sp_search_results ul > li {
 
    line-height: 37px;
    margin-top: 2px;
    padding: 5px;
    padding-left:10px;
}

.sp_search_results ul > li:hover{
    background-color: #ebe4e4;
    cursor: pointer;
}

.sp_search_results a {
    text-decoration: none !important;
    display: block;
    height: 40px;
    padding: 5px;
    color: black;
}


.sp_search_results {
    margin-top: 0px;
    box-shadow: 2px 4px 5px grey;
    position: absolute;
    z-index: 1000;
    background: white;
    width: 99%;
     
   
}

/* ----------------------------------- */
 
.sp_cate_search_field{
    margin-top:10px;
}



.sp_cate_search_results {
    margin-top: 0px;
    box-shadow: 2px 4px 5px grey;
    position: absolute;
    z-index: 1000;
    background: white;
    width: 100%;
    /* visibility: hidden; */
   
}

.sp_category_selectbox{
    width: 100%;
    height: 40px;
    border: 0px;
    border-bottom: 1px solid grey;
    display: flex;
}

.sp_category_selectbox .sp_category_select{
    width: 100%;
    height: 40px;
    border: 0px;
    /* border-bottom: 1px solid grey; */
    background-color: #e7e7e7;
}
.sp_category_selectbox span{
    background-color: #e7e7e7;
    padding:7px;
}

.sp_category_selectbox .sp_category_select:focus{
    outline:0;
}


 
.sp_cate_search_results ul {
    list-style-type: none !important;
    margin-top: 0px;
     margin: 0px !important;  
    padding-left: 0px;
 
}




.sp_cate_search_results ul > li {
 
    line-height: 37px;
    margin-top: 2px;
    padding: 5px;
    padding-left:10px;
}

.sp_cate_search_results ul > li:hover{
    background-color: #ebe4e4;
    cursor: pointer;
}

.visible{
    /* visibility: visible; */
    display: block;
}

.hidden{
    /* visibility: hidden; */
    
    display: none;
}


/* sufiyan styles */

.hovercontentofleftdiv .image{
    width: 50px !important;
    height: 50px !important;
}

.hovercontentofleftdiv .image img{
    border-radius: 50% !important;
}

.title_and_image{
     
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 12px;
}

.title{
	margin: 5px;
	color: #9e9e9e;
}

.results-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.results-wrapper .titlediv{
	 
	display: flex;
     
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.results-wrapper .viewwithimage{
	font-size: .875rem;
    color: #fff;
    border: 2px solid #4caf50;
    border-radius: 1px;
    padding: 10px 20px;
    background-color: #4caf50;
    margin: 5px;
    cursor: pointer;
}



.results-wrapper .viewwithimage:hover{
	 
    border: 2px solid #4caf50;
    background-color: #3d9240;
}
.results-wrapper .leftdiv{
	border: 1px solid #9e9e9e;
	height: auto;
    min-height: 300px;
	border-radius: 5px;
	width:100%;
}
.results-wrapper .contentofleftdiv{
	cursor: pointer;
	padding: 8px;
   
}
.results-wrapper .bottomsdiv{
	display: flex;
	flex: wrap;
    width: 100%;
    margin-top: 10px;
}
.results-wrapper .rightdiv{
	border: 1px solid #9e9e9e;
    height: auto;
    margin-left: 5px;
    border-radius: 5px;
    width: 100%;
    min-height: 300px;
    padding: 10px;

}
.results-wrapper .contentofrightdiv{
	padding: 5px;

}
.results-wrapper .hovercontentofleftdiv:hover{
	background-color: #eaeaea;
	transition: 0.2s;
	border-radius: 3px;
   
}
.results-wrapper .hovercontentofleftdiv{
	 
    font-size: 15px;
	padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.results-wrapper .icon{
	margin-left:80px ;
}

.sp_external_icon :hover{
    fill: blue;
}
.results-wrapper .icon:hover{
	cursor: pointer;
}

/* -----------single product page box =========]*/