.bank-info {

    background-color: #d8d8d8;

    color: #888;

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

    padding: 15px 10px;

    border-radius: 5px;

    --qrcode-size: 150px

}



.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: 16px

}



.bank-info h2 {

    font-size: 20px;

    letter-spacing: 5px

}



.bank-info h3 {

    font-size: 14px

}



.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-wrap: wrap;

    justify-content: space-between;

    align-items: center

}



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

    height: 20px;

    width: auto

}



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

    margin-top: 10px;

    overflow: hidden

}



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

    text-align: center;

    margin-top: 10px;

    border-radius: 5px

}



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

    display: none

}



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

    width: var(--qrcode-size);

    margin: 10px 0

}



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

    font-size: 12px;

    text-align: center

}



.bank-info hr {

    border-top: 1px solid #000;

    border-bottom: 1px solid #393939;

    margin: 10px 0;

    width: 100%

}



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

    display: flex;

    justify-content: flex-end

}



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

    font-size: 12px;

    text-transform: uppercase

}



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

    margin-left: 10px

}



.bank-info[data-high-priority="true"] [data-bank-info="header"] 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"]) .recommended-for-instant-process {

    display: none

}



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

    width: 150px;

    height: auto

}



.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 {

    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: 95%;

    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:last-child {

    display: none

}



.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

}



.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;

    word-break: break-word

}



.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 {

    flex-shrink: 0;

    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;

    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 {

    color: #fff;

    padding-left: 5px;

    padding-right: 5px

}



.deposit-container .admin-fee-container {

    flex-grow: 1;

    display: flex;

    align-items: center;

    gap: 5px;

    color: #d0b300

}



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

    background: none;

    border: none;

    padding: 0;

    color: #fff

}



.deposit-container .copy-bank-account-button:not(:first-child) {

    margin-left: 5px

}



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

    color: #ddd

}



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

    font-size: 10px;

    padding: 3px 5px;

    text-transform: uppercase

}



.deposit-container .serial-number-deposit-note {

    margin-top: 10px

}



.deposit-container label+label {

    margin-left: 10px

}



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

    color: transparent

}



.deposit-container .standard-button-group .standard-secondary-button {

    border-radius: 5px;

    border: none

}



.deposit-container .deposit-form-group {
    background-color: var(--fixed-footer-bg);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px
}



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

    margin-bottom: 0

}



.bank-status-list {

    display: flex;

    flex-wrap: nowrap;

    overflow: auto;

    margin: 10px 20px

}



.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

}



.deposit-amount-container {

    background-color: #242424;

    border-radius: 5px

}



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

    background-color: #000

}



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

    display: flex

}



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

    flex-grow: 1

}



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

    width: 60px;

    background-color: #6a6a6a;

    border: #6a6a6a;

    color: #fff

}



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

    width: 35px

}



.deposit-amount-container [data-section="depo-amount"] 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

}



.deposit-note-icon {flex-basis: 20%;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, #606060, #121212);}



.deposit-note-icon img {

    width: 35px

}



.deposit-note-content {flex-basis: 80%;background-color: #5b0303;color: #ffffff;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

}



.balance-info-container {

    display: flex;

    flex-wrap: nowrap;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

    text-transform: uppercase

}



.balance-info-container>a {

    color: #3f51b5;

    font-size: 16px

}



.balance-info-container .total-balance {

    text-align: right;

    flex-grow: 1

}



.balance-info-container .total-balance>p {

    font-size: 12px;

    margin: 0

}



.balance-info-container .total-balance>span {

    color: #ff84ce

}



.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*3)/4);

    flex-grow: 0;

    flex-shrink: 0;

    text-align: center;

    padding: 5px;

    border-radius: 5px;

    background-color: #cbcbcb

}



.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: var(--normal-font);

    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)

}