:root {
  --c1: #222831;
  --c2: #31363F;
  --c3: #76ABAE;
  --c3-dark: #4A7D80;
  --c4: #EEEEEE;
  --c5: #CFCFD2;

--c1-rgb: rgb(34, 40, 49);
--c1-rgba: 34, 40, 49;
--c2-rgb: rgb(49, 54, 63);
--c2-rgba: 49, 54, 63;
--c3-rgb: rgb(118, 171, 174);
--c4-rgb: rgb(238, 238, 238);
--c4-rgba: 238, 238, 238;
--c5-rgb: rgb(207, 207, 210);
--c5-rgba: 207, 207, 210;


  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --c10: #8E3A3A;
  --c11: #D9855B;
  --c12: #C6B063;
  --c13: #8A89A5;
  --c14: #92A385;

--icon-default: var(--c3)
}

.red {
  color: var(--c10);
}
.orange {
  color: var(--c11);
}
.yellow{
  color: var(--c12);
}
.blue {
  color: var(--c13);
}
.green {
  color: var(--c14);
}

html {
  touch-action: manipulation;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/RobotoMono-Regular.woff2') format('woff2'), /* Ensure these paths match your file names */
         url('fonts/RobotoMono-Regular.woff') format('woff');
    font-display: swap; /* Recommended for better user experience */
}

body {
  font-size: 14px;
  margin: 0; /* Remove default body margin */
  background-color: var(--c1); /* Your background color */
  color: var(--c4); /* Your text color */
  font-family: 'Roboto Mono', 'Courier New', monospace; /* Your font family */
  padding-top: 20px; /* Adjust 4rem if your top-bar's actual height changes */
  padding-left: 20px; /* Retain original padding for left */
  padding-right: 20px; /* Retain original padding for right */
  padding-bottom: 20px; /* Retain original padding for bottom */
}

label {
  display: block;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 600;
}

/* Active tab label */
input[type="radio"]:checked + label {
    color: var(--c11);
}

label:active {
  color: var(--c11);
  transform: scale(0.98);
}

.label-small {
  font-size: 14px;
}

.label-medium {
  font-size: 16px;
}

.label-large {
  font-size: 20px;
}

.centered-horizontal-flex {
    display: flex;
    justify-content: space-around; /* Centers items along the new vertical main axis */
    align-items: center;
    gap: 0.6em;
}

.centered-vertical-flex {
    flex-direction: column;
    display: flex;
    justify-content: center; /* Centers items along the new vertical main axis */
    align-items: center;
}

.content {
  padding-top: 58px;
}

h2 {
    color: var(--c4);
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    color: var(--c4);
    text-align: center;
    margin-bottom: 0px;
}

#scatterPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
    width: 100%;
}

#scatterPlot{
    flex-grow: 1;
    width: 100%;
    height: 100%; /* Ensure the plot takes the full height */
}

#caloriesPlotContainer {
    display: flex;
    align-items: center;
    height: 600px; /* Set a fixed height for the entire plot and dropdown */
}

#caloriesPlot {
    width: 80%;
    height: 100%; /* Ensure the plot takes the full height */
}


/* Boxes */

.updatemenu-item-rect:hover {
      background-color: var(--c1); /* Green hover color */
      fill: var(--c4);
  }

.updatemenu-item-text:hover {
      background-color: var(--c3); /* Green hover color */
      fill: var(--c1);
      color: var(--c1);
  }

/* Ensure plot takes up the full space */
#caloriesPlot {
    width: 100%;
    height: 100%;
}

.unit {
  margin-left: 12px;
  /*color: #6b7280;*/
  color: var(--c5);
  font-weight: 400;
  font-size: 0.9rem;
  white-space: nowrap; /* Prevent unit from wrapping */
}

/* BEGIN Collapsible content */

.collapsible-container {
    max-width: 800px;
    margin: auto;
    margin-top: 10px;
}

.collapsible-bar {
    background-color: var(--c2);
    color: var(--c4);
    padding: 10px 15px;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsible-bar:active, .collapsible-bar:focus {
    background-color: var(--c2);
}

.collapsible-bar h2 {
    margin: 0;
    font-size: 1.2em;
}

.arrow {
    display: inline-block;
    font-size: 1em;
    transition: transform 0.3s ease;
}

/* Rotate arrow when bar is active */
.collapsible-bar.active .arrow {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.open {
    max-height: 2000px; /* Adjust this value to be larger than your largest table */
    padding: 0px;
}
/* END Collapsible content */

.consumed-time {
  padding: 8px;
}

@media (max-width: 768px) { /* You can adjust this breakpoint as needed */
  body {
    padding: 0; /* Remove padding for screens up to 768px wide */
  }
}

@keyframes flashBorder {
    0% {
        outline: 2px solid var(--c3);
        outline-offset: 2px;
    }
    100% {
        outline: 2px solid var(--c2);
        outline-offset: 2px;
    }
}

.flash-effect {
    animation: flashBorder 1s ease-out;
}