.Math:hover {
            background-color: #ff5050;
            border-color: #ff5050;
        }
        .Math-highlighted {
            background-color: #ff5050 !important;
        }
        .Math-highlighted:hover {
            background-color: #ff5050;
            border-color: #ff5050;
        }
.NaturalSciences:hover {
            background-color: #a2fab0;
            border-color: #a2fab0;
        }
        .NaturalSciences-highlighted {
            background-color: #a2fab0 !important;
        }
        .NaturalSciences-highlighted:hover {
            background-color: #a2fab0;
            border-color: #a2fab0;
        }
.ComputingScience:hover {
            background-color: #ff9696;
            border-color: #ff9696;
        }
        .ComputingScience-highlighted {
            background-color: #ff9696 !important;
        }
        .ComputingScience-highlighted:hover {
            background-color: #ff9696;
            border-color: #ff9696;
        }
.EngineeringSciences:hover {
            background-color: #66ccff;
            border-color: #66ccff;
        }
        .EngineeringSciences-highlighted {
            background-color: #66ccff !important;
        }
        .EngineeringSciences-highlighted:hover {
            background-color: #66ccff;
            border-color: #66ccff;
        }
.EngineeringDesign:hover {
            background-color: #ff9900;
            border-color: #ff9900;
        }
        .EngineeringDesign-highlighted {
            background-color: #ff9900 !important;
        }
        .EngineeringDesign-highlighted:hover {
            background-color: #ff9900;
            border-color: #ff9900;
        }
.EngineeringProfession:hover {
            background-color: #f04aa3;
            border-color: #f04aa3;
        }
        .EngineeringProfession-highlighted {
            background-color: #f04aa3 !important;
        }
        .EngineeringProfession-highlighted:hover {
            background-color: #f04aa3;
            border-color: #f04aa3;
        }
.COMP:hover {
            background-color: #f5f569;
            border-color: #f5f569;
        }
        .COMP-highlighted {
            background-color: #f5f569 !important;
        }
        .COMP-highlighted:hover {
            background-color: #f5f569;
            border-color: #f5f569;
        }
.PROG:hover {
            background-color: #cc33ff;
            border-color: #cc33ff;
        }
        .PROG-highlighted {
            background-color: #cc33ff !important;
        }
        .PROG-highlighted:hover {
            background-color: #cc33ff;
            border-color: #cc33ff;
        }
.ITS:hover {
            background-color: #996633;
            border-color: #996633;
        }
        .ITS-highlighted {
            background-color: #996633 !important;
        }
        .ITS-highlighted:hover {
            background-color: #996633;
            border-color: #996633;
        }
.Other:hover {
            background-color: #5ce0c4;
            border-color: #5ce0c4;
        }
        .Other-highlighted {
            background-color: #5ce0c4 !important;
        }
        .Other-highlighted:hover {
            background-color: #5ce0c4;
            border-color: #5ce0c4;
        }
.GA-KB-I {}
.GA-KB-D {}
.GA-KB-A {}
.GA-PA-I {}
.GA-PA-D {}
.GA-PA-A {}
.GA-IN-I {}
.GA-IN-D {}
.GA-IN-A {}
.GA-DE-I {}
.GA-DE-D {}
.GA-DE-A {}
.GA-ET-I {}
.GA-ET-D {}
.GA-ET-A {}
.GA-TW-I {}
.GA-TW-D {}
.GA-TW-A {}
.GA-CS-I {}
.GA-CS-D {}
.GA-CS-A {}
.GA-PR-I {}
.GA-PR-D {}
.GA-PR-A {}
.GA-IS-I {}
.GA-IS-D {}
.GA-IS-A {}
.GA-EE-I {}
.GA-EE-D {}
.GA-EE-A {}
.GA-EP-I {}
.GA-EP-D {}
.GA-EP-A {}
.GA-LL-I {}
.GA-LL-D {}
.GA-LL-A {}

.GAI-highlighted { background-color:#a6e4a6; outline:0px solid #111; }  /* Introductory */
.GAD-highlighted { background-color:#e7d69e; outline:0px solid #111; }  /* Developing   */
.GAA-highlighted { background-color:#8ca8cc; outline:0px solid #111; }  /* Advanced     */

#ga-controls{margin:10px 0 12px 0;display:flex;flex-direction:column;gap:8px}
#ga-controls .ga-title{padding:4px 8px;font-weight:600;width:max-content}
#ga-controls select{padding:4px 6px;max-width:420px}
#ga-controls .ga-levels{display:flex;flex-direction:column;gap:8px;width:max-content}
#ga-controls .ga-level{border:2px solid #111;border-radius:4px;padding:6px 12px;user-select:none}
#ga-controls .ga-level.I{background:#a6e4a6}
#ga-controls .ga-level.D{background:#e7d69e}
#ga-controls .ga-level.A{background:#8ca8cc}
#ga-controls .ga-clear{font-size:12px;text-decoration:underline;width:max-content}
#ga-controls .ga-clearall{font-size:16px;font-weight:600;text-decoration:underline;color:#c00;cursor:pointer;width:max-content;margin-top:20px;}

.ga-table{border-collapse:collapse;margin-top:6px;width:100%;table-layout:fixed}
.ga-table th,.ga-table td{border:1px solid #999;text-align:center;font-size:12px}
.ga-table th{background:#f5f5f5;font-weight:600}
.ga-table td.empty{background:#f8f8f8}

/* same level colors you’re using elsewhere */
.ga-table td.lvl-I{background:#a6e4a6}  /* Introductory */
.ga-table td.lvl-D{background:#e7d69e}  /* Developing    */
.ga-table td.lvl-A{background:#8ca8cc}  /* Advanced      */
                      
 /* keep the GA table clear of the tooltip arrow */
.tooltiptextleft .ga-table,
.tooltiptextright .ga-table { margin-left: 3px; margin-right: 8px; }

/* in case the tooltip container clips the table/arrow */
.tooltiptextleft,
.tooltiptextright { overflow: visible; }

/* keep arrow outside so content has symmetric padding */
.tooltiptextleft,
.tooltiptextright{
  position: relative;
  overflow: visible;            /* allow arrow outside box */
  padding: 8px 12px;            /* symmetric padding */
  background: #eee;             /* match your tooltip background */
}

/* triangle arrows */
.tooltiptextleft::before,
.tooltiptextright::before{
  content:"";
  position:absolute;
  top:12px;                     /* vertical offset of the arrow */
  border:8px solid transparent;
}

.tooltiptextleft::before{
  left:-8px;                    /* sit outside */
  border-right-color:#eee;      /* same as tooltip background */
}

.tooltiptextright::before{
  right:-8px;                   /* sit outside */
  border-left-color:#eee;       /* same as tooltip background */
}

/* Generic level highlight classes used by the JS */
.GAI-highlighted { background-color:#a6e4a6; outline:0px solid #111; }
.GAD-highlighted { background-color:#e7d69e; outline:0px solid #111; }
.GAA-highlighted { background-color:#8ca8cc; outline:0px solid #111; }