.bank-status-list {

    display: flex;

    flex-wrap: nowrap;

    overflow: auto;

    margin-bottom: 15px;

    padding-bottom: 5px

}



.bank-status-list li+li {

    margin-left: 5px

}



.bank-status-list [data-online] {

    display: flex;

    flex-direction: row;

    background-color: #222;

    padding: 8px 8px 8px 5px;

    border-radius: 5px

}



.bank-status-list [data-online]:before {

    content: '';

    width: 5px;

    height: 100%;

    margin-right: 5px;

    border-radius: 5px

}



.bank-status-list [data-online='true']:before {

    background-color: #0f0

}



.bank-status-list [data-online='false']:before {

    background-color: #e00

}



.bank-status-list [data-online] img {

    max-height: 27px;

    width: 51px

}



.bank-info {

    background-color: #141414;

    color: #888;

    background-image: linear-gradient(to bottom,#141414 0%,#242424 100%);

    padding: 15px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    border-radius: 5px;

    --qrcode-size: 130px

}



.bank-info[hidden] {

    display: none

}



.bank-info h1,.bank-info h2,.bank-info h3,.bank-info h4 {

    margin: 0;

    word-break: break-all

}



.bank-info h1,.bank-info h2,.bank-info h3 {

    text-transform: uppercase

}



.bank-info h1 {

    font-size: 20px

}



.bank-info h2 {

    font-size: 25px;

    letter-spacing: 5px

}



.bank-info h3 {

    font-size: 18px

}



.bank-info h4 {

    font-size: 12px;

    margin-top: 10px

}



.bank-info h3,.bank-info h4 {

    display: none

}



.bank-info [data-bank-info="header"] {

    display: flex;

    flex-basis: 100%;

    justify-content: space-between;

    align-items: center

}



.bank-info [data-bank-info="header"] img {

    height: 30px

}



.bank-info [data-bank-info="details"] {

    flex-grow: 1;

    flex-basis: calc(100% - (var(--qrcode-size) + 10px*2));

    margin-top: 10px;

    padding-right: 10px;

    overflow: hidden

}



.bank-info [data-bank-info="details"] h1 {

    margin-top: 15px

}



.bank-info [data-bank-info="details"] h2 {

    margin-top: 5px

}



.bank-info [data-bank-info="qrcode"] {

    flex-basis: calc(var(--qrcode-size) + 10px*2);

    display: flex;

    align-items: center;

    justify-content: center;

    height: calc(var(--qrcode-size) + 10px*2);

    border-radius: 5px

}



.bank-info [data-bank-info="qrcode"]:empty {

    display: none

}



.bank-info [data-bank-info="qrcode"] img {

    width: var(--qrcode-size);

    height: var(--qrcode-size)

}



.bank-info hr {

    border-top: 1px solid #000;

    border-bottom: 1px solid #393939;

    margin: 10px 0;

    width: 100%

}



.bank-info [data-bank-info="actions"] {

    flex-basis: 100%;

    display: flex;

    justify-content: flex-end

}



.bank-info[data-bank-type="pulsa"] [data-bank-info="header"] img {

    height: 20px;

    width: auto

}



.bank-info[data-bank-type="bank"] [data-bank-info="details"] img,.bank-info[data-bank-type="emoney"] [data-bank-info="details"] img {

    height: 30px;

    width: auto

}



.bank-info[data-high-priority="true"] [data-bank-info="details"] h1,.bank-info[data-high-priority="true"] [data-bank-info="details"] h2,.bank-info[data-high-priority="true"] [data-bank-info="actions"] button,.bank-info:not([data-high-priority="true"]) [data-bank-info="details"] .recommended-for-instant-process {

    display: none

}



.recommended-for-instant-process {

    font-size: 14px;

    margin-bottom: 10px;

    color: #eee

}



.recommended-for-instant-process span {

    margin-left: 5px;

    font-weight: normal;

    color: #fff

}



.to-account-label-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px

}



.to-account-label-container span {

    cursor: pointer;

    color: #fff

}



.available-banks-popup {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 100;

    background-color: rgba(0,0,0,.5);

    display: none

}



.available-banks-popup.show {

    display: block

}



.available-banks-container {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 65%;

    max-height: 80vh;

    overflow: auto;

    padding: 20px 10px;

    border-radius: 5px;

    background-color: #fff;

    color: #000

}



.available-banks-container .available-bank-group-label {

    font-size: 14px;

    color: #555;

    font-weight: 600;

    margin-bottom: 5px;

    padding: 0 20px

}



.available-banks-container .available-bank-group-label:not(:first-child) {

    margin-top: 30px

}



.available-banks-container .available-bank-group-label span {

    font-weight: 900;

    color: #000

}



.available-banks-container .available-bank-item {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 10px 20px;

    border-bottom: 1px solid #bbb;

    cursor: pointer

}



.available-banks-container .available-bank-item[data-selected="true"] {

    background-color: #ececec

}



.available-banks-container .available-bank-item .available-bank-status {

    flex-basis: 10%;

    max-width: 10px;

    height: 10px;

    border-radius: 50%;

    background-color: #12b612

}



.available-banks-container .available-bank-item .available-bank-status[data-is-online="false"] {

    background-color: #f00

}



.available-banks-container .available-bank-item .available-bank-info {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    gap: 3px

}



.available-banks-container .available-bank-item .available-bank-info .available-bank-name {

    font-size: 15px

}



.available-banks-container .available-bank-item .available-bank-info .available-bank-admin-fee {

    font-size: 12px

}



.available-banks-container .available-bank-item .available-bank-info .available-bank-name>br {

    display: none

}



.available-banks-container .available-bank-item .available-bank-logo {

    width: 30px;

    height: 30px

}



.payment-method-selection {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    gap: 5px

}



.payment-method-selection input[type="radio"] {

    visibility: hidden;

    position: absolute;

    pointer-events: none

}



.payment-method-selection label {

    flex-basis: calc((100% - 5px*3)/4);

    flex-grow: 0;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 5px;

    border-radius: 5px;

    background-color: #cbcbcb;

    cursor: pointer;

    box-shadow: 0 3px 5px rgba(0,0,0,.2)

}



.payment-method-selection label img {

    width: 25px

}



.payment-method-selection input[type="radio"]+label {

    color: #000

}



.payment-method-selection input[type="radio"]:checked+label {

    background-color: #f3dd7f;

    background-image: linear-gradient(to bottom,#f3dd7f 0%,#b88416 100%);

    color: #fff

}



.payment-method-selection input[type="radio"]:checked+label img {

    filter: brightness(0) invert(1)

}



.payment-method-selection input[type="radio"]:disabled+label {

    display: none

}



.deposit-container .standard-form-note a {

    color: #fba501

}



.deposit-container .formatted-balance {

    color: #fba501

}



.deposit-container .copy-bank-account-button {

    background: none;

    border: none;

    padding: 0;

    margin-left: 5px;

    color: #fff

}



.deposit-container .copy-bank-account-button:hover {

    color: #ddd

}



.deposit-container .reveal-bank-account-button {

    font-size: 10px;

    padding: 3px 5px;

    text-transform: uppercase

}



.standard-inline-form-group [data-section="depo-amount"] {

    display: block;

    width: 60%

}



.standard-inline-form-group [data-section="normal-depo-amount"] {

    width: 100%

}



.standard-inline-form-group [data-section="fast-depo-amount"] {

    width: 60%

}



.standard-inline-form-group.multiple-row label,.standard-inline-form-group.multiple-row [data-section="asterisk"] {

    align-self: flex-start

}



.standard-inline-form-group.multiple-row label {

    padding: 6px 0

}



.standard-inline-form-group.multiple-row [data-section="asterisk"] {

    align-self: flex-start;

    padding: 6px 10px

}



.deposit-container .fast-deposit {

    margin-left: 20px;

    width: 60px

}



.deposit-container .real-deposit-amount+div,.deposit-container .serial-number-deposit-note {

    margin-top: 10px

}



.deposit-container .real-deposit-amount:empty {

    display: none

}



.deposit-container .real-deposit-amount:before {

    content: attr(data-title);

    margin-right: 5px

}



.deposit-container .admin-fee-container {

    flex-grow: 1;

    display: flex;

    align-items: center;

    gap: 5px;

    color: #d0b300

}



.deposit-container label+label {

    margin-left: 10px

}



.deposit-container select.input-validation-error {

    color: transparent

}



.deposit-container input.input-validation-error {

    background-color: #000

}



.deposit-container .deposit-form-group {

    background-color: #efeff3;

    padding: 10px;

    margin-bottom: 15px;

    border-radius: 5px

}



.deposit-container .deposit-form-group .form-group:last-child {

    margin-bottom: 0

}



.deposit-container .deposit-form-group [data-section="asterisk"] {

    color: #f00

}



.deposit-amount-container {

    background-color: #242424;

    color: #fff;

    border-radius: 5px

}



.deposit-amount-container [data-section="depo-input"] {

    display: flex

}



.deposit-amount-container input[type="text"] {

    background-color: #fff;

    color: inherit;

    border-radius: 0

}



.deposit-amount-container [data-field="amount"] {

    flex-grow: 1

}



.deposit-amount-container [data-field="reference-number"] input {

    width: 60px;

    background-color: #6a6a6a;

    border: #6a6a6a;

    color: #fff;

    border-radius: 0

}



.deposit-amount-container [data-field="copy"] {

    width: 35px

}



.deposit-amount-container input {

    width: 100%

}



.deposit-amount-container .real-deposit-amount {

    font-size: 24px;

    line-height: 1

}



.deposit-amount-container .real-deposit-amount:before {

    content: attr(data-title);

    display: block;

    font-size: 14px;

    margin: 7px 0

}



.deposit-amount-container .fast-deposit-note {

    margin-top: 10px;

    font-size: 12px;

    line-height: 1.15

}



.deposit-note {

    display: flex;

    align-items: stretch;

    background-color: transparent;

    padding: 0

}



.deposit-note.standard-form-note span {

    color: #363565

}



.deposit-note-icon {

    flex-basis: calc(100%/8);

    display: flex;

    justify-content: center;

    align-items: center;

    border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;

    padding: 10px;

    background: linear-gradient(to bottom,#787880,#42424f)

}



.deposit-note-icon img {

    width: 40px

}



.deposit-note-content {

    flex-basis: calc((100%/8)*7);

    background-color: #cbcbcb;

    color: #363565;

    padding: 10px;

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px

}



.deposit-note ul {

    padding-left: 25px

}



.deposit-note ul li {

    list-style: decimal

}



.predefined-deposit-amount-selection {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    gap: 5px

}



.predefined-deposit-amount-selection input[type="radio"] {

    visibility: hidden;

    position: absolute;

    pointer-events: none

}



.predefined-deposit-amount-selection label {

    flex-basis: calc((100% - 5px*7)/8);

    flex-grow: 0;

    flex-shrink: 0;

    text-align: center;

    padding: 10px;

    border-radius: 5px;

    background-color: #cbcbcb;

    cursor: pointer

}



.predefined-deposit-amount-selection input[type="radio"]+label {

    color: #000

}



.predefined-deposit-amount-selection input[type="radio"]:checked+label {

    background-color: #f3dd7f;

    background-image: linear-gradient(to bottom,#f3dd7f 0%,#b88416 100%);

    color: #fff

}



.predefined-deposit-amount-selection input[type="radio"]:disabled+label {

    display: none

}



.deposit-confirmation-content {

    display: flex;

    flex-direction: column;

    margin-top: 20px

}



.deposit-amount-range {

    font-size: 12px;

    margin-top: 6px;

    color: #d0b300

}



.deposit-amount-range span:not(:empty):before {

    content: attr(data-title)

}



.deposit-amount-range span:not(:empty)+span:not(:empty):before {

    content: " | " attr(data-title)

}