@font-face {
  font-family: "Roboto";
  src: url("https://d1qzu4sfmyzth.cloudfront.net/static-asset/fonts/Roboto[wght].woff2")
    format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

/* Roboto Variable – Italic */
@font-face {
  font-family: "Roboto";
  src: url("https://d1qzu4sfmyzth.cloudfront.net/static-asset/fonts/Roboto[wght].woff2")
    format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
}

@font-face {
  font-family: "Public Sans";
  src: url("https://d1qzu4sfmyzth.cloudfront.net/static-asset/fonts/PublicSans[wght].woff2")
    format("truetype");
  font-weight: 100 900; /* variable weight range */
  font-style: normal;
}

:root {
  --primary-color: #ff8001;
  --secondary-color: #1b313e;
  --white-color: #ffffff;
  --black-color: #000000;
  --light-grey-color: #f9f9f9;
  --middle-grey-color: #f2f2f2;
  --dark-grey-color: #cccccc;
  --text-content-black: #333333;
  --text-heading-black: #1a1a1a;
  --text-muted-color: #8e8e8e;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;

  @media (min-width: 576px) {
    /* max-width: 540px; */
    max-width: 100%;
  }

  @media (min-width: 768px) {
    /* max-width: 720px; */
    max-width: 100%;
  }

  @media (min-width: 992px) {
    /* max-width: 960px; */
    max-width: 100%;
  }

  /* new: this is our breakpoint */
  @media (min-width: 1024px) {
    max-width: 100%;
  }

  @media (min-width: 1200px) {
    max-width: 100% !important;
  }
}

svg {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

/* bootstrap spacing utility: {property}{side}-{screen}?-{size} ------------*/
.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

/* bootstrap positioning utility: ------------------------------------------*/
.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

/* table -------------------------------------------------------------------*/
.table {
  width: 100%;
  max-width: 100%;
  background-color: transparent;

  th {
    border-bottom: 2px solid #7b7b7b;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    line-height: 1.25;
  }

  td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    line-height: 1.25;
  }

  tbody tr:nth-of-type(even) {
    background-color: hsl(0, 0%, 95%);
  }
}

.t-back {
  background-color: hsl(0, 0%, 95%);
}

.border-tdth {
  border-top: 1px solid hsl(0, 0%, 80%);
  border: 1px solid hsl(0, 0%, 80%);
}

.border-th-bottom {
  border-bottom: 1px solid #cccccc !important;
}

.button-search {
  border: 1px solid hsla(28, 88%, 78%, 0.05);
  background-color: hsla(28, 88%, 58%, 0.8);
  padding: 0.26rem 0;
  border-radius: 0 0.25rem 0.25rem 0;
  width: 3rem;
  margin: 0;
  color: hsl(0, 0%, 30%);
}

.button-all {
  border: 4px solid hsl(210, 14%, 83%);
  background-color: hsl(210, 14%, 83%);
  padding: 0.26rem 0;
  border-radius: 0.25rem 0 0 0.25rem;
  width: 3rem;
  margin: 0;
  color: hsl(0, 0%, 30%);
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
._qeMyLF90pzMUT_hGFNC {
  display: flex;
  height: 100%;
  flex-direction: column;
  background: hsl(var(--sidebar-background, 207 31% 18%));
  border-left: 1px solid hsl(0 0% 100% / 0.08);
  box-shadow: 8px 0 24px -8px hsl(0 0% 0% / 0.35);

  /* Only the free (right) edge is rounded — the left edge butts against the rail,
     and rounding it would open a notch at the seam. Deliberately larger than the
     rail items' var(--radius): this is a panel, not a control, and at 16rem wide a
     0.5rem radius reads as square.
     overflow:hidden keeps the scrolling body and its scrollbar inside the curve. */
  border-radius: 0 0.5rem 0.5rem 0;
  overflow: hidden;
}

.S0yHc9PSbSNKqDXU8h5E {
  flex: 0 0 auto;
  padding: 1.5rem 1.4rem 1.15rem 0.9rem;
  color: hsl(0 0% 100% / 0.95);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid hsl(var(--sidebar-accent, 207 77% 95%) / 0.2);
}

.V3eaZLIL3DChqJdqtr2f {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 0.5rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Non-navigable heading inside a group. */
.MDFJOLvfsabEfIFIE2Ot {
  padding: 1rem 0.65rem 0.4rem;
  color: hsl(0 0% 100% / 0.6);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.wcKkAl6JBJUnTDAxSekh {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.25rem;
  border: none;
  border-radius: var(--radius, 0.5rem);
  background: transparent;
  color: hsl(0 0% 100% / 0.95);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wcKkAl6JBJUnTDAxSekh:hover {
  background: hsl(var(--sidebar-foreground, 199 18% 40%));
  color: hsl(0 0% 100% / 0.95);
}

.wcKkAl6JBJUnTDAxSekh:focus-visible {
  outline: 2px solid hsl(var(--sidebar-primary, 30 100% 50%));
  outline-offset: -2px;
}

.RusCnoK0rWyHBYgdIazb {
  background: hsl(var(--sidebar-primary, 30 100% 50%));
  color: hsl(0 0% 100% / 0.95);
  font-weight: 500;
}
.RusCnoK0rWyHBYgdIazb:hover {
  background: hsl(var(--sidebar-primary, 30 100% 50%));
  color: hsl(0 0% 100% / 0.95);
}

.XW573_TdU1gCTXPPW7xP {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 0.85;
}

.iWXQIUCIrxmn4gx4MCWl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.txw0bj3Ka0bncqKSYU1y {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
}

.txw0bj3Ka0bncqKSYU1y:focus-visible {
  outline: 2px solid hsl(var(--sidebar-primary, 30 100% 50%));
  outline-offset: 2px;
}

/* Avatar ships as h-10 w-10, so the override needs !important. */
.J0GN8UykUG1SyKwLLeNv {
  width: 2.25rem !important;
  height: 2.25rem !important;
  flex-shrink: 0;
}

.YR_VeereqeOzJsCmtYg_ {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--foreground, 20 14.3% 4.1%));
}

.EPqHMElXWBtU50CrH3gw {
  min-width: 15rem;
}

.iBVfstevGK0Liityi2L5 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.UWOHhtxzkTXOkGr_SnGw {
  width: 2.25rem !important;
  height: 2.25rem !important;
  flex-shrink: 0;
}

.cROPa2tSTqjimGnk_uLX {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.hFtVRVEDabSPxwZTBwCV {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.A1WMg_5ny2plTb5GV9JI {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  font-size: 0.72rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DropdownMenuItem has no automatic icon gap. */
.oON7_aMq7OMXh_zM245W {
  gap: 0.55rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.QmMQPhU6rmcgm17qJNGv {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 0.75;
}

.J1HePYR_sqAhApgy4SkA {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: var(--radius, 0.5rem);
  background: transparent;
  color: hsl(0 0% 100% / 0.8);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.J1HePYR_sqAhApgy4SkA:hover {
  background: hsl(var(--sidebar-foreground, 199 18% 40%));
  color: hsl(0 0% 100% / 0.95);
}

.J1HePYR_sqAhApgy4SkA:focus-visible {
  outline: 2px solid hsl(var(--sidebar-primary, 30 100% 50%));
  outline-offset: 2px;
}

/* Active and open share the light-on-dark treatment from the design: the rail is
   dark, so the selected slot inverts to a solid block in the theme's primary
   colour with a light glyph. */
.E1Kaz7hPxtOMeYvS546p,
.nBt7kCnmVYDTBpViQ2Qg {
  background: hsl(var(--sidebar-primary, 30 100% 50%));
  color: hsl(0 0% 100% / 0.95);
}

.E1Kaz7hPxtOMeYvS546p:hover,
.nBt7kCnmVYDTBpViQ2Qg:hover {
  background: hsl(var(--sidebar-primary, 30 100% 50%));
  color: hsl(0 0% 100% / 0.95);
}

/* lucide icons are sized via CSS, never the `size` prop. */
.C968wdvwRGftVc3LQLYu {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

/* Signals nested content without widening the rail. */
.OT3wjwF9FzwhgV4Xjfkg {
  position: absolute;
  right: 0.05rem;
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.75;
}

.WQcDqPdnKZv2AtMNmXeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.5rem 0;
}

/* Main navigation: takes the remaining height and scrolls if the config is long. */
.p2Lo1Jan0EenEwwlp0rR {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fixed section: hugs its content above the profile menu. */
.B8fkEoF47YQnckMGWCrC {
  flex: 0 0 auto;
}

/* Round chip holding the brand logo.

   The fallback in the custom property is required, not defensive padding:
   --logo-background-color is only set by NimbusProvider when the remote
   theme.json supplies it, and the local COLOR_PALETTE fallback in
   config/theme.js has no logoBackgroundColor key. Without the fallback the
   declaration is invalid and the chip paints transparent — which is the latent
   bug in the two existing consumers (Auth/Login and Auth/CustomOIDC both write
   the bare hsl(var(--logo-background-color))). */
.oZ0yIbwNWb25yxf2cEA8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  padding: 0.3rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

/* Constrains both the <img> and the fallback <svg>. The brand components pass
   width/height props that get dropped, so the parent must size the mark. */
.fDqdZ1OCVmIHyA82B3TS {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fixed-width flex child. The flyout is absolutely positioned inside it, so the
   sidebar's footprint never changes and the content area never reflows.
   Width and flex-basis are applied inline from RAIL_WIDTH in ./constants.js —
   the same constant View.jsx uses to size the content area — so the two can never
   drift. Don't reintroduce a width here.

   z-index 11 intentionally matches the sidebar this replaces. #right is z-index 10
   and creates a stacking context, so the AppBar nested inside it (z-index 9999) is
   clamped to 10 at the root level and the flyout paints above it. Modals portal to
   body with a higher z-index, so they still cover the rail. */
.FZkv3YwubxTOnaImETFX {
  position: relative;
  z-index: 11;
  height: 100vh;
}

.GLxAR2LEJiW_CdF583ww {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  background: hsl(var(--sidebar-background, 207 31% 18%));

  /* Single source for both dividers. Sourced from the theme's own
     --sidebar-accent (same var the legacy Sidebar.jsx used for its divider),
     not a fixed colour, so it adapts to whatever an account's theme sets.
     Partial opacity keeps it a subtle line rather than a solid full-strength
     block, since accent is often a near-white/pale tone by default. */
  --rail-divider: hsl(var(--sidebar-accent, 207 77% 95%) / 0.2);
}

/* Dividers are absolutely-positioned pseudo-elements rather than borders, because
   a border cannot be inset. Both are 2.5rem wide (the rail item width) so their
   ends sit flush with the icon buttons' edges instead of at an arbitrary padding. */
.RzqXcU8kwOpakLTf9oin,
.QzHlQJZrrJM6xyP3DYuK {
  position: relative;
}

.RzqXcU8kwOpakLTf9oin::after,
.QzHlQJZrrJM6xyP3DYuK::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 1px;
  background: var(--rail-divider);
}

.RzqXcU8kwOpakLTf9oin {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 0;
}

.RzqXcU8kwOpakLTf9oin::after {
  bottom: 0;
}

.QzHlQJZrrJM6xyP3DYuK {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  /* Separates the fixed items from the profile avatar. Whitespace rather than a
     third divider — both are utility controls, and a line here would over-segment
     a 72px column. */
  gap: 0.85rem;
  width: 100%;
  padding: 0.5rem 0 1rem;
}

.QzHlQJZrrJM6xyP3DYuK::before {
  top: 0;
}

/* Overlays the content area rather than pushing it. Width comes inline from
   FLYOUT_WIDTH in ./constants.js.

   Kept in the DOM permanently and shown via visibility/opacity, so both the enter
   and the exit animate. `visibility` is transitioned with a delay equal to the
   duration, which holds the panel visible for the whole exit and only then removes
   it — that is what keeps its buttons out of the tab order while closed without
   using display:none (which would kill the transition entirely). */
.m24kusL6vMdIsv7fFtfX {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-1rem);
  pointer-events: none;

  transition: opacity 0.18s ease-in, transform 0.2s cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.22s;
}

.CvrL48r4AkxEL7bugecl {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;

  transition: opacity 0.2s ease-out,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .m24kusL6vMdIsv7fFtfX,
  .CvrL48r4AkxEL7bugecl {
    transition: none;
  }
}

/* The interactive trigger and the static name share their box exactly. A user with one
   account and a user with several must get the same cluster metrics, so that switching
   accounts never nudges the bell and the help button sideways under the pointer.
   Any change to padding, font-size or max-width here belongs in both rules.

   min-width: 0 overrides the flex item's default auto min-width, which is derived from
   the nowrap .name text and otherwise wins over max-width per spec — without it, a long
   name grew this box past 18rem instead of clamping there, and .right (flex: 0 0 auto,
   never shrinks) let the excess spill past the topbar's right edge instead of the name
   ellipsizing. With it, the box grows to fit the name up to the cap, then truncates. */
.No692P6GOtaOvmvbB85B,
.gIDG9xUIRlfTjyA1Cwf2 {
  display: flex;
  min-width: 0;
  max-width: 22rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius, 0.5rem);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.No692P6GOtaOvmvbB85B {
  border: none;
  background: transparent;
  color: hsl(var(--foreground, 20 14.3% 4.1%));
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Held open the same way it's hovered — no border, just a tint, so the switcher never
   reads as a pill/button chip. */
.No692P6GOtaOvmvbB85B:hover,
.No692P6GOtaOvmvbB85B[data-state="open"] {
  background: hsl(var(--accent, 60 4.8% 95.9%));
}

/* Matches the rail's ring so focus reads the same across the whole chrome. */
.No692P6GOtaOvmvbB85B:focus-visible {
  outline: 2px solid hsl(var(--sidebar-primary, 30 100% 50%));
  outline-offset: 2px;
}

/* The switch is in flight. `cursor: progress` and aria-busy replace the old bar's
   absolutely-positioned spinner overlay and its inline pointerEvents toggle. */
.No692P6GOtaOvmvbB85B[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.gIDG9xUIRlfTjyA1Cwf2 {
  color: hsl(var(--foreground, 20 14.3% 4.1%));
  cursor: default;
}

/* Wraps the mark + nameStack (everything that changes when the account changes) so the
   two can be keyed together in JS and remounted as one unit on every switch — that's
   what replays the slide-in below instead of it only ever playing once on first mount.
   Takes over the flex:1 1 auto / min-width:0 role .nameStack used to hold directly
   against .trigger; .nameStack keeps its own copy since it now shrinks against
   .identity's box instead. */
.HF5eL9H4IbtxpZIljQRK {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  animation: lBhYWJk3h0riK2_LUbj2 0.25s ease-out;
}

@keyframes lBhYWJk3h0riK2_LUbj2 {
  from {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* align-items: stretch (the flex default) is load-bearing, not cosmetic: .name has
   white-space: nowrap, so its min-content size equals its full unwrapped text width.
   Under align-items: start, a non-stretched flex item can never be sized narrower than
   that min-content floor — nameStack itself shrank correctly to the space .trigger's
   max-width left it, but .name ignored that and rendered at full text width regardless,
   spilling past the trigger's right edge instead of ellipsizing. Stretching .name/.code
   to nameStack's resolved width is what lets their own overflow/ellipsis rules apply. */
.EhCwWXeMFXyApD4kGS1G {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.05rem;
}

/* text-align: left overrides the <button>'s UA-default text-align: center, which .name
   inherits. That default was invisible while .name hugged its own content width (no
   spare space to center within), but became visible once .nameStack's stretch (above)
   gave .name a box wider than its text. */
.WXeUvnBNLJDH_wSXzT7c {
  font-weight: 600;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same role/sizing as ProfileMenu's .labelSubline — a muted second line under the name. */
.RZjY8YTmMc5xXXfw9cmx {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  font-size: 0.68rem;
  font-weight: 400;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Smaller than .itemAvatar (1.75rem) so the trigger's height stays inside the existing
   chrome row instead of growing it. Squared off (vs. the list's circular avatars) so it
   reads as a logo mark rather than a user avatar. */
.uF2ILRzz0Q3V_wLQrmY3 {
  height: 1.8rem !important;
  width: 1.8rem !important;
  border-radius: 0.35rem !important;
  flex: 0 0 auto;
}

.w086Wj5Tcufp08UkP1tH {
  border-radius: 0.35rem !important;
  font-size: 0.65rem;
  font-weight: 600;
  color: hsl(var(--foreground, 20 14.3% 4.1%));
}

/* The current account's full/long logo, shown in place of .avatar. It's a wide
   wordmark rather than a square mark, so the container fixes height and lets width
   follow the image's own aspect ratio, capped so it can't crowd out the name/chevron.
   Tenant logos are authored assuming the sidebar rail's dark background, so a white or
   transparent mark disappears here — --logo-background-color is the same theme token
   Auth/Login and Auth/CustomOIDC use for their logo chip, and fixes it the same way. */
.ketQcTg_ybPFNktwH6pQ {
  display: flex;
  height: 1.8rem;
  max-width: 8rem;
  min-width: 5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--logo-background-color));
  border-radius: 0.35rem;
  padding: 0rem 0.3rem;
}

.z8hLvDc1olL1NzZu6iQR {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  height: 100%;
}

/* lucide icons are sized via CSS, never the `size` prop. */
.N8ujngVNeYr8e7rItjpr {
  height: 0.85rem;
  width: 0.85rem;
  flex: 0 0 auto;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.No692P6GOtaOvmvbB85B[data-state="open"] .N8ujngVNeYr8e7rItjpr {
  transform: rotate(180deg);
}

/* Shown in the chevron's place while a switch is in flight (setActiveRole round trip) —
   otherwise the only sign anything happened is .trigger[disabled]'s opacity dip, which
   reads as "nothing happened" rather than "loading". Same size/slot as .chevron so
   swapping the two causes no layout shift. */
.T69AVrTsKhotGfOFqtJI {
  height: 0.85rem;
  width: 0.85rem;
  flex: 0 0 auto;
  opacity: 0.6;
  animation: NBFyU7y2S2UdwbWg3c5i 0.8s linear infinite;
}

@keyframes NBFyU7y2S2UdwbWg3c5i {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.x0UjYQQ4Z4WmNXbd_JUw {
  width: 20rem;
  padding: 8px !important;
}

.IfpYWUBhKpVxb7CNevzw {
  max-height: 19.5rem;
}

/* CommandList already scrolls (overflow-y-auto baked into the package's own utility
   classes) — this just makes that scrollbar visibly present instead of relying on the
   OS's auto-hide behaviour, since a list of 5+ accounts otherwise gives no hint there's
   more to scroll to. */
.jXAQ8dXJDtP6evfCrEPZ {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border, 20 5.9% 90%)) transparent;
}

.jXAQ8dXJDtP6evfCrEPZ::-webkit-scrollbar {
  width: 6px;
}

.jXAQ8dXJDtP6evfCrEPZ::-webkit-scrollbar-track {
  background: transparent;
}

.jXAQ8dXJDtP6evfCrEPZ::-webkit-scrollbar-thumb {
  background: hsl(var(--border, 20 5.9% 90%));
  border-radius: 3px;
}

.jXAQ8dXJDtP6evfCrEPZ::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground, 25 5.3% 44.7%));
}

/* Held inert for the duration of the setRole round trip, rather than unmounting the
   list — the popover closes on select, so this only shows if the request is slow enough
   that the user reopens it. */
.UCtUm26P8PS6pbR62FyT {
  max-height: 15.5rem;
  opacity: 0.6;
  pointer-events: none;
}

.bKxul4oZRkpc4jXCc00n {
  padding: 1rem 0.75rem;
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  font-size: 0.8rem;
  text-align: center;
}

.UEwLFR9zNv6Gk2rg5I5U {
  gap: 0.6rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Avatar ships h-10 w-10 (2.5rem), which is twice the height of a 0.8rem row. The
   package sets it with a utility class of equal specificity, so !important is what
   makes the override deterministic regardless of stylesheet order. */
.wKhLNi_snrOFyQWpAHGD {
  height: 1.75rem !important;
  width: 1.75rem !important;
  flex: 0 0 auto;
}

.WgVmLVbIfWPPoAzFPxTN {
  color: hsl(var(--foreground, 20 14.3% 4.1%));
  font-size: 0.7rem;
  font-weight: 600;
}

.AbrmTNdg1qDxVPIFZIge {
  display: flex;
  min-width: 0;
  flex-direction: column;
  height: 30px;
}

.JqbLCbEQozajDnc5Dyiv {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Without this, the fallback text inherits the ambient line-height (taller than
     this 1.75rem circle), and its line-box sits low enough that the glyph reads
     as cut off at the bottom against the curve — a square badge hides this, a
     true circle (this one) does not. */
  line-height: 1;
}

.UqOhEz4laSkgv2qKrrYd {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  font-size: 0.68rem;
}

.yYG9FbLuUsFPfP_C3ruw {
  height: 0.9rem;
  width: 0.9rem;
  margin-left: auto;
  flex: 0 0 auto;
  color: hsl(var(--primary, 30 100% 50%));
  stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
  .No692P6GOtaOvmvbB85B,
  .N8ujngVNeYr8e7rItjpr {
    transition: none;
  }

  .HF5eL9H4IbtxpZIljQRK,
  .T69AVrTsKhotGfOFqtJI {
    animation: none;
  }
}

.dvhfS6KHOxa3Xhk0OEii {
  width: 540px;
  height: auto;
  padding: 16px !important;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.wEkzP1ZhtUr6xKzWRjBL {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.rjOK7AvTM7nBVRforSdp {
  display: flex;
  align-items: center;
}

.rjOK7AvTM7nBVRforSdp h2 {
  margin: 0;
  flex-grow: 1;
}

.rjOK7AvTM7nBVRforSdp label {
  margin: 0;
}

.rjOK7AvTM7nBVRforSdp .uzKMboMWMAiXz10DTiFg {
  padding: 4px;
  border-radius: 4px;
  transition: all 0.1s ease;
}

.rjOK7AvTM7nBVRforSdp .uzKMboMWMAiXz10DTiFg .rjOK7AvTM7nBVRforSdp .uzKMboMWMAiXz10DTiFg span {
  display: block;
}

.rjOK7AvTM7nBVRforSdp .uzKMboMWMAiXz10DTiFg:hover {
  cursor: pointer;
}

.UgTozNJeIQ0F1CDy_UQp {
  padding: 0.5rem 1rem 0.5rem 0;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.UgTozNJeIQ0F1CDy_UQp:hover {
  background-color: #f1f1f1;
}

.e8M8BOZXigP4piQXw3CM {
  flex: 1 1 auto;
}

.ZzHfKFx3qJl_GVfPoLg3 .ifx7wfx8LNMS17W_8Gv8 {
  font-weight: 600;
}

.ZzHfKFx3qJl_GVfPoLg3 .n9Xv_eNCekpFSQVdviO9 {
  font-size: 12px;
  color: #909090;
  margin-left: 0.6rem;
}

.z130FMAEjPETOe3oVa7h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r50_E7kQK4acR7cK95X5 {
  display: flex;
  align-items: center;
}

.fVAitlcQSeETKtSgTazU {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #fff;
  position: relative;
  margin-right: 4px;
}
.iNuYNJfUpiLsnhHjXCoT::after {
  content: "";
  display: block;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1b313e;
}

.yLid7OdSNvh2YbccqpdJ {
  visibility: hidden;
}

.OP47AyJc6Y5ONX7gSiyz {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.OP47AyJc6Y5ONX7gSiyz:hover {
  background-color: var(--grey-300);
}

.iS6gjdWSU1t6vrqbQ0LV {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.iS6gjdWSU1t6vrqbQ0LV:hover {
  text-decoration: none;
}

.PoYQubCpfMa5rcaCOY1M img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 200px;
  object-fit: scale-down;
  max-width: none;
}

.pH87HjLB8yxbw4jgTbhH {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: hsl(var(--input));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 0.5rem;
}

.RX_m4o0ZLJrDrRjeCzdq {
  color: #78716c;
}

.lLcPgQmuGj0Uur0d3TYH {
  max-height: 500px;
  overflow-y: auto;
}

.fMK4spjrr51xIsIDhjIA {
  width: 61%;
}

._vvD5FDUSmKHRZa6YRcE {
  display: flex;
  gap: 4px;
  align-items: center;
}

.v8yt7Y1sxnGQ01bMCjnP {
  width: 170px;
}

/* Title and trail stacked inside the bar's 4rem, title first. Budget: ~1.55rem title
   line, 0.15rem gap, ~1rem crumb line — about 2.7rem of content, which the bar's own
   vertical centring still absorbs comfortably. Nothing here sets a height, so the ~12
   page stylesheets that hardcode calc(100vh - 64px) against this bar keep computing
   identically.

   Sized deliberately above the package's own TypographyLarge (text-lg/1.125rem,
   font-semibold — what the 9 AccountSettingsV2 pages use for their own header): the bar
   title outranks it, naming the section a page's own leaf title sits inside, and it is
   the first thing read on the screen. It has to look like the top of the hierarchy, not
   like fine print above the content.

   min-width: 0 on both the wrapper and the title is what makes truncation possible at
   all — a flex child defaults to min-width: auto and refuses to shrink below its
   content, which would push the bar's right-hand cluster off screen instead of
   ellipsising the title. */
.RTKz8RPeztj1ua3dtF28 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

/* BreadcrumbList ships `flex-wrap: wrap` and `gap: 0.375rem` (plus `gap: 0.625rem` at
   the sm breakpoint) from the package's own utility classes. Both need overriding:
   this is a single fixed-height row, so a wrapped trail would overflow the bar rather
   than reflow it.

   !important is load-bearing here and in .ellipsis below. Everywhere else in this file
   the cascade is enough, because the package's utilities and these module classes have
   equal specificity and the module's stylesheet is injected after the package's. But
   `gap` is declared twice by the package (base + media query), so the media-query copy
   would otherwise win at >=640px regardless of source order. */
.qmkcaL__qPKLVD0UFxQG {
  flex-wrap: nowrap !important;
  gap: 0.3rem !important;
  font-size: 0.75rem;
  line-height: 1.3;
  margin-bottom: 0px;
}

/* Keeps one long dynamic label — a record code, a schema name — from squeezing its
   siblings to nothing. */
.ZVf4n5F1EI1sd5GrJ15L {
  min-width: 0;
  max-width: 12rem;
}

/* The current page is the one crumb that must survive the squeeze. */
.ZVf4n5F1EI1sd5GrJ15L:last-of-type {
  flex-shrink: 0;
}

.uIvY_Lryh5TCwtQMTBBv,
.HwxzoHjLwaCtf8gFFClq,
.TEJnD4aD9NNIJj1KnI8O {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uIvY_Lryh5TCwtQMTBBv {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  text-decoration: none;
  transition: color 0.15s ease;
}

.uIvY_Lryh5TCwtQMTBBv:hover {
  color: hsl(var(--primary, 30 100% 50%));
  text-decoration: underline;
}

/* Matches the rail's focus treatment rather than the bar's own palette, so a keyboard
   user sees one consistent ring colour across the whole chrome. :focus-visible only —
   a mouse click on a crumb should not leave a ring behind. */
.uIvY_Lryh5TCwtQMTBBv:focus-visible {
  border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
  outline: 2px solid hsl(var(--sidebar-primary, 30 100% 50%));
  outline-offset: 2px;
}

.HwxzoHjLwaCtf8gFFClq {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
}

/* Keeps BreadcrumbPage's own `text-foreground` rather than muting it. Since the title
   names the section, this crumb is the only place in the chrome that names the current
   page — and on the routes that render no heading of their own (ProfileSettingsV2,
   UserManagement, NewCockpit — most of the app) it is the only place it is named at all.
   It has to carry that weight at trail size, so it gets full contrast plus the extra 500
   against its muted siblings. */
.TEJnD4aD9NNIJj1KnI8O {
  color: hsl(var(--foreground, 20 14.3% 4.1%));
  font-weight: 500;
}

.FX9lhzaMManNpGbLgEpY {
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
  opacity: 0.7;
}

/* BreadcrumbEllipsis is sized h-9 w-9 (2.25rem) for a 0.875rem list. In a 0.75rem
   trail inside a 4rem bar that box is taller than the line it sits on, so it has to
   come down to roughly the height of a crumb. */
.t8R_dpVsFUmoxsH6soCQ {
  height: 1.1rem !important;
  width: 1.1rem !important;
  color: hsl(var(--muted-foreground, 25 5.3% 44.7%));
}

.e8dWWjnBTVZO2J_A7FPh {
  min-width: 0;
  overflow: hidden;
  color: hsl(var(--foreground, 20 14.3% 4.1%));
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  /* CSS truncation rather than a character cap: only JS-supplied record names get long
     enough to matter, and the browser is the only thing that knows the width left over
     after the right-hand cluster. */
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .uIvY_Lryh5TCwtQMTBBv {
    transition: none;
  }
}

/* A flow row inside #right's flex column. Height comes inline from TOPBAR_HEIGHT in
   ./constants.js — the same 4rem that roughly a dozen page stylesheets subtract via
   calc(100vh - 64px). Don't add a height here, and don't change the constant without
   auditing those pages.

   Deliberately NOT position: fixed, and deliberately WITHOUT a z-index.

   The bar it replaces was fixed, which forced View.jsx to compensate with a marginTop
   of 64 (or 128 when the force-logout banner showed) and a height of calc(100vh - 64px)
   — four magic numbers describing one measurement, plus a JS-computed
   `width: calc(100% - 4rem)` that disagreed with the rail's real 4.5rem. As a flex row
   none of that is needed: the row cannot disagree with a width it never states, and the
   banner is a sibling row that shrinks the scroll area by its own real height.

   No z-index because #right is z-index 10 and creates a stacking context. The rail's
   .container is 11, so its group flyout paints above this bar by design. Escalating a
   z-index here would put the bar over the flyout — which is what AppBar's z-index 9999
   was trying and failing to do. */
.u09Yb1UQBDFbQf30VaqD {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid hsl(var(--border, 20 5.9% 90%));
  background: hsl(var(--card, 0 0% 100%));
  padding: 0 1.15rem 0 1rem;
  color: hsl(var(--card-foreground, 20 14.3% 4.1%));
}

/* min-width: 0 is load-bearing. A flex child defaults to min-width: auto and refuses to
   shrink below its content, so without this a long page title would push the entire
   right-hand cluster off screen instead of ellipsising. */
.toBhUFkBMlCU2yHVcP2w {
  min-width: 0;
  flex: 1 1 auto;
}

.fdXF9SmgNf3LqE4cJosw {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

/* Separates the account identity from the utility icons. A hairline rather than more
   whitespace: the icon buttons already sit 0.35rem apart, so a wider gap alone would
   not read as a group boundary. */
.ybEwrfB7ltbrliNDPx3p {
  height: 1.25rem;
  width: 1px;
  margin: 0 0.25rem;
  background: hsl(var(--border, 20 5.9% 90%));
}

.GMqm5qJ80r3lsFUlru1P {
  position: absolute;
  z-index: 11;
  background-color: rgba(254, 243, 199, 0.4);
  color: #7f3f1a;
  height: 16px;
}

.lfaa2tJCIg5HB_VEKFeE{
    font-size: 28px;
    font-weight: 700;
    padding-top: 40px;
}

.WTg465smlLeaVVfLNDza{
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 20px;
    padding-bottom: 40px;
    color: #858585;
}

.pNtjNM5YSZl87MuVjpH_{
    background-color:#ff8000;
    border: none;
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
}

.F12vGXhh9LhxbN2DEnHd{
    display: flex;
    align-items: center;
    justify-content: center;
}

.TcODU95YyllNyjs5SokX{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.ZdFl8qzzxMlDOBBu0dte{
    padding: 20px;
    width: 700px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

.wuuf80UZt3S7qQ1GUdMw{
    border-radius: 6px;
}
.fuybi7UTeNtvTshSYPow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  font-size: 0.8125rem;
  color: #92400e;
}

.Eoq6FZfQA3sH4jHMSd0T {
  background: none;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #92400e;
  padding: 0.2rem 0.6rem;
}


/*# sourceMappingURL=styles.f393f171bb5e02c02027.css.map*/