@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

:root {
    --primary-color: #0F34DB;
    --primary-dark-color: #353751;
    --secondary-color: #fff;
    --tertiary-color: #131313;
    --gray-color: #878E96;
    --button-color: #1f73b7;
    --hover-color: #865c05;

    /* Border color  */

    --primary-border-color: #545454;
}

html {
    background-color: var(--secondary-color) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: 0.25s ease;
    transition: 0.25s ease;
    overflow-x: hidden;
    position: relative;
    font-family: "Space Grotesk", sans-serif !important;
    color: var(--tertiary-color) !important;
    background-color: #fff !important;
    font-size: 16px !important;
    letter-spacing: 0.8px;
}

body.modal-open {
    overflow: auto !important;
}

body.modal-open[style] {
    padding-right: 0px !important;
}

.logo {
    max-height: 40px;
    object-fit: contain;
}

.navbar-logo img {
    max-height: 80px;
    object-fit: contain;
}

.header-nav-center {
    padding: 0em 0;
    border-bottom: 1px solid rgba(11, 34, 56, 0);
    -webkit-transition: .3s !important;
    -moz-transition: .3s !important;
    -o-transition: .3s !important;
    -ms-transition: .3s !important;
    transition: .3s !important;
    background-color: var(--secondary-color);
    /*  position: fixed;
    left: 0;
    right: 0;
    z-index: 999;*/
}

.header-nav-center .navbar .nav-link {
    font-size: 1.2em;
    font-weight: 600;
    text-transform: capitalize;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.dropdown-toggle::after {
    display: none;
}

.hamburger-menu {
    width: 2em;
}

.efi-wallet-sec {
    background-image: url('../img/version_2/auth/auth-back.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
}

.efi-wallet-home-box {
    background-color: var(--secondary-color);
    position: relative;
    border-radius: 16px;
    height: 100%;
    padding: 2em;
}


.efi-wallet-home-header-sec {
    background: linear-gradient(270.74deg, #0D1C42 6.83%, #28285F 93.48%);
    padding: 1.5em;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 1em;
    /* position: relative; */
}


.efi-wallet-home-header-img {
    width: 100%;
    max-width: 12em;
}

.efi-wallet-home-header-info-sec {
    position: relative;
}

.efi-wallet-home-header-img-sec {
    text-align: right;
    position: relative;
}

.efi-wallet-wrapper {
    min-height: calc(100vh - 0px);
    padding: .8em;
    padding-top: 7em;
    /* display: flex;
    justify-content: center;
    flex-direction: column; */
}

.setting-page-sec {
    padding-top: 7em !important;
    padding: .8em;
}

.settings-page-wrapped {
    min-height: calc(100vh - 0px);
    /* display: flex;
    justify-content: center;
    flex-direction: column; */
}

.auth-wallet-warapper {
    min-height: calc(100vh - 0px);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.efi-wallet-home-left-sec {
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.efi-wallet-home-right-info h4 {
    color: var(--secondary-color);
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 0;
}

.efi-wallet-home-header-info-sec {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.efi-wallet-home-header-info h5 {
    font-size: 1.2em;
    font-weight: 400;
    color: var(--secondary-color);
}

.efi-wallet-home-header-info h3 {
    font-weight: 600;
    font-size: 1.5em;
    margin-bottom: 0;
    color: var(--secondary-color);
    line-height: 1.4;
}

.step-1,
.otp-verification-success-sec,
.step-2 {
    height: 100%;
}

.quick-link-sec button {
    padding: 0 !important;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: 600;
}

.otp-action-frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    padding-top: 1em;
}

.efi-wallet-home-body-sec {
    /* background-color: var(--secondary-color);
    padding:2em;
    border-radius: 16px;
    position: relative; */
}

.login-auth-titles h2 {
    text-align: center;
    color: var(--tertiary-color);
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.otp-info h2 {
    text-align: center;
    color: var(--tertiary-color);
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0em;
}

.login-auth-titles p {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--tertiary-color);
    margin-bottom: 0em;
    line-height: 1.8;
}

.login-auth-titles p span {
    font-weight: 600;
}

.efi-wallet-home-form-sec {
    position: relative;
}

.auth-content-frame {
    background: var(--primary-color);
    height: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-content-frame .auth-content-top h2 {
    color: var(--secondary-color);
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 0em;
}

.auth-content-frame :where(.auth-content-top, .auth-content-bottom) {
    padding: 2em;
    color: var(--secondary-color);
}

.auth-content-frame .auth-content-bottom h5 {
    font-size: 1em;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.5em;
}

.auth-content-frame .auth-content-bottom h3 {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.5em;
    line-height: 1.4;
}

.auth-content-frame .auth-content-bottom p {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--secondary-color);
    margin-bottom: 0em;
    line-height: 1.8;
}

.login-with-google-btn {
    border: 1px solid #DDE1E6 !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--tertiary-color) !important;
    gap: 0.5em;
    background-color: transparent !important;
    padding: 0.8em 0.8em !important;
    width: 100%;
    font-size: 1em !important;
    font-weight: 500 !important;
    color: var(--tertiary-color) !important;
}

.efi-wallet-home-form-sec h2 {
    font-size: 1.8em;
    color: var(--tertiary-color);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.8em;
}

.separtore-text {
    font-size: 1em;
    color: var(--tertiary-color);
    font-weight: 500;
    text-align: center;
}

.efi-wallet-home-form-sec .form-control {
    background: #F6F7FB !important;
    border-left: none;
    border: 0 !important;
    box-shadow: none;
    padding-left: 0;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.efi-wallet-home-form-sec .form-control::placeholder {
    font-size: 0.9em;
    font-weight: 400;
}

.efi-wallet-home-form-sec .input-group-text {
    background: #F6F7FB;
    border: 0 !important;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.efi-wallet-home-form-sec .password-icon {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.efi-wallet-home-form-sec .password-icon span {
    color: var(--button-color);
    font-size: 0.8em;
}

.efi-wallet-home-form-sec .input-group {
    height: 50px;
}

.efi-wallet-home-form-sec .efi-wallet-auth-input-group {
    position: relative;
}

.efi-wallet-home-form-sec .form-control:focus {
    box-shadow: none !important;
}

.default-primary-btn {
    align-items: center;
    background: var(--primary-color) !important;
    border: 0 !important;
    border-radius: 50px !important;
    color: var(--secondary-color) !important;
    display: flex !important;
    font-size: 0.9em !important;
    font-weight: 500 !important;
    justify-content: center;
    padding: .7em 2em !important;
    position: relative;
    text-decoration: none !important;
    transition: all .4s ease-in-out;
    width: 100%;
}

.auth-btn-sec {
    margin-top: 2em;
}

.quick-link-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.quick-link-sec a {
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none !important;
}

.quick-link-sec p {
    font-size: 0.95em;
    font-weight: 400;
    text-decoration: none !important;
    margin-bottom: 0 !important;
}

.wrong-email-sec a {
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.otp-info p {
    text-align: center;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--gray-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.otp-info p span {
    color: var(--tertiary-color);
    font-weight: 500;
}

.verification-item {
    margin: 2em 0;
    position: relative;
}

.verification-item input {
    width: 3rem !important;
    height: 3rem;
    font-size: 1.8rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.verification-btn-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.verification-item div {
    justify-content: center;
    gap: 0.4em;
}

.otp-verification-success-img {
    max-width: 10em;
}

.otp-verification-success-img-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.hamburger-icon {
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F6F7FB;
    border-radius: 8px;
    margin-top: 0.3em;
}

.contact-list-box {
    background-color: var(--secondary-color);
    border-radius: 25px;
}

.contact-list-header-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.contact-list-header-sec h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
}

.contact-list-header-sec a {
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none !important;
}

.contact-list-gird-sec {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 0.5em;
}

.contact-list-add-btn {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.contact-list-add-new-icon-sec {
    background-color: #DDE2F7;
    width: 4em;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-list-add-new-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8em;
    cursor: pointer;
}

.contact-list-add-new-card h4 {
    margin-bottom: 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--tertiary-color);
}

.contact-list-user-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8em;
}

.contact-list-user-item-sec {
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    gap: 0.5em;
}

.contact-list-user-info h4 {
    margin-bottom: 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--tertiary-color);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.contact-list-user-img {
    width: 4em;
    height: 4em;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #DDE2F7;
}

.transfer-history-box {
    background-color: var(--secondary-color);
    border-radius: 25px;
}

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

.transfer-history-header-sec h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
}

.transfer-history-header-sec .nav.nav-pills {
    background-color: #F6F7FB;
    border-radius: 50px;
}

.transfer-history-header-sec .nav.nav-pills .nav-link {
    color: var(--tertiary-color);
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 50px;
    padding: 1em 2em !important;
}

.transfer-history-header-sec .nav.nav-pills .nav-link.active {
    background-color: #DDE2F7;
    color: var(--primary-color);
}

.transfer-history-table-sec {
    padding-top: 2em;
}

.transaction-hash-icon-sec {
    width: 3.5em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50%;
    position: absolute;
    left: -15px;
    background-color: var(--secondary-color);
    box-shadow: rgb(17 17 26 / 1%) 0px 1px 0px, rgb(17 17 26 / 5%) 0px 0px 8px;
}

.bg-success-color {
    background-color: #F2FCF4;
}

.bg-failed-color {
    background-color: #FFF4F3;
}

.bg-processing-color {
    background-color: rgb(255 169 26 / 10%);
}

.transaction-hash-token-icon-sec {
    width: 3.5em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50%;
    position: absolute;
    left: -15px;
    background-color: var(--secondary-color);
    box-shadow: rgb(17 17 26 / 1%) 0px 1px 0px, rgb(17 17 26 / 5%) 0px 0px 8px;
}

.transaction-hash-token-icon-sec svg {
    transform: rotate(90deg);
}

.transaction-hash-collectibles-icon-sec {
    width: 3.5em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50%;
    position: absolute;
    left: -15px;
    background-color: var(--secondary-color);
    box-shadow: rgb(17 17 26 / 1%) 0px 1px 0px, rgb(17 17 26 / 5%) 0px 0px 8px;
}

.transaction-hash-collectibles-icon-sec svg {
    transform: rotate(0deg);
}

.transaction-hash-copy-btn {
    width: 2.8em;
    height: 2.8em;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #F6F7FB !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
}

.transaction-hash-card {
    /* display: grid;
    grid-template-columns: 45px auto; */
    display: flex;
    gap: 1em;
    align-items: center;
}

.transaction-hash-info {
    display: grid;
    grid-template-columns: 200px auto;
    gap: 1em;
    align-items: center;
    justify-content: flex-start;
    text-align: right;
}

.transfer-history-table-sec td {
    font-size: 0.75em;
    font-weight: 600;
    vertical-align: middle;
}

.success-badge {
    background-color: #E6F4F0;
    padding: 0.5em 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border-radius: 50px;
}

.failed-badge {
    background-color: #FFEBEB;
    padding: 0.5em 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border-radius: 50px;
}

.processing-badge {
    background-color: #FFF4D7;
    padding: 0.5em 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border-radius: 50px;
}

.transaction-hash-info span {
    /* display: -webkit-box; */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.modal-close {
    background-color: #DDE2F7 !important;
    width: 3em;
    height: 3em;
    display: flex !important;
    padding: 0 !important;
    border: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}

.add-new-contact-modal-header-sec h2,
.import-wallet-modal-header-sec h2,
.tokens-import-modal-header-sec h2 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;

}

.add-new-contact-modal-header-sec,
.import-wallet-modal-header-sec,
.tokens-import-modal-header-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.import-wallet-modal .form-control {
    background: #F6F7FB !important;
    border-left: none;
    border: 0 !important;
    box-shadow: none;
    padding-left: 0;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    font-size: 0.85;
}

.add-new-contact-modal .new-transfer-input .form-control {
    background: var(--secondary-color) !important;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--tertiary-color);
    border: 0 !important;
    box-shadow: none;
}

.add-new-contact-modal .new-transfer-input .form-control::placeholder {
    color: #eeeeee;
    font-size: 1.2em;
    font-weight: 600;
}

.transfer-select-wallet {
    border: 1px solid #eeeeee;
    border-radius: 20px;
    padding: 1em;
}

.transfer-float-card {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
}

.transfer-float-info h3 {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0.5em;
}

.transfer-float-info p {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--gray-color);
    margin-bottom: 0;
}

.transfer-float-left {
    display: grid;
    grid-template-columns: 60px auto;
    align-items: center;
}

.transfer-float-right .transfer-info-float h4 {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0em;
}

.transfer-float-right .transfer-info-float h4 span {
    color: var(--gray-color) !important;
    font-weight: 400 !important;
    font-size: 0.85em !important;
}

.transfer-select-float {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5em;
    margin-bottom: .5em;
}

.transfer-float-right .transfer-select-float .react-select__control {
    min-width: 140px;
    margin-left: auto;
}

.transfer-field-wrapped {
    background: #F9F9F9;
    padding: 1em;
    border-radius: 20px;

}

.transfer-history-body-sec .form-control {
    height: 45px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    border-radius: 20px;
}

.transfer-history-body-sec .form-control:focus {
    border: 1px solid var(--secondary-color);
    box-shadow: none;
}

.transfer-history-body-sec .form-control::placeholder {
    font-size: 0.85em;
    color: var(--gray-color);
}

.transfer-field-wrapped {
    margin: 1.5em 0;
}

.transfer-from-from {
    margin-top: 1em;
}

.address-profile-card {
    background: var(--primary-color);
    border-radius: 50%;
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-profile-card span {
    color: var(--secondary-color);
}

.address-profile-indo h4 {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0.5em;
}

.address-profile-indo p {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--gray-color);
    margin-bottom: 0em;
}

.wallet-address-profile {
    display: grid;
    grid-template-columns: 60px auto;
    align-items: center;
}

.wallet-address-card {
    background: #F1F3F9;
    padding: 1em;
    border-radius: 50px;
    border: 1px solid var(--primary-color);
}

.wallet-address-action button {
    color: var(--primary-color) !important;
    font-size: 0.9em;
    font-weight: 500;
}

.new-transfer-input {
    margin: 1em 0em;
}

.add-new-contact-modal .form-control::placeholder,
.import-wallet-modal .form-control::placeholder {
    font-size: 0.85em;
}

.import-wallet-modal .form-control,
.transfer-from-from .form-control,
.token-import-content .form-control {
    border-radius: 30px;
    padding-left: 1em;
    height: 50px;
}

.transfer-from-from .form-control {
    background: #fff !important;

}

.token-import-content .form-control,
.add-new-contact-modal .form-control {
    background: #F6F7FB !important;
    border: 0 !important;

}

.add-new-contact-modal .form-control {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.add-new-contact-modal .form-control.password-input {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.add-new-contact-modal .form-control::placeholder,
.import-wallet-modal .form-control::placeholder,
.transfer-from-from .form-control::placeholder,
.token-import-content .form-control::placeholder {
    font-size: 0.9em;
    font-weight: 400;
}

.add-new-contact-modal .input-group-text,
.import-wallet-modal .input-group-text {
    background: #F6F7FB;
    border: 0 !important;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.token-import-content .input-group-text {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    background-color: #F6F7FB !important;
    border: 0 !important;
}

.token-import-content .input-group .form-control {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

.add-new-contact-modal .input-group-text.password-icon,
.import-wallet-modal .input-group-text.password-icon {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.add-new-contact-modal .input-group-text.password-icon span,
.import-wallet-modal .input-group-text.password-icon span {
    color: var(--button-color);
    font-size: 0.8em;
}

.add-new-contact-modal .input-group,
.import-wallet-modal .input-group {
    height: 50px;
}

.add-new-contact-modal .efi-wallet-auth-input-group {
    position: relative;
}

.add-new-contact-modal .form-control:focus,
.import-wallet-modal .form-control:focus,
.transfer-from-from .form-control:focus,
.token-import-content .form-control:focus {
    box-shadow: none !important;
}

.add-new-contact-modal .form-label,
.import-wallet-modal .form-label,
.token-import-content .form-label {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--tertiary-color);
}

.add-new-contact-modal .form-label {
    margin-bottom: 1em;
}

.errorMsg {
    font-size: 0.8em;
    color: #e34f4f;
    text-align: right;
}

.spinner-loader {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid transparent;
    border-right-color: var(--light-color);
    animation: l2 1s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes l2 {
    to {
        transform: rotate(1turn);
    }
}


.deposit-card {
    position: relative;
}

.deposit-card-top {
    position: relative;
}

.deposit-card::before {
    /* content: "";  */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(45deg, #000, transparent) !important; */
    border-radius: 25px;
}

.deposit-card-bottom {
    position: relative;
}




.bar-code-avater {
    border-radius: 0;
    margin: auto;
    display: flex;
}

.bar-code-close-btn .modal-close {
    right: 0%;
    top: 0%;
    position: absolute;
}

.bar-copy-pad {
    padding: 0.5em 1em;
}


.page-loader-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}


.page-loader {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side, #0F34DB 90%, #fff);
    background:
        var(--_g) 0% 50%,
        var(--_g) 50% 50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 1s infinite linear;
}

@keyframes l7 {
    33% {
        background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%
    }

    50% {
        background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%
    }

    66% {
        background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%
    }
}

.register-phone-input .PhoneInput {
    display: flex;
    align-items: center;
    height: 50px;
    border: 0 !important;
    border-radius: var(--bs-border-radius);
    width: 100%;
    border-radius: 30px;
    width: 100%;
    padding: 1em;
    font-size: 0.9em;
    font-weight: 500;
    background: #F6F7FB !important;
}

.register-phone-input .PhoneInput:focus input {
    border: none !important;
    box-shadow: none !important;
}

.register-phone-input .PhoneInput input {
    border: none;
    outline: none;
    background: transparent;
    height: 45px;
    color: #212529;
}

.helper-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 2em; */
    margin: auto;
    min-height: 100vh;
    position: relative;
}

.no-bot-exists-info {
    position: absolute;
    bottom: 250px;
}

.helper-pages .default-primary-btn {
    position: absolute;
    bottom: 190px;
    width: auto;
}


.helper-pages-box {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.no-data-found-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 300px);
}

.no-data-found-new-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* gap: 2em; */
    position: relative;
}

.onboarding-kyc-manual-upload-dropzone-card {
    border: 1px dashed #CCCED3;
    gap: 1.2em;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border-radius: 16px;
}

.onboarding-kyc-manual-uploaded-dropzone-upload-btn-sec {
    display: grid;
    grid-template-columns: 40px auto 40px;
    align-items: center;
    border: 1px solid #E7E8E9;
    background-color: var(--light-color);
    border-radius: 50px;
}

.new-control {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-right: 0 !important;
}

.new-control+span {
    background: transparent !important;
}

.new-control+span .spinner-loader {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid #efefef;
    border-right-color: #0194ff;
    animation: l2 1s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lay-btn {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.import-wallet-modal-btn-sec {
    margin-top: 1em;
}

.no-data-found {
    max-width: 20em;
}

/* Dashboard  V_2 style start */
.dashboard-frame {
    background: #F9F9F9;
    padding: 1.5em;
    border-radius: 20px;
}

.recent-card {
    background: var(--secondary-color);
    border-radius: 25px;
    padding: 1em 1em 1em 2em;
    position: relative;
}

.recent-icons {
    position: absolute;
    background: var(--secondary-color);
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
    left: -15px;
    /* box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px; */
    box-shadow: rgb(17 17 26 / 1%) 0px 1px 0px, rgb(17 17 26 / 5%) 0px 0px 8px;
}

.recent-info h4 {
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 1em;
    color: var(--tertiary-color);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.recent-align {
    text-align: end;
}

.recent-info p {
    font-size: 0.75em;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--gray-color);
}

.recent-transfer-titles h3 {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--tertiary-color);
}

.recent-transfer-titles a {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 0;
}

.badges-success {
    background: rgb(39 194 73 / 10%);
    padding: 0.4em 1em;
    color: #27C249;
    border-radius: 25px;
    gap: 0.5em;
    font-size: 0.75em;
    font-weight: 500;
    margin-bottom: 0;
}

.badges-process {
    background: rgb(255 169 26 / 10%);
    padding: 0.4em 1em;
    color: #FFA91A;
    border-radius: 25px;
    gap: 0.5em;
    font-size: 0.75em;
    font-weight: 500;
    margin-bottom: 0;
}

.badges-failed {
    background-color: #FFEBEB;
    padding: 0.4em 1em;
    align-items: center;
    justify-content: center;
    color: #FF6A6A;
    gap: 0.5em;
    font-size: 0.75em;
    font-weight: 500;
    margin-bottom: 0;
}

.recent-transfer-content {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

#react-select-3-live-region .react-select__control {
    min-width: 220px;
}

.deposit-card-bottom p {
    font-size: 0.9em;
    margin-bottom: 0;
    color: var(--secondary-color);
    font-weight: 600;
}

.tranparent-btn {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

.import-wallet-img {
    width: 100%;
    max-width: 12em;
}

.canvasjs-chart-credit {
    display: none;
}

.dashboard-right-card {
    border: 1px solid #EFEFF1;
    padding: 1.5em;
    border-radius: 20px;
}

.contact-list-sec {
    padding-top: 1em;
}

.contact-list-header-sec .view-all-btn {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 0;
}

.settings-profile-frame {
    display: flex;
    justify-content: space-between;
    align-items: start;
    background: #F7F7FC;
    border-radius: 12px;
    padding: 1.5em;
}

.settings-profile-details {
    display: grid;
    align-items: center;
    grid-template-columns: 130px auto;
}

.profile-card-action {
    padding-top: 1em;
    display: flex;
    align-items: center;
    gap: 0.8em;
}

.setting-head-action {
    display: flex;
    align-items: center;
    gap: 1em;
}

.setting-head-action :where(a, button) {
    color: var(--primary-color) !important;
    border: 0 !important;
    background-color: #F6F7FB !important;
    margin-bottom: 0em;
    border-radius: 50px !important;
    display: flex !important;
    font-size: 0.9em !important;
    font-weight: 500 !important;
    justify-content: center;
    padding: .7em 2em !important;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    position: relative;
}

.setting-head-action :where(a, button):hover,
.setting-head-action :where(a, button):focus,
.setting-head-action :where(a, button):active {
    text-decoration: none !important;
    background-color: #F6F7FB !important;
}

.setting-head-action :where(a, button):hover:before {
    background-position: -20% 0;
}

.setting-head-action :where(a, button):before {
    border-radius: 50px;
    content: "";
    background: linear-gradient(45deg, transparent 50%, rgb(96 121 230 / 5%) 58%, rgb(34 44 80 / 5%) 67%, transparent 68%);
    background-size: 200% 100%;
    background-position: 165% 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 1.5s;
}

.setting-head-titles h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
}

.account-card {
    background: url("../img/version_2/shape/gradient_color.png") no-repeat center;
    background-size: cover;
    border-radius: 20px;
    padding: 1.5em;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
}

.token-checked-info {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.account-bls-info h6 {
    color: var(--gray-color);
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 0em;
}

.account-bls-action h6 {
    color: var(--gray-color);
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.account-bls-info h4 {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
    margin-top: 0.5em;
}

.account-bls-action {
    text-align: right;
}

.account-bls-action .pretty.p-switch .state label:after,
.actio-card-action .pretty.p-switch .state label:after {
    background-color: #ffffff !important;
}

.account-bls-action .pretty.p-switch .state:before,
.actio-card-action .pretty.p-switch .state:before {
    border: 1px solid transparent !important;
    background-color: #312C681C !important;
}

.account-bls-action .pretty.p-switch input:checked~.state:before,
.actio-card-action .pretty.p-switch input:checked~.state:before {
    border-color: #23D288 !important;
    background: #23D288 !important;
}

.account-bls-action .pretty.p-switch input:checked~.state label:after,
.actio-card-action .pretty.p-switch input:checked~.state label:after {
    background-color: var(--secondary-color) !important;
    left: 1em;
}

.action-card {
    padding: 1.5em;
    border-radius: 12px;
    background-color: #F6F7FB;
    display: flex;
    align-items: start;
    gap: 2em;
    justify-content: space-between;
}

.setting-account-wrapped {
    margin: 1.5em 0;
}

.setting-account-head,
.set-action-titles {
    margin-bottom: 1.5em;
}

.actio-card-info h3 {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 1em;
}

.actio-card-info p {
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--gray-color);
    line-height: 1.8;
}

.set-action-titles h2 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
}

.set-action-content {
    gap: 1em;
    display: flex;
    flex-direction: column;
}

.card-info-action {
    padding-top: 1em;
}

.no-data-text {
    margin: 0 auto;
}

.no-data-text p {
    margin-bottom: 0;
    font-size: 0.9em;
    font-weight: 500;
}

.create-avater {
    max-width: 15em;
    margin: 0 auto;
}

.setting-profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-wrapped {
    margin-bottom: 2em;
}

.create-wrapped-info h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: var(--tertiary-color);
}

.create-wrapped-info p {
    font-size: 0.85em;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--gray-color);
    line-height: 1.8;
}

.import-flow-new .modal-content {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

.import-flow-new .walletr-tab-box {
    padding: 2em;
}

/* VIew Page  */
.view-token-head h2 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tertiary-color);
    margin-bottom: 0;
}

.view-token-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.view-token-card h4 {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: var(--tertiary-color);
}

.view-token-card p {
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--gray-color);
}

.view-token-content {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* Dashboard  V_2 style end */
/* Layout spaces  */
.space-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    justify-content: center;
}

.layout-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.space-layout-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid-layout_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1em;
}

.no-contact-found-new-sec p {
    font-weight: 500;
    color: var(--gray-color);
    font-size: 0.9em;
    position: absolute;
    bottom: -20px;
}

.no-contact-found-new-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* gap: 2em; */
    position: relative;
}

.no-contact-found {
    max-width: 6em;
    margin-top: -2em;
}

.something-went-wrong-btn-sec {
    display: flex;
    align-items: center;
    justify-content: center;
}

.something-went-wrong-info {
    margin-top: -3.8em;
}

.line-graph-custom-tooltip {
    background-color: #fff;
    border: 1px solid #e7e7e7;
    padding: 1em;
    border-radius: 8px;
}

.line-graph-custom-tooltip .tooltip-inner-sec p {
    margin-bottom: 0;
    font-weight: 600;
}

.line-graph-custom-tooltip h5 {
    margin-bottom: 0.5em;
    font-size: 1em;
    font-weight: 700;
}