.h1 {
    font-size: 48px;
    line-height: 56px;
    font-weight: bold;
    margin: 0
}

h1 {
    font-size: 48px;
    line-height: 56px;
    font-weight: bold;
    margin: 0
}

.h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: bold;
    margin: 0
}

h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: bold;
    margin: 0
}

.h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    margin: 0
}

h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    margin: 0
}

.h4 {
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    margin: 0
}

h4 {
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    margin: 0
}

.h5 {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    margin: 0
}

h5 {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    margin: 0
}

.h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    margin: 0
}

h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    margin: 0
}

.h7 {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    margin: 0
}

@media(min-width: 767.5px) {
    .h1-tablet {
        font-size: 48px;
        line-height: 56px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h2-tablet {
        font-size: 40px;
        line-height: 48px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h3-tablet {
        font-size: 32px;
        line-height: 40px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h4-tablet {
        font-size: 24px;
        line-height: 32px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h5-tablet {
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h6-tablet {
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 767.5px) {
    .h7-tablet {
        font-size: 12px;
        line-height: 18px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h1-desktop {
        font-size: 48px;
        line-height: 56px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h2-desktop {
        font-size: 40px;
        line-height: 48px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h3-desktop {
        font-size: 32px;
        line-height: 40px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h4-desktop {
        font-size: 24px;
        line-height: 32px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h5-desktop {
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h6-desktop {
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        margin: 0
    }
}

@media(min-width: 1023.5px) {
    .h7-desktop {
        font-size: 12px;
        line-height: 18px;
        font-weight: bold;
        margin: 0
    }
}

p.xxs,
.text.xxs {
    font-size: 8px;
    line-height: 12px
}

p.xs,
.text.xs {
    font-size: 10px;
    line-height: 14px
}

p.sm,
.text.sm {
    font-size: 12px;
    line-height: 18px
}

p.md,
.text.md {
    font-size: 14px;
    line-height: 20px
}

p.lg,
.text.lg {
    font-size: 16px;
    line-height: 24px
}

p.xl,
.text.xl {
    font-size: 20px;
    line-height: 30px
}

@media(min-width: 767.5px) {
    p.xxs-tablet,
    .text.xxs-tablet {
        font-size: 8px;
        line-height: 12px
    }
}

@media(min-width: 767.5px) {
    p.xs-tablet,
    .text.xs-tablet {
        font-size: 10px;
        line-height: 14px
    }
}

@media(min-width: 767.5px) {
    p.sm-tablet,
    .text.sm-tablet {
        font-size: 12px;
        line-height: 18px
    }
}

@media(min-width: 767.5px) {
    p.md-tablet,
    .text.md-tablet {
        font-size: 14px;
        line-height: 20px
    }
}

@media(min-width: 767.5px) {
    p.lg-tablet,
    .text.lg-tablet {
        font-size: 16px;
        line-height: 24px
    }
}

@media(min-width: 767.5px) {
    p.xl-tablet,
    .text.xl-tablet {
        font-size: 20px;
        line-height: 30px
    }
}

@media(min-width: 1023.5px) {
    p.xxs-desktop,
    .text.xxs-desktop {
        font-size: 8px;
        line-height: 12px
    }
}

@media(min-width: 1023.5px) {
    p.xs-desktop,
    .text.xs-desktop {
        font-size: 10px;
        line-height: 14px
    }
}

@media(min-width: 1023.5px) {
    p.sm-desktop,
    .text.sm-desktop {
        font-size: 12px;
        line-height: 18px
    }
}

@media(min-width: 1023.5px) {
    p.md-desktop,
    .text.md-desktop {
        font-size: 14px;
        line-height: 20px
    }
}

@media(min-width: 1023.5px) {
    p.lg-desktop,
    .text.lg-desktop {
        font-size: 16px;
        line-height: 24px
    }
}

@media(min-width: 1023.5px) {
    p.xl-desktop,
    .text.xl-desktop {
        font-size: 20px;
        line-height: 30px
    }
}

a {
    font-weight: bold;
    cursor: pointer
}

a.disabled {
    opacity: .5;
    pointer-events: none
}

a:hover:not(.disabled) {
    text-decoration: underline
}

a.sm {
    font-size: 10px;
    line-height: 14px
}

a.md {
    font-size: 12px;
    line-height: 18px
}

a.lg {
    font-size: 14px;
    line-height: 20px
}

a.xl {
    font-size: 16px;
    line-height: 24px
}

@media(min-width: 767.5px) {
    a.sm-tablet {
        font-size: 10px;
        line-height: 14px
    }
}

@media(min-width: 767.5px) {
    a.md-tablet {
        font-size: 12px;
        line-height: 18px
    }
}

@media(min-width: 767.5px) {
    a.lg-tablet {
        font-size: 14px;
        line-height: 20px
    }
}

@media(min-width: 767.5px) {
    a.xl-tablet {
        font-size: 16px;
        line-height: 24px
    }
}

@media(min-width: 1023.5px) {
    a.sm-desktop {
        font-size: 10px;
        line-height: 14px
    }
}

@media(min-width: 1023.5px) {
    a.md-desktop {
        font-size: 12px;
        line-height: 18px
    }
}

@media(min-width: 1023.5px) {
    a.lg-desktop {
        font-size: 14px;
        line-height: 20px
    }
}

@media(min-width: 1023.5px) {
    a.xl-desktop {
        font-size: 16px;
        line-height: 24px
    }
}

.bold {
    font-weight: bold !important
}

.font-normal {
    font-weight: normal !important
}

.underline {
    text-decoration: underline !important
}

.uppercase {
    text-transform: uppercase !important
}

.text-center {
    text-align: center
}

@font-face {
    font-family: "Lato";
    src: url("../_fonts/Lato-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Lato";
    src: url("../_fonts/Lato-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Lato";
    src: url("../_fonts/Lato-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Roboto";
    src: url("../_fonts/Roboto-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Roboto";
    src: url("../_fonts/Roboto-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Roboto";
    src: url("../_fonts/Roboto-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

a:hover:not(.disabled) {
    text-decoration: none
}

body {
    width: 100%
}

.content {
    /* background-color: var(--primary-11) */
}

@media(min-width: 767.5px) {
    .content {
        /* padding-left: var(--spacing-16);
        padding-right: var(--spacing-16) */
    }
}

.content.mywallets {
    flex-direction: column-reverse
}

@media(min-width: 1023.5px) {
    .content.mywallets {
        flex-direction: column
    }
}

.content .content-cashier {
    width: 100%
}

@media(min-width: 1023.5px) {
    .content .content-cashier {
        max-width: 940px
    }
}

.content .content-cashier .cashier-iframe-body {
    width: 100%;
    display: flex;
    flex-direction: column
}

.content .content-cashier .cashier-iframe-body.mywallets {
    display: none
}

@media(min-width: 1023.5px) {
    .content .content-cashier .cashier-iframe-body.mywallets {
        display: flex;
        width: 100%
    }
}

.content .content-cashier .cashier-iframe-body .content-box-fmbo {
    background-color: var(--other-1);
    box-shadow: 2px 2px 10px 0 var(--opacity-4);
    border-radius: 0px 5px 5px 5px;
    /* overflow: auto; */
    -webkit-overflow-scrolling: touch
}

.content .content-cashier .cashier-iframe-body .content-box-fmbo .iframe-deposit {
    overflow: auto !important
}

.content .cashier-navigation {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    background-color: var(--other-1);
    width: 100%
}

@media(min-width: 374.5px) {
    .content .cashier-navigation {
        display: none
    }
}

@media(min-width: 1023.5px) {
    .content .cashier-navigation {
        display: flex
    }
}

.content .cashier-navigation .navigation-item {
    font-weight: normal
}

.content .cashier-navigation .navigation-item .navigation-item-content {
    color: var(--primary-2);
    width: 220px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-24) 0 var(--spacing-16);
    text-transform: uppercase;
    position: relative
}

.content .cashier-navigation .navigation-item .navigation-item-content .icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary-6);
    margin-bottom: var(--spacing-8)
}

.content .cashier-navigation .navigation-item:hover:not(.disabled) {
    border-bottom: 2px solid var(--secondary-3);
    text-decoration: none
}

.content .cashier-navigation .navigation-item:hover:not(.disabled) .icon {
    background-color: var(--secondary-3)
}

.content .cashier-navigation .navigation-item.active {
    font-weight: bold;
    border-bottom: 2px solid var(--secondary-3)
}

.content .cashier-navigation .navigation-item.active .icon {
    background-color: var(--secondary-3)
}

.content.mywallets .tabbed-links {
    display: none
}

@media(min-width: 1023.5px) {
    .content.mywallets .tabbed-links {
        display: inline-flex
    }
}

.content .tabbed-links {
    display: inline-flex;
    margin: var(--spacing-32) -8px 0px 0px;
    justify-content: flex-start;
    width: 100%;
    overflow: scroll
}

.content .tabbed-links::-webkit-scrollbar {
    display: none
}

@media(min-width: 767.5px) {
    .content .tabbed-links {
        margin-bottom: 10px;
        word-break: break-word;
        margin: var(--spacing-32) -8px 0px 0px;
        width: inherit
    }
}

.content .tabbed-links .tabbed-links__item {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    background-color: var(--primary-10);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: var(--primary-3);
    margin-left: 5px;
    height: 50px;
    flex-direction: row;
    padding: 0 var(--spacing-16);
    align-items: center;
    word-break: keep-all;
    border-radius: 8px 8px 0px 0px;
    justify-content: center
}

.content .tabbed-links .tabbed-links__item:not(.selected):hover {
    background: var(--primary-11)
}

.content .tabbed-links .tabbed-links__item:nth-child(1) {
    min-width: 110px
}

@media(min-width: 374.5px) {
    .content .tabbed-links .tabbed-links__item:nth-child(1) {
        margin-left: var(--spacing-16);
        min-width: 98px
    }
}

@media(min-width: 767.5px) {
    .content .tabbed-links .tabbed-links__item:nth-child(1) {
        margin-left: 0px
    }
}

.content .tabbed-links .tabbed-links__item:nth-child(2) {
    min-width: 96px
}

@media(min-width: 767.5px) {
    .content .tabbed-links .tabbed-links__item:nth-child(2) {
        min-width: 98px
    }
}

.content .tabbed-links .tabbed-links__item:nth-child(3) {
    min-width: 70px
}

@media(min-width: 374.5px) {
    .content .tabbed-links .tabbed-links__item:nth-child(3) {
        margin-right: var(--spacing-16)
    }
}

@media(min-width: 767.5px) {
    .content .tabbed-links .tabbed-links__item:nth-child(3) {
        margin-right: 0;
        min-width: 98px
    }
}

@media(min-width: 767.5px) {
    .content .tabbed-links .tabbed-links__item {
        font-size: 14px
    }
}

.content .tabbed-links .tabbed-links__item.selected {
    background-color: var(--other-1);
    color: var(--primary-1);
    z-index: 1
}

@media(max-width: 1022.5px) {
    .content .tabbed-links.cashier {
        width: 100%;
        margin: 0 0 var(--spacing-16) 0;
        padding: 0;
        background-color: var(--other-1);
        justify-content: center;
        height: 68px;
        align-items: center
    }
}

@media(max-width: 1022.5px)and (min-width: 1023.5px) {
    .content .tabbed-links.cashier {
        justify-content: start
    }
}

@media(max-width: 1022.5px) {
    .content .tabbed-links.cashier .tabbed-links__item {
        display: flex;
        flex-direction: column;
        color: var(--primary-2);
        width: 117px;
        margin: 0px;
        margin-top: var(--spacing-8);
        padding: 0;
        background-color: var(--other-1);
        font-size: 10px;
        line-height: 14px;
        font-weight: normal;
        justify-content: center
    }
}

@media(max-width: 1022.5px)and (min-width: 767.5px) {
    .content .tabbed-links.cashier .tabbed-links__item {
        height: unset;
        max-width: 240px;
        width: 100%;
        font-size: 12px;
        line-height: 18px
    }
}

@media(max-width: 1022.5px) {
    .content .tabbed-links.cashier .tabbed-links__item.selected {
        font-weight: bold
    }
    .content .tabbed-links.cashier .tabbed-links__item.selected .icon-background {
        background-color: var(--secondary-3) !important
    }
    .content .tabbed-links.cashier #tab-deposit .icon-background {
        -webkit-mask: url(../static/images/icon-deposit.svg) no-repeat center;
        -webkit-mask-size: 20px;
        width: 20px;
        height: 20px;
        margin-bottom: var(--spacing-8);
        background-color: var(--primary-6)
    }
}

@media(max-width: 1022.5px)and (min-width: 767.5px) {
    .content .tabbed-links.cashier #tab-deposit .icon-background {
        -webkit-mask-size: 24px;
        width: 24px;
        height: 24px
    }
}

@media(max-width: 1022.5px) {
    .content .tabbed-links.cashier #tab-transfer .icon-background {
        -webkit-mask: url(../static/images/icon-transfer.svg) no-repeat center;
        -webkit-mask-size: 20px;
        width: 20px;
        height: 20px;
        margin-bottom: var(--spacing-8);
        background-color: var(--primary-6)
    }
    .content .tabbed-links.cashier #tab-withdrawal .icon-background {
        -webkit-mask: url(../static/images/icon-withdraw.svg) no-repeat center;
        -webkit-mask-size: 20px;
        width: 20px;
        height: 20px;
        margin-bottom: var(--spacing-8);
        background-color: var(--primary-6)
    }
}

.content .content-wrapper {
    width: 100%
}

@media(min-width: 1023.5px) {
    .content .content-wrapper {
        max-width: 940px
    }
}

.content .content-wrapper .content-box {
    width: 100%;
    padding: var(--spacing-32) var(--spacing-16);
    box-shadow: 2px 2px 10px 0 var(--opacity-4);
    background-color: var(--other-1);
    border-radius: 0px 5px 5px 5px
}

@media(min-width: 1023.5px) {
    .content .content-wrapper .content-box {
        padding: var(--spacing-32) var(--spacing-24);
        max-width: 940px
    }
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box {
        padding: var(--spacing-32) var(--spacing-24)
    }
}

.content .content-wrapper .content-box .notification-title,
.content .content-wrapper .content-box .notification-subtitle {
    text-align: center;
    font-size: 14px;
    line-height: 20px
}

.content .content-wrapper .content-box .one-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--spacing-12)
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line {
        align-items: unset;
        flex-direction: row
    }
}

.content .content-wrapper .content-box .one-line .input-area {
    flex-direction: column;
    min-width: 184px !important;
    width: 100%;
    gap: 12px
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area {
        width: auto
    }
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area {
        flex-direction: row
    }
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area {
        align-items: center
    }
}

.content .content-wrapper .content-box .one-line .input-area.nopad {
    align-items: unset
}

@media(min-width: 1023.5px) {
    .content .content-wrapper .content-box .one-line .input-area.space-after {
        margin-right: var(--spacing-32)
    }
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area.gap-big {
        gap: 34px
    }
}

.content .content-wrapper .content-box .one-line .input-area.desktop-mobile-only {
    display: flex
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area.desktop-mobile-only {
        display: none
    }
}

@media(min-width: 1023.5px) {
    .content .content-wrapper .content-box .one-line .input-area.desktop-mobile-only {
        display: flex
    }
}

.content .content-wrapper .content-box .one-line .input-area.tablet-only {
    display: none
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input-area.tablet-only {
        display: flex
    }
}

.content .content-wrapper .content-box .one-line .input-area #input-date-start::-webkit-calendar-picker-indicator,
.content .content-wrapper .content-box .one-line .input-area #input-date-end::-webkit-calendar-picker-indicator {
    background: url(../static/images/calendar.svg) no-repeat center
}

.content .content-wrapper .content-box .one-line .input-label {
    margin: 0
}

.content .content-wrapper .content-box .one-line .input {
    width: 100%
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .one-line .input {
        width: 184px
    }
}

.content .content-wrapper .content-box .section-actions {
    display: flex
}

.content .content-wrapper .content-box .actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px var(--spacing-24) 0px var(--spacing-24)
}

.content .content-wrapper .content-box .actions .section-title {
    height: 20px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: var(--primary-1)
}

.content .content-wrapper .content-box .actions .section-actions .tooltip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--spacing-24);
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    color: var(--primary-5);
    text-transform: uppercase
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .actions .section-actions .tooltip {
        margin-left: var(--spacing-40)
    }
}

.content .content-wrapper .content-box .actions .section-actions .tooltip .icon {
    width: 16px;
    height: 16px;
    background-color: var(--primary-5);
    padding-right: var(--spacing-4);
    align-self: center
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .actions .section-actions .tooltip .icon {
        height: 12px;
        width: 12px
    }
}

.content .content-wrapper .content-box .actions .section-actions .tooltip #readMessages .tooltiptext,
.content .content-wrapper .content-box .actions .section-actions .tooltip #refreshMessages .tooltiptext,
.content .content-wrapper .content-box .actions .section-actions .tooltip #deleteMessages .tooltiptext {
    display: none
}

@media(min-width: 767.5px) {
    .content .content-wrapper .content-box .actions .section-actions .tooltip #readMessages .tooltiptext,
    .content .content-wrapper .content-box .actions .section-actions .tooltip #refreshMessages .tooltiptext,
    .content .content-wrapper .content-box .actions .section-actions .tooltip #deleteMessages .tooltiptext {
        display: initial
    }
}

.cashier-navigation .navigation-item .navigation-item-content .unread-messages-container-cashier-navigation {
    background-color: var(--system-5);
    color: var(--other-1);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 8px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    position: absolute;
    border: solid 2px var(--other-1);
    left: 119px;
    top: 16px;
    display: none
}

.cashier-navigation .navigation-item .navigation-item-content .unread-messages-container-cashier-navigation.has-unread-messages {
    display: block
}

.unread-messages-container {
    background-color: var(--system-5);
    color: var(--other-1);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 8px;
    text-align: center;
    font-weight: bold;
    display: none
}

.unread-messages-container.upper-corner {
    position: relative;
    top: -10px;
    left: 4px
}

.unread-messages-container span {
    line-height: 16px
}

.unread-messages-container.has-unread-messages {
    display: block
}

.content-cashier {
    justify-content: center
}

@media(min-width: 374.5px) {
    .content-cashier.mywallets .side-cashier-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: var(--spacing-16)
    }
}

@media(min-width: 767.5px) {
    .content-cashier.mywallets .side-cashier-content {
        max-width: 736px
    }
}

@media(min-width: 1023.5px) {
    .content-cashier.mywallets .side-cashier-content {
        width: unset
    }
}

.content-cashier:not(.mywallets) .side-cashier-content {
    display: none
}

@media(min-width: 1023.5px) {
    .content-cashier:not(.mywallets) .side-cashier-content {
        display: flex;
        flex-direction: column;
        width: unset;
        max-width: unset;
        justify-content: unset
    }
}

@media(min-width: 1023.5px) {
    .content-cashier .side-cashier-content {
        display: flex;
        flex-direction: column;
        width: unset;
        max-width: unset;
        justify-content: unset
    }
}

.content-cashier .side-cashier-content .dropdown-header {
    display: flex;
    flex-direction: column;
    background-color: var(--primary-2);
    height: 110px
}

@media(min-width: 767.5px) {
    .content-cashier .side-cashier-content .dropdown-header {
        border-radius: 8px 8px 0 0
    }
}

.content-cashier .side-cashier-content .dropdown-header .top {
    display: flex;
    flex-direction: row;
    width: 100%
}

.content-cashier .side-cashier-content .dropdown-header .top .balance {
    color: var(--other-1)
}

.content-cashier .side-cashier-content .dropdown-header .bottom {
    display: flex;
    flex-direction: row;
    align-items: center
}

.content-cashier .side-cashier-content .dropdown-header .bottom .balance {
    color: var(--secondary-3)
}

.content-cashier .side-cashier-content .dropdown-header .bottom .refresh {
    -webkit-mask: url(../static/images/icon-reload.svg);
    -webkit-mask-size: 16px;
    width: 16px;
    height: 16px;
    background-color: var(--primary-9);
    transition: all 300ms;
    cursor: pointer
}

.content-cashier .side-cashier-content .dropdown-header .bottom .refresh.header-balance--loading {
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

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

.content-cashier .side-cashier-content .dropdown-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--other-1);
    box-shadow: 2px 4px 10px 0 var(--opacity-5)
}

@media(min-width: 767.5px) {
    .content-cashier .side-cashier-content .dropdown-content {
        border-radius: 0 0 8px 8px
    }
}

@media(min-width: 1023.5px) {
    .content-cashier .side-cashier-content .dropdown-content {
        width: 260px
    }
}

.content-cashier .side-cashier-content .dropdown-content .item-balance {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--primary-11);
    border-radius: 8px;
    color: var(--primary-5)
}

.content-cashier .side-cashier-content .dropdown-content .item-balance.withdrawable {
    margin-top: -24px
}

.content-cashier .side-cashier-content .dropdown-content .item-balance.non-withdrawable {
    margin-top: 8px
}

.content-cashier .side-cashier-content .dropdown-content .item-balance .item-left {
    display: flex;
    flex-direction: column
}

.content-cashier .side-cashier-content .dropdown-content .item-balance .withdrawable-balance,
.content-cashier .side-cashier-content .dropdown-content .item-balance .non-withdrawable-balance {
    color: var(--primary-1)
}

.content-cashier .side-cashier-content .dropdown-content .item-balance .icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary-8);
    margin-left: auto
}

.content-cashier .side-cashier-content .dropdown-content .item-balance .icon.withdrawable-icon {
    -webkit-mask: url(../static/images/icon-withdrawable.svg);
    -webkit-mask-size: 32px
}

.content-cashier .side-cashier-content .dropdown-content .item-balance .icon.non-withdrawable-icon {
    -webkit-mask: url(../static/images/icon-non-withdrawable.svg);
    -webkit-mask-size: 32px
}

.content-cashier .side-cashier-content .dropdown-content .item {
    width: 100%
}

.content-cashier .side-cashier-content .dropdown-content .item input {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.content-cashier .side-cashier-content .dropdown-content .item input:checked+.item-header {
    border-radius: 8px 8px 0 0
}

.content-cashier .side-cashier-content .dropdown-content .item input:checked+.item-header .acc-caret {
    transform: rotate(180deg)
}

.content-cashier .side-cashier-content .dropdown-content .item input:checked~.item-content {
    visibility: visible;
    max-height: 100%
}

.content-cashier .side-cashier-content .dropdown-content .item .item-header {
    height: 70px;
    border-radius: 8px;
    padding: 0 var(--spacing-16);
    margin: 0 var(--spacing-16);
    display: flex;
    align-items: center;
    text-decoration-line: none;
    cursor: pointer;
    background-color: var(--primary-11);
    color: var(--primary-5)
}

.content-cashier .side-cashier-content .dropdown-content .item .item-header .acc-caret {
    width: 8px;
    height: 8px;
    -webkit-mask: url(../static/images/icon-chevron-down.svg);
    -webkit-mask-size: 8px;
    align-self: center;
    background-color: var(--primary-3);
    transition: all 300ms;
    margin-left: auto
}

.content-cashier .side-cashier-content .dropdown-content .item .item-header .header-text .balance {
    color: var(--primary-1)
}

.content-cashier .side-cashier-content .dropdown-content .item .item-header:hover {
    text-decoration-line: none
}

.content-cashier .side-cashier-content .dropdown-content .item#centralWalletCashier .item-header:hover {
    background-color: var(--primary-10)
}

.content-cashier .side-cashier-content .dropdown-content .item .item-content {
    visibility: hidden;
    display: flex;
    max-height: 0;
    overflow: auto;
    flex-direction: column
}

.content-cashier .side-cashier-content .dropdown-content .item .item-content .dd-item {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 var(--spacing-16);
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--primary-mode-11);
    color: var(--primary-mode-1)
}

.content-cashier .side-cashier-content .dropdown-content .item .item-content .dd-item .cashier-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px
}

.content-cashier .side-cashier-content .dropdown-content .item .item-content .dd-item:last-child {
    border-radius: 0 0 8px 8px
}

.showSABASeamless .hideSABASeamless {
    display: none !important
}

.showMYR .hideMYR {
    display: none !important
}

.showCNY .hideCNY {
    display: none !important
}

.showTHB .hideTHB {
    display: none !important
}

.showVND .hideVND {
    display: none !important
}

.showIDR .hideIDR {
    display: none !important
}

.showKRW .hideKRW {
    display: none !important
}

.showINR .hideINR {
    display: none !important
}

@media(min-width: 374.5px) {
    .mywallets .recent-trnas-layout {
        display: block;
        margin: var(--spacing-16) var(--spacing-16) var(--spacing-32) var(--spacing-16);
        width: -webkit-fill-available
    }
}

@media(min-width: 767.5px) {
    .mywallets .recent-trnas-layout {
        margin: var(--spacing-16)
    }
}

@media(min-width: 1023.5px) {
    .mywallets .recent-trnas-layout {
        margin-top: var(--spacing-32);
        max-width: 940px
    }
}

.mywallets .recent-trnas-layout .recent-transactions-table {
    min-width: 600px
}

.recent-trnas-layout {
    display: none
}

@media(min-width: 1023.5px) {
    .recent-trnas-layout {
        display: block;
        width: 100%;
        margin-top: var(--spacing-32);
        max-width: 940px
    }
}

.recent-trnas-layout#transactions .item-header:hover {
    background-color: var(--primary-1)
}

.recent-trnas-layout input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    border-radius: 8px 8px 0 0
}

.recent-trnas-layout input+.item-header {
    border-radius: 8px 8px 0px 0px
}

.recent-trnas-layout input~.item-content {
    display: flex;
    max-height: 100%
}

.recent-trnas-layout input:checked+.item-header {
    border-radius: 8px
}

.recent-trnas-layout input:checked+.item-header .acc-caret {
    transform: rotate(0deg)
}

.recent-trnas-layout input:checked~.item-content {
    display: none
}

.recent-trnas-layout .item-header {
    height: 60px;
    border-radius: 8px;
    padding: 0 var(--spacing-16);
    display: flex;
    align-items: center;
    text-decoration-line: none;
    cursor: pointer;
    background-color: var(--primary-3);
    color: var(--other-1)
}

.recent-trnas-layout .item-header .acc-caret {
    width: 8px;
    height: 8px;
    -webkit-mask: url(../static/images/icon-chevron-down.svg);
    -webkit-mask-size: 8px;
    align-self: center;
    background-color: var(--other-1);
    transition: all 300ms;
    margin-left: auto;
    transform: rotate(180deg)
}

.recent-trnas-layout .item-header:hover {
    text-decoration-line: none
}

.recent-trnas-layout .item-content {
    display: none;
    max-height: 0;
    overflow: auto;
    flex-direction: column;
    background-color: var(--other-1);
    padding: var(--spacing-16) var(--spacing-24) var(--spacing-24) var(--spacing-24);
    box-shadow: 2px 2px 10px 0 var(--opacity-4);
    border-radius: 0 0 8px 8px
}

@media(min-width: 374.5px) {
    .recent-trnas-layout .item-content #RecentTransactionsPlaceholder {
        flex-flow: unset;
        flex-direction: unset
    }
}

@media(min-width: 699px) {
    .recent-trnas-layout .item-content #RecentTransactionsPlaceholder {
        flex-flow: row;
        flex-direction: column
    }
}

.recent-trnas-layout .item-content #RecentTransactionsPlaceholder .flex-table-wrapper {
    display: flex
}

@media(min-width: 374.5px) {
    .recent-trnas-layout .item-content #RecentTransactionsPlaceholder .flex-table-wrapper {
        padding-right: 24px
    }
}

@media(min-width: 699px) {
    .recent-trnas-layout .item-content #RecentTransactionsPlaceholder .flex-table-wrapper {
        padding-right: 0
    }
}

.recent-trnas-layout .item-content #RecentTransactionsPlaceholder .transaction-data-container {
    display: flex;
    justify-content: space-between
}

.recent-trnas-layout .item-content #RecentTransactionsPlaceholder .transaction-data-container .details-button img {
    width: 20px;
    height: 20px
}

.recent-trnas-layout .item-content table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    color: var(--primary-1)
}

.recent-trnas-layout .item-content table thead {
    background-color: #e9eaeb;
    height: 44px
}

.recent-trnas-layout .item-content table thead tr th {
    text-align: start;
    border: solid 1px var(--primary-9);
    max-width: 172px;
    padding-left: var(--spacing-12);
    font-weight: bold;
    font-size: 14px;
    line-height: 20px
}

.recent-trnas-layout .item-content table tbody tr:nth-child(even) {
    background-color: var(--primary-11)
}

.recent-trnas-layout .item-content table tbody tr td {
    font-size: 14px;
    line-height: 20px;
    max-width: 172px;
    text-align: start;
    border: solid 1px var(--primary-9);
    padding: var(--spacing-12)
}

.recent-trnas-layout .item-content table tbody tr td.no-results {
    text-align: center
}

.recent-trnas-layout .item-content table tbody tr td .transaction-status {
    color: var(--system-5)
}

.recent-trnas-layout .item-content table tbody tr td .transaction-status.SUCCESSFUL {
    color: var(--system-1)
}

.recent-trnas-layout .item-content table tbody tr td .transaction-status.PENDING {
    color: var(--system-7)
}

.recent-trnas-layout .item-content table tbody tr td .cancel-button {
    color: var(--system-5);
    text-decoration: underline
}