/* Override Bootstrap bg-dark */
.bg-dark {
  background-color: #000000 !important; /* Darker shade */
}

/* Optional: Darken text color for contrast */
.text-dark {
  color: #e0e0e0 !important;
}

.text-muted {
  color: #919ca5 !important;
}

/* Customize buttons, if needed */
.btn-dark {
  background-color: #000 !important;
  border-color: #000 !important;
}

/* Gradient button to match design */
.btn-primary {
  background: linear-gradient(45deg, #bd9a00, #3d1c00) !important;
  border: none !important;
  transition: 0.3s ease;
  color: #fff !important;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.btn-primary:hover {
  background: linear-gradient(45deg, #3d1c00, #bd9a00);
  color: #fff !important;
}

.btn-purple {
  background: linear-gradient(45deg, #6f00ff, #0000ff);
  border: none !important;
  transition: 0.3s ease;
  color: #fff !important;

  &:hover {
    background: linear-gradient(45deg, #0000ff, #6f00ff);
    color: #fff !important;
  }
}

.btn-outline-primary {
  background: transparent;
  border: 1px solid #fff !important;
  color: #fff !important;
  transition: 0.3s ease;
}
.btn-outline-primary:hover {
  background: linear-gradient(45deg, #3d1c00, #bd9a00) !important;
  color: #fff !important;
}

/* Ensure modal is above the backdrop */
.modal {
  z-index: 1000 !important;
}

/* Ensure backdrop is behind the modal */
.modal-backdrop {
  z-index: 2 !important;
}

/*Custom Widths*/
.w-15 {
  width: 15% !important;
}

.container {
  flex: 1;
  width: calc(100vw - 3vw);
  max-width: 1600px;
}

.bg-danger-light {
  background-color: #ff001560 !important;
}

.bg-success-light {
  background-color: #008820a9 !important;
}

.mw-100 {
  max-width: 100px !important;
}

.mw-150 {
  max-width: 150px !important;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
  .mw-100 {
    max-width: 100% !important;
  }
}