/* Tooltip hidden by default */
.simpletooltip[aria-hidden="true"],
.minimalist-simpletooltip[aria-hidden="true"],
.minimalist-left-simpletooltip[aria-hidden="true"] {
  display: none;
}
/* position relative for containers */
.simpletooltip_container,
.minimalist-simpletooltip_container,
.minimalist-left-simpletooltip_container {
  position: relative;
}

/*!* tooltip styles *!*/
/*.simpletooltip,*/
/*.minimalist-simpletooltip,*/
/*.minimalist-left-simpletooltip {*/
/*  position: absolute;*/
/*  z-index: 666;*/
/*  width: 10em;*/
/*  border-radius: .5em;*/
/*  background: #fff;*/
/*  color: #000;*/
/*  padding: .5em;*/
/*  text-align: left;*/
/*  line-height: 1.3;*/
/*}*/
/*.simpletooltip,*/
/*.minimalist-simpletooltip {*/
/*  right: auto;*/
/*  left: 100%;*/
/*  margin-left: .5em;*/
/*}*/
/*.minimalist-left-simpletooltip {*/
/*  right: 100%;*/
/*  left: auto;*/
/*  margin-right: .5em;*/
/*}*/
/*!* used pseudo-element to make arrows *!*/
/*.simpletooltip::before,*/
/*.minimalist-simpletooltip::before,*/
/*.minimalist-left-simpletooltip::before {*/
/*  content: '';*/
/*  speak: none;*/
/*  position: absolute;*/
/*  z-index: 666;*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  pointer-events: none;*/
/*}*/
/*.simpletooltip::before,*/
/*.minimalist-simpletooltip::before {*/
/*  top: .5em;*/
/*  left: -10px;*/
/*  margin-left: -10px;*/
/*  border: 10px solid transparent;*/
/*  border-right: 10px solid rgba( 0, 0, 0, .9 );*/
/*}*/
/*.minimalist-left-simpletooltip::before {*/
/*  top: .5em;*/
/*  right: -10px;*/
/*  margin-right: -10px;*/
/*  border: 10px solid transparent;*/
/*  border-left: 10px solid rgba( 0, 0, 0, .9 )*/
/*}*/

/* it can be easily adapted in media-queries for tablets/mobile */

/* for this example: mobile */
@media (max-width: 44.375em) {

  .simpletooltip,
  .minimalist-simpletooltip,
  .minimalist-left-simpletooltip  {
    top: 100%;
    left: 50%;
    right: 0;
    margin: 0;
    margin-top: .7em;
    margin-left: -5em;
  }
  .simpletooltip::before,
  .minimalist-simpletooltip::before,
  .minimalist-left-simpletooltip::before  {
    top: -10px;
    right: auto;
    left: 50%;
    margin-left: -5px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-bottom: 10px solid rgba( 0, 0, 0, .9 );
  }
}

.tooltip-icon {
  padding: 5px;
  height: 30px;
}

.simpletooltip {
  position: relative;
  left: -32px;
  top: -50px;
  max-width: 30em;
  padding: 15px;
  font-size: 15px;
  border-radius: 5px;
  box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 30%), 0 0.0625rem 0.125rem rgb(0 0 0 / 20%);
  z-index: 666;
  background-color: #fff;
}

.simpletooltip::before {
  content: '';
  position: absolute;
  z-index: 666;
  width: 0;
  height: 0;
  pointer-events: none;
  border: 10px solid transparent;
  border-bottom: none;
  border-top-color: #fff;
  left: 8px;
  bottom: -10px;
}