.table-container {
    max-height: 700px; /* Set fixed height for scroll */
    overflow-y: auto;
    display: block;
    margin-top: 0px;
    padding-top: 0px;

}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container thead {
    position: sticky;
    top: 0;
    background: #343a40; /* Dark background for table header */
    color: white;
    z-index: 1000;
    margin-top: -1px; /* Push it up slightly */

}

      img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image */
}

      body {
          background-image: url("{% block image %}{% endblock %}");
          background-size: cover;
          background-repeat: no-repeat;
          background-attachment: fixed;
          color: #fff; /* Optional: to make text more readable on dark backgrounds */
      }
      .container {
          background-color: rgba(0, 0, 0, 0.7); /* Optional: to add a semi-transparent background to the content */
          padding: 20px;
          border-radius: 10px;
         
          
          width: 100%; /* Ensures it adapts */
          max-width: 1700px; /* Optional: Limits how wide it can go */
          margin: 0 auto; /* Keeps it centered */

      }

            
      h2 {
          color: #ffcc00; /* Optional: to change the color of the headings */
          font-family:'Black Ops One', sans-serif; /* Custom font for headings */
      }
      .image-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .image-container img {
          max-width: 100px; /* Adjust the size as needed */
          height: auto;
      }

      .custom-btn {
        padding: 10px 20px;
        font-size: 18px;
        border-radius: 8px;
        margin: 10px;
        transition: background-color 0.3s, transform 0.3s;
    }
    
    .custom-btn:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }
    
    .btn-primary.custom-btn:hover {
        background-color: #004085;
    }
    
    .btn-secondary.custom-btn:hover {
        background-color: #545b62;
    }

   
    .drop-box {
        width: 300px;
        height: 200px;
        background-color: rgba(255, 255, 255, 0.8); /* Solid white with some transparency */
        border: 2px solid #000; /* Solid border */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: #000;
        cursor: pointer;
    }
    .drop-box.dragover {
        border-color: #000;
        color: #000;
    }
    .preview {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Centering the preview */
}
    .preview img {
        max-width: 100%;
    }

    .upload-button {
    display: flex;
    justify-content: center; /* Centering the button */
    margin-top: 10px;
    }

    .bold-text {
      font-weight: bold;
  }


    .no-link-style {
        color: inherit;
        text-decoration: none;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
  }

  .sort-buttons {
    display: inline-flex;
    gap: 5px; /* Optional spacing between buttons */
   
}

.sort-button {
    padding: 2px 4px;
    margin: 0 2px;
    font-size: 10px;
    line-height: 1;
    text-decoration: none;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
}

.sort-button:hover {
    background-color: blue;
    border-color: #ccc;
}

.button-link-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Adjust space between elements */
}