/*
 * Bootstrap extension layer for BootstrapDesignSystemBuilder.
 * Keep this file separate from Bootstrap so framework upgrades can replace
 * bootstrap.min.css without losing project-specific breakpoints/utilities.
 */

:root {
  --bs-breakpoint-4k: 3840px;
  --bs-container-4k: 3600px;
}

.container-4k {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 3840px) {
  .container-4k {
    max-width: var(--bs-container-4k);
  }

  .float-4k-start { float: left !important; }
  .float-4k-end { float: right !important; }
  .float-4k-none { float: none !important; }

  .object-fit-4k-contain { object-fit: contain !important; }
  .object-fit-4k-cover { object-fit: cover !important; }
  .object-fit-4k-fill { object-fit: fill !important; }
  .object-fit-4k-scale { object-fit: scale-down !important; }
  .object-fit-4k-none { object-fit: none !important; }

  .d-4k-inline { display: inline !important; }
  .d-4k-inline-block { display: inline-block !important; }
  .d-4k-block { display: block !important; }
  .d-4k-grid { display: grid !important; }
  .d-4k-inline-grid { display: inline-grid !important; }
  .d-4k-table { display: table !important; }
  .d-4k-table-row { display: table-row !important; }
  .d-4k-table-cell { display: table-cell !important; }
  .d-4k-flex { display: flex !important; }
  .d-4k-inline-flex { display: inline-flex !important; }
  .d-4k-none { display: none !important; }

  /*
   * Friendly aliases for manual editing. Bootstrap's canonical names are d-4k-*,
   * but display-4k-* is easier to discover for non-Bootstrap specialists.
   */
  .display-4k-inline { display: inline !important; }
  .display-4k-inline-block { display: inline-block !important; }
  .display-4k-block { display: block !important; }
  .display-4k-grid { display: grid !important; }
  .display-4k-inline-grid { display: inline-grid !important; }
  .display-4k-table { display: table !important; }
  .display-4k-table-row { display: table-row !important; }
  .display-4k-table-cell { display: table-cell !important; }
  .display-4k-flex { display: flex !important; }
  .display-4k-inline-flex { display: inline-flex !important; }
  .display-4k-none { display: none !important; }

  .flex-4k-fill { flex: 1 1 auto !important; }
  .flex-4k-row { flex-direction: row !important; }
  .flex-4k-column { flex-direction: column !important; }
  .flex-4k-row-reverse { flex-direction: row-reverse !important; }
  .flex-4k-column-reverse { flex-direction: column-reverse !important; }
  .flex-4k-grow-0 { flex-grow: 0 !important; }
  .flex-4k-grow-1 { flex-grow: 1 !important; }
  .flex-4k-shrink-0 { flex-shrink: 0 !important; }
  .flex-4k-shrink-1 { flex-shrink: 1 !important; }
  .flex-4k-wrap { flex-wrap: wrap !important; }
  .flex-4k-nowrap { flex-wrap: nowrap !important; }
  .flex-4k-wrap-reverse { flex-wrap: wrap-reverse !important; }

  .justify-content-4k-start { justify-content: flex-start !important; }
  .justify-content-4k-end { justify-content: flex-end !important; }
  .justify-content-4k-center { justify-content: center !important; }
  .justify-content-4k-between { justify-content: space-between !important; }
  .justify-content-4k-around { justify-content: space-around !important; }
  .justify-content-4k-evenly { justify-content: space-evenly !important; }

  .align-items-4k-start { align-items: flex-start !important; }
  .align-items-4k-end { align-items: flex-end !important; }
  .align-items-4k-center { align-items: center !important; }
  .align-items-4k-baseline { align-items: baseline !important; }
  .align-items-4k-stretch { align-items: stretch !important; }

  .align-content-4k-start { align-content: flex-start !important; }
  .align-content-4k-end { align-content: flex-end !important; }
  .align-content-4k-center { align-content: center !important; }
  .align-content-4k-between { align-content: space-between !important; }
  .align-content-4k-around { align-content: space-around !important; }
  .align-content-4k-stretch { align-content: stretch !important; }

  .align-self-4k-auto { align-self: auto !important; }
  .align-self-4k-start { align-self: flex-start !important; }
  .align-self-4k-end { align-self: flex-end !important; }
  .align-self-4k-center { align-self: center !important; }
  .align-self-4k-baseline { align-self: baseline !important; }
  .align-self-4k-stretch { align-self: stretch !important; }

  .order-4k-first { order: -1 !important; }
  .order-4k-0 { order: 0 !important; }
  .order-4k-1 { order: 1 !important; }
  .order-4k-2 { order: 2 !important; }
  .order-4k-3 { order: 3 !important; }
  .order-4k-4 { order: 4 !important; }
  .order-4k-5 { order: 5 !important; }
  .order-4k-last { order: 6 !important; }

  .col-4k { flex: 1 0 0%; }
  .row-cols-4k-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-4k-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-4k-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-4k-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-4k-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-4k-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-4k-6 > * { flex: 0 0 auto; width: 16.66666667%; }
  .col-4k-auto { flex: 0 0 auto; width: auto; }
  .col-4k-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-4k-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-4k-3 { flex: 0 0 auto; width: 25%; }
  .col-4k-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-4k-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-4k-6 { flex: 0 0 auto; width: 50%; }
  .col-4k-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-4k-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-4k-9 { flex: 0 0 auto; width: 75%; }
  .col-4k-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-4k-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-4k-12 { flex: 0 0 auto; width: 100%; }

  .offset-4k-0 { margin-left: 0; }
  .offset-4k-1 { margin-left: 8.33333333%; }
  .offset-4k-2 { margin-left: 16.66666667%; }
  .offset-4k-3 { margin-left: 25%; }
  .offset-4k-4 { margin-left: 33.33333333%; }
  .offset-4k-5 { margin-left: 41.66666667%; }
  .offset-4k-6 { margin-left: 50%; }
  .offset-4k-7 { margin-left: 58.33333333%; }
  .offset-4k-8 { margin-left: 66.66666667%; }
  .offset-4k-9 { margin-left: 75%; }
  .offset-4k-10 { margin-left: 83.33333333%; }
  .offset-4k-11 { margin-left: 91.66666667%; }

  .g-4k-0, .gx-4k-0 { --bs-gutter-x: 0; }
  .g-4k-0, .gy-4k-0 { --bs-gutter-y: 0; }
  .g-4k-1, .gx-4k-1 { --bs-gutter-x: 0.25rem; }
  .g-4k-1, .gy-4k-1 { --bs-gutter-y: 0.25rem; }
  .g-4k-2, .gx-4k-2 { --bs-gutter-x: 0.5rem; }
  .g-4k-2, .gy-4k-2 { --bs-gutter-y: 0.5rem; }
  .g-4k-3, .gx-4k-3 { --bs-gutter-x: 1rem; }
  .g-4k-3, .gy-4k-3 { --bs-gutter-y: 1rem; }
  .g-4k-4, .gx-4k-4 { --bs-gutter-x: 1.5rem; }
  .g-4k-4, .gy-4k-4 { --bs-gutter-y: 1.5rem; }
  .g-4k-5, .gx-4k-5 { --bs-gutter-x: 3rem; }
  .g-4k-5, .gy-4k-5 { --bs-gutter-y: 3rem; }

  .m-4k-0 { margin: 0 !important; }
  .m-4k-1 { margin: 0.25rem !important; }
  .m-4k-2 { margin: 0.5rem !important; }
  .m-4k-3 { margin: 1rem !important; }
  .m-4k-4 { margin: 1.5rem !important; }
  .m-4k-5 { margin: 3rem !important; }
  .m-4k-auto { margin: auto !important; }
  .mx-4k-0 { margin-right: 0 !important; margin-left: 0 !important; }
  .mx-4k-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
  .mx-4k-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
  .mx-4k-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .mx-4k-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .mx-4k-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .mx-4k-auto { margin-right: auto !important; margin-left: auto !important; }
  .my-4k-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-4k-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-4k-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-4k-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-4k-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-4k-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .my-4k-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .mt-4k-0 { margin-top: 0 !important; }
  .mt-4k-1 { margin-top: 0.25rem !important; }
  .mt-4k-2 { margin-top: 0.5rem !important; }
  .mt-4k-3 { margin-top: 1rem !important; }
  .mt-4k-4 { margin-top: 1.5rem !important; }
  .mt-4k-5 { margin-top: 3rem !important; }
  .mt-4k-auto { margin-top: auto !important; }
  .me-4k-0 { margin-right: 0 !important; }
  .me-4k-1 { margin-right: 0.25rem !important; }
  .me-4k-2 { margin-right: 0.5rem !important; }
  .me-4k-3 { margin-right: 1rem !important; }
  .me-4k-4 { margin-right: 1.5rem !important; }
  .me-4k-5 { margin-right: 3rem !important; }
  .me-4k-auto { margin-right: auto !important; }
  .mb-4k-0 { margin-bottom: 0 !important; }
  .mb-4k-1 { margin-bottom: 0.25rem !important; }
  .mb-4k-2 { margin-bottom: 0.5rem !important; }
  .mb-4k-3 { margin-bottom: 1rem !important; }
  .mb-4k-4 { margin-bottom: 1.5rem !important; }
  .mb-4k-5 { margin-bottom: 3rem !important; }
  .mb-4k-auto { margin-bottom: auto !important; }
  .ms-4k-0 { margin-left: 0 !important; }
  .ms-4k-1 { margin-left: 0.25rem !important; }
  .ms-4k-2 { margin-left: 0.5rem !important; }
  .ms-4k-3 { margin-left: 1rem !important; }
  .ms-4k-4 { margin-left: 1.5rem !important; }
  .ms-4k-5 { margin-left: 3rem !important; }
  .ms-4k-auto { margin-left: auto !important; }

  .p-4k-0 { padding: 0 !important; }
  .p-4k-1 { padding: 0.25rem !important; }
  .p-4k-2 { padding: 0.5rem !important; }
  .p-4k-3 { padding: 1rem !important; }
  .p-4k-4 { padding: 1.5rem !important; }
  .p-4k-5 { padding: 3rem !important; }
  .px-4k-0 { padding-right: 0 !important; padding-left: 0 !important; }
  .px-4k-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-4k-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-4k-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-4k-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-4k-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .py-4k-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-4k-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-4k-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-4k-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-4k-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-4k-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .pt-4k-0 { padding-top: 0 !important; }
  .pt-4k-1 { padding-top: 0.25rem !important; }
  .pt-4k-2 { padding-top: 0.5rem !important; }
  .pt-4k-3 { padding-top: 1rem !important; }
  .pt-4k-4 { padding-top: 1.5rem !important; }
  .pt-4k-5 { padding-top: 3rem !important; }
  .pe-4k-0 { padding-right: 0 !important; }
  .pe-4k-1 { padding-right: 0.25rem !important; }
  .pe-4k-2 { padding-right: 0.5rem !important; }
  .pe-4k-3 { padding-right: 1rem !important; }
  .pe-4k-4 { padding-right: 1.5rem !important; }
  .pe-4k-5 { padding-right: 3rem !important; }
  .pb-4k-0 { padding-bottom: 0 !important; }
  .pb-4k-1 { padding-bottom: 0.25rem !important; }
  .pb-4k-2 { padding-bottom: 0.5rem !important; }
  .pb-4k-3 { padding-bottom: 1rem !important; }
  .pb-4k-4 { padding-bottom: 1.5rem !important; }
  .pb-4k-5 { padding-bottom: 3rem !important; }
  .ps-4k-0 { padding-left: 0 !important; }
  .ps-4k-1 { padding-left: 0.25rem !important; }
  .ps-4k-2 { padding-left: 0.5rem !important; }
  .ps-4k-3 { padding-left: 1rem !important; }
  .ps-4k-4 { padding-left: 1.5rem !important; }
  .ps-4k-5 { padding-left: 3rem !important; }

  .gap-4k-0 { gap: 0 !important; }
  .gap-4k-1 { gap: 0.25rem !important; }
  .gap-4k-2 { gap: 0.5rem !important; }
  .gap-4k-3 { gap: 1rem !important; }
  .gap-4k-4 { gap: 1.5rem !important; }
  .gap-4k-5 { gap: 3rem !important; }
  .row-gap-4k-0 { row-gap: 0 !important; }
  .row-gap-4k-1 { row-gap: 0.25rem !important; }
  .row-gap-4k-2 { row-gap: 0.5rem !important; }
  .row-gap-4k-3 { row-gap: 1rem !important; }
  .row-gap-4k-4 { row-gap: 1.5rem !important; }
  .row-gap-4k-5 { row-gap: 3rem !important; }
  .column-gap-4k-0 { column-gap: 0 !important; }
  .column-gap-4k-1 { column-gap: 0.25rem !important; }
  .column-gap-4k-2 { column-gap: 0.5rem !important; }
  .column-gap-4k-3 { column-gap: 1rem !important; }
  .column-gap-4k-4 { column-gap: 1.5rem !important; }
  .column-gap-4k-5 { column-gap: 3rem !important; }

  .text-4k-start { text-align: left !important; }
  .text-4k-end { text-align: right !important; }
  .text-4k-center { text-align: center !important; }
}