/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

        * {
            -webkit-transition: background-color 300ms ease, color 300ms ease;
            -o-transition: background-color 300ms ease, color 300ms ease;
            transition: background-color 300ms ease, color 300ms ease;
        }
        *:focus {
            background-color: rgba(221, 72, 20, .2);
            outline: none;
        }
        html, body {
            color: rgba(33, 37, 41, 1);
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 18px;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;

        }

        header{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            background-color: rgba(247, 248, 249, 1);
            width: 100%;
            padding: 0.4rem 1.5rem;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
        }
        
        #ihecLogo,
        #ceehrcLogo {
            vertical-align: middle;
            padding: 0.5em 1.5em 0.5em 1.5em;
            max-height: 60px;
        }        
        .institutionalLogo{
            background-color: rgba(247, 248, 249, 1);
            padding: 0.4rem 1.5rem;
        }
        
        #gsc-logo {
            vertical-align: middle;
            max-height: 88px;
            min-height: 5rem;
            }

        #ubc-logo {
            vertical-align: middle;
            padding: 0.5em 1.5em 0.5em 1.5em;
            max-height: 60px;
        }
        
        a img {
            text-decoration: none;
            border: 0;
        }

        .top_logo_banner {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            text-align: center;
            margin: auto;
            max-width: 80%;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr 1fr;
            grid-template-columns: 1fr 1fr;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            }

            .bottom_logo_banner {
                text-align: center;
                margin: auto;
                max-width: 80%;
            }

        .title {
            max-width: 80%;
            padding: 2.5rem 1.75rem 3.5rem 1.75rem;
            margin: 0 auto;            
            background-color: #fff;
            color: #1A4599;
        }
        .title h1 {
            font-size: 48px;
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-weight: 700;
            line-height: 1.3;
        }
        .title h2 {
            font-size: 1.5rem;
            font-weight: 300;
        }
        hr {
            display: inline-block;
            width: 100%;
            height: 1px;
            background: #BBCBD4;
        }
        .references {
            font-size:0.8rem;
            color: #1f2e35;;
            max-width: 80%;
            padding: 3.5rem 1.75rem 1.5rem 1.75rem;
            margin: 0 auto;
            background-color:#fff;
            text-align:left;
        }
        .references h2 {
            -ms-flex-item-align: start;
                align-self: flex-start;
            margin-left: 0;
            font-size: 1.5rem;
            font-weight: 300;
            width: 872.97px;
            color: #1A4599;
        }

        .references a {
            color: #CC630F;
        }

        .references li {
            list-style: none;
            margin: 5px 0px;
        }

        .subTitle {
            max-width: 80%;
            padding: 0rem 1.75rem;
            margin: 0 auto;            
            background-color: #fff;
            color: #1A4599;
            text-align: center;
        }

        .subTitle h2 {
            font-size: 2.5rem;
            font-weight: 300;
        }

        .content {
            -webkit-box-flex: 1;
                -ms-flex: 1 0 auto;
                    flex: 1 0 auto;
            padding-bottom: 20px;
            text-align: center;
        } 

        .gridMenu {
            width: 70%;
            border-style: none;
            margin: 0 auto;
            text-align:center;
        }
        .gridTable {
            border-style: none;
            margin: 0 auto;
            margin-bottom: 15px;
            text-align:center;
        }
        
        .description {
            margin-top:0;
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size:0.8rem;
        }

        .flex-container {
            /*max-width: 70%;*/
            /*margin: 5px auto;*/
            margin: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-flow: row wrap;
                    flex-flow: row wrap;
            /*justify-content: space-evenly;*/
            padding: 0;
            list-style: none;
            /*text-align: center;*/
            text-align: left;
        }

        /* To control how many items a row
        /*.flex-item{
            flex: 0 1 calc(25% - 5px);
        }*/

        .download-instructions{
            max-width: 70%;
            display: inline-block;                 
            margin: 0 auto;             /* center the div */
            margin-bottom: 15px;
            text-align: left;           /* align text inside to the left */
            padding: 20px;              
            background-color: #f9f9f9;  
            border: 1px solid #ccc;     
            border-radius: 8px;         
        }      

        /* Style for the download button */
        .download_button{
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 1rem;
            padding: 5px 10px;  /* Adjusted for more balanced horizontal padding */
            margin: 5px;
            border-radius: 4px;
            background-color: #CC630F; 
            border: 2px solid #CC630F;  /* Thicker border for more prominence */
            color: #fff; /* Text color to match the border */
            cursor: pointer;  /* Ensures the button looks clickable */
            -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
            -o-transition: background-color 0.3s ease, border-color 0.3s ease;
            transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for hover effect */
        }

        /* Hover state for the download button */
        .download_button:hover{
            background-color: rgb(211.65, 122.4, 75);
            border-color: rgb(211.65, 122.4, 75);  /* Border color changes to blue */
            color: #fff;  /* Change text color to blue on hover */
        }

        /* Focus state (for accessibility) */
        .download_button:focus{
            outline: none;  /* Remove default focus outline */
            -webkit-box-shadow: 0 0 0 3px #1A4599;
                    box-shadow: 0 0 0 3px #1A4599; /* Custom blue focus ring */
        }

        /* Active state (button pressed) */
        .download_button:active{
            background-color: #1A4599; /* Darker blue when pressed */
            border-color: #1A4599;  /* Darker blue border */
            color: #fff;  /* Text color changes to white when pressed */
        }

        /* Style for the download button */
        .readme_button{
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 1rem;
            padding: 5px 10px;  /* Adjusted for more balanced horizontal padding */
            margin: 5px;
            border-radius: 4px;
            background-color: #1A4599; 
            border: 2px solid #1A4599;  /* Thicker border for more prominence */
            color: #fff; /* Text color to match the border */
            cursor: pointer;  /* Ensures the button looks clickable */
            -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
            -o-transition: background-color 0.3s ease, border-color 0.3s ease;
            transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for hover effect */
        }

        /* Hover state for the download button */
        .readme_button:hover{
            background-color: rgb(211.65, 122.4, 75);
            border-color: rgb(211.65, 122.4, 75);  /* Border color changes to blue */
            color: #fff;  /* Change text color to blue on hover */
        }

        /* Focus state (for accessibility) */
        .readme_button:focus{
            outline: none;  /* Remove default focus outline */
            -webkit-box-shadow: 0 0 0 3px #1A4599;
                    box-shadow: 0 0 0 3px #1A4599; /* Custom blue focus ring */
        }

        /* Active state (button pressed) */
        .readme_button:active{
            background-color: #1A4599; /* Darker blue when pressed */
            border-color: #1A4599;  /* Darker blue border */
            color: #fff;  /* Text color changes to white when pressed */
        }

        /* Style for the grid menue button */
        .gridMenuButton{
            font-family: "Metropolis", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 1.5rem; 
            padding: 15px 120px;  /* Adjusted for more balanced horizontal padding */
            margin: 5px;
            border-radius: 4px;
            background-color: #CC630F; 
            border: 2px solid #CC630F;  /* Thicker border for more prominence */
            color: #fff; /* Text color to match the border */
            cursor: pointer;  /* Ensures the button looks clickable */
            -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
            -o-transition: background-color 0.3s ease, border-color 0.3s ease;
            transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for hover effect */
        }

        /* Hover state for the download button */
        .gridMenuButton:hover {
            background-color: rgb(211.65, 122.4, 75);
            border-color: rgb(211.65, 122.4, 75);  /* Border color changes to blue */
            color: #fff;  /* Change text color to blue on hover */
        }

        /* Focus state (for accessibility) */
        .gridMenuButton:focus {
            outline: none;  /* Remove default focus outline */
            -webkit-box-shadow: 0 0 0 3px #1A4599;
                    box-shadow: 0 0 0 3px #1A4599; /* Custom blue focus ring */
        }

        /* Active state (button pressed) */
        .gridMenuButton:active {
            background-color: #1A4599; /* Darker blue when pressed */
            border-color: #1A4599;  /* Darker blue border */
            color: #fff;  /* Text color changes to white when pressed */
        }

        /* Persistent selected state */
        .gridMenuButton.selected {
            background-color: #1A4599;
            border-color: #1A4599;
            color: #fff;
        }

.wgetCmd {
    display: block;               /* Makes each command its own block */
    background-color: #1e1e1e;   /* Dark terminal-like background */
    color: #dcdcdc;              /* Light text for readability */
    font-family: 'Fira Code', 'Courier New', monospace; /* Monospaced font */
    font-size: 0.95rem;          /* Slightly smaller, compact size */
    padding: 0.75rem 1rem;       /* Comfortable padding inside block */
    padding-right: 5rem;        /* reserve space for the Copy button */
    border-radius: 6px;          /* Rounded corners */
    margin: 0.5rem 0;            /* Spacing between commands */
    overflow-x: auto;            /* Horizontal scroll for long commands */
    white-space: nowrap;          /* Prevent wrapping so commands stay intact */
    border-left: 4px solid #CC630F; /* Optional accent for a “terminal feel” */
}

/* show scrollbar only on hover */
.wgetCmd::-webkit-scrollbar {
    height: 10px;
}
.wgetCmd::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}
.wgetCmd::-webkit-scrollbar-track {
    background: #1e1e1e;
}
.code-block {
    position: relative;
    display: inline-block;       /* shrink to fit the code width */
    max-width: 90%;
}

.copy-btn {
    position: absolute;
    top: 16px;
    right: 8px;
    background-color: #CC630F;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.copy-btn:hover {
    background-color: rgb(211.65, 122.4, 75);
    border-color: rgb(211.65, 122.4, 75);
}
.copy-btn.copied {
    background-color: rgb(211.65, 122.4, 75);
    border-color: rgb(211.65, 122.4, 75);
}
        
        .alert-danger {
            padding: 12px;
            display: inline-block;
            text-align: center;
            margin-bottom: 10px ;
            max-width:80%;
            font-size: 0.7rem;
            border: 1px solid #dc3545;
            border-radius: 4px;
            background-color: #f8d7da;
            color: #721c24;
            font-weight: bold;
        }

.table-container {
    margin:0 auto;
    max-height: 90vh;
    max-width: 90%;
    overflow: auto;
    border: none #ccc;
}

.results_table, .bulk_table{
    background-color: white;
    margin:auto;
    border-radius:20px;
}

/* Sticky header */
.results_table th.top-row,
th.post-processed-top-row {
    position: sticky;
    top: 0;
    z-index: 1;
}
.results_table td {
    border-width :2px;
    padding:5px;
    border: solid;
    border-color: whitesmoke;
}
.bulk_table td {
    border: none;
    text-align: left;
}

.top-row{
    border-width:2px;
    background-color:whitesmoke;
    padding: 10px;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl; 
    -webkit-transform: rotate(180deg); 
        -ms-transform: rotate(180deg); 
            transform: rotate(180deg);
}
.top-row {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

        .side-filter{
            border-width:2px;
            background-color:whitesmoke;
            padding: 10px;
            height: 20px;
        }

        .side-filter-curated,
        .imputed-side-filter-curated{       
            font-size:0.8rem;
            margin-left: 40px;
            height: 20px;
            font-weight: normal;
            text-align: left;
            padding: 8px 12px;
            border: solid;
            border-color: whitesmoke;
        }

        .side-filter-curated input[type="checkbox"],
         .imputed-side-filter-curated input[type="checkbox"] {
            display: none; /* Hide the default checkbox */
        }
        
        .side-filter-curated label,
         .imputed-side-filter-curated label {
            display: block;
            position: relative;
            padding-left: 30px; /* Space for the custom checkbox */
            cursor: pointer;
        }
        
        .side-filter-curated label::before,
         .imputed-side-filter-curated label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
            width: 20px;  /* Set size of the custom checkbox */
            height: 20px; /* Set size of the custom checkbox */
            border: 2px solid #333; /* Customize the border */
            border-radius: 3px; /* Optional, for rounded corners */
            background-color: #fff; /* Background color */
        }
        
        /* Style when checkbox is checked */
        .side-filter-curated input[type="checkbox"]:checked + label::before,
         .imputed-side-filter-curated input[type="checkbox"]:checked + label::before {
            background-color: #1A4599; /* Background color for checked state */
            border-color: #1A4599; /* Border color for checked state */
        }
        
        /* Style for the checked state */
        .side-filter-curated input[type="checkbox"]:checked + label,
         .imputed-side-filter-curated input[type="checkbox"]:checked + label {
            font-weight: bold;
            color: #1A4599; /* Optional: change label text color when checked */
        }
        
        /* Style the checkbox label when hovering */
        .side-filter-curated label:hover::before,
         .imputed-side-filter-curated label:hover::before {
            border-color: #007bff;
        }

        .post-processed-top-row{   
            font-size:0.8rem;       
            background-color:whitesmoke;
            -webkit-writing-mode: vertical-rl;
                -ms-writing-mode: tb-rl;
                    writing-mode: vertical-rl;
            -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                    transform: rotate(180deg);
        
            white-space: nowrap;
            text-align: left;
        
            height: auto;          /* important */
            padding: 10px;     /* narrower padding */
        }

        .post-processed-top-row input[type="checkbox"] {
            display: none; /* Hide the default checkbox */
        }
        
        .post-processed-top-row label {
            position: relative;
            padding-left: 0;
            padding-top: 30px;   /* space for checkbox above text */
            cursor: pointer;
        }
        
        .post-processed-top-row label::before {
            content: '';

            position: absolute;
        
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
        
            width: 20px;
            height: 20px;
        
            border: 2px solid #333;
            border-radius: 3px;
            background-color: #fff;
        }
        
        /* Style the checkbox label when hovering */
        .post-processed-top-row label:hover::before {
            border-color: #007bff;
        }

        /* Style when checkbox is checked */
        .post-processed-top-row input[type="checkbox"]:checked + label::before {
            background-color: #1A4599; /* Background color for checked state */
            border-color: #1A4599; /* Border color for checked state */
        }
        
        /* Style for the checked state */
        .post-processed-top-row input[type="checkbox"]:checked + label {
            font-weight: bold;
            color: #1A4599; /* Optional: change label text color when checked */
        }
        
        .number-cell,
         .imputed-number-cell{
            text-align: center;
        }
           /* Hide the actual checkbox */
        .number-cell input[type="checkbox"],
         .imputed-number-cell input[type="checkbox"] {
            display: none;
        }

        /* Make label fill the entire td */
        .number-cell label,
         .imputed-number-cell label {
            display: block;
            width: 100%;
            height: 100%;
            padding: 8px;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            cursor: pointer;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
            border-radius: 4px;
            text-align: center;
            -webkit-transition: background-color 0.2s, color 0.2s;
            -o-transition: background-color 0.2s, color 0.2s;
            transition: background-color 0.2s, color 0.2s;
        }

        /* Style when checkbox is checked */
        .number-cell input[type="checkbox"]:checked ~ label,
         .imputed-number-cell input[type="checkbox"]:checked ~ label {
            background-color: #1A4599;
            color: white;
            font-weight: bold;
            border-color: #0056b3;
        }

        /* Optional: hover effect */
        .number-cell label:hover,
         .imputed-number-cell label:hover {
            background-color: #e6f0ff;
        }    

        .top-left-cell{
            border-width:2px;
            border-color: #EDDCD2;
            padding-left:20px;
            padding-right:20px;
            padding-top:10px;
            padding-bottom:10px;
            font-size:large;
            background-color:whitesmoke;
            text-align: center;
            border-radius:20px 0px 0px 0px;
        }

        .top-right-cell{
            border-width:2px;
            border-color: #EDDCD2;
            padding-left:20px;
            padding-right:20px;
            padding-top:10px;
            padding-bottom:10px;
            font-size:large;
            background-color:whitesmoke;
            text-align: center;
            border-radius:0px 20px 0px 0px;
        }
        
        
        /* Style for the accordion button */
        .accordion {
            background-color: #1A4599;
            color: white;
            cursor: pointer;
            padding: 10px;
            width: 100%;
            text-align: left;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: bold;
            -webkit-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }

        /* Accordion panel styling */
        .panel {
            display: none; /* Initially hidden */
            background-color: #f1f1f1;
            padding: 15px;
            overflow: hidden;
            -webkit-transition: max-height 0.5s ease-out;
            -o-transition: max-height 0.5s ease-out;
            transition: max-height 0.5s ease-out; /* Smooth transition for opening */
        }



        .footer{
            
            position: fixed;
            bottom: 0;      /* Positions the element at the bottom edge of the viewport */
            width: 100%;
            padding: 10px 0;
        }
        
        footer .copyrights {
            text-align: center;
            background-color: rgba(62, 62, 62, 1);
            color: rgba(200, 200, 200, 1);
            padding: .25rem 1.75rem;
        }