.mapping_img_place{
    
    position: relative;
}

.mapping_img_place_image{
    
    width: 100%;
}

.mapping_img_place_prodcut{

    position: absolute;
    z-index: 10;
}

.mapping_img_place_prodcut_pointer_wrap{

    width: 4rem;
    height: 2rem;
    justify-content: center;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mapping_img_place_prodcut_pointer_wrap:hover ~ .mapping_img_place_prodcut_item,.mapping_img_place_prodcut_item:hover {

    background: #000;

    display: flex;
    align-items: center;
    height: fit-content;
    flex-direction: column;

    padding: .45rem;
    color: #fff;
}

.mapping_img_place_prodcut_pointer{

    width: .75rem;
    height: .75rem;
    background: #fff;
    border-radius: 50%;

    position: relative;

    box-shadow: 0px 0px 0px 4px rgb(226 225 225 / 34%), 0px 0px 0px 9px rgb(230 230 230 / 34%), 0px 0px 0px 9px rgb(16 15 15 / 47%);   

    animation: blop 1.3s infinite; 
}

.mapping_img_place_prodcut_item{

    display: none;
    position: absolute;
    width: 13rem;

    top: 0;
    right: 3.5rem;

    z-index: 999;
}

.mapping_img_place_prodcut_item img{

   width: calc(13rem - .25rem);
}

.mapping_img_place_prodcut_item a{

    padding: .5rem 0 .3rem;
    font-size: .8rem;
    text-decoration: underline;
}

@keyframes blop {
    
    0%{
      box-shadow: 0px 0px 0px 4px rgb(226 225 225 / 34%), 0px 0px 0px 9px rgb(230 230 230 / 34%), 0px 0px 0px 9px rgb(16 15 15 / 47%) !important;   
      background: #ffffff;
    }
    25%{
        box-shadow: 0px 0px 0px 7px rgb(226 225 225 / 34%), 0px 0px 0px 11px rgb(230 230 230 / 34%), 0px 0px 0px 11px rgb(16 15 15 / 20%);   
        background: rgba(255, 255, 255, 0.85);
    }
    50%{
      box-shadow: 0px 0px 0px 4px rgb(226 225 225 / 34%), 0px 0px 0px 9px rgb(230 230 230 / 34%), 0px 0px 0px 9px rgb(16 15 15 / 47%) !important;   
        background: #ffffff;
    }
    100%{
        box-shadow: 0px 0px 0px 4px rgb(226 225 225 / 34%), 0px 0px 0px 9px rgb(230 230 230 / 34%), 0px 0px 0px 9px rgb(16 15 15 / 47%) !important;   
        background: #ffffff;
    }
}


.mapping_range {
    -webkit-appearance: none; 
    width: 100%; 
    height: 10px; 
    background: #ddd; 
    border-radius: 5px;
    outline: none; 
    opacity: 0.9;
    transition: opacity 0.2s;
  }
  
  .mapping_range:hover {
    opacity: 1; 
  }
  
  
  .mapping_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; 
    height: 20px; 
    background: #000; 
    border-radius: 50%; 
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
  }
  
  .mapping_range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  }
  
 
  .mapping_range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
  
  .mapping_range:focus::-moz-range-thumb {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
  

  .mapping_wm_hide{

   display: none;
  }

  .mapping_position_desk,.mapping_position_mob{

    border: 1px solid #000;
    padding: .25rem;
    margin: 1rem .25rem .5rem;

    cursor: pointer;
  }

  .mapping_wm_active{
    background: #ccc;
  }



  @media only screen and (max-width: 768px) {
  
		.mapping_img_place_prodcut_item a{

			font-size: 1rem;
		
		}
  }