.centered-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-cube-loader {
    width: 20px !important;
    height: 20px !important;
    background: red;
    position: relative;
    animation: cube-spin 1.5s infinite linear;
}

.custom-cube-loader::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    animation: cube-spin 1.5s infinite linear;
}

/* Adjust the spinner size for the cube type */
.dash-loading .dash-spinner .custom-cube-loader {
    width: 20px !important;
    height: 20px !important;
}

/* Adjust the overall size of the loading spinner */
.dash-loading .dash-spinner {
    width: 20px !important;
    height: 20px !important;
}

@keyframes cube-spin {
    0%, 10% {
        transform: rotate(0deg);
    }
    25%, 35% {
        transform: rotate(90deg);
    }
    45%, 55% {
        transform: rotate(180deg);
    }
    70%, 80% {
        transform: rotate(270deg);
    }
    90%, 100% {
        transform: rotate(360deg);
    }
}
/* Add these CSS rules to make the layout responsive */
@media (min-width: 768px) {
    .row {
        flex-direction: row !important;
    }

}

@media (max-width: 767px) {
    .row {
        flex-direction: column !important;
    }
    
    .metric-box {
        flex: 1 1 100% !important;
    }
    
}

.responsive-histogram .gtitle,
.responsive-histogram .infolayer text{
    font-size:14px;
}
/* Apply vw-based font sizes */
.responsive-histogram .xtick,
.responsive-histogram .ytick
 {
    font-size: 12px !important;
}

.responsive-histogram svg {
    font-size: 12px;
}

/* Targets the legend group and its text labels */
.responsive-histogram .legend text {
    font-size: 12px !important;
}

/* Extra: also reduce legend title if used */
.responsive-histogram .legendtitle {
    font-size: 12px !important;
}

@media (max-width: 767px) {
    #infoContainer {
        padding: 5vw !important; /* or whatever padding you want on mobile */
    }
}


  /* Font sizing for charts that works on all devices */
.responsive-histogram .gtitle {
  font-size: 14px !important;
}

.responsive-histogram svg {
    font-size: 12px;
  }

/* Additional mobile-friendly improvements */
@media (max-width: 767px) {

    /* Chart text adjustments for mobile */
    .responsive-histogram .gtitle
     {
    font-size: 14px !important; /* Use px instead of vw on mobile */
    }

    /* Font sizing for charts that works on all devices */
    .responsive-histogram .legend text,
    .responsive-histogram .legendtitle,
    .responsive-histogram .infolayer text,
    .responsive-histogram .xtick,
    .responsive-histogram .ytick
    {
    font-size: 12px;
    }

    .responsive-histogram svg {
    font-size: 12px;
    }

    /* Typography adjustments */
    h2, h4 {
      font-size: 18px !important;
    }
    
    h6 {
      font-size: 14px !important;
    }
    
    p {
      font-size: 12px !important;
    }
    
    /* Make visualizations responsive */
    #dd-output-data-ama,
    #dd-output-data-sps,
    #dd-output-data-bdr,
    #dd-output-data-rewards {
      height: auto !important;
      min-height: 200px !important;
    }
    
    /* Stacking the four visualization containers */
    html.Div:has(#dd-output-data-ama, #dd-output-data-sps, #dd-output-data-bdr, #dd-output-data-rewards) {
      flex-direction: column !important;
    }
  }