.header {
    background: url('../images/background-login.png');
    background-size: 100% auto;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
    text-align: center;
    width: 100%;
    font-weight: 700;
}

.voteDetail {
    display: flex;
    flex-direction: column;
    /* background: red; */
    border-radius: 0.625rem;
    width: 10.5rem;
    padding: 0.375rem;
    margin-bottom: 0.625rem
}

.onchain{
    font-weight: 700;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 16px; /* This is your mt-4 converted to pixels */
  }
  .amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; 
    justify-content: center;
    padding: 1rem;
  }
  
  .grid-item1 {
    text-align: center;
    font-size: .75rem;
    border-radius: 1.875rem;
    border: 0.0625rem solid;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem; 
    margin-bottom: 1rem; 
  }
  .grid-item {
    text-align: center;
    min-width: 0;
    max-width: 5rem;
    line-height: .8125rem;
    padding: 0.1875rem 0.625rem;
    font-size: .75rem;
    border-radius: 1.875rem;
    border: 0.0625rem solid;
    font-weight: 600;
    
  }

  .grid-item:nth-child(1) {
    color: #ffa011;
    border-color: #ffa011;
  }
  .grid-item:nth-child(2) {
    color: #fc5f85;
    border-color: #fc5f85;
  }
  .grid-item:nth-child(3) {
    color: #ff7d45;
    border-color: #ff7d45;
}
  .grid-item:nth-child(4) {
    color: #61da66;
    border-color: #61da66;
}

.input-amount {
    width: calc(100% - 80px);
}
    /* Media query for screens wider than 900px */

    .idContent{
      color: gray;
      font-weight: 700;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .upgrade-id {
      background: #2979ff;
      color: white;
      font-size: 12px;
      padding: 0 12px;
      border-radius: 24px;
      margin-bottom: 4px;
    }