:root {
    --color1: #2c2c2c;
    --color2: rgba(88, 88, 88, 0.902);
    --color3: rgba(79, 208, 231, 0.7);
    --color4: rgba(79, 208, 231, 0.6);
    --color5: rgba(79, 208, 231, 0.5);
    --color6: rgba(79, 208, 231, 0.4);
    --color7: rgba(79, 208, 231, 0.3);
    /* Add more colors as needed */

    --font-titles: 'Aldrich'; /* For Titles/Buttons */
    --font-body: 'Roboto', sans-serif; /* For general text */
    --font-numeric: 'Consolas', monospace; /* For numerical readouts */
}

* {
    padding: 0;
    margin: 0 0px;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    background: #000; /* Black background around the fixed area */
    overflow: hidden;
    height: 100vh;
    width: 100vw;
  }
  






/* Main content container */
.main-content {
    display: grid;
    grid-template-areas: 
        "nav header"
        "nav content";
    grid-template-columns: 250px 1fr; /* Sidebar takes 250px, content takes remaining */
    grid-template-rows: 90px 1fr; /* Header is 60px, content takes the rest */
    height: 100vh; /* Full height viewport */
    transition: grid-template-columns 0.3s ease; /* Smooth transition when hiding the sidebar */
}
/* When sidebar is hidden */
.main-content.sidebar-hidden {
    grid-template-columns: 0px 1fr; /* No sidebar, so content and header take full width */
}


/* Navigation Bar */
.navigation-bar {
    grid-area: nav;
    background-color: var(--color1);
    height: 100vh; /* Full height of the viewport */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Arrange items vertically */
    justify-content: space-between; /* Push last item to bottom */
}

.navigation-bar.hidden {
    transform: translateX(-100%); /* Hide sidebar by sliding it out */
}



.active-nav-item {
    border: 1px solid var(--color3);            /* All sides: 1px */
  }
  


.logo-container {
    text-align: center;
}
.logo-container img {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.logo-image1 {
    width: 230px; /* Adjust size as needed */
    height: auto;
    margin-top: 20px; /* Add margin to ensure spacing from bottom */
    margin-bottom: 10px; /* Add margin to ensure spacing from bottom */
}
.logo-image2 {
    width: 170px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 20px; /* Add margin to ensure spacing from bottom */
}



/* Header section */
.top-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c2c2c;
    color: #fff;

    height: 90px;
    width: 100%;
    z-index: 1000;
    transition: width 0.3s ease; /* Transition width change when sidebar is hidden */
    gap: 0.5rem;
}
/* Menu toggle button */
.top-header .menu-toggle {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 2rem;
    padding: 1rem;
}

.top-header .header-title {
    font-size: 1.5rem;
    text-transform: uppercase;
}
.top-header .header-right1 {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;
    justify-content: flex-end; /* Align items to the right */
    gap: 2px; /* Add some spacing between elements */
    margin-right: 0.25rem;
    display: none;
}
.top-header .header-right1 input {
    margin-right: 1rem;
    padding: 0.5rem;
    border: none;
    border-radius: 0.3rem;
}
.top-header .header-right2 {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;
    justify-content: flex-end; /* Align items to the right */
    gap: 2px; /* Add some spacing between elements */
    margin-right: 0.25rem;
    display: none;
}
.top-header .header-right2 input {
    margin-right: 1rem;
    padding: 0.5rem;
    border: none;
    border-radius: 0.3rem;
}

.top-header .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    flex: 1; /* Allow it to take all available space on the left */
    gap: 0.25rem; /* Space between buttons */
    display: none;
}
.top-header .header-left input {
    margin-right: 1rem;
    padding: 0.5rem;
    border: none;
    border-radius: 0.3rem;
}

.header-container {
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
}




/* Speed Display */
#modelNameDisplay {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #ffffff;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#modelName {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--color3);
    border-radius: 8px;
}

#reactorStatus {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--color2);
    border-radius: 8px;
}

#reactorCriticality {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--color2);
    border-radius: 8px;
}

#reactorPower1 {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--color2);
    border-radius: 8px;
}
#reactorPower2 {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: var(--color2);
    border-radius: 8px;
}


/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}





/* Content area */
.content-area {
    grid-area: content;
    background-color: #9c9c9c;
    overflow: auto; /* Ensures scrollbars appear */
}
/* Content screen styling (adjusted for header and sidebar) */
#Isotope_Database, #screen2, #screen3 {
    padding: 0.25rem;
    background-color: #a0a0a0;
}

/* Dropdown styles */
.menu-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.dropdown-content {
    display: none;
}

.menu-header.active + .dropdown-content {
    display: block;
}

/* Hidden Class for Screens */
.hidden {
    display: none;
}






/* Navigation Bar Icons and Menus */
.menu-section {
    padding: 0.5rem;
    background-color: var(--color1);
    flex: 1; /* Allow this section to grow and take available space */
    overflow-y: auto; /* Add scrollbar if the menu overflows */
}

/* General styling for dropdowns */
.menu-group {
    text-align: center;
}

.menu-header {
    font-size: 1.0rem;
    font-weight: bold;
    color: #fff;
    padding-left: 1rem;
    cursor: pointer; /* Make it clickable */
    display: flex;
    justify-content: space-between;
    align-items: left;
    padding: 0.5rem;
    background-color: var(--color2);
    border-radius: 0.2rem;
}

.menu-header:hover {
    background-color: var(--color3);
}


.menu-list {
    list-style: none;
}

.menu-list li {
    padding: 0.5rem;
    font-size: 0.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.menu-list.dropdown-content { display: none; }


.menu-list li:hover {
    border: 1px solid var(--color3);            /* All sides: 1px */
}

/* Dropdown Content Styling */
.dropdown-content {
    display: none; /* Initially hidden */
    padding-left: 0.25rem;
}

.dropdown-header i.arrow {
    transition: transform 0.3s ease;
}

/* Rotate the arrow when expanded */
.dropdown-header.active i.arrow {
    transform: rotate(180deg);
}

.menu-list li i {
    margin-right: 1rem;
}

/* Hamburger icon for toggling the menu */
.menu-toggle {
    display: inline-block;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
}

.hidden {
    width: 70px;
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
    .navigation-bar {
        width: 70px;
    }

    .menu-toggle {
        display: block;
    }

    .hidden {
        width: 0;
    }

    .menu-header {
        display: none;
    }

    .menu-list li i {
        margin-right: 0;
    }

    .menu-list li span {
        display: none;
    }
}









select[multiple] {
    height: 50px;
    background: #2c2c2c;
    color: white;
    border: 1px solid #888;
}
  




































/* Hidden display */
.hidden { display: none; }
      
/* Background image animations */
@keyframes imageAnimation {
    0% {
    animation-timing-function: ease-in;
    opacity: 0;
    }
    8% {
    animation-timing-function: ease-out;
    opacity: 1;
    }
    17% {
    opacity: 1
    }
    25% {
    opacity: 0
    }
    100% {
    opacity: 0
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 1%;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.25vh #1f1e1e; 
    border-radius: 0.5vh;
    background: rgb(101, 101, 101); 
}  
::-webkit-scrollbar-thumb {
    background: #c3c3c3; 
    border-radius: 0.75vh;
} 
::-webkit-scrollbar-thumb:hover {
    background: rgb(79, 208, 231); 
}







/* Start button */
#startBtn {
    background-color: #47d40083;
}
#startBtn:hover {
    background-color: #45d400;
    box-shadow: rgba(0, 255, 0, 0.7) 0px 5px 15px;
}

#pauseBtn {
    background-color: #d4000082;
}
#pauseBtn:hover {
    background-color: #d40000;
    box-shadow: rgba(255, 0, 0, 0.7) 0px 5px 15px;
}

#resetBtn {
    background-color: rgba(10, 200, 171, 0.492);
}
#resetBtn:hover {
    background-color: rgb(10, 200, 170);
    box-shadow: rgba(79, 208, 231, 0.7) 0px 5px 15px;
}

/* Start button */
#WithdrawControlRodBtn {
    background-color: #7a7a7a;
}
#WithdrawControlRodBtn:hover {
    background-color: var(--color3);
    box-shadow: var(--color3) 0px 5px 15px;
}


#InsertControlRodBtn {
    background-color: #7a7a7a;
}
#InsertControlRodBtn:hover {
    background-color: var(--color3);
    box-shadow: var(--color3) 0px 5px 15px;
}



#scramBtn {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Space between buttons */
    background-color: #d4000082;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.67) 5px 5px 15px;
    width: 230px;
}
#scramBtn:hover {
    background-color: #d40000;
    box-shadow: rgba(255, 0, 0, 0.7) 0px 5px 15px;
}


#DecreaseTimePeriodBtn {
    background-color: #7a7a7a;
}
#DecreaseTimePeriodBtn:hover {
    background-color: var(--color3);
    box-shadow: var(--color3) 0px 5px 15px;
}


#IncreaseTimePeriodBtn {
    background-color: #7a7a7a;
}
#IncreaseTimePeriodBtn:hover {
    background-color: var(--color3);
    box-shadow: var(--color3) 0px 5px 15px;
}













/* Control Unit Styling */
.control-unit1, .control-unit2 {
    height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between buttons */
    width: 230px;
}

.control-unit3 {
    background-color: #333;
    padding: 0.4rem 0.4rem;
    border-radius: 6px;
    width: 120px; /* or your preferred width #1f1f1f*/
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

.control-unit4 {
    height: 2.5rem;
    align-items: center;
    gap: 0.5rem; /* Space between buttons */
    background-color: var(--color2);
    padding: 0.25rem;
    border-radius: 12px;
    min-width: 240px;
    height: 82px;
    display: flex;
    flex-direction: row;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color6);
}

.control-unit5 {
    height: 2.5rem;
    align-items: center;
    gap: 0.5rem; /* Space between buttons */
    background-color: var(--color2);
    padding: 0.25rem;
    border-radius: 12px;
    min-width: 240px;
    height: 82px;
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color6);
}
  
  
.stacked_column {
    display: flex;
    flex-direction: column;
}
  

/* Play, Pause, and Reset Buttons */
button {
    height: 2rem;
    width: 2rem;
    background-color: #444;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 10px;
}

button:hover {
    background-color: #555;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}

button i {
    pointer-events: none;
}











.slider-container2 {
    position: relative;
    margin-bottom: 2%;
    padding: 5.0%;
    left: 2.5%;
    width: 85%;
    border-radius: 1.0vh;
    background-color: var(--color1); /* Edit background colour here */
    text-align: center;
    font-size: 0.8rem;
    color: #ffffff; /* Edit colour here */
    box-shadow: rgba(0, 0, 0, 0.7) 0vh 0vh 0.05vh 0.05vh; /* Edit box shadow here */
}

.slider {
    width: 80%;
    height: 15px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 1.0vh;
    box-shadow: rgba(0, 0, 0, 0.7) 0vh 0vh 0.25vh 0.25vh; /* Edit box shadow here */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 1.0vh;
    background: rgb(79, 208, 231);
    box-shadow: rgba(0, 0, 0, 0.7) 0vh 0vh 0.25vh 0.25vh; /* Edit box shadow here */
    cursor: pointer;
}



















label {
    display: inline-block;
    font-size: 0.8rem;
}


#ControlRodPositionDisplay, #TimePeriodDisplay {
    font-size: 0.75rem;
    min-width: 34px;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #c5c5c5;
    border-radius: 8px;
    width: 150px;
}

/* Timer Display */
#displayTime {
    font-size: 0.75rem;
    min-width: 34px;
    font-weight: bold;
    padding: 0.45rem;
    color: #000000;
    text-align: right;
    align-items: center;
    justify-content: center;
    background-color: #c5c5c5;
    border-radius: 8px;
    width: 115px;
}

#NeutronSourceDisplay {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

#NeutronSourceSlider {
    font-weight: bold;
    color: rgb(255, 255, 255);
}




.rhs-overlay {
    position: absolute;
    top: 1%;
    right: 0.5%;
    height: auto;
    width: 20%;
    background-color: rgba(88, 88, 88, 0.9); /* Edit background colour here */
    border-radius: 1.0vh;
    border: 0.05vh solid rgb(79, 208, 231); /* Edit border colour here */
    border-left: none;
    border-top: none;
    border-bottom: none;
    box-shadow: rgba(79, 208, 231, 0.7) 0vh 0vh 0.1vh 0.05vh; /* Edit box shadow here */
}
.centre-overlay {
    position: absolute;
    top: 1%;
    left: 42.5%;
    height: auto;
    width: 20%;
    background-color: rgba(88, 88, 88, 0.9); /* Edit background colour here */
    border-radius: 1.0vh;
    border: 0.05vh solid rgb(79, 208, 231); /* Edit border colour here */
    border-left: none;
    border-top: none;
    border-bottom: none;
    box-shadow: rgba(79, 208, 231, 0.7) 0vh 0vh 0.1vh 0.05vh; /* Edit box shadow here */
}

.rhs-container {
    display: block;
    position: relative;
    margin: 1.5%;
    padding: 1.5%;
    left: 2.5%;
    width: 90%;
    border-radius: 1.0vh;
    background-color: var(--color1); /* Edit background colour here */
    text-align: center;
    font-size: 0.8rem;
    color: #ffffff; /* Edit colour here */
    box-shadow: rgba(0, 0, 0, 0.7) 0vh 0vh 0.05vh 0.05vh; /* Edit box shadow here */
}

.bottom-overlay {

    position: absolute;
    top: 1%;
    left: 22%;
    height: auto;
    width: 20%;
    background-color: rgba(88, 88, 88, 0.9); /* Edit background colour here */
    border-radius: 1.0vh;
    border: 0.05vh solid rgb(79, 208, 231); /* Edit border colour here */
    border-left: none;
    border-top: none;
    border-bottom: none;
    box-shadow: rgba(79, 208, 231, 0.7) 0vh 0vh 0.1vh 0.05vh; /* Edit box shadow here */
}
.bottom-container {
    display: inline-block;
    position: relative;
    margin: 1.5%;
    padding: 2.5%;
    left: 2.5%;
    height: 10%;
    width: 85%;
    border-radius: 1.0vh;
    background-color: var(--color1); /* Edit background colour here */
    text-align: center;
    font-size: 0.8rem;
    color: #ffffff; /* Edit colour here */
    box-shadow: rgba(0, 0, 0, 0.7) 0vh 0vh 0.05vh 0.05vh; /* Edit box shadow here */
}



















#poisonText {
    font-weight: bold;
    color: rgb(255, 255, 255);
}

.progress {
	background-color: rgba(174, 174, 174, 0.9);
	justify-content: flex-start;
	border-radius: 100px;
	align-items: center;
	position: relative;
	display: flex;
    top: 1.0vh;
    left: 0.75vh;
	height: 7px;
	width: 95%;
	margin-bottom: 10px;
}

#ReactionRate_n_cm3_s {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-ReactionRate_n_cm3_s); }
}

.progress-value-ReactionRate_n_cm3_s {
	width: var(--percentage-width-ReactionRate_n_cm3_s);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: blue;
	height: 8px;
}

#OutputPower {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-OutputPower); }
}

.progress-value-OutputPower {
	width: var(--percentage-width-OutputPower);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: lime;
	height: 8px;
}

#ElectricalPower {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-ElectricalPower); }
}

.progress-value-ElectricalPower {
	width: var(--percentage-width-ElectricalPower);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: yellow;
	height: 8px;
}


#NeutronFlux_n_cm2_s {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-NeutronFlux_n_cm2_s); }
}

.progress-value-NeutronFlux_n_cm2_s {
	width: var(--percentage-width-NeutronFlux_n_cm2_s);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: red;
	height: 8px;
}



#NeutronVelocity_cm_s_Avg {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-NeutronVelocity_cm_s_Avg); }
}

.progress-value-NeutronVelocity_cm_s_Avg {
	width: var(--percentage-width-NeutronVelocity_cm_s_Avg);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: cyan;
	height: 8px;
}

#KInfiniteMultiplicationFactor {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-KInfiniteMultiplicationFactor); }
}

.progress-value-KInfiniteMultiplicationFactor {
	width: var(--percentage-width-KInfiniteMultiplicationFactor);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: green;
	height: 8px;
}





#ReactorStatus {
    font-weight: bold;
    color: rgb(79, 208, 231);
}

@keyframes load1 {
	0% { width: 0; }
	100% { width: var(--percentage-width-ReactorStatus); }
}

.progress-value-ReactorStatus {
	width: var(--percentage-width-ReactorStatus);
	transition: width .5s ease-in-out;
	border-radius: 100px;
	background: green;
	height: 8px;
}



/* === MCNP INPUT   === */
#MCNP_INPUT_Filter_Container {
    display: flex    ;
    align-items: center;
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px;
    font-family: var(--font-body);
    color: #ffffff;
    gap: 1rem;
}

#MCNP_INPUT {
    border-radius: 8px;
    margin: 0.5rem;
    gap: 1rem;
}

#MCNP_INPUT-container {
    padding: 1rem;
    background-color: var(--color1); /* Match the plot background color */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    gap: 1rem;
    margin-top: 1rem;
}

/* Headings & labels */
#MCNP_INPUT h3,
#MCNP_INPUT h4,
#MCNP_INPUT .panel-title { 
  color: #E9F7FB;               /* bright text */
  letter-spacing: .02em;
}
#MCNP_INPUT label { 
  color: #CFE7F1;               /* clearer labels */
  font-size: 12.5px;
}


#applyMCNP {
    padding: 1rem;
    width: 100px;
}

#clearMCNP {
    padding: 1rem;
    width: 100px;
}

#output {
    user-select: text;
}




/* readable code areas on dark */
.mcnp-code{
  width:100%;
  min-height:160px;
  background:#0f1518;            /* darker than #1a1a1a for contrast */
  color:#e9f7fb;                  /* high-contrast text */
  border:1px solid #6d6d6d;
  border-radius:6px;
  padding:10px 12px;
  font: 13px/1.45 "SFMono-Regular",Consolas,Menlo,monospace;
  resize:vertical;
  caret-color: var(--color3);
  overflow-y: hidden;         /* no inner scrollbar while we grow */
  transition: height .12s ease;
  /* optional guard so a giant paste doesn't make the page absurdly tall */
  max-height: 60vh;           /* remove if you want unlimited growth */
}
.mcnp-code::placeholder{ color:#82cfe0; opacity:.55; }

.mcnp-output{
  background:#0b1114;
  color: var(--color3);
  border:1px solid #6d6d6d;
  border-radius:6px;
  padding:12px;
  white-space:pre-wrap;
  user-select:text;
  font: 13px/1.45 "SFMono-Regular",Consolas,Menlo,monospace;
}

/* nicer inputs inside the meta panel */
#reactorMetaBox input{
  width:100%;
  margin-top:4px;
  background:#0f1518;
  color:#e9f7fb;
  border:1px solid #6d6d6d;
  border-radius:6px;
  padding:8px 10px;
}
#reactorMetaBox input::placeholder{ color:#82cfe0; opacity:.55; }


/* Panels that use fieldset/legend like REACTOR META */
#MCNP_INPUT fieldset.panel {
  border: 1px solid #6d6d6d;
  border-radius: 8px;
  padding: 10px 12px 12px;   /* room inside the border */
  background: transparent;   /* inherit your container color */
  margin-top: 10px;
}

/* Legend title that sits on the border */
#MCNP_INPUT legend.panel-title {
  padding: 0 8px;
  margin-left: 8px;          /* a bit of offset from the left corner */
  color: #E9F7FB;            /* same heading color you use */
  font-weight: 600;
  letter-spacing: .02em;
}

/* Give the inner control a little breathing room below the legend */
#MCNP_INPUT .mcnp-section > .mcnp-code,
#MCNP_INPUT .mcnp-section > .mcnp-output {
  margin-top: 6px;
  width: 100%;
}














/* Main container for Models 3D */
#Models_3D {
    padding: 1rem;
    background-color: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#Models_3D.hidden {
    display: none;
}

/* Canvas styling */
#renderCanvas {
    width: 100%;
    height: 80%;
    touch-action: none;
    background-color: #121212;
    border-radius: 8px;
}

/* Toolbar container */
#toolbar {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    background-color: #333;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    gap: 2rem;
}

/* Info panel */
#infoPanel {
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

/* Buttons */
button {
    padding: 8px 14px;
    background-color: #444;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.2s ease;
}
button:hover {
    background-color: #666;
}

.wide-btn {
    width: 150px;
    min-width: 150px;
    max-width: 200px;
    display: inline-block;
}



/* Dropdowns */
.dropdown3D {
    position: relative;
    display: inline-block;
    
}

.dropbtn {
    background-color: #444;
    color: white;
    padding: 8px 14px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    width: 200px;
}

.dropdown3D-content {
    display: none;
    position: absolute;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
    min-width: 250px;
    max-height: 500px;
    overflow-y: auto;
    padding: 8px;
    justify-items: left; 
}

/* Show dropdown when hovered (or toggled via JS) */
.dropdown3D.show .dropdown3D-content {
    display: block;
}

/* Scrollbar styling */
.dropdown3D-content::-webkit-scrollbar {
    width: 8px;
}
.dropdown3D-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}
.dropdown3D-content::-webkit-scrollbar-track {
    background-color: #2c2c2c;
}

/* Checkbox styling inside dropdown */
.dropdown3D-content input[type="checkbox"] {
    margin-right: 6px;
}
.dropdown3D-content label {
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Responsive handling for small screens */
@media (max-width: 900px) {
    #toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .dropdown3D-content {
        min-width: 150px;
    }
}


/* General layout and styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#System_Overview {
    padding: 1rem;
    background-color: var(--color2); /* Match the plot background color */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin: 0.5rem;
}

/* Dashboard grid layout */
.dashboard-block {
    gap: 10px;  /* Space between panels */
}

.panel {
    padding: 10px;
    border-radius: 10px;
    background-color: #2c2c2c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    height: auto;  /* Adjust to content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;  /* Space between panels */
    margin-bottom: 10px;
}





#dashboard-title-container {
    align-items: center;
    justify-content: space-around;
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    font-family: var(--font-body);
    color: #ffffff;
    margin-bottom: 20px;

    font-size: 1.5rem;
    color: var(--color3);
    text-align: center;
}


/* Dashboard grid layout */
.dashboard-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Define three equal columns */
    margin: 1rem 0rem;
    gap: 1rem;
}

.panel_3 {
    padding: 20px;
    border-radius: 10px;
    background-color: #2c2c2c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    height: auto;  /* Adjust to content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#Primary_Circuit_Gauge_Cluster, #SecondaryCircuit_Gauge_Cluster, #TertiaryCircuit_Gauge_Cluster {
    width: 100%; /* Make sure the gauge container takes up the full width */
    height: 300px; /* Adjust height to be suitable for your layout */
}

h2 {
    text-align: center;
}

.graph-overlay {
    display: block;
    position: relative;
    border-radius: 1.0vh;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.graphs {
    position: relative;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

#ControlSystemScatterGraph {
    position: relative;
    height: 100%;
    width: 100%;
}

#ReactorSystemScatterGraph {
    position: relative;
    height: 100%;
    width: 100%;
}
#isotopeSelect1 {
    min-height: 80px;
    font-size: 12px; 
  }
  
#isotopeSelect2 {
    min-height: 80px;
    font-size: 12px; 
  }
  
#isotopeSelect3 {
    min-height: 80px;
    font-size: 12px; 
  }
  

#Isotope_History_Atoms {
    position: relative;
    height: 100%;
    width: 100%;
}


#Isotope_History_CrossSections {
    position: relative;
    height: 100%;
    width: 100%;
}



#NeutronDistributionGraph1, #NeutronDistributionGraph2, #NeutronDistributionGraph3, #NeutronDistributionGraph4 {
    position: relative;
    height: 100%;
    width: 100%;
}


#microscopicGraph1, #microscopicGraph2, #microscopicGraph3, #microscopicGraph4  {
    position: relative;
    height: 100%;
    width: 100%;
}

#macroscopicGraph1, #macroscopicGraph2, #macroscopicGraph3, #macroscopicGraph4  {
    position: relative;
    height: 100%;
    width: 100%;
}



#reactionrateGraph1, #reactionrateGraph2, #reactionrateGraph3, #reactionrateGraph4  {
    position: relative;
    height: 100%;
    width: 100%;
}


.neutron-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem; /* OK: spacing between charts */
    padding: 0; /* ✅ Make sure this isn't adding outer spacing */
    margin-top: 0.5rem;
  }
  
  .neutron-grid > div {
    padding: 0; /* ✅ prevent inner spacing unless needed */
    margin: 0;
    min-height: 40vh;
    max-height: 40vh;
    width: 100%;
    height: 40vh;
  }
  

/* General container styling for the filter and plot section */
#Isotope_History, #Neutron_Spectrum, #Control_History, #plot_microscopic_xs, #plot_macroscopic_xs, #Fission_Yields, #plot_reactionrate {
    border-radius: 8px;
    margin: 0.5rem;
}



#filter-container {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #333;
    padding: 15px;
    max-height: 100px;
    border-radius: 8px;
    font-family: var(--font-body);
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Labels for filter dropdowns */
#filter-container label {
    font-size: 1rem;
    margin-right: 0.5rem;
}

#filterSelect, #valueSelect, #startTime, #endTime {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #444;
    color: #fff;
    margin-right: 10px;
}

#filterSelect:focus, #valueSelect:focus {
    border-color: var(--color3);
}



#applyTimeFilter {
    padding: 10px 15px;
    background-color: var(--color1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#applyTimeFilter i {
    font-size: 16px;
    margin-right: 5px;
}

#applyTimeFilter:hover {
    background-color: var(--color3);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}


/* Graph container */
#Isotope_History_Atoms, #Isotope_History_CrossSections {
    margin: 1rem 0;
    background-color: #2c2c2c;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Titles and fonts for better readability */
h2 {
    font-size: 1.5rem;
    color: var(--color3);
    text-align: center;
    margin-bottom: 1rem;
}

/* General plot styling to maintain consistent colors */
.plot-container {
    background-color: #2c2c2c !important;
}

/* Add a scrollbar for overflow handling on large data sets */
#Isotope_History_Atoms, #Isotope_History_CrossSections {
    overflow: auto;
}

/* Style the Y Log Scale dropdown in the graph */
#Isotope_History .modebar-group, #Isotope_History .modebar-btn {
    background-color: #444 !important;
    border: none !important;
    color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #filter-container {
        flex-direction: column;
        align-items: flex-start;
    }

    #filterSelect, #valueSelect {
        width: 100%;
        margin-bottom: 1rem;
    }
}




/* KNOB TOOL */ 
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');
  }

  .knob-container {
    width: 200px;
    height: 200px;
    display: inline-block;
    justify-content: center;
    align-items: center;
  }

  .knob-surround {
    position: relative;
    background-color: grey;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: solid 0.25em #0e0e0e;
    margin-top: 15%;
    margin-left: 15%;
    margin-right: 15%;
    background: #181818;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1d1d1d), color-stop(1, #131313));
    background: -ms-linear-gradient(bottom, #1d1d1d, #131313);
    background: -moz-linear-gradient(center bottom, #1d1d1d 0%, #131313 100%);
    background: -o-linear-gradient(#131313, #1d1d1d);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#1d1d1d', GradientType=0);
    -webkit-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0.2em 0.1em 0.05em rgba(255, 255, 255, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);

  }


  .knob {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 10;
  }
  .knob:before {
    content: "";
    position: absolute;
    bottom: 19%;
    left: 19%;
    width: 3%;
    height: 3%;
    background-color: rgba(79, 208, 231, 0.7); /* Updated background color */
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0.4em 0 rgba(79, 195, 244, 0.7); /* Updated shadow color */
    -moz-box-shadow: 0 0 0.4em 0 rgba(79, 195, 244, 0.7); /* Updated shadow color */
    box-shadow: 0 0 0.4em 0 rgba(79, 195, 244, 0.7); /* Updated shadow color */
  }
  .min,
  .max {
    display: block;
    font-family: "Varela Round", sans-serif;
    color: rgba(79, 208, 231, 1);
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    font-size: 70%;
    position: absolute;
    opacity: 0.5;
  }
  .min {
    bottom: -1em;
    left: -2.5em;
  }
  .max {
    bottom: -1em;
    right: -2.5em;
  }
  .tick {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: visible;
  }
  .tick:after {
    content: "";
    width: 0.08em;
    height: 0.6em;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: -1.5em;
    left: 50%;
    -webkit-transition: all 180ms ease-out;
    -moz-transition: all 180ms ease-out;
    -o-transition: all 180ms ease-out;
    transition: all 180ms ease-out;
  }
  .activetick:after {
    background-color: rgba(79, 208, 231, 0.7); /* Updated background color */
    -webkit-box-shadow: 0 0 0.3em 0.08em rgba(79, 195, 244, 0.7); /* Updated shadow color */
    -moz-box-shadow: 0 0 0.3em 0.08em rgba(79, 195, 244, 0.7); /* Updated shadow color */
    box-shadow: 0 0 0.3em 0.08em rgba(79, 195, 244, 0.7); /* Updated shadow color */
    -webkit-transition: all 50ms ease-in;
    -moz-transition: all 50ms ease-in;
    -o-transition: all 50ms ease-in;
    transition: all 50ms ease-in;
  }
  h1 {
    font-weight: normal;
    margin: 2em 0;
  }
  p {
    line-height: 150%;
    max-width: 36em;
    margin: 1em auto;
  }
  a {
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px solid #444;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -o-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
  }
  a:hover,
  a:focus {
    color: #eee;
  }
  body,
  .knob {
    background-image: url(data:image/png;base64,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);
  }

















  /* ISOTOPE DATABASE */
  /* Let Chrome skip off-screen rows */
#leaderboard-list tr {
  content-visibility: auto;
  contain-intrinsic-size: 28px; /* ≈ row height */
}

/* Table perf helpers */
#leaderboard-list { table-layout: fixed; }
#leaderboard-list td { contain: paint; }

/* ===== Band color classes (12 steps each) ===== */
/* Neutral */
[id="leaderboard-list"] td[class^="band-"] { color:#000; }
.band-atom-0, .band-conc-0, .band-mass-0, .band-vol-0,
.band-sct-0, .band-sat-0, .band-sft-0,
.band-macS-0, .band-macA-0, .band-macF-0,
.band-uF-0, .band-pF-0 { background:#e5e5e5; }

/* decay rate bands: grey -> blue */
.band-dec-0  { background:#ffffff; }  /* zero / n/a */
.band-dec-1{background:#ffcccc} .band-dec-2{background:#ffaaaa}
.band-dec-3{background:#ff8888} .band-dec-4{background:#ff6666}
.band-dec-5{background:#ff5555} .band-dec-6{background:#ff4444}
.band-dec-7{background:#ff3333} .band-dec-8{background:#ff1f1f}
.band-dec-9{background:#ff0f0f} .band-dec-10{background:#ef0000}
.band-dec-11{background:#d70000}


/* atoms/conc/mass/vol: grey -> green */
.band-atom-1,.band-conc-1,.band-mass-1,.band-vol-1{background:#d7efd7}
.band-atom-2,.band-conc-2,.band-mass-2,.band-vol-2{background:#c8e8c8}
.band-atom-3,.band-conc-3,.band-mass-3,.band-vol-3{background:#bae1ba}
.band-atom-4,.band-conc-4,.band-mass-4,.band-vol-4{background:#abdbab}
.band-atom-5,.band-conc-5,.band-mass-5,.band-vol-5{background:#9cd49c}
.band-atom-6,.band-conc-6,.band-mass-6,.band-vol-6{background:#8dcd8d}
.band-atom-7,.band-conc-7,.band-mass-7,.band-vol-7{background:#7fc67f}
.band-atom-8,.band-conc-8,.band-mass-8,.band-vol-8{background:#70bf70}
.band-atom-9,.band-conc-9,.band-mass-9,.band-vol-9{background:#61b861}
.band-atom-10,.band-conc-10,.band-mass-10,.band-vol-10{background:#53b153}
.band-atom-11,.band-conc-11,.band-mass-11,.band-vol-11{background:#44aa44}

/* micros: grey -> yellow/orange/red by group */
.band-sct-1{background:#ffffcc} .band-sct-2{background:#fff7a8}
.band-sct-3{background:#ffee84} .band-sct-4{background:#ffe460}
.band-sct-5{background:#ffdb3c} .band-sct-6{background:#ffd218}
.band-sct-7{background:#f5c900} .band-sct-8{background:#e6bf00}
.band-sct-9{background:#d9b500} .band-sct-10{background:#ccab00}
.band-sct-11{background:#bfa100}

.band-sat-1{background:#ffe8cc} .band-sat-2{background:#ffd8a8}
.band-sat-3{background:#ffc884} .band-sat-4{background:#ffb860}
.band-sat-5{background:#ffa83c} .band-sat-6{background:#ff9818}
.band-sat-7{background:#f58f00} .band-sat-8{background:#e68600}
.band-sat-9{background:#d97d00} .band-sat-10{background:#cc7400}
.band-sat-11{background:#bf6b00}

.band-sft-1{background:#ffcccc} .band-sft-2{background:#ffaaaa}
.band-sft-3{background:#ff8888} .band-sft-4{background:#ff6666}
.band-sft-5{background:#ff5555} .band-sft-6{background:#ff4444}
.band-sft-7{background:#ff3333} .band-sft-8{background:#ff1f1f}
.band-sft-9{background:#ff0f0f} .band-sft-10{background:#ef0000}
.band-sft-11{background:#d70000}

/* macros: reuse micros palettes */
.band-macS-1{background:#ffffcc} .band-macS-2{background:#fff7a8}
.band-macS-3{background:#ffee84} .band-macS-4{background:#ffe460}
.band-macS-5{background:#ffdb3c} .band-macS-6{background:#ffd218}
.band-macS-7{background:#f5c900} .band-macS-8{background:#e6bf00}
.band-macS-9{background:#d9b500} .band-macS-10{background:#ccab00}
.band-macS-11{background:#bfa100}

.band-macA-1{background:#ffe8cc} .band-macA-2{background:#ffd8a8}
.band-macA-3{background:#ffc884} .band-macA-4{background:#ffb860}
.band-macA-5{background:#ffa83c} .band-macA-6{background:#ff9818}
.band-macA-7{background:#f58f00} .band-macA-8{background:#e68600}
.band-macA-9{background:#d97d00} .band-macA-10{background:#cc7400}
.band-macA-11{background:#bf6b00}

.band-macF-1{background:#ffcccc} .band-macF-2{background:#ffaaaa}
.band-macF-3{background:#ff8888} .band-macF-4{background:#ff6666}
.band-macF-5{background:#ff5555} .band-macF-6{background:#ff4444}
.band-macF-7{background:#ff3333} .band-macF-8{background:#ff1f1f}
.band-macF-9{background:#ff0f0f} .band-macF-10{background:#ef0000}
.band-macF-11{background:#d70000}

/* fission product bands: uF greenish, pF purple-ish */
.band-uF-1{background:#d7efd7} .band-uF-2{background:#c8e8c8}
.band-uF-3{background:#bae1ba} .band-uF-4{background:#abdbab}
.band-uF-5{background:#9cd49c} .band-uF-6{background:#8dcd8d}
.band-uF-7{background:#7fc67f} .band-uF-8{background:#70bf70}
.band-uF-9{background:#61b861} .band-uF-10{background:#53b153}
.band-uF-11{background:#44aa44}

.band-pF-1{background:#e9d7f2} .band-pF-2{background:#dec3ee}
.band-pF-3{background:#d3afea} .band-pF-4{background:#c99be6}
.band-pF-5{background:#bf88e2} .band-pF-6{background:#b574de}
.band-pF-7{background:#ab60da} .band-pF-8{background:#a24dd6}
.band-pF-9{background:#9740cf} .band-pF-10{background:#8b33c7}
.band-pF-11{background:#7f26bf}

/* ===== Your existing styles ===== */
.leaderboard-overlay {
  display: block;
  position: relative;
  border-radius: 1.0vh;
  border-left: none;
  border-top: none;
  border-bottom: none;
  overflow: visible;
}

.container {
  background: var(--color1);
  border: 1px solid #000000;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #fff;
  overflow: visible;
}

h1 {
  margin: 0 0 0px;
  text-align: center;
  color: var(--color3);
}

.controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #333;
  padding: 10px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px;
  font-family: var(--font-body);
    color: #ffffff;
}

.controls label {
  color: var(--font-titles);
  margin-right: 10px;
}

#search-bar {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  background-color: #444;
  color: #fff;
  width: 200px;
}

#filterSelect3, #valueSelect, #startTime, #endTime {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #444;
  color: #fff;
  margin-right: 10px;
}
#filterSelect3:focus, #valueSelect:focus { border-color: var(--color3); }

#filter3-container select, #filter-container label { margin-left: 1rem; }

#refresh-btn, #hide_Zeros, #hide_Unused {
  height: 2rem;
  width: 9rem;
  padding: 10px 15px;
  margin-left: 1rem;
  background-color: var(--color1);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#refresh-btn:hover, #hide_Zeros:hover, #hide_Unused:hover {
  background-color: var(--color3);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}

.leaderboard {
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #000000;
  background: var(--color2);
  border-radius: 4px;
  margin-top: 1vh;
  font-size: 9px;
  color: #000000;
  height: 80vh;
  width: 100%;
}

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #eeeeee15;
  border-bottom: 1px solid #000000;
}
th {
  cursor: pointer;
  background-color: var(--color1);
  color: #ffffff;
  font-size: 9px;
  position: sticky;
  top: 0;
  z-index: 2;
}
th:hover { background-color: rgb(79, 208, 231); }

/* which column is sorted and in which direction */
th.sorted { background-color: #4fd0e7 !important; color:#000; }
th.sort-asc::after  { content: ' ▲'; font-weight:700; }
th.sort-desc::after { content: ' ▼'; font-weight:700; }


tbody tr:last-child td { border-bottom: none; }


.leaderboard::-webkit-scrollbar { width: 18px; }

.spacer { width: 10px; border: none; background: transparent; }
th { padding: 8px; border: 1px solid #ddd; }

/* spacer rows used by virtualization */
.v-spacer td { padding:0 !important; border:0 !important; }


#leaderboard-list tr:nth-child(odd)  td.zebra { background:#fff !important; }
#leaderboard-list tr:nth-child(even) td.zebra { background:#f3f3f3 !important; }



































/* TILE MAP */
#Tile_Map {
    border-radius: 8px;
    margin: 0.5rem;
}




.highcharts-figure,
.highcharts-data-table table {
    margin: 0.5em auto;
}



/* Style for Highcharts container */
#container {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    background: #2c2c2c; /* Light background for better contrast */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden; /* Ensure zooming does not overflow */
}








#filter2-container {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px;
    font-family: var(--font-body);
    color: #ffffff;
}

/* Labels for filter dropdowns */
#filter-container label {
    font-size: 1rem;
    margin-right: 0.5rem;
}

#filterSelect2, #valueSelect, #startTime, #endTime {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #444;
    color: #fff;
    margin-right: 10px;
}

#filterSelect2:focus, #valueSelect:focus {
    border-color: var(--color3);
}

/* Spacing between filter elements */
#filter2-container select, #filter-container label {
    margin-left: 1rem;
}


#resetZoom {
    width: 7rem;
    padding: 10px 15px;
    margin-left: 1rem;
    background-color: var(--color1); /* Matches your theme color */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#resetZoom i {
    margin-left: 0.5rem;
    font-size: 16px;
}

#resetZoom:hover {
    background-color: var(--color3); /* Slight hover effect */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}


#hideZeros {
    height: 2rem;
    width: 7rem;
    margin-left: 1rem;
    padding: 10px 15px;
    background-color: var(--color1); /* Matches your theme color */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hideZeros i {
    margin-left: 0.5rem;
    font-size: 16px;
}

#hideZeros:hover {
    background-color: var(--color3); /* Slight hover effect */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}


#hideUnused {
    height: 2rem;
    width: 7rem;
    margin-left: 1rem;
    padding: 10px 15px;
    background-color: var(--color1); /* Matches your theme color */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hideUnused i {
    margin-left: 0.5rem;
    font-size: 16px;
}

#hideUnused:hover {
    background-color: var(--color3); /* Slight hover effect */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
}



#reactionFilter1,#reactionFilter2, #reactionFilter3  { 
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-left:1.5rem;
}
.cs-box {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    background:#2c2c2c; color:#fff; border:1px solid #555; border-radius:10px;
    padding:6px 10px;
}
.cs-box .label { margin-right:6px; opacity:.85 }
.cs-box .chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 8px; border:1px solid #555; border-radius:999px; background:#101820;
}
.cs-box .chip input { margin:0 }

/* In main.css */
#crossTypeRadios input[type="radio"] {
  accent-color: #00d4ff; /* your selected color */
  margin: 0.5rem;
}

/* Optional: nicer focus ring */
#crossTypeRadios input[type="radio"]:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* Optional: change label styling when selected (modern browsers) */
#crossTypeRadios label {
  color: #bbb;
}
#crossTypeRadios label:has(input:checked) {
  color: #fff;
  font-weight: 600;
}