:root {
    --primary-color: #020202;
    --primary-light: #22AAE1;
       --primary-button: #2C8142;
    --secondary-button: #F9C683;
       --background: #091A32;
    --footer-bg: #000;
    --footer-text: #fff;
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}


*,
::after,
::before {
    box-sizing: border-box
}



nav {
    display: block
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: var(--background)
}

.container {
      max-width: 800px;
        background-color: var(--background);
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .logo {
      text-align: center;
      margin-bottom: 5px;
    }
    .logo img {
      max-width: 200px;
    }
    .forgot-password {
      margin-top: 10px;
      text-align: center;
      color:white;
        text-decoration: none;
    }
       .forgot-password a {
      color: white;
      text-decoration: none;
      cursor: pointer; 
    }
    .register {
      margin-top: 10px;
      text-align: center;
    }
    h2{
      color: var(--secondary-button);
    }
    p{
      color: var(--secondary-button);
    }
    a{
       color: var(--secondary-button);
    }
    label{
      color: var(--secondary-button);
    }
   .btn-custom {
        background-color: var(--secondary-button);   
        border-color: white;
        color: var(--primary-color); 
        border-radius: 20px; /* Border radius */
    }

    /* Change text color on hover */
    .btn-custom:hover {
        color: var(--primary-color)
    }

  .btn-custom:a {
    color: var(--primary-color);
  }
      .btn-register {
        background-color: white;
        border-color: black;
        color: var(--primary-color); /* Text color */
        border-radius: 20px; /* Border radius */
         text-decoration: none;
          border: 2px solid #070322;
        padding:4px
    }
 .btn-register a {
      color: var(--primary-color);
      text-decoration: none;
      cursor: pointer; 
    }
          .btn-guest {
        background-color: #22133A;
        border-color: black;
        color: yellow; /* Text color */
         text-align: center;
        border-radius: 20px; /* Border radius */
        padding:8px
    }
     .btn-guest a {
      color: white;
      text-decoration: none;
      cursor: pointer; 
    }
    
  .skip-link:hover {
    color: white;
  }
   
    input[type="text"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            background-color: white;
            color: black;
            margin-bottom: 15px;
            border-color:#070322;
            cursor: text;
        }
           input[type="email"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            background-color: white;
            color: black;
            margin-bottom: 15px;
            border-color:#070322;
            cursor: text;
        }


         .topBar{
             background-color: var(--background);   
            border-color: white;
            color:white;
            align-items: center;
    //    border-bottom: 0.5px solid white;
        }
        .card-header{
            color:#070322;
            font-weight:bold;
        }
         .proceedBtn {
            padding: 10px 20px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            background-color: var(--primary-light);   
            border-color: white;
            color:white;
            border-radius: 20px;
             width:100%;
             font-weight: bold;
        }

         .proceedBtn:hover{
           text-decoration: none;
           color: white;
        }

      @media (max-width: 767px) {
            /* Styles for mobile devices */
            .logo img {
                max-width: 50%;
                max-height: auto;
            }
        }
       
       .transaction-history {
      text-align: left;
    }
    
    .transaction-history ul {
      list-style-type: none;
      padding: 0;
    }
    
    .transaction-history li {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #ecf0f1;
      border-radius: 5px;
    }
    .menu-title{
      color:white; 
      background-color: #070322; 
      margin:10px; 
      border-radius: 40px; 
      font-size:14px;
      text-align:center;
      padding:10px;
    }

      .game-rate-content {
   text-align:center;
     width:100%;
    border-color:#070322;
    align-items: center;
    border-radius: 10px;
            padding:4px;         
              margin:5px;   
}
  .rate-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
                border:none;
      }
      .history-date{
text-decoration: none;
  display: inline-block;
  font-size: 12px;
  color:#9a999e;
  border-radius: 20px;
      }

            .history-point {
              text-decoration: none;
              padding: 5px 10px;
              margin-right: 8px;
              display: inline-block;
              background-color: green;
              font-size :14px;
              border-radius: 20px;
              color: white;
            }

     .game-history-content {
       display: flex;
       justify-content: space-between;
       width: 100%;
       align-items: center;
       color: black;
        border: 2px solid rgb(209, 204, 204);
        border-radius: 20px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    
     }
        .box-item{
          box-shadow: 20px 12px 8px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            color: black;
            border: 2px solid rgb(209, 204, 204);
        }
     .history-info {
       display: block;
       margin-top: 5px;
     }
     .market-info-box {
    margin-top: 4px;
   
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 10px;
    padding-top: 5px;

}
.left{
    margin-left: 8px;;
}

.upi-id{
  display: flex;
  text-align: center;
}


  input[type="number"] {
      width: 100%;
      padding: 10px;
      border: 2px solid blue;
      border-radius: 5px;
      background-color: white;
      color: black;
      margin-bottom: 15px;
      border-color: #070322;
      cursor: text;
  }

  button[type="button"] {
      padding: 5px 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      background-color: var(--secondary-button);
      border-color: white;
      color: var(--primary-color);
      border-radius: 20px;
  }

  button[type="button"]:last-child {
      margin-right: 0;
  }

  .amount-button1 {
      display: block;
      text-align: center;
      color: black;
      align-items: center;
      
  }

  .add_button {
      display: inline-block;
      text-align: center;
      color: black;
      align-items: center;
      justify-content: space-between;
  }

  .amount-button2 {
      text-align: center;
      color: black;
      align-items: center;
  }




        .payment-methods input[type="radio"] {
         
    margin-right: 0px;
        align-items: center;
         padding: 10px;
        
        }
    
        .payment-methods label {
            display: inline-block;
            cursor: pointer;
   

          
            text-align: center;
        }
    
        .payment-methods label img {
            display: block;
            width: 65px;
            height: 35px;
            margin: 0 auto 5px;
           
            /* Center the image vertically */
        }
           #addMoneyForm {
               max-width: 800px;
               margin: 0 auto;
               padding: 20px;
               border: 2px solid black;
               border-radius: 10px;
               background-color: transparent;
           }   

           .background{
            background-color:#bee9fc;
            padding:5px;
            border-radius: 10px;
           }
    

     /* Form styles */
        .contact-form {
            margin-top: 20px;
            text-align: left;
        }

        .form-group {
            margin-bottom: 20px;
        }

          .contact-button {
            margin: 10px; /* Added margin for spacing */
            display: inline-block; /* Ensures buttons are displayed in a line */
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); /* Added shadow */
            border-radius: 5px; /* Added border radius */
        }

        .contact-button a {
            display: block;
            padding: 10px 20px; /* Added padding for button size */
        }
           
        
                           .withdrawAmount {
                               display: flex;
                               text-align: center;
                               color: white;
                               align-items: center;
                               justify-content: space-between;
                           }

    .bottom{
        margin-bottom:60px;
    }

      .wallet-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #3498db;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .wallet-icon i {
      color: #fff;
      font-size: 48px;
    }
             
              .balance {
      font-size: 24px;
      margin-bottom: 20px;
      text-align:center;
      color:var(--secondary-button);
    }
    
    .button-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }


         .button {
             display: flex;
             flex-direction: column;
             align-items: center;
             /* Center items horizontally */
             text-decoration: none;
             padding-top: 10px;
             width: 170px;
             /* Set a common width for both buttons */
         }
    
         .button span {
             display: inline-block;
             text-align: center;
         }
    
         .button img {
             margin-bottom: 5px;
             /* Adjust spacing between image and text */
         }
    
         .button.add-money {
             background-color: #2ecc71;
             color: #fff;
             text-decoration: none;
         }
    
         .button.add-money a {
             text-decoration: none;
         }
    
         .button.withdraw-money {
             background-color: #e74c3c;
             color: #fff;
             text-decoration: none;
         }
    
         .button.withdraw-money a {
             text-decoration: none;
         }
    
         .button.add-money:hover,
         .button.withdraw-money:hover {
             background-color: darken(#2ecc71, 10%);
         }
    
         .transaction-history {
             text-align: left;
         }
    
         .transaction-history ul {
             list-style-type: none;
             padding: 0;
         }
    
         .transaction-history li {
             margin-bottom: 10px;
             padding: 10px;
             background-color: #ecf0f1;
             border-radius: 5px;
         }

         .remark
         {
            color: #070322;
             font-weight: bold;
         }