/**
 * Themed scrollbar — one shared definition, applied to every scroll area in the app so the
 * browser's native (light grey) scrollbar never shows against the themed surfaces.
 *
 * Loaded once at boot from application/bootstrapConfig.js.
 *
 * The design is the one many components already carried as local copies (form dialog bodies,
 * table bodies, the inbox panels): a thin 8px bar, transparent track, rounded thumb in the
 * theme's border colour, one step brighter on hover.
 *
 * Colours are theme tokens, never fixed values — portals/cpanel's element-bridge.css maps
 * --el-border-color-darker -> --border and --el-text-color-placeholder -> --text-faint, and
 * those change per colour scheme and light/dark theme. The second value in each var() is only
 * a fallback for a page that does not load that bridge.
 *
 * Both syntaxes are needed: `scrollbar-width` / `scrollbar-color` for Firefox and Chromium
 * 121+, `::-webkit-scrollbar*` for Safari and older Chromium.
 *
 * `*` is the lowest-specificity selector there is, so anything more specific still wins:
 * a component's own local copy of this design, Element Plus's own hidden scrollbars
 * (`.el-scrollbar__wrap` draws its own bar), and a deliberately hidden scrollbar
 * (`scrollbar-width: none`) all stay as they are.
 */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--el-border-color-darker, rgba(255, 255, 255, 0.18)) transparent;
}

*::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background:    var(--el-border-color-darker, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--el-text-color-placeholder, rgba(255, 255, 255, 0.28));
}

/*
 * The PAGE's own scrollbar (the window edge) is the exception to the transparent track.
 * Nothing sets a background on <html>/<body> — the dark look comes from containers inside the
 * page — so a transparent track here shows the browser's default WHITE canvas, and the thumb
 * (--border is white at ~8% opacity in the dark schemes) vanishes against it. So this one gets
 * opaque theme colours: the page background token for the track, a mid-tone token for the thumb.
 * `html` out-ranks `*`, so this wins for the root scrollbar only.
 */
html {
  scrollbar-color: var(--text-faint, #8f8172) var(--bg, #211c18);
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner {
  background: var(--bg, #211c18);
}

html::-webkit-scrollbar-thumb {
  background:    var(--text-faint, #8f8172);
  border-radius: 8px;
  /* A track-coloured edge so the thumb reads as inset, not flush against the window edge. */
  border:        2px solid var(--bg, #211c18);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim, #c7bcae);
}
/**
 * Required-field asterisk AFTER the label ("Email *"), app-wide.
 *
 * Element Plus draws the mark itself, from the form item's `.asterisk-left` / `.asterisk-right` class
 * (its `require-asterisk-position`, default left, set per <el-form>): left = a `::before` on the label,
 * right = an `::after`. Every form here uses the default, so this one stylesheet moves the mark for all of
 * them at once, rather than adding `require-asterisk-position="right"` to each form (70 of them).
 *
 * Only the pseudo-element changes: the item is still tagged `.is-required` from its rules, validation is
 * untouched, and a form that sets `require-asterisk-position="right"` itself gets the same look from
 * Element Plus. Loaded once at boot from application/bootstrapConfig.js.
 */

/* Take the mark off the front… */
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::before,
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label::before {
  content: none;
  margin:  0;
}

/* …and put it after the label text. */
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::after,
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label::after {
  content:     '*';
  color:       var(--el-color-danger, #f56c6c);
  margin-left: 4px;
}

.overflow[data-v-f6239593] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(25,25,25,.7);
    text-align: center;
    z-index: 9999;
}
.lds-ring[data-v-f6239593] {
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    margin-top: -50px;
}
.lds-ring div[data-v-f6239593] {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring-f6239593 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div[data-v-f6239593]:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div[data-v-f6239593]:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div[data-v-f6239593]:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring-f6239593 {
0% {
      transform: rotate(0deg);
}
100% {
      transform: rotate(360deg);
}
}


* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}