<style>
    .container_signal_block_viever_left{
        height: 100%;
        float: left;
    }
    .container_signal_block_viever_rigth{
        height: 100%;
        float: right;
    }
    .signal_block_viever{
        height: 26px;
        width: 149px;
        padding: 3px;
    }
    .red_grap{
        width: 0%;
        background: #FE0000;
        height: 100%;
    }
    .blue_grap{
        width: 0%;
        background: #4876d1;
        height: 100%;
    }
    .number_value{
        float: right;
        margin-top: -26px;
        margin-right: 5px;
        font-weight: 700;
    }


    .scroll-table{
        max-width: calc(100vw - 252px);
    }

    .scroll-table-body{
        height: 75vh;
        padding-right: 0px;
        overflow-x: auto;
        margin-top: 0px;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .scroll-table table {
        table-layout: fixed;
        border: none;
    }

    .scroll-table thead th {
        font-weight: bold;
        text-align: left;
        border: none;
        padding: 10px 15px;
        background: #d8d8d8;
        font-size: 13px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .scroll-table tbody td {
        text-align: left;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        padding: 10px 15px;
        font-size: 13px;
        vertical-align: top;
    }

    .scroll-table tbody tr:nth-child(even){
        background: #f3f3f3;
    }

    .table_main{
        width: max-content;
        border: 1px solid #eeeeee;
    }

    .table_main > tbody > tr:hover{
        background: #3cabac;
        color: #fff;
        box-shadow: rgb(0 0 0 / 20%) 0px 0px 10px;
    }

    .table_main > tbody > tr:hover > td{
        border: 1px solid #3cabac;
    }


    .table_main > tbody > tr > td{
        border: 1px solid #eeeeee;
        padding: 6px 15px;
    }

    .title_tab_table{
        text-align: center;
        background: #eeeeee;
        padding: 10px;
        border: 1px solid #eeeeee;
        font-family: open_sansbold, 'Helvetica Neue', Helvetica, Arial;
        font-size: 12px;
        color: #272727;
    }

    .title_tab_table > tbody > tr > td{
        font-weight: 500;
    }

    .ver_scroll{
        overflow-x: auto;
        max-width: calc(100% - 97px);
    }

    #block_main {
        padding: 15px 15px 15px 15px !important;
    }

    .svg-icon.svg-icon-2x svg {
        height: 1rem !important;
        width: 1rem !important;
    }

    .icon_sort {
        width: fit-content;
        float: right;
        cursor: pointer;
        margin-top: 0px;
        margin-left: 10px;
        background: rgba(0,0,0,.1);
        padding: 2px 5px 0px 5px;
        height: 19px;
        border-radius: 4px;
        transition: .2s;
        opacity: .7;
    }

    .icon_sort:hover{
        opacity: 1;
        transition: .2s;
    }

    .des_table{
        color: #ccc;
    }

    .ps-p{
        float: left;
        width: 36px;
        opacity: 0;
    }

    .w-100{
        width: 100%;
    }

    .b-0{
        border: 0px;
    }
</style>


<script>
    function sortTable(colum){
        if(document.getElementById('param_'+ colum)){
            let sortedRows = Array.from(table.rows).slice(1).sort((rowA, rowB) => rowA.cells[colum].innerHTML > rowB.cells[colum].innerHTML ? 1 : -1);
            table.tBodies[0].append(...sortedRows);
            document.getElementById('param_'+ colum).id = 'param_'+ colum +'_top';
        }else{
            let sortedRows = Array.from(table.rows).slice(1).sort((rowA, rowB) => rowA.cells[colum].innerHTML < rowB.cells[colum].innerHTML ? 1 : -1);
            table.tBodies[0].append(...sortedRows);
            document.getElementById('param_'+ colum +'_top').id = 'param_'+ colum;
        }
    }


    function show_hide(id){

        console.log('start');

        var i = 0;
        let r = 0;
        while (r < 1){
            if(document.getElementById('string_'+ id +'_'+ i)){
                var valleStyle = document.getElementById('string_'+ id +'_'+ i).style.display;
                if(valleStyle === 'revert'){
                    document.getElementById('string_'+ id +'_'+ i).style.display = 'none';
                }else{
                    document.getElementById('string_'+ id +'_'+ i).style.display = 'revert';
                }
            }else{
                r++;
            }
            i++;
        }
    }
</script>








<style>
    .bg-tr-2{
        background: #ffffff !important;
    }

    .bg-tr-2:hover{
        background: #3cabac !important;
    }
    .bg-tr-1{
        background: #f3f3f3;
    }

    .title_tab_table > td{
        padding: 6px 15px !important;
        cursor: pointer;
        text-align: left;
    }

    .sort_ic_a{
        text-align: center;
        border-radius: 3px;
        color: #00a1a5;
        float: right;
    }

    .more_info{
        position: fixed;
        display: none;
        pointer-events: none;
        top: 0px;
        left: 0px;
        z-index: 1000;
        background: rgb(35 32 48 / 50%);
        width: 100%;
        height: 100%;
    }

    .in_card_title{
        font-size: 13px;
        font-weight: 600;
    }

    .sel_in{
        width: 333px;
        margin-top: 10px;
        margin-bottom: 15px;
        padding: 11px;
        border-radius: 6px;
        border: 1px solid #eee;
        font-size: 13px;
    }

    .d-inter{
        display: inline-block;
        margin-right: 15px;
    }

    .bt_s_3 {
        display: inline-block;
        background: #2da5da;
        border: 0px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        padding: 10px 31px !important;
        height: 40px;
        border-radius: 7px;
        transition: .3s;
    }

    .sel_in-c{
        padding: 10px !important;
        border-radius: 5px !important;
        border: 1px solid #eeeeee !important;
    }


    /* list check */


    .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>
