@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: system-ui;
    color: #000;
    font-size: 14px;
}
.scrip_name{
    text-align: left !important;
}
html{
    background: #fff;
}
#app-body{
    min-height: calc(100vh - 70px);
}
.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;
}

/* Slide up/down transition for contact-us overlay */
#content.slide-up {
    animation: slideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#content.slide-down {
    animation: slideDown 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contact-us-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--premium-bg, #fff);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
}

.contact-us-content {
    height: 100%;
    overflow: hidden;
}

.contact-us-overlay.slide-up {
    animation: slideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contact-us-overlay.slide-down {
    animation: slideDown 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

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;
}
/*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: 17px;*/
    font-family: system-ui;
    background: #fff;
}
h1{
    font-size: 20px;
}
h2{
    font-size: 18px;
    display: block;
    width: 100%;
    margin-top: 10px;
}
h3{
    font-size: 17px;
}
h4{
    font-size: 16px;
    text-align: center;
}
h5{
    font-size: 15px;
}
h6{
    font-size: 14px;
}
p{
    font-size: 12px;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
}
input{
    outline: none;
}
.navy_blue_bg{
    background: #f1faee;
}

.navy_blue_clr{
    color: #000;
}
.light_grey_clr{
    color: #103455;
    visibility: visible;
    height: 20px;
}
.light_navyblue{
    color: #8494a3;
}
.white_clr{
    color: #000;
}
.green_bg{
    color: #208549!important;
}
.green_clr{
    color: #2dc533!important;
}
.red_clr{
    color: #f44336!important;
}
.blue_clr{
    color: #0000fd;
}
.red_bg{
/*    background: #b24153;*/
    color:#ff0000;
}
.light_red_bg{
/*    background: #ffcdd2;
    padding: 3px;*/
    display: inline-block;
    border-radius: 2px;
    font-weight: 500;
    font-size: 13px;
/*    line-height: 1.25;*/
}
.light_green_bg{
/*    background: #c8e6ca;
    padding: 3px 3px;*/
    display: inline-block;
    border-radius: 2px;
    font-weight: 500;
    font-size: 13px;
/*    line-height: 1.25;*/
}
.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: 5px;
    top: 0px;
    width: 100%;
}

.header_loction_left {
    text-align: center;
    position: relative;
    display: inline-flex;
    width: 100%;
}
.header_loction_left .down_arrow{
    position: absolute;
    top: 2px;
    right: 0;
}
.header_loction_left .down_arrow i{
    font-size: 20px;
}
.future_btns{
    padding: 0 8px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fa;
    border-bottom: #000 0.05em solid;
}
.future_btns .tab{
    display: flex;
}
.future_btns .tab .tablinks {
    background: transparent;
    border: transparent;
    width: 100%;
    margin: 0;
    padding: 2px;
    color: #8494a3;
    font-size: 11px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
}
.future_btns .tab .tablinks.active{
    color: #000;
    border-bottom: #184e7d 2px solid;
}
.future_btns .tab .tablinks.active::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: #f1faee;
    bottom: 0;
    left: 0;
}
.future_cntnt>div{
    display: none;
}
.future_cntnt>div:first-child{
    display: block;
}
.future_cntnt .tabcontent .future_search{
    position: relative;
    border-bottom: 0.05em solid;
    display: none;
}
.future_cntnt .tabcontent .future_search input{
    background: none;
    width: 100%;
    border: none;
    background: #f8f9fa;
    padding: 15px 40px;
    color: #000;
    font-size: 16px;
}
.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 .search_btn, .future_search .filter_btn{
    position: absolute;
    outline: none;
    background: transparent;
    border: none;
}
.future_search .search_btn{
    left: 13px;
    top: 15px;
}
.future_search .filter_btn{
    right: 13px;
    top: 15px;
}
.future_search .search_btn i, .future_search .filter_btn i{
    color: #8494a3;
    background: transparent;
    font-size: 18px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    text-align: left;
    padding: 4px;
}
.mxc_list{
    padding: 10px;
}
.mxc_list table tr td{
    /* border-bottom:0.05em solid #4f708d; */
    text-align: center;
    vertical-align: top;
}
.list_cntnt .title {
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;

}
.list_cntnt .title_number{
    font-size: 14px;
    padding: 3px;
    border-radius: 5px;
    font-weight: 400;
    width: fit-content;
    margin: 0 auto;
    letter-spacing: -1px;
}
.list_cntnt .id{
    font-size: 14px;
    font-weight: 300;
}
.list_cntnt .chg{
    font-size: 12px;
    font-weight: 300;
    padding-top: 0px;
}
.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: 65px;
}

.tabcontent.show{
    animation: show_tab 1s;
    -webkit-animation: show_tab 1s;
    -moz-animation: show_tab 1s;
    -o-animation: show_tab 1s;
}
@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: #f1faee;
    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: #f8f9fa;
    z-index: 3;
    display: none;
}
.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%;
    justify-content: flex-start;
}
.mcx_search_header .icn i{
    font-size: 20px;
}
.mcx_search_header .mcx_search_input{
    margin-left: 10px;
    width: 100%;
    position: relative;
}
.mcx_search_header .mcx_search_input input{
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px;
}
.mcx_search_header .mcx_search_input .clear_btn{
    position: absolute;
    right: 0;
    top: 10px;
    background: transparent;
    border: none;
}
.mcx_search_header .mcx_search_input input::-webkit-placeholder{
    color: #000;
}
.mcx_search_header .mcx_search_input input::-ms-placeholder{
    color: #000;
}
.mcx_search_header .mcx_search_input input::placeholder{
    color: #000;
}
.mcx_search_middle_cntnt {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}
.mcx_search_middle_cntnt .mxc_list table tr td:first-child{
    width: 40%!important;
    text-align: left;
}
.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: 100%;
    z-index: 1;
    opacity: 0;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .check_mark{
    width: 16px;
    height: 16px;
    border: 1px solid #4f708d;
    margin: 0 0 0 auto;
    position: relative;
    border-radius: 5px;
}
.mcx_search_middle_cntnt .mxc_list table tr .list_cntnt .check_mark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;
}
.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{
    display: block;
}
.market_order_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 10px;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 4;
}
.market_order_header button{
    background: transparent;
    border: none;
    color:#fff;
}
.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: #30681d;
    padding: 5px;
    font-family: sans-serif;
}
.market_order_header .tab .tablinks2{
    width: 49%;
    padding: 8px;
}
.market_order_header .tab .tablinks2.active{
    background: #f1faee;
    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 #000;
    outline: none;
}
.market_modal_cntnt .market_btns{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.market_modal_cntnt .market_btns{
    margin-top: 20px;
}
.market_modal_cntnt .market_btns .sell_btn{
    width: 100%;
    text-align: center;
    padding: 10px;
    border: 0;
    margin: 0 5px 0 5px;
    border-radius: 5px;
}
/*.market_modal_cntnt .market_btns .sell_btn span{
    display: block;
}*/
.market_modal_cntnt .market_btns .sell_btn .sell{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    font-family: sans-serif;
}
.market_modal_cntnt .market_btns .sell_btn .title{
    font-size: 15px;
    padding-top: 8px;
    font-weight: 600;
    color:#fff;
}
.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: #000;
    font-size: 10px;
/*    line-height: 15px;*/
    padding: 2px;
}
.mxc_list.portfolio_cntnt table tr td .list_cntnt p b{
    color: #000;
}
.portfolio_table{
    padding: 0px;
}
.portfolio_table_bg{
    /*background: #a9c6d8;*/
    padding: 2px 5px;
}
.portfolio_table table tr td{
    /*background: #a9c6d8;*/
    border-bottom: 0.05em solid #929da7;
}
.portfolio_table table tr:last-child td{
    border-bottom: none;
}
.portfolio_table table tr td p{
    color: #000;
}
.portfolio_table table tr td p span{
    color: #000;
}
.portfolio_table table tr td .portfolio_list .para{
    font-size: 12px;
}
.portfolio_table table tr td .portfolio_list .title{
    font-size: 12px;
    font-weight: 600;
    padding-top: 5px;
}
.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: #1f6d05;
    border-radius: 4px;
    text-align: center;
    padding: 5px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    font-family: sans-serif;
}
.close_trade_btn{
    background: #5d5454;
    color: #fff!important;
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 4px 6px!important;
    font-size: 15px;
    position: relative;
    border-radius: 5px;
    display: flex;
/*    margin: 45px -110px -10px;*/
}
.exit_trade_header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 10px;
    box-shadow: 0 0 10px 0 rgb(34 34 34 / 60%);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: #f8f9fa;
}
.exit_trade_header .icn i{
    font-size: 23px;
}
.exit_trade_header .title{
    margin-left: 15px;
}
.exit_trade_header .title h3{
    font-weight: 400;
}
.exit_trade_cntnt {
    margin: 55px auto;
    overflow: auto;
    background: #70b2f0;
    height: 100vh;
/*    padding: 10px;*/
}
.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: 10px;
    display: block;
}
.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;
}
.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;
}
.success_msg_cntnt img{
    width: 100px;
}
.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;
    background: green;
    color: #fff !important;
}
.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: 10px;
    text-align: center;
}
.my_account_top_heading h5{
    font-size: 20px;
}
.my_account_cntnt{
    padding: 10px;
}
.account_list .info_txt{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    padding: 8px;
    text-align: center;
}
.account_list ul{
    margin-top: 1px;
}
.account_list li{
    display: block;
}
.account_list li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;

    border-bottom: 2px solid #f8f9fa;
}
#upload_msg{
    text-align: center;
    color: red;
}
.account_list li a span, .account_list li a span i{
    color: #000;
}
.profile_title{
    color: #1781c4;
    padding: 7px;
}
.profile_title span{
    color: #a9c6d8;
}
.form_group_cntnt {
    padding: 10px 20px;
}
.form_group_cntnt li{
    margin-top: 15px;
    display: block;
}
.form_group_cntnt li label{
    display: block;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 3px;
}
.form_group_cntnt li input{
    
    background: transparent;
    border: transparent;
    width: 100%;
    /* background: #587895; */
    padding: 6px;
    border-radius: 2px;
    outline: none;
    color: #000;
    border-bottom: 1px solid #e3e8ed;
}
.form_group_cntnt li input:focus{
    border-bottom: 1px solid #fff;
}
.form_group_cntnt li input::-webkit-input-placeholder {
    color: #000;
}

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

.form_group_cntnt li input::placeholder {
    color: #000;
}
.change_pass_btn {
    width: 100%;
    text-align: center;
    border: transparent;
    background: #cbd4de;
    padding: 12px;
    border-radius: 5px;
    text-transform: uppercase;
    outline: none;
}
.login_top{
    text-align: center;
/*    background: #fff;*/
}
.login_top .logo_logo{
    width: 100px;
    height: 100px;
    overflow: hidden;
/*    border-radius: 50%;
    background: #f1faee;*/
    margin: 10px auto;
}
.login_top .logo_logo img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: 50%;
}
.signup_main {
    align-items: center;
    justify-content: center;
    position: fixed;
    flex-direction: column;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* padding: 10px; */
    margin-top: 30px;
}
.signup_form {
    margin: 12px;
    padding: 8px 0 20px;
    background: #fff;
    border-radius: 10px;
}
.signup_form2 li{
    display: block;
    margin-top: 15px;
    background: transparent;
}
.form_input_box input[type="text"], .form_input_box input[type="number"], .form_input_box input[type="password"], .form_input_box input[type="email"], .form_input_box textarea{
    background: #fff;
    opacity:60%;
    border: transparent;
    padding: 12px 3px;
    border-bottom: 1px solid #a1b5c7;
    width: 100%;
    outline: none;
    color: #000;
    font-weight: bold;
}
.form_input_box input[type="text"]:focus, .form_input_box input[type="number"]:focus, .form_input_box input[type="password"]:focus, .form_input_box input[type="email"]:focus, .form_input_box textarea:focus{
    border-bottom: 2px solid blue;
}
.form_input_box input::-webkit-input-placeholder, .form_input_box textarea::-webkit-input-placeholder {
    color: #000;
}

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

.form_input_box input::placeholder, .form_input_box textarea::placeholder {
    color: #000;
}
.error_red {
    color: red;
    font-size: 14px;
}
.signup_btn{
    width: 100%;
    background: transparent;
    border: none;
    background: #1d609d;
    padding: 12px;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    outline: none;
}
/* .signin_btn { */
/*    margin-top: 5px;*/
/* } */
.signin_btn .para{
    font-size: 12px;
    line-height: 15px;
    text-align: justify;
    padding: 20px;
}
.signin_btn .para b{
    font-size: 13px;
}
.any_ques {
    position: relative;
    bottom: 0px;
    width: 100%;
    left: 0;
    text-align: center;
    font-weight: bold;
/*    margin-top: 10px;*/
}
.any_ques p{
    font-size: 13px;
    padding: 20px;
    background: transparent;
}
.any_ques p a{
    font-weight: 500;
    color: white;
    background: transparent;
}

.grocery_footer_menu {
    position: fixed;
    bottom: 0px;
    background: #f1faee;
    width: 100%;
/*    padding: 8px 0;*/
    box-shadow: 0px -5px 6px rgb(52 82 108);
}
.grocery_footer_menu ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px;
}
.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: #8494a3;
    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: #8494a3;
    font-size: 12px;
    text-align: center;
}
.grocery_footer_menu li.active2 a span.icon_footer i{
    color: #000;
    text-align: center;
}
.grocery_footer_menu li.active2 a span.cntnt_menu{
    color:#000;
    text-align: center;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  font-size: 18px;
  color: #000;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 22px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.menu-button{
    font-size:30px;
    cursor:pointer; 
    width: 40px;
/*    display: inline-flex;*/
    display: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
}

.wf_select{
    width: 100%;
    padding: 5px;
    border: 1px #999 solid;
    background: transparent;
}

.grocery_footer_menu li{
    background: #fff;
    margin: 5px;
}

.sidenav li{
    background: #fff;
    border-bottom: 1px solid #f1eaea;
}

.mxc_list td {
    background: #fff !important;
    border: 1px solid #eee;
}

.mxc_list .list_cntnt,.mxc_list .title,.mxc_list .chg,.mxc_list .id,.mxc_list .title_number{
    background: #edf7ff !important;
}

.mxc_list tr{
    border: 3px solid #fff;
}

.mxc_list th{
    background: #923333;
    color: #fff;
    padding: 6px;
}

.add_button{
        position: absolute;
    text-align: right;
    right: 0;
    top: 10px;
}

.add_button a{
    background: #090993;
    color: #fff;
    padding: 3px;
    border-radius: 5px;
}

.add_button i{
    color: #fff;
    background: #090993;
}

.big_num{
    font-size: large;
    font-weight: 400;
}

.signup_form2 ul{
    padding: 0 20px;
    background: transparent;
}

.signup_form2 h3 {
    font-size: 17px;
    text-align: center;
    padding: 20px 0 0 0;
}

.boldtitle{
    font-size: 22px;
    font-weight: 500;
}
.portfolio_pl{
    background: #fff;
    text-align: center;
    font-size: 18px;
    padding:15px;
    margin: 8px 8px 3px 8px;
    font-weight: bold;
}
.grey_txt{
    color: #bdb2b2;
}
.portfolio_ledger{
    background: #fff;
    text-align: center;
    font-size: 18px;
    padding:0;
    margin: 8px 8px 3px 8px;
}
.portfolio_ledger td{
    border-right: 1px solid #bdb2b2;
    text-align: center;
}
.portfolio_ledger .para{
    color: #bdb2b2;
}
.homebg{
    width: 100%;
    height: 100%;
    position: absolute;
    /* background: url(../img/market.jpg); */
    background: #70b2f0;
    background-size: cover;
    z-index: -1;
    opacity: 1;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    /* Greyscale starts*/
/*    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix'values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);*/
    /* Greyscale ends */
}
.login_form{
    background-color: transparent;
}
.form_input_box input[type="text"]::placeholder{
    color: #000;
    /* font-weight: 500; */
}

.form_input_box input[type="password"]::placeholder{
    color: #000;
    /* font-weight: 500; */
}

.closebtn{
    background-color: transparent;
}

.red_bg .big_num{
    color: red;
}

.green_bg .big_num{
    color: green;
}

.title_number .green_bg .big_num{
    color: green;
}

.title_number .red_bg .green_bg .big_num{
    color: green;
}

.home_page_main_div{
    margin-bottom: 70px;
}

.sell_btn.red_bg{
    background: red !important;
}

.sell_btn.green_bg{
    background: green !important;
}

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

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

.otplink a{
    color: #fff;
    background: #4c4e4f;
    padding: 10px;
}

#err{
    color: #ff0000;
    text-align: center;
}

.username{
    top: 10px;
    position: absolute;
    left: 10px;
    text-align: center;
    margin: auto;
    font-weight: bold;
    color: royalblue;
}

.switch{
    padding: 6px;
    color: white;
    border-radius: 5px;
    background: #090993;
    font-weight: bold;
}

#switch_button{
    margin: auto;
    text-align: center;
    display: none;
    margin-top: 10px;
}

#ticker, #ticker li{
    background: #bc4c4c;
    color: white;
    padding: 1px;
}

#withdrawal_requests li{
/*        background: #333;*/
        padding: 10px;
        margin: 2px;
    }
    #withdrawal_requests .txt{
        font-weight: bold;
        font-size: 15px;
        width: 100%;
    }
    #withdrawal_requests p{
        margin-top: 5px;
    }
    #withdrawal_requests .icn{
        float: right;
        font-size: 10px;
    }
    #withdrawal_requests .image{
        text-align: center;
    }
    #withdrawal_requests .image img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80px;
    }
    #withdrawal_requests .time{
        float: right;
        font-size: 11px;
        font-weight: normal;
    }
    #screenshots{
        background: #fff;
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 70px;
        z-index: 1000;
    }
    #screenshots img{
        max-width: 95%;
    }
    #screenshots .close_btn{
        float: right;
        color: #000;
        margin: 15px;
    }
    #screenshots .close_btn a{
        font-weight: bold;
        color: #000;
        font-size: 25px;
    }
    
    .form_group_cntnt ul{
        padding: 5px;
    }


    /* Game CSS starts */

    .gameBody {
        font-family: sans-serif;
        margin: 0;
        padding: 10px;
        background: var(--bg);
        color: var(--fg);
        overflow: auto;
        height: 90vh;
    }
    .header, .tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .header .right, .header .left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .game-top-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }
    .game-user-block,
    .game-wallet-block {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-weight: 600;
    }
    .game-user-block {
        justify-content: flex-start;
        flex: 1 1 auto;
    }
    .game-wallet-block {
        justify-content: flex-end;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .game-theme-action {
        display: flex;
        justify-content: flex-end;
        margin: -4px 0 10px;
    }
    .game-theme-action a {
        color: #0000fd;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }
    .chart-wrapper {
        position: relative;
    }
    .price-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--fg);
  pointer-events: none;
  z-index: 2;
  padding-left: 4px;
  box-sizing: border-box;
}
    canvas {
        width: 100%;
        height: 260px;
        background: var(--card);
        border: 1px solid var(--border);
    }
    #timeLabels {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        opacity: 0.8;
        padding: 4px 6px;
    }
    #timeLabels span{
        font-size: 10px;
        opacity: 0.8;
    }
    .controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
    }
    input, select, button {
        padding: 8px;
        font-size: 1rem;
        border: 1px solid var(--border);
        border-radius: 4px;
        font-weight:bold;
    }
    select{
        width: 55%;
    }
    .bets{
        margin: 10px 0;
    }
    .bets table {
        width: 100%;
        border-collapse: collapse;
        background: var(--card);
        margin: 10px 0;
    }
    .bets td {
        padding: 6px;
        border: 1px solid var(--border);
        font-size: 0.9rem;
        text-align: center;
        background: #fff;
    }

    .bets th {
        padding: 6px;
        border: 1px solid var(--border);
        font-size: 0.9rem;
        text-align: center;
        background: #923333;
        color: #fff;
    }

    #tooltip {
        position: absolute;
        background: var(--card);
        border: 1px solid var(--border);
        padding: 6px 8px;
        font-size: 12px;
        pointer-events: none;
        display: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        border-radius: 4px;
    }
    .tabs button.active {
        background: var(--line);
        color: white;
    }
    @media (max-width: 600px) {
        .header, .tabs, .controls {
            flex-direction: column;
            align-items: stretch;
        }
        .game-top-header {
            flex-direction: row;
            align-items: center;
        }
    }
    .controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .controls > * {
        flex: 1 1 auto;
        min-width: 120px;
    }
    .upButton,
    .downButton {
        color: #fff !important;
    }
    .upButton i,
    .downButton i {
        color: #fff !important;
        margin-right: 6px;
    }
    .tab-content {
        margin-top: 15px;
        overflow: auto;
        height: 100vh;
    }
    .tabs {
        /* display: inline; */
        justify-content: center;
        gap: 20px;
        margin: 10px 0;
        flex-wrap: nowrap;
        display: none;
    }

    .tab-btn {
        background: none;
        border: none;
        font-size: 16px;
        font-weight: 600;
        padding: 10px 14px;
        color: var(--fg);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: border-color 0.2s ease, color 0.2s ease;
        white-space: nowrap;
    }

    .tab-btn:hover {
        color: var(--line);
    }

    .tab-btn.active {
        border-bottom: 2px solid var(--line);
        color: var(--line);
    }

    .bet-marker {
        position: absolute;
        font-size: 18px;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.85);
        padding: 2px 6px;
        border-radius: 4px;
        transform: translate(-100%, -50%);
        pointer-events: none;
        white-space: nowrap;
        z-index: 12;
    }
    .gameBody.dark .bet-marker {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
    }

    .demoButton{
        background: #0684a4;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
    }
    
    .gameSettings{
        width: 100%;
        display: flex;
    }
    .gameSettings label{
        width: 50%;
        padding: 5px;
        font-weight: bold;
    }
    .upButton{
        background: green;
        color: white;
    }
    .downButton{
        background: red;
        color: white;
    }
    .duration, .amount{
        display: block;
        width: 90%;
        margin: 5px 0;
        border: 1px solid #ccc;
        height: 35px;
    }

    .bet_stats{
        
    font-weight: bold;
    color: blue;
    padding: 0 5px;
    background: #fff;
    font-size: 12px;

    }

    .current_ltp{
        text-align: right;
        font-weight: bold;
    }

    .flashMessage{
        padding: 10px 20px 10px 20px;
    border-radius: 5px;
    position: fixed;
    top: 45%;
    margin: auto;
    z-index: 11;
    text-align: center;
    width: 220px;
    left: 60px;
    }

    .green_back{
        background: green;
        color: #fff;
    }

    .red_back{
        background: red;
        color: #fff;
    }   
    .login_screen{
        margin-top: 10px;
        color:#000;
    }
    .login_screen a{
        color: blue;
    }

    /* Game CSS Ends */