svg g g.Y{
    font-weight: 600;
    font-size: 0.6rem;
    font-family: 'Lato', sans-serif;
}

svg g g.X{
    font-weight: 600;
    font-size: 0.4rem;
    font-family: 'Lato', sans-serif;
}

/* document.querySelector("#dose-chart > svg > g > g.Y") */

#text_labels{
    font-size: 0.6rem;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
}

#title_labels{
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
}

#legend{
    font-size: 0.5rem;
    font-family: 'Lato', sans-serif;
}

:root {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  }
  .checkbox-container *,
  .checkbox-container *:after,
  .checkbox-container *:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --primary-color: #4686e5;
      font-weight: bold;
  }
  
  
  .checkbox-container {
    text-align: center;
    justify-content: center;
    display: flex;
      flex-wrap: wrap;
    gap: 0.5rem;
      padding: .5rem;
  }
  
  /* Hide default radio style */
  .checkbox-container input {
    visibility: hidden;
      position: absolute;
    opacity: 0;
    margin: 0;
  }
  
  /* Change icon, border and text color when radio is checked */
  .checkbox-container input:checked +  span,
  .checkbox-container input:checked +  span > span {
    border-color: var(--primary-color);
    color: var(--primary-color);
    /* font-size: 1.2em; */
  }
  
  /* Checkbox display */
  .checkbox-container input:checked + span::before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--primary-color);
      border: #fff 1px solid;
  }
  
  /* Checkbox icon and text */
  .checkbox-container span {
    display: flex;
    position: relative;
      
    align-items: center;
    justify-content: center;
    width: 200px;
    border-radius: 15px;
    border: 1px solid #ccc;
    transition: 0.2s ease;
    cursor: pointer;
  }
  
  .checkbox-container span:hover,
  .checkbox-container input:checked + span {
    border-color: #999;
      background-color: var(--primary-color) !important;
      color: #fff !important;
      fill: #fff !important;
  }
  
  /* Checkmark (icon inside circle) */
  .checkbox-container span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1rem;
    height: 0.85rem;
    background-color: #fff;
      border: 2px solid var(--primary-color);
    border-radius: 50%;
      
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
      
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: .75rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }