/* General styles */
    body {
      font-family: Arial, sans-serif;
      font-weight: normal;
      font-size:12px;
      color:#333333;
      padding: 25px;
      background-color: #f4f4f4;
    }
    
    .container {
      max-width: 850px;
      margin: 10px auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .content-head {
      position: relative;
      margin:auto;
      color:#EEE;
      top: -40px;
      padding-left: 10px;
      
    }

    .content-head small{
      position: relative;
      margin:auto;
      font-size: 11px;
      padding-top: 20px;

      
    }
    .content { /*#006DB8 */
      max-width: 850px;
      margin: 1px auto;
      padding: 20px;
      border-radius: 5px;
      border-top:50px solid #eee;
      border: 0px;
      
      
    }
    .layer{
      width: 100%;
      border: 1.1px solid #2F9E51; 
      padding:2px; 
      border-radius:5px;
      border-top:50px solid #2F9E51;
    }
    .layer-next{
      width: 100%;
      border: 1px solid #dddddd; 
      padding:2px; 
      border-radius:5px;
      border-top:1px solid #2F9E51;
      
    }
    
    h1 {
      text-align: center;
      margin-bottom: 20px;
    }
    
    form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      
    }
    
    label {
   
      display: flex;
      margin-bottom: 5px;
      font-weight: normal;
      font-size:12px;
      color:#2F9E51;

      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      
    }
    
    input[type="text"],
    input[type="file"],
    input[type="number"],
    input[type="date"], 
    input[type="email"], 
    input[type="password"], 
    textarea, 
    select {
          
          padding: 10px;
          border:0px;
          border-bottom: 1.5px dotted #4CAF50;
          border-radius: 0px;
          background-color: rgba(238, 247, 241, 0.263);
          box-sizing: border-box;
          font-weight: normal;
          font-size:12px;
          color:#333333;

          display: flex;
          align-items: center;
          width: 100%;
          margin-bottom: 5px;
          
          
          
    }

    
      
      input[type="text"]:hover,
        input[type="number"]:hover,
        input[type="date"]:hover, 
        input[type="email"]:hover, 
        input[type="password"]:hover, 
        textarea:hover, 
        select:hover {
          border:0px;
          border-bottom: 1.5px solid #F4BD1A;
          width: 100%;
          padding: 10px;
          border-radius: 0px;
          box-sizing: border-box;
          font-weight: normal;
          font-size:12px;
           
        }
        .checkbox-group {
          display: flex;
          gap: 0px; /* Jarak antar checkbox */
          padding-left: 10px;
          border-color: #2F9E51 solid 1px;
      }

      .checkbox-group label {
          margin: 5px;
          margin-left: 0px;
          padding: 5px;
          padding-left: 0px;
          font-size: 11px;
      }
              /* Menyembunyikan radio button asli */
              input[type="radio"] {
                display: none;
            }
    
            /* Membuat radio button kustom */
            label {
                display: flex;
                align-items: center;
                cursor: pointer;
                margin-right: 15px;
                font-size: 11px;
            }
    
            /* Membuat lingkaran luar radio button */
            .custom-radio {
                width: 15px;
                height: 15px;
                border: 2px solid #999;
                border-radius: 50%;
                display: inline-block;
                position: relative;
            }
    
            /* Lingkaran dalam (saat radio dipilih) */
            input[type="radio"]:checked + .custom-radio {
                background-color: #45a049; /* Warna ketika dipilih */
                border-color: #45a049;     /* Warna border ketika dipilih */
            }
    
            /* Lingkaran kecil di dalam radio button */
            .custom-radio::before {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: white;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: background-color 0.2s;
            }
    
            /* Lingkaran kecil akan berubah warna saat dipilih */
            input[type="radio"]:checked + .custom-radio::before {
                background-color: white;
            }
    
            /* Mengatur label dan radio button agar dalam satu baris */
            .radio-group {
                display: flex;
            }





      
        input:focus{
          border:none;
          outline:none;
          border-bottom: 1.5px solid #F4BD1A;
          
        }

        input[type="submit"] {
          margin-top: 25px;
          background-color: #4CAF50;
          color: white;
          border: none;
          cursor: pointer;
          font-size: 16px;
          padding:15px;
          width: 100%;
          border-radius: 5px;
          
      }
  
      input[type="submit"]:hover {
          background-color: #45a049;
      }



      /* CSS untuk mengatur ukuran huruf placeholder */
      ::placeholder {
       
        color: #909090; /* Ubah warna placeholder jika diperlukan */
        font-family: Arial, sans-serif;
        font-weight: normal;
        font-size:12px;
      }

      input::-webkit-input-placeholder {
        font-size: 12px; /* Ubah ukuran untuk Chrome, Safari, Edge, Opera */
      }

      input:-moz-placeholder {
        font-size: 12px; /* Ubah ukuran untuk Firefox 18- */
      }

      input::-moz-placeholder {
        font-size: 12px; /* Ubah ukuran untuk Firefox 19+ */
      }

      input:-ms-input-placeholder {
        font-size: 12px; /* Ubah ukuran untuk Internet Explorer 10-11 */
      }

    
    /* Full width fields */
    .full-width {
      grid-column: 1 / 3;
    }
    
    
    .form-group {
                margin-bottom: 5px;
                margin-right:10px;
                
            }
        
        

        .error, .require {
            color: red;
            font-size: 12px;
        }
    /* Logo CSS */
        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo img {
            max-width: 100px;
            height: auto;
        }
        
        .image-qr {
            text-align: center;
            margin-bottom: 10px;
            margin-top: -20px;
            max-width: 50%;
            height: auto; 
            padding-left: 1em;
            gap: 10px;
        }
        
        
         table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        table, th, td {
            border: 0px solid black;
 
  
        }
        th, td {
            padding: 5px;
            padding-left:5px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        td {
            background-color: #f8f8f8;
            margin-bottom:5px;
            padding-bottom: 10px;
        }

/* Responsive design @media (min-width: 767px) and (max-width: 992px ) 
@media (min-width: 480px) and (max-width: 768px) {
  form {
    grid-template-columns: 1fr;
     padding: 1px;
     margin: 1px auto;
     margin-left: 6px;
  }
  .content {
      width: 100%;
      margin: 0px auto;
      padding: 0px;
      
    }

    .container {
      width: 100%;
      margin: 0px auto;
      padding: 0px;
     
    }
     body {
      
      padding: 0px;
      
    }
    .image-qr {
            text-align: center;
            margin-bottom: 5px;
            margin-left: 100px;
           max-width: 400px;
           height: auto; 
        }
        
    
}*/

@media (min-width: 320px)and (max-width: 768px) {
  form {
    grid-template-columns: 1fr;
    padding: 1px;
     margin: 1px auto;
     margin-left: 1px;
  }
  .content {
      width: 100%;
      margin-right: 15px auto;
      margin-left: 1px auto;
      padding: 0px;
      border:0x;
      border-top:20px solid #006DB8;

      
    }
    .content-head {
      max-width: 90%;
      margin-left: 0px;
      color:#fff;
      padding: 15px;
      border-radius: 2px 2px 0px 0px;
      max-height:15px;
      
    }

   .container {
      width: 100%;
      margin: 0px auto;
      padding: 0px;
      box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
     
    }
    
   body {
      
      padding: 1px;
      
    }
    .image-qr {
            text-align: center;
            margin-bottom: 5px;
            margin-left: 100px;
           max-width: 400px;
           height: auto; 
        }
        input[type="text"],
        input[type="file"],
        input[type="number"],
        input[type="date"], 
        input[type="email"], 
        input[type="password"], 
        textarea, 
        select, input[type="submit"] {
              width: 96.5%;
              padding: 10px;
              margin-left:0.15em;

              
        }
    
}

@media (min-width: 360px)and (max-width: 760px) {
  form {
    grid-template-columns: 1fr;
    padding: 1px;
     margin: 1px auto;
     margin-left: 1px;
  }
  .content {
      max-width: 100%;
      margin-right: 1px auto;
      margin-left: 1px auto;
      padding: 0px;
      border:0x;
      border-top:20px solid #006DB8;

      
    }
    .content-head {
      max-width: 76.8%;
    }

   .container {
      width: 100%;
      margin: 0px auto;
      padding: 0px;
      box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
     
    }
    
   body {
      
      padding: 0.02em;
      
    }
    .image-qr {
            text-align: center;
            margin-bottom: 5px;
            margin-left: 10px;
            max-width: 400px;
            height: auto; 
        }
        input[type="text"],
        input[type="file"],
        input[type="number"],
        input[type="date"], 
        input[type="email"], 
        input[type="password"], 
        textarea, 
        select, input[type="submit"] {
              width: 83.5%;
              
              color: #292929; /* Ubah warna placeholder jika diperlukan */
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size:10px;


              
        }
        label {
          display: block;
          margin-top: 5px;
          font-weight: normal;
          font-size:10px;
        }

        ::placeholder {
          font-size: 9px; /* Ubah ukuran sesuai kebutuhan */
          color: #909090; /* Ubah warna placeholder jika diperlukan */
          font-family: Arial, Helvetica, sans-serif;
        }
        input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-moz-placeholder, input:-ms-input-placeholder{
          font-size: 9px; /* Ubah ukuran untuk Chrome, Safari, Edge, Opera */
          font-family: Arial, Helvetica, sans-serif;
        }

}

@media (min-width: 412px)and (max-width: 915px) {

  .content-head {
    max-width: 90%;
  }
        input[type="text"],
        input[type="file"],
        input[type="number"],
        input[type="date"], 
        input[type="email"], 
        input[type="password"], 
        textarea, 
        select{
              width: 99%;
              
              color: #292929; /* Ubah warna placeholder jika diperlukan */
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size:10px;
              align-content: center;
              border: 0.01px solid #4CAF50;
              padding-right:2px;
             
        }

        input[type="submit"] {
              width: 99%;
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size:11px;
              align-content: center;
              color: #fbf2f2;

        }

        .content-head {
          max-width: 99%;
          margin-left: 0px;
          color:#fff;
          padding: 5px;
          border-radius: 2px 2px 0px 0px;
          max-height:25x;
          
        }
        .layer{
          width: 100%;
          border: 1.1px solid #F4BD1A; 
          padding:2px; 
          border-radius:5px;
          border-top:50px solid #F4BD1A;
        }
        .layer-next{
          width: 100%;
          border: 1.1px solid #f7f7f7; 
          padding:2.2px; 
          border-radius:5px;
          border-top:1.1px solid #F4BD1A;
          
        }

        .bukti-bayar{
          width: 99.5%;
          border: 0.9px solid #F4BD1A; 
          padding-left:0.5px; 
          border-radius:5px 5px 0px 0px;
          border-top:45px solid #F4BD1A;
        }
        


}