.icon_bg {
  background: linear-gradient(180deg, #6777ef 0%, #4c5abf 100%);
  height: 64px;
  width: 64px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_dash {
  height: 24px;
  width: 24px;
}
.top-info {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #eee;
}
.top-info:hover {
  transform: translateY(-10px);
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
.top-info:after {
  content: "";
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #f7f7f7;
  position: absolute;
  top: -30px;
  right: -40px;
}
.z-index-50 {
  z-index: 50;
}

.font-size-12 {
  font-size: 12px;
}

.rounded-8 {
  border-radius: 8px;
}
.size-64 {
  font-size: 84px;
}
.text-90 {
  color: #909090;
  line-height: 140%;
}
.text-ca {
  color: #cacaca;
}
.chartdiv {
  width: 100%;
  height: 240px;
}

.search-button {
  top: 8px;
  right: 24px;
  border: 0;
  height: 24px;
  width: 32px;
  background: no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0769 6.76923C11.0769 5.58333 10.6554 4.56891 9.8125 3.72596C8.96955 2.88301 7.95513 2.46154 6.76923 2.46154C5.58333 2.46154 4.56891 2.88301 3.72596 3.72596C2.88301 4.56891 2.46154 5.58333 2.46154 6.76923C2.46154 7.95513 2.88301 8.96955 3.72596 9.8125C4.56891 10.6554 5.58333 11.0769 6.76923 11.0769C7.95513 11.0769 8.96955 10.6554 9.8125 9.8125C10.6554 8.96955 11.0769 7.95513 11.0769 6.76923ZM16 14.7692C16 15.1026 15.8782 15.391 15.6346 15.6346C15.391 15.8782 15.1026 16 14.7692 16C14.4231 16 14.1346 15.8782 13.9038 15.6346L10.6058 12.3462C9.45833 13.141 8.17949 13.5385 6.76923 13.5385C5.85256 13.5385 4.97596 13.3606 4.13942 13.0048C3.30288 12.649 2.58173 12.1683 1.97596 11.5625C1.37019 10.9567 0.889423 10.2356 0.533654 9.39904C0.177885 8.5625 0 7.6859 0 6.76923C0 5.85256 0.177885 4.97596 0.533654 4.13942C0.889423 3.30288 1.37019 2.58173 1.97596 1.97596C2.58173 1.37019 3.30288 0.889423 4.13942 0.533654C4.97596 0.177885 5.85256 0 6.76923 0C7.6859 0 8.5625 0.177885 9.39904 0.533654C10.2356 0.889423 10.9567 1.37019 11.5625 1.97596C12.1683 2.58173 12.649 3.30288 13.0048 4.13942C13.3606 4.97596 13.5385 5.85256 13.5385 6.76923C13.5385 8.17949 13.141 9.45833 12.3462 10.6058L15.6442 13.9038C15.8814 14.141 16 14.4295 16 14.7692Z' fill='%238F8F8F'/%3E%3C/svg%3E%0A");
}

.list-peringkat-opd {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-peringkat-opd li .content {
  padding: 16px 2px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.list-peringkat-opd span {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.list-peringkat-opd img {
  height: 10px;
  width: 10px;
}
.list-peringkat-opd li .content-persentase {
  padding: 16px 2px 8px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tooltiptext {
  visibility: hidden;
  width: 40px;
  background-color: black;
  opacity: 0.8;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  padding: 3px 0;
  cursor: pointer;

  /* Position the tooltip */
  position: absolute;
  right: 10px;
  z-index: 30;
}

.list-peringkat-opd li:hover .tooltiptext {
  visibility: visible;
}

@media screen and (max-width: 980px) {
  .size-64 {
    font-size: 64px;
  }
}
@media screen and (min-width: 2000px) {
  .size-64 {
    font-size: 130px;
  }
  .fon-zi-90 {
    font-size: 18px;
    margin-right: 200px !important;
  }
}