body{
    margin:0;
    padding:0;
    background:#f3f5f7;
    font-family:Arial,Helvetica,sans-serif;
    color:#222;
}

.container{
    width:98%;
    max-width:1600px;
    margin:auto;
    padding:20px;
}

.top-header{
    background:#00695c;
    color:#fff;
    text-align:center;
    padding:20px;
    border-radius:8px;
    margin-bottom:20px;
}

.site-name{
    font-size:16px;
    letter-spacing:1px;
}

.page-title{
    font-size:34px;
    font-weight:bold;
    margin-top:10px;
}

.update-panel{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.info-box{
    flex:1;
    min-width:180px;
    background:#ffffff;
    border-radius:8px;
    text-align:center;
    padding:15px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.info-box .title{
    color:#666;
    font-size:13px;
}

.info-box .value{
    margin-top:8px;
    font-size:18px;
    font-weight:bold;
    color:#00695c;
}

.tab-menu{
    display:flex;
    gap:5px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.tab-button{
    background:#ffffff;
    border:1px solid #ccc;
    padding:10px 20px;
    cursor:pointer;
    font-size:14px;
    transition:.25s;
}

.tab-button:hover{
    background:#009688;
    color:#fff;
}

.tab-button.active{
    background:#00695c;
    color:#fff;
}

.search-panel{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

#searchBox{
    width:320px;
    padding:10px;
    border:1px solid #bbb;
    border-radius:5px;
    font-size:15px;
}

#resetButton{
    padding:10px 18px;
    background:#444;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
}

#resetButton:hover{
    background:#000;
}

.tab-content{
    background:#fff;
    border-radius:8px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}

h2{
    color:#00695c;
    margin-top:0;
}

/*=================================================
TABLE
=================================================*/

.table-container{

    width:100%;
    overflow-x:auto;
    overflow-y:auto;
    max-height:700px;

    background:#fff;

    border-radius:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    margin-top:10px;

}

table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;

}

thead{

    background:#00796b;

    color:#fff;

}

thead th{

    padding:12px;

    text-align:center;

    position:sticky;

    top:0;

    white-space:nowrap;

}

thead th:hover{

    background:#ececec;

}

tbody td{

    padding:10px;

    text-align:center;

    border-bottom:1px solid #eee;

    white-space:nowrap;

}

tbody tr:nth-child(even){

    background:#fafafa;

}

tbody tr:hover{

    background:#e8f5e9;

}

td:first-child{

    font-weight:bold;

    color:#00695c;

}

th{

    cursor:pointer;

}

/*=================================================
INVESTING STYLE TABLE
=================================================*/

.market-table{

    width:100% !important;

    table-layout:fixed;

    border-collapse:collapse;

    font-size:14px;

}

.market-table thead th{

    background:#f3f3f3;

    color:#222;

    border-bottom:2px solid #d5d5d5;

    padding:10px;

    font-weight:600;

    text-align:center;

    position:sticky;

    top:0;

    z-index:5;
    
     min-width:110px;

}

.market-table tbody td{

    padding:9px 12px;

    border-bottom:1px solid #ececec;

    white-space:nowrap;

    text-align:right;

}

.market-table tbody td:first-child,
.market-table thead th:first-child{

    text-align:left;

    min-width:140px;

    font-weight:600;

}

.market-table tbody tr:hover{

    background:#f9fcff;

}

.market-table tbody tr:nth-child(even){

    background:#fbfbfb;

}

.market-table th:first-child,
.market-table td:first-child{

    position:sticky;

    left:0;

    background:white;

    z-index:3;

}

.market-table th:first-child{

    z-index:6;
    
}

.market-table td,
.market-table th{

    border-right:1px solid #ececec;

}

.market-table td:last-child,
.market-table th:last-child{

    border-right:none;


}.dt-buttons{

    margin-bottom:15px;

}

.dt-button{

    background:#00695c !important;

    color:white !important;

    border:none !important;

    border-radius:4px !important;

}

.dt-button:hover{

    background:#00897b !important;

}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{

    background:#00695c !important;

    color:white !important;

    border-radius:4px;

}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{

    background:#009688 !important;

    color:white !important;

}

.dataTables_filter input{

    padding:6px;

    border-radius:4px;

    border:1px solid #bbb;

}

.dataTables_length select{

    padding:5px;

}

/*=================================================
FINAL TABLE POLISH
=================================================*/

.market-table th{

    text-align:center;
    vertical-align:middle;

}

.market-table td{

    vertical-align:middle;

}

.market-table tbody td:first-child{

    color:#005999;
    font-weight:600;

}

.table-container{

    padding:10px;

}

.dataTables_wrapper{

    width:100%;

}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table{

    width:100% !important;

}

table.dataTable{

    width:100% !important;

}

table.dataTable thead th,
table.dataTable tbody td{

    box-sizing:border-box;

}


.dataTables_wrapper{

    width:100%;

}

.dataTables_scroll{

    width:100%;

}

.dataTables_scrollHead{

    width:100% !important;

}

.dataTables_scrollBody{

    width:100% !important;

}

table.dataTable{

    width:100% !important;

}