@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&display=swap');
*{
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
    color: var(--text-1);
    font-size: 13px;
}
.scrip_name{
    text-align: left !important;
}
html{
    background: var(--bg-0);
}
body{
    background: radial-gradient(1200px 700px at 15% -10%, rgba(45, 124, 255, 0.18), transparent 60%),
                radial-gradient(900px 600px at 85% 5%, rgba(33, 203, 255, 0.12), transparent 55%),
                linear-gradient(180deg, #071a33 0%, #0a1c34 35%, #081525 100%);
    min-height: 100vh;
}
#app-body{
    min-height: calc(100vh - 70px);
}
#global-overlay{
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}
#global-overlay.active{
    display: block;
}
#global-overlay-content{
    width: 100%;
    height: 100%;
}
.overlay-panel-slide-start{
    transform: translateY(100%) !important;
    opacity: 0.98;
}
.overlay-panel-slide-in{
    transform: translateY(0) !important;
    opacity: 1;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.overlay-panel-slide-out{
    transform: translateY(100%) !important;
    opacity: 0.98;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.app-body-animating{
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.app-body-out-left{
    transform: translateX(-100%);
    opacity: 0.92;
}
.app-body-out-right{
    transform: translateX(100%);
    opacity: 0.92;
}
.app-body-pre-left{
    transform: translateX(-100%);
    opacity: 0.92;
    transition: none !important;
}
.app-body-pre-right{
    transform: translateX(100%);
    opacity: 0.92;
    transition: none !important;
}
.app-body-in{
    transform: translateX(0);
    opacity: 1;
}
@keyframes page_fade_up{
    from{
        opacity: 0;
        transform: translateY(8px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.home_page_main_div{
    animation: page_fade_up 0.45s ease both;
}
body::before{
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 24px 24px, 72px 72px;
    background-position: 0 0, 10px 10px;
    pointer-events: none;
    z-index: -1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/*start color*/
:root {
  --common-color: #000;
  --border-radius: 50%;
  --addbutton-radius: 25px;
  --font-body: "Sora", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --bg-0: #06111f;
  --bg-1: #0b1b2f;
  --panel-0: rgba(12, 26, 44, 0.92);
  --panel-1: rgba(16, 32, 54, 0.96);
  --panel-2: rgba(20, 40, 66, 0.88);
  --text-1: #eef4ff;
  --text-2: #b2c0d6;
  --text-3: #7d8aa4;
  --accent-1: #24d2ff;
  --accent-2: #2ee6b8;
  --accent-3: #ffb84d;
  --border-1: rgba(125, 160, 210, 0.2);
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/*end color */
a, p, abbr, address, ul, ol, li, table, tbody, thead, tr, th, td, pre, button, label,
input, select, option, optgroup, area, time, title, video, source, track, var, wbr, template, img,
svg, circle, path, sup, small, sub, i, ins, details, summary, strong, audio, aside, article, section,
samp, s, q, picture, object, param, form, nav, canvas, caption, meter, head, header, figcaption,
fieldset, meter, mark, map, main, legend, kbd, del, iframe, br, hr, footer, embed, em, dl, dd, dt,
dialog, dfn, colgroup, col, code, cite, blockquote, bdo, dir, track{
    line-height: 18px;
    font-family: var(--font-body);
}
h1{
    font-size: 18px;
    font-family: var(--font-display);
}
h2{
    font-size: 16px;
    font-family: var(--font-display);
}
h3{
    font-size: 15px;
    font-family: var(--font-display);
}
h4{
    font-size: 15px;
    font-family: var(--font-display);
}
h5{
    font-size: 14px;
    font-family: var(--font-display);
}
h6{
    font-size: 13px;
    font-family: var(--font-display);
}
p{
    font-size: 13px;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
}
input{
    outline: none;
}
.navy_blue_bg{
    background: var(--bg-1);
}

.navy_blue_clr{
    color: #000;
}
.light_grey_clr{
    color: var(--text-2);
}
.light_navyblue{
    color: #8494a3;
}
.white_clr{
    color: #fff;
}
.green_bg{
    background: #208549!important;
}
.green_clr{
    color: #28d18c!important;
}
.red_clr{
    color: #ff6b6b!important;
}
.blue_clr{
    color: #0000fd;
}
.red_bg{
    background: #b24153 !important;
}
.light_red_bg{
    background: rgba(255, 107, 107, 0.16);
    color: #ffb3ad !important;
    border: 1px solid rgba(255, 107, 107, 0.35);
    padding: 2px 6px;
    display: inline-block;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
}
.light_green_bg{
    background: rgba(40, 209, 140, 0.16);
    color: #b6f3d8 !important;
    border: 1px solid rgba(40, 209, 140, 0.35);
    padding: 2px 6px;
    display: inline-block;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
}
.light_blue_bg{
    background: #bbdefa;
  padding: 3px;
  display: inline-block;
  border-radius: 2px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
}
.m-t-10{
    margin-top: 10px;
}
/*start index page*/

.top_header {
    padding: 8px 12px 14px;
    top: 0px;
    width: 100%;
    position: sticky;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.98), rgba(10, 16, 26, 0.75));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-1);
    box-shadow: var(--shadow-1);
}

.header_loction_left {
    text-align: center;
    position: relative;
}
.header_loction_left h2{
    letter-spacing: 0.4px;
    font-weight: 600;
}
.header_loction_left .down_arrow{
    position: absolute;
    top: 2px;
    right: 0;
}
.header_loction_left .down_arrow i{
    font-size: 20px;
}
.future_btns{
   padding: 4px 8px 6px;
    position: sticky;
    top: 42px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.95), rgba(10, 16, 26, 0.7));
    border-bottom: 1px solid var(--border-1);
    backdrop-filter: blur(6px);
}
.future_btns .tab{
    display: flex;
    overflow: auto;
    gap: 4px;
    padding-bottom: 2px;
}
.future_btns .tab .tablinks {
    background: rgba(18, 27, 40, 0.6);
    border: 1px solid rgba(52, 74, 104, 0.35);
    width: auto;
    margin: 0;
    padding: 7px 10px;
    color: var(--text-3);
    position: relative;
    font-size: 11px;
    border-radius: 10px;
    letter-spacing: 0.2px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border 0.2s ease;
}
.future_btns .tab .tablinks.active{
    color: #071019;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(36, 210, 255, 0.25);
}
.future_btns .tab .tablinks.active::after{
    display: none;
}
.future_cntnt{
    position: relative;
    overflow: hidden;
}
.future_cntnt.no-slide{
    overflow: visible;
}
.future_cntnt.no-slide .tabcontent{
    position: relative;
}
.future_cntnt.no-slide .tabcontent:not(.active){
    display: block;
}
.future_cntnt>div{
    display: block;
}
.future_cntnt .tabcontent .future_search{
    position: relative;
    padding: 0 10px;
    margin: 8px 0 10px;
}
.future_cntnt .tabcontent .future_search input{
    background: none;
    width: 100%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    padding: 12px 14px 12px 36px;
    color: #0b111a;
    font-size: 14px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.future_cntnt .tabcontent .future_search input::-webkit-input-placeholder {
  color: #000;
  font-size: 16px;
}

.future_cntnt .tabcontent .future_search input:-ms-input-placeholder {
  color: #000;
  font-size: 16px;
}

.future_cntnt .tabcontent .future_search input::placeholder {
  color: #000;
  font-size: 16px;
}
.future_search .filter_btn{
    display: none;
}
.future_search .search_btn, .future_search .filter_btn{
    position: absolute;
    outline: none;
    background: transparent;
    border: none;
}
.future_search .search_btn{
    left: 13px;
    top: 12px;
}
.future_search .filter_btn{
    right: 12px;
    top: 12px;
}
.future_search .search_btn i, .future_search .filter_btn i{
    color: #5f6d84;
    background: transparent;
    font-size: 16px;
}

table {
  border-collapse: collapse;
  width: 100%;
}
.mxc_list table{
    background: var(--panel-0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

td, th {
  text-align: left;
  padding: 5px 2px;
}
.mxc_list{
    padding: 12px;
}
.mxc_list table tr td{
    border-bottom: 1px solid rgba(86, 120, 170, 0.25);
    text-align: center;
    vertical-align: top;
    padding: 12px 6px;
}
.mxc_list table tr{
    transition: background 0.2s ease;
}
.mxc_list table tr:hover{
    background: rgba(36, 210, 255, 0.06);
}
.list_cntnt .title {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.list_cntnt .title_number{
    font-size: 13px;
    padding: 3px 5px;
    border-radius: 8px;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
    background: rgba(9, 15, 25, 0.7);
    border: 1px solid rgba(36, 210, 255, 0.25);
}
.list_cntnt .id{
    font-size: 12px;
    font-weight: 400;
    color: var(--text-2);
}
.list_cntnt .chg{
    font-size: 11px;
    font-weight: 400;
    padding-top: 6px;
    color: var(--text-2);
}
.market_show{
    display: none;
}
.market_show.show_mar{
    display: block;
}
#home_time{
    display: none;
}
.market_top_list ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.market_top_list li{
    width: 33.33%;
    padding: 5px;
}
.market_top_list li .top_list_cntnt{
    text-align: center;
}
.market_top_list li .top_list_cntnt .title{
    text-transform: uppercase;
    font-weight: 500;
    color: #a7bbcd;
    font-size: 15px;
}
.market_top_list li .top_list_cntnt .list_num{
    color: #a7bbcd;
    font-size: 20px;
    font-weight: 700;
    padding-top: 3px;
    padding-bottom: 3px;   
}
.market_top_list li .top_list_cntnt .list_para{
    color: #a7bbcd;
    font-size: 13px;
}
.last_space{
    width: 100%;
    height: 52px;
}

.tabcontent.show{
    animation: show_tab 1s;
    -webkit-animation: show_tab 1s;
    -moz-animation: show_tab 1s;
    -o-animation: show_tab 1s;
}
.tabcontent{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.tabcontent:not(.active){
    display: none;
}
.tabcontent_trades{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.tabcontent_trades:not(.active){
    display: none;
}
@keyframes show_tab{
to{
opacity: 1;
}
from{
opacity: 0;
}
}
@-webkit-keyframes show_tab{
to{
opacity: 1;
}
from{
opacity: 0;
}
}
@-moz-keyframes show_tab{
to{
opacity: 1;
}
from{
opacity: 0;
}
}
@-o-keyframes show_tab{
to{
opacity: 1;
}
from{
opacity: 0;
}
}

.mcx_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
    background: #000;
    padding: 10px;
    display: none;
}
.mcx_header {
    text-align: center;
    padding-bottom: 10px;
    position: relative;
}
.arrow_mcx {
    position: absolute;
    top: 6px;
    left: 0;
}
.arrow_mcx i{
    font-size: 20px;
}
.mcx_modal_list {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
}
.mcx_modal_list ul{
    list-style-type: none;
}
.mcx_modal_list li {
    background: #a9c6d8;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
}
.mcx_modal_list li .lft_cntn .title{
    text-transform: uppercase;
    color: #000;
}
.mcx_modal_list li .lft_cntn .para{
    color: #000;   
}
.mcx_modal_list li .rgt_menu i{
    color: #000;
    font-size: 18px;   
}
.table_resonsive{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.mcx_search_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: 3;
    display: none;
    max-width: 100vw;
    overflow: hidden;
}
.mcx_search_modal.active{
    display: block;
}
.mcx_search_header {
    box-shadow: 0 0 10px rgb(42 72 100);
    padding: 7px 10px;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
}
.mcx_search_header .icn i{
    font-size: 20px;
}
.mcx_search_header .mcx_search_input{
    margin-left: 10px;
    width: 100%;
    min-width: 0;
    flex: 1;
    position: relative;
}
.mcx_search_header .mcx_search_input input{
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 54px 10px 10px;
    min-width: 0;
}
.mcx_search_header .mcx_search_input .clear_btn{
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
}
.mcx_search_header .mcx_search_input input::-webkit-placeholder{
    color: #fff;
}
.mcx_search_header .mcx_search_input input::-ms-placeholder{
    color: #fff;
}
.mcx_search_header .mcx_search_input input::placeholder{
    color: #fff;
}
.mcx_search_middle_cntnt {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    overflow-x: hidden;
}
.mcx_search_middle_cntnt .mxc_list{
    width: 100%;
    overflow-x: hidden;
}
.mcx_search_middle_cntnt .mxc_list table{
    width: 100%;
    table-layout: fixed;
}
.mcx_search_middle_cntnt .mxc_list table tr td:first-child{
    width: 36%;
    text-align: left;
}
.mcx_search_middle_cntnt .mxc_list table tr td{
    width: 16%;
    overflow: hidden;
}
.mcx_search_middle_cntnt .mxc_list table tr td:first-child .list_cntnt{
    text-align: left;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt{
    text-align: center;
    position: relative;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .title_number{
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 5px;
    width: fit-content;
    margin: 0 auto;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .check_box{
    position: absolute;
    right: 0;
    top: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .check_mark{
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    margin: 0 0 0 auto;
    position: relative;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .check_mark::after {
    content: "+";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt input:checked ~ .check_mark{
    border: 2px solid #208549;
    background: #208549;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt input:checked ~ .check_mark::after{
    content: "\2713";
    display: block;
}
.market_order_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 10px;
    top: 0;
    left: 0;
    background: #000;
    z-index: 4;
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
}
.close-trade-overlay{
    position: fixed;
    inset: 0;
    z-index: 4;
    background: #000;
    overflow: auto;
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
}
.contact-overlay-panel{
    position: fixed;
    inset: 0;
    z-index: 4;
    background: #000;
    overflow: auto;
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
}
.market_order_header button{
    background: transparent;
    border: none;
}
.market_order_header button.times{
        margin: 0 0 0 auto;
    display: block;
    width: fit-content;
;
}
.market_order_header button.times i{
    font-size: 27px;
}
.market_order_header .title{
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
}
.market_order_header .tab{
    margin-top: 10px;
    background: #142e46;
    padding: 5px;
}
.market_order_header .tab .tablinks2{
    width: 49%;
    padding: 8px;
}
.market_order_header .tab .tablinks2.active{
    background: #fff;
    color: #142e46;
}
.market_order_middle_cntnt{
        width: 100%;
    height: calc(100% - 100px);
    overflow: auto;

}
.market_modal_cntnt {
    margin-top: 20px;
}
.market_order_tablinks>div{
    display: none;
}
.market_order_tablinks>div:first-child{
    display: block;
}
.market_modal_cntnt li{
    display: block;
    margin-top: 8px;
}
.market_modal_cntnt li label{
    display: block;
}
.market_modal_cntnt li input{
        width: 100%;
    display: block;
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
}
.market_modal_cntnt .market_btns{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
}
.market_modal_cntnt .market_btns{
    margin-top: 20px;
}
.market_modal_cntnt .market_btns .sell_btn{
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 64px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.market_modal_cntnt .market_btns .sell_btn:active{
    transform: translateY(1px) scale(0.99);
    filter: brightness(0.98);
}
.market_modal_cntnt .market_btns .sell_btn[disabled]{
    opacity: 0.65;
    filter: grayscale(0.15);
}
.market_modal_cntnt .market_btns .sell_btn.red_bg{
    background: linear-gradient(135deg, #ff7070, #ff8854) !important;
    border-color: rgba(255, 181, 167, 0.35);
}
.market_modal_cntnt .market_btns .sell_btn.green_bg{
    background: linear-gradient(135deg, #2cd89e, #32c5ff) !important;
    border-color: rgba(168, 255, 228, 0.35);
}
.market_modal_cntnt .market_btns .sell_btn span{
    display: block;
    color: #051017;
}
.market_modal_cntnt .market_btns .sell_btn .sell{
    font-size: 11px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    opacity: 0.9;
}
.market_modal_cntnt .market_btns .sell_btn .title{
    font-size: 21px;
    padding-top: 5px;
    font-weight: 800;
    line-height: 1.05;
}
.market_order_tablinks{
    position: relative;
    overflow: hidden;
}
#market .market_modal_cntnt{
    will-change: transform, opacity;
}
#market .market_modal_cntnt.order-type-animating{
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
}
#market .market_modal_cntnt.order-type-out-left{
    transform: translateX(-100%);
    opacity: 0.96;
}
#market .market_modal_cntnt.order-type-out-right{
    transform: translateX(100%);
    opacity: 0.96;
}
#market .market_modal_cntnt.order-type-pre-left{
    transform: translateX(-100%);
    opacity: 0.96;
    transition: none !important;
}
#market .market_modal_cntnt.order-type-pre-right{
    transform: translateX(100%);
    opacity: 0.96;
    transition: none !important;
}
#market .market_modal_cntnt.order-type-in{
    transform: translateX(0);
    opacity: 1;
}
.mxc_list.portfolio_cntnt table tr td:first-child{
    text-align: left;
}
.mxc_list.portfolio_cntnt table tr td:last-child{
    text-align: right;
}
.mxc_list.portfolio_cntnt table tr td .list_cntnt p{
    color: var(--text-2);
    line-height: 22px;
    padding: 0;
}
.mxc_list.portfolio_cntnt table tr td .list_cntnt p b{
    color: var(--text-1);
}
.portfolio_table{
    padding: 10px;
}
.portfolio_table_bg{
    background: linear-gradient(135deg, rgba(36, 210, 255, 0.12), rgba(46, 230, 184, 0.12));
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(46, 230, 184, 0.2);
    box-shadow: var(--shadow-1);
}
.portfolio_table table tr td{
    background: transparent;
    border-bottom: 1px solid rgba(46, 230, 184, 0.2);
}
.portfolio_table table tr:last-child td{
    border-bottom: none;
}
.portfolio_table table tr td p{
    color: var(--text-1);
}
.portfolio_table table tr td p span{
    color: var(--text-1);
}
.portfolio_table table tr td,
.portfolio_table table tr td b{
    color: var(--text-1);
}
.portfolio_table table tr td .net_holding_margin{
    color: var(--text-1) !important;
}
.portfolio_table table tr td .portfolio_list .para{
    font-size: 12px;
    color: var(--text-2);
}
.portfolio_table table tr td .portfolio_list .title{
    font-size: 14px;
    font-weight: 600;
    padding-top: 8px;
    color: var(--text-1);
}
.order_pending{
    padding: 10px;
    text-align: center;
    margin-top: 40px;
}
.order_pending img{
    width: 150px;
}
.order_pending h3{
    font-weight: 600;
    color: #92a8bd;
}
.order_pending p{
    color: #92a8bd;
    font-size: 15px;
}
.trades_active_btns {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.trades_active_btns .active_mcx{
    width: 100%;
    background: linear-gradient(135deg, #ff5c5c, #ff8a5b);
    text-align: center;
    padding: 6px;
    margin-left: 5px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}
.close_trade_btn{
    background: linear-gradient(135deg, #ff6b6b, #ff9f5f);
    color: #0b1017!important;
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 6px 10px!important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0.2px;
}
.trade_row td{
    padding: 8px 0;
}
.trade_card{
    background: var(--panel-1);
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-1);
}
.trade_top{
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.trade_left{
    min-width: 0;
    text-align: left;
}
.trade_badges{
    margin-bottom: 6px;
}
.trade_badges .tag_badge{
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.08);
}
.trade_title{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.trade_sub{
    font-size: 11px;
    color: var(--text-3);
}
.trade_right{
    text-align: right;
    min-width: 120px;
}
.trade_time{
    font-size: 11px;
    color: var(--text-3);
}
.trade_price{
    font-size: 14px;
    font-weight: 700;
    margin-top: 6px;
}
.trade_meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(125, 160, 210, 0.18);
    font-size: 11px;
    color: var(--text-2);
}
.trade_meta b{
    color: var(--text-1);
}
.exit_trade_header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    box-shadow: 0 0 10px 0 rgb(34 34 34 / 60%);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.98), rgba(10, 16, 26, 0.75));
    border-bottom: 1px solid var(--border-1);
    backdrop-filter: blur(8px);
}
.exit_trade_header .icn i{
    font-size: 18px;
}
.exit_trade_header .title{
    margin-left: 10px;
}
.exit_trade_header .title h3{
    font-weight: 600;
    font-size: 15px;
}
.exit_trade_cntnt {
    margin-top: 40px;
    margin-bottom: 60px;
    overflow: auto;
}
.exit_trade_cntnt_top{
    padding:  10px;
    text-align: center;
}
.exit_trade_cntnt_top .title{
    color: #a7bbcd;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.exit_trade_cntnt_top .exit_buy_btn{
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.exit_trade_cntnt_top .exit_buy_btn:active{
    transform: translateY(1px) scale(0.99);
    filter: brightness(0.98);
}
.exit_trade_cntnt_top .exit_buy_btn span{
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    color: #081018;
}
.exit_trade_cntnt_top .exit_buy_btn.green_bg{
    background: linear-gradient(135deg, #2cd89e, #32c5ff) !important;
    border-color: rgba(168, 255, 228, 0.35);
    color: #081018 !important;
}
.exit_trade_cntnt_top .exit_buy_btn.red_bg{
    background: linear-gradient(135deg, #ff7070, #ff8854) !important;
    border-color: rgba(255, 181, 167, 0.35);
    color: #081018 !important;
}
.success_msg_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 70%);
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.45s ease;
}
.success_msg_cntnt {
    width: 80%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(74 74 74 / 70%);
    padding: 20px;
    text-align: center;
    transform: scale(1);
    opacity: 1;
}
.success_msg_modal.modal-zoom-in{
    opacity: 1;
}
.success_msg_modal.modal-zoom-in .success_msg_cntnt{
    animation: modal_zoom_in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(1);
    opacity: 1;
}
.success_msg_modal.modal-zoom-out{
    opacity: 0;
}
.success_msg_modal.modal-zoom-out .success_msg_cntnt{
    animation: modal_zoom_out 0.45s cubic-bezier(0.4, 0, 1, 1);
    transform: scale(0.92);
    opacity: 0.96;
}
@keyframes modal_zoom_in{
    from{
        transform: scale(0.9);
        opacity: 0.9;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes modal_zoom_out{
    from{
        transform: scale(1);
        opacity: 1;
    }
    to{
        transform: scale(0.92);
        opacity: 0.96;
    }
}
.success_msg_cntnt img{
    width: 100px;
}
.modal_fail_symbol{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 107, 107, 0.14);
    border: 2px solid rgba(255, 107, 107, 0.45);
    margin-bottom: 6px;
}
.modal_fail_symbol i{
    font-size: 40px;
    color: #ff6678;
    line-height: 1;
}
.success_msg_cntnt .title{
    color: #000;
    font-size: 22px;
}
.success_msg_cntnt .para{
    color: #000;
    font-size: 15px;
    padding-top: 5px;
}
.success_msg_cntnt .para span{
    color: #000;
    text-transform: uppercase;   
}
.success_msg_cntnt .ok_btn{
    padding: 5px 15px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 3px;
}
.enter_password_form {
    margin-top: 15px;
}
.enter_password_form ul{
    margin: 0;
    padding: 0;
}
.enter_password_form li{
    display: block;
}
.enter_password_form li label{
    display: block;
    color: #000;
    text-align: left;
    font-weight: 500;
    margin-bottom: 5px;
}
.enter_password_form li input{
    width: 100%;
    background: transparent;
    border: transparent;
    background: #f1f1f1;
    padding: 10px 16px;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #000;
}
.enter_password_form li input:focus{
    border: 1px solid #4caf50;
}
.enter_password_form li .green_bg{
    border: none;
    display: inline-block;
    padding: 7px 15px;
    margin-top: 12px;
}
.my_account_top_heading {
    padding: 8px 10px;
    text-align: center;
}
.my_account_top_heading h5{
    font-size: 16px;
    font-family: var(--font-display);
}
.my_account_cntnt{
    padding: 8px 10px 12px;
}
.account_list .info_txt{
    text-transform: uppercase;
    font-weight: 500;
}
.account_list ul{
    margin-top: 10px;
    display: grid;
    gap: 10px;
}
.account_list li{
    display: block;
}
.account_list li{
    background: var(--panel-0);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 0;
    box-shadow: var(--shadow-1);
}
.account_list li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
}
/* Notification rows don't have anchor wrappers, so apply row padding directly. */
#notifications li{
    padding: 10px 12px;
}
.account_list li .txt{
    flex: 1;
}
.account_list li .icn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.account_list li .txt{
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-1);
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}
.account_list li .icn{
    display: inline-block;
    font-size: 11px;
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 8px;
}
.account_list li p{
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-2);
}
.profile_title{
    color: #a9c6d8;
    padding-bottom: 3px;
}
.profile_title span{
    color: #a9c6d8;
}
.form_group_cntnt {
    padding: 8px 14px;
}
.form_group_cntnt li{
    margin-top: 10px;
    display: block;
}
.form_group_cntnt li label{
    display: block;
    color: #98abbd;
    font-size: 12px;
    padding-bottom: 4px;
}
.form_group_cntnt li input{
    background: transparent;
    border: transparent;
    width: 100%;
    background: rgba(88, 120, 149, 0.45);
    padding: 8px 12px;
    border-radius: 8px;
    outline: none;
    color: #fff;
    border: 1px solid rgba(152, 171, 189, 0.3);
}
.form_group_cntnt li input:focus{
    border: 1px solid var(--accent-1);
}
.form_group_cntnt li input::-webkit-input-placeholder {
  color: #a0c1df;
}

.form_group_cntnt li input:-ms-input-placeholder { 
  color: #a0c1df;
}

.form_group_cntnt li input::placeholder {
  color: #a0c1df;
}
.change_pass_btn {
    width: 100%;
    text-align: center;
    background: transparent;
    border: transparent;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    padding: 10px;
    border-radius: 10px;
    text-transform: uppercase;
    outline: none;
    color: #061018;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.signup_main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    flex-direction: column;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px;
}
.auth_card{
    width: min(460px, 100%);
    background: linear-gradient(160deg, rgba(12, 26, 44, 0.96), rgba(9, 20, 35, 0.94));
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-1);
    border-radius: 16px;
    padding: 10px 16px 18px;
    position: relative;
    animation: page_fade_up 0.35s ease both;
    margin-top: 26px;
}
.auth_contact_corner{
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 26, 44, 0.9);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-1);
    z-index: 5;
}
.auth_contact_corner i{
    font-size: 18px;
    color: var(--accent-1);
}
.signup_main .login_top{
    text-align: center;
}
.signup_main .login_top .logo_logo{
    width: 86px;
    height: 86px;
    overflow: hidden;
    border-radius: 25%;
    background: #fff;
    margin: -44px auto 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(36, 210, 255, 0.45);
}
.signup_main .login_top .logo_logo img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.auth_subtitle{
    margin-top: 8px;
    color: var(--text-3);
    text-align: center;
}
.signup_main .signup_form {
    margin-top: 14px;
    width:100%;
    margin-bottom: 8px;
}
.signup_main .signup_form2 li{
    display: block;
    margin-top: 12px;
}
.signup_main .form_input_box input[type="text"], .signup_main .form_input_box input[type="number"], .signup_main .form_input_box input[type="password"], .signup_main .form_input_box input[type="email"], .signup_main .form_input_box textarea{
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-1);
    padding: 12px 10px;
    border-radius: 10px;
    width: 100%;
    outline: none;
    color: var(--text-1);
}
.signup_main .form_input_box input[type="text"]:focus, .signup_main .form_input_box input[type="number"]:focus, .signup_main .form_input_box input[type="password"]:focus, .signup_main .form_input_box input[type="email"]:focus, .signup_main .form_input_box textarea:focus{
 border: 1px solid var(--accent-1);
}
.signup_main .form_input_box input::-webkit-input-placeholder, .signup_main .form_input_box textarea::-webkit-input-placeholder {
  color: #a0c1df;
}

.signup_main .form_input_box input:-ms-input-placeholder, .signup_main .form_input_box textarea:-ms-input-placeholder { 
  color: #a0c1df;
}

.signup_main .form_input_box input::placeholder, .signup_main .form_input_box textarea::placeholder {
  color: #a0c1df;
}
.error_red {
    color: red;
    font-size: 14px;
}
.signup_main .signup_btn{
    width: 100%;
    border: none;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    padding: 12px;
    color: #041018;
    font-weight: 700;
    text-transform: uppercase;
    outline: none;
    border-radius: 10px;
    letter-spacing: 0.2px;
}
.signin_btn {
    margin-top: 5px;
}
.signin_btn .para{
    font-size: 13px;
    line-height: 15px;
    display: none;
}
.signin_btn .para b{
    font-size: 13px;
}
.signup_main .any_ques {
    position: static;
    width: 100%;
    text-align: center;
}
.signup_main .any_ques p{
    font-size: 13px;
    margin-top: 10px;
}
.signup_main .any_ques p:first-child{
    margin-top: 0;
}
.signup_main .any_ques p a{
    font-weight: 500;
}
.auth_help_txt{
    color: var(--text-3);
}
.auth_inline_link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #c4efff !important;
    font-weight: 600 !important;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid rgba(36, 210, 255, 0.35);
    background: rgba(36, 210, 255, 0.08);
}
.otp_action_line{
    text-align: center;
    margin-top: 12px;
}
.otp_resend_btn{
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid rgba(36, 210, 255, 0.4);
    border-radius: 9px;
    color: #a9edff;
    background: rgba(36, 210, 255, 0.08);
    font-weight: 600;
}
.auth_legal_links{
    margin-top: 12px;
    text-align: center;
    width: 100%;
}
.auth_legal_links a{
    font-size: 11px;
    color: #b9d7f3 !important;
}
.auth_legal_sep{
    margin: 0 6px;
    color: #7d8aa4;
    font-size: 11px;
}
.contact-overlay-panel .exit_trade_header{
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.98), rgba(10, 16, 26, 0.86));
}
.contact-overlay-panel .exit_trade_cntnt{
    margin-top: 52px;
    margin-bottom: 0;
    padding: 14px;
    height: calc(100vh - 52px);
    overflow: auto;
}
.contact-overlay-panel .contact_form_shell{
    width: min(520px, 100%);
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(12, 26, 44, 0.95), rgba(9, 20, 35, 0.92));
    border: 1px solid var(--border-1);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow-1);
}
.contact-overlay-panel .contact_brand{
    text-align: center;
    margin-bottom: 10px;
}
.contact-overlay-panel .contact_brand p{
    color: var(--text-3);
    line-height: 1.4;
}
.contact-overlay-panel .signup_form2 li{
    margin-top: 12px;
}
.contact-overlay-panel .form_input_box input[type="text"],
.contact-overlay-panel .form_input_box input[type="number"],
.contact-overlay-panel .form_input_box input[type="password"],
.contact-overlay-panel .form_input_box input[type="email"],
.contact-overlay-panel .form_input_box textarea{
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-1);
    padding: 11px 10px;
    border-radius: 10px;
    width: 100%;
}
.contact-overlay-panel .form_input_box input:focus,
.contact-overlay-panel .form_input_box textarea:focus{
    border: 1px solid var(--accent-1);
}
.contact-overlay-panel #enquiry_err{
    margin: 6px 0 6px;
    text-align: center;
    color: #ffd7d7;
}
.contact-overlay-panel .contact_send_btn{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: #061018;
    padding: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(36, 210, 255, 0.2);
}







.grocery_footer_menu {
    position: fixed;
    bottom: 0px;
    background: linear-gradient(180deg, rgba(10, 16, 26, 0.7), rgba(10, 16, 26, 0.98));
    width: 100%;
    padding: 8px 0;
    border-top: 1px solid var(--border-1);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}
.grocery_footer_menu ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.grocery_footer_menu li{
    width: 100%;
    text-align: center;
}
.grocery_footer_menu li a{
    display: block;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.grocery_footer_menu li a span{
    display: block;
    text-align: center;
}
.grocery_footer_menu li a span.cntnt_menu{
    padding-top: 5px;
    color: var(--text-3);
    text-align: center;
}
.grocery_footer_menu li a span.icon_footer{
    line-height: 0px;
    text-align: center;
}

.grocery_footer_menu li a span.icon_footer i{
    color: var(--text-3);
    font-size: 20px;
    text-align: center;
}
.grocery_footer_menu li.active2 a span.icon_footer i{
    color: var(--accent-2);
    text-align: center;
}
.grocery_footer_menu li.active2 a span.cntnt_menu{
    color: var(--text-1);
    text-align: center;
}

.wf_select{
    display: block;
    width: 100%;
    color: #fff;
    background: #587895;
    padding: 10px;
}

.otplink{
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    color: #86cfda;
}

.otplink a{
    color: #51a9f6;
}
.whatsapp_link{
    margin: 15px 0;
}