.header-balance--loading .refresh-icon {
  animation-name: spin;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* sticky sosmed */
.icon-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent !important;
  padding: 10px;
  text-align: center;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar-sticky a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.instagram-sticky {
  position: fixed;
  bottom: 190px;
  left: 6px;
  z-index: 100;
}

.whatsapp-sticky {
  position: fixed;
  bottom: 70px;
  left: 9px;
  z-index: 100;
}

.facebook-sticky {
  position: fixed;
  bottom: 8px;
  left: 14px;
  z-index: 100;

}

.tiktok-sticky {
  position: fixed;
  bottom: 130px;
  left: 6px;
  z-index: 100;
}

.twitter-sticky {
  position: fixed;
  bottom: 255px;
  left: 14px;
  z-index: 100;
}

.youtube-sticky {
  position: fixed;
  bottom: 310px;
  left: 6px;
  z-index: 100;
}

.telegram-sticky {
  position: fixed;
  bottom: 380px;
  left: 14px;
  z-index: 100;
}


/* end sticky sosmed */

.header-balance--hidden .header-balance__hidden-hide,
.header-balance__hidden-show {
  display: none !important;
}

.header-balance--hidden .header-balance__hidden-show {
  display: initial !important;
  text-transform: initial;
}

.header-balance__wallet__total,
.header-balance__wallet__na,
.header-balance__wallet__maintenance {
  display: none;
}

.header-balance__wallet[data-outcome="success"] .header-balance__wallet__total {
  display: initial;
}

.header-balance__wallet[data-outcome="na"] .header-balance__wallet__na {
  display: initial;
}

.header-balance__wallet[data-outcome="maintenance"] .header-balance__wallet__maintenance {
  display: initial;
}

.main-overlay-container {
  display: none;
  height: 0;
  position: fixed;
  flex-flow: column;
  flex-direction: column;
  width: 100%;
  background-color: var(--opacity-1);
  animation: fade-in 200ms;
  z-index: 200;
}

@media (min-width: 280px) {
  .main-overlay-container.active {
    display: flex;
    height: 100%;
  }
}

@media (min-width: 374.5px) {
  .main-overlay-container.active {
    display: flex;
    height: 100%;
  }
}

@media (min-width: 767.5px) {
  .main-overlay-container.active {
    display: none;
    height: 0;
  }
}

.header-overlay-container {
  display: none;
  height: 0;
  position: fixed;
  flex-flow: column;
  flex-direction: column;
  width: 100%;
  background-color: var(--opacity-1);
  animation: fade-in 200ms;
  z-index: 200;
}

@media (min-width: 280px) {
  .header-overlay-container.active {
    display: flex;
    height: 32px;
  }
}

@media (min-width: 374.5px) {
  .header-overlay-container.active {
    display: flex;
    height: 32px;
  }
}

@media (min-width: 767.5px) {
  .header-overlay-container.active {
    display: none;
    height: 0;
  }
}

.header {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 201;
  width: 100%;
  background-color: var(--secondary-1);
}

.header .header-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1360px;
  box-sizing: border-box;
  justify-content: space-between;
  height: 56px;
  padding: var(--spacing-12);
}

@media (min-width: 1023.5px) {
  .header .header-content {
    height: 72px;
    padding: var(--spacing-16) var(--spacing-24);
  }
}

.header .header-content .logo-desktop {
  margin: auto 0;
  display: none;
}

@media (min-width: 1023.5px) {
  .header .header-content .logo-desktop {
    display: flex;
  }
}

.header .header-content .logo-mobile {
  margin: auto 0;
  display: flex;
}

@media (min-width: 1023.5px) {
  .header .header-content .logo-mobile {
    display: none;
  }
}

.header .header-content .header-content-right {
  display: flex;
  margin-left: auto;
}

.header .header-content .header-content-right .transfer-button-header img {
  width: 16px;
  height: 16px;
}

@media (min-width: 767.5px) {
  .header .header-content .header-content-right .transfer-button-header img {
    width: 20px;
    height: 20px;
  }
}

.header .header-content .header-content-right .quick-deposit {
  width: 40px;
}

.header .header-content .header-content-right .inbox-icon {
  display: none;
  align-self: center;
  -webkit-mask: url(../../static/images/icons/icon-inbox.svg) no-repeat center;
  -webkit-mask-size: 24px;
  width: 24px;
  height: 24px;
  margin-left: var(--spacing-16);
  background-color: var(--primary-9);
}

@media (min-width: 1023.5px) {
  .header .header-content .header-content-right .inbox-icon {
    display: flex;
  }
}

.header .header-content .header-content-right .inbox-icon:hover {
  background-color: var(--secondary-3);
}

.header .header-content .header-content-right .header-hamburger-menu {
  display: flex;
  width: 20px;
  height: 20px;
  align-self: center;
  -webkit-mask: url(../../static/images/icons/icon-menu.svg) no-repeat center;
  -webkit-mask-size: 20px;
  background-color: var(--other-1);
}

@media (min-width: 1023.5px) {
  .header .header-content .header-content-right .header-hamburger-menu {
    display: none;
  }
}

.header .header-content .header-content-right .border-radius-left-60 {
  border-radius: 60px 0px 0px 60px;
}

.header .header-content .header-content-right .border-radius-right-60 {
  border-radius: 0px 60px 60px 0px;
}