@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');

/*font-family: 'Fira Sans', sans-serif;*/

/*mobile font*/
@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@400;500&display=swap');
/*font-family: 'Recursive', sans-serif;*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    line-height: 1; 
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul {
    list-style: none;
}

.main-container{ justify-content: center; }

.bitbns_main *{ font-family: 'Fira Sans', sans-serif; }
.bitbns_main{ background: #f5f5f5; }

.bitbns_main .container {
    
    margin: auto;
    background: #fff;
    
}



.bitbns_main .jus_center {
    justify-content: space-between;
}

.bitbns_main .data-table .row{ display: flex; }
.bitbns_main .col6 {
    width: 50%;
}
.bitbns_main .data-table .col6{ padding-right: 15px; }
.bitbns_main .data-table .col6:last-child{ padding-right: 0; }

.bitbns_main .table {
    
}

.bitbns_main .table .table_heading {
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
}

.bitbns_main .table .table_heading .icon {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #F4F4F4;
    border: 1px #707070 solid;
    border-radius: 50%;
    right: -30px;
    text-align: center;
    font-size: 10px;
    color: #000;
    line-height: 21px;
    text-decoration: none;
}

.bitbns_main .row .bns_left {   
    
}

.bitbns_main .row .bns_left table {
    width: 100%;
}

.bitbns_main .row .bns_left table th {
    background: #360557;
    color: #fff;
    padding:12px 8px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
    text-align: right;
}
.bitbns_main .row .bns_left table th:first-child{text-align: left;}

.bitbns_main .row .bns_left table td {
    padding:12px 10px;
    font-size: 14px;
    text-align: right;
    vertical-align: top;
}
.bitbns_main .row .bns_left table td i{ width: 20px; height: 20px; display: inline-block; vertical-align: top; margin-right: 3px; position: relative; top:-3px; }
.bitbns_main .row .bns_left table td i img{ width: 100%; }
.bitbns_main .row .bns_left table td:first-child{ text-align: left; }

.bitbns_main .row .bns_left table tr:nth-child(even) {
    background: #fff;
}

.bitbns_main .row .bns_left table tr:nth-child(odd) {
    background: #f5f5f5;
    border-top: 1px #e5e5e5 solid;
    border-bottom: 1px #e5e5e5 solid;
}

.bitbns_main .row .bns_left table td.icon {
    padding-left: 40px;
    position: relative;
}

.bitbns_main .row .bns_left table td.icon span {
    font-size: 10px;
    color: #9A9A9A;
    line-height: 20px;
}

.bitbns_main .row .bns_left table td.volume span {
    font-size: 14px;
}

.bitbns_main .row .bns_left table td .arrow {
    position: relative;
    padding-right: 15px;
}

.bitbns_main .row .bns_left table td .arrow:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid black;
    position: absolute;
    top: 2px;
    right: 0;
}

.bitbns_main .row .bns_left table td .arrow.green:after {
    border-bottom-color: #009640;
}

.bitbns_main table .green {
    color: #16A085;
}

.bitbns_main table .red {
    color: #FF5746;
}

.bitbns_main .row .bns_left table td .arrow.red {
    color: #FF5746;
}

.bitbns_main .row .bns_left table td .arrow.red:after {
    border-bottom: inherit;
    border-top: 9px solid #e10613;
}

.bitbns_main .row .bns_left table td.volume span:last-child {
    color: #9A9A9A;
    font-size: 12px;
    line-height: 20px;
}

.bitbns_main .row .bns_left table td.icon em {
    font-style: normal;
    color: #9A9A9A;
}

.bitbns_main .row .bns_left table td.icon i {
    position: absolute;
    left: 10px;
    top: 10px;
}

.bitbns_main .row .bns_left table td span {
    display: block;
}
.bitbns_main .row .bns_left table td span.zero{ padding-right: 15px; }

.bns_left .heading {
    text-transform: uppercase;
    font-size: 32px;
    position: relative;
    color: #E1261C;
    font-weight: 500;
    margin:0 0 5px 0;
    display: block;
}

.bns_left .heading:before {
    content: '';
    position: absolute;
    height: 2px;
    background: #E1261C;
    bottom:6px;
    left: 0;
    right: 0;
}

.bns_left .heading em {
    background: #fff;
    padding:0 10px 0 0;
    font-style: normal;
    z-index: 0;
    position: relative;
}

.bns_left .search_bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    max-width: 215px;
    margin-left: auto;
}

 .bns_left .heading .tradnow_btn {
    position: absolute;
    right: 0;
    font-size: 14px;
    background: red;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    top: -15px;
}

.bns_left .search_bar ul{
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    border: 1px #C3C3C3 solid;
    border-radius: 10px;
    padding: 5px;
    background: #fff; 
    z-index:9;
    display: none;
}
.bns_left .search_bar ul li{border-bottom: 1px #C3C3C3 dotted;
    padding: 5px 10px;
    font-size: 12px;
    align-items: center; cursor: pointer; }

.bns_left .search_bar ul li:last-child{ border-bottom: 0; }

.bns_left .search_bar ul li i{ margin-right: 10px; width: 20px; height: 20px; }
.bns_left .search_bar ul li a{  display:block;  text-decoration: none; }

.bns_left .search_bar input[type="search"] {
    border-radius: 10px;
    background: #EFEFEF;
    padding:10px;
    border: 1px #C3C3C3 solid;
    padding-right: 50px;
    width: 100%;
}

.bitbns_main .row .bns_right {
    width: 300px;
    background: #fff;
    
}

.bitbns_main .row .bns_right img {
    width: 100%;
}

.bns_left .search_bar .search_btn {
    position: absolute;
    right: 16px;
    width: 15px;
    height: 15px;
    border: 2px #282727 solid;
    z-index: 9;
    border-radius: 100%;
    top: 8px;
    cursor: pointer;
}

.bns_left .search_bar .search_btn:after {
    content: '';
    position: absolute;
    height: 7px;
    width: 2px;
    transform: rotate(-45deg);
    background: #282727;
    top: 10px;
    right: -3px;
}
.bitbns_main .graph_row{ margin-bottom: 10px; margin-top: 10px; }
.bitbns_main .graph_row .graph_bottom{ margin-top:10px; }
.dataTables_filter {
        display: none;
    }

    .dataTables_paginate {
        display: none;
    }

    .dataTable tbody tr {
        cursor: pointer;
    }

 .graph{ padding: 10px 0 2px; }

          .graph img{ width: 100%; }
          .graph_bottom{ display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
          .time{ display: flex; justify-content: flex-end; align-items: center; }
          .time button{ width: 40px; height: 40px; text-align: center; background: #EAEAEA; font-size: 12px; color: #585858; line-height: 28px; border:none; -webkit-box-shadow: 0px 2px 2px 0px rgba(201,201,201,1); cursor: pointer; }
          .time button:hover{ background: #360557; color:#fff; font-weight: 500; }
          .time button.active{background: #360557; color:#fff; font-weight: 500;}
.price_row > div{display: flex;align-items: center; margin-bottom: 20px;}
.price_row .today_price{font-size: 18px;font-weight: bold;display: block; position: relative; top:5px;}
.price_row .volumes{display: flex;margin-left: 30px;}
.price_row .volumes li span{ display: block; }
.price_row .volumes li span.day_volume{ font-size: 11px; color:#A2A2A2; margin-bottom: 5px; }
.price_row .volumes li{ text-align: center; margin:0 10px; }
.price_row .volumes li span.day_price{ font-size: 14px; font-weight: 500; color: #000; position: relative; }
.price_row .volumes li span.day_price.green{color: #16A085;}
.price_row .volumes li span.day_price.arrow:after{content: ''; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #16A085;
    position: absolute; top: 3px; left: -13px;  }
    .price_row .volumes li span.day_price.green {
    color: #16A085;
}
.price_row .volumes li span.day_price.red {
    color: #FF5746;
}
.price_row .volumes li span.day_price.red:after {
    border-bottom: inherit;
    border-top: 9px solid #e10613;
}

.bitbns_main .data-table{ margin-bottom: 20px; }
@media only screen and (max-width:1800px) and ( min-width: 769px){
    
   .bitbns_main .data-table .col6:first-child{ width: 54%; }
    .bitbns_main .data-table .col6:last-child{ width: 46%; } 
}
 

@media only screen and (max-width:768px){
    .bitbns_main{ margin-top: 10px; }
    .main-container .main-content{ width: 100%; }
    .container .main-container{display: flex;}
    .bns_left .heading:before{ display: none;}
    .bns_left .heading{ font-size: 18px; background: #ED2128; padding: 10px; margin-top: 0; }
    .bns_left .heading em{background: #ED2128; color: #fff; padding: 0;}
    .bns_left .search_bar ul{ z-index: 2; }
    .bns_left .search_bar{max-width: 260px; margin:10px auto; justify-content: center;background: none; height: inherit; top: inherit; right: inherit; padding: inherit;}
    .bns_left .search_bar input[type="search"]{ padding: 4px 40px 4px 10px;}
    .bns_left .search_bar .search_btn{right: 20px; z-index: 0;}
    .bitbns_main .container{ width: 100%;}
     .bitbns_main .graph_row{ margin-bottom: 5px; font-size: 14px; }
    .bitbns_main .row .bns_left{ width: inherit; padding: 0 5px; }
    .bitbns_main .row{ flex-direction: column; }
    .bitbns_main .col6{ width: 100%; }
    .bitbns_main .row .bns_left table th{ text-align: right; line-height: 15px; white-space: nowrap; }
    .bitbns_main .row .bns_left table td{ text-align: right; white-space: nowrap; }
    .bitbns_main .graph_bottom{ flex-direction: column; align-items: flex-end; }
    .bitbns_main .graph_bottom .price_row{ order:2; justify-content: space-between; width: 100%; padding: 0; }
    .bitbns_main .graph_bottom .price_row .today_price{ margin-right: auto; margin-bottom:10px; }
    .price_row .volumes{ margin-top: 10px; width: 58%; justify-content: space-between; flex-wrap: wrap;}
    .price_row .volumes li{ margin:0; width:50%; margin-bottom:10px; }
    .price_row .volumes li span.day_price.arrow:after{left: 0;}
    .bitbns_main .graph_bottom .time{ margin:10px 0 0; }
    .bitbns_main .table{ padding: 10px 0; }
    .bitbns_main .data-table .col6{ padding-right: 0; }

    .bitbns_main .table .dataTables_wrapper{ overflow: auto; }
    .bitbns_main .table .table_heading{ padding-left: 10px; }
    .bitbns_main .data-table{overflow-x: auto; }
    .bitbns_main .row .bns_right{margin:auto;}
    .bns_left .heading .tradnow_btn{ background: #fff; color:#000; top:4px; right: 7px; padding: 8px 10px; }
    .price_row > div{ flex-direction: column; margin-bottom: 5px; }
    .price_row .volumes{ width: 100%; margin-left:0; }
    /*change new*/
    .bitbns_main *{font-family: 'Recursive', sans-serif;}
    .bitbns_main{ background: #fff; }
    .bitbns_main .bredcrum-txt{ padding-left: 10px; }
    .bitbns_main .row .bns_left{ padding: 0;  }
}