.loader {
    margin: 50px;
    padding: 50px;
    width: 100px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
  
  }
  @keyframes l13{ 
    100%{transform: rotate(1turn)}
  }  

  .usage-header {
  
    color: #F0532D;
    font-weight: bolder;

  }

  .usage-description {
  
    font-weight: bolder;

  }

  .mainBox {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
	margin: 1.5rem;
  }

  #iccidInput {
    padding: 16px;
    border: 1px solid #545456;
    border-radius: 8px;
    width: 100%;
    margin: 1em auto;
}

  #fetchDataBtn {

    min-width: 200px;
    width: 20%;
    padding: 0px 10px;
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    border: none;
    border-radius: 100px;
    padding: 0 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.5s;
    background:linear-gradient(90deg, #FF881A 0%, #F0532D 100%);
    color: white !important;
    cursor: pointer;

  }

  .chartCard {
    /*width: 100vw;
    height: 100vh;*/
    //background: rgba(255, 237, 219);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Adjusted for vertical alignment */
  }
  .chartBox {
    width: 60%;
    max-width: 700px; /* Add max-width to prevent the box from getting too wide */
    padding: 20px;
    border-radius: 20px;
    /* border: solid 3px rgba(54, 162, 235, 1); */
    background: white;
    display: none; /* Use flexbox */
    align-items: center; /* Center vertically */
    margin: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
}

  #myChart {
    flex: 1; /* Make the chart canvas flexible to take up remaining space */
    height: auto; /* Set height to auto to maintain aspect ratio */
  }
  #planDetails {
    flex: 1; /* Make the plan details flexible to take up remaining space */
    padding-left: 20px; /* Add padding to create space between chart and plan details */
    text-align: center; /* Center text horizontally */
  }
  #planInfo {
    margin: auto; /* Center plan details vertically */
  }
  @media (max-width: 768px) {
    /* Adjustments for mobile devices */
    .chartBox {
      width: 100%; /* Take full width on smaller screens */
      flex-direction: column; /* Stack children vertically on smaller screens */
    }
  }
  canvas {
    max-width: 250px;
    max-height: 275px;
  }