.elementor-2046 .elementor-element.elementor-element-6cdafe2{--display:flex;}/* Start custom CSS for html, class: .elementor-element-21216ce */#training-ground {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }


/* Target buttons with the 'disabled' attribute */
button[disabled] {
  background-color: #cc0000 !important;
  color: white !important;
  cursor: not-allowed !important;
}

.watch-this-first {
  border: 4px solid green !important;  /* Green border */
  padding: 10px !important;  /* Padding for better spacing */
  background-color: rgba(0, 255, 0, 0.2) !important;  /* Transparent green background */
  font-weight: bold !important;  /* Bold font */
  color: #4CAF50 !important;  /* Medium green text color */
  font-size: 1.1em !important;  /* Slightly larger text */
}

.watch-this-first:hover {
  background-color: green !important;  /* Solid green on hover */
  color: white !important;  /* White text on hover for contrast */
}

  #category-nav {
    margin: 50px 0;
    text-align: center;
  }

  #category-nav button {
    background-color: #1b2838;
    color: #42c5f5;
    border: 1px solid #42c5f5;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
  }

  #category-nav button:hover {
    background-color: #42c5f5;
    color: #1b2838;
  }
  
  #lesson-list li {
  cursor: pointer; /* Makes the cursor change to a hand icon when hovering */
  padding: 8px;
  margin: 4px 0;
  background-color: #1b2838;
  color: #42c5f5;
  border: 1px solid #42c5f5;
  border-radius: 4px; /* Rounded corners for a softer look */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#lesson-list li:hover {
  background-color: #42c5f5;
    color: #1b2838;
}


@media (max-width: 768px) {
    .xp-label {
        /* Adjust styles here */
        font-size: 100px; /* Example: smaller font size */
        text-align: center; /* Example: center-align text */
        margin: 10px 0; /* Example: add spacing */
    }
}/* End custom CSS */