.tooltip {
  position: relative;
}
.tooltip:after,
.tooltip:before {
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 10;
  transform: translate(-50%, 10px);
  transform-origin: top;
  transition: all 0.18s ease-out 0.18s;
}

.tooltip:after {
  background-color: #232323;
  box-shadow: 0 0 3px #ff0000;
  content: attr(data-tooltip);
  padding: 10px;
  white-space: nowrap;
  margin-bottom: 11px;
}

.tooltip:before {
  width: 0;
  height: 0;
  content: "";
  margin-bottom: 6px;
}

.tooltip:hover:before,
.tooltip:hover:after {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

[data-tooltip-pos="up"]:before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ff0000;
  margin-bottom: 6px;
}

[data-tooltip-pos="down"]:before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f5f5f5;
  margin-top: 6px;
}

[data-tooltip-pos="right"]:before {
  border-top: 6px solid transparent;
  border-right: 6px solid #f5f5f5;
  border-bottom: 6px solid transparent;
  margin-left: 6px;
}

[data-tooltip-pos="left"]:before {
  border-top: 6px solid transparent;
  border-left: 6px solid #f5f5f5;
  border-bottom: 6px solid transparent;
  margin-right: 6px;
}

[data-tooltip-pos="down"]:before,
[data-tooltip-pos="down"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -10px);
}

[data-tooltip-pos="down"]:after {
  margin-top: 11px;
}

[data-tooltip-pos="down"]:hover:before,
[data-tooltip-pos="down"]:hover:after {
  transform: translate(-50%, 0);
}

[data-tooltip-pos="left"]:before,
[data-tooltip-pos="left"]:after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translate(10px, -50%);
}

[data-tooltip-pos="left"]:after {
  margin-right: 11px;
}

[data-tooltip-pos="left"]:hover:before,
[data-tooltip-pos="left"]:hover:after {
  transform: translate(0, -50%);
}

[data-tooltip-pos="right"]:before,
[data-tooltip-pos="right"]:after {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translate(-10px, -50%);
}

[data-tooltip-pos="right"]:after {
  margin-left: 11px;
}

[data-tooltip-pos="right"]:hover:before,
[data-tooltip-pos="right"]:hover:after {
  transform: translate(0, -50%);
}

[data-tooltip-length]:after {
  white-space: normal;
}

[data-tooltip-length="small"]:after {
  width: 80px;
}

[data-tooltip-length="medium"]:after {
  width: 150px;
}

[data-tooltip-length="large"]:after {
  width: 260px;
}

[data-tooltip-length="fit"]:after {
  width: 100%;
}

/*css just to the example*/
.component--example {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* .number-n {
  margin-top: 13px;
} */
.number-img {
  width: 68px;
  display: contents;
}
.header {
  width: 100%;
  display: none;
}
.moving-text {
  display: none;
}

@media screen and (max-width: 1023px) {
  .sidebar {
    display: none;
  }

  .numbers .number {
    float: left;
    width: 48%;
    display: block;
    text-align: center;
    background: url(http://1.bp.blogspot.com/-NuLtG9UkbUQ/UOnIBZKk2OI/AAAAAAAAAu8/3v0HtMDOrl0/s1600/numberBackHover1_result.jpg);
    background-size: cover;
    color: #fff;
    line-height: 23px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 35px 0;
    border-radius: 15px;
    font-family: Antiqua, "book antiqua";
    border: 1px solid #ccc;
    margin-left: 12px;
  }

  .numbers .number .number-n a {
    color: #fff;

    font-size: 40px;
  }

  .header {
    width: 100%;
    display: none;
  }
  .moving-text {
    display: none;
  }

  .minat {
    text-align: center;

    font-size: 33px;

    font-weight: bold;

    color: red;

    box-shadow: 0px 1px 22px 1px #fff;

    padding: 37px 0;

    margin: 37px 17px 36px 0px;

    width: 98%;
  }

  .pesan {
    background: #ccc;

    border: 1px solid white;

    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

    border-radius: 25px;

    margin: 24px 15px 0px 0px;

    padding: 20px 19px 55px 19px;

    color: black;

    text-align: center;
  }

  .operators-menu {
    display: flex;

    flex-flow: row wrap;

    justify-content: space-evenly;

    align-items: center;

    background-color: #1c1a1a;

    border-radius: 0px;

    border: 1px solid #666;

    width: 99%;
  }

  .operators-menu img {
    width: 104px;

    margin: 0px 21px 7px 40px;
  }

  .search-form {
    border: 1px solid #666;

    border-radius: 0px 0px 10px 10px;

    text-align: center;

    padding: 14px 0px 15px 10px;

    width: 100%;

    position: relative;

    margin-top: -11px;
    display: none;
  }

  .wrapper .main-content {
    width: 100%;

    padding: 10px 8px 19px 15px;

    border-radius: 7px;

    float: left;
  }

  .pesan h2 {
    text-align: center;

    color: black;

    font-size: 40px;
  }

  .pesan .number-img img {
    border-radius: 7px;

    width: 196px;
  }

  .number-p a {
    font-size: 90px;

    color: #000;
  }

  .hrg {
    font-size: 30px;
    margin-top: 41px;
    margin-bottom: 39px;
    color: #000;
    font-weight: 600;
    width: 97%;
  }

  strong {
    font-weight: bold;

    font-size: 27px;
  }

  .tombol-whatsapp {
    background: #24cc63;

    padding: 35px;

    display: block;

    color: white;

    margin: 10px auto;

    text-align: center;

    width: 354px;

    border-radius: 7px;

    box-shadow: 0px 3px 8px -2px rgb(78 73 73);

    font-size: 35px;

    margin-top: 37px;
  }
  .tombol-shopee {
    background: #fff;

    padding: 35px;

    display: block;

    color: #000;

    margin: 10px auto;

    text-align: center;

    width: 354px;

    border-radius: 7px;

    box-shadow: 0px 3px 8px -2px rgb(78 73 73);

    font-size: 35px;

    margin-top: 37px;
  }
  .tombol-tokopedia {
    background: #fff;

    padding: 35px;

    display: block;

    color: #000;

    margin: 10px auto;

    text-align: center;

    width: 354px;

    border-radius: 7px;

    box-shadow: 0px 3px 8px -2px rgb(78 73 73);

    font-size: 35px;

    margin-top: 37px;
  }

  .tombol-whatsapp:hover {
    background: #24cc63;

    padding: 35px;

    display: block;

    color: white;

    margin: 10px auto;

    text-align: center;

    width: 354px;

    border-radius: 7px;

    box-shadow: 0px 3px 8px -2px rgb(78 73 73);

    font-size: 35px;

    margin-top: 37px;

    box-shadow: none;
  }

  .tombol-whatsapp img,
  .tombol-shopee img,
  .tombol-tokopedia img {
    width: 28px;
  }

  .bghrg {
    margin-top: 11px;

    color: #ff0000;
  }
  .yourbrand {
    width: 950px;
  }
  .yourbrand img {
    width: 100%;
    height: 203px;
    margin-left: -40px;
    margin-top: -24px;
    border-radius: 26px 23px 0px 0px;
  }
  .pesanclr {
    background-image: url(/images/hrg.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 4px 19px 8px -26px;
    padding: 46px 150px 15px 31px;
    text-align: inherit;
    font-size: 23px;
    color: #000000;
    width: 219px;
    height: 29px;
    font-weight: 900;
  }
  .bghrg {
    color: blue;
    font-size: 37px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
  }
}