.panel .service-link,
.service-drawer > a,
.service-drawer > button:not(.service-close) {
  width: 100%;
  background: linear-gradient(135deg, #7564bd, #55479a);
  border-color: #9b8bd5;
  color: #fff;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 8px 20px rgba(35,20,78,.24), inset 0 1px 0 rgba(255,255,255,.2);
}

.service-drawer .customer,
.service-drawer .agent,
.service-drawer .whatsapp,
.service-drawer .telegram,
.service-drawer .dingtalk,
.panel .customer,
.panel .agent,
.panel .whatsapp,
.panel .telegram,
.panel .dingtalk {
  background: linear-gradient(135deg, #7564bd, #55479a) !important;
  border-color: #9b8bd5 !important;
  color: #fff !important;
}

.service-fab {
  background: linear-gradient(145deg, #8372c9, #55479a) !important;
  border-color: #c0b5eb !important;
  color: #fff !important;
}

.panel .service-link:hover,
.service-drawer > a:hover,
.service-drawer > button:not(.service-close):hover {
  background: linear-gradient(135deg, #8372c9, #6253aa);
  border-color: #aa9bdf;
  transform: translateY(-1px);
}

.panel .service-link i,
.service-drawer > a i,
.service-drawer > button:not(.service-close) i {
  background: rgba(231, 181, 60, .18);
  color: #fff;
}

.panel .service-link span,
.service-drawer > a span,
.service-drawer > button:not(.service-close) span {
  flex: 1;
}

.copy-hint {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(8,34,61,.2);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
}

.service-link i,
.service-drawer i {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  color: transparent !important;
  font-size: 0 !important;
}

i.icon-customer { background-image: url("assets/icon-customer.svg?v=2") !important; }
i.icon-topup { background-image: url("assets/icon-topup.svg?v=3") !important; }
i.icon-withdraw { background-image: url("assets/icon-withdraw.svg?v=3") !important; }
i.icon-agent { background-image: url("assets/icon-agent.svg?v=3") !important; }
i.icon-whatsapp { background-image: url("assets/icon-whatsapp.svg?v=4") !important; }
i.icon-telegram { background-image: url("assets/icon-telegram.svg?v=2") !important; }
i.icon-dingtalk { background-image: url("assets/icon-dingtalk.svg?v=2") !important; }

i.icon-telegram,
i.icon-dingtalk {
  background-color: #fff !important;
  background-size: 27px 27px !important;
  box-shadow: 0 0 0 1px rgba(15,52,73,.08), 0 3px 9px rgba(0,23,38,.12);
}

i.icon-whatsapp {
  background-color: #25d366 !important;
  background-size: 29px 29px !important;
  box-shadow: 0 3px 9px rgba(0,80,38,.22);
}

i.icon-customer,
i.icon-topup,
i.icon-withdraw,
i.icon-agent {
  background-color: #173b51 !important;
  background-size: 23px 23px !important;
  box-shadow: 0 3px 9px rgba(0,23,38,.16);
}

@media (max-width: 1180px) {
  .service-drawer {
    max-height: calc(100svh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}