@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lato:wght@400;700;900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: url('../images/body-background.png') no-repeat; font-family: "Inter", sans-serif; font-weight:400; background-size: cover; background-attachment: fixed; font-size: 1rem; color: #2F2F2F; }
:root {
    --theme-color: #0d8cff;
    --green-color: #46C159;
    --red-color: #C91111;
    --yellow-color: #EABD00;
}
img { max-width: 100%; }
/* Header Start */
header { height: 3.75rem;
    /*padding: 0.5rem 0rem;*/
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}
header.header-fixed {
    background: #fff;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
a { text-decoration: none; }
.theme-color { color: var(--theme-color) !important; }
.green-color { color: var(--green-color) !important; }
.red-color { color: var(--red-color) !important; }
.yellow-color { color: var(--yellow-color) !important; }

.theme-bg { background: var(--theme-color) !important; }
.green-bg { background: var(--green-color) !important; }
.red-bg { background: var(--red-color) !important; }
.yellow-bg { background: var(--yellow-color) !important; }


.add-cash-btn {
    background: transparent;
    border: 0rem;
    color: #0C8CFF;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}
.add-cash-btn:hover, .add-cash-btn:focus, .add-cash-btn:active {
    background: #0C8CFF;
    color: #fff;
}
.buy-btn {
    background: var(--theme-color);
    border: 0rem;
    border-radius: 0.5rem;
    color: #fff;
    padding: 0.25rem 1rem;
    font-weight: 600;
    min-width: 6.25rem;
    text-align: center;
}
.main-logo { height: 3.75rem; display: flex; align-items: center; width: 15rem; }
.main-logo img { width: 10rem; }
.header-inner { display: flex; justify-content: space-between; padding: 0rem; }
.header-right { width: calc(100% - 15rem); padding: 0rem 2rem;}
.navbar-header {
    margin-top: 2rem;
    background: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.625rem;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}
header.header-fixed .navbar-header {
    margin-top: 0rem;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}
.acc-num .an-name {
    color: #AFAFAF;
}
.header-profile {
    display: flex;
    align-items: center;

}
.hp-image {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}
.hp-name {
    padding-left: 0.5rem;
    margin: 0;
    font-size: 1rem;
    color: #2F2F2F;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 6rem;
}
.h-prof-n-tog {
    display: flex;
    align-items: center;
}
.nav-toggler-div {
    margin-left: 1rem;
}
.nav-toggler-div .navbar-toggler  {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    position: relative;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.nav-toggler-div .navbar-toggler.active  {
    background-image: url("data:image/svg+xml,%3Csvg width='256px' height='256px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg id='Menu / Close_LG'%3E%3Cpath id='Vector' d='M21 21L12 12M12 12L3 3M12 12L21.0001 3M12 12L3 21.0001' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}
/* .nav-toggler-div .navbar-toggler {
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.nav-toggler-div .navbar-toggler, .nav-toggler-div .navbar-toggler::before, .nav-toggler-div .navbar-toggler::after {
    width: 1.5rem;
    height: 0.125rem;
    background: #333;
    border-radius: 6.25rem;
}
.nav-toggler-div .navbar-toggler::before, .nav-toggler-div .navbar-toggler::after {
    content: "";
    width: 1.5rem;
    height: 0.125rem;
    position: absolute;
    left: 0rem;
}
.nav-toggler-div .navbar-toggler::before{
    top: 0.5rem;
}
.nav-toggler-div .navbar-toggler::after{
    top: 1rem;
} */
/* Header End */

/* Main Menu Start */
.app-menu { background:#fff; min-height: 100vh; width: 15rem; position: fixed; z-index: 1; left: 0; top: 0; -webkit-transition: left .2s .2s; transition: left .2s .2s; }
.side-menu {
    margin-top: 1.25rem;
}
.side-menu .navbar-nav .nav-item  {
    padding: 0rem 1.5rem;
}
.side-menu .navbar-nav .nav-item .nav-link {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.625rem;
    color: #050505;
    display: flex;
    align-items: center;
}
.side-menu .navbar-nav .nav-item .nav-link:hover, .side-menu .navbar-nav .nav-item .nav-link.active {
    background: #0d8cff;
    color: #fff;
}
.side-menu .navbar-nav .nav-item .nav-link .nav-link-img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    margin-right: 0.5rem;
}
.nav-link-i {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-size: 1rem;
    margin-right: 0.5rem;
}
.i-myassets {
    background-image: url('../images/my-assets.svg');
}
.i-trade {
    background-image: url('../images/trade.svg');
}
.i-transfer {
    background-image: url('../images/transfer.svg');
}
.i-transactions {
    background-image: url('../images/transaction.svg');
}
.i-member-list {
    background-image: url('../images/member-list.svg');
}
.i-profile {
    background-image: url('../images/profile.svg');
}

.side-menu .navbar-nav .nav-item .nav-link.active .i-myassets {
    background-image: url('../images/my-assets-active.svg');
}
.side-menu .navbar-nav .nav-item .nav-link.active .i-trade {
    background-image: url('../images/trade-active.svg');
}
.side-menu .navbar-nav .nav-item .nav-link.active .i-transfer {
    background-image: url('../images/transfer-active.svg');
}
.side-menu .navbar-nav .nav-item .nav-link.active .i-transactions {
    background-image: url('../images/transaction-active.svg');
}
.side-menu .navbar-nav .nav-item .nav-link.active .i-member-list {
    background-image: url('../images/member-list-active.svg');
}
.side-menu .navbar-nav .nav-item .nav-link.active .i-profile {
    background-image: url('../images/profile-active.svg');
}

/* Main Menu End */
.main-content { padding-left: 15rem; min-height: 100vh; }
.menu-logo-box { text-align: center; border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1); height: 3.75rem; display: flex; align-items: center; justify-content: center; }
.menu-logo { display: block; padding: 0.5rem 0rem; }
.menu-logo img { width: 8.75rem; }

.page-content { padding-top: 7.25rem; padding-bottom: 1rem; padding-left: 2rem; padding-right: 2rem; min-height: 100vh; }
.small-container { margin: 0 auto; max-width: 45rem; }
.profile-small-container { margin: 0 auto; width: 48rem; }

.page-heading { margin-bottom: 1rem; }
.page-heading h4 { font-size: 1rem; font-weight: 500; margin: 0; }

.tab-menu { margin-bottom: 1rem; }
.tab-menu .nav-item { margin-right: 0.5rem; }
.tab-menu .nav-item:last-child { margin-right: 0rem; }
.tab-menu .nav-item .nav-link { display: block; font-weight: 500; color: #AFAFAF; border: 0.0625rem solid #DFE1E7; padding: 0.125rem 1.125rem; border-radius: 6.25rem; }
.tab-menu .nav-item .nav-link:hover, .tab-menu .nav-item .nav-link:focus, .tab-menu .nav-item .nav-link:active, .tab-menu .nav-item .nav-link.active { color: #0C8CFF; border-color: #0C8CFF; background:rgba(12, 140, 255, 0.361); }

.box-card { border-radius: 0.625rem; background:#fff; }
.my-balance-card {
    padding: 1rem 2rem;
    background: transparent linear-gradient(101deg, #0C8CFF 0%, #086ECB 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0rem 0rem 0.75rem #00000029;
    border: 0.125rem solid #409bee;
    border-radius: 0.75rem;
    opacity: 1;
    margin-bottom: 1rem;
}
.label-text {
    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.balance-value {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
}
.up-down-label {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.3125rem;
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    color: #fff;
}
.up-down-label.up-label {
    background: rgba(255, 255, 255, 0.25) url("data:image/svg+xml,%3Csvg width='256px' height='256px' viewBox='3 3 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z' fill='%2377ff97'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    background-size: 0.625rem;
    background-position: 0.25rem 0.375rem;
    padding-left: 1.125rem;
    color: #77FF97;
    font-weight: 600;
}
.up-down-label.down-label {
    background: rgba(255, 255, 255, 0.25) url("data:image/svg+xml,%3Csvg width='256px' height='256px' viewBox='3 3 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C12.5523 3 13 3.44772 13 4V17.5858L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929C20.0976 12.6834 20.0976 13.3166 19.7071 13.7071L12.7071 20.7071C12.3166 21.0976 11.6834 21.0976 11.2929 20.7071L4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929C4.68342 11.9024 5.31658 11.9024 5.70711 12.2929L11 17.5858V4C11 3.44772 11.4477 3 12 3Z' fill='%23ff1717'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    background-size: 0.625rem;
    background-position: 0.25rem 0.375rem;
    padding-left: 1.125rem;
    color: #ff1717;
    font-weight: 600;
}
.cash-section-main {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    /* gap: 1rem; */
}
.my-cash-card {
    padding: 1rem;
    background: #fff;
    border: 0.0625rem solid #0C8CFF;
    width: 25%;
    margin-right: 1rem;
    text-align: center;
}
.my-cash-card .mcc-icon {
    width: 2rem;
}
.mcc-icon {
    margin-bottom: 0.25rem;
}
.mcc-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.mcc-value, .mct-value {
    color: #2F2F2F;
    margin-bottom: 0rem;
    font-size: 1.5rem;
}
.cash-sec-right {
    width: 75%;
}
.cash-table {
    background: #fff;
    border-radius: 0.625rem;
    width: 100%;
    /* overflow: hidden; */
    min-height: 7.5rem;
}
.cash-table th {
    background: #F8F8F8 0% 0% no-repeat padding-box;
    color: #AFAFAF;
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
    font-weight: 400;
    white-space: nowrap;
}
.cash-table td {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 0.0625rem solid rgba(112, 112, 112, 0.1);
}
.cash-table tbody tr:last-child td {
    border-bottom: 0rem;
}
.csr-table thead tr th:first-child {
     border-top-left-radius: 0.625rem;
}
.csr-table thead tr th:last-child {
    border-top-right-radius: 0.625rem;
}
.csr-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.625rem;
}
.csr-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.625rem;
}
.price-up-span {
    display: flex;
    align-items: center;
    font-size: 0.625rem;
}
.price-up-span img {
    width: 0.5rem;
    margin-right: 0.25rem;
}
.bal-cash-name {
    max-width: 13rem;
    position: relative;
    white-space: nowrap;
    padding-left: 2rem;
    text-overflow: ellipsis;
    overflow: hidden;
}
.bcn-img {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0rem;
    top: 0rem;
    object-fit: cover;
}
.dots-menu {
    position: relative;
}
.dots-menu-btn {
    position: relative;
    width: 0.5rem;
    height: 1rem;
    border: 0rem;
    background: url('../images/menu-vertical.svg') no-repeat;
    background-size: contain;
    background-position: center;
}
.cash-table td {
    vertical-align: middle;
}
.dots-menu .dropdown-menu {
    min-width: 7rem;
}
.dots-menu .dropdown-menu .dropdown-item {
    font-size: 0.75rem;
}
.dots-menu .dropdown-menu .dropdown-item.active, .dots-menu .dropdown-menu .dropdown-item:active {
    background-color: var(--theme-color);
}

.my-crypto-main {
    margin-top: 0rem;
    overflow: hidden;
}
.my-crypto-top {
    padding: 1rem;
}
.my-crypto-top .mcc-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.mct-label {
    color: #2F2F2F;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}
.my-crypto-table {
    border-radius: 0rem;
}
.crypto-name-box {
    max-width: 13rem;
    position: relative;
    padding-left: 2.5rem;
}
.cn-img {
    width: 1.875rem;
    min-width: 1.875rem;
    height: 1.875rem;
    object-fit: cover;
    position: absolute;
    left: 0rem;
    top: 0.25rem;
}
.cn-content {
    display: flex;
    flex-direction: column;
}
.cn-name {
    margin-bottom: 0rem;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cn-high-low {
    font-size: 0.625rem;
    font-weight: 400;
    color: #AFAFAF;
    white-space: nowrap;
}
.search-box {
    position: relative;
    width: 100%;
    max-width: 27.5rem;
}
.search-box .search-input {
    border: 0.0625rem solid #AFAFAF;
    height: 2.25rem;
    font-size: 1rem;
    padding: 0.25rem 1rem 0.25rem 2rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    font-family: "Lato", sans-serif;
}
.search-box .search-input::placeholder {
    color: #B9B9BA;
}
.search-box .search-input:hover, .search-box .search-input:focus, .search-box .search-input:hover:active {
    border-color: #666;
    outline: none;
}
.search-box .search-btn {
    position: absolute;
    left: 0.65rem;
    top: 0.3rem;
    background: transparent;
    border: 0rem;
}
.search-box .search-icon {
    width: 1rem;
}

/* --- Profile page start --- */

.profile-card { min-height: 29.375rem; width: 98%; border: 0.1875rem solid #F8F8F8; padding: 1.5rem 2rem; margin-top: 1.25rem; margin-bottom: 1.5rem; margin-left: auto; margin-right: auto; }

.profile-card-left { padding: 1.5rem 3.5rem; }
.profile-con { margin-top: 1.5rem; }
.profile-inner-table  { margin-bottom: 0rem; }
.profile-inner-table td { }
.profile-inner-table .prof-name { color: #AFAFAF; font-size: 0.875rem; }
.profile-inner-table .prof-value { color: #050505; font-weight: 800; }
.profile-img-box { width: 8.75rem; height: 8.75rem; border-radius: 6.25rem; margin: 0 auto; }
.profile-img-box .profile-img { width: 100%; height: 100%; object-fit: cover; }
.edit-prof-span { position: absolute; bottom: 0.5rem; right: 0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 6.25rem; background:#fff url('../images/edit-profile.svg') no-repeat; background-size: cover; }
.kyc-verified { color: var(--green-color) !important; font-size: 0.875rem; font-weight: 600 !important; }
.kyc-verified .verified-icon { width: 0.75rem; }
.prof-card-btns { margin-top: 1.5rem; }
.prof-card-btn { border: 0.0625rem solid var(--theme-color); font-size: 0.875rem; color: #0C8CFF; font-weight:600; border-radius: 0.75rem; background: #F8F8F8; padding: 1.25rem 1.25rem; }
.prof-card-btn:hover, .prof-card-btn:focus, .prof-card-btn:active { background: var(--theme-color); color: #fff; }

.settings-div { display: flex; justify-content: space-between; }
.settings-text { font-size: 0.875rem; }
.switch-radio-btn .switch-span { position: relative; display: block; background-color: #eee; width: 3em; height: 1.25rem; border-radius: 6.25rem; cursor: pointer; }
.switch-radio-btn .radio-input { position: absolute; z-index: 0; opacity: 0; }
.switch-radio-btn .switch-span::before { content: " "; position: absolute; width: 1rem; height: 1rem; left: 0.10rem; top: 0.125rem; background: #fff; border-radius: 6.25rem; transition: left 0.25s; }
.switch-radio-btn .radio-input:checked + .switch-span { background:rgba(12, 140, 255, 0.29); }
.switch-radio-btn .radio-input:checked + .switch-span::before {  left: calc(100% - 1.10rem); background: var(--theme-color); }
.settings-row {
    padding-bottom: 1.25rem;
    border-bottom: 0.0625rem solid rgba(175, 175, 175, 0.2);
}
.settings-h4 { font-size: 1rem; }
.settings-link { color: var(--theme-color);  font-size: 0.875rem; font-weight: 600; }
.p-card-right .prof-card-btns { margin-top: 3rem; padding: 0rem 1.25rem; }

/* --- Profile page end --- */

/* --- Profile page start --- */

/* --- transfer page start --- */

.transfer-card { border: 0.1875rem solid #F8F8F8; min-height: 24.25rem; margin-bottom: 1.5rem; }
.add-out-cash-tab { justify-content: center; }
.add-out-cash-tab .nav-item { margin: 0 1rem;}
.add-out-cash-tab .nav-item .nav-link { background: transparent; position: relative; color: #AFAFAF; border-radius: 0rem; min-width: 6rem; padding: 0.625rem 0rem; text-align: center; margin: 0rem; }
.add-out-cash-tab .nav-item .nav-link:hover, .add-out-cash-tab .nav-item .nav-link:focus, .add-out-cash-tab .nav-item .nav-link:active, .add-out-cash-tab .nav-item .nav-link.active { color: var(--theme-color); background: transparent; font-weight: 600; }

.add-out-cash-tab .nav-item .nav-link::before { content: ''; position: absolute; left: 0rem; top: -0.1875rem; width: 100%; height: 0.1875rem; border-radius: 6.25rem; background: transparent; }
.add-out-cash-tab .nav-item .nav-link:hover::before, .add-out-cash-tab .nav-item .nav-link:focus::before, .add-out-cash-tab .nav-item .nav-link:active:before, .add-out-cash-tab .nav-item .nav-link.active::before { background: var(--theme-color); }

.cash-tab-content { padding: 1rem 1.5rem 1.5rem 1.5rem; }
.add-out-mbalance { margin-top: 2rem; }
.add-out-mbalance p, .ac-my-balance h3 { font-weight: 600; }
.add-out-mbalance h3 { font-size: 1.75rem; }

.transfer-input-dev { display: block; position: relative; }
.transfer-input { height: 3rem; font-size: 1.25rem; font-weight: 500; padding: 0.5rem 5.5rem 0.5rem 1rem; width: 100%; background: #F8F8F8; border: 0.0625rem solid #AFAFAF; border-radius: 0.375rem; }
.transfer-input:hover, .transfer-input:focus, .transfer-input:active { outline: none; border-color: #666; }
.max-cash-btn { position: absolute; top: 0.75rem; right: 0.5rem; padding: 0.25rem 0.5rem; background: transparent; border: 0.0625rem solid #E2E2E2; font-size: 0.625rem; border-radius: 6.25rem; }
.max-cash-btn:hover, .max-cash-btn:focus, .max-cash-btn:active { background: #ddd; }
.transfer-btn-div { margin-bottom: 1rem; }
.tleft-div-btn { margin-top: 4rem; }
.tright-div-btn { margin-top: 2.75rem; }

.transfer-btn { height: 3rem; width: 100%; padding: 0.625rem 1rem; font-weight: 700; }
.preview-btn { height: 3rem; width: 100%; padding: 0.625rem 1rem; font-weight: 700; background: rgba(12, 140, 255, 0.161); color: var(--theme-color); border: 0.0625rem solid #0C8CFF; }
.note-btn { height: 3rem; font-size: 0.875rem; padding: 0.625rem 1rem; font-weight: 400; background: #F8F8F8; color: #AFAFAF; border: 0.0625rem solid #AFAFAF; }

.send-to-div { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.st-name { position: relative; padding-left: 2rem; }
.st-name .st-icon { position: absolute; width: 1.5rem; height: 1.5rem; border-radius: 6.25rem; left: 0rem; top: 0rem; }
.st-name .st-h5 {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0rem;
}
.st-name .st-coin-name, .st-ava-text {
    font-size: 0.625rem;
    color: #AFAFAF;
    display: block;
}
.st-availabel-div {
    position: relative;
    padding-right: 1rem;
    display: block;
    background: url('../images/arrow-right.svg') no-repeat;
    background-position: center right;
    background-size: 0.3125rem;
    color: #2F2F2F;
}
.st-ava-value {
    font-size: 0.75rem;
    margin: 0;
    font-weight: 500;
}
.st-dow-line::after{
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 2.25rem;
    height: 1rem;
    width: 0.0625rem;
    background: #707070;
}
.address-input {
    width: 100%;
    font-weight: 500;
    background: #F8F8F8;
    border: 0.0625rem solid #E2E2E2;
    border-radius: 6.25rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}
.address-input::placeholder {
    color: #AFAFAF;
}
.address-input:hover, .address-input:focus, .address-input:active {
    outline: none;
    border-color: #999;
}
.receive-box {
    text-align: center;
    margin-top: 1rem;
}
.receive-box .receive-img-div {
    margin-bottom: 1rem;
}
.receive-box .receive-img-div .receive-qr-img {
    width: 12rem;
}
.receive-text {
    font-size: 1rem;
    font-weight: 500;
}


/* --- transfer page end --- */


/* --- buy sell section start --- */
@media only screen and (min-width: 576px) {
    .buy-sell-popup .modal-dialog {
        max-width: 25rem;
    }
}
.bs-close {
    width: 0.75em;
    height: 0.75em;
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
    background-color: #eee;
    border-radius: 6.25rem;
    background-size: 0.625rem;
    opacity: 1;
}
.bs-close:hover, .bs-close:focus, .bs-close:active {
    opacity: 1;
}
.buy-sell-popup .modal-body { padding: 0rem; }
.buy-sell-popup .add-out-cash-tab {
    margin-top: 0.25rem;
}
.tra-price-btn-row { display: flex; }
.tra-price-btn {
    width: 100%;
    display: block;
    background: #F8F8F8;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 1rem;
    margin: 0rem 0.25rem;
    outline: none;
    border: 0.0625rem solid #AFAFAF;
    border-radius: 6.25rem;
    color: #050505;
}
.tra-price-btn-row .tra-price-btn:first-child { margin-left: 0rem; }
.tra-price-btn-row .tra-price-btn:last-child { margin-right: 0rem; }
.tra-price-btn:hover, .tra-price-btn:focus, .tra-price-btn:active {
    background: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
}
.bs-pop-table tr td {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}
.bsp-table-right .as-lowas {
    font-size: 0.75rem;
    color: #AFAFAF;
    font-weight: 400;
}
.tra-coin-select .ss-option, .tra-coin-select-div .ss-single {
    display: flex;
    align-items: center;
}
.tra-coin-select .tra-coin-icon, .tra-coin-select-div .tra-coin-icon {
    width: 1.0625rem;
    min-width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 6.25rem;
}
.tra-coin-select .tra-coin-icon img, .tra-coin-select-div .tra-coin-icon img {
    width: 100%;
    height: 100%;
    border-radius: 6.25rem;
    object-fit: cover;
    display: block;
}
.tra-coin-select .tra-coin-name, .tra-coin-select-div .tra-coin-name {
    font-size: 0.75rem;
    color: #050505;
    padding-left: 0.1875rem;
    letter-spacing: -0.025rem;
}
.tra-coin-select-div .ss-main .ss-arrow {
    width: 0.625rem;
    height: 0.625rem;
    margin-right: 0.125rem;
}
.tra-coin-select-div {
    position: absolute;
    top: 0.75rem;
    right: 0.5rem;
}
.tra-coin-select-div .ss-main {
    background: transparent;
    border-radius: 6.25rem;
    border: 0.0625rem solid #E2E2E2;
    padding: 0.1875rem 0.25rem;
    min-height: auto;
}
.tra-coin-select .ss-search>input {
    padding: 0.15rem;
    font-size: 0.75rem;
}
.tra-coin-select-div .ss-main .ss-arrow path {
    stroke: #AFAFAF;
}
.ss-content.tra-coin-select .ss-list .ss-option {
    padding: 0.25rem 0.25rem;
    border-bottom: 0.0625rem solid #E2E2E2;
}
.ss-content.tra-coin-select .ss-list .ss-option:last-child {
    border-bottom: 0rem;
}
.ss-content.tra-coin-select .ss-list .ss-option.ss-selected, .ss-content.tra-coin-select .ss-list .ss-option:hover {
    background: var(--theme-color);
    color: #fff;
}
.ss-content.tra-coin-select .ss-list .ss-option.ss-selected .tra-coin-name, .ss-content.tra-coin-select .ss-list .ss-option:hover .tra-coin-name {
    color: #fff;
}
.ss-content.tra-coin-select .ss-list {
    max-height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
}
.ss-content.tra-coin-select .ss-list::-webkit-scrollbar {
    width: 0.125rem
}
.ss-content.tra-coin-select .ss-list::-webkit-scrollbar-track {
    background: #fff
}
.ss-content.tra-coin-select .ss-list::-webkit-scrollbar-thumb {
    background-color: #ddd;
    outline: 0.0625rem solid #ddd
}
/* --- buy sell section end --- */


@media only screen and (min-width: 992px) {
    .nav-toggler-div {
        display: none;
    }
}
@media only screen and (max-width: 991px) {
    header {
        background: #fff;
    }
    .header-inner {
        padding: 0rem 1rem;
    }
    .navbar-header {
        margin-top: 0rem;
        padding-left: 0rem;
        padding-right: 0rem;
        height: 3.75rem;
        border-radius: 0rem;
        background: transparent;
    }
    .side-menu {
        margin-top: 0.5rem;
    }
    .side-menu .navbar-nav .nav-item {
        padding: 0rem 1rem;
    }
    .side-menu .navbar-nav .nav-item .nav-link {
        padding: 0.5rem 1rem;
    }
    .app-menu.active{
        left: 0%;
        -webkit-transition: left .2s .2s;
        transition: left .2s .2s;
    }
    .main-content {
        padding-left: 0rem;
    }
    .small-container, .profile-small-container {
        max-width: 100%;
    }
    .app-menu {
        left: -100%;
        -webkit-transition: left .2s .2s; transition: left .2s .2s;
    }
    .main-logo { padding: 0.75rem 1rem 0.75rem 0rem; }
    .header-right {padding: 0rem; }
    .page-content {
        padding-top: 6rem;
    }
    .profile-card { margin-top: 0rem; }
}
@media only screen and (max-width: 767px) {
    .main-logo {
        width: auto;
    }
    .header-right {
        width: auto;
    }
    .acc-num {
        margin-right: 1rem;
        display: none;
    }
    .page-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media only screen and (max-width: 576px) {
    .cash-section-main {
        flex-direction: column;
    }
    .my-cash-card {
        width: 100%;
        margin-bottom: 1rem;
    }
    .cash-sec-right { width: 100%; }
    .hp-name {
        display: none;
    }
    .buy-btn {
        min-width: 4.5rem;
    }
    .page-heading .search-box {
        margin-top: 1rem;
    }
}



@media screen and (min-width: 300px){
    html { font-size: 13px; }
}
@media screen and (min-width: 400px){
    html { font-size: 13px; }
}
@media screen and (min-width: 500px){
    html { font-size: 13px; }
}
@media screen and (min-width: 600px){
    html { font-size: 13px; }
}
@media screen and (min-width: 700px){
    html { font-size: 13px; }
}
@media screen and (min-width: 800px){
    html { font-size: 13px; }
}
@media screen and (min-width: 900px){
    html { font-size: 13px; }
}
@media screen and (min-width: 1000px){
    html { font-size: 13px; }
}
@media screen and (min-width: 1100px){
    html { font-size: 14px; }
}
@media screen and (min-width: 1200px){
    html { font-size: 15px; }
}
@media screen and (min-width: 1300px){
    html { font-size: 16px; }
}
@media screen and (min-width: 1400px){
    html { font-size: 17px; }
}
@media screen and (min-width: 1500px){
    html { font-size: 18px; }
}
@media screen and (min-width: 1600px){
    html { font-size: 19px; }
}
@media screen and (min-width: 1700px){
    html { font-size: 20px; }
}
@media screen and (min-width: 1800px){
    html { font-size: 21px; }
}
@media screen and (min-width: 1900px){
    html { font-size: 22px; }
}
@media screen and (min-width: 2000px){
    html { font-size: 23px; }
}
@media screen and (min-width: 2100px){
    html { font-size: 24px; }
}
@media screen and (min-width: 2200px){
    html { font-size: 25px; }
}
@media screen and (min-width: 2300px){
    html { font-size: 26px; }
}
@media screen and (min-width: 2400px){
    html { font-size: 27px; }
}
@media screen and (min-width: 2500px){
    html { font-size: 28px; }
}
@media screen and (min-width: 2600px){
    html { font-size: 29px; }
}
@media screen and (min-width: 2700px){
    html { font-size: 30px; }
}
@media screen and (min-width: 2800px){
    html { font-size: 31px; }
}
@media screen and (min-width: 2900px){
    html { font-size: 32px; }
}
@media screen and (min-width: 3000px){
    html { font-size: 33px; }
}
@media screen and (min-width: 3100px){
    html { font-size: 34px; }
}
@media screen and (min-width: 3200px){
    html { font-size: 35px; }
}
@media screen and (min-width: 3300px){
    html { font-size: 36px; }
}
@media screen and (min-width: 3400px){
    html { font-size: 37px; }
}
@media screen and (min-width: 3500px){
    html { font-size: 38px; }
}
@media screen and (min-width: 3600px){
    html { font-size: 39px; }
}
@media screen and (min-width: 3700px){
    html { font-size: 40px; }
}
@media screen and (min-width: 3800px){
    html { font-size: 41px; }
}
@media screen and (min-width: 3900px){
    html { font-size: 42px; }
}
@media screen and (min-width: 4000px){
    html { font-size: 43px; }
}
@media screen and (min-width: 4100px){
    html { font-size: 44px; }
}
@media screen and (min-width: 4200px){
    html { font-size: 45px; }
}
@media screen and (min-width: 4300px){
    html { font-size: 46px; }
}
@media screen and (min-width: 4400px){
    html { font-size: 47px; }
}
@media screen and (min-width: 4500px){
    html { font-size: 48px; }
}
@media screen and (min-width: 4600px){
    html { font-size: 49px; }
}
@media screen and (min-width: 4700px){
    html { font-size: 50px; }
}
@media screen and (min-width: 4800px){
    html { font-size: 51px; }
}
@media screen and (min-width: 4900px){
    html { font-size: 52px; }
}
@media screen and (min-width: 5000px){
    html { font-size: 53px; }
}
@media screen and (min-width: 5100px){
    html { font-size: 54px; }
}
@media screen and (min-width: 5200px){
    html { font-size: 55px; }
}
@media screen and (min-width: 5300px){
    html { font-size: 56px; }
}
@media screen and (min-width: 5400px){
    html { font-size: 57px; }
}
@media screen and (min-width: 5500px){
    html { font-size: 58px; }
}
@media screen and (min-width: 5600px){
    html { font-size: 59px; }
}
@media screen and (min-width: 5700px){
    html { font-size: 60px; }
}
@media screen and (min-width: 5800px){
    html { font-size: 61px; }
}
@media screen and (min-width: 5900px){
    html { font-size: 62px; }
}
@media screen and (min-width: 6000px){
    html { font-size: 63px; }
}