.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 0.2fr 1fr 0.2fr;
  grid-template-rows: 0.05fr 0.5fr 0.5fr 0.1fr;
  grid-template-areas:
    "nav nav nav"
    "sidebar main sidebar2" /* Adjusted grid template areas for sidebar and sidebar2 */
    "sidebar section sidebar2"
    "footer footer footer";
  grid-gap: 0.0rem;
  font-weight: 800;
  text-transform: none;
  font-size: 12px;
  color: #000000;
  text-align: center;
}
  
  .nav {
    grid-area: nav;
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
  }
  
  .navbar-content {
    display: flex;
    align-items: center;
    flex: 1; /* Use flex property to make it take remaining space */
  }
  
  .navbar-content img[alt="BBlogo"] {
    width: 150px; /* Adjust the width as needed */
    height: 50px; /* Maintain aspect ratio */
    margin-top: 10px; /* Remove default margin */
    margin-left: 10px;
}

  
  .logos {
    display: flex;
    margin-left: auto;
    justify-self: end;
    margin-top: 10px;
  }
  
  
  .logos a,
  .logos #statsLogo {
    margin-left: 20px; /* Add margin between logos */
    justify-self: end;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
  }

  .logos a:hover,
.logos #statsLogo:hover {
    transform: scale(1.2); /* Adjust the scaling factor as needed */
  }


  
  #sidebar {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: sidebar;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  #sidebar2 {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: sidebar2; /* Corrected the grid-area to sidebar2 */
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  
  footer {
    background: rgba(255, 0, 208, var(--tw-bg-opacity));
    grid-area: footer;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    text-align: center; /* Center the content horizontally */
    align-items: center
  }
  
  footer p {
    margin: 0; /* Remove default margin to prevent extra spacing */
  }
  
  footer a {
    display: inline-block; /* Display links in a line */
    margin: 0 10px; /* Add some spacing between links, adjust as needed */
    text-decoration: none;
    color: #000000; /* Set the link color */
    font-weight: bold;
  }
  
  footer a:hover {
    text-decoration: underline; /* Add underline on hover */
  }
  
  





  
  
.main-title {
  font-size: 15px;
  font-weight: bold;
  text-transform: capitalize;
  color: #333;
  margin-bottom: 1px;
  }
  
  main {
      background: rgba(255, 0, 208, var(--tw-bg-opacity));
      grid-area: main;
      border-radius: var(--main-radius);
      padding-top: var(--main-padding);
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100px;
    }
  
  .table-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  }
  
   /* Styles for small screens */
   @media screen and (max-width: 600px) {
    .table-container {
      display: flex;
      flex-direction: column;
    }

    .search-buttons {
      order: 2;
      margin-top: 20px;
    }
  }


  #customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  text-transform: capitalize;
  text-align: center;
  font-weight: bold;
  margin-top: 1px;
  }
  
  #customers td, #customers th {
  border: 1px solid #000000;
  padding: 10px;
  text-align: center;
  text-transform: capitalize;
  margin-top: 1px;
  }
  
  #customers tr:nth-child(even) {
  background-color: #f2f2f2;
  }
  
  #customers tr:hover {
  background-color: #ddd;
  }
  
  #customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
  text-transform: capitalize;
  font-size: 12px;
  margin-top: 1px;
  
  }
  
  .search-buttons {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .team-dropdown {
    width: 200px; /* Adjust the width as needed */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
  }
  
  
  
  input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    flex: 1;
  }
  
  .search-button-cta {
    padding: 10px 15px;
    background-color: #04AA6D;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .search-button-cta:hover {
    background-color: #026045;
  }
  
  
  
  .cta-button {
    background-color: #2196f3; /* Button background color */
    color: #fff; /* Button text color */
    padding: 10px 20px; /* Adjust padding as needed */
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
  }

  .cta-button:hover {
    background-color: #1565c0; /* Hover background color */
  }
  
  .next-in {
    margin-bottom: 10px; /* Margin bottom for next-in */
}

#countdownAnchorage {
  color: red; /* Red color for countdown */
  font-size: 24px; /* Bigger font size for countdown */
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0.0fr 1fr 0.0fr 0.1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "sidebar2"
      "footer"
      ;
  }
}