.chart-canvas-container {
     height: 300px;
 }

 .chart-header {
     margin-bottom: 2rem;
     text-align: center;
 }

 .chart-header-title {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--deep-blue);

 }

 .chart-header-content {
     font-size: 1.5rem;
     font-weight: 400;
     color: var(--deep-blue);
 }

 @media screen and (min-width: 1024px) {
     .chart-canvas-container {
        /* 300px is header and footer of chart */
        height: calc(100svh - 300px);
     }

     .chart-header-title {
         font-size: 3.5rem;

     }

     .chart-header-content {
         font-size: 2rem;
     }

 }

 .chart-btn-group {
     display: flex;
     justify-content: center;
     gap: 1rem;
     font-size: 1rem;
 }

 @media screen and (min-width: 1024px) {
     .chart-btn-group {
         font-size: 1.5rem;
     }

 }

 .char-footer {
     margin-top: 1rem;
     text-align: center;
 }

 .btn {
     height: 44px;
     padding: 0 1.5rem;
     vertical-align: middle;
     border-radius: 10px;
     font-size: inherit;
     font-family: inherit;
     font-weight: inherit;
     line-height: inherit;
     cursor: pointer;
     flex-shrink: 0;
 }

 .btn-contained {
     background-color: var(--deep-blue);
     color: white;
     border: none;

 }

 .btn-outlined {
     background-color: transparent;
     color: var(--deep-blue);
     border: 1px solid var(--deep-blue);
 }