/* Sticky header */
        .header {
          /*position: sticky;*/
          top: 0;
          z-index: 1000;
          background: white;   /* important so content doesn't show through */
        }        

        .red {
            color:red;
        }
        
        .cent {
            text-align:center;
        }
        
        .image-container img {
            display: block;
            width: 900px;
            margin: auto auto;
        }
        
        .buttons {
            text-align: center;
            padding: 10px;
            background: #f5f5f5;
        }
        
        .buttons button {
            margin: 0 10px;
            padding: 8px 16px;
            cursor: pointer;
        }
        

        /* This prevents content from being hidden under the header */
        .container {
            scroll-margin-top: 300px; /* image height + button area */
            min-height: 800px; /* for demo scrolling */
        }

        body {
            width: 900px; 
            margin-left:auto; 
            margin-right:auto; 
            background-color:#B9BEFB;
        }
        table {
            border-collapse: separate;
            width:100%;
        }
        button {
                width:100px;
                margin-left:50px;
                margin-right:50px;
        }
        
        .clickHere {
            background-color:white;
            cursor:pointer;
            font-size:x-large;
        }
        
        /* These three are for the titles over the table */
        .tableheader {
            display: flex;
            justify-content: space-between;
            align-items: center; /* keeps them vertically aligned */
            font-size:x-large;
        }        
        .stage {
            text-align:right;
            margin-right:50px;
        }
        .category {
            text-align:left;
            margin-left:20px;
        }        
        
        /* The data table formatting is here */
        #data_to_display {
            //height: 80vh;
            //overflow-y: auto;
        }
        
        #data_to_display table {
            border-collapse: separate;
            border-spacing: 0;            
        }
        
        #data_to_display table td {
            border: 1px solid black; 
            padding: 8px;            
        }

        #data_to_display table th { 
            background: black; 
            border: 1px solid white; 
            padding: 8px;            
            color:white;
            z-index: 900;
        } 
        #data_to_display table tr:first-child th  {
            position: sticky;
            top: 0px;
            /*top: 175px;     /* logo height */
        }
        #data_to_display table tr:nth-child(2) th {
            position: sticky;
            top: 35px;
            /*top: 210px;    /* logo height + row1 height */
        }        

        #data_to_display tr:nth-child(even) {
            background-color: #c8e6ff;
        }
        #data_to_display tr:nth-child(odd) {
            /* Red Green Blue */
            background-color: #e8f5ff;
            /*background-color: #FF0000;*/
        }

        html {
             /*scroll-behavior: smooth;*/
        }