/* color */

           .w3-vivid-pink
            {color:#fff!important;background-color:#ffb5bA!important}
            
            .w3-vivid-red
            {color:#fff!important;background-color:#be0032!important}
            
            .w3-vivid-orange
            {color:#fff!important;background-color:#f38400!important}
            
            .w3-vivid-yellow
            {color:#fff!important;background-color:#f3c300!important}
            
            .w3-vivid-green
            {color:#fff!important;background-color:#008856!important}
            
            .w3-vivid-blue
            {color:#fff!important;background-color:#00a1c2!important}
            
            .w3-vivid-black
            {color:#fff!important;background-color:#000!important}
            
            .w3-vivid-white
            {color:#000!important;background-color:#fff!important}

            .w3-vivid-purple
            {color:#fff!important;background-color:#9a4eae!important}
            
            .w3-vivid-purple
            {color:#fff!important;background-color:#9a4eae!important}
            
            .w3-vivid-yellowish-pink
            {color:#fff!important;background-color:#ffb7a5!important}
            
            .w3-vivid-reddish-orange
            {color:#fff!important;background-color:#e25822!important}
            
            .w3-vivid-orange-yellow
            {color:#fff!important;background-color:#f6a600!important}
            
            .w3-vivid-greenish-yellow
            {color:#fff!important;background-color:#dcd300!important}
            
            .w3-vivid-yellow-green
            {color:#fff!important;background-color:#8db600!important}
            
            .w3-vivid-yellowish-green
            {color:#fff!important;background-color:#27a64c!important}
            
            .w3-vivid-bluish-green
            {color:#fff!important;background-color:#008882!important}
            
            .w3-vivid-greenish-blue
            {color:#fff!important;background-color:#0085a1!important}
            
            .w3-vivid-purplish-blue
            {color:#fff!important;background-color:#30267a!important}
            
            .w3-vivid-reddish-purple
            {color:#fff!important;background-color:#870074!important}
            
            .w3-vivid-purplish-red
            {color:#fff!important;background-color:#ce4676!important}


/*            Data-Table*/
            div#table_id_filter {
                margin-bottom: 0.5cm;
            }
            
            .dataTables_wrapper .dataTables_scroll {
             
             width: 1800px !important;
             }
             
             tbody th {
                position: sticky !important;
                left: 0;
    
             }
             #table_id td {
                text-align: right !important;
             }
             
             table.dataTable thead th, table.dataTable tfoot th {
             font-weight: normal !important;
             }
             
/*            Normal Styles*/
            
            header {
            background-color: #c8ab37 !important;
            border-color: #c8ab37 !important;
            }
            
            header li {
                background: linear-gradient(to top, #c19b01 0%, #8d7102 100%) !important;
                box-shadow: inset 0px 1px 1px 0 #e2b603 !important;
            }
            
            h1.header {
                font-size: 20px !important;
            }
            
            #table_id.hide1 tr > *:nth-child(1) {
            display: none;
            }
            
            #table_id.hide2 tr > *:nth-child(2) {
            display: none;
            
            }
            #table_id.hide3 tr > *:nth-child(3) {
            display: none;
            }
            #table_id.hide4 tr > *:nth-child(4) {
            display: none;
            }
            #table_id.hide5 tr > *:nth-child(5) {
            display: none;
            }
            #table_id.hide6 tr > *:nth-child(6) {
            display: none;
            }
            #table_id.hide7 tr > *:nth-child(7) {
            display: none;
            }
            #table_id.hide8 tr > *:nth-child(8) {
            display: none;
            }
            #table_id.hide9 tr > *:nth-child(9) {
            display: none;
            }
            #table_id.hide10 tr > *:nth-child(10) {
            display: none;
            }
            #table_id.hide11 tr > *:nth-child(11) {
            display: none;
            }
            #table_id.hide12 tr > *:nth-child(12) {
            display: none;
            }
            #table_id.hide13 tr > *:nth-child(13) {
            display: none;
            }
            #table_id.hide14 tr > *:nth-child(14) {
            display: none;
            }
            #table_id.hide15 tr > *:nth-child(15) {
            display: none;
            }
            #table_id.hide16 tr > *:nth-child(16) {
            display: none;
            }
            #table_id.hide17 tr > *:nth-child(17) {
            display: none;
            }
            
            
            
            .grid-container {
             display: grid;
             grid-template-columns: auto auto auto auto auto auto auto;
             padding: 4px;
             grid-gap: 4px;
             
             
            }
            button {
             font-size: 12px;
             float: left;
             cursor: pointer;
             text-align: left;
             padding: 4px;
             
             }
             
             button:hover {
             background-color: silver;
             }
             
             
             button i {
                cursor: pointer;
                display: inline-block;
                position: relative;
                transition: 0.3s;
             }
             
             
             button i:after {
             content: 'Hide/Show';
             position: absolute;
             opacity: 0;
             top: 0;
             right: 20px;
             transition: 0.3s;
             }

             button:hover i {
             padding-right: 75px;
             }
             

            button:hover i:after {
              opacity: 1;
              right: 0;
            }
            
            table.noStyle {
                table-layout: auto !important;
                width: 210% !important;
                border-style: none !important;
            }
            .noStyle td {
                background-color:transparent !important;
                
            }
            
            dl.grid {
           	display: grid;
           	grid-template-columns: 1fr 100%;
                    }
                    
            dl.grid_only {
           	display: grid;
           	grid-template-columns: auto auto auto auto auto auto;
                    }        
           
            dd {
           	margin: 0;
           	padding-left: 1em;
                }
           
            dl.grid dd {
           	margin-bottom: 1em;
           }