.side-nav a i.icon-group-kpis {
  width: 27px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M288 32C128.94 32 0 160.94 0 320c0 52.8 14.25 102.26 39.06 144.8 5.61 9.62 16.3 15.2 27.44 15.2h443c11.14 0 21.83-5.58 27.44-15.2C561.75 422.26 576 372.8 576 320c0-159.06-128.94-288-288-288zm0 64c14.71 0 26.58 10.13 30.32 23.65-1.11 2.26-2.64 4.23-3.45 6.67l-9.22 27.67c-5.13 3.49-10.97 6.01-17.64 6.01-17.67 0-32-14.33-32-32S270.33 96 288 96zM96 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm48-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm246.77-72.41l-61.33 184C343.13 347.33 352 364.54 352 384c0 11.72-3.38 22.55-8.88 32H232.88c-5.5-9.45-8.88-20.28-8.88-32 0-33.94 26.5-61.43 59.9-63.59l61.34-184.01c4.17-12.56 17.73-19.45 30.36-15.17 12.57 4.19 19.35 17.79 15.17 30.36zm14.66 57.2l15.52-46.55c3.47-1.29 7.13-2.23 11.05-2.23 17.67 0 32 14.33 32 32s-14.33 32-32 32c-11.38-.01-20.89-6.28-26.57-15.22zM480 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z'/></svg>")
    no-repeat center / contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  display: inline-block;
  position: relative;
  top: 5px;
}
.side-nav a.active i.icon-group-kpis,
.side-nav a:hover i.icon-group-kpis {
  background-color: #ef8b29;
}
#group-kpis-page ul.all-right li.order1 {
  float: right;
}
#group-kpis-page ul.all-right {
  margin-right: 0;
  margin-left: 0;
}
.groupkpi-box .progress-bar span {
  padding: 0 15px;
}
#group-kpis-page .broadcast.alerts .form-check-label {
  position: relative;
  padding-left: 30px;
}
#group-kpis-page .order1 .broadcast.alerts i {
  position: absolute;
  z-index: 9;
  left: 5px;
  right: inherit;
  top: 15px;
  font-size: 16px;
  color: rgba(35, 31, 32, 0.7);
}
.groupkpi-titlebar {
  border-bottom: 2px solid #ccc;
  padding: 20px 0;
  margin-bottom: 30px;
}
.groupkpi-titlebar h1.main-title {
  letter-spacing: -0.72px;
  color: #231f20;
  opacity: 1;
  font-size: 36px;
  line-height: 36px;
  border-bottom: 0px solid #ccc;
  padding: 0;
  margin-bottom: 0;
}
.groupkpi-titlebar ul.all-right {
  margin: 0 0 0 10px;
  padding: 0;
}
#group-kpis-page .top-select.align-right {
  float: right;
}
.groupkpi-box {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #231f20;
  padding: 4px;
  margin-bottom: 30px;
}
.groupkpi-box-top {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.groupkpi-box-top .title-col {
  flex: 0 0 20%;
  max-width: 20%;
  padding: 0;
  background: #231f20;
  border-radius: 0 0 10px 0;
  padding: 14px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.groupkpi-box-top .prograss-col {
  flex: 0 0 80%;
  max-width: 80%;
  padding: 0;
  padding: 14px 14px 0;
  border-radius: 10px 10px 0 0;
  margin-left: auto;
  position: relative;
}
.groupkpi-box-top .prograss-col:after {
  position: absolute;
  width: 14px;
  height: 14px;
  background: url(../images/corner.jpg);
  content: "";
  left: -1px;
  top: 0;
}
.title-col h3 {
  font-size: 22px;
  color: #fff;
  line-height: 30px;
  margin: 0;
  display: block;
}
.groupkpi-box-content {
  background: #fff;
  border-radius: 10px 0 10px 10px;
  width: 100%;
  padding: 20px;
}
li.bronze {
  color: #e57201;
}
li.gold {
  color: rgba(0, 0, 0, 0.5);
}
li.platium {
  color: rgba(0, 0, 0, 0.5);
}
li.bronze i {
  background: transparent linear-gradient(180deg, #e6bb7b 0%, #bc7f31 100%) 0%
    0% no-repeat padding-box;
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent; /* Chrome, Safari */
  background-clip: text; /* Firefox */
  color: transparent;
  font-size: 14px;
  margin-right: 5px;
}
li.gold i {
  background: transparent linear-gradient(180deg, #ffe081 0%, #e3b623 100%) 0%
    0% no-repeat padding-box;
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Firefox */
  color: transparent;
  font-weight: bold; /* optional */
  font-size: 14px;
  margin-right: 5px;
}
li.platium i {
  background: transparent linear-gradient(180deg, #eeeeee 0%, #acacac 100%) 0%
    0% no-repeat padding-box;
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Firefox */
  color: transparent;
  opacity: 1; /* ensure full opacity */
  font-weight: bold; /* optional */
  font-size: 14px;
  margin-right: 5px;
}

/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  .groupkpi-box-top .title-col,
  .groupkpi-box-top .prograss-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.gkpi-list.yearly {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop: 4 columns */
  gap: 15px;
}
.gkpi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
  gap: 15px;
}
.gkpi-list li {
  background: #fff;
  padding: 20px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid #ccc;
  position: relative;
  color: #231f20;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
.gkpi-list li strong {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  font-weight: 700;
}
.Pointing-System .ps-grid li strong.minus,
.minus {
  color: #d51616;
}
.gkpi-list li span {
  display: block;
  max-width: 70%;
}
.groupkpi-box .prograss-col .progress {
  --bs-progress-height: 35px;
  border-radius: 5px;
}
.groupkpi-box .prograss-col .progress-bar,
.groupkpi-box .prograss-col .progress-bar.w-100 {
  border-radius: 5px;
  text-align: left;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  overflow: visible;
}
.groupkpi-box .progress .progress-bar.star:after {
  position: absolute;
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  right: -0;
  top: 3px;
  font-weight: 900;
  font-size: 20px;
  background: transparent linear-gradient(180deg, #ffe61c 0%, #ffa929 100%) 0%
    0% no-repeat padding-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tablet */
@media (max-width: 992px) {
  .gkpi-list {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
}

/* Mobile Landscape */
@media (max-width: 768px) {
  .gkpi-list {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Mobile Portrait */
@media (max-width: 480px) {
  .gkpi-list {
    grid-template-columns: 1fr; /* 1 column */
  }
}
.prograss-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  text-align: right;
  margin-top: -35px;
}
.prograss-col-list li {
  border-right: 1px solid #000;
  padding: 40px 20px 0 0;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 768) {
  .three-col-list {
    grid-template-columns: 1fr; /* 1 column */
  }
}
.Pointing-System {
  margin-bottom: 30px;
}
.Pointing-System h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 20px;
}
.Pointing-System .ps-grid {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
  gap: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 20px #0000000d;
}
.Pointing-System .ps-grid.yearly {
  grid-template-columns: repeat(5, 1fr); /* Desktop: 4 columns */
}
.Pointing-System .ps-grid li {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  position: relative;
  color: #231f20;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
.Pointing-System .ps-grid li strong {
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #e57201;
}
.Pointing-System.bonus .ps-grid li {
  border-bottom: 0px solid #ccc;
  border-right: 1px solid #ccc;
}
body .Pointing-System .ps-grid.yearly li:nth-child(5n) {
  border-bottom: 1px solid #ccc;
}
.Pointing-System .ps-grid.yearly li:nth-child(n + 6):nth-child(-n + 10) {
  border-bottom: 0px solid #ccc;
}
.Pointing-System .ps-grid.yearly li {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  position: relative;
  color: #231f20;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}
/* remove right border of every 4th column */

.Pointing-System .ps-grid.yearly li:nth-child(4n) {
  border-right: 1px solid #ccc;
}
.Pointing-System .ps-grid.yearly li:nth-child(5n),
.Pointing-System .ps-grid li:nth-child(4n) {
  border-right: none;
}
/* remove bottom border of 2nd row */
.Pointing-System .ps-grid li:nth-child(n + 5):nth-child(-n + 8) {
  border-bottom: none;
}
button.btn.btn-primary.refresh-data {
  background: #e57201;
  border: 1px solid #e57201;
  color: #fff;
  height: 45px;
  padding: 0 20px;
  line-height: 46px;
  width: auto;
}
button.btn.btn-primary.refresh-data:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
@media (min-width: 268px) and (max-width: 768px) {
  .groupkpi-box-top .title-col {
    border-radius: 0;
  }
  .groupkpi-box-content {
    border-radius: 0 0 10px 10px;
  }
  .Pointing-System .ps-grid.yearly,
  .Pointing-System .ps-grid {
    padding: 5px;
    grid-template-columns: repeat(1, 1fr);
  }
  .Pointing-System .ps-grid.yearly li,
  .Pointing-System .ps-grid li {
    padding: 10px;
    border-bottom: 1px solid #ccc !important;
    border-right: 0px solid #ccc !important;
    font-size: 13px;
    line-height: 18px;
  }
  .Pointing-System .ps-grid.yearly li strong,
  .Pointing-System .ps-grid li strong {
    right: 10px;
    top: 10px;
    font-size: 15px;
  }
  .prograss-col-list li {
    font-size: 10px;
  }
  .side-nav a i.icon-group-kpis {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .gkpi-list li strong {
    font-size: 18px;
  }

  button.btn.btn-primary.refresh-data {
    margin-bottom: 50px;
  }
}