.bg-off-black {
    background-color: #252424;
}

.mw-10r {
    max-width: 10rem;
}

.mw-20r {
    max-width: 20rem;
}

.mw-25r {
    max-width: 25rem;
}

.mw-30r {
    max-width: 30rem;
}

.mw-40r {
    max-width: 40rem;
}

.w-fc {
    width: fit-content;
}

.h-25vh {
    height: 25vh;
}

.h-50vh {
    height: 50vh;
}

.h-75vh {
    height: 75vh;
}

.h-100vh {
    height: 100vh;
}

.hover-pointer:hover {
    cursor: pointer;
}

.divider {
    display: block;
    background-color: rgba(25,25,25,.75);
    border-radius: 1rem;
    content: '';
    height: .125rem;
}

.btn-dark:focus,
.btn-dark:active,
.btn-dark:focus-visible,
.btn-dark.active {
  background-color: #212529; /* Bootstrap dark */
  border-color: #212529;
  box-shadow: none;
}

.toast-container {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    margin-top: 3.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    background-color: rgba(0,0,0,0.75);
    pointer-events: auto;
}

.toast-container .card {
    margin-top: 5rem;
}

.no-scrollbar {
    scrollbar-width: none;
}

.form-control:focus,
.form-select:focus {
    border-color: rgb(213, 0, 0);
    box-shadow: 0 0 0 .25rem rgba(213, 0, 0, .33);
}

.form-check-input:checked {
    border-color: rgb(213, 0, 0);
    background-color: rgb(213, 0, 0);

}

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(213, 0, 0, .33);
}

select {
    overflow: ellipsis;
}

@media (min-width: 992px) {
 
    html {
        font-size: 20px;
    }

    /* XL screens and larger (1200px+) */
@media (min-width: 1200px) {

  /* Increase container width slightly */
  .container {
    max-width: 1320px;
  }

  /* Larger headings */
  h1 {
    font-size: 3rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 2.25rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.75rem;
  }

  /* Slightly larger body text */
  p {
    font-size: 1.125rem;
    line-height: 1.7;
  }

  /* More breathing room for sections */
  section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  /* Larger spacing for Bootstrap rows */
  .row {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
  }

  /* Limit text width for readability */
  .text-content,
  .content-narrow {
    max-width: 720px;
  }

  /* Slightly larger buttons */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
  }

  /* Cards feel less cramped */
  .card {
    padding: 2rem;
  }

}
}