@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Mono');
/* Gilroy font? */
/*
  2018.10.09  CR
  iOS was having problems. I thought it was the flex, but
  it might have been the "absolute" stuff. It seems to be
  working now.
*/

.sipv-tip-box {
  display: flex;
  flex-direction: row;
  max-height: 80px;
  /* height: 60px; */
  /* height: auto; */  
  padding: 8px;
  border: 1px solid #E6E6E6;
  border-radius: 42.5px;  /*5px;*/
  background-color: #FFFFFF;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
  /*z-index: 61;*/ /* HACK: Quick fix so that tooltips appear above the Add Items fly-out pane in dtc */
  /* TODO: make product tooltip appear "towards window center" to avoid the need for this. */
}

/* if we decide to support svg as an icon type in the tooltip... */
/*.tooltip-image-svg {
  position: absolute;
  top: 8px;
  left: 8px;
}*/

/* Need this to get the image vertically-centered: */
.sipv-tip-div-image {
  display: flex;
  justify-content: center;
}

.sipv-tip-image {
  /*position: absolute;
  left: 8px;
  top: 8px;*/
  /*position: relative;
  top: 50%;
  transform: translateY(-50%);*/
  /*min-width: 60px;
  min-height: 60px;*/
  max-width: 60px;
  max-height: 60px;
  /*width: 60px;
  height: 60px;*/
  /*width: auto;
  height: auto;*/
  margin-right: 6px;
  align-self: center;
}

.sipv-tip-text {
  display: flex;
  flex-direction: column;
  /* 'tooltip-text' contains 'tooltip-title' and 'tooltip-desc' */
}

.sipv-tip-title {
  color: #000000;
  font-family: Gilroy, Roboto;
  font-size: 13px;
  font-weight: bold;
  line-height: 15px;
}

.sipv-tip-desc {
  margin-top: 6px;
  color: var(--medium-gray);
  font-family: Gilroy, Roboto;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  overflow-y: hidden; /* hidden; scroll;*/
}

/*
  From jsfiddle:
  https://jsfiddle.net/visioguy/stn0q9xj/
*/
/*<div class="tooltip-box" >
<div >
<img class="tooltip-image" src="https://cdn.shopclues.com/images/thumbnails/69850/320/320/118378279bluetoothspeaker1493638558.jpg" / >
<!-- width="46px" height="33px" viewBox="0 0 46 33" -->
<svg class="tooltip-image-svg" width="46px" height="33px" viewBox="0 0 46 33" >
<g stroke-width="1.6" stroke="dodgerblue" fill="none" fill-rule="evenodd" >
<path d="M23.4888889,20.543316 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473" id="Oval-1" stroke-linecap="round" > </path >
<path d="M22.5111111,19.5900174 C24.5595344,21.7145959 26.9249697,24.4666667 29.5167986,24.4666667 C32.1278053,24.4666667 34.2444444,22.4967196 34.2444444,20.0666667 C34.2444444,17.6366138 32.1278053,15.6666667 29.5167986,15.6666667 C27.1652748,15.6666667 26.0154526,17.1207706 25.3570852,17.8208603" id="Oval-1-Copy" stroke-linecap="round" > </path >
<path d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round" > </path >
</g >
</svg >

</div >

<div class="tooltip-text" >
<div class="tooltip-title" > Paste Title Here
</div >
<div class="tooltip-desc" >
The tooltip is displaying both an SVG icon and a jpg icon. The height is limited so that overflow text in the description will be truncated after a certain height is reached.
</div >
</div >
</div >*/