@charset "UTF-8";

@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes slideUpIn {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes shake {
    0%,to {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.access-denied-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 898px;
    margin: 0 auto
}

.access-denied-alert {
    width: 100%;
    padding: 16px 24px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #2a66cd;
    background: #eff8ff
}

.access-denied, .access-denied-alert {
    display: flex;
    justify-content: center;
    gap: 12px
}

.access-denied {
    flex: 1 0 0
}

.access-denied-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0
}

.access-denied .title {
    color: #112026;
    text-align: right;
    font-size: 16px;
    font-weight: 600
}

.access-denied .description {
    color: #112026;
    text-align: right;
    font-size: 13px;
    font-weight: 400
}

.access-denied-btn {
    display: flex;
    min-width: 193px;
    height: 48px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 5px;
    color: #000;
    border: 1.5px solid #000;
    font-size: 16px;
    font-weight: 600
}

    .access-denied-btn:hover {
        color: #000;
        box-shadow: 0 2px 8px rgba(4,68,90,.1);
        transform: translateY(-1px)
    }

@media (max-width:768px) {
    .access-denied-alert {
        flex-direction: column
    }

    .access-denied-btn {
        display: flex;
        width: 100%
    }
}

.valid-account-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 898px;
    margin: 0 auto
}

.valid-account-alert {
    width: 100%;
    padding: 16px 24px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #dc2626;
    background: #fcf7f7
}

.valid-account-alert, .valid-account-content {
    display: flex;
    justify-content: center;
    gap: 12px
}

.valid-account-content {
    flex: 1 0 0
}

.valid-account-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0
}

.valid-account-title {
    color: #112026;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px
}

.valid-account-description {
    color: #112026;
    text-align: right;
    font-size: 13px;
    font-weight: 400
}

.btn-user-account {
    display: flex;
    min-width: 193px;
    height: 48px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 5px;
    color: #000;
    border: 1.5px solid #000;
    font-size: 16px;
    font-weight: 600;
    transition: all .2s ease
}

    .btn-user-account:hover {
        color: #000;
        box-shadow: 0 2px 8px rgba(4,68,90,.1);
        transform: translateY(-1px)
    }

    .btn-user-account:active {
        transform: translateY(0)
    }

.btn-support {
    display: flex;
    width: 100%;
    padding: 12px;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    border: 1px solid #ef6820;
    background: #ef6820;
    color: #112026;
    transition: all .2s ease
}

    .btn-support:hover {
        color: inherit;
        box-shadow: 0 2px 8px rgba(4,68,90,.1);
        transform: translateY(-1px)
    }

    .btn-support:active, .btn-support:focus {
        box-shadow: none !important;
        transform: translateY(0)
    }

    .btn-support .support-text {
        font-size: 14px;
        font-weight: 400
    }

    .btn-support .support-number {
        font-size: 14px;
        font-weight: 700;
        margin-top: 5px
    }

    .btn-support i {
        width: 16px;
        height: 16px
    }

@media (max-width:768px) {
    .valid-account-alert {
        flex-direction: column;
        padding: 12px
    }

    .btn-user-account {
        display: flex;
        width: 100%;
        min-width: auto
    }
}

@media (max-width:480px) {
    .valid-account-description {
        font-size: 13px
    }

    .btn-support, .btn-user-account {
        font-size: 14px;
        height: 44px
    }
}

.support-phone-box {
    display: flex;
    width: 100%;
    padding: 12px;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    border: 1px solid #f5ba06;
    background: #ffc107;
    color: #112026;
    text-decoration: none;
    transition: all .2s ease
}

    .support-phone-box:hover {
        color: inherit;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(4,68,90,.1);
        transform: translateY(-1px)
    }

    .support-phone-box:active, .support-phone-box:focus {
        box-shadow: none !important;
        color: inherit;
        text-decoration: none;
        transform: translateY(0)
    }

    .support-phone-box .support-phone-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        line-height: normal
    }

    .support-phone-box .support-phone-label {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2
    }

    .support-phone-box .support-phone-number {
        font-size: 14px;
        font-weight: 700;
        margin-top: 5px;
        line-height: 1.2
    }

.support-phone-chevron, .support-phone-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .support-phone-chevron svg, .support-phone-icon svg {
        width: 100%;
        height: 100%
    }

@media (max-width:768px) {
    .support-phone-box {
        padding: 10px;
        gap: 6px
    }

        .support-phone-box .support-phone-chevron, .support-phone-box .support-phone-icon {
            width: 16px;
            height: 16px
        }
}

@media (max-width:480px) {
    .support-phone-box {
        padding: 8px
    }
}

.modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    height: auto
}

    .modal-dialog-bottom .modal-content {
        display: flex;
        flex-direction: column;
        border-radius: 15px 15px 0 0;
        padding: 16px;
        border: none;
        box-shadow: 0 -5px 20px rgba(4,68,90,.1);
        -webkit-animation: slideUpIn .3s ease-out;
        animation: slideUpIn .3s ease-out;
        max-height: 80vh;
        overflow: hidden
    }

    .modal-dialog-bottom .modal-header {
        padding: 0 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: none
    }

    .modal-dialog-bottom .header-modal-title {
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        text-align: right;
        vertical-align: middle;
        margin-bottom: 0
    }

    .modal-dialog-bottom .modal-title {
        color: #323232;
        font-feature-settings: "liga" off,"clig" off;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 8px
    }

    .modal-dialog-bottom .modal-message {
        color: #848687;
        font-feature-settings: "liga" off,"clig" off;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        text-align: center
    }

    .modal-dialog-bottom .modal-icon {
        margin-top: 20px;
        margin-bottom: 16px;
        display: flex;
        align-content: center;
        justify-content: center
    }

    .modal-dialog-bottom .close {
        font-size: 20px;
        color: #848687;
        margin: 0;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        width: 20px;
        height: 20px
    }

    .modal-dialog-bottom .modal-body {
        max-height: 60vh;
        overflow-y: auto;
        text-align: justify;
        margin-left: -15px;
        padding-left: 20px;
        padding-right: 0;
        padding-block: 20px
    }

    .modal-dialog-bottom .modal-footer {
        border: none;
        padding: 20px 0 0
    }

        .modal-dialog-bottom .modal-footer button {
            direction: rtl
        }

        .modal-dialog-bottom .modal-footer > :not(:last-child) {
            margin-right: 0
        }

.modal.fade .modal-dialog-bottom {
    transform: translateY(100%);
    transition: transform .3s ease-out
}

.modal.show .modal-dialog-bottom {
    transform: translateY(0)
}

@media (min-width:999px) {
    .modal-dialog-bottom {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%,-50%) !important;
        width: 532px !important;
        max-width: 90vw !important;
        height: auto !important;
        margin: 0 !important
    }

        .modal-dialog-bottom .modal-content {
            border-radius: 15px !important;
            max-height: 80vh !important
        }

    .modal.fade .modal-dialog-bottom {
        transform: translate(-50%,-50%) scale(.8) !important;
        transition: transform .3s ease-out !important
    }

    .modal.show .modal-dialog-bottom {
        transform: translate(-50%,-50%) scale(1) !important
    }
}

@keyframes slideUpIn {
    0% {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.amount-chips {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap
}

    .amount-chips .amount-chip {
        cursor: pointer;
        transition: all .2s ease;
        white-space: nowrap;
        display: flex;
        height: 24px;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 29px;
        background-color: #ecf1f3;
        color: #5a5c5d;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border: none
    }

        .amount-chips .amount-chip:focus {
            outline: none
        }

        .amount-chips .amount-chip:hover {
            background-color: #e9ecef;
            border-color: #6b7280
        }

        .amount-chips .amount-chip:active {
            transform: translateY(1px)
        }

.select-account-wrapper .label {
    color: #112026;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0
}

.select-account-wrapper .info-text {
    color: #848687;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0
}

.select-account-wrapper .select-box {
    width: 100%;
    margin-block: 6px;
    display: flex;
    height: 48px;
    padding: 8px 12px;
    align-items: center;
    gap: 12px;
    border-radius: 2px;
    border: .5px solid #112026;
    background: #fff;
    color: #112026;
    cursor: pointer;
    transition: all .2s ease
}

    .select-account-wrapper .select-box:focus, .select-account-wrapper .select-box:hover {
        border: .5px solid #007bff;
        box-shadow: 0 0 3px 2px rgba(0,123,255,.15)
    }

    .select-account-wrapper .select-box:focus {
        outline: none
    }

    .select-account-wrapper .select-box:active {
        transform: translateY(0)
    }

.select-account-wrapper .select-box-content {
    display: flex;
    flex-direction: column;
    flex: 1
}

.select-account-wrapper .select-box .select-account-text {
    font-size: 14px;
    font-weight: 400
}

.select-account-wrapper .select-box .arrow-icon, .select-account-wrapper .select-box .logo-bank {
    height: 20px;
    width: 20px;
    margin-right: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.select-account-wrapper .select-box .selectedAccountName {
    color: #112026;
    font-size: 14px;
    font-weight: 400
}

.select-account-wrapper .select-box .selectedAccountNumber {
    color: #848687;
    font-size: 13px;
    font-weight: 400
}

.modal .source-account-item {
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    border-radius: 5px;
    border: 1px solid #babcbd;
    background: transparent;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all .2s ease
}

.modal .source-account-item--content {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.modal .source-account-item--avatar {
    display: flex;
    align-items: center;
    gap: 6px
}

    .modal .source-account-item--avatar .bank-title {
        font-weight: 600;
        font-size: 14px;
        text-align: right
    }

.modal .source-account-item--info {
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .modal .source-account-item--info .account-info {
        text-align: right
    }

        .modal .source-account-item--info .account-info small {
            font-size: 12px;
            font-weight: 400;
            text-align: right;
            color: #848687
        }

        .modal .source-account-item--info .account-info span {
            font-size: 14px;
            font-weight: 500;
            text-align: right;
            display: inline-block;
            color: #112026
        }

.modal .source-account-item:hover {
    background-color: #f1faff !important;
    border-color: #007599 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(4,68,90,.1)
}

.modal .source-account-item:active {
    transform: translateY(0)
}

.modal .source-account-item.selected-account {
    background-color: #f1faff !important;
    border-color: #007599 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(4,68,90,.1)
}

.modal .source-account-item:last-child {
    margin-bottom: 0
}

.input-wrapper .label {
    color: #112026;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0
}

.input-wrapper .amount-input-container {
    position: relative;
    margin: 6px 0
}

    .input-wrapper .amount-input-container .currency-label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        font-weight: 400;
        pointer-events: none;
        border-right: .5px solid #000;
        padding-right: 10px;
        color: #848687
    }

.input-wrapper .amount-input {
    width: 100%;
    height: 48px;
    padding: 14px 12px;
    border: .3px solid #112026;
    border-radius: 3px;
    font-size: 14px;
    text-align: right
}

    .input-wrapper .amount-input::-moz-placeholder {
        color: #babcbd;
        font-size: 14px;
        font-weight: 400
    }

    .input-wrapper .amount-input:-ms-input-placeholder {
        color: #babcbd;
        font-size: 14px;
        font-weight: 400
    }

    .input-wrapper .amount-input::placeholder {
        color: #babcbd;
        font-size: 14px;
        font-weight: 400
    }

    .input-wrapper .amount-input:focus {
        outline: none;
        border-color: #007bff
    }

    .input-wrapper .amount-input.error {
        border-color: #dc2626
    }

.input-wrapper .amount-error {
    color: #dc2626;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
    text-align: right
}

.input-wrapper .amount-words {
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
    color: #112026
}

.input-wrapper .amount-chip {
    flex: 1
}

@media screen and (max-width:576px) {
    .input-wrapper .amount-chip {
        flex: 1 1 45%
    }
}

.alert-box {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    margin-bottom: 20px
}

    .alert-box i {
        flex-shrink: 0;
        font-size: 17px
    }

    .alert-box .alert-content {
        flex: 1
    }

        .alert-box .alert-content h5 {
            color: var(--on-surface-high-emphasis-950,#112026);
            font-weight: 700
        }

        .alert-box .alert-content h5, .alert-box .alert-content p {
            text-align: right;
            font-size: 14px;
            font-style: normal;
            line-height: normal;
            margin: 0
        }

        .alert-box .alert-content p {
            color: var(--on-surface-med-emphasis-900,#5a5c5d);
            font-weight: 400
        }

        .alert-box .alert-content ul {
            margin-right: 16px;
            margin-bottom: 0;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            color: #112026
        }

    .alert-box.alert-warning {
        border: 1px solid #ef6820 !important;
        background-color: #fef6ee !important
    }

        .alert-box.alert-warning i {
            color: #ef6820 !important
        }

    .alert-box.alert-primary {
        border: 1px solid #0d6efd !important;
        background-color: #cfe2ff !important
    }

        .alert-box.alert-primary i {
            color: #0d6efd !important
        }

    .alert-box.alert-danger {
        border: 1px solid var(--system-negative-600,#d92d20) !important;
        background-color: var(--system-negative-light-50,#fef3f2) !important
    }

        .alert-box.alert-danger i {
            color: var(--system-negative-600,#d92d20) !important
        }

    .alert-box.alert-success {
        border: 1px solid #198754 !important;
        background-color: #d1e7dd !important
    }

        .alert-box.alert-success i {
            color: #198754 !important
        }

    .alert-box.alert-info {
        border: 1px solid #0dcaf0 !important;
        background-color: #cff4fc !important
    }

        .alert-box.alert-info i {
            color: #0dcaf0 !important
        }

.section {
    display: flex;
    max-width: 898px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto 12px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 1px 0 rgba(4,68,90,.2)
}

    .section > .section-header {
        display: flex;
        padding: 14px 0 10px;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        background: #e5e7e8;
        border-radius: 5px 5px 0 0
    }

        .section > .section-header h3 {
            color: #112026;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            margin: 0
        }

.btn-component {
    display: inline-flex;
    gap: 12px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .3s ease;
    text-decoration: none;
    font-style: normal;
    line-height: normal;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    direction: rtl;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.btn-component, .btn-component__icon {
    align-items: center;
    justify-content: center
}

.btn-component__icon {
    display: flex;
    flex-shrink: 0
}

    .btn-component__icon i {
        line-height: 1
    }

.btn-component__text {
    white-space: nowrap;
    line-height: 1
}

.btn-component--size-64 {
    height: 64px;
    padding: 16px;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500
}

    .btn-component--size-64.btn-component--icon-only {
        width: 64px;
        border-radius: 40px;
        padding: 16px
    }

    .btn-component--size-64 .btn-component__hover-overlay {
        top: -35px;
        width: 134px;
        height: 134px
    }

.btn-component--size-56 {
    height: 56px;
    padding: 12px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500
}

    .btn-component--size-56.btn-component--icon-only {
        width: 56px;
        border-radius: 40px;
        padding: 12px
    }

.btn-component--size-48 {
    height: 48px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700
}

    .btn-component--size-48.btn-component--icon-only {
        width: 48px;
        border-radius: 40px;
        padding: 8px 12px
    }

.btn-component--size-40 {
    height: 40px;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700
}

    .btn-component--size-40.btn-component--icon-only {
        width: 40px;
        border-radius: 40px;
        padding: 4px 12px
    }

.btn-component--size-36 {
    height: 36px;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400
}

    .btn-component--size-36.btn-component--icon-only {
        width: 40px;
        border-radius: 40px;
        padding: 4px 12px
    }

.btn-component--fill {
    background-color: var(--main-button,#28a745);
    color: var(--Surface-Default,#fff);
    border: none
}

    .btn-component--fill:hover:not(:disabled) {
        background-color: #23923d;
        color: var(--Surface-Default,#fff)
    }

    .btn-component--fill:active:not(:disabled) {
        background-color: #208637;
        transform: scale(.98)
    }

    .btn-component--fill:focus {
        outline: unset
    }

.btn-component--gold {
    background: var(--Brand-Gold,#f0cc49);
    color: var(--On-Surface-High-Emphasis,#112026);
    border: none
}

    .btn-component--gold:hover:not(:disabled) {
        background-color: #eec531;
        color: var(--On-Surface-High-Emphasis,#112026)
    }

    .btn-component--gold:active:not(:disabled) {
        background-color: #edc123;
        transform: scale(.98)
    }

    .btn-component--gold:focus {
        outline: unset
    }

.btn-component--outline {
    background-color: transparent;
    color: #112026;
    border: 1.5px solid #dee1e2
}

    .btn-component--outline:hover:not(:disabled) {
        background-color: #f5f5f5;
        border-color: #c4c7c9;
        color: #112026
    }

    .btn-component--outline:active:not(:disabled) {
        background-color: #e5e7e8;
        transform: scale(.98)
    }

    .btn-component--outline:focus {
        outline: unset
    }

.btn-component--destructive {
    background-color: transparent;
    color: var(--system-negative-600,#d92d20);
    border: 1px solid var(--system-negative-600,#d92d20)
}

    .btn-component--destructive:hover:not(:disabled) {
        background-color: rgba(217,45,32,.05);
        color: var(--system-negative-600,#d92d20);
        border-color: #c3281d
    }

    .btn-component--destructive:active:not(:disabled) {
        background-color: rgba(217,45,32,.1);
        transform: scale(.98)
    }

    .btn-component--destructive:focus {
        outline: unset
    }

.btn-component--disabled, .btn-component:disabled {
    background-color: var(--Surface-Disabled,#e5e7e8);
    color: var(--On-Surface-Disabled,#8f9192);
    border: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1
}

    .btn-component--disabled:hover, .btn-component:disabled:hover {
        background-color: var(--Surface-Disabled,#e5e7e8)
    }

.btn-component--full-width {
    width: 100%;
    display: flex
}

.btn-component[href]:hover {
    text-decoration: none
}

.btn-component[href][aria-disabled=true] {
    pointer-events: none;
    cursor: not-allowed
}

@media (max-width:576px) {
    .btn-component--size-64 {
        height: 56px;
        padding: 12px;
        font-size: 18px
    }

    .btn-component--size-56 {
        height: 48px;
        padding: 8px 12px;
        font-size: 16px
    }
}

.btn-component-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.btn-component-group--vertical {
    flex-direction: column
}

    .btn-component-group--vertical .btn-component {
        width: 100%
    }

.btn-component-group--center {
    justify-content: center
}

.btn-component-group--end {
    justify-content: flex-end
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {
    0%,to {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

* {
    box-sizing: border-box
}

.auth__slider {
    background-color: #f7ca18;
    width: 100%;
    height: 100vh
}

    .auth__slider .carousel-indicators {
        padding: 0;
        bottom: 90px
    }

@media (prefers-color-scheme:dark) {
    .auth__slider {
        background-color: #ffc107 !important;
        color: #000 !important
    }
}

.auth__carousel-inner, .auth__carousel-item {
    height: 100%
}

    .auth__carousel-item:nth-child(2):before, .auth__carousel-item:nth-child(3):before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(/css/images/tlyn-white.png);
        background-size: 500px;
        background-repeat: no-repeat;
        background-position: center -20px;
        opacity: .4;
        z-index: -1
    }

    .auth__carousel-item:nth-child(3):before {
        background-position: 50% calc(100% + 20px)
    }

.auth__carousel-content {
    height: calc(100% - 200px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    text-align: center
}

    .auth__carousel-content .title {
        font-weight: 700;
        margin-top: 16px;
        text-align: center;
        color: inherit !important
    }

.auth__next-button {
    position: absolute;
    width: 100%;
    text-align: center;
    max-width: 500px;
    left: 0;
    right: 0;
    margin: 0 auto 100px;
    display: block
}

    .auth__next-button button {
        border-radius: 10px !important
    }

.auth__features {
    padding: 0 30px;
    font-size: 14px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 40px;
    opacity: 0;
    text-align: center;
    transition: all .3s ease-in-out
}

    .auth__features.active {
        opacity: 1
    }

.auth__trust {
    position: absolute;
    top: 0;
    left: -320px;
    width: 300px;
    height: 200px;
    transition: all .3s ease-in-out
}

    .auth__trust.active {
        left: -20px
    }

    .auth__trust .menu {
        transform: rotate(90deg);
        position: absolute;
        left: 220px;
        top: 80px;
        background-color: #42454b;
        width: 200px;
        height: 40px;
        color: hsla(0,0%,100%,.6);
        padding: 5px 15px;
        border-radius: 10px 10px 0 0;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        cursor: pointer
    }

    .auth__trust .content {
        line-height: 25px;
        background-color: rgba(66,69,75,.6980392156862745);
        color: #fff;
        padding: 10px;
        width: calc(100vw - 60px);
        text-align: center;
        height: 100%
    }

    .auth__trust .content, .login__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

.login__container {
    min-height: inherit;
    background-color: #fff;
    box-sizing: border-box
}

    .login__container.registration-mode {
        height: auto;
        max-height: none;
        overflow-y: visible;
        justify-content: flex-start;
        padding-top: 40px
    }

.login__form {
    width: 100%;
    max-width: 470px;
    display: flex;
    flex-direction: column;
    padding: 0 68px
}

    .login__form.keyboard-mode {
        min-height: calc(var(--vh, 1vh)*100 - 120px)
    }

    .login__form.registration-active {
        margin-bottom: 100px
    }

    .login__form > div {
        position: relative;
        width: 100%
    }

.login__header {
    text-align: center;
    margin-bottom: 32px
}

.login__logo {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
    object-fit: contain
}

.login__logo-wrapper {
    margin-bottom: 24px
}

.login__title {
    font-size: 18px;
    font-weight: 700;
    color: #112026;
    margin: 0;
    line-height: 1.4
}

.login__link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    display: inline-block;
    cursor: pointer;
    transition: color .2s ease-in-out
}

.login__link-wrapper {
    margin-top: 7px
}

.login__link span {
    color: #848687;
    font-size: 13px
}

.login__link:hover {
    color: #2563eb;
    text-decoration: underline
}

.input__section {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2
}

.input__label {
    font-size: 14px;
    font-weight: 400 !important;
    color: #112026;
    margin: 0 0 6px;
    text-align: right
}

    .input__label span {
        font-size: 14px;
        font-weight: 400;
        color: #848687
    }

.input__wrapper {
    position: relative
}

.input__info {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    font-weight: 400 !important
}

.phone__input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    border: 1px solid #d1d5db;
    color: #374151;
    transition: all .2s ease-in-out;
    text-align: center;
    direction: ltr
}

    .phone__input:focus {
        outline: none;
        border-color: #66abe4
    }

    .phone__input.error, .phone__input.error:focus {
        border-color: #d92d20
    }

    .phone__input.disabled-phone, .phone__input:disabled {
        box-shadow: inset 0 0 0 1000px #e9ecef !important;
        -webkit-box-shadow: 0 0 0 1000px #e9ecef inset !important;
        -webkit-text-fill-color: #848687 !important;
        cursor: not-allowed !important;
        border-color: #5a5c5d !important
    }

.help__text {
    color: #6b7280
}

.error__message, .help__text {
    font-size: 12px;
    line-height: 1.4
}

.error__message {
    color: #d92d20
}

.otp__section {
    margin-top: 24px;
    -webkit-animation: slideDown .3s ease-out;
    animation: slideDown .3s ease-out;
    position: relative;
    z-index: 3
}

    .otp__section .input__label #timer-text {
        color: #112026;
        font-size: 12px;
        font-weight: 700
    }

    .otp__section .input__label #resend-btn {
        font-weight: 400;
        font-size: 12px;
        color: #1570ef;
        cursor: pointer;
        transition: all .2s ease-in-out
    }

        .otp__section .input__label #resend-btn.sending {
            color: #9ca3af;
            cursor: not-allowed;
            opacity: .7
        }

.otp__inputs {
    justify-content: space-between;
    gap: 8px;
    direction: ltr
}

.otp__digit, .otp__inputs {
    display: flex;
    align-items: center
}

.otp__digit {
    width: 38px;
    height: 42px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 8px 8px;
    color: #374151;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 40px;
    justify-content: center;
    transition: all .2s ease-in-out
}

    .otp__digit::-moz-placeholder {
        color: #dee2e6;
        vertical-align: middle
    }

    .otp__digit:-ms-input-placeholder {
        color: #dee2e6;
        vertical-align: middle
    }

    .otp__digit::placeholder {
        color: #dee2e6;
        vertical-align: middle
    }

    .otp__digit:focus {
        outline: none;
        border-color: #66abe4
    }

    .otp__digit.error {
        border-color: #d92d20;
        background-color: #fef2f2;
        -webkit-animation: shake .5s ease-in-out;
        animation: shake .5s ease-in-out
    }

.otp__separator {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
    margin: 0 2px
}

.otp__info {
    margin-top: 6px;
    text-align: right
}

    .otp__info .help__text {
        color: #848687;
        font-size: 13px;
        font-weight: 400;
        line-height: normal
    }

.resend__link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 12px;
    margin-top: 4px;
    display: inline-block
}

    .resend__link:hover {
        color: #2563eb;
        text-decoration: underline
    }

.password__section {
    -webkit-animation: slideDown .3s ease-out;
    animation: slideDown .3s ease-out;
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
    margin-bottom: 20px
}

    .password__section * {
        box-sizing: border-box
    }

.password__wrapper {
    position: relative
}

.password__input {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    border: 1px solid #d1d5db;
    color: #374151;
    transition: all .2s ease-in-out;
    padding: 12px 16px 12px 45px
}

    .password__input:focus {
        outline: none;
        border-color: #66abe4
    }

    .password__input.error, .password__input.error:focus {
        border-color: #d92d20
    }

.password__toggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 18px;
    padding: 4px;
    z-index: 10;
    transition: color .2s ease-in-out
}

    .password__toggle:hover {
        color: #3b82f6
    }

    .password__toggle:focus {
        outline: none;
        color: #66abe4
    }

.password__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.password__requirements {
    margin-top: 8px
}

.forgot-password__link {
    color: #1570ef;
    font-size: 12px;
    font-weight: 700;
    line-height: normal
}

.national__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.requirement__item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px
}

    .requirement__item:last-child {
        margin-bottom: 0
    }

    .requirement__item.valid .requirement__circle {
        border: 1px solid #099250
    }

        .requirement__item.valid .requirement__circle i {
            color: #099250
        }

            .requirement__item.valid .requirement__circle i:before {
                content: "\F00C"
            }

    .requirement__item.valid .requirement__text {
        color: #099250
    }

    .requirement__item.invalid .requirement__circle {
        border: 1px solid #d92d20
    }

        .requirement__item.invalid .requirement__circle i {
            color: #d92d20
        }

            .requirement__item.invalid .requirement__circle i:before {
                content: "\F00D"
            }

    .requirement__item.invalid .requirement__text {
        color: #d92d20
    }

.requirement__circle {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    transition: all .3s ease-in-out
}

    .requirement__circle i {
        font-size: 10px;
        color: transparent;
        transition: all .3s ease-in-out
    }

.requirement__text {
    color: #5a5c5d;
    font-size: 12px;
    font-weight: 400;
    transition: color .3s ease-in-out
}

.registration__section {
    -webkit-animation: slideDown .3s ease-out;
    animation: slideDown .3s ease-out;
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%
}

    .registration__section * {
        box-sizing: border-box
    }

    .registration__section .field-group {
        margin-bottom: 16px
    }

        .registration__section .field-group:last-child {
            margin-bottom: 0
        }

.registration__fields {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.registration__login-section {
    margin-top: 8px;
    text-align: center
}

.registration__login-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color .2s ease-in-out
}

    .registration__login-link:hover {
        color: #2563eb;
        text-decoration: underline
    }

.field__group {
    display: flex;
    flex-direction: column
}

    .field__group .input__label {
        margin-bottom: 6px
    }

    .field__group .input__wrapper {
        margin-bottom: 0
    }

.disabled__input {
    background-color: #f9fafb !important;
    color: #6b7280 !important;
    cursor: not-allowed
}

.terms__section {
    margin-bottom: 14px;
    text-align: right
}

.terms__text {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4
}

.terms__link {
    color: #3b82f6;
    text-decoration: none
}

    .terms__link:hover {
        cursor: pointer;
        text-decoration: underline
    }

.reset-password__section {
    -webkit-animation: slideDown .3s ease-out;
    animation: slideDown .3s ease-out;
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%
}

    .reset-password__section * {
        box-sizing: border-box
    }

.reset-password__fields {
    display: flex;
    flex-direction: column;
    gap: 16px
}

    .reset-password__fields .field-group {
        margin-bottom: 16px
    }

.reset-password__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.back-to-login__btn {
    width: 100%;
    height: 48px;
    background-color: transparent;
    color: #3b82f6;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center
}

    .back-to-login__btn:hover {
        background-color: #f3f4f6;
        border-color: #2563eb;
        color: #2563eb
    }

    .back-to-login__btn:active {
        background-color: #e5e7e8;
        transform: translateY(1px)
    }

.submit__section {
    border-radius: 5px;
    margin-top: 100px;
    transition: margin-top .3s ease-in-out
}

    .submit__section.registration-mode {
        margin-top: 42px
    }

    .submit__section.keyboard-open {
        margin-top: 40px;
        margin-bottom: 20px
    }

.submit__btn {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    transition: all .2s ease-in-out;
    width: 100%;
    height: 48px;
    background-color: #3b82f6;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl
}

    .submit__btn:disabled {
        background-color: #d1d5db;
        color: #9ca3af;
        cursor: not-allowed
    }

    .submit__btn:hover {
        background-color: #2563eb
    }

    .submit__btn:active {
        background-color: #1d4ed8;
        transform: translateY(1px)
    }

    .submit__btn:focus {
        outline: none
    }

.btn__loading {
    display: flex;
    align-items: center;
    gap: 8px
}

    .btn__loading i {
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite
    }

.phone__toast {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-20px);
    transition: all .3s ease-out;
    pointer-events: none
}

    .phone__toast.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto
    }

.toast__content {
    padding: 12px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 8px;
    direction: rtl;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    max-width: 328px;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid #d92d20;
    background-color: #fef2f2;
    transition: all .2s ease-in-out
}

    .toast__content:hover {
        background-color: #fee2e2;
        transform: translateY(-1px);
        box-shadow: 0 12px 30px rgba(0,0,0,.15)
    }

    .toast__content.success {
        border: 1px solid #099250;
        background-color: #f0fdf4
    }

        .toast__content.success:hover {
            background-color: #dcfce7;
            transform: translateY(-1px);
            box-shadow: 0 12px 30px rgba(0,0,0,.15)
        }

    .toast__content:active {
        transform: translateY(0)
    }

    .toast__content .fa-exclamation-circle {
        color: #d92d20;
        font-size: 20px
    }

    .toast__content.success .fa-check-circle {
        color: #099250;
        font-size: 20px
    }

.toast__message {
    color: #112026;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
    flex: 1
}

.dev__message {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    -webkit-animation: slideDown .3s ease-out;
    animation: slideDown .3s ease-out
}

.dev__info {
    background-color: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe
}

.dev__error {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca
}

.biometric__section {
    margin-top: 16px;
    text-align: center
}

.biometric__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.biometric__text {
    font-size: 14px;
    color: #6b7280;
    margin: 0
}

.biometric__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f3f4f6;
    color: #3b82f6;
    text-decoration: none;
    transition: all .2s ease-in-out
}

    .biometric__btn:hover {
        background-color: #e5e7e8;
        color: #2563eb;
        text-decoration: none
    }

    .biometric__btn i {
        font-size: 24px
    }

.support__section {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #ecf1f3;
    text-align: center
}

.support__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #3b82f6;
    font-size: 14px;
    transition: color .2s ease-in-out
}

    .support__link:hover {
        color: #2563eb;
        text-decoration: none
    }

.support__icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233B82F6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat
}

.support__text {
    font-weight: 400
}

.support__number {
    font-weight: 500;
    direction: ltr;
    display: inline-block
}

body {
    height: 100vh !important
}

@media (max-height:700px) {
    .registration__fields .field__group {
        margin-bottom: 12px
    }

    .terms__section {
        margin: 12px 0 8px
    }

    .login__link {
        margin-top: 8px
    }
}

@media (max-height:600px) {
    .registration__fields .field__group {
        margin-bottom: 10px
    }
}

@media (max-width:480px) {
    .login__form {
        max-width: 100%;
        min-height: calc(100vh - 80px)
    }

        .login__form.keyboard-mode {
            min-height: calc(var(--vh, 1vh)*100 - 80px);
            justify-content: space-between
        }

    .login__title {
        font-size: 16px
    }

    .submit__section.keyboard-open {
        margin-top: 30px;
        margin-bottom: 20px;
        position: relative
    }

    .phone__toast {
        top: 15px;
        right: 15px;
        left: 15px
    }

    .toast__content {
        padding: 14px 16px;
        border-radius: 10px
    }

    .toast__message {
        font-size: 13px
    }

    .registration__fields {
        gap: 12px
    }

    .field__group .input__label {
        margin-bottom: 4px
    }
}

@media (max-width:360px) {
    .submit__section {
        margin-top: 80px
    }

        .submit__section.registration-mode {
            margin-top: 32px
        }

        .submit__section.keyboard-open {
            margin-top: 20px
        }
}

@media (max-width:320px) {
    .login__form {
        padding: 0 16px
    }
}

@media (max-height:600px) and (orientation:landscape) {
    .login__container {
        padding-top: 20px;
        justify-content: center
    }

    .login__form {
        min-height: calc(100vh - 40px)
    }

        .login__form.keyboard-mode {
            min-height: calc(var(--vh, 1vh)*100 - 40px)
        }

    .submit__section {
        margin-top: 60px
    }

        .submit__section.registration-mode {
            margin-top: 28px
        }

        .submit__section.keyboard-open {
            margin-top: 20px
        }
}

@supports (-webkit-touch-callout:none) {
    :root {
        --ios-100vh: -webkit-fill-available
    }

    .login__container {
        min-height: -webkit-fill-available
    }

    .login__form {
        min-height: calc(var(--ios-100vh) - 120px)
    }

        .login__form.keyboard-mode {
            min-height: calc(var(--vh, 1vh)*100 - 120px)
        }
}

.content-wrapper > .content {
    padding: 12px
}

.content-wrapper .container-fluid {
    padding: 0
}

.withdrawal-form-wrapper {
    width: 100%;
    background: #fff;
    padding: 20px 24px 28px;
    border-radius: 0 0 5px 5px
}

@media (max-width:480px) {
    .withdrawal-form-wrapper {
        padding: 12px
    }
}

.withdrawal-form-wrapper .withdrawalBtn {
    margin-top: 24px
}

.withdrawal-form {
    max-width: 440px;
    width: 100%;
    margin: 0 auto
}

.withdrawal-form-inputs .label {
    color: #112026;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.withdrawal-form-inputs .info-text {
    color: #848687;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.withdrawal-form-inputs .btn-success {
    width: 100%;
    padding-block: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    height: 40px;
    border-radius: 5px;
    margin-top: 32px
}

    .withdrawal-form-inputs .btn-success:disabled {
        background: #e5e7e8;
        color: #8f9192;
        border-color: #e5e7e8
    }

.withdrawal-amount-wrapper {
    margin-bottom: 20px
}

    .withdrawal-amount-wrapper .amount-chip {
        flex: 1
    }

@media (max-width:331px) {
    .withdrawal-amount-wrapper .amount-chip {
        flex: 1 1 45%
    }
}

.withdrawal-modal-btn, .withdrawal .add-new-card-btn {
    display: flex;
    height: 48px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    gap: 12px
}

.credit-balance {
    display: flex;
    padding: 8px;
    justify-content: space-between;
    align-items: center;
    flex-flow: wrap;
    gap: 16px;
    border-radius: 5px;
    color: #112026;
    margin-bottom: 8px;
    background: #f1faff
}

    .credit-balance p {
        margin: 0;
        font-style: normal;
        line-height: normal
    }

    .credit-balance .title {
        font-size: 14px;
        font-weight: 400
    }

@media (max-width:320px) {
    .credit-balance .title {
        font-size: 13px
    }
}

.credit-balance .balance {
    font-size: 16px;
    font-weight: 700
}

    .credit-balance .balance span {
        font-weight: 400;
        font-size: 13px
    }

@media (max-width:320px) {
    .credit-balance .balance {
        font-size: 14px
    }
}

.withdrawal-history {
    background: #fff;
    padding: 12px;
    margin-bottom: 55px
}

.withdrawal-history-item-wrapper {
    max-width: 440px;
    width: 100%;
    margin: 0 auto
}

    .withdrawal-history-item-wrapper h3 {
        color: #112026;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 20px
    }

    .withdrawal-history-item-wrapper .history-item-empty {
        gap: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 74px
    }

        .withdrawal-history-item-wrapper .history-item-empty span {
            display: flex;
            padding: 14px;
            align-items: center;
            border-radius: 68px;
            background: linear-gradient(180deg,hsla(0,0%,94.9%,.3),hsla(0,0%,76.9%,.3))
        }

        .withdrawal-history-item-wrapper .history-item-empty p {
            color: #8f9192;
            text-align: center;
            font-size: 14px;
            font-weight: 400
        }

.history-search-wrapper {
    margin-bottom: 16px
}

.history-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px
}

.history-item-card {
    background: #fff;
    border-radius: 5px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    border: 1px solid #dee1e2
}

    .history-item-card:hover {
        border-color: #848687;
        transform: translateY(-1px);
        box-shadow: 0 0 2px 2px rgba(0,123,255,.25098039215686274)
    }

.history-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.history-item-right {
    text-align: right
}

.history-item-left {
    text-align: left
}

.history-item-amount {
    font-size: 14px;
    font-weight: 400;
    color: #112026;
    margin-bottom: 4px
}

.history-item-bank {
    font-size: 12px;
    font-weight: 400;
    color: #848687
}

.history-item-status {
    margin-bottom: 4px
}

.history-item-date {
    font-size: 12px;
    font-weight: 400;
    color: #8f9192
}

.history-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .history-item-arrow .fa-chevron-left {
        color: #007599;
        height: 16px;
        width: 16px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center
    }

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px
}

.search-form {
    width: 100%
}

.search-input-container {
    position: relative;
    width: 100%
}

.search-input {
    width: 100%;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid #babcbd;
    border-radius: 2px;
    background: #fff;
    font-size: 14px;
    color: #112026
}

    .search-input::-moz-placeholder {
        color: #babcbd;
        font-size: 12px;
        font-weight: 400
    }

    .search-input:-ms-input-placeholder {
        color: #babcbd;
        font-size: 12px;
        font-weight: 400
    }

    .search-input::placeholder {
        color: #babcbd;
        font-size: 12px;
        font-weight: 400
    }

    .search-input:focus {
        outline: none;
        border-color: #007bff
    }

.search-clear, .search-icon {
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #848687;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 42px;
    height: 95%;
    background: #fff;
    font-size: 14px
}

    .search-clear:hover, .search-icon:hover {
        color: #007bff
    }

.search-actions {
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px
}

.clear-search, .search-actions {
    display: flex;
    align-items: center
}

.clear-search {
    text-decoration: none
}

    .clear-search .fa-times {
        color: #848687;
        font-size: 20px;
        font-weight: 300
    }

.transaction-details-content {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.detail-label {
    font-size: 14px;
    color: #5a5c5d;
    font-weight: 400
}

.detail-value {
    font-size: 14px;
    color: #112026;
    font-weight: 600;
    text-align: left
}

.status-row .detail-value {
    direction: rtl;
    text-align: right
}

    .status-badge, .status-row .detail-value .status-badge {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: 500
    }

.status-badge {
    display: inline-block;
    text-align: center
}

.status-success {
    background: rgba(34,197,94,.1);
    color: #16a34a
}

.status-failed {
    background: rgba(239,68,68,.1);
    color: #dc2626
}

.status-bank, .status-wait {
    background: #fef6ee;
    color: #ef6820
}

.close-transaction-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 5px;
    background: #fff;
    border: 1.5px solid #dee2e6;
    color: #112026;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    transition: all .2s ease-in-out;
    margin-top: 32px
}

    .close-transaction-modal-btn:hover {
        background: #f8fafc;
        border: 1.5px solid #dee2e6;
        color: #112026
    }

.btn-support-modal {
    border-radius: 5px;
    background: #112026;
    color: #f9feff
}

.btn-accept, .btn-support-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 8px 12px;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 700;
    box-shadow: none
}

.btn-accept {
    border-radius: 5px;
    border: 1.5px solid #dee2e6;
    color: #112026;
    background-color: #fff
}

    .btn-accept:active, .btn-accept:focus, .btn-accept:hover {
        background-color: #f8fafc;
        border: 1.5px solid #dee2e6;
        color: #112026;
        box-shadow: none !important
    }

.pagination-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
    border: 1.5px solid #dee2e6;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
    text-decoration: none;
    color: #007599;
    font-size: 12px
}

    .pagination-btn:hover {
        border-color: #04445a;
        background: #f8fafc;
        text-decoration: none;
        color: inherit
    }

    .pagination-btn:disabled {
        opacity: .5;
        cursor: not-allowed
    }

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px
}

.pagination-number {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #112026;
    cursor: pointer;
    transition: all .2s ease-in-out;
    text-decoration: none;
    padding-top: 4px
}

    .pagination-number:hover {
        background: #ecf1f3;
        color: #112026;
        text-decoration: none
    }

    .pagination-number.active {
        background: #007599;
        color: #fff
    }

.pagination-dots {
    color: #8f9192;
    font-size: 14px;
    padding: 0 4px
}

.vertical-space {
    width: 1px;
    height: 14px;
    background: #dee2e6
}

.blocked-modal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.source-account-modal .no-accounts-found i {
    padding: 14px;
    border-radius: 68px;
    background: linear-gradient(180deg,hsla(0,0%,94.9%,.3),hsla(0,0%,76.9%,.3));
    display: flex;
    justify-content: center;
    text-align: center;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin: 0 auto 15px
}

.blocked-modal .modal-header, .daily-limit-modal .modal-header, .success-modal .modal-header {
    display: none
}

.withdrawalModalErrorInputLessThan .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px
}


@charset "UTF-8";@-webkit-keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}*{box-sizing:border-box}.auth__slider{background-color:#f7ca18;width:100%;height:100vh}.auth__slider .carousel-indicators{padding:0;bottom:90px}@media (prefers-color-scheme:dark){.auth__slider{background-color:#f7ca18!important;color:#000!important}}.auth__carousel-inner,.auth__carousel-item{height:100%}.auth__carousel-item:nth-child(2):before,.auth__carousel-item:nth-child(3):before{content:"";position:absolute;width:100%;height:100%;background-image:url(/css/images/tlyn-white.png);background-size:500px;background-repeat:no-repeat;background-position:center -20px;opacity:.4;z-index:-1}.auth__carousel-item:nth-child(3):before{background-position:50% calc(100% + 20px)}.auth__carousel-content{height:calc(100% - 200px);overflow-x:hidden;overflow-y:auto;padding:20px;text-align:center}.auth__carousel-content .title{font-weight:700;margin-top:16px;text-align:center;color:inherit!important}.auth__next-button{position:absolute;width:100%;text-align:center;max-width:500px;left:0;right:0;margin:0 auto 100px;display:block}.auth__next-button button{border-radius:10px!important}.auth__features{padding:0 30px;font-size:14px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:40px;opacity:0;text-align:center;transition:all .3s ease-in-out}.auth__features.active{opacity:1}.auth__trust{position:absolute;top:0;left:-320px;width:300px;height:200px;transition:all .3s ease-in-out}.auth__trust.active{left:-20px}.auth__trust .menu{transform:rotate(90deg);position:absolute;left:220px;top:80px;background:#42454b;width:200px;height:40px;color:hsla(0,0%,100%,.6);padding:5px 15px;border-radius:10px 10px 0 0;text-align:right;display:flex;align-items:center;justify-content:space-between;font-weight:700;cursor:pointer}.auth__trust .content{line-height:25px;background:rgba(66,69,75,.6980392156862745);color:#fff;padding:10px;width:calc(100vw - 60px);text-align:center;height:100%}.auth__trust .content,.login__container{display:flex;flex-direction:column;align-items:center;justify-content:center}.login__container{min-height:inherit;background-color:#fff;box-sizing:border-box}.login__container.registration-mode{height:auto;max-height:none;overflow-y:visible;justify-content:flex-start;padding-top:40px}.login__form{width:100%;max-width:470px;display:flex;flex-direction:column;padding:0 68px}.login__form.keyboard-mode{min-height:calc(var(--vh, 1vh)*100 - 120px)}.login__form.registration-active{margin-bottom:100px}.login__form>div{position:relative;width:100%}.login__header{text-align:center;margin-bottom:32px}.login__logo{width:70px;height:70px;-o-object-fit:contain;object-fit:contain}.login__logo-wrapper{margin-bottom:24px}.login__title{font-size:18px;font-weight:700;color:#112026;margin:0;line-height:1.4}.login__link{color:#3b82f6;text-decoration:none;font-size:12px;font-weight:400;display:inline-block;cursor:pointer;transition:color .2s ease-in-out}.login__link-wrapper{margin-top:7px}.login__link span{color:#848687;font-size:13px}.login__link:hover{color:#2563eb;text-decoration:underline}.input__section{display:flex;flex-direction:column;position:relative;z-index:2}.input__label{font-size:14px;font-weight:400!important;color:#112026;margin:0 0 6px;text-align:right}.input__label span{font-size:14px;font-weight:400;color:#848687}.input__wrapper{position:relative}.input__info{margin-top:8px;text-align:right;font-size:12px;font-weight:400!important}.phone__input{width:100%;height:48px;border:1px solid #d1d5db;border-radius:3px;padding:12px 16px;font-size:14px;font-weight:400;background-color:#fff;color:#374151;transition:all .2s ease-in-out;text-align:center;direction:ltr}.phone__input:focus{outline:none;border-color:#66abe4}.phone__input.error,.phone__input.error:focus{border-color:#d92d20}.phone__input.disabled-phone,.phone__input:disabled{box-shadow:inset 0 0 0 1000px #e9ecef!important;-webkit-box-shadow:0 0 0 1000px #e9ecef inset!important;-webkit-text-fill-color:#848687!important;cursor:not-allowed!important;border-color:#5a5c5d!important}.help__text{color:#6b7280}.error__message,.help__text{font-size:12px;line-height:1.4}.error__message{color:#d92d20}.otp__section{margin-top:24px;-webkit-animation:slideDown .3s ease-out;animation:slideDown .3s ease-out;position:relative;z-index:3}.otp__section .input__label #timer-text{color:#112026;font-size:12px;font-weight:700}.otp__section .input__label #resend-btn{font-weight:400;font-size:12px;color:#1570ef;cursor:pointer;transition:all .2s ease-in-out}.otp__section .input__label #resend-btn.sending{color:#9ca3af;cursor:not-allowed;opacity:.7}.otp__inputs{justify-content:space-between;gap:8px;direction:ltr}.otp__digit,.otp__inputs{display:flex;align-items:center}.otp__digit{width:38px;height:42px;border:1px solid #babcbd;border-radius:8px;padding:12px 8px 8px;background-color:#fff;color:#374151;font-size:18px;font-weight:400;text-align:center;line-height:40px;justify-content:center;transition:all .2s ease-in-out}.otp__digit::-moz-placeholder{color:#babcbd;vertical-align:middle}.otp__digit:-ms-input-placeholder{color:#babcbd;vertical-align:middle}.otp__digit::placeholder{color:#babcbd;vertical-align:middle}.otp__digit:focus{outline:none;border-color:#66abe4}.otp__digit.error{border-color:#d92d20;background-color:#fef2f2;-webkit-animation:shake .5s ease-in-out;animation:shake .5s ease-in-out}.otp__separator{color:#6b7280;font-size:18px;font-weight:500;margin:0 2px}.otp__info{margin-top:6px;text-align:right}.otp__info .help__text{color:#848687;font-size:13px;font-weight:400;line-height:normal}.resend__link{color:#3b82f6;text-decoration:none;font-size:12px;margin-top:4px;display:inline-block}.resend__link:hover{color:#2563eb;text-decoration:underline}.password__section{-webkit-animation:slideDown .3s ease-out;animation:slideDown .3s ease-out;position:relative;z-index:1;clear:both;width:100%;margin-bottom:20px}.password__section *{box-sizing:border-box}.password__wrapper{position:relative}.password__input{width:100%;height:48px;border:1px solid #d1d5db;border-radius:3px;font-size:14px;font-weight:400;background-color:#fff;color:#374151;transition:all .2s ease-in-out;padding:12px 16px 12px 45px}.password__input:focus{outline:none;border-color:#66abe4}.password__input.error,.password__input.error:focus{border-color:#d92d20}.password__toggle{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#6b7280;font-size:18px;padding:4px;z-index:10;transition:color .2s ease-in-out}.password__toggle:hover{color:#3b82f6}.password__toggle:focus{outline:none;color:#66abe4}.password__buttons{display:flex;flex-direction:column;gap:12px}.password__requirements{margin-top:8px}.forgot-password__link{color:#1570ef;font-size:12px;font-weight:700;line-height:normal}.national__buttons{display:flex;flex-direction:column;gap:12px}.requirement__item{display:flex;align-items:center;margin-bottom:8px;font-size:14px}.requirement__item:last-child{margin-bottom:0}.requirement__item.valid .requirement__circle{border:1px solid #099250}.requirement__item.valid .requirement__circle i{color:#099250}.requirement__item.valid .requirement__circle i:before{content:"\F00C"}.requirement__item.valid .requirement__text{color:#099250}.requirement__item.invalid .requirement__circle{border:1px solid #d92d20}.requirement__item.invalid .requirement__circle i{color:#d92d20}.requirement__item.invalid .requirement__circle i:before{content:"\F00D"}.requirement__item.invalid .requirement__text{color:#d92d20}.requirement__circle{width:16px;height:16px;margin-left:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #dee2e6;transition:all .3s ease-in-out}.requirement__circle i{font-size:10px;color:transparent;transition:all .3s ease-in-out}.requirement__text{color:#5a5c5d;font-size:12px;font-weight:400;transition:color .3s ease-in-out}.registration__section{-webkit-animation:slideDown .3s ease-out;animation:slideDown .3s ease-out;position:relative;z-index:1;clear:both;width:100%}.registration__section *{box-sizing:border-box}.registration__section .field-group{margin-bottom:16px}.registration__section .field-group:last-child{margin-bottom:0}.registration__fields{display:flex;flex-direction:column;gap:16px}.registration__login-section{margin-top:8px;text-align:center}.registration__login-link{color:#3b82f6;text-decoration:none;font-size:14px;font-weight:400;cursor:pointer;transition:color .2s ease-in-out}.registration__login-link:hover{color:#2563eb;text-decoration:underline}.field__group{display:flex;flex-direction:column}.field__group .input__label{margin-bottom:6px}.field__group .input__wrapper{margin-bottom:0}.disabled__input{background-color:#f9fafb!important;color:#6b7280!important;cursor:not-allowed}.terms__section{margin-bottom:14px;text-align:right}.terms__text{font-size:12px;color:#6b7280;margin:0;line-height:1.4}.terms__link{color:#3b82f6;text-decoration:none}.terms__link:hover{cursor:pointer;text-decoration:underline}.reset-password__section{-webkit-animation:slideDown .3s ease-out;animation:slideDown .3s ease-out;position:relative;z-index:1;clear:both;width:100%}.reset-password__section *{box-sizing:border-box}.reset-password__fields{display:flex;flex-direction:column;gap:16px}.reset-password__fields .field-group{margin-bottom:16px}.reset-password__buttons{display:flex;flex-direction:column;gap:12px}.back-to-login__btn{width:100%;height:48px;background-color:transparent;color:#3b82f6;border-radius:5px;border:none;font-size:16px;font-weight:400;cursor:pointer;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}.back-to-login__btn:hover{background-color:#f3f4f6;border-color:#2563eb;color:#2563eb}.back-to-login__btn:active{background-color:#e5e7eb;transform:translateY(1px)}.submit__section{border-radius:5px;margin-top:100px;transition:margin-top .3s ease-in-out}.submit__section.registration-mode{margin-top:42px}.submit__section.keyboard-open{margin-top:40px;margin-bottom:20px}.submit__btn{border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:all .2s ease-in-out;width:100%;height:48px;background-color:#3b82f6;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;direction:rtl}.submit__btn:disabled{background-color:#d1d5db;color:#9ca3af;cursor:not-allowed}.submit__btn:hover{background-color:#2563eb}.submit__btn:active{background-color:#1d4ed8;transform:translateY(1px)}.submit__btn:focus{outline:none}.btn__loading{display:flex;align-items:center;gap:8px}.btn__loading i{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.phone__toast{position:fixed;top:20px;right:20px;left:20px;z-index:9999;opacity:0;transform:translateY(-20px);transition:all .3s ease-out;pointer-events:none}.phone__toast.show{opacity:1;transform:translateY(0);pointer-events:auto}.toast__content{padding:12px;display:flex;align-items:center;border-radius:8px;gap:8px;direction:rtl;box-shadow:0 10px 25px rgba(0,0,0,.1);max-width:328px;margin:0 auto;cursor:pointer;transition:all .2s ease-in-out;border:1px solid #d92d20;background-color:#fef2f2}.toast__content:hover{background-color:#fee2e2;transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.15)}.toast__content.success{border:1px solid #099250;background-color:#f0fdf4}.toast__content.success:hover{background-color:#dcfce7;transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.15)}.toast__content:active{transform:translateY(0)}.toast__content .fa-exclamation-circle{color:#d92d20;font-size:20px}.toast__content.success .fa-check-circle{color:#099250;font-size:20px}.toast__message{color:#112026;font-size:14px;font-weight:400;line-height:1.4;text-align:right;flex:1}.dev__message{margin:16px 0;padding:12px 16px;border-radius:8px;font-size:14px;text-align:center;-webkit-animation:slideDown .3s ease-out;animation:slideDown .3s ease-out}.dev__info{background-color:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}.dev__error{background-color:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.biometric__section{margin-top:16px;text-align:center}.biometric__wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.biometric__text{font-size:14px;color:#6b7280;margin:0}.biometric__btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background-color:#f3f4f6;color:#3b82f6;text-decoration:none;transition:all .2s ease-in-out}.biometric__btn:hover{background-color:#e5e7eb;color:#2563eb;text-decoration:none}.biometric__btn i{font-size:24px}.support__section{margin-top:20px;padding-top:12px;border-top:1px solid #ecf1f3;text-align:center}.support__link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#3b82f6;font-size:14px;transition:color .2s ease-in-out}.support__link:hover{color:#2563eb;text-decoration:none}.support__icon{width:16px;height:16px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233B82F6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.support__text{font-weight:400}.support__number{font-weight:500;direction:ltr;display:inline-block}body{height:100vh!important}@media (max-height:700px){.registration__fields .field__group{margin-bottom:12px}.terms__section{margin:12px 0 8px}.login__link{margin-top:8px}}@media (max-height:600px){.registration__fields .field__group{margin-bottom:10px}}@media (max-width:480px){.login__form{max-width:100%;min-height:calc(100vh - 80px)}.login__form.keyboard-mode{min-height:calc(var(--vh, 1vh)*100 - 80px);justify-content:space-between}.login__title{font-size:16px}.submit__section.keyboard-open{margin-top:30px;margin-bottom:20px;position:relative}.phone__toast{top:15px;right:15px;left:15px}.toast__content{padding:14px 16px;border-radius:10px}.toast__message{font-size:13px}.registration__fields{gap:12px}.field__group .input__label{margin-bottom:4px}}@media (max-width:360px){.submit__section{margin-top:80px}.submit__section.registration-mode{margin-top:32px}.submit__section.keyboard-open{margin-top:20px}}@media (max-width:320px){.login__form{padding:0 16px}}@media (max-height:600px) and (orientation:landscape){.login__container{padding-top:20px;justify-content:center}.login__form{min-height:calc(100vh - 40px)}.login__form.keyboard-mode{min-height:calc(var(--vh, 1vh)*100 - 40px)}.submit__section{margin-top:60px}.submit__section.registration-mode{margin-top:28px}.submit__section.keyboard-open{margin-top:20px}}@supports (-webkit-touch-callout:none){:root{--ios-100vh:-webkit-fill-available}.login__container{min-height:-webkit-fill-available}.login__form{min-height:calc(var(--ios-100vh) - 120px)}.login__form.keyboard-mode{min-height:calc(var(--vh, 1vh)*100 - 120px)}}