:root {
  --grid-height: 500px;
}

.productsSearch{
    /* width: 250px !important; */
}



/* vibrant-search.css */


.vibrantSearchUI .grid-holder {
  width:100%;
  height:var(--grid-height);
  border:1px solid #000;
  overflow:hidden;
  position:relative;
  
  perspective: 900px;
  background-color:#000;
  border-radius:4px;
}

.vibrantSearchUI .grid {
  position:absolute;
  border:1px solid #666;
  /*background-color:#FF0;*/
  width:640px;
  height:400px;
  
  transform: rotateX(40deg) rotateZ(-16deg);  
}

.vibrantSearchUI .grid .layout, .grid .output {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}


.vibrantSearchUI .grid-cell {
  position:absolute;
  display:block;
  width:80px;
  height:80px;
  box-sizing:border-box;
  border:1px solid #444;
  color:#555;
}

.vibrantSearchUI .grid-cell.inView {
  /*background-color:#7DF;*/
}

.place-capture {
  position:absolute;
  width:1px;
  height:1px;
  /*background-color:#F00;*/
}
.place-capture.v1 {
  top:0px;
  left:0px;
}
.place-capture.v2 {
  top:0px;
  right:0px;
}
.place-capture.v3 {
  bottom:0px;
  left:0px;
}
.place-capture.v4 {
  bottom:0px;
  right:0px;
}

.vibrantSearchUI .grid-cell-image {
  display:block;
  position:absolute;
  transition:1s;
  box-sizing:border-box;  
  width:80px;
  height:80px;
}

.vibrantSearchUI .grid-cell-image img {
  object-fit:cover;  
  top:0px;
  left:0px;
  width:80px;
  height:80px;
}

.vibrantSearchUI .grid-cell-image::after {
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:80px;
  height:80px;
  box-shadow:0px 0px 24px inset rgba(0,0,0,0.4);
}

.vibrantSearchUI .grid-cell-image.swapping {
  border:2px solid #FF0;
  z-index:1;
  transition:0.01s;
}

.vibrantSearchUI .grid-cell-image.slowDiscard {
  transform:rotate(-35deg) scale(0.01);
  transition:1.2s;
}

.overlay 
{
  position:absolute;
  top:0px;
  left:0px;
  color: #FFF;
  font-size:64px;
  text-align:center;
  -webkit-text-stroke: 2px rgba(0,0,0,0.8);
  font-weight: 600;
  width:100%;
  height:100%;
  line-height:var(--grid-height);
}

.overlay .overlay-text 
{
  white-space:nowrap;
  position:absolute;
  top:0px;
  left:0px;  
  width:100%;
  height:100%;
  opacity:1;
  
  text-shadow:0px 0px 12px rgba(0,0,0,0.5);
  
  transition:0.4s left, 0.05s transform;
}
.overlay .overlay-text > * {
  display:inline-block;
  vertical-align:middle;
}

.overlay .overlay-text.in-coming {
  left:1000px;
  opacity:0;
} 

.overlay .overlay-text.out-going {
  left:-1000px;
  opacity:0;
} 

.overlay .marketplace-logo {
  height:64px;
  width:64px;
  display:inline-block;
  object-fit:contain;  
  margin-right:18px;
}

.stopButtonBox {
  z-index:2;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
}
.stopButtonBox button {
  position:absolute;
  display:inline-block;
  bottom:48px;
  right:48px;
  background-color:#F00;
  color: #FFF;
}