@media screen and (max-width: 640px) {
  .xxqbbslist {
      width: 99%;
      margin: 0 auto;
  }
}

  
  .text-side-bg{
    position: relative;
    text-align: left;
    padding: 0px 0px;
    overflow: hidden;
    border: 1px solid #4b5cc4;
    border-radius: 3px;
    z-index: 1;
    min-width: max-content;
    height: min-content;
    
  }
  .text-side-bg::before,
  .text-side-bg::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65%;
    z-index: -1;
    
  }
  .text-side-bg::before {
    left: 0;
    background-color: #4b5cc4;
  }
  .text-side-bg::after {
    right: 50;
    background-color: #ffffff; 
  }

  .text-side-bg-a{
    position: relative;
    text-align: left;
    padding: 0px 0px;
    overflow: hidden;
    border: 1px solid #b44c97;
    border-radius: 3px;
    z-index: 1;
    min-width: max-content;
    height: min-content;
    
  }
  .text-side-bg-a::before,
  .text-side-bg-a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65%;
    z-index: -1;
    
  }
  .text-side-bg-a::before {
    left: 0;
    background-color: #b44c97; 
  }
  .text-side-bg-a::after {
    right: 50;
    background-color: #ffffff; 
  }

  .text-side-bg-b{
    position: relative;
    text-align: left;
    padding: 0px 0px;
    overflow: hidden;
    border: 1px solid #3eb370;
    border-radius: 3px;
    z-index: 1;
    min-width: max-content;
    height: min-content;
    
  }
  .text-side-bg-b::before,
  .text-side-bg-b::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65%;
    z-index: -1;
    
  }
  .text-side-bg-b::before {
    left: 0;
    background-color: #3eb370; 
  }
  .text-side-bg-b::after {
    right: 50;
    background-color: #ffffff; 
  }

  .text-side-bg-c{
    position: relative;
    text-align: left;
    padding: 0px 0px;
    overflow: hidden;
    border: 1px solid #f00056;
    border-radius: 3px;
    z-index: 1;
    min-width: max-content;
    height: min-content;
    
  }
  .text-side-bg-c::before,
  .text-side-bg-c::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 65%;
    z-index: -1;
    
  }
  .text-side-bg-c::before {
    left: 0;
    background-color: #f00056; 
  }
  .text-side-bg-c::after {
    right: 50;
    background-color: #ffffff; 
    
  }

  @keyframes blink {
    0% { color: #ffffff; }
    50% { color: #ffffff; }
    100% { color: #faff72; }
  }
  .blink {
    animation: blink 0.5s infinite;
  }

  .aor{
    position: absolute;
    margin-top: 100px;
    width: 100%;
  }
  
  .main-a{
      position: absolute;
      margin-top: 100px;
      width: 100%;
      max-width: 800px;
  }
  
  .main-b{
      position: absolute;
      margin-top: 80px;
      width: 100%;
      max-width: 798px;
  }


.table-aa {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 5px;
}
.th-aa {
    background-color: #3eb370;
    color: white;
    font-size: 1.5em;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}
.td-aa {
    text-align: left;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    
}
.tr-aa{
  border-bottom: 1px solid #e0e0e0;
}
.td-w{
  width: 50px;
  padding: 5px 10px;
  
}

.tag {
    background-color: #3eb370;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    font-size: 13px;
    width: 100%;
    max-width: max-content;
    
}

@media screen and (max-width: 640px) {
  .table-aa {
      width: 99%;
      margin-top: 5px;
  }
}