.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)
    }
}

.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__hidden-show2 {
    display: block !important
}

.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;
    max-width: 110px;
}

@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/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/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
}