@layer reset, base, components, utilities;
/*
  Cascade layer order for the whole application. Declaring it first makes it
  authoritative.

  - reset: the vendored Tailwind preflight (resets/_preflight.css)
  - base: vendor stylesheets first (they must stay in the same layer as our
    element defaults so their higher-specificity selectors keep winning),
    then element defaults, design tokens, and page styles
  - components: converted, Roux-structured component files
  - utilities: kept utilities (.hidden, .sr-only, .fill-current,
    .text-current) and .u-* helpers

  See doc/css.md and issue #10124.
*/
@layer reset{

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

::-ms-backdrop {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

::-webkit-file-upload-button {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4; /* 3 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

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

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring:where(:not(iframe)) {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

::-webkit-file-upload-button {
  font: inherit; /* 1 */
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::-webkit-file-upload-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

::file-selector-button {
  -webkit-margin-end: 4px;
          margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::-webkit-input-placeholder {
  opacity: 1;
}

::-moz-placeholder {
  opacity: 1;
}

:-ms-input-placeholder {
  opacity: 1;
}

::-ms-input-placeholder {
  opacity: 1;
}

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::-webkit-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::-moz-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  :-ms-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::-ms-input-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: -webkit-inline-box;
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
          appearance: button;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}
}
@layer base{
/* ===============================
=            Choices            =
=============================== */
.choices {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--choices-guttering, 24px);
  font-size: var(--choices-font-size-lg, 16px);
}
.choices:focus {
  outline: none;
}
.choices:last-child {
  margin-bottom: 0;
}
.choices.is-open {
  overflow: visible;
}
.choices.is-disabled :is(.choices__inner, .choices__input) {
  background-color: var(--choices-bg-color-disabled, #eaeaea);
  cursor: not-allowed !important;
  -webkit-user-select: none;
          -moz-user-select: none;
           -ms-user-select: none;
       user-select: none;
}
.choices.is-disabled .choices__item {
  cursor: not-allowed;
  color: var(--choices-item-disabled-color, #fff);
}
.choices [hidden] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
  padding-bottom: var(--choices-inner-one-padding, 7.5px);
}
.choices[data-type*=select-one] .choices__input {
  display: block;
  width: var(--choices-width, 100%);
  padding: var(--choices-dropdown-item-padding, 10px);
  border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
  background-color: var(--choices-bg-color-dropdown, #fff);
  margin: 0;
}
.choices[data-type*=select-one] .choices__button {
  background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:is(:hover, :focus) {
  opacity: var(--choices-button-opacity-hover, 1);
}
.choices[data-type*=select-one] .choices__button:focus {
  -webkit-box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75);
          box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75);
}
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
  display: none;
}
.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: var(--choices-text-color, #333) transparent transparent transparent;
  border-width: var(--choices-arrow-size, 5px);
  position: absolute;
  right: var(--choices-arrow-right, 11.5px);
  top: 50%;
  margin-top: var(--choices-arrow-margin-top, -2.5px);
  pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent var(--choices-text-color, #333);
  margin-top: var(--choices-arrow-margin-top-open, -7.5px);
}
.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner {
  cursor: text;
}
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button {
  position: relative;
  display: inline-block;
  margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
  padding-left: calc(var(--choices-button-offset, 8px) * 2);
  border-left: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
  background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
  background-size: var(--choices-button-dimension, 8px);
  width: var(--choices-button-dimension, 8px);
  line-height: var(--choices-button-line-height, 1);
  border-radius: var(--choices-button-border-radius, 0);
  opacity: var(--choices-button-opacity, 0.75);
}
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button:is(:hover, :focus) {
  --choices-button-opacity: var(--choices-button-opacity-hover, 1);
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: var(--choices-width, 100%);
  background-color: var(--choices-bg-color, #f9f9f9);
  padding: var(--choices-inner-padding, 7.5px 7.5px 3.75px);
  border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
  border-radius: var(--choices-border-radius, 2.5px);
  font-size: var(--choices-font-size-md, 14px);
  min-height: var(--choices-input-height, 44px);
  overflow: hidden;
}
.is-focused .choices__inner, .is-open .choices__inner {
  border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
}
.is-open .choices__inner {
  border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
}
.is-invalid .choices__inner {
  border-color: var(--choices-invalid-color, #d33141);
}
.is-flipped.is-open .choices__inner {
  border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.choices__list--single {
  display: inline-block;
  padding: var(--choices-list-single-padding, 4px 16px 4px 4px);
  width: var(--choices-width, 100%);
}
[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}
.choices__list--single .choices__item {
  width: var(--choices-width, 100%);
}

.choices__list--multiple {
  display: inline;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: var(--choices-border-radius-item, 20px);
  padding: var(--choices-multiple-item-padding, 4px 10px);
  font-size: var(--choices-font-size-sm, 12px);
  font-weight: 500;
  margin-right: var(--choices-multiple-item-margin, 3.75px);
  margin-bottom: var(--choices-multiple-item-margin, 3.75px);
  background-color: var(--choices-primary-color, #005F75);
  border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
  color: var(--choices-item-color, #fff);
  word-break: break-all;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: var(--choices-multiple-item-margin, 3.75px);
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
  border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
}
.is-disabled .choices__list--multiple .choices__item {
  background-color: color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 75%, var(--choices-darken, black));
  border: 1px solid color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 65%, var(--choices-darken, black));
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  display: none;
  z-index: var(--choices-z-index, 1);
  position: absolute;
  width: var(--choices-width, 100%);
  background-color: var(--choices-bg-color-dropdown, #fff);
  border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: var(--choices-border-radius, 2.5px);
  border-bottom-right-radius: var(--choices-border-radius, 2.5px);
  overflow: hidden;
  word-break: break-all;
}
.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
  display: block;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
  border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: var(--choices-dropdown-item-padding, 10px);
  font-size: var(--choices-font-size-md, 14px);
}
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
  text-align: right;
}
@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
    padding-right: 100px;
  }
  .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
    content: attr(data-select-text);
    font-size: var(--choices-font-size-sm, 12px);
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
    right: auto;
    left: 10px;
  }
}
.choices__list--dropdown .choices__item--selectable.is-selected::after, .choices__list[aria-expanded] .choices__item--selectable.is-selected::after {
  content: none !important;
}
.choices__list--dropdown .choices__item--selectable.is-selected, .choices__list[aria-expanded] .choices__item--selectable.is-selected, .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--choices-highlighted-color, #f2f2f2);
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
          -moz-user-select: none;
           -ms-user-select: none;
       user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--choices-keyline-color, #ddd) 90%, var(--choices-lighten, white));
  color: gray;
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: var(--choices-bg-color, #f9f9f9);
  font-size: var(--choices-font-size-md, 14px);
  margin-bottom: var(--choices-input-margin-bottom, 5px);
  border: 0;
  border-radius: 0;
  max-width: var(--choices-width, 100%);
  padding: var(--choices-input-padding, 4px 0 4px 2px);
}
.choices__input:focus {
  outline: 0;
}
.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
  display: none;
}
.choices__input::-ms-clear, .choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: var(--choices-placeholder-opacity, 0.5);
}

/* =====  End of Choices  ====== */
}
@layer base{
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*

Atom One Light by Daniel Gamage
Original One Light Syntax theme from https://github.com/atom/one-light-syntax

base:    #fafafa
mono-1:  #383a42
mono-2:  #686b77
mono-3:  #a0a1a7
hue-1:   #0184bb
hue-2:   #4078f2
hue-3:   #a626a4
hue-4:   #50a14f
hue-5:   #e45649
hue-5-2: #c91243
hue-6:   #986801
hue-6-2: #c18401

*/
.hljs {
  color: #383a42;
  background: #fafafa
}
.hljs-comment,
.hljs-quote {
  color: #a0a1a7;
  font-style: italic
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #a626a4
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e45649
}
.hljs-literal {
  color: #0184bb
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: #50a14f
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #986801
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #4078f2
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: #c18401
}
.hljs-emphasis {
  font-style: italic
}
.hljs-strong {
  font-weight: bold
}
.hljs-link {
  text-decoration: underline
}
}
@layer base{
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;-webkit-transition-property:visibility,opacity,-webkit-transform;transition-property:visibility,opacity,-webkit-transform;transition-property:transform,visibility,opacity;transition-property:transform,visibility,opacity,-webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{-webkit-transition-timing-function:cubic-bezier(.54,1.5,.38,1.11);transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
}
@layer base{
.tippy-box[data-theme~=light-border]{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#333;-webkit-box-shadow:0 4px 14px -2px rgba(0,8,16,.08);box-shadow:0 4px 14px -2px rgba(0,8,16,.08)}.tippy-box[data-theme~=light-border]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light-border]>.tippy-arrow:after,.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{content:"";position:absolute;z-index:-1}.tippy-box[data-theme~=light-border]>.tippy-arrow:after{border-color:transparent;border-style:solid}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:after{border-top-color:rgba(0,8,16,.2);border-width:7px 7px 0;top:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow>svg{top:16px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow:after{top:17px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff;bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:rgba(0,8,16,.2);border-width:0 7px 7px;bottom:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow:after{bottom:17px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:after{border-left-color:rgba(0,8,16,.2);border-width:7px 0 7px 7px;left:17px;top:1px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow>svg{left:11px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow:after{left:12px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff;right:16px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:after{border-width:7px 7px 7px 0;right:17px;top:1px;border-right-color:rgba(0,8,16,.2)}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow>svg{right:11px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow:after{right:12px}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow{fill:#fff}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);background-size:16px 6px;width:16px;height:6px}
}
@layer base{
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  -webkit-box-shadow: 0 0.3em 1em #ccc;
          box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  -webkit-box-shadow: #F00 0px 0px 1.5px 1px;
          box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 content;
          flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  -webkit-box-shadow: 0 0 0 2px highlight;
          box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  -webkit-box-shadow: 0 0 0 2px highlight;
          box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  -webkit-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 33%;
          flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  max-width: 50%;
}
}
@layer base{
/*!
 * Vditor v4.0.0 - A markdown editor written in TypeScript.
 *
 * MIT License
 *
 * Copyright (c) 2018-present B3log 开源, b3log.org
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */
/*!
 * Vditor v4.0.0 - A markdown editor written in TypeScript.
 *
 * MIT License
 *
 * Copyright (c) 2018-present B3log 开源, b3log.org
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */
.vditor {
  --border-color: #d1d5da;
  --second-color: rgba(88, 96, 105, 0.36);
  --panel-background-color: #fff;
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --toolbar-background-color: #f6f8fa;
  --toolbar-icon-color: #586069;
  --toolbar-icon-hover-color: #4285f4;
  --toolbar-height: 35px;
  --toolbar-divider-margin-top: 8px;
  --textarea-background-color: #fafbfc;
  --textarea-text-color: #24292e;
  --resize-icon-color: var(--toolbar-icon-color);
  --resize-background-color: var(--toolbar-background-color);
  --resize-hover-icon-color: var(--panel-background-color);
  --resize-hover-background-color: var(--toolbar-icon-hover-color);
  --count-background-color: rgba(27, 31, 35, 0.05);
  --heading-border-color: #eaecef;
  --blockquote-color: #6a737d;
  --callout-note-color: #0969da;
  --callout-note-background-color: rgba(9, 105, 218, 0.08);
  --callout-tip-color: #1a7f37;
  --callout-tip-background-color: rgba(26, 127, 55, 0.08);
  --callout-important-color: #8250df;
  --callout-important-background-color: rgba(130, 80, 223, 0.08);
  --callout-warning-color: #9a6700;
  --callout-warning-background-color: rgba(154, 103, 0, 0.08);
  --callout-caution-color: #cf222e;
  --callout-caution-background-color: rgba(207, 34, 46, 0.08);
  --ir-heading-color: #660e7a;
  --ir-title-color: #808080;
  --ir-bi-color: #0033b3;
  --ir-link-color: #008000;
  --ir-bracket-color: #0000ff;
  --ir-paren-color: #008000;
}
.vditor--dark {
  --border-color: #141414;
  --second-color: rgba(185, 185, 185, 0.36);
  --panel-background-color: #24292e;
  --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
  --toolbar-background-color: #1d2125;
  --toolbar-icon-color: #b9b9b9;
  --toolbar-icon-hover-color: #fff;
  --textarea-background-color: #2f363d;
  --textarea-text-color: #d1d5da;
  --resize-icon-color: var(--border-color);
  --resize-background-color: var(--second-color);
  --resize-hover-icon-color: var(--toolbar-icon-hover-color);
  --resize-hover-background-color: rgba(185, 185, 185, 0.86);
  --count-background-color: rgba(66, 133, 244, 0.36);
  --heading-border-color: var(--textarea-text-color);
  --blockquote-color: var(--toolbar-icon-color);
  --callout-note-color: #58a6ff;
  --callout-note-background-color: rgba(56, 139, 253, 0.15);
  --callout-tip-color: #3fb950;
  --callout-tip-background-color: rgba(46, 160, 67, 0.15);
  --callout-important-color: #a371f7;
  --callout-important-background-color: rgba(163, 113, 247, 0.15);
  --callout-warning-color: #d29922;
  --callout-warning-background-color: rgba(187, 128, 9, 0.15);
  --callout-caution-color: #f85149;
  --callout-caution-background-color: rgba(248, 81, 73, 0.15);
  --ir-heading-color: #9876aa;
  --ir-title-color: #808080;
  --ir-bi-color: #cc7832;
  --ir-link-color: #ffc66d;
  --ir-bracket-color: #287bde;
  --ir-paren-color: #6a8759;
}
/**
 * tool tip.
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 * @version 0.1.0.0, Jan 25, 2019
 */
@-webkit-keyframes tooltip-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tooltip-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.vditor-tooltipped {
  position: relative;
  cursor: pointer;
}
.vditor-tooltipped::after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: #3b3e43;
  border-radius: 3px;
  line-height: 16px;
  opacity: 0;
}
.vditor-tooltipped::before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: #3b3e43;
  pointer-events: none;
  content: "";
  border: 5px solid transparent;
  opacity: 0;
}
.vditor-tooltipped--hover::before,
.vditor-tooltipped--hover::after,
.vditor-tooltipped:hover::before,
.vditor-tooltipped:hover::after,
.vditor-tooltipped:active::before,
.vditor-tooltipped:active::after,
.vditor-tooltipped:focus::before,
.vditor-tooltipped:focus::after {
  display: inline-block;
  text-decoration: none;
  -webkit-animation-name: tooltip-appear;
          animation-name: tooltip-appear;
  -webkit-animation-duration: 0.15s;
          animation-duration: 0.15s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
.vditor-tooltipped__s::after,
.vditor-tooltipped__se::after,
.vditor-tooltipped__sw::after {
  top: 100%;
  right: 50%;
  margin-top: 5px;
}
.vditor-tooltipped__s::before,
.vditor-tooltipped__se::before,
.vditor-tooltipped__sw::before {
  top: auto;
  right: 50%;
  bottom: -5px;
  margin-right: -5px;
  border-bottom-color: #3b3e43;
}
.vditor-tooltipped__se::after {
  right: auto;
  left: 50%;
  margin-left: -15px;
}
.vditor-tooltipped__sw::after {
  margin-right: -15px;
}
.vditor-tooltipped__n::after,
.vditor-tooltipped__ne::after,
.vditor-tooltipped__nw::after {
  right: 50%;
  bottom: 100%;
  margin-bottom: 5px;
}
.vditor-tooltipped__n::before,
.vditor-tooltipped__ne::before,
.vditor-tooltipped__nw::before {
  top: -5px;
  right: 50%;
  bottom: auto;
  margin-right: -5px;
  border-top-color: #3b3e43;
}
.vditor-tooltipped__ne::after {
  right: auto;
  left: 50%;
  margin-left: -15px;
}
.vditor-tooltipped__nw::after {
  margin-right: -15px;
}
.vditor-tooltipped__s::after,
.vditor-tooltipped__n::after {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
.vditor-tooltipped__w::after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.vditor-tooltipped__w::before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: #3b3e43;
}
.vditor-tooltipped__e::after {
  bottom: 50%;
  left: 100%;
  margin-left: 5px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.vditor-tooltipped__e::before {
  top: 50%;
  right: -5px;
  bottom: 50%;
  margin-top: -5px;
  border-right-color: #3b3e43;
}
@media screen and (max-width: 520px) {
  .vditor-tooltipped:before,
  .vditor-tooltipped:after {
    content: none;
  }
}
/**
 * panel.
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 * @version 1.0.0.0, Jan 22, 2020
 */
@-webkit-keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.vditor-panel {
  background-color: var(--panel-background-color);
  position: absolute;
  -webkit-box-shadow: var(--panel-shadow);
          box-shadow: var(--panel-shadow);
  border-radius: 3px;
  padding: 5px;
  z-index: 3;
  font-size: 14px;
  display: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  max-width: 320px;
  min-width: 80px;
  -webkit-animation-duration: 0.15s;
          animation-duration: 0.15s;
  -webkit-animation-name: scale-in;
          animation-name: scale-in;
  -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
          animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
  color: var(--toolbar-icon-color);
}
.vditor-panel--none {
  padding: 0;
  -webkit-animation: none;
          animation: none;
  min-width: auto;
  max-width: none;
  white-space: nowrap;
  opacity: 0.86;
}
.vditor-panel--arrow:before {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  content: " ";
  border: 7px solid transparent;
  top: -14px;
  left: 5px;
  border-bottom-color: var(--panel-background-color);
}
.vditor-panel--left {
  right: 0;
}
.vditor-panel--left.vditor-panel--arrow:before {
  right: 5px;
  left: auto;
}
.vditor-input {
  border: 0;
  padding: 3px 5px;
  background-color: var(--panel-background-color);
  font-size: 12px;
  color: var(--textarea-text-color);
}
.vditor-input:focus {
  background-color: var(--toolbar-background-color);
  outline: none;
}
.vditor-icon {
  color: var(--toolbar-icon-color);
  cursor: pointer;
  float: left;
  padding: 4px 5px;
  height: 21px;
  width: 23px;
  background-color: transparent;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.vditor-icon:hover,
.vditor-icon--current {
  color: var(--toolbar-icon-hover-color);
  background-color: transparent;
}
.vditor-icon:focus {
  outline: none;
}
.vditor-icon svg {
  height: 13px !important;
  width: 13px !important;
  float: left;
  fill: currentColor;
  pointer-events: none;
}
.vditor-toolbar {
  background-color: var(--toolbar-background-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0 5px;
  line-height: 1;
}
.vditor-toolbar--pin {
  position: sticky;
  top: 0;
  z-index: 1;
}
.vditor-toolbar--hide {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  height: 5px;
  overflow: hidden;
}
.vditor-toolbar--hide:hover {
  background-color: var(--toolbar-background-color);
  height: auto;
  overflow: visible;
}
.vditor-toolbar__item {
  float: left;
  position: relative;
}
.vditor-toolbar__item .vditor-tooltipped {
  color: var(--toolbar-icon-color);
  border: 0;
  padding: 10px 5px;
  background-color: transparent;
  height: var(--toolbar-height);
  width: 25px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0;
}
.vditor-toolbar__item .vditor-tooltipped:focus {
  outline: none;
}
.vditor-toolbar__item .vditor-tooltipped:focus {
  cursor: pointer;
  color: var(--toolbar-icon-hover-color);
}
.vditor-toolbar__item svg {
  fill: currentColor;
  display: inline-block;
  stroke-width: 0;
  stroke: currentColor;
  width: 15px;
  height: 15px;
}
.vditor-toolbar__item input {
  position: absolute;
  width: 25px;
  height: var(--toolbar-height);
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0.001;
  overflow: hidden;
}
.vditor-toolbar__divider {
  float: left;
  height: calc(var(--toolbar-height) - (var(--toolbar-divider-margin-top) * 2));
  border-left: 1px solid var(--second-color);
  margin: var(--toolbar-divider-margin-top) 8px;
}
.vditor-toolbar__br {
  width: 100%;
  padding: 0 !important;
  height: 0 !important;
}
.vditor-menu--current {
  color: var(--toolbar-icon-hover-color) !important;
}
.vditor-menu--disabled {
  color: var(--second-color) !important;
  cursor: not-allowed !important;
}
.vditor-emojis {
  display: inline-block;
  overflow: auto;
}
.vditor-emojis::-webkit-scrollbar {
  display: none;
}
.vditor-emojis__tip {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  width: 200px;
  margin-right: 10px;
  color: var(--toolbar-icon-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.vditor-emojis__tail {
  margin-top: 5px;
  font-size: 12px;
  color: var(--toolbar-icon-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.vditor-emojis__tail a {
  text-decoration: none;
  color: var(--toolbar-icon-color);
}
.vditor-emojis__tail a:hover {
  color: var(--toolbar-icon-hover-color);
}
.vditor-emojis button {
  cursor: pointer;
  border-radius: 3px;
  float: left;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 26px;
  padding: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  border: 0;
  margin: 0;
  background-color: transparent;
  overflow: hidden;
}
.vditor-emojis button:focus {
  outline: none;
}
.vditor-emojis button:hover .vditor-emojis__icon {
  display: inline-block;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.vditor-emojis img {
  height: 20px;
  width: 20px;
  float: left;
  margin: 3px 0 0 3px;
}
@media screen and (max-width: 520px) {
  .vditor-toolbar__item {
    padding: 0 12px;
  }
  .vditor-panel--left.vditor-panel--arrow:before {
    right: 17px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .vditor-toolbar__item .vditor-tooltipped:hover {
    color: var(--toolbar-icon-hover-color);
  }
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.vditor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
}
.vditor--fullscreen {
  position: fixed;
  top: 0;
  width: 100% !important;
  left: 0;
  height: 100vh !important;
  z-index: 90;
  border-radius: 0;
}
.vditor-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 60px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  position: relative;
}
.vditor-preview {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  overflow: auto;
  margin-left: -1px;
  border-left: 1px solid var(--border-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0 0 3px 0;
  background-color: var(--textarea-background-color);
}
.vditor-preview::-webkit-scrollbar {
  display: none;
}
.vditor-preview__action {
  text-align: center;
  padding: 10px;
  background-color: var(--toolbar-background-color);
}
.vditor-preview__action button {
  background-color: var(--toolbar-background-color);
  color: var(--toolbar-icon-color);
  line-height: 20px;
  border: 0;
  margin: 0 10px;
  cursor: pointer;
  padding: 0 7px;
  font-size: 12px;
}
.vditor-preview__action button.vditor-preview__action--current,
.vditor-preview__action button:hover {
  color: var(--toolbar-icon-hover-color);
  background-color: var(--toolbar-background-color);
}
.vditor-preview__action button:focus {
  outline: none;
}
.vditor-preview__action button svg {
  fill: currentColor;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}
.vditor-preview > .vditor-reset {
  padding: 10px;
  margin: 0 auto;
}
.vditor-preview img:not(.emoji) {
  cursor: pointer;
}
.vditor-devtools {
  display: none;
  background-color: var(--textarea-background-color);
  overflow: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  -webkit-box-shadow: inset 1px 0 var(--border-color);
          box-shadow: inset 1px 0 var(--border-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0 0 3px 0;
  padding: 10px;
}
.vditor-counter {
  padding: 3px;
  color: var(--toolbar-icon-color);
  background-color: var(--count-background-color);
  border-radius: 3px;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  float: right;
  margin: 8px 3px 0 0;
}
.vditor-counter--error {
  color: #d23f31;
  background-color: rgba(210, 63, 49, 0.1);
}
.vditor-resize {
  padding: 3px 0;
  cursor: row-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  position: absolute;
  width: 100%;
}
.vditor-resize--top {
  top: -3px;
}
.vditor-resize--bottom {
  bottom: -3px;
}
.vditor-resize > div {
  height: 3px;
  background-color: var(--resize-background-color);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.vditor-resize:hover > div,
.vditor-resize--selected > div {
  background-color: var(--resize-hover-background-color);
}
.vditor-resize:hover svg,
.vditor-resize--selected svg {
  color: var(--resize-hover-icon-color);
}
.vditor-resize svg {
  fill: currentColor;
  stroke-width: 0;
  stroke: currentColor;
  width: 13px;
  height: 3px;
  display: block;
  margin: 0 auto;
  color: var(--resize-icon-color);
}
.vditor-upload {
  position: absolute;
  height: 3px;
  left: 0;
  top: -2px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-color: #4285f4;
}
.vditor-tip {
  position: absolute;
  font-size: 12px;
  top: 10px;
  -webkit-animation-duration: 0.15s;
          animation-duration: 0.15s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  left: 50%;
  z-index: 5;
}
.vditor-tip--show {
  display: block;
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}
.vditor-tip__content {
  text-align: left;
  display: inline-block;
  line-height: 16px;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--toolbar-background-color);
  position: relative;
  margin-left: -50%;
  color: var(--toolbar-icon-color);
  max-width: 100%;
  -webkit-box-shadow: var(--panel-shadow);
          box-shadow: var(--panel-shadow);
}
.vditor-tip__content ul {
  margin: 2px 0;
  padding: 0 0 0 18px;
}
.vditor-tip__content a {
  color: #4285f4;
}
.vditor-tip__close {
  position: absolute;
  color: var(--toolbar-icon-color);
  top: -7px;
  right: -15px;
  font-weight: bold;
  cursor: pointer;
}
.vditor-tip__close:hover {
  color: var(--toolbar-icon-hover-color);
}
.vditor-img {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 100;
}
.vditor-img__bar {
  border-bottom: 1px solid var(--border-color);
  background-color: var(--toolbar-background-color);
  text-align: center;
  height: 36px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.vditor-img__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  margin-left: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  color: var(--toolbar-icon-color);
}
.vditor-img__btn:hover {
  color: var(--toolbar-icon-hover-color);
}
.vditor-img__btn svg {
  height: 14px;
  width: 14px;
  margin-right: 8px;
  fill: currentColor;
}
.vditor-img__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: var(--textarea-background-color);
  overflow: auto;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}
.vditor-img__img img {
  max-width: none;
}
.vditor-hint {
  background-color: var(--panel-background-color);
  position: absolute;
  -webkit-box-shadow: var(--panel-shadow);
          box-shadow: var(--panel-shadow);
  border-radius: 3px;
  padding: 5px 0;
  z-index: 4;
  line-height: 20px;
  list-style: none;
  font-size: 12px;
  margin: 0;
  max-width: 250px;
  min-width: 80px;
  display: none;
}
.vditor-hint .vditor-hint {
  margin-top: -31px;
  left: 100%;
  right: auto;
}
.vditor-hint .vditor-hint.vditor-panel--left {
  right: 100%;
  left: auto;
}
.vditor-hint button {
  color: var(--toolbar-icon-color);
  display: block;
  padding: 3px 10px;
  border: 0;
  border-radius: 0;
  line-height: 20px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: left;
  margin: 0;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.vditor-hint button:focus {
  outline: none;
}
.vditor-hint--current,
.vditor-hint button:not(.vditor-menu--disabled):hover {
  background-color: var(--toolbar-background-color) !important;
  color: var(--toolbar-icon-hover-color) !important;
}
.vditor-hint__emoji {
  font-size: 16px;
  float: left;
  margin-right: 3px;
}
.vditor-hint img {
  height: 20px;
  width: 20px;
  float: left;
  margin-right: 3px;
}
.vditor-reset {
  color: #24292e;
  -webkit-font-variant-ligatures: no-common-ligatures;
          font-variant-ligatures: no-common-ligatures;
  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  word-wrap: break-word;
  overflow: auto;
  line-height: 1.5;
  font-size: 16px;
  word-break: break-word;
}
.vditor-reset--anchor {
  padding-left: 20px;
}
.vditor-reset--error {
  color: #d23f31;
  font-size: 12px;
  display: block;
  line-height: 16px;
}
.vditor-reset ul ul ul {
  list-style-type: square;
}
.vditor-reset ul ul {
  list-style-type: circle;
}
.vditor-reset ul {
  list-style-type: disc;
}
.vditor-reset ul,
.vditor-reset ol {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}
.vditor-reset li + li {
  margin-top: 0.25em;
}
.vditor-reset li p {
  margin-top: 16px;
}
.vditor-reset audio {
  max-width: 100%;
}
.vditor-reset audio:focus {
  outline: none;
}
.vditor-reset video {
  max-height: 90vh;
  max-width: 100%;
}
.vditor-reset img {
  max-width: 100%;
}
.vditor-reset img.emoji {
  cursor: auto;
  max-width: 20px;
  vertical-align: sub;
}
.vditor-reset figure.vditor-image {
  margin: 0 0 16px;
  text-align: center;
}
.vditor-reset figure.vditor-image figcaption {
  font-size: 0.875em;
  margin-top: 4px;
  opacity: 0.65;
  white-space: pre-wrap;
}
.vditor-reset span.vditor-image[data-image-caption] {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  vertical-align: top;
}
.vditor-reset span.vditor-image[data-image-caption]::after {
  content: attr(data-image-caption);
  display: block;
  font-size: 0.875em;
  line-height: 1.5;
  margin-top: 4px;
  opacity: 0.65;
  white-space: pre-wrap;
}
.vditor-reset h1,
.vditor-reset h2,
.vditor-reset h3,
.vditor-reset h4,
.vditor-reset h5,
.vditor-reset h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.vditor-reset h1:hover .vditor-anchor svg,
.vditor-reset h2:hover .vditor-anchor svg,
.vditor-reset h3:hover .vditor-anchor svg,
.vditor-reset h4:hover .vditor-anchor svg,
.vditor-reset h5:hover .vditor-anchor svg,
.vditor-reset h6:hover .vditor-anchor svg {
  visibility: visible;
}
.vditor-reset h1 {
  font-size: 1.75em;
}
.vditor-reset h2 {
  font-size: 1.55em;
}
.vditor-reset h3 {
  font-size: 1.38em;
}
.vditor-reset h4 {
  font-size: 1.25em;
}
.vditor-reset h5 {
  font-size: 1.13em;
}
.vditor-reset h6 {
  font-size: 1em;
}
.vditor-reset hr {
  height: 2px;
  padding: 0;
  margin: 24px 0;
  background-color: #eaecef;
  border: 0;
}
.vditor-reset p {
  margin-top: 0;
  margin-bottom: 16px;
}
.vditor-reset blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #eaecef;
  margin: 0 0 16px 0;
}
.vditor-reset blockquote > :first-child {
  margin-top: 0;
}
.vditor-reset blockquote > :last-child {
  margin-bottom: 0;
}
.vditor-reset ins > iframe {
  border: 0;
}
.vditor-reset iframe {
  border: 1px solid #d1d5da;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.vditor-reset iframe.iframe__video {
  min-width: 80%;
  min-height: 36vh;
}
.vditor-reset table {
  border-collapse: collapse;
  empty-cells: show;
  margin-bottom: 16px;
  overflow: auto;
  border-spacing: 0;
  display: block;
  word-break: keep-all;
  width: 100%;
}
.vditor-reset table tr {
  background-color: #fafbfc;
  border-top: 1px solid #c6cbd1;
}
.vditor-reset table td,
.vditor-reset table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  word-break: normal;
  white-space: nowrap;
}
.vditor-reset table td:first-child::after,
.vditor-reset table th:first-child::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  min-height: 24px;
}
.vditor-reset table th {
  font-weight: 600;
}
.vditor-reset table tbody tr:nth-child(2n) {
  background-color: #fff;
}
.vditor-reset code:not(.hljs):not(.highlight-chroma) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
  font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  word-break: break-word;
  background-size: 20px 20px;
  white-space: pre-wrap;
}
.vditor-reset pre {
  margin: 1em 0;
}
.vditor-reset pre > code {
  margin: 0;
  font-size: 85%;
  padding: 0.5em;
  border-radius: 5px;
  display: block;
  overflow: auto;
  white-space: pre;
  font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  background-size: 20px 20px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
  word-break: initial;
  word-wrap: normal;
}
.vditor-reset pre:hover div.vditor-copy {
  display: block;
}
.vditor-reset .language-math,
.vditor-reset .language-echarts,
.vditor-reset .language-mindmap,
.vditor-reset .language-plantuml,
.vditor-reset .language-mermaid,
.vditor-reset .language-smiles,
.vditor-reset .language-markmap,
.vditor-reset .language-abc,
.vditor-reset .language-flowchart,
.vditor-reset .language-graphviz,
.vditor-reset .language-wavedrom {
  margin-bottom: 16px;
}
.vditor-reset .language-math mjx-container:focus {
  outline: none;
  cursor: context-menu;
}
.vditor-reset .language-math .katex-display > .katex > .katex-html > .tag {
  display: inline-block;
  font-size: 1.21rem;
  right: 2px;
}
.vditor-reset .language-echarts,
.vditor-reset .language-mindmap {
  overflow: hidden;
  height: 420px;
}
.vditor-reset .language-mermaid,
.vditor-reset .language-markmap,
.vditor-reset .language-flowchart,
.vditor-reset .language-graphviz,
.vditor-reset .language-wavedrom {
  text-align: center;
}
.vditor-reset .language-graphviz parsererror {
  overflow: auto;
}
.vditor-reset kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #24292e;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #d1d5da;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 #d1d5da;
          box-shadow: inset 0 -1px 0 #d1d5da;
}
.vditor-reset summary {
  cursor: pointer;
}
.vditor-reset summary:focus {
  outline: none;
}
.vditor-reset svg {
  height: auto;
  width: auto;
  stroke-width: initial;
}
.vditor-reset p:last-child,
.vditor-reset blockquote:last-child,
.vditor-reset pre:last-child,
.vditor-reset ul:last-child,
.vditor-reset ol:last-child,
.vditor-reset hr:last-child {
  margin-bottom: 0;
}
.vditor-comment {
  border-bottom: 2px solid #f8e6ab;
}
.vditor-comment--focus,
.vditor-comment--hover {
  background-color: #faf1d1;
  border-bottom: 2px solid #ffc60a;
}
.vditor-comment--focus .vditor-comment,
.vditor-comment--hover .vditor-comment {
  border-bottom: 2px solid #ffc60a;
}
.vditor-task {
  list-style: none !important;
  word-break: break-all;
}
.vditor-task input {
  margin: 0 0.2em 0.25em -1.6em;
  font-size: 12px;
  vertical-align: middle;
}
.vditor-copy {
  position: relative;
  display: none;
  z-index: 1;
}
.vditor-copy textarea {
  position: absolute;
  left: -100000px;
  height: 10px;
}
.vditor-copy span {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 0.5em;
}
.vditor-copy svg {
  color: #586069;
  height: 14px;
  width: 14px !important;
  display: block;
  fill: currentColor;
}
.vditor-linenumber {
  padding-left: 4em !important;
  position: relative;
}
.vditor-linenumber__rows {
  position: absolute;
  pointer-events: none;
  top: 1em;
  left: 0;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  -webkit-user-select: none;
     -moz-user-select: none;
          -ms-user-select: none;
      user-select: none;
  counter-reset: linenumber;
}
.vditor-linenumber__rows > span {
  pointer-events: none;
  display: block;
}
.vditor-linenumber__rows > span::before {
  counter-increment: linenumber;
  content: counter(linenumber);
  color: rgba(158, 150, 150, 0.38);
  display: block;
  padding-right: 1em;
  text-align: right;
}
.vditor-speech {
  position: absolute;
  display: none;
  background-color: #f6f8fa;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  padding: 3px;
  cursor: pointer;
  color: #586069;
}
.vditor-speech:hover,
.vditor-speech--current {
  color: #4285f4;
}
.vditor-speech svg {
  height: 14px;
  width: 14px;
  fill: currentColor;
  display: block;
  stroke-width: 0;
  stroke: currentColor;
}
.vditor-anchor {
  margin-left: 5px;
}
.vditor-anchor--left {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
}
.vditor-anchor svg {
  visibility: hidden;
}
.vditor-anchor:hover svg {
  visibility: visible;
}
.vditor-anchor:focus {
  outline: none;
}
.vditor-linkcard {
  margin: 31px auto 16px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  max-width: 768px;
  padding: 0 10px;
}
.vditor-linkcard a {
  border-radius: 3px;
  background-color: #f6f8fa;
  overflow: hidden;
  max-height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.vditor-linkcard a:hover {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
  text-decoration: none;
}
.vditor-linkcard a:visited .vditor-linkcard__abstract {
  color: rgba(88, 96, 105, 0.36);
}
.vditor-linkcard__info {
  padding: 10px;
  min-width: 200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.vditor-linkcard__title {
  font-size: 14px;
  font-weight: 400;
  color: #24292e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.vditor-linkcard__title img {
  cursor: pointer;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 5px;
}
.vditor-linkcard__abstract {
  word-wrap: break-word;
  word-break: break-all;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 13px;
  color: #586069;
  margin: 5px 0;
}
.vditor-linkcard__site {
  font-size: 12px;
  color: #4285f4;
}
.vditor-linkcard__image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 250px;
  min-width: 126px;
  cursor: pointer;
  background-color: rgba(88, 96, 105, 0.36);
}
.vditor-footnotes__goto-ref {
  text-decoration: none;
}
.vditor-toc {
  margin-bottom: 16px;
  -webkit-user-select: text;
     -moz-user-select: text;
          -ms-user-select: text;
      user-select: text;
  color: #4285f4;
}
.vditor-toc .vditor-outline__action {
  display: none;
}
.vditor-toc ul {
  list-style: none !important;
  padding-left: 1em;
}
.vditor-toc > ul {
  padding-left: 0;
}
.vditor-toc span {
  cursor: pointer;
}
.vditor-toc li > span > svg {
  width: 0;
  height: 0;
}
.vditor-outline {
  width: 250px;
  border-right: 1px solid var(--border-color);
  background-color: var(--panel-background-color);
  display: none;
  overflow: auto;
}
.vditor-outline--right {
  border-right: 0;
  border-left: 1px solid var(--border-color);
}
.vditor-outline::-webkit-scrollbar {
  display: none;
}
.vditor-outline ul {
  list-style: none !important;
  padding-left: 1em;
  margin: 0;
}
.vditor-outline__content > ul {
  padding-left: 0;
}
.vditor-outline li > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--textarea-text-color);
}
.vditor-outline li > span > svg {
  height: 10px;
  width: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.vditor-outline li > span:hover {
  color: var(--toolbar-icon-hover-color);
}
.vditor-outline li > span > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vditor-outline__title {
  border-bottom: 1px dashed var(--border-color);
  padding: 5px 10px;
  color: var(--toolbar-icon-color);
  font-size: 12px;
}
.vditor-outline__action {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  fill: currentColor;
  margin-right: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.vditor-outline__action--close {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.vditor-reset .callout,
.vditor-wysiwyg blockquote.callout,
.vditor-ir blockquote.callout {
  --callout-color: var(--callout-note-color, #0969da);
  --callout-background-color: var(--callout-note-background-color, rgba(9, 105, 218, 0.08));
  position: relative;
  margin: 0 0 16px;
  padding: 0.75em 1em;
  color: inherit;
  background-color: var(--callout-background-color);
  border: 0;
  border-left: 0.25em solid var(--callout-color);
}
.vditor-reset .callout[data-subtype="TIP"],
.vditor-wysiwyg blockquote.callout[data-subtype="TIP"],
.vditor-ir blockquote.callout[data-subtype="TIP"] {
  --callout-color: var(--callout-tip-color, #1a7f37);
  --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
}
.vditor-reset .callout[data-subtype="IMPORTANT"],
.vditor-wysiwyg blockquote.callout[data-subtype="IMPORTANT"],
.vditor-ir blockquote.callout[data-subtype="IMPORTANT"] {
  --callout-color: var(--callout-important-color, #8250df);
  --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
}
.vditor-reset .callout[data-subtype="WARNING"],
.vditor-wysiwyg blockquote.callout[data-subtype="WARNING"],
.vditor-ir blockquote.callout[data-subtype="WARNING"] {
  --callout-color: var(--callout-warning-color, #9a6700);
  --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
}
.vditor-reset .callout[data-subtype="CAUTION"],
.vditor-wysiwyg blockquote.callout[data-subtype="CAUTION"],
.vditor-ir blockquote.callout[data-subtype="CAUTION"] {
  --callout-color: var(--callout-caution-color, #cf222e);
  --callout-background-color: var(--callout-caution-background-color, rgba(207, 34, 46, 0.08));
}
.vditor-reset .callout > .callout-info,
.vditor-wysiwyg blockquote.callout > .callout-info,
.vditor-ir blockquote.callout > .callout-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 1.5em;
  margin: 0 0 0.5em;
  color: var(--callout-color);
  font-weight: 600;
}
.vditor-reset .callout > .callout-info .callout-icon,
.vditor-wysiwyg blockquote.callout > .callout-info .callout-icon,
.vditor-ir blockquote.callout > .callout-info .callout-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.35em;
}
.vditor-reset .callout > .callout-info .callout-title,
.vditor-wysiwyg blockquote.callout > .callout-info .callout-title,
.vditor-ir blockquote.callout > .callout-info .callout-title {
  min-width: 1px;
}
.vditor-reset .callout > .callout-info .callout-img,
.vditor-wysiwyg blockquote.callout > .callout-info .callout-img,
.vditor-ir blockquote.callout > .callout-info .callout-img,
.vditor-reset .callout > .callout-info > .callout-img,
.vditor-wysiwyg blockquote.callout > .callout-info > .callout-img,
.vditor-ir blockquote.callout > .callout-info > .callout-img {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.35em;
  -o-object-fit: contain;
     object-fit: contain;
}
.vditor-reset .callout > .callout-content > :last-child,
.vditor-wysiwyg blockquote.callout > .callout-content > :last-child,
.vditor-ir blockquote.callout > .callout-content > :last-child,
.vditor-reset .callout > :last-child,
.vditor-wysiwyg blockquote.callout > :last-child,
.vditor-ir blockquote.callout > :last-child {
  margin-bottom: 0;
}
.vditor-wysiwyg__callout-marker {
  display: none;
}
.vditor-wysiwyg {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  width: 100%;
  min-width: 1px;
}
.vditor-wysiwyg pre.vditor-reset {
  background-color: var(--panel-background-color);
  margin: 0;
  white-space: pre-wrap;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.vditor-wysiwyg pre.vditor-reset[contenteditable="false"] {
  opacity: 0.3;
  cursor: not-allowed;
}
.vditor-wysiwyg pre.vditor-reset:empty::before {
  content: attr(placeholder);
  color: var(--second-color);
}
.vditor-wysiwyg pre.vditor-reset:focus {
  outline: none;
  background-color: var(--textarea-background-color);
}
.vditor-wysiwyg pre.vditor-reset:after {
  content: "";
  height: var(--editor-bottom);
  display: block;
}
.vditor-wysiwyg blockquote:empty::before,
.vditor-wysiwyg pre > code:empty::before,
.vditor-wysiwyg p:empty::before,
.vditor-wysiwyg h1:empty::after,
.vditor-wysiwyg h2:empty::after,
.vditor-wysiwyg h3:empty::after,
.vditor-wysiwyg h4:empty::after,
.vditor-wysiwyg h5:empty::after,
.vditor-wysiwyg h6:empty::after {
  content: ' ';
}
.vditor-wysiwyg code[data-marker="`"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.vditor-wysiwyg__block pre:first-child {
  margin-bottom: -1em;
}
.vditor-wysiwyg__block pre:first-child code {
  color: var(--textarea-text-color);
  height: auto;
  text-align: left;
}
.vditor-wysiwyg__block pre:last-child {
  margin-bottom: 1em;
}
.vditor-wysiwyg__preview {
  cursor: pointer;
  white-space: initial;
  min-height: 27px;
}
.vditor-wysiwyg > .vditor-reset > h1:before,
.vditor-wysiwyg > .vditor-reset > h2:before,
.vditor-wysiwyg > .vditor-reset > h3:before,
.vditor-wysiwyg > .vditor-reset > h4:before,
.vditor-wysiwyg > .vditor-reset > h5:before,
.vditor-wysiwyg > .vditor-reset > h6:before,
.vditor-wysiwyg div.vditor-wysiwyg__block:before,
.vditor-wysiwyg div[data-type="link-ref-defs-block"]:before,
.vditor-wysiwyg div[data-type="footnotes-block"]:before,
.vditor-wysiwyg .vditor-toc:before {
  float: left;
  padding-right: 4px;
  margin-left: -29px;
  content: 'H1';
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--second-color);
}
.vditor-wysiwyg > .vditor-reset > h2:before {
  content: 'H2';
}
.vditor-wysiwyg > .vditor-reset > h3:before {
  content: 'H3';
}
.vditor-wysiwyg > .vditor-reset > h4:before {
  content: 'H4';
}
.vditor-wysiwyg > .vditor-reset > h5:before {
  content: 'H5';
}
.vditor-wysiwyg > .vditor-reset > h6:before {
  content: 'H6';
}
.vditor-wysiwyg div[data-type="link-ref-defs-block"]:before {
  content: '"A"';
}
.vditor-wysiwyg div[data-type="footnotes-block"]:before {
  content: '^F';
}
.vditor-wysiwyg div.vditor-wysiwyg__block:before {
  content: "</>";
}
.vditor-wysiwyg div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
  content: "F";
}
.vditor-wysiwyg div.vditor-wysiwyg__block[data-type="math-block"]:before {
  content: "$$";
}
.vditor-wysiwyg .vditor-toc:before {
  content: "ToC";
}
.vditor-wysiwyg hr {
  display: inline-block;
  margin: 12px 0;
  width: 100%;
}
.vditor-wysiwyg details {
  white-space: initial;
}
.vditor-wysiwyg a {
  cursor: pointer;
}
.vditor-wysiwyg span[data-type="backslash"] > span {
  display: none;
  color: var(--second-color);
}
.vditor-wysiwyg span[data-type="link-ref"],
.vditor-wysiwyg sup[data-type="footnotes-ref"] {
  color: #4285f4;
}
.vditor-wysiwyg span[data-type="toc-h"] {
  color: #4285f4;
  text-decoration: underline;
}
.vditor-wysiwyg div[data-type="footnotes-block"] {
  border-top: 2px solid var(--heading-border-color);
  padding-top: 24px;
  margin-top: 24px;
}
.vditor-wysiwyg div[data-type="link-ref-defs-block"] {
  color: var(--blockquote-color);
}
.vditor-wysiwyg__mobile-toolbar {
  display: none;
}
@media screen and (max-width: 520px) {
  .vditor-wysiwyg__mobile-toolbar {
    display: block;
    float: left;
    height: 21px;
    position: relative;
    width: 23px;
  }
  .vditor-wysiwyg__mobile-actions {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    left: 0;
    padding: 5px;
    top: 26px;
    white-space: normal;
  }
  .vditor-wysiwyg__mobile-actions.vditor-panel--left {
    left: auto;
    right: 0;
  }
  .vditor-wysiwyg__mobile-actions--open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .vditor-wysiwyg h1:before,
  .vditor-wysiwyg h2:before,
  .vditor-wysiwyg h3:before,
  .vditor-wysiwyg h4:before,
  .vditor-wysiwyg h5:before,
  .vditor-wysiwyg h6:before,
  .vditor-wysiwyg div.vditor-wysiwyg__block:before,
  .vditor-wysiwyg div[data-type="link-ref-defs-block"]:before,
  .vditor-wysiwyg div[data-type="footnotes-block"]:before,
  .vditor-wysiwyg .vditor-toc:before {
    content: none;
  }
}
.vditor-ir {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  position: relative;
  width: 100%;
}
.vditor-ir__node[data-type="code-block"]:before,
.vditor-ir__node[data-type="code-block"]:after,
.vditor-ir__node[data-type="yaml-front-matter"]:before,
.vditor-ir__node[data-type="yaml-front-matter"]:after,
.vditor-ir__node[data-type="math-block"]:before,
.vditor-ir__node[data-type="math-block"]:after {
  content: ' ';
  color: var(--second-color);
}
.vditor-ir__node:not(.vditor-ir__node--expand) .vditor-ir__marker {
  padding: 0 !important;
}
.vditor-ir__node:not(.vditor-ir__node--expand)[data-type="a"] {
  cursor: pointer;
}
.vditor-ir__node[data-type="link-ref"],
.vditor-ir__node[data-type="footnotes-ref"] {
  color: #4285f4;
}
.vditor-ir__node[data-type="html-block"] {
  margin-bottom: 1em;
}
.vditor-ir__node .vditor-ir__marker {
  width: 0;
  overflow: hidden;
  display: inline-block;
  height: 0;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.vditor-ir__node--hidden .vditor-ir__marker {
  visibility: hidden;
}
.vditor-ir__node--expand .vditor-ir__marker {
  color: var(--second-color);
  display: inline;
  height: auto;
  width: auto;
}
.vditor-ir__node--expand .vditor-ir__marker--hide {
  display: none;
}
.vditor-ir__node--expand .vditor-ir__marker--heading {
  color: var(--ir-heading-color);
}
.vditor-ir__node--expand .vditor-ir__marker--bi {
  color: var(--ir-bi-color);
}
.vditor-ir__node--expand .vditor-ir__marker--link {
  color: var(--ir-link-color);
}
.vditor-ir__node--expand .vditor-ir__marker--title {
  color: var(--ir-title-color);
}
.vditor-ir__node--expand .vditor-ir__marker--bracket {
  color: var(--ir-bracket-color);
  text-decoration: underline;
}
.vditor-ir__node--expand .vditor-ir__marker--paren {
  color: var(--ir-paren-color);
}
.vditor-ir__node--expand .vditor-ir__marker--info {
  color: var(--ir-heading-color);
}
.vditor-ir__node--expand .vditor-ir__marker--pre code {
  color: var(--textarea-text-color);
  height: auto;
  text-align: left;
}
.vditor-ir__node--expand[data-type="code-block"]:before,
.vditor-ir__node--expand[data-type="code-block"]:after {
  content: '```';
}
.vditor-ir__node--expand[data-type="yaml-front-matter"]:before,
.vditor-ir__node--expand[data-type="yaml-front-matter"]:after {
  content: '---';
}
.vditor-ir__node--expand[data-type="math-block"]:before,
.vditor-ir__node--expand[data-type="math-block"]:after {
  content: '$$';
}
.vditor-ir__node span[data-type="code-block-open-marker"],
.vditor-ir__node span[data-type="code-block-close-marker"],
.vditor-ir__node span[data-type="yaml-front-matter-open-marker"],
.vditor-ir__node span[data-type="yaml-front-matter-close-marker"],
.vditor-ir__node span[data-type="math-block-open-marker"],
.vditor-ir__node span[data-type="math-block-close-marker"] {
  display: none;
}
.vditor-ir__preview {
  cursor: pointer;
  white-space: initial;
  min-height: 27px;
}
.vditor-ir__link {
  color: var(--ir-bracket-color);
  text-decoration: underline;
}
.vditor-ir pre.vditor-reset {
  background-color: var(--panel-background-color);
  margin: 0;
  white-space: pre-wrap;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.vditor-ir pre.vditor-reset[contenteditable="false"] {
  opacity: 0.3;
  cursor: not-allowed;
}
.vditor-ir pre.vditor-reset:empty::before {
  content: attr(placeholder);
  color: var(--second-color);
}
.vditor-ir pre.vditor-reset:focus {
  outline: none;
  background-color: var(--textarea-background-color);
}
.vditor-ir pre.vditor-reset:after {
  content: "";
  height: var(--editor-bottom);
  display: block;
}
.vditor-ir pre.vditor-reset pre {
  margin: 0;
}
.vditor-ir hr {
  display: inline-block;
  margin: 12px 0;
  width: 100%;
}
.vditor-ir blockquote:empty::before,
.vditor-ir pre > code:empty::before,
.vditor-ir p:empty::before,
.vditor-ir h1:empty::after,
.vditor-ir h2:empty::after,
.vditor-ir h3:empty::after,
.vditor-ir h4:empty::after,
.vditor-ir h5:empty::after,
.vditor-ir h6:empty::after {
  content: ' ';
}
.vditor-ir .vditor-reset > h1:before,
.vditor-ir .vditor-reset > h2:before,
.vditor-ir .vditor-reset > h3:before,
.vditor-ir .vditor-reset > h4:before,
.vditor-ir .vditor-reset > h5:before,
.vditor-ir .vditor-reset > h6:before,
.vditor-ir div[data-type="link-ref-defs-block"]:before,
.vditor-ir div[data-type="footnotes-block"]:before,
.vditor-ir .vditor-toc:before {
  float: left;
  padding-right: 4px;
  margin-left: -29px;
  content: 'H1';
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--second-color);
}
.vditor-ir .vditor-reset > h2:before {
  content: 'H2';
}
.vditor-ir .vditor-reset > h3:before {
  content: 'H3';
}
.vditor-ir .vditor-reset > h4:before {
  content: 'H4';
}
.vditor-ir .vditor-reset > h5:before {
  content: 'H5';
}
.vditor-ir .vditor-reset > h6:before {
  content: 'H6';
}
.vditor-ir div[data-type="link-ref-defs-block"] {
  color: var(--blockquote-color);
}
.vditor-ir div[data-type="link-ref-defs-block"]:before {
  content: '"A"';
}
.vditor-ir div[data-type="footnotes-block"] {
  border-top: 2px solid var(--heading-border-color);
  padding-top: 24px;
  margin-top: 24px;
}
.vditor-ir div[data-type="footnotes-block"]:before {
  content: '^F';
}
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > ul,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > ol,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > p,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > blockquote,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > pre,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > table,
.vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > hr {
  margin-left: 8px;
}
.vditor-ir .vditor-toc:before {
  content: "ToC";
}
.vditor-ir .vditor-toc span[data-type="toc-h"] {
  color: #4285f4;
  text-decoration: underline;
}
@media screen and (max-width: 520px) {
  .vditor-ir h1:before,
  .vditor-ir h2:before,
  .vditor-ir h3:before,
  .vditor-ir h4:before,
  .vditor-ir h5:before,
  .vditor-ir h6:before,
  .vditor-ir div[data-type="link-ref-defs-block"]:before,
  .vditor-ir div[data-type="footnotes-block"]:before,
  .vditor-ir .vditor-toc:before {
    content: none;
  }
}
.vditor-sv {
  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  margin: 0 1px 0 0;
  overflow: auto;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 1px;
  border: 0;
  resize: none;
  padding: 10px 9px 10px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: var(--panel-background-color);
  outline: 0 none;
  font-size: 16px;
  line-height: 22px;
  color: var(--textarea-text-color);
  border-radius: 0 0 3px 3px;
  -webkit-font-variant-ligatures: no-common-ligatures;
          font-variant-ligatures: no-common-ligatures;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
.vditor-sv:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.vditor-sv::-moz-placeholder {
  color: var(--second-color);
}
.vditor-sv::-webkit-input-placeholder {
  color: var(--second-color);
}
.vditor-sv:-ms-input-placeholder {
  color: var(--second-color);
}
.vditor-sv::-ms-input-placeholder {
  color: var(--second-color);
}
.vditor-sv::placeholder {
  color: var(--second-color);
}
.vditor-sv:focus {
  background-color: var(--textarea-background-color);
}
}
@layer base{

.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    -webkit-box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  -webkit-box-shadow: none;
          box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    -ms-touch-action: none;
        touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}
}
@layer base{
:root{--tagify-dd-color-primary:rgb(53,149,246);--tagify-dd-bg-color:white;--tagify-dd-item-pad:.3em .5em;--tagify-dd-max-height:300px}.tagify{--tags-disabled-bg:#F1F1F1;--tags-border-color:#DDD;--tags-hover-border-color:#CCC;--tags-focus-border-color:#3595f6;--tag-border-radius:3px;--tag-bg:#E5E5E5;--tag-hover:#D3E2E2;--tag-text-color:black;--tag-text-color--edit:black;--tag-pad:0.3em 0.5em;--tag-inset-shadow-size:1.1em;--tag-invalid-color:#D39494;--tag-invalid-bg:rgba(211, 148, 148, 0.5);--tag--min-width:1ch;--tag--max-width:100%;--tag-hide-transition:0.3s;--tag-remove-bg:rgba(211, 148, 148, 0.3);--tag-remove-btn-color:black;--tag-remove-btn-bg:none;--tag-remove-btn-bg--hover:#c77777;--input-color:inherit;--placeholder-color:rgba(0, 0, 0, 0.4);--placeholder-color-focus:rgba(0, 0, 0, 0.25);--loader-size:.8em;--readonly-striped:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;border:1px solid var(--tags-border-color);padding:0;line-height:0;outline:0;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:.1s;transition:.1s}@-webkit-keyframes tags--bump{30%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes tags--bump{30%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@-webkit-keyframes rotateLoader{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotateLoader{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.tagify:has([contenteditable=true]){cursor:text}.tagify:hover:not(.tagify--focus):not(.tagify--invalid){--tags-border-color:var(--tags-hover-border-color)}.tagify[disabled]{background:var(--tags-disabled-bg);-webkit-filter:saturate(0);filter:saturate(0);opacity:.5;pointer-events:none}.tagify[disabled].tagify--select,.tagify[readonly].tagify--select{pointer-events:none}.tagify[disabled]:not(.tagify--mix):not(.tagify--select),.tagify[readonly]:not(.tagify--mix):not(.tagify--select){cursor:default}.tagify[disabled]:not(.tagify--mix):not(.tagify--select)>.tagify__input,.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div{padding:var(--tag-pad)}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before{-webkit-animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@-webkit-keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;-webkit-box-shadow:none;box-shadow:none;-webkit-filter:brightness(.95);filter:brightness(.95)}}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;-webkit-box-shadow:none;box-shadow:none;-webkit-filter:brightness(.95);filter:brightness(.95)}}.tagify[disabled] .tagify__tag__removeBtn,.tagify[readonly] .tagify__tag__removeBtn{display:none}.tagify--loading .tagify__input>br:last-child{display:none}.tagify--loading .tagify__input::before{content:none}.tagify--loading .tagify__input::after{content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;-webkit-animation:rotateLoader .4s infinite linear;animation:rotateLoader .4s infinite linear;content:""!important;margin:-2px 0 -2px .5em}.tagify--loading .tagify__input:empty::after{margin-left:0}.tagify+input,.tagify+textarea{position:absolute!important;left:-9999em!important;-webkit-transform:scale(0)!important;transform:scale(0)!important}.tagify__tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:var(--tag--max-width);margin-inline:5px 0;margin-block:5px;position:relative;z-index:1;outline:0;line-height:normal;cursor:default;-webkit-transition:.13s ease-out;transition:.13s ease-out}.tagify__tag>div{-webkit-box-flex:1;-ms-flex:1;flex:1;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:var(--tag-pad);color:var(--tag-text-color);line-height:inherit;border-radius:var(--tag-border-radius);white-space:nowrap;-webkit-transition:.13s ease-out;transition:.13s ease-out}.tagify__tag>div>*{white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top;min-width:var(--tag--min-width);max-width:var(--tag--max-width);-webkit-transition:.8s ease,.1s color;transition:.8s ease,.1s color}.tagify__tag>div>[contenteditable]{outline:0;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}.tagify__tag>div>:only-child{width:100%}.tagify__tag>div::before{content:"";position:absolute;border-radius:inherit;inset:var(--tag-bg-inset,0);z-index:-1;pointer-events:none;-webkit-transition:120ms ease;transition:120ms ease;-webkit-animation:tags--bump .3s ease-out 1;animation:tags--bump .3s ease-out 1;-webkit-box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset}.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{--tag-bg-inset:-2.5px;--tag-bg:var(--tag-hover)}.tagify__tag--loading{pointer-events:none}.tagify__tag--loading .tagify__tag__removeBtn{display:none}.tagify__tag--loading::after{--loader-size:.4em;content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;-webkit-animation:rotateLoader .4s infinite linear;animation:rotateLoader .4s infinite linear;margin:0 .5em 0 -.1em}.tagify__tag--flash div::before{-webkit-animation:none;animation:none}.tagify__tag--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:var(--tag-hide-transition);transition:var(--tag-hide-transition);pointer-events:none}.tagify__tag--hide>div>*{white-space:nowrap}.tagify__tag.tagify--noAnim>div::before{-webkit-animation:none;animation:none}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{opacity:.5}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{--tag-bg:var(--tag-invalid-bg);-webkit-transition:.2s;transition:.2s}.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}.tagify__tag[readonly]>div::before{-webkit-animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;-webkit-box-shadow:none;box-shadow:none;-webkit-filter:brightness(.95);filter:brightness(.95)}}.tagify__tag--editable>div{color:var(--tag-text-color--edit)}.tagify__tag--editable>div::before{-webkit-box-shadow:0 0 0 2px var(--tag-hover) inset!important;box-shadow:0 0 0 2px var(--tag-hover) inset!important}.tagify__tag--editable>.tagify__tag__removeBtn{pointer-events:none}.tagify__tag--editable>.tagify__tag__removeBtn::after{opacity:0;-webkit-transform:translateX(100%) translateX(5px);transform:translateX(100%) translateX(5px)}.tagify__tag--editable.tagify--invalid>div::before{-webkit-box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important;box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important}.tagify__tag__removeBtn{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50px;cursor:pointer;font:14px/1 Arial;background:var(--tag-remove-btn-bg);color:var(--tag-remove-btn-color);width:14px;height:14px;margin-inline:auto 4.6666666667px;overflow:hidden;-webkit-transition:.2s ease-out;transition:.2s ease-out}.tagify__tag__removeBtn::after{content:"×";-webkit-transition:.3s,color 0s;transition:.3s,color 0s}.tagify__tag__removeBtn:hover{color:#fff;background:var(--tag-remove-btn-bg--hover)}.tagify__tag__removeBtn:hover+div>span{opacity:.5}.tagify__tag__removeBtn:hover+div::before{-webkit-box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;-webkit-transition:-webkit-box-shadow .2s;transition:-webkit-box-shadow .2s;transition:box-shadow .2s;transition:box-shadow .2s, -webkit-box-shadow .2s}.tagify:not(.tagify--mix) .tagify__input br{display:none}.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}.tagify__input{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:inline-block;min-width:110px;margin:5px;padding:var(--tag-pad);line-height:normal;position:relative;white-space:pre-wrap;color:var(--input-color);-webkit-box-sizing:inherit;box-sizing:inherit}.tagify__input:empty::before{position:static}.tagify__input:focus{outline:0}.tagify__input:focus::before{-webkit-transition:.2s ease-out;transition:.2s ease-out;opacity:0;-webkit-transform:translatex(6px);transform:translatex(6px)}@supports (-ms-ime-align:auto){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{-webkit-transition:.2s ease-out;transition:.2s ease-out;opacity:1;-webkit-transform:none;transform:none;color:rgba(0,0,0,.25);color:var(--placeholder-color-focus)}@-moz-document url-prefix(){.tagify__input:focus:empty::after{display:none}}.tagify__input::before{content:attr(data-placeholder);height:1em;line-height:1em;margin:auto 0;z-index:1;color:var(--placeholder-color);white-space:nowrap;pointer-events:none;opacity:0;position:absolute}.tagify__input::after{content:attr(data-suggest);display:inline-block;vertical-align:middle;position:absolute;min-width:calc(100% - 1.5em);text-overflow:ellipsis;overflow:hidden;white-space:pre;color:var(--tag-text-color);opacity:.3;pointer-events:none;max-width:100px}.tagify__input .tagify__tag{margin:0 1px}.tagify--mix{display:block}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:1.5;display:block}.tagify--mix .tagify__input::before{height:auto;display:none;line-height:inherit}.tagify--mix .tagify__input::after{content:none}.tagify--select{cursor:default}.tagify--select::after{content:">";opacity:.5;position:absolute;top:50%;right:0;bottom:0;font:16px monospace;line-height:8px;height:8px;pointer-events:none;-webkit-transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.tagify--select[aria-expanded=true]::after{-webkit-transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2);transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}.tagify--select .tagify__tag{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:none;-webkit-margin-end:2em;margin-inline-end:2em;margin-block:0;padding-block:5px;cursor:text}.tagify--select .tagify__tag div::before{display:none}.tagify--select .tagify__tag+.tagify__input{display:none}.tagify--empty .tagify__input::before{-webkit-transition:.2s ease-out;transition:.2s ease-out;opacity:1;-webkit-transform:none;transform:none;display:inline-block;width:auto}.tagify--mix .tagify--empty .tagify__input::before{display:inline-block}.tagify--focus{--tags-border-color:var(--tags-focus-border-color);-webkit-transition:0s;transition:0s}.tagify--invalid{--tags-border-color:#D39494}.tagify__dropdown{position:absolute;z-index:9999;-webkit-transform:translateY(-1px);transform:translateY(-1px);border-top:1px solid var(--tagify-dd-color-primary);overflow:hidden}.tagify__dropdown[dir=rtl]{-webkit-transform:translate(-100%,-1px);transform:translate(-100%,-1px)}.tagify__dropdown[placement=top]{margin-top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1.1px;border-bottom-width:0}.tagify__dropdown[position=text]{-webkit-box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}.tagify__dropdown[position=text] .tagify__dropdown__wrapper{border-width:1px}.tagify__dropdown__wrapper{max-height:var(--tagify-dd-max-height);overflow:hidden;overflow-x:hidden;background:var(--tagify-dd-bg-color);border:1px solid;border-color:var(--tagify-dd-color-primary);border-bottom-width:1.5px;border-top-width:0;-webkit-box-shadow:0 2px 4px -2px rgba(0,0,0,.2);box-shadow:0 2px 4px -2px rgba(0,0,0,.2);-webkit-transition:.3s cubic-bezier(.5,0,.3,1),-webkit-transform .15s;transition:.3s cubic-bezier(.5,0,.3,1),-webkit-transform .15s;transition:.3s cubic-bezier(.5,0,.3,1),transform .15s;transition:.3s cubic-bezier(.5,0,.3,1),transform .15s,-webkit-transform .15s;-webkit-animation:dd-wrapper-show 0s .3s forwards;animation:dd-wrapper-show 0s .3s forwards}@-webkit-keyframes dd-wrapper-show{to{overflow-y:auto}}@keyframes dd-wrapper-show{to{overflow-y:auto}}.tagify__dropdown__header:empty{display:none}.tagify__dropdown__footer{display:inline-block;margin-top:.5em;padding:var(--tagify-dd-item-pad);font-size:.7em;font-style:italic;opacity:.5}.tagify__dropdown__footer:empty{display:none}.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;-webkit-transform:translateY(-1em);transform:translateY(-1em)}.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{-webkit-transform:translateY(2em);transform:translateY(2em)}.tagify__dropdown__item{-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--tagify-dd-item-pad);margin:1px;white-space:pre-wrap;cursor:pointer;border-radius:2px;position:relative;outline:0;max-height:60px;max-width:100%;line-height:normal}.tagify__dropdown__item--active{background:var(--tagify-dd-color-primary);color:#fff}.tagify__dropdown__item:active{-webkit-filter:brightness(105%);filter:brightness(105%)}.tagify__dropdown__item--hidden{padding-top:0;padding-bottom:0;margin:0 1px;pointer-events:none;overflow:hidden;max-height:0;-webkit-transition:var(--tagify-dd-item--hidden-duration,.3s)!important;transition:var(--tagify-dd-item--hidden-duration,.3s)!important}.tagify__dropdown__item--hidden>*{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0;-webkit-transition:inherit;transition:inherit}
}
/*
  Breakpoints, resolved at build time by postcss-custom-media.

  Custom properties can't be used inside media queries, so these are
  @custom-media rules instead. The values match the Tailwind 4 default
  --breakpoint-* values the app already used, which these replace.

  Usage: @media (--viewport-md) { ... }
*/
@layer base{

/*
  Element defaults and design tokens, per the thoughtbot CSS guide's roux
  structure. Import order is load-bearing while unconverted files remain in
  the same cascade layer: it preserves the bundle order the app shipped with
  before these files moved here (issue #10124).
*/
}
@layer base{

/*
  Design tokens for Hub, following the Roux structure and the thoughtbot CSS
  guide (--property--variant naming, primitives mapped to semantic names).

  During the Tailwind migration (issue #10124) the color primitives here must
  stay in sync with the frozen @theme block in application.postcss.css. This
  file is the source of truth; @theme is deleted in the final phase.

  Semantic tokens grow as views are converted: every recurring `X dark:Y`
  utility pair becomes one semantic token here with a `.dark` override.
*/

:root {
  /* Primitive colors */

  --color--black: #000;
  --color--white: #fff;

  --color--gray-50: #f9fafb;
  --color--gray-100: #f0f0f8;
  --color--gray-200: #e2e0ec;
  --color--gray-300: #cbcbd3;
  --color--gray-400: #a9a7af;
  --color--gray-500: #67676e;
  --color--gray-600: #4c4c54;
  --color--gray-700: #3d3e44;
  --color--gray-800: #29292c;
  --color--gray-900: #121213;

  --color--red-100: #fff5f5;
  --color--red-200: #fed7d7;
  --color--red-300: #feb2b2;
  --color--red-400: #fc8181;
  --color--red-500: #f56565;
  --color--red-600: #e03131;
  --color--red-700: #c53030;
  --color--red-800: #9b2c2c;
  --color--red-900: #742a2a;

  --color--orange-100: #fffaf0;
  --color--orange-200: #feebc8;
  --color--orange-300: #fbd38d;
  --color--orange-400: #f6ad55;
  --color--orange-500: #ed8936;
  --color--orange-600: #dd6b20;
  --color--orange-700: #c05621;
  --color--orange-800: #9c4221;
  --color--orange-900: #7b341e;

  --color--yellow-100: #fffff0;
  --color--yellow-200: #ffe7a3;
  --color--yellow-300: #ffc726;
  --color--yellow-400: #f6e05e;
  --color--yellow-500: #ecc94b;
  --color--yellow-600: #d69e2e;
  --color--yellow-700: #b7791f;
  --color--yellow-800: #975a16;
  --color--yellow-900: #744210;

  --color--green-100: #f0fff4;
  --color--green-200: #c6f6d5;
  --color--green-300: #9ae6b4;
  --color--green-400: #68d391;
  --color--green-500: #48bb78;
  --color--green-600: #38a169;
  --color--green-700: #2f855a;
  --color--green-800: #276749;
  --color--green-900: #22543d;

  --color--teal-100: #e6fffa;
  --color--teal-200: #b2f5ea;
  --color--teal-300: #81e6d9;
  --color--teal-400: #4fd1c5;
  --color--teal-500: #38b2ac;
  --color--teal-600: #319795;
  --color--teal-700: #2c7a7b;
  --color--teal-800: #285e61;
  --color--teal-900: #234e52;

  --color--blue-100: #ebf8ff;
  --color--blue-200: #bee3f8;
  --color--blue-300: #90cdf4;
  --color--blue-400: #63b3ed;
  --color--blue-500: #4299e1;
  --color--blue-600: #2e52e4;
  --color--blue-700: #2b6cb0;
  --color--blue-800: #2c5282;
  --color--blue-900: #2a4365;

  --color--indigo-100: #ebf4ff;
  --color--indigo-200: #c3dafe;
  --color--indigo-300: #a3bffa;
  --color--indigo-400: #7f9cf5;
  --color--indigo-500: #667eea;
  --color--indigo-600: #5a67d8;
  --color--indigo-700: #4c51bf;
  --color--indigo-800: #434190;
  --color--indigo-900: #3c366b;

  --color--purple-100: #faf5ff;
  --color--purple-200: #e9d8fd;
  --color--purple-300: #d6bcfa;
  --color--purple-400: #b794f4;
  --color--purple-500: #9f7aea;
  --color--purple-600: #6931e0;
  --color--purple-700: #6b46c1;
  --color--purple-800: #553c9a;
  --color--purple-900: #44337a;

  --color--pink-100: #fff5f7;
  --color--pink-200: #fed7e2;
  --color--pink-300: #fbb6ce;
  --color--pink-400: #f687b3;
  --color--pink-500: #ed64a6;
  --color--pink-600: #d53f8c;
  --color--pink-700: #b83280;
  --color--pink-800: #97266d;
  --color--pink-900: #702459;

  /* Primitive colors - dark mode ("night") palette */

  --color--night-white: #f8f8f2;

  --color--night-gray-100: #f0f0f8;
  --color--night-gray-200: #e2e0ec;
  --color--night-gray-300: #cbcbd3;
  --color--night-gray-400: #a9a7af;
  --color--night-gray-500: #67676e;
  --color--night-gray-600: #67676e;
  --color--night-gray-700: #4c4c54;
  --color--night-gray-800: #3d3e44;
  --color--night-gray-900: #29292c;

  --color--night-red-100: #fff5f5;
  --color--night-red-200: #fed7d7;
  --color--night-red-300: #feb2b2;
  --color--night-red-400: #fc8181;
  --color--night-red-500: #f56565;
  --color--night-red-600: #e03131;
  --color--night-red-700: #c53030;
  --color--night-red-800: #9b2c2c;
  --color--night-red-900: #742a2a;

  --color--night-orange-100: #fffaf0;
  --color--night-orange-200: #feebc8;
  --color--night-orange-300: #fbd38d;
  --color--night-orange-400: #f6ad55;
  --color--night-orange-500: #ed8936;
  --color--night-orange-600: #dd6b20;
  --color--night-orange-700: #c05621;
  --color--night-orange-800: #9c4221;
  --color--night-orange-900: #7b341e;

  --color--night-yellow-100: #fffff0;
  --color--night-yellow-200: #ffe7a3;
  --color--night-yellow-300: #ffc726;
  --color--night-yellow-400: #f6e05e;
  --color--night-yellow-500: #ecc94b;
  --color--night-yellow-600: #d69e2e;
  --color--night-yellow-700: #b7791f;
  --color--night-yellow-800: #975a16;
  --color--night-yellow-900: #744210;

  --color--night-green-100: #f0fff4;
  --color--night-green-200: #c6f6d5;
  --color--night-green-300: #9ae6b4;
  --color--night-green-400: #68d391;
  --color--night-green-500: #48bb78;
  --color--night-green-600: #38a169;
  --color--night-green-700: #2f855a;
  --color--night-green-800: #276749;
  --color--night-green-900: #22543d;

  --color--night-teal-100: #e6fffa;
  --color--night-teal-200: #b2f5ea;
  --color--night-teal-300: #81e6d9;
  --color--night-teal-400: #4fd1c5;
  --color--night-teal-500: #38b2ac;
  --color--night-teal-600: #319795;
  --color--night-teal-700: #2c7a7b;
  --color--night-teal-800: #285e61;
  --color--night-teal-900: #234e52;

  --color--night-blue-100: #ebf8ff;
  --color--night-blue-200: #bee3f8;
  --color--night-blue-300: #90cdf4;
  --color--night-blue-400: #63b3ed;
  --color--night-blue-500: #4299e1;
  --color--night-blue-600: #2e52e4;
  --color--night-blue-700: #2b6cb0;
  --color--night-blue-800: #2c5282;
  --color--night-blue-900: #2a4365;

  --color--night-indigo-100: #ebf4ff;
  --color--night-indigo-200: #c3dafe;
  --color--night-indigo-300: #a3bffa;
  --color--night-indigo-400: #7f9cf5;
  --color--night-indigo-500: #667eea;
  --color--night-indigo-600: #5a67d8;
  --color--night-indigo-700: #4c51bf;
  --color--night-indigo-800: #434190;
  --color--night-indigo-900: #3c366b;

  --color--night-purple-100: #faf5ff;
  --color--night-purple-200: #e9d8fd;
  --color--night-purple-300: #d6bcfa;
  --color--night-purple-400: #b794f4;
  --color--night-purple-500: #9f7aea;
  --color--night-purple-600: #6931e0;
  --color--night-purple-700: #6b46c1;
  --color--night-purple-800: #553c9a;
  --color--night-purple-900: #44337a;

  --color--night-pink-100: #fff5f7;
  --color--night-pink-200: #fed7e2;
  --color--night-pink-300: #fbb6ce;
  --color--night-pink-400: #f687b3;
  --color--night-pink-500: #ed64a6;
  --color--night-pink-600: #d53f8c;
  --color--night-pink-700: #b83280;
  --color--night-pink-800: #97266d;
  --color--night-pink-900: #702459;

  /* Semantic colors */

  --color--text: var(--color--gray-800);
  --color--surface: var(--color--gray-100);
  --color--surface-raised: var(--color--white);

  /*
    Deliberately not overridden in .dark: the app-wide default border color
    (the Tailwind v4 compat block in application.postcss.css) is gray-200 in
    both modes, and dark markup adjusts borders per element.
  */
  --color--border: var(--color--gray-200);

  --color--focus: var(--color--purple-600);

  /* Font & typography */

  --font-family--sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /*
    Each font size has a paired default line height, expressed as the
    unitless ratio of its target line height to the font size.
  */

  --font-size--x-small: 0.75rem;
  --font-size--x-small--line-height: calc(1 / 0.75);
  --font-size--small: 0.875rem;
  --font-size--small--line-height: calc(1.25 / 0.875);
  --font-size--base: 1rem;
  --font-size--base--line-height: calc(1.5 / 1);
  --font-size--large: 1.125rem;
  --font-size--large--line-height: calc(1.75 / 1.125);
  --font-size--x-large: 1.25rem;
  --font-size--x-large--line-height: calc(1.75 / 1.25);
  --font-size--2x-large: 1.5rem;
  --font-size--2x-large--line-height: calc(2 / 1.5);

  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;
  --font-weight--extrabold: 800;

  --line-height--tight: 1.25;
  --line-height--snug: 1.375;
  --line-height--base: 1.5;

  /* Borders */

  --border-width--base: 1px;
  --border-radius--small: 0.25rem;
  --border-radius--medium: 0.375rem;
  --border-radius--large: 0.5rem;
  --border-radius--full: calc(infinity * 1px);

  /* Shadows */

  --shadow--base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow--medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow--large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow--x-large: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow--2x-large: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Container sizing */

  --container--medium: 64rem;
  --container--large: 80rem;

  /* Spacing */

  --space--xx-small: 0.25rem;
  --space--x-small: 0.5rem;
  --space--small: 0.75rem;
  --space--base: 1rem;
  --space--medium: 1.5rem;
  --space--large: 2rem;
}

.dark {
  --color--text: var(--color--night-gray-300);
  --color--surface: var(--color--night-gray-800);
  --color--surface-raised: var(--color--night-gray-900);
  --color--focus: var(--color--night-purple-400);
}
}
@layer base{
body {
  position: relative;
  background-color: var(--color--surface);
  color: var(--color--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
}
@layer base{
/*
  A heading with the `heading` class gets its look from a role modifier, so
  that a change of heading level does not change the look. A heading without
  it, such as a heading in rendered Markdown, gets the look of its level.
*/
:where(h1:not(.heading), .heading--header) {
  padding-block: var(--space--medium);
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--extrabold);
}

:where(h2:not(.heading), .heading--subheader) {
  padding-block: var(--space--base);
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--bold);
}

:where(h3:not(.heading), .heading--section-title) {
  padding-block: var(--space--x-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-800);
}

:is(h3:not(.heading), .heading--section-title) {
  &:is(.dark *) {
    color: var(--color--night-white);
  }

  a {
    text-decoration-line: underline;
    color: inherit;
    font-weight: inherit;
  }
}

:where(h4:not(.heading), .heading--subsection-title) {
  padding-block: var(--space--x-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--semibold);
}

a {
  font-weight: var(--font-weight--medium);
  color: var(--color--red-600);

  &:is(.dark *) {
    color: var(--color--night-yellow-400);
  }

  &.subtle {
    font-weight: var(--font-weight--normal);
    color: var(--color--gray-600);

    @media (hover: hover) {
      &:hover {
        text-decoration-line: underline;
      }
    }

    &:is(.dark *) {
      color: var(--color--gray-400);
    }
  }

  &.subtle-semibold {
    font-weight: var(--font-weight--semibold);
    color: var(--color--gray-600);

    @media (hover: hover) {
      &:hover {
        text-decoration-line: underline;
      }
    }

    &:is(.dark *) {
      color: var(--color--gray-400);
    }
  }

  &.subtle-no-underline {
    font-weight: var(--font-weight--normal);
    color: var(--color--gray-600);

    &:is(.dark *) {
      color: var(--color--gray-400);
    }
  }
}

blockquote {
  margin-block: var(--space--base);
  border-left-style: solid;
  border-left-width: 4px;
  border-color: var(--color--gray-400);
  padding: var(--space--base);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

dt {
  margin-top: var(--space--x-small);
  font-weight: var(--font-weight--semibold);
}

dd {
  margin-left: var(--space--large);
  padding-block: var(--space--xx-small);
}

.header-inset .heading--header:is(.dark *) {
  color: var(--color--night-white);
}

.section-content p {
  padding-block: var(--space--x-small);
}

.muted {
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.meta-text {
  color: var(--color--gray-500);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.critical {
  color: var(--color--red-500);
}

.underlined {
  text-decoration-line: underline;
}

.critical-icon {
  color: var(--color--red-500);
  fill: currentcolor;
}

.critical-icon--spaced {
  margin-left: var(--space--xx-small);
}

.ok-icon {
  color: var(--color--green-500);
  fill: currentcolor;
}

.small-print {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.fine-print {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}
}
@layer base{

.markdown,
.prose,
.rich_text_area,
.trix-content {
  h1 {
    padding-block: var(--space--medium);
    font-size: var(--font-size--2x-large);
    line-height: var(--font-size--2x-large--line-height);
    font-weight: var(--font-weight--extrabold);
  }

  h2 {
    padding-block: var(--space--base);
    font-size: var(--font-size--x-large);
    line-height: var(--font-size--x-large--line-height);
    font-weight: var(--font-weight--bold);
  }

  h3 {
    padding-block: var(--space--x-small);
    font-size: var(--font-size--large);
    line-height: var(--font-size--large--line-height);
    font-weight: var(--font-weight--semibold);
  }

  h4 {
    padding-block: var(--space--x-small);
    font-size: var(--font-size--base);
    line-height: var(--font-size--base--line-height);
    font-weight: var(--font-weight--semibold);
  }

  dt {
    margin-top: var(--space--x-small);
    font-weight: var(--font-weight--semibold);
  }

  dd {
    margin-left: var(--space--large);
    padding-block: var(--space--xx-small);
  }

  p {
    padding-block: var(--space--x-small);
    line-height: var(--line-height--base);
  }

  ol,
  ul {
    margin-block: var(--space--xx-small);
    padding-left: var(--space--large);
  }

  ol > li {
    list-style-type: decimal;
  }

  ul > li {
    list-style-type: disc;
  }

  hr {
    margin-block: var(--space--base);
  }

  a {
    text-decoration-line: underline;
  }

  pre:not(.vditor-reset),
  code:not(.vditor-reset) {
    background-color: var(--color--gray-200);
    font-family: var(--font-family--mono);
    white-space: pre-wrap;
    font-size: 0.9em;
    padding: 0.3em;

    &:is(.dark *) {
      background-color: var(--color--gray-700);
    }

    &:empty {
      width: 1rem;
    }
  }
}

.trix-button:is(.dark *) {
  background-color: var(--color--gray-200);
}

.trix-button:disabled:is(.dark *) {
  background-color: var(--color--gray-300);
  color: var(--color--gray-700);
}

.trix-button.trix-active:is(.dark *) {
  background-color: var(--color--night-white);
}
}
@layer base{
svg {
  display: inline;
  height: var(--space--base);
  width: var(--space--base);
}
}
@layer base{

.sr-only-mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

@media (width >= 40rem) {
  .sr-only-mobile {
    display: none;
  }
}

table {
  width: 100%;
}

thead th {
  border-style: solid;
  border-width: 1px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-color: var(--color--gray-200);
  padding-inline: var(--space--medium);
  padding-block: var(--space--small);
  text-align: left;
  vertical-align: middle;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  white-space: nowrap;
  color: var(--color--gray-600);
  text-transform: uppercase;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
    color: var(--color--night-gray-300);
  }

  &:first-child {
    padding-left: var(--space--base);
  }
}

tbody th {
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-color: var(--color--gray-200);
  padding: var(--space--base);
  text-align: left;
  vertical-align: middle;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  white-space: nowrap;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    color: var(--color--night-white);
  }

  &.group-heading {
    padding-top: var(--space--base);
    padding-bottom: var(--space--xx-small);
  }
}

thead {
  display: none;
}

tr {
  margin-bottom: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--color--gray-300);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

td {
  clear: both;
  display: block;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-color: var(--color--gray-300);
  padding: var(--space--x-small);
  text-align: right;
  vertical-align: middle;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  white-space: nowrap;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }

  &:first-child {
    padding-left: var(--space--base);
  }

  &.row-title {
    padding-block: var(--space--x-small);
    text-align: center;
    font-size: var(--font-size--base);
    line-height: var(--line-height--tight);
    font-weight: var(--font-weight--semibold);
    white-space: normal;
  }

  &.wrap {
    white-space: normal;
  }

  &.center {
    text-align: center;
  }

  &.constrained {
    max-width: 20rem;
  }
}

th.wrap {
  white-space: normal;
}

th.sm-only,
td.sm-only {
  display: none;

  @media (width >= 40rem) {
    display: table-cell;
  }
}

tr.ruled {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-800);
  }
}

tr.divided {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-800);
  }

  &:last-child {
    border-style: none;
  }
}

.table-title-link {
  font-weight: var(--font-weight--bold);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}

.table-link-icon {
  fill: currentcolor;
}

th.md-only,
td.md-only {
  display: none;

  @media (width >= 48rem) {
    display: table-cell;
  }
}

th.wide-only,
td.wide-only {
  display: none;

  @media (width >= 64rem) {
    display: table-cell;
  }
}

th.xl-only,
td.xl-only {
  display: none;

  @media (width >= 80rem) {
    display: table-cell;
  }
}

th.xxl-only,
td.xxl-only {
  display: none;

  @media (width >= 96rem) {
    display: table-cell;
  }
}

th.center {
  text-align: center;
}

th.right,
td.right {
  text-align: right;
}

th.left,
td.left {
  text-align: left;
}

th.caps,
td.caps {
  text-transform: uppercase;
}

th.bold,
td.bold {
  font-weight: var(--font-weight--bold);
}

th.narrow-xxl-only,
td.narrow-xxl-only {
  @media (width >= 40rem) {
    display: none;
  }

  @media (width >= 96rem) {
    display: table-cell;
  }
}

th.until-md-and-xxl,
td.until-md-and-xxl {
  @media (width >= 48rem) {
    display: none;
  }

  @media (width >= 96rem) {
    display: table-cell;
  }
}

th.mobile-md-only,
td.mobile-md-only {
  @media (width >= 40rem) {
    display: none;
  }

  @media (width >= 48rem) {
    display: table-cell;
  }
}

th.mobile-wide-only,
td.mobile-wide-only {
  @media (width >= 40rem) {
    display: none;
  }

  @media (width >= 64rem) {
    display: table-cell;
  }
}

th.until-md-and-wide,
td.until-md-and-wide {
  @media (width >= 48rem) {
    display: none;
  }

  @media (width >= 64rem) {
    display: table-cell;
  }
}

th.pinned {
  position: sticky;
  top: 0;
  z-index: 10;
}

tr.pinned-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

table:has(tr.pinned-header) {
  border-spacing: 0;
  border-collapse: separate;
}

tr.shaded {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: var(--color--gray-300);
}

.mobile-only {
  @media (width >= 40rem) {
    display: none;
  }
}

@media (width >= 40rem) {
  thead {
    display: table-header-group;
  }

  tr {
    margin-bottom: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
  }

  td {
    clear: none;
    display: table-cell;
    padding-inline: var(--space--medium);
    padding-block: var(--space--base);
    text-align: left;

    &.row-title {
      padding-block: var(--space--base);
      text-align: left;
      font-size: var(--font-size--x-small);
      line-height: var(--line-height--base);
      font-weight: var(--font-weight--normal);
    }
  }
}
}
@layer base{
/*
  We are using simple form to generate most of our forms.
  These styles make assumptions about what that html output looks like.
*/
fieldset {
  margin-bottom: var(--space--base);
  width: 100%;
  border-style: solid;
  border-width: 1px;
  padding: var(--space--base);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

legend {
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--gray-100);
  padding-inline: var(--space--medium);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-800);
    color: var(--color--night-white);
  }
}

input,
label,
select {
  display: block;
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}

label {
  margin-bottom: var(--space--xx-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}

label.required::after, legend.required::after {
  content: "*"
}

label abbr {
  display: none;
}

label.check_boxes {
  clear: both;
}

.checkbox label,
.radio label {
  display: inline-block;
  padding-block: var(--space--x-small);
  font-weight: var(--font-weight--normal);
}

span.checkbox {
  margin-right: var(--space--x-small);
}

label.checkbox {
  margin-bottom: var(--space--base);
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select[multiple=multiple],
select,
textarea {
  margin-bottom: var(--space--base);
  width: 100%;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);
  padding: var(--space--x-small);
  font-weight: var(--font-weight--normal);
  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
          box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  &:is(.dark *) {
    border-color: var(--color--gray-500);
    background-color: var(--color--night-gray-900);
    color: var(--color--night-white);
  }

  .field_with_errors & {
    margin-block: var(--space--xx-small);
  }
}

::-webkit-calendar-picker-indicator:is(.dark *) {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

textarea {
  resize: vertical;
}

input[type="search"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-bottom: 0px;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: var(--space--x-small);
  display: inline;
}

input[type="file"] {
  width: 100%;
  padding-bottom: var(--space--xx-small);
}

input[type="submit"] {
  display: block;
  clear: both;
}

input[type="date"],
input[type="number"] {
  width: auto;
}

select {
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url(/assets/icons/chevron-up-down-light-5a8b2fa5ecdd0a9b7a227d06f65bae3e2bef1f46a11e484eaf05c5c6c36f333d.svg);
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 0.5em;
  padding-right: 2em;

  &.compressed {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  &.compressed-more {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
  }
}

form {
  :disabled:not(.trix-button) {
    cursor: not-allowed;
    background-color: var(--color--gray-300);
    color: var(--color--gray-700);

    &:is(.dark *) {
      background-color: var(--color--night-gray-700);
      color: var(--color--night-white);
    }
  }

  .hint {
    margin-top: calc(-1 * var(--space--x-small));
    margin-bottom: var(--space--base);
    display: block;
    padding-inline: var(--space--x-small);
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    color: var(--color--gray-600);

    &:is(.dark *) {
      color: var(--color--night-white);
    }
  }

  .file > .hint {
    margin-top: var(--space--x-small);
  }

  .error {
    margin-bottom: var(--space--xx-small);
    display: block;
    color: var(--color--red-500);
  }

  div.input {
    clear: both;
  }

  div.input:not(:last-child) {
    margin-bottom: var(--space--base);
  }

  div.input.select {
    margin-bottom: var(--space--base);
  }

  #opportunity_deal_value_currency {
    margin-bottom: 0;
  }

  div.input.rich_text_area {
    margin-bottom: 0px;
  }
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.form-group {
  margin-bottom: var(--space--base);
  width: 100%;
  padding-inline: var(--space--small);
}

#people_timezones_datetime {
  width: auto;
}

.percent-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.percent-input .percent-input__icon {
  font-weight: var(--font-weight--bold);
  padding: 0 0.3em;
}

.form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--x-small);
}

.form-actions--spaced {
  margin-top: var(--space--base);
}

.form-field--spaced-bottom {
  margin-bottom: var(--space--base);
}

.form-input--spaced-right {
  margin-right: var(--space--x-small);
}

.form-actions--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.form-field--half-xl {
  width: 100%;

  @media (width >= 80rem) {
    width: 50%;
  }
}

.form-group--full {
  width: 100%;
}

.hint--padded-bottom {
  padding-bottom: var(--space--x-small);
}

.form-group--half-md {
  @media (width >= 48rem) {
    width: 50%;
  }
}

.form-group--half-lg {
  @media (width >= 64rem) {
    width: 50%;
  }
}

.form-group--half-xl {
  @media (width >= 80rem) {
    width: 50%;
  }
}

.form-group--half-2xl {
  @media (width >= 96rem) {
    width: 50%;
  }
}

.form-grid-2 {
  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space--base);
  }
}

input.form-input--flush,
select.form-input--flush {
  margin-bottom: 0px;
}

input.form-input--flush-md,
select.form-input--flush-md {
  @media (width >= 48rem) {
    margin-bottom: 0px;
  }
}

.check-list-item {
  width: 100%;
  display: block;
}

label.check-list-columns {
  width: 100%;

  @media (width >= 48rem) {
    width: 50%;
  }

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }

  @media (width >= 80rem) {
    width: 25%;
  }
}

label.check-list-label {
  margin-bottom: 0;
  padding-block: 0;
}

.form-note {
  margin-bottom: var(--space--base);
}

.form-hint-note {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.form-hint-note--offset {
  margin-top: var(--space--x-small);
}

.form-hint-note--spaced {
  margin-block: var(--space--x-small);
}

.form-hint-note--gutters {
  padding-inline: var(--space--x-small);
}

.form-field--tight {
  margin-bottom: var(--space--x-small);
}

.form-field--flush {
  margin-bottom: 0px;
}

input.form-input--full,
textarea.form-input--full,
select.form-input--full {
  width: 100%;
}

select.form-input--auto {
  width: auto;
  margin-bottom: 0px;
}

.form-inline-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  gap: var(--space--x-small);
}

.form-field--spaced-mobile {
  margin-top: var(--space--base);

  @media (width >= 48rem) {
    margin-top: 0px;
  }
}

label.form-label--flush {
  margin-bottom: 0px;
}

.filter-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.filter-fields__third {
  width: 100%;
  padding-right: var(--space--x-small);

  @media (width >= 80rem) {
    width: calc(1/3 * 100%);
  }
}

.filter-fields__quarter {
  width: 100%;
  padding-right: var(--space--x-small);

  @media (width >= 48rem) {
    width: 50%;
  }

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }

  @media (width >= 80rem) {
    width: 25%;
  }
}

.form-field--spaced-top {
  margin-top: var(--space--x-small);
}

.filter-fields__full {
  width: 100%;
  padding-right: var(--space--x-small);
}

.filter-fields__half-md {
  width: 100%;
  padding-right: var(--space--x-small);

  @media (width >= 48rem) {
    width: 50%;
  }
}

.filter-fields__half-xl {
  width: 100%;
  padding-right: var(--space--x-small);

  @media (width >= 80rem) {
    width: 50%;
  }
}

.form-field--spaced-xl {
  @media (width >= 80rem) {
    margin-top: var(--space--x-small);
  }
}

.form-group--bare {
  padding-inline: 0px;
}

.inline-fields {
  gap: var(--space--x-small);

  @media (width >= 48rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.form-field--stack {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.form-field--fill {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: var(--space--base);
}

fieldset.form-fieldset--inline {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: var(--space--base);
}

label.form-label--small {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.form-field--column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.form-cancel-link {
  margin-left: var(--space--x-small);
  margin-top: var(--space--x-small);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.form-spaced {
  margin-block: var(--space--base);
}

.form-field-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
}

.form-group--column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

fieldset.form-fieldset--fill {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 0;
}

fieldset.form-fieldset--semibold {
  font-weight: var(--font-weight--semibold);
}

.form-row--spaced {
  margin-top: var(--space--base);
}

.form-field--spaced {
  margin-top: var(--space--base);
}

.form-field--grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.form-field--half-md {
  @media (width >= 48rem) {
    width: 50%;
  }
}

.form-gutters {
  padding-inline: var(--space--base);
}

.form-inset {
  margin-inline: var(--space--base);
}

.form-field--padded-top {
  padding-top: var(--space--base);
}

.form-intro {
  margin-bottom: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);
}

.form-subheading {
  margin-top: var(--space--base);
}

.form-field--padded-bottom {
  padding-bottom: var(--space--base);
}

.form--full {
  width: 100%;
}

fieldset.form-fieldset--spaced {
  margin-top: var(--space--medium);
}

.form-actions--centered {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
}
@layer base{
/*
  Roux-style buttons (migration in progress, see doc/css.md). New/touched
  views should use these instead of the legacy `.btn` classes below; `.btn`
  is being phased out one view-area at a time. Unlike `.btn`, alignment and
  icon/label spacing are built into the base class, not an opt-in modifier.
*/
.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--space--x-small);
  border: var(--border-width--base) solid transparent;
  border-radius: var(--border-radius--small);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--bold);
  white-space: nowrap;
  text-decoration: none;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;

  &:is(.dark *) {
    color: var(--color--night-white);
  }

  &:focus-visible {
    outline: var(--border-width--base) solid var(--color--focus);
    outline-offset: 2px;

    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }

  &:hover:enabled {
    cursor: pointer;
  }
}

.header-inset .button {
  margin-bottom: var(--space--xx-small);
}

.button--small {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.button--red {
  background-color: var(--color--red-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-red-600);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--red-700);

    &:is(.dark *) {
      background-color: var(--color--night-red-800);
    }
  }

  &:active {
    background-color: var(--color--red-800);
  }
}

.button--index {
  background-color: var(--color--red-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-red-600);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--red-700);

    &:is(.dark *) {
      background-color: var(--color--night-red-800);
    }
  }

  &:active {
    background-color: var(--color--red-800);
  }
}

.button--index-alt {
  background-color: var(--color--pink-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-pink-700);
    color: var(--color--night-white);
  }

  &:hover:enabled {
    background-color: var(--color--pink-700);

    &:is(.dark *) {
      background-color: var(--color--night-pink-800);
    }
  }

  &:active {
    background-color: var(--color--pink-800);

    &:is(.dark *) {
      background-color: var(--color--night-pink-900);
    }
  }
}

.button--subtle {
  background-color: var(--color--gray-100);
  color: var(--color--gray-700);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-gray-200);
  }

  &:hover:enabled {
    background-color: var(--color--gray-200);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }

  &:active {
    background-color: var(--color--gray-300);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }
}

.button--show {
  background-color: var(--color--blue-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-blue-600);
  }

  &:hover:enabled {
    background-color: var(--color--blue-700);
  }

  &:active {
    background-color: var(--color--blue-800);
  }
}

.button--new {
  background-color: var(--color--green-700);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-green-700);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--green-800);
  }

  &:active {
    background-color: var(--color--green-900);
  }
}

.button--edit {
  background-color: var(--color--purple-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-purple-600);
  }

  &:hover {
    background-color: var(--color--purple-700);

    &:is(.dark *) {
      background-color: var(--color--night-purple-800);
    }
  }

  &:active {
    background-color: var(--color--purple-800);
  }
}

.button--destroy {
  background-color: var(--color--gray-100);
  color: var(--color--red-700);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-red-300);
  }

  &:hover:enabled {
    background-color: var(--color--gray-200);

    &:is(.dark *) {
      background-color: var(--color--night-gray-700);
    }
  }

  &:active {
    background-color: var(--color--gray-300);

    &:is(.dark *) {
      background-color: var(--color--night-gray-600);
    }
  }
}

.button--external {
  background-color: var(--color--purple-600);
  color: var(--color--white);

  &:hover:enabled {
    background-color: var(--color--indigo-600);
  }

  &:active {
    background-color: var(--color--indigo-700);
  }
}

.button--filter {
  background-color: var(--color--gray-700);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-100);
    color: var(--color--night-gray-900);
  }

  &:hover:enabled {
    background-color: var(--color--gray-800);

    &:is(.dark *) {
      background-color: var(--color--night-gray-200);
    }
  }

  &:active {
    background-color: var(--color--gray-900);

    &:is(.dark *) {
      background-color: var(--color--night-gray-300);
    }
  }
}

.button--linkedin {
  color: var(--color--white);
  background-color: #0072b1;
}

.button__icon {
  fill: currentcolor;
}

.button__icon--stroke {
  stroke: currentcolor;
}

/* For a link/button that is just an icon, with no button chrome. */
.icon-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Legacy button styles, we're migrating to `.button` above */
.btn {
  display: inline-block;
  border-radius: var(--border-radius--small);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--bold);
  white-space: nowrap;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;

  &:is(.dark *) {
    color: var(--color--night-white);
  }

  .header-inset & {
    margin-bottom: var(--space--xx-small);
  }

  &:focus {
    outline-style: none;

    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }

  &:hover:enabled {
    cursor: pointer;
  }
}

.btn-small {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.btn-rounded {
  border-radius: var(--border-radius--full);
  padding-inline: var(--space--x-small);
  padding-block: var(--space--xx-small);
  font-weight: var(--font-weight--normal);
}

.btn-tiny {
  padding-inline: var(--space--x-small);
  padding-block: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--normal);
}

.btn-red {
  background-color: var(--color--red-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-red-600);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--red-700);

    &:is(.dark *) {
      background-color: var(--color--night-red-800);
    }
  }

  &:active {
    background-color: var(--color--red-800);
  }
}

.btn-index {
  background-color: var(--color--red-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-red-600);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--red-700);

    &:is(.dark *) {
      background-color: var(--color--night-red-800);
    }
  }

  &:active {
    background-color: var(--color--red-800);
  }
}

.btn-index-alt {
  background-color: var(--color--pink-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-pink-700);
    color: var(--color--night-white);
  }

  &:hover:enabled {
    background-color: var(--color--pink-700);

    &:is(.dark *) {
      background-color: var(--color--night-pink-800);
    }
  }

  &:active {
    background-color: var(--color--pink-800);

    &:is(.dark *) {
      background-color: var(--color--night-pink-900);
    }
  }
}

.btn-subtle {
  background-color: var(--color--gray-100);
  color: var(--color--gray-700);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-gray-200);
  }

  &:hover:enabled {
    background-color: var(--color--gray-200);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }

  &:active {
    background-color: var(--color--gray-300);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }
}

.btn-modal,
.btn-show {
  background-color: var(--color--blue-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-blue-600);
  }

  &:hover:enabled {
    background-color: var(--color--blue-700);
  }

  &:active {
    background-color: var(--color--blue-800);
  }
}

.btn-reveal,
.btn-new {
  background-color: var(--color--green-700);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-green-700);
    color: var(--color--white);
  }

  &:hover:enabled {
    background-color: var(--color--green-800);
  }

  &:active {
    background-color: var(--color--green-900);
  }
}

.btn-edit,
.btn-download {
  background-color: var(--color--purple-600);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-purple-600);
  }

  &:hover {
    background-color: var(--color--purple-700);

    &:is(.dark *) {
      background-color: var(--color--night-purple-800);
    }
  }

  &:active {
    background-color: var(--color--purple-800);
  }
}

.btn-destroy {
  background-color: var(--color--gray-100);
  color: var(--color--red-700);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-red-300);
  }

  &:hover:enabled {
    background-color: var(--color--gray-200);

    &:is(.dark *) {
      background-color: var(--color--night-gray-700);
    }
  }

  &:active {
    background-color: var(--color--gray-300);

    &:is(.dark *) {
      background-color: var(--color--night-gray-600);
    }
  }
}

.btn-external {
  background-color: var(--color--purple-600);
  color: var(--color--white);

  &:hover:enabled {
    background-color: var(--color--indigo-600);
  }

  &:active {
    background-color: var(--color--indigo-700);
  }
}

.btn-filter,
.btn-submit {
  background-color: var(--color--gray-700);
  color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-100);
    color: var(--color--night-gray-900);
  }

  &:hover:enabled {
    background-color: var(--color--gray-800);

    &:is(.dark *) {
      background-color: var(--color--night-gray-200);
    }
  }

  &:active {
    background-color: var(--color--gray-900);

    &:is(.dark *) {
      background-color: var(--color--night-gray-300);
    }
  }
}

.btn-linkedin {
  color: var(--color--white);
  background-color: #0072b1;
}

.btn__icon {
  fill: currentcolor;
}

.btn__label {
  display: none;

  @media (width >= 64rem) {
    display: inline-block;
  }
}

.btn--wide-up {
  display: none;

  @media (width >= 64rem) {
    display: inline-block;
  }
}

.btn__label--xl {
  @media (width >= 64rem) {
    display: none;
  }

  @media (width >= 80rem) {
    display: inline;
  }
}

.btn--faded {
  opacity: 50%;
}

.btn--with-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn--gap {
  gap: var(--space--xx-small);
}

.btn__icon--stroke {
  stroke: currentcolor;
}

.btn--stretch {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}

.btn--block {
  display: block;
  width: 100%;
}

.btn--full {
  width: 100%;
  text-align: center;
}

.btn--grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.btn--spaced-above {
  margin-top: var(--space--base);
}

.btn--spaced-below {
  margin-bottom: var(--space--base);
}

.btn--offset {
  margin-top: var(--space--x-small);
}

.btn--spaced-right {
  margin-right: var(--space--xx-small);
}

.btn--x-large {
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
}

.btn--full-until-md {
  width: 100%;

  @media (width >= 48rem) {
    width: auto;
  }
}

.btn--trailing {
  margin-right: var(--space--x-small);
}

.btn--spaced-left {
  margin-left: var(--space--x-small);
}

.btn--inline {
  display: inline-block;
}

.btn--no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.btn--center {
  text-align: center;
}

input.btn--block-until-xl {
  display: block;

  @media (width >= 80rem) {
    display: inline;
  }
}

form.button_to {
  display: inline;

  input {
    display: inline;
  }

  input[type="submit"] {
    clear: none;
  }
}

.btn--flush {
  margin: 0px;
}

.btn__inline-label {
  display: inline-block;
}
}
@layer components{

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: var(--mobile-menu--height);
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  @media (width >= 48rem) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-shadow: var(--shadow--x-large);
            box-shadow: var(--shadow--x-large);
    container-type: inline-size;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
  }
}

.menu__content {
  height: auto;
  width: 100%;
  padding-inline: var(--space--medium);
  padding-block: var(--space--base);
}

.menu__container {
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-inline: 0px;

  @media (width >= 48rem) {
    min-height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

.menu__mobile-toggle {
  cursor: pointer;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  font-size: var(--font-size--x-large);
  line-height: 1;
  color: var(--color--black);
  opacity: 50%;

  &:is(.dark *) {
    color: var(--color--night-white);
  }

  @media (width >= 48rem) {
    display: none;
  }

  svg {
    fill: currentcolor;
  }
}

.menu__mobile-toggle--open {
  padding-inline: var(--space--small);
  padding-block: var(--space--xx-small);
}

.menu__mobile-toggle--close {
  padding-bottom: var(--space--x-small);
}

.menu__title {
  margin-right: 0px;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding: var(--space--base);
  padding-inline: 0px;
  text-align: left;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--bold);
  white-space: nowrap;
  color: var(--color--gray-700);
  text-transform: uppercase;

  &:is(.dark *) {
    border-color: var(--color--night-red-400);
    color: var(--color--night-white);
  }
}

.menu__extra-title {
  display: block;
  padding-top: var(--space--xx-small);
  padding-bottom: var(--space--base);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--bold);
  white-space: nowrap;
  color: var(--color--gray-600);
  text-transform: uppercase;
  text-decoration-line: none;

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.menu__navigation {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 40;
  margin: var(--space--x-small);
  display: none;
  height: 95dvh;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-inline: var(--space--medium);
  padding-block: var(--space--small);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);

  @media (width >= 48rem) {
    height: auto;
  }

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.menu__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--red-600);
  text-transform: uppercase;

  &:is(.dark *) {
    color: var(--color--night-red-400);
  }

  @media screen and (min-height: 900px) {
    padding-block: var(--space--small);
  }
}

.menu__link:hover {
  color: var(--color--red-600);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.menu__link-icon {
  margin-right: var(--space--x-small);
  width: var(--space--base);
  fill: currentcolor;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.menu__link-icon--stroke {
  stroke: currentcolor;
}

.menu__link-icon--stroke-2 {
  stroke-width: 2;
}

.menu__link-title--grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.menu__search-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.menu__shortcut-hint {
  margin-left: var(--space--x-small);
  margin-top: -2px;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-400);
  padding-inline: 1px;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-500);

  &:is(.dark *) {
    border-color: var(--color--night-white);
    color: var(--color--night-white);
  }
}

.menu__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  li {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .menu__link--summit {
    a {
      color: var(--color--night-blue-600);

      &:is(.dark *) {
        color: var(--color--night-blue-200);
      }
    }

    a:hover {
      color: var(--color--blue-700);

      &:is(.dark *) {
        color: var(--color--night-blue-600);
      }
    }
  }

  .menu__link--lounge {
    a {
      color: var(--color--purple-600);

      &:is(.dark *) {
        color: var(--color--night-yellow-400);
      }
    }

    a:hover {
      color: var(--color--purple-700);

      &:is(.dark *) {
        color: var(--color--night-white);
      }
    }
  }

  .menu__link--search {
    a.menu__link {
      color: var(--color--gray-600);

      &:is(.dark *) {
        color: var(--color--night-white);
      }
    }

    a.menu__link:hover {
      color: var(--color--gray-800);

      &:is(.dark *) {
        color: var(--color--night-gray-200);
      }
    }
  }

  @media (width >= 48rem) {
    min-width: 100%;
  }
}

.menu__links--primary {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-400);
  background-color: var(--color--white);
  padding-bottom: var(--space--base);
  margin-bottom: var(--space--base);

  &:is(.dark *) {
    border-color: var(--color--night-white);
    background-color: var(--color--night-gray-900);
  }

  @media (width >= 48rem) {
    position: sticky;
    top: 0px;
    z-index: 50;
  }
}

.menu__links--bookmarks {
  margin-bottom: var(--space--base);
}

.menu__extra-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  .menu__extra-title svg {
    fill: currentcolor;
  }
}

.menu__extra-title--grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.menu__divider {
  margin-block: var(--space--base);
  border-color: var(--color--gray-400);

  &:is(.dark *) {
    border-color: var(--color--night-white);
    opacity: 30%;
  }

  @media (width >= 48rem) {
    min-width: 100%;
  }
}

.menu__preferences {
  @media (width >= 48rem) {
    margin-top: auto;
  }
}

.menu__links--extra {
  @media (width >= 48rem) {
    margin-bottom: var(--space--base);
  }

  a {
    color: var(--color--gray-600);

    &:is(.dark *) {
      color: var(--color--night-white);
    }
  }

  a:hover {
    color: var(--color--gray-800);

    &:is(.dark *) {
      color: var(--color--night-gray-200);
    }
  }
}

.menu__collapse-side-nav-button {
  display: none;

  @media (width >= 48rem) {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--gray-200);
    background-color: var(--color--white);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    bottom: 1.25rem;
    left: 33px;
    width: 2rem;
    z-index: 500;

    &:is(.dark *) {
      border-color: var(--color--night-gray-700);
      background-color: var(--color--night-gray-900);
    }
  }
}
body.side-nav-expanded .menu__collapse-side-nav-button {
  left: 242px;
}

@media (width >= 48rem) {
  .menu {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .menu__content {
    height: 100vh;
    padding-inline: 0px;
  }

  .menu__title {
    visibility: hidden;
    padding-bottom: var(--space--x-small);
  }

  .menu__extra-title {
    display: none;
  }

  .menu__navigation {
    position: relative;
    margin: 0px;
    margin-top: var(--space--base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 0px;
    opacity: 100%;
    -webkit-box-shadow: none;
            box-shadow: none;

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }

  .menu__link-title {
    display: none;
  }

  .menu__button-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .menu__link-icon {
    margin-right: 0px;
  }

  .menu__links {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .side-nav-expanded {
    .menu__content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding-inline: var(--space--medium);
    }

    .menu__title {
      visibility: visible;
    }

    .menu__extra-title {
      display: block;
    }

    .menu__links {
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
    }

    .menu__link-title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .menu__button-title {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }

    .menu__link-icon {
      margin-right: var(--space--x-small);
      opacity: 75%;
    }

    .menu__collapse-side-nav-button {
      right: -1rem;
    }
  }
}

.mobile-nav-expanded {
  .menu__navigation {
    display: block;
  }
}

.menu__expand-arrow {
  height: 12px;
  width: 12px;
  fill: currentcolor;

  .side-nav-expanded & {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
}

.dropdown {
  z-index: 500;
  float: left;
  list-style-type: none;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-block: var(--space--x-small);
  text-align: left;
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  -webkit-box-shadow: var(--shadow--large);
          box-shadow: var(--shadow--large);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
  }

  .spacer {
    margin-block: var(--space--x-small);
    height: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--gray-200);

    &:is(.dark *) {
      border-color: var(--color--night-gray-700);
    }
  }

  a,
  button,
  input[type=submit] {
    display: block;
    width: 100%;
    background-color: transparent;
    padding-inline: var(--space--base);
    padding-block: var(--space--x-small);
    text-align: left;
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--normal);
    white-space: nowrap;
    color: var(--color--gray-800);

    &:is(.dark *) {
      color: var(--color--night-white);
    }
  }

  .dropdown__destroy-action {
    color: var(--color--red-600);

    &:is(.dark *) {
      color: var(--color--red-400);
    }
  }
}

.dropdown__divider {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.more-menu-toggle {
  display: inline-block;
  vertical-align: baseline;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-900);
    }

    &:hover:is(.dark *) {
      color: var(--color--gray-100);
    }
  }

  svg {
    fill: currentcolor;
  }
}

.more-menu-toggle--spaced {
  margin-left: var(--space--x-small);
}

.dropdown--bordered {
  border-style: solid;
  border-width: 1px;
}

.dropdown--user {
  position: absolute;
  right: 0px;
  margin-top: var(--space--x-small);
  z-index: 1000;
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--medium);
          box-shadow: var(--shadow--medium);
  border-radius: var(--border-radius--medium);

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
  }
}

.user-dropdown__toggle {
  display: block;
  color: var(--color--white);
}

.user-dropdown__avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav .avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-300);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--white);

  img {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: var(--border-radius--full);
    border-style: none;
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: middle;
    -webkit-box-shadow: var(--shadow--base);
            box-shadow: var(--shadow--base);
  }

  @media (width >= 48rem) {
    height: 3rem;
    width: 3rem;

    img {
      height: 3rem;
      width: 3rem;
      -webkit-box-shadow: var(--shadow--large);
              box-shadow: var(--shadow--large);
    }
  }
}

nav.breadcrumbs {
  margin-bottom: 2rem;

  .breadcrumb {
    display: inline;
  }

  a {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--semibold);
    color: var(--color--gray-700);
    text-transform: uppercase;

    &:is(.dark *) {
      color: var(--color--gray-400);
    }
  }

  li:last-child .separator {
    display: none;
  }

  .separator {
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    font-weight: var(--font-weight--light);
    color: var(--color--gray-500);

    &:is(.dark *) {
      color: var(--color--gray-200);
    }
  }
}

nav.breadcrumbs--inline {
  margin-bottom: 0;
  white-space: nowrap;

  ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: 0;
  }

  .breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.25em;
    min-width: 0;
    margin-right: 0.25em;
  }

  .breadcrumb a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .separator {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  @container (width < 64rem) {
    .breadcrumb:has(.separator) {
      display: none;
    }
  }
}

.menu__theme-toggle {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-600);
  text-transform: uppercase;
  position: relative;
  margin-bottom: 5rem;

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}
.side-nav-expanded .menu__theme-toggle {
  margin-bottom: 0;

  @media screen and (width >= 48rem) {
    margin-bottom: 3rem;
  }
}

.menu__theme-toggle-select {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-600);
  text-transform: uppercase;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-image: none;
  padding-left: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  margin-bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-white);
  }

  &:focus {
    outline: none;
  }
}

.menu__theme-toggle-icon {
  color: var(--color--gray-600);
  position: absolute;
  top: 10px;
  left: 15px;

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}
.side-nav-expanded .menu__theme-toggle-icon {
  left: 0px;
}

html:not(.dark) .menu__theme-toggle--dark {
  display: none;
}

.dark .menu__theme-toggle--light {
  display: none;
}

.header-actions {
  position: fixed;
  top: 0.6rem;
  right: 2rem;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;

  @media screen and (width >= 48rem) {
    position: absolute;
    top: 1rem;
    right: 2rem;
  }
}

.sign-in-form {
  padding-bottom: var(--space--base);
}

.sign-in-form__actions {
  margin-block: var(--space--x-small);
}

.sign-in-form__forgot {
  margin-left: var(--space--base);
}

.sign-in-heading {
  padding-top: var(--space--base);
}

.sign-in-icon {
  display: inline;
  line-height: 1.625;
  fill: currentcolor;
}

.tab__icon {
  margin-left: -0.125rem;
  margin-right: var(--space--x-small);
  height: 1.25rem;
  width: 1.25rem;
  fill: currentcolor;
}

.tab.inactive .tab__icon {
  @container (44rem <= width < 76rem) {
    margin-left: 0;
    margin-right: 0;
  }
}

.breadcrumb-logo {
  display: inline-block;
  height: 3rem;
  width: auto;
}
}
@layer components{

/* Dark stat-chart card (canvas charts on client, billing, and dashboard pages). */

.chart-card {
  background-color: var(--color--gray-900);

  &:is(.dark *) {
    background-color: var(--color--gray-900);
  }
}

.chart-card__header {
  background-color: transparent;
}

.chart-card__heading {
  position: relative;
  width: 100%;
  max-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.chart-card__kicker {
  margin-bottom: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-200);
  text-transform: uppercase;
}

.chart-card__title {
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--white);
}

.chart-card__body {
  padding: var(--space--base);
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}

.chart-card__canvas {
  position: relative;
}

.chart-card-cell--main {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(8/12 * 100%);
  }
}

.chart-card-cell--aside {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(4/12 * 100%);
  }
}

.chart-card-cell--stats {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(1/3 * 100%);
  }

  @media (width >= 96rem) {
    width: 25%;
  }
}

.chart-card-cell--chart {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(2/3 * 100%);
  }

  @media (width >= 96rem) {
    width: 75%;
  }
}

.chart-card-cell--stats-md {
  @media (width >= 48rem) {
    width: 50%;
  }

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }

  @media (width >= 80rem) {
    margin-bottom: 0px;
  }

  @media (width >= 96rem) {
    width: 25%;
  }
}

.chart-card-cell--chart-md {
  @media (width >= 48rem) {
    width: 50%;
  }

  @media (width >= 64rem) {
    width: calc(2/3 * 100%);
  }

  @media (width >= 80rem) {
    margin-bottom: 0px;
  }

  @media (width >= 96rem) {
    width: 75%;
  }
}
}
@layer components{

/* The metric cards row rendered by application/_cards. */

.stat-cards {
  gap: var(--space--base);

  @media (width >= 48rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.stat-cards__cell {
  @media (width >= 48rem) {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}

.stat-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  margin-bottom: var(--space--medium);
  -webkit-box-shadow: var(--shadow--large);
          box-shadow: var(--shadow--large);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  @media (width >= 80rem) {
    margin-bottom: 0px;
  }
}

.stat-card__body {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  padding: var(--space--base);
}

.stat-card__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.stat-card__info {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-right: var(--space--base);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.stat-card__label {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-500);
  text-transform: uppercase;

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.stat-card__value {
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }
}

.stat-card__icon-cell {
  position: relative;
  width: auto;
  padding-left: var(--space--base);
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.stat-card__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: var(--space--small);
  text-align: center;
  border-radius: var(--border-radius--full);
  -webkit-box-shadow: var(--shadow--large);
          box-shadow: var(--shadow--large);
  color: var(--color--white);

  &:is(.dark *) {
    color: var(--color--black);
  }

  svg {
    fill: currentcolor;
  }
}

.stat-card__icon--red {
  background-color: var(--color--red-500);
}

.stat-card__icon--pink {
  background-color: var(--color--pink-500);
}

.stat-card__icon--orange {
  background-color: var(--color--orange-500);
}

.stat-card__icon--green {
  background-color: var(--color--green-500);
}

.stat-card__delta {
  margin-top: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.stat-card__delta-value {
  white-space: nowrap;
}
}
@layer components{

/* Yes/no pill rendered by application/_boolean. */

.boolean-badge {
  border-radius: var(--border-radius--large);
  background-color: var(--color--gray-100);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.boolean-badge__icon {
  fill: currentcolor;
}

.boolean-badge__icon--yes {
  color: var(--color--green-500);
}

.boolean-badge__icon--no {
  color: var(--color--red-500);
}
}
@layer components{

/* Name / count / percentage-bar table rendered by application/_grouped_table. */

.grouped-table__name-col {
  width: 50%;

  @media (width >= 40rem) {
    width: calc(2/6 * 100%);
  }
}

.grouped-table__count-col {
  @media (width >= 40rem) {
    width: calc(1/6 * 100%);
  }
}

.grouped-table__pct-col {
  width: 50%;

  @media (width >= 40rem) {
    width: calc(3/6 * 100%);
  }
}

.grouped-table__bar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.grouped-table__pct {
  margin-right: var(--space--x-small);
}

.grouped-table__track-wrap {
  position: relative;
  width: 100%;
}

.grouped-table__track {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--space--x-small);
  border-radius: 0.25rem;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.grouped-table__track--red { background-color: var(--color--red-200); }
.grouped-table__track--green { background-color: var(--color--green-200); }
.grouped-table__track--purple { background-color: var(--color--purple-200); }
.grouped-table__track--blue { background-color: var(--color--blue-200); }
.grouped-table__track--orange { background-color: var(--color--orange-200); }

.grouped-table__fill {
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  white-space: nowrap;
  color: var(--color--white);
}

.grouped-table__fill--red { background-color: var(--color--red-500); }
.grouped-table__fill--green { background-color: var(--color--green-500); }
.grouped-table__fill--purple { background-color: var(--color--purple-500); }
.grouped-table__fill--blue { background-color: var(--color--blue-500); }
.grouped-table__fill--orange { background-color: var(--color--orange-500); }
}
@layer base{

.attachment-item {
  width: 100%;
  margin-block: 1.25rem;
  border-top-style: solid;
  border-top-width: 1px;
  padding-top: 1.25rem;

  &:first-child {
    border-width: 0;
    padding-top: 0;
  }

  @media (width >= 40rem) {
    width: auto;
  }
}

.attachment-item--contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: var(--space--x-small);
}

.attachment-item__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.attachment-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.attachment-item__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  gap: var(--space--xx-small);
}

.attachment-item__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--x-small);
}

.attachment-item__action {
  color: var(--color--gray-500);

  svg {
    fill: currentcolor;
  }
}

.attachment-item__action--edit {
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.attachment-item__action--delete {
  color: var(--color--red-500);
}

.attachment-item__link {
  color: var(--color--gray-700);
  text-decoration-line: underline;

  &:hover {
    @media (hover: hover) {
      text-decoration-line: none;
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.attachment-item__active {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
  color: var(--color--green-600);

  &:is(.dark *) {
    color: var(--color--night-green-400);
  }
}

.attachment-item__icon {
  fill: currentcolor;
  width: 1rem;
  height: 1rem;
}

.attachment-item__signed {
  color: var(--color--green-500);

  &:is(.dark *) {
    color: var(--color--night-green-400);
  }
}

.attachment-item__signature {
  fill: currentcolor;
  margin-top: -0.25rem;
}

.attachment-item__meta,
.attachment-item__meta-link {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-200);
  }
}
}
@layer base{

.icon-option__glyph {
  display: inline-block;
  margin-right: var(--space--x-small);
}

.icon-option__label {
  display: inline-block;
}

.bookmark {
  display: block;
  width: calc(1/6 * 100%);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: transparent;

  &:hover {
    z-index: 10;
    border-color: var(--color--red-600);

    &:is(.dark *) {
      border-color: var(--color--night-red-400);
    }

    .section {
      -webkit-box-shadow: 0 10px 15px -3px rgba(255, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
              box-shadow: 0 10px 15px -3px rgba(255, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
    }
  }

  .section-content {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    color: var(--color--gray-700);

    &:is(.dark *) {
      color: var(--color--gray-400);
    }

    -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0)), color-stop(60%), to(rgba(0,0,0,1)));

    -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0), 60%, rgba(0,0,0,1));

            mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0)), color-stop(60%), to(rgba(0,0,0,1)));

            mask-image: linear-gradient(0deg, rgba(0,0,0,0), 60%, rgba(0,0,0,1));
  }
}

.bookmarks__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
}

.bookmark__ribbon {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-right: var(--space--large);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  fill: currentcolor;

  &:is(.dark *) {
    color: var(--color--night-red-600);
  }
}

.bookmark__preview {
  height: 8rem;
  overflow: hidden;
  padding: var(--space--base);
  padding-top: 0px;
}

.bookmark__preview--short {
  height: 4rem;
}

.bookmarks__view-all-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.bookmarks__view-all {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color--gray-400);
  background-color: var(--color--white);

  &:is(.dark *) {
    border-color: var(--color--gray-700);
    background-color: var(--color--black);
  }

  &:hover {
    border-color: var(--color--red-600);

    &:is(.dark *) {
      border-color: var(--color--night-red-400);
    }

    .bookmarks__view-all-arrow {
      color: var(--color--red-600);

      &:is(.dark *) {
        color: var(--color--night-red-400);
      }
    }
  }

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2rem;
  width: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.bookmarks__view-all-arrow {
  fill: currentcolor;
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }

  height: 12px;
  width: 12px;
}

.delete_bookmark {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--color--red-600);

  &:is(.dark *) {
    color: var(--color--night-red-600);
  }
}

form.new_bookmark {
  display: inline;

  button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    svg {
      fill: currentcolor;
      color: var(--color--gray-300);

      &:hover {
        @media (hover: hover) {
          color: var(--color--red-600);
        }
      }
    }
  }
}

.bookmark-edit-icon {
  color: var(--color--black);
  fill: currentcolor;

  &:is(.dark *) {
    color: var(--color--white);
  }
}
}
@layer base{
/* Fixes for https://github.com/Choices-js/Choices/issues/1056 */
.choices .choices__list.choices__list--dropdown {
  visibility: visible !important;
}
.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded]{
  margin-top: 0px;
}
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded]{
  margin-top: -1px;
}
/* End fixes */

.choices__inner {
  background-color: var(--color--white);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-800);
  }
}

.choices__list--multiple .choices__item {
  border-radius: var(--border-radius--small);
  border-color: var(--color--gray-700);
  background-color: var(--color--gray-700);

  &:is(.dark *) {
    border-color: var(--color--night-gray-100);
    background-color: var(--color--night-gray-100);
    color: var(--color--night-gray-900);
  }

  &.is-highlighted {
    border-color: var(--color--gray-500);
    background-color: var(--color--gray-500);

    &:is(.dark *) {
      border-color: var(--color--night-white);
      background-color: var(--color--night-white);
    }
  }
}

.choices input[type="text"] {
  margin-bottom: 1px;
  background-color: var(--color--white);
  padding-block: var(--space--x-small);
  padding-left: var(--space--xx-small);
  -webkit-box-shadow: none;
          box-shadow: none;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.choices__list {
  background-color: var(--color--white);
  color: var(--color--gray-900);

  &:is(.dark *) {
    border-color: var(--color--night-gray-300);
    background-color: var(--color--night-gray-800);
    color: var(--color--night-gray-100);
  }

  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2 !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--color--gray-400);

  &:is(.dark *) {
    color: var(--color--night-gray-900);
  }
}

.choices__group {
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.choices__heading {
  border-style: none;
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.choices__placeholder {
  opacity: 60%;
}

input[type="search"].choices__input, .choices[data-type*=select-one] .choices__input {
  -webkit-box-shadow: none;
          box-shadow: none;

  &:is(.dark *) {
    border-bottom-color: var(--color--night-gray-100);
    background-color: var(--color--night-gray-800);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

input[type="search"].choices__input {
  min-width: 10ch !important;
  width: auto;
  border-style: none;
  padding-inline: var(--space--x-small);
}

.choices__label {
  font-weight: var(--font-weight--semibold);
}

.choices__description {
  display: block;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--normal);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}
}
@layer base{
form {
  div.duration {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    div.select {
      margin-left: 0.5em;
      width: 150px;
    }

    label.select {
      display: none;
    }
  }
}
}
@layer base{
.filterrific_current_sort_column {
  svg {
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    margin-left: 2px;
    vertical-align: baseline;
  }
}
}
@layer base{

.flash {
  border-left-style: solid;
  border-left-width: 4px;
  border-radius: var(--border-radius--small);
  border-color: var(--color--gray-500);
  background-color: var(--color--gray-100);
  padding-inline: var(--space--base);
  padding-block: var(--space--small);
  color: var(--color--gray-900);
  -webkit-box-shadow: var(--shadow--medium);
          box-shadow: var(--shadow--medium);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--night-gray-100);
  }
}

.flash--banner {
  position: relative;
}

.flash__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--small);
}

.flash__icon {
  padding-block: var(--space--xx-small);
}

.flash__icon--banner {
  padding-block: var(--space--x-small);
}

.flash__icon-svg {
  height: var(--space--medium);
  width: var(--space--medium);
  fill: currentcolor;
  color: var(--color--gray-500);
}

.flash__icon-svg--error {
  color: var(--color--red-500);
}

.flash__icon-svg--notice {
  color: var(--color--blue-500);
}

.flash__icon-svg--success {
  color: var(--color--green-500);
}

.flash__title {
  font-weight: var(--font-weight--bold);
}

.flash__message {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.flash-alert {
  border-color: var(--color--gray-500);
  background-color: var(--color--gray-100);
  color: var(--color--gray-900);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--night-gray-100);
  }
}

.flash-error {
  border-color: var(--color--red-500);
  background-color: var(--color--red-100);
  color: var(--color--red-900);

  &:is(.dark *) {
    background-color: var(--color--night-red-900);
    color: var(--color--night-red-100);
  }
}

.flash-notice {
  border-color: var(--color--blue-500);
  background-color: var(--color--blue-100);
  color: var(--color--blue-900);

  &:is(.dark *) {
    background-color: var(--color--night-blue-900);
    color: var(--color--night-blue-100);
  }
}

.flash-success {
  border-color: var(--color--green-500);
  background-color: var(--color--green-100);
  color: var(--color--green-900);

  &:is(.dark *) {
    background-color: var(--color--night-green-900);
    color: var(--color--night-green-100);
  }
}
}
@layer base{

footer {
  display: block;
  margin-top: 6rem;
  padding-block: var(--space--base);

  a {
    display: block;
    padding-inline: var(--space--small);
    padding-block: var(--space--xx-small);
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--semibold);
    color: var(--color--gray-700);

    &:is(.dark *) {
      color: var(--color--gray-300);
    }
  }

  a:hover {
    color: var(--color--gray-900);

    &:is(.dark *) {
      color: var(--color--gray-100);
    }
  }
}

.footer__divider {
  margin-bottom: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-300);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.footer__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  @media (width >= 48rem) {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.footer__cell {
  width: 100%;
  padding-inline: var(--space--base);
}

.footer__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style-type: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  @media (width >= 48rem) {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.footer__link-item {
  width: 50%;
  text-align: center;

  @media (width >= 40rem) {
    width: auto;
    text-align: left;
  }
}
}
@layer base{

.handbook-pages {
  .content-block {
    max-width: 80ch;
  }

  .main-header {
    margin-bottom: var(--space--base);
  }

  .main-app {
    overflow-y: visible;

    @media (width >= 48rem) {
      overflow-y: auto;
    }
  }

}

.handbook-layout {
  --handbook-bar--height: 3.25rem;
  --handbook-bar--top: var(--mobile-menu--height);
  --handbook-bar--bottom: calc(var(--mobile-menu--height) + var(--handbook-bar--height));
  max-width: 80ch;

  @media (width >= 48rem) {
    --handbook-bar--top: calc(var(--main-app--padding) * -1);
    --handbook-bar--bottom: var(--handbook-bar--height);
  }

  .handbook-content-wrapper :is(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: calc(var(--handbook-bar--bottom) + var(--space--base));
  }
}

.handbook-layout:has(.handbook-sidebar) {
  @container (width >= 64rem) {
    max-width: calc(80ch + 16rem);
  }
}

.handbook-bar__sentinel {
  height: 0;
}

.handbook-bar {
  position: sticky;
  top: var(--handbook-bar--top);
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--small);
  min-height: var(--handbook-bar--height);
  margin-bottom: var(--space--base);
  border: 1px solid transparent;
  border-radius: var(--border-radius--large);
  margin-inline: calc(var(--main-app--padding) * -1);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  -webkit-padding-end: max(var(--space--x-small), var(--handbook-bar--actions-clearance, 0px));
          padding-inline-end: max(var(--space--x-small), var(--handbook-bar--actions-clearance, 0px));
  -webkit-transition:
    background-color 150ms ease,
    border-color 150ms ease,
    border-radius 150ms ease,
    padding 150ms ease,
    -webkit-box-shadow 150ms ease;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    border-radius 150ms ease,
    padding 150ms ease,
    -webkit-box-shadow 150ms ease;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    border-radius 150ms ease,
    box-shadow 150ms ease,
    padding 150ms ease;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    border-radius 150ms ease,
    box-shadow 150ms ease,
    padding 150ms ease,
    -webkit-box-shadow 150ms ease;

  @media (width >= 48rem) {
    margin-inline: 0;
  }
}

.handbook-bar--floating {
  border-color: rgb(255 255 255 / 0.55);
  border-top-color: transparent;
  border-inline-width: 0;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--color--white) 62%, transparent);
  -webkit-box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.04),
    0 10px 30px -12px rgb(0 0 0 / 0.25),
    inset 0 -1px 0 rgb(255 255 255 / 0.6);
          box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.04),
    0 10px 30px -12px rgb(0 0 0 / 0.25),
    inset 0 -1px 0 rgb(255 255 255 / 0.6);
  backdrop-filter: blur(16px) saturate(180%);

  &:is(.dark *) {
    border-color: rgb(255 255 255 / 0.08);
    border-top-color: transparent;
    background-color: color-mix(in srgb, var(--color--night-gray-900) 60%, transparent);
    -webkit-box-shadow:
      0 0 0 1px rgb(0 0 0 / 0.3),
      0 10px 30px -12px rgb(0 0 0 / 0.6),
      inset 0 -1px 0 rgb(255 255 255 / 0.06);
            box-shadow:
      0 0 0 1px rgb(0 0 0 / 0.3),
      0 10px 30px -12px rgb(0 0 0 / 0.6),
      inset 0 -1px 0 rgb(255 255 255 / 0.06);
  }

  @media (width >= 48rem) {
    border-inline-width: 1px;
    border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
    padding-inline: var(--space--x-small);
  }
}

.handbook-bar--floating :is(.handbook-bar__menu-button, .handbook-search) {
  border-color: rgb(0 0 0 / 0.08);
  background-color: rgb(255 255 255 / 0.5);

  &:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.04);
  }
}

.handbook-bar__menu-button {
  anchor-name: --handbook-menu-button;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  cursor: pointer;
  border: 1px solid var(--color--gray-300);
  border-radius: var(--border-radius--medium);
  background-color: var(--color--white);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      border-color: var(--color--gray-400);
      color: var(--color--gray-900);
    }
  }

  &:focus-visible {
    outline-style: none;
    -webkit-box-shadow: 0 0 0 2px var(--color--indigo-500);
            box-shadow: 0 0 0 2px var(--color--indigo-500);
  }

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
    color: var(--color--gray-300);
  }
}

.handbook-bar__menu-icon {
  height: 1.125rem;
  width: 1.125rem;
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 2;
}

.handbook-bar__outline-button {
  anchor-name: --handbook-outline-button;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  height: 2.25rem;
  min-width: 2.25rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  border: 1px solid var(--color--gray-300);
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-inline: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      border-color: var(--color--gray-400);
      color: var(--color--gray-900);
    }
  }

  &:focus-visible {
    outline-style: none;
    -webkit-box-shadow: 0 0 0 2px var(--color--indigo-500);
            box-shadow: 0 0 0 2px var(--color--indigo-500);
  }

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
    color: var(--color--gray-300);
  }
}

.handbook-layout:has(.handbook-sidebar) .handbook-bar__outline-button {
  @container (width >= 64rem) {
    display: none;
  }
}

.handbook-bar--floating .handbook-bar__outline-button {
  border-color: rgb(0 0 0 / 0.08);
  background-color: rgb(255 255 255 / 0.5);

  &:is(.dark *) {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.04);
  }
}

.handbook-bar__outline-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 0.875rem;
  width: 0.875rem;
  fill: currentcolor;
}

.handbook-bar__breadcrumbs {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;

  .breadcrumb.current {
    -webkit-transition:
      opacity 150ms ease,
      translate 150ms ease,
      visibility 150ms;
    transition:
      opacity 150ms ease,
      translate 150ms ease,
      visibility 150ms;
  }
}

.handbook-bar:not(.handbook-bar--with-title) .handbook-bar__breadcrumbs .breadcrumb.current {
  @container (width < 64rem) {
    visibility: hidden;
    opacity: 0;
    translate: 0 0.25rem;
  }
}

.handbook-bar__type {
  display: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;

  .handbook-content-type__info {
    display: none;
  }

  @container (width < 30rem) {
    .handbook-content-type {
      padding-inline: 0.375rem;
    }

    .handbook-content-type__label {
      display: none;
    }
  }
}

.handbook-bar > .handbook-search {
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}

.handbook-bar__outline-button ~ .handbook-search {
  margin-left: 0;
}

.handbook-layout:has(.handbook-sidebar__search) .handbook-bar:not(.handbook-bar--with-search) > .handbook-search {
  @container (width >= 64rem) {
    visibility: hidden;
    opacity: 0;
  }
}

.handbook-bar--with-type .handbook-bar__type {
  display: block;
  -webkit-animation: handbook-fade-in 150ms ease;
          animation: handbook-fade-in 150ms ease;
}

@-webkit-keyframes handbook-fade-in {
  from {
    opacity: 0;
    translate: 0 -0.25rem;
  }
}

@keyframes handbook-fade-in {
  from {
    opacity: 0;
    translate: 0 -0.25rem;
  }
}

.handbook-menu {
  position-anchor: --handbook-menu-button;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  margin: var(--space--x-small) 0 0;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(75vh, 44rem);
  overflow-y: auto;
  border: 1px solid var(--color--gray-200);
  border-radius: var(--border-radius--large);
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--x-large);
          box-shadow: var(--shadow--x-large);
  padding: 0;
  color: inherit;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
  }

  @supports not (anchor-name: --a) {
    position: fixed;
    top: var(--handbook-bar--bottom);
    left: var(--space--base);
  }
}

.handbook-menu--outline {
  position-anchor: --handbook-outline-button;
  left: auto;
  right: anchor(right);
  width: min(18rem, calc(100vw - 2rem));

  @supports not (anchor-name: --a) {
    left: auto;
    right: var(--space--base);
  }
}

.handbook-menu__outline {
  margin: var(--space--small);
}

.handbook-menu__heading {
  padding: var(--space--small) var(--space--small) 0;
}

.handbook-menu .handbook-related {
  padding: var(--space--small);
}

.handbook-menu__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--color--gray-200);
  background-color: inherit;
  padding: var(--space--small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.handbook-menu__page-actions {
  margin-bottom: var(--space--small);
  border-bottom: 1px solid var(--color--gray-200);
  padding-bottom: var(--space--small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.handbook-layout:has(.handbook-sidebar__section) .handbook-menu__page-actions {
  @container (width >= 64rem) {
    display: none;
  }
}

.handbook-menu__tools {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);

  .handbook-menu__branch {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    margin-bottom: 0;
    margin-right: var(--space--xx-small);
  }

  .toc-branch-form__icon {
    top: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0;
    margin-left: var(--space--small);
    translate: 0 -50%;
  }

  .toc-branch-form__svg {
    margin: 0;
  }

  .toc-branch-form__select {
    height: calc(2.25rem - 2px);
    padding-block: 0;
    padding-left: 2.25rem;
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
  }
}

.handbook-menu__icon-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: var(--border-radius--medium);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-100);
      color: var(--color--gray-900);
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-300);

    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-800);
        color: var(--color--night-white);
      }
    }
  }
}

.handbook-menu__link-icon {
  height: 1rem;
  width: 1rem;
  fill: currentcolor;
}

.handbook-menu__heading,
.handbook-sidebar__heading {
  margin: 0;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.handbook-page-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.handbook-page-actions__form {
  display: block;
}

.handbook-page-actions__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  cursor: pointer;
  border-radius: var(--border-radius--medium);
  background-color: transparent;
  padding: var(--space--xx-small) var(--space--x-small);
  text-align: left;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-100);
      color: var(--color--gray-900);
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-300);

    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-800);
        color: var(--color--night-white);
      }
    }
  }
}

.handbook-page-actions__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  fill: currentcolor;
}

.handbook-page-actions__icon--stroke {
  fill: none;
  stroke: currentcolor;
}

.handbook-layout .handbook-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
}

.handbook-layout .handbook-page:has(> .handbook-sidebar) {
  @container (width >= 64rem) {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }
}

.handbook-article {
  min-width: 0;
}

.handbook-article__content {
  padding: var(--space--base);

  @media (width >= 48rem) {
    padding: var(--space--large) 2.5rem;
  }

  .handbook-content-wrapper {
    padding-inline: 0;
  }
}

.handbook-article__type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--space--small);

  + .handbook-content-wrapper > h1:first-child {
    padding-top: 0;
  }
}

.handbook-layout .handbook-improve {
  height: auto;
  padding: var(--space--large) var(--space--base);

  @media (width >= 48rem) {
    padding: var(--space--large) 2.5rem;
  }
}

.handbook-improve__eyebrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  margin: 0;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.handbook-improve__eyebrow-icon {
  height: 0.875rem;
  width: 0.875rem;
  fill: none;
  stroke: currentcolor;
}

.handbook-improve__heading {
  margin-top: var(--space--small);
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.handbook-improve__text {
  max-width: 36rem;
  margin-top: var(--space--x-small);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.handbook-improve__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  margin-top: var(--space--medium);
}

.handbook-improve__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 1rem;
  width: 1rem;
}

.handbook-improve__icon--stroke {
  fill: none;
}

.handbook-sidebar {
  display: none;

  @container (width >= 64rem) {
    display: block;
  }
}

.handbook-sidebar__search {
  padding: var(--space--large) var(--space--base) 0;

  .handbook-search {
    width: 100%;
    margin-left: 0;
  }
}

.handbook-sidebar__sticky {
  position: sticky;
  top: calc(var(--handbook-bar--top) + var(--handbook-bar--height) + var(--space--base));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--large);
  max-height: calc(100vh - var(--handbook-bar--bottom) - var(--space--large));
  overflow-y: auto;
  padding: var(--space--large) var(--space--base) var(--space--base);
}

.handbook-sidebar__section .handbook-page-actions {
  margin-top: var(--space--x-small);
  margin-left: calc(var(--space--x-small) * -1);
}

.handbook-outline__list {
  margin-top: var(--space--small);
  list-style: none;
  border-left: 1px solid var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.handbook-outline__link {
  display: block;
  margin-left: -1px;
  border-left: 2px solid transparent;
  padding-block: var(--space--xx-small);
  padding-left: var(--space--small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      color: var(--color--gray-900);
    }
  }

  &[aria-current] {
    border-left-color: var(--color--red-600);
    font-weight: var(--font-weight--medium);
    color: var(--color--gray-900);
  }

  &:is(.dark *) {
    color: var(--color--gray-400);

    &:hover {
      @media (hover: hover) {
        color: var(--color--night-white);
      }
    }

    &[aria-current] {
      border-left-color: var(--color--red-400);
      color: var(--color--night-white);
    }
  }
}

.handbook-outline__item--h3 .handbook-outline__link {
  padding-left: 1.5rem;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.handbook-content {
  .logo {
    display: none;
    fill: currentcolor;
  }
}

.handbook-content-wrapper,
.handbook-editor {
  padding-inline: var(--space--base);
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--night-white);
  }

  h1, h2 {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--color--gray-300);
    padding-bottom: var(--space--x-small);
  }

  h1 {
    font-size: 1.75em;
  }

  h2 {
    font-size: 1.55em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 1em;
  }

  blockquote {
    padding-inline: var(--space--base);
    padding-block: 0px;
  }

  h1, h2 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
  }

  h3, h4, h5, h6 {
    margin-top: 16px;
    font-weight: 600;
    line-height: 1;
  }

  h1:first-child {
    margin-top: 0;
  }

  > :has(+ :is(.handbook-content__summary, .handbook-content__updated)) {
    margin-bottom: 0;
  }

  ol, li {
    margin-left: var(--space--base);
  }

  ul {
    li {
      list-style-type: disc;
    }
  }

  ol {
    li {
      list-style-type: decimal;
    }
  }

  li + li {
    margin-top: 0.25em;
  }

  .anchor {
    display: none;

    &:hover {
      display: inline;
    }
  }
  :hover > .anchor {
    display: inline-block;
    float: left;
    margin-left: -16px;
  }

  table {
    margin-top: var(--space--base);
    overflow-x: auto;
    display: block;
  }

  th, td {
    white-space: normal;
  }

  a {
    color: var(--color--blue-600);
    text-decoration: underline;

    &:is(.dark *) {
      color: var(--color--blue-400);
    }
  }
}

.vditor-reset {
  color: inherit;

  h1, h2, h3, h4, h5, h6 {
    padding: 0;
  }
}

.vditor-ir__link {
  color: var(--color--blue-600);

  &:is(.dark *) {
    color: var(--color--blue-400);
  }
}

.handbook-toc {
  .handbook-toc-list {
    margin-top: var(--space--x-small);
    list-style-type: none;
    padding-inline: var(--space--small);
    padding-top: var(--space--small);
    padding-bottom: var(--space--small);
    overflow-y: auto;

    :where(& > :not(:last-child)) {
      -webkit-margin-before: 0;
              margin-block-start: 0;
      -webkit-margin-after: var(--space--xx-small);
              margin-block-end: var(--space--xx-small);
    }
  }

  .active {
    border-radius: var(--border-radius--medium);
    background-color: var(--color--gray-200);

    &:is(.dark *) {
      background-color: var(--color--gray-800);
      color: var(--color--gray-300);
    }
  }

  details > summary::marker,
  details > summary::-webkit-details-marker {
    color: var(--color--gray-400);

    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-100);
        color: var(--color--gray-900);
      }
    }

    &:is(.dark *) {
      color: var(--color--gray-500);

      &:hover {
        @media (hover: hover) {
          background-color: var(--color--gray-800);
          color: var(--color--gray-300);
        }
      }
    }
  }

}

.vditor-toolbar {
  border-top-left-radius: var(--border-radius--large);
  border-top-right-radius: var(--border-radius--large);

  &.vditor-toolbar--pin {
    top: calc(var(--handbook-bar--top) + var(--handbook-bar--height));
  }

  .vditor-toolbar__item svg.new-page {
    fill: transparent;
  }
}

.handbook_change_type {
  margin-bottom: var(--space--base);

  .radio {
    display: block;

    label {
      padding-bottom: 0px;
    }
  }
}

.handbook-content-type {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
  border-radius: var(--border-radius--full);
  padding-block: 0.125rem;
  padding-inline: 0.625rem;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.handbook-content-type__icon {
  height: 0.875rem;
  width: 0.875rem;
  fill: currentcolor;
}

.handbook-content-type__info {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.handbook-content-type--policy {
  background-color: var(--color--yellow-200);
  color: var(--color--yellow-900);

  &:is(.dark *) {
    background-color: var(--color--yellow-900);
    color: var(--color--yellow-100);
  }
}

.handbook-content-type--guide {
  background-color: var(--color--blue-200);
  color: var(--color--blue-900);

  &:is(.dark *) {
    background-color: var(--color--blue-900);
    color: var(--color--blue-100);
  }
}

.handbook-policy-information {
  width: var(--space--small);
  color: var(--color--gray-600);
  vertical-align: text-top;
  margin: 1px 0px;

  &:is(.dark *) {
    color: var(--color--gray-200);
  }
}

.handbook-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 2.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  margin-left: auto;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-300);
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-inline: var(--space--small);
  text-align: left;

  &:hover {
    @media (hover: hover) {
      border-color: var(--color--gray-400);

      .handbook-search__label {
        color: var(--color--gray-800);
      }
    }
  }

  &:focus-visible {
    outline-style: none;
    -webkit-box-shadow: 0 0 0 2px var(--color--indigo-500);
            box-shadow: 0 0 0 2px var(--color--indigo-500);
  }

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);

    &:hover {
      @media (hover: hover) {
        border-color: var(--color--gray-500);

        .handbook-search__label {
          color: var(--color--night-white);
        }
      }
    }
  }
}

.handbook-search__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: var(--space--base);
  width: var(--space--base);
  fill: currentcolor;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.handbook-search__label {
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;

  @container (width >= 40rem) {
    display: inline;
  }
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.handbook-search__shortcut {
  display: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-300);
  border-radius: var(--border-radius--small);
  padding-inline: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    color: var(--color--gray-300);
  }

  @container (width >= 40rem) {
    display: inline;
  }
}

@media print {
  .handbook-pages {
    .new_bookmark,
    .delete_bookmark,
    .handbook-search,
    .handbook-toc,
    .handbook-bar,
    .handbook-sidebar,
    .handbook-improve,
    .main-header,
    nav,
    > button,
    footer,
    a[aria-label=Edit] {
      display: none !important;
    }

    .section {
      -webkit-filter: none;
              filter: none;
    }

    .content-block,
    .handbook-content-wrapper {
      width: 100% !important;
      max-width: 100% !important;
    }

    .anchor {
      display: none;
    }

    .logo {
      display: block;
      fill: #e03131;
      height: 32px;
      margin: 1em;
      width: 100%;
    }
  }
}

.handbook-editor--flush {
  padding-inline: 0;
  padding-bottom: var(--space--x-small);
}

.handbook-editor__surface {
  border-style: solid;
  border-width: 0px;
  border-radius: var(--border-radius--large);
}

.toc-branch-form {
  position: relative;
  width: 100%;
  margin-bottom: var(--space--base);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);
  font-weight: var(--font-weight--normal);
  padding: 0;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
  }
}

.toc-branch-form__icon {
  position: absolute;
  left: 0;
  top: 0;
  margin-left: var(--space--base);
  margin-top: -0.125rem;
  pointer-events: none;
}

.toc-branch-form__svg {
  margin-top: var(--space--base);
  margin-right: var(--space--x-small);
  fill: currentcolor;
  color: var(--color--gray-700);
}

.toc-branch-form__select {
  margin: 0;
  width: 100%;
  border-style: solid;
  border-width: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-left: 2.5rem;

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.toc-item {
  :where(& > :not(:last-child)) {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: var(--space--xx-small);
            margin-block-end: var(--space--xx-small);
  }
}

.toc-item--indented {
  padding-left: var(--space--base);
}

.toc-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--border-radius--medium);
  text-align: left;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      color: var(--color--gray-900);
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-300);

    &:hover {
      @media (hover: hover) {
        color: var(--color--gray-300);
      }
    }
  }
}

.toc-link--readme {
  padding-left: var(--space--small);
  padding-right: var(--space--xx-small);
  padding-block: var(--space--x-small);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-200);
    }
  }

  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color--blue-900);
      }
    }
  }

  &:focus {
    outline-style: none;
    -webkit-box-shadow: 0 0 0 2px var(--color--indigo-500);
            box-shadow: 0 0 0 2px var(--color--indigo-500);

    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
}

.toc-link--item {
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-100);
      text-decoration-line: underline;
    }
  }

  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-800);
      }
    }
  }
}

.toc-link__icon {
  margin-right: var(--space--xx-small);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: var(--space--base);
  width: var(--space--base);
  color: var(--color--gray-500);
}

.toc-link__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.toc-folder-summary {
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  border-radius: var(--border-radius--medium);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-600);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-100);
      color: var(--color--gray-900);
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-300);

    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-800);
        color: var(--color--gray-300);
      }
    }
  }
}

.toc-folder-summary__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

.toc-sublist {
  list-style: none;
  margin-left: 1.25rem;
  padding-left: var(--space--x-small);
  border-left-style: solid;
  border-left-width: 1px;

  &:is(.dark *) {
    border-color: var(--color--gray-500);
  }
}

.branch-notice {
  padding: 1.25rem;
}

.branch-notice__message {
  width: 100%;
  margin-bottom: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--x-small);
}

.branch-notice__icon {
  margin-top: 0.375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  fill: currentcolor;
}

.branch-notice__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.handbook-change__callout {
  margin-bottom: var(--space--base);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--small);
  padding: var(--space--base);
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-800);
  }
}

.handbook-change__callout-title {
  margin: 0;
  padding: 0;
}

.handbook-change__callout-title--inline {
  display: inline-block;
}

.handbook-change__list {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.handbook-content__summary {
  margin-bottom: var(--space--base);
  font-style: italic;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);
}

.handbook-content__updated {
  margin-bottom: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }

  a {
    color: inherit;
    text-decoration: underline;

    &:is(.dark *) {
      color: inherit;
    }
  }
}

.handbook-related .handbook-page-actions {
  margin-top: var(--space--x-small);
  margin-left: calc(var(--space--x-small) * -1);
}

.handbook-related__link {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.handbook-related__icon {
  margin-top: 0.125rem;
}

.handbook-missing__note {
  text-align: center;
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
}

.handbook-missing__note--roomy {
  margin: var(--space--large);
}

.handbook-folder__note {
  margin-top: var(--space--large);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.handbook-anchor-icon {
  color: var(--color--gray-500);
}

.toolbar-btn--right {
  float: right;
}
}
@layer base{
.tippy-box[data-theme~='hovercard'] {
  width: 25rem;

  .dark & {
    /* Toggle these styles only when dark mode is applied */
    border-color: var(--color--gray-500);
    background-color: var(--color--night-gray-900);
    color: var(--color--gray-200);

    .tippy-arrow:before {
      border-top-color: var(--color--night-gray-900);
    }

    .tippy-arrow:after {
      border-top-color: var(--color--gray-500);
    }
  }

  > .tippy-content {
    padding: 0;
  }
}
}
@layer base{
.info-list {
  > div {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--color--gray-200);
    padding-inline: var(--space--base);
    padding-block: 1.25rem;

    &:is(.dark *) {
      border-color: var(--color--gray-700);
    }
  }

  dt {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--medium);
  }

  dd {
    margin-top: var(--space--xx-small);
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    color: var(--color--gray-900);

    &:is(.dark *) {
      color: var(--color--gray-100);
    }
  }
}
@media (width >= 40rem) {
  .info-list {
    > div {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space--base);
      padding-inline: var(--space--base);
    }

    dd {
      grid-column: span 2 / span 2;
      margin-top: 0px;
    }
  }
}

.info-list-two-column {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (width >= 40rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  > div {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--color--gray-100);
    padding-inline: var(--space--base);
    padding-block: var(--space--base);

    &:is(.dark *) {
      border-color: var(--color--night-gray-500);
    }

    &:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    > :first-child {
      display: block;
      font-size: var(--font-size--small);
      line-height: 1.5rem;
      font-weight: var(--font-weight--medium);
    }
    > :last-child {
      margin-top: var(--space--xx-small);
      display: block;
      font-size: var(--font-size--small);
      line-height: 1.5rem;

      @media (width >= 40rem) {
        margin-top: var(--space--x-small);
      }
    }
  }
}

.info-list dd.mono {
  font-family: var(--font-family--mono);
}

.info-list--small {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.info-list__term--inset {
  padding-left: var(--space--x-small);
}
}
@layer base{

.root-container {
  --mobile-menu--height: 4rem;
  background-color: var(--color--gray-100);
  container-type: inline-size;
  margin: 0;
  width: 100vw;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }

  @media (width >= 48rem) {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 48px 1fr;
  }
}

.main-app header {
  margin-top: 4rem;

  @media (width >= 48rem) {
    margin-top: 0;
  }
}

.main-app {
  --main-app--padding: var(--space--base);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  container-type: inline-size;
  -webkit-box-shadow: 5px 0px 25px -15px rgba(0, 0, 0, 0.2) inset;
          box-shadow: 5px 0px 25px -15px rgba(0, 0, 0, 0.2) inset;
  overflow-y: auto;
  padding: var(--main-app--padding);

  @media (width >= 48rem) {
    --main-app--padding: var(--space--large);
  }
}

.main-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

body.side-nav-expanded {
  .root-container {
    @media (width >= 48rem) {
      grid-template-columns: 256px 1fr;
    }
  }
}

.page-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space--base);
  margin-top: var(--space--base);
  margin-bottom: var(--space--large);
  max-width: var(--container--large);
}

.page-row--full {
  max-width: 100%;
}

.page-row--with-sidebar {
  grid-template-columns: 1fr;

  @container (min-width: 48rem) {
    grid-template-columns: 3fr 2fr;
  }
}

.page-block {
  margin-top: var(--space--base);
  margin-bottom: var(--space--large);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.page-block--flush {
  margin-bottom: 0px;
}

.page-block--bare {
  margin: 0px;
}

.page-block--centered {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.page-block--constrained,
.content-block--constrained {
  @media (width >= 80rem) {
    max-width: var(--container--large);
  }
}

.page-block--reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;

  @media (width >= 48rem) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.content-block {
  margin-bottom: var(--space--large);
  width: 100%;

  @media (width >= 48rem) {
    padding-left: var(--space--base);
  }

  &:last-of-type {
    margin-bottom: 0px;
  }

  &:first-of-type {
    padding-left: 0px;
  }
}

/* useful for a height constrained content block with two sections;
the first section is sized to fit it's vertical content space and the second
section is allowed to expand to fill the remaining height */
.content-block--with-leading-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: start;
      align-self: start;
  max-height: 100%;

  > :first-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  > :nth-child(2) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

@media screen {
  .section {
    -webkit-box-shadow: var(--shadow--large);
            box-shadow: var(--shadow--large);
  }
}

.section {
  position: relative;
  margin-bottom: var(--space--medium);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-inline: 0px;
  overflow-wrap: break-word;

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  &.no-overflow {
    overflow: hidden;
  }
}

.section--narrow-only {
  display: block;

  @media (width >= 48rem) {
    display: none;
  }
}

.section--wide-only {
  display: none;

  @media (width >= 48rem) {
    display: block;
  }
}

.section--auto-height {
  height: auto;
}

.section--full {
  width: 100%;
}

.section--max-lg {
  max-width: 64rem;
}

.section--flush {
  margin-bottom: 0px;
}

.section--tight {
  margin-bottom: var(--space--base);
}

.section--inset {
  padding-inline: var(--space--x-small);
}

.section--padded-bottom {
  padding-bottom: var(--space--x-small);
}

.section--padded {
  padding: var(--space--base);
}

.modal .section:is(.dark *) {
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-600);
}

.section-header {
  margin-bottom: 0px;
  border-top-left-radius: var(--border-radius--small);
  border-top-right-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 0px;
  padding-inline: var(--space--base);
  padding-block: var(--space--small);

  &:is(.dark *) {
    border-color: var(--color--gray-600);
  }
}

.section-header--bordered {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.section-header--borderless {
  border-style: none;
}

.section-header--flush-bottom {
  padding-bottom: 0px;
}

.section-header--expandable {
  padding-block: var(--space--base);
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--white);
  }
}

.section-header__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);

  svg {
    fill: currentcolor;
  }
}

.section-header--spaced {
  margin-bottom: var(--space--medium);
}

.section-header--spaced-tight {
  margin-bottom: var(--space--base);
}

.section-content {
  display: block;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;

  &.no-header {
    padding-block: var(--space--base);
  }
}

.section-content--padded {
  padding: var(--space--base);
}

.section-content--gutters {
  padding-inline: var(--space--base);
}

.section-content--gutters-large {
  padding-inline: var(--space--large);
}

.section-content--inset {
  padding-inline: var(--space--x-small);
}

.section-content--padded-block {
  padding-block: var(--space--x-small);
}

.section-content--tight-bottom {
  padding-bottom: var(--space--x-small);
}

.section-meta-strip {
  border-bottom-left-radius: var(--border-radius--small);
  border-bottom-right-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);

  &:is(.dark *) {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-900);
  }
}

.section-content__note {
  padding-inline: var(--space--base);
}

.section-content--spaced-top {
  margin-top: var(--space--large);
}

.section-content--padded-top {
  padding-top: var(--space--base);
}

.section-content--divided {
  border-top-style: solid;
  border-top-width: 1px;
}

.section-content--tall {
  height: 100%;
}

.section-content--screen-height {
  height: 100dvh;
}

.section-content--bordered {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.header-inset {
  position: relative;
  max-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding-inline: 0px;

  svg {
    width: var(--space--medium);
    text-align: center;
  }
}

.header-inset--right {
  text-align: right;
}

.header-inset__title--flush {
  padding-block: 0px;
}

.header-inset--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--space--xx-small);
}

.section-header__icon {
  fill: currentcolor;
}

.content-block--half {
  @media (width >= 64rem) {
    margin-bottom: 0px;
    width: 50%;
  }
}

.content-block--flush-lg {
  @media (width >= 64rem) {
    margin-bottom: 0px;
  }
}

.content-block--flush {
  margin-bottom: 0px;
}

.content-block--full {
  width: 100%;
}

.content-block--clip {
  overflow: hidden;
}

.content-block--bare {
  margin: 0px;
  padding: 0px;
}

.content-block--third-2xl {
  @media (width >= 96rem) {
    width: calc(1/3 * 100%);
  }
}

.only-child-reveal {
  display: none;

  &:only-child {
    display: block;
  }
}

.content-block--third-lg {
  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}

.content-block--half-md {
  @media (width >= 48rem) {
    width: 50%;
  }
}

.content-block--flush-md {
  @media (width >= 48rem) {
    margin-bottom: 0px;
  }
}

.content-block--half-2xl {
  @media (width >= 96rem) {
    width: 50%;
  }
}

.content-block--five-twelfths-md {
  @media (width >= 48rem) {
    width: calc(5/12 * 100%);
  }
}

.content-block--quarter-lg {
  @media (width >= 64rem) {
    width: 25%;
  }
}

.content-block--half-lg {
  @media (width >= 64rem) {
    width: 50%;
  }
}

.content-block--half-xl {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: 50%;
  }
}

.content-block--two-thirds-lg {
  @media (width >= 64rem) {
    width: calc(2/3 * 100%);
  }
}

.content-block--two-thirds-md {
  @media (width >= 48rem) {
    width: calc(2/3 * 100%);
  }
}

.content-block--two-thirds-2xl {
  @media (width >= 96rem) {
    width: calc(2/3 * 100%);
  }
}

.content-block--two-thirds-xl {
  @media (width >= 80rem) {
    width: calc(2/3 * 100%);
  }
}

.content-block--third-xl {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(1/3 * 100%);
  }
}

.content-block--flush-2xl {
  @media (width >= 96rem) {
    margin-bottom: 0px;
  }
}

.content-block--flush-xl {
  @media (width >= 80rem) {
    margin-bottom: 0px;
  }
}

.content-block--column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.content-block--list {
  @media (width >= 48rem) {
    width: calc(7/12 * 100%);
  }

  @media (width >= 64rem) {
    width: 75%;
  }
}

.content-block--filters {
  @media (width >= 48rem) {
    width: calc(5/12 * 100%);
  }

  @media (width >= 64rem) {
    width: 25%;
  }
}

.view-all-link {
  display: block;
  border-bottom-left-radius: var(--border-radius--small);
  border-bottom-right-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);
  padding-block: var(--space--x-small);
  text-align: center;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  text-transform: uppercase;

  &:is(.dark *) {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-900);
  }
}

.table-scroll {
  overflow-x: auto;
}

.count-pill {
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);
  margin-right: var(--space--xx-small);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-gray-200);
  }
}

.count-pill--after {
  margin-right: 0;
  margin-left: var(--space--xx-small);
}

.count-pill--bare {
  margin-right: 0;
}

.count-pill--spaced {
  margin-inline: var(--space--x-small);
}

.pagination {
  margin-block: var(--space--base);
  width: 100%;
  text-align: center;
}

.guest-container {
  padding-inline: var(--space--base);
  margin-block: var(--space--base);
  margin-inline: auto;
  width: 100%;

  @media (width >= 48rem) {
    padding-inline: 2.5rem;
    margin-block: 2.5rem;
    width: 75%;
  }

  @media (width >= 64rem) {
    width: 50%;
  }
}

.main-header {
  @media (width >= 48rem) {
    margin-bottom: 3rem;
  }
}

.grid-background {
  background-image: url(/assets/grid-7e80b93772067fcd5d3ec89ede391d1177f2f4344ece298e0a3bdff2ce3439fa.png);
  background-repeat: no-repeat;
  background-size: 500px 411px;
  background-attachment: local;
  background-position: top -40px right -80px;
}

.root-container.grid-background {
  @media (width >= 48rem) {
    background-image: none;
  }
}

.main-app.grid-background {
  background-image: none;

  @media (width >= 48rem) {
    background-image: url(/assets/grid-7e80b93772067fcd5d3ec89ede391d1177f2f4344ece298e0a3bdff2ce3439fa.png);
  }
}
}
@layer base{

:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

.dark {
  --color-note: #2f81f7;
  --color-tip: #3fb950;
  --color-warning: #d29922;
  --color-severe: #db6d28;
  --color-caution: #f85149;
  --color-important: #a371f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

ol + .markdown-alert,
ul + .markdown-alert {
  margin-top: 16px;
}

.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}
}
@layer base{

.page-overlay-for-modal {
  position: fixed;
  top: 0px;
  left: 0px;
  margin: 0px;
  display: none;
  height: 100%;
  width: 100%;
  background-color: var(--color--gray-900);
  padding: 0px;
  opacity: 75%;

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
    opacity: 90%;
  }

  z-index: 200;
}

.modal {
  visibility: hidden;
  position: absolute;
  top: 0px;
  margin-top: var(--space--large);
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0%;

  z-index: 201;
}

.modal.active {
  visibility: visible;
  opacity: 100%;
}

.modal__frame {
  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.modal__content {
  width: 100%;

  @media (width >= 80rem) {
    margin-bottom: 0px;
  }
}

.modal__content--constrained {
  @media (width >= 40rem) {
    max-width: 32rem;
  }

  @media (width >= 64rem) {
    max-width: 36rem;
  }

  @media (width >= 80rem) {
    max-width: 42rem;
  }

  @media (width >= 96rem) {
    max-width: 56rem;
  }
}

.modal-close {
  cursor: pointer;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }

  svg {
    fill: currentcolor;
  }
}

.modal-close:hover {
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-200);
  }
}

dialog.dialog-modal {
  width: 50%;
  margin: auto;
  overflow: visible;
  border-radius: var(--border-radius--large);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);
  padding: var(--space--base);

  &:is(.dark *) {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--gray-500);
    background-color: var(--color--night-gray-900);
    color: var(--color--night-white);
  }
}

.dialog-modal__close {
  float: right;
  fill: currentcolor;
  cursor: pointer;
}

.dialog-modal__title {
  font-weight: var(--font-weight--bold);
}
}
@layer base{
form {
  div.money {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    label {
      width: 100%;
    }

    div.input {
      display: inline-block;
    }

    div.select {
      display: inline-block;
      margin-left: 0.5em;
      width: 150px;
    }

    label.integer,
    label.select {
      display: none;
    }
  }
}
}
@layer base{

.person-link-image {
  display: inline-block;
  width: var(--space--medium);
  border-radius: var(--border-radius--full);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--gray-100);
}

.person-link-image--large {
  width: var(--space--large);
  height: var(--space--large);
}

.person-link-unavailable {
  border-color: var(--color--red-400);
}

.person-link-name {
  margin-left: var(--space--xx-small);
  display: inline-block;
  white-space: nowrap;

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }
}

.person-link-name--no-image {
  margin-left: 0px;
}

.person-link-with-availability-indicator {
  display: inline-block;
  position: relative;
}

.person-link-with-availability-indicator .person-availability-container {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: initial;
  font-size: 0;
}

.person-link-with-availability-indicator .person-availability {
  height: auto;
}

.person-availability-container {
  margin-left: var(--space--xx-small);
  display: inline-block;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.person-available {
  color: var(--color--green-400);
}

.person-unavailable {
  color: var(--color--red-400);
}

.schedule-content {
  .person-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .person-link-name {
    text-align: left;
    white-space: normal;
  }
  .person-link-image {
    display: none;

    @media (width >= 40rem) {
      display: inline-block;
    }
  }
}

.person-hovercard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: var(--space--base);
  white-space: normal;
  text-align: left;

  > :not(:last-child) {
    -webkit-margin-end: var(--space--small);
            margin-inline-end: var(--space--small);
  }
}

.person-hovercard__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 6rem;
  width: 6rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-200);
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
}

.person-hovercard__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.person-hovercard__position {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}

.person-hovercard__name {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.person-hovercard__meta,
.person-hovercard__meta-link {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}

.person-hovercard__icon {
  width: 0.75rem;
  fill: currentcolor;
}

.person-hovercard__footer {
  margin-top: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--color--gray-100);
  padding: var(--space--base);
  text-align: left;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-700);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    color: var(--color--night-gray-100);
  }
}

.person-hovercard__fact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}

.person-hovercard__fact--spaced {
  margin-top: var(--space--xx-small);
}

.person-hovercard__fact-icon {
  margin-right: var(--space--x-small);
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.person-hovercard__fact-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  white-space: normal;
}

.stacked-avatar {
  position: relative;
  margin-left: -0.5rem;
}

.avatar-cluster {
  padding-left: var(--space--x-small);
}

.stacked-avatar--inline {
  display: inline;
}

.person-link-image--nudged {
  margin-left: var(--space--xx-small);
}
}
@layer base{

.pulse-question {
  margin-bottom: var(--space--x-small);
}

.pulse-question__label {
  display: block;
  margin-bottom: var(--space--xx-small);
}

.pulse-comments {
  margin-top: var(--space--x-small);
}
}
@layer base{

.report__cell--wide {
    min-width: 250px;
    white-space: normal;
    vertical-align: top;
}

.report-pagination {
  padding: var(--space--base);
}
}
@layer base{
.resource-list {
  margin-inline: var(--space--base);
  padding-block: var(--space--base);

  li {
    margin-bottom: var(--space--base);
    width: 100%;
    text-align: center;

    &:last-child {
      margin-bottom: 0px;
    }
  }

  a {
    width: 100%;
    text-align: center;

    svg {
      margin-right: var(--space--xx-small);
    }
  }
}
}
@layer base{
/* Background for ending projects on schedule */
.stripes {
  background: repeating-linear-gradient(
    -45deg,
    #e2e0ec,
    #e2e0ec 10px,
    #cbcbd3 10px,
    #cbcbd3 20px
  );
}

.dark .stripes {
  background: repeating-linear-gradient(
    -45deg,
    #3d3e44,
    #3d3e44 10px,
    #4c4c54 10px,
    #4c4c54 20px
  );
}

.conflict {
  background-color: var(--color--red-400);

  &:is(.dark *) {
    background-color: var(--color--red-800);
  }
}

.rotation-needed::after {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 30;
  display: block;
  height: 0px;
  width: 0px;
  border-color: var(--color--yellow-300);

  &:is(.dark *) {
    border-color: var(--color--yellow-400);
  }

  content: "";
  border-top-width: 16px;
  border-left: 16px solid transparent !important;
}

.adjusted-work-week::after {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  display: block;
  height: 0px;
  width: 0px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--gray-700);
  }

  content: "";
  border-bottom-width: 16px;
  border-left: 16px solid transparent !important;
}

.schedule-content thead {
  display: table-header-group;
}

/* Keep the last action box from extending past right of table */
td:last-child div.actions {
  margin-left: -10rem;
}

.agenda-block--nonbillable {
  background-color: var(--color--blue-200);

  &:is(.dark *) {
    background-color: var(--color--blue-800);
  }
}

.agenda-block--billable {
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    background-color: var(--color--gray-700);
  }
}

.agenda {
  position: relative;
  display: table-cell;
  min-width: 10rem;
  border-right-style: solid;
  border-right-width: 1px;
  padding: 0;
}

.agenda-link {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.agenda__days {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--space--large);
  padding-inline: 0;
}

.agenda__day {
  display: inline-block;
  height: var(--space--large);
  text-align: center;
  vertical-align: middle;
}

.agenda__day-fill {
  height: 100%;
  width: 100%;
}

.agenda__day-icon {
  height: 100%;
  width: 100%;
  fill: currentcolor;
  color: var(--color--gray-500);
}

.agenda__day-icon--partial {
  opacity: 50%;
}

.agenda__summary {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  margin-top: -2rem;
  height: var(--space--large);
  width: 10rem;
  padding-block: var(--space--x-small);
  padding-left: var(--space--x-small);
  padding-right: var(--space--medium);
  vertical-align: middle;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda__summary--hidden {
  visibility: hidden;
}

.schedule__table {
  position: relative;
}

.schedule__head-row {
  position: sticky;
  top: -1px;
  z-index: 10;
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.schedule__nav-cell {
  position: sticky;
  left: 0;
  z-index: 50;
  width: auto;
  gap: var(--space--base);
  border-right-style: solid;
  border-right-width: 1px;
  padding-inline: var(--space--base);
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  @media (width >= 40rem) {
    position: static;
  }

  svg {
    fill: currentcolor;
  }
}

.schedule__nav--previous {
  float: left;
}

.schedule__nav--next {
  float: right;
}

.schedule__week-cell {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-inline: var(--space--x-small);
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.schedule__week-label--long {
  display: none;

  @media (width >= 64rem) {
    display: inline;
  }
}

.schedule__week-label--short {
  display: inline;

  @media (width >= 64rem) {
    display: none;
  }
}

.schedule__team-cell {
  position: sticky;
  left: 0;

  @media (width >= 40rem) {
    position: static;
  }
}

tr.person {
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.schedule__person-cell {
  position: sticky;
  left: 0;
  z-index: 50;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 8rem;
  min-height: 3.5rem;
  border-right-style: solid;
  border-right-width: 1px;
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  @media (width >= 40rem) {
    position: static;
    min-width: 14rem;
  }
}

.schedule__person-name {
  display: inline-block;
}

.schedule__rotation-flag {
  fill: currentcolor;
  border-radius: var(--border-radius--full);
  background-color: var(--color--yellow-500);
}

.schedule__person-extras {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.schedule__grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.schedule__meta {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
}

.schedule__staff-icon {
  fill: currentcolor;
  color: var(--color--gray-500);

  &:hover {
    @media (hover: hover) {
      color: var(--color--red-500);
    }
  }

  &:is(.dark *) {
    color: var(--color--night-gray-400);

    &:hover {
      @media (hover: hover) {
        color: var(--color--red-400);
      }
    }
  }
}

.schedule__date-range {
  margin-top: -0.5rem;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.schedule__actions-wide {
  display: none;

  @media (width >= 64rem) {
    display: block;
  }
}

.schedule__toggle {
  display: none;

  @media (width >= 48rem) {
    display: inline-block;
  }
}

.schedule__actions-menu {
  position: relative;
  display: inline-block;
  text-align: left;

  @media (width >= 64rem) {
    display: none;
  }
}

.schedule__menu-button {
  margin-bottom: 0px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.schedule__actions-dropdown {
  position: absolute;
  right: 0;
  z-index: 60;
  width: 13rem;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--large);
          box-shadow: var(--shadow--large);

  &:is(.dark *) {
    border-color: var(--color--gray-600);
    background-color: var(--color--gray-800);
  }
}

.schedule__actions-item {
  display: block;
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  color: var(--color--black);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color--gray-100);
    }
  }

  &:is(.dark *) {
    border-color: var(--color--gray-600);

    &:hover {
      @media (hover: hover) {
        background-color: var(--color--gray-700);
      }
    }
  }
}

.schedule__actions-item--divided {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.schedule__scroll {
  height: 80vh;
  overflow-x: auto;
  padding-bottom: 8rem;
}

.daily-schedule__row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.daily-schedule__person {
  grid-column: span 2 / span 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
}

.daily-schedule__person-link {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.daily-schedule__day-head {
  grid-column: span 1 / span 1;
  top: 0;
  z-index: 50;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: var(--space--x-small);
  background-color: var(--color--white);
  text-align: left;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  text-transform: uppercase;

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.daily-schedule__grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.daily-agenda__week {
  grid-column: span 2 / span 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
  padding-inline: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
}

.daily-agenda__day {
  grid-column: span 1 / span 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 5rem;
  gap: var(--space--xx-small);
  border-left-style: solid;
  border-left-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
  padding-right: 0.125rem;
}

.daily-agenda__event {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50%;
  width: 100%;
  padding: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-agenda__reservation-icon {
  height: 100%;
  width: 100%;
  fill: currentcolor;
  color: var(--color--indigo-700);
}

.daily-agenda__event-link {
  color: var(--color--red-800);
}

.attention-items {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.attention-items__title {
  padding: 0;
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--bold);
}

.attention-items__label {
  display: inline-block;
}

.attention-items__count {
  display: inline-block;
  margin-left: var(--space--x-small);
  border-radius: var(--border-radius--full);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--red-500);
  background-color: var(--color--red-100);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    background-color: var(--color--night-red-800);
    color: var(--color--night-gray-200);
  }
}

.attention-items__body {
  padding: var(--space--base);
  gap: var(--space--base);

  @media (width >= 48rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.attention-items__column {
  width: 100%;
}

.attention-items__heading {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
}

.attention-items__heading--split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.attention-items__view-all {
  padding-inline: var(--space--x-small);
}

.attention-items__list {
  margin-top: var(--space--medium);

  :where(& > :not(:last-child)) {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: var(--space--x-small);
            margin-block-end: var(--space--x-small);
  }
}

.attention-items__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--x-small);
}

.attention-items__check-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--color--gray-600);
}

.attention-items__date {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-style: italic;
}

.attention-items__needs {
  margin-top: var(--space--medium);
  display: grid;
  grid-template-columns: 6rem auto;
  -webkit-column-gap: var(--space--x-small);
     -moz-column-gap: var(--space--x-small);
          column-gap: var(--space--x-small);
  row-gap: var(--space--large);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.attention-items__need-group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2 / span 2;
  row-gap: var(--space--xx-small);
}

.attention-items__team {
  grid-column: span 2 / span 2;
  display: block;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  text-align: center;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--normal);
  white-space: nowrap;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.attention-items__project {
  grid-column: span 2 / span 2;
  margin-bottom: var(--space--x-small);
}

.attention-items__need {
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--small);
  padding-block: 0;
  padding-inline: var(--space--xx-small);
  text-align: center;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  white-space: nowrap;

  &:hover {
    @media (hover: hover) {
      text-decoration-line: none;
    }
  }
}

.attention-items__need-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--xx-small);
}

.attention-items__comments {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:hover {
    @media (hover: hover) {
      color: var(--color--gray-700);
    }
  }

  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color--yellow-100);
      }
    }
  }

  svg {
    fill: currentcolor;
  }
}

.schedule__nav-arrow {
  fill: currentcolor;
}

.agenda-hovercard {
  width: 100%;
  white-space: normal;
}

.agenda-alert {
  margin: var(--space--x-small);
  padding: var(--space--x-small);
  border-radius: var(--border-radius--small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
  font-weight: var(--font-weight--bold);

  svg {
    fill: currentcolor;
  }
}

.agenda-alert--conflict {
  background-color: var(--color--red-500);
  color: var(--color--white);
}

.agenda-alert--rotate {
  background-color: var(--color--yellow-200);

  &:is(.dark *) {
    background-color: var(--color--yellow-800);
    color: var(--color--white);
  }
}

.agenda-alert--adjusted {
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    background-color: var(--color--gray-700);
    color: var(--color--white);
  }
}

.agenda-hovercard__week {
  padding: var(--space--x-small);
  font-weight: var(--font-weight--bold);
}

.agenda-hovercard__body {
  padding-inline: var(--space--x-small);
  padding-bottom: var(--space--x-small);
}

.agenda-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.agenda-line__title {
  grid-column: span 3 / span 3;
}

.agenda-line__time {
  grid-column: span 2 / span 2;
  text-align: center;
}

.agenda-line__action {
  grid-column: span 1 / span 1;
  text-align: center;
}

.agenda-hovercard__footer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.agenda-hovercard__add {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border-top-style: solid;
  border-top-width: 1px;
  padding: var(--space--x-small);
  text-align: center;
  font-weight: var(--font-weight--medium);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color--gray-100);
    }

    &:hover:is(.dark *) {
      background-color: var(--color--gray-800);
    }
  }

  svg {
    fill: currentcolor;
  }
}

.agenda-hovercard__add--divided {
  border-right-style: solid;
  border-right-width: 1px;
}

.agenda-project-cell {
  @media (width < 40rem) {
    font-size: var(--font-size--base);
    line-height: var(--font-size--base--line-height);
  }
}

.agenda-actions-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  @media (width < 40rem) {
    padding-left: var(--space--base);
  }

  @media (width >= 48rem) {
    display: table-cell;
    text-align: right;
  }
}

.agenda-actions-cell__group {
  @media (width < 40rem) {
    padding-top: var(--space--x-small);
  }
}

.conflict-banner {
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;

  @media (width >= 48rem) {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: left;
  }
}

.conflict-banner__icon {
  color: var(--color--red-500);
  fill: currentcolor;
}

.conflict-banner__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.conflict-banner__title {
  font-weight: var(--font-weight--bold);
}

.conflict-banner__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.staffing-done-badge {
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.staffing-description {
  border-top-style: solid;
  border-top-width: 1px;
  padding: var(--space--base);
}

.signup-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--space--base);
}

.signup-row__form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.signup-row__delete {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  height: 2.5rem;
}

.holiday-note {
  margin-inline: var(--space--small);
  margin-top: var(--space--small);
  margin-bottom: var(--space--large);
  padding: var(--space--base);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.movement-comment {
  padding-left: 0.125rem;
}

.movement-icon__svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.movement-text {
  padding-block: 0.375rem;
  padding-left: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.week-project__tenure {
  display: block;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.week-project__row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  @media (width >= 64rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.week-project__rating {
  margin-block: var(--space--x-small);
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-200);
  padding-inline: var(--space--x-small);
  padding-block: var(--space--x-small);
  width: 100%;
  max-width: 36rem;
  text-align: center;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }

  @media (width >= 64rem) {
    width: 50%;
  }

  @media (width >= 80rem) {
    width: calc(1/3 * 100%);
  }
}

.rating-icon {
  fill: currentcolor;
}

.rating-icon--unrated {
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--gray-500);
  }
}

.rating-icon--negative {
  color: var(--color--red-400);
}

.rating-icon--slightly-negative {
  color: color-mix(in srgb, #fc8181 70%, transparent);

  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color--red-400) 70%, transparent);
  }
}

.rating-icon--slightly-positive {
  color: color-mix(in srgb, #38a169 70%, transparent);

  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color--green-600) 70%, transparent);
  }
}

.rating-icon--positive {
  color: var(--color--green-600);
}

.meeting-note-comment {
  padding-left: var(--space--xx-small);
}

.schedule-filter-label {
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--medium);
}

.schedule-filter-actions {
  width: 100%;
  padding-inline: var(--space--small);
  margin-bottom: var(--space--medium);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.conflict-banner--tight {
  padding: var(--space--base);
}

.conflict-banner__pin {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.match-rating {
  fill: currentcolor;
}

.match-rating--0 {
  color: var(--color--gray-600);
}

.match-rating--1 {
  color: var(--color--red-600);
}

.match-rating--2 {
  color: var(--color--red-400);
}

.match-rating--3 {
  color: var(--color--blue-500);
}

.match-rating--4 {
  color: var(--color--green-400);
}

.match-rating--5 {
  color: var(--color--green-600);
}
}
@layer base{

.search-form {
  padding: 0;
  position: relative;
  width: 100%;

  input[type="search"] {
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    width: 100%;
  }
}

.search-form__icon {
  position: absolute;
  left: 14px;
  top: 14px;
  fill: currentcolor;
}

input.search-form__input {
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
}

.search-filters {
  padding-top: var(--space--base);
}

.search-filters__summary {
  margin-bottom: var(--space--x-small);
  cursor: pointer;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-300);

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }
}

.search-filter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  padding-block: 0.125rem;
  margin-inline: calc(-1 * var(--space--xx-small));
  padding-inline: var(--space--xx-small);
  border-radius: var(--border-radius--small);
  -webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;

  @media (hover: hover) {
    &:hover {
      background-color: color-mix(in srgb, #fff 5%, transparent);
    }
  }
}

.search-filter-row__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  cursor: pointer;
}

input[type="checkbox"].search-filter-row__checkbox {
  border-radius: var(--border-radius--small);
  border-color: var(--color--gray-500);
  color: var(--color--blue-500);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.search-filter-row__count {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);
  font-variant-numeric: tabular-nums;

  &:is(.dark *) {
    color: var(--color--night-gray-500);
  }
}

.search-filter-row__only {
  font-size: 11px;
  padding-inline: 0.375rem;
  padding-block: 0.125rem;
  border-radius: var(--border-radius--small);
  color: var(--color--gray-500);
  -webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;

  &:is(.dark *) {
    color: var(--color--night-gray-500);
  }

  @media (hover: hover) {
    &:hover,
    &:hover:is(.dark *) {
      color: var(--color--white);
      background-color: color-mix(in srgb, #fff 10%, transparent);
    }
  }
}

.search-filters__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--small);
  margin-top: var(--space--small);
  padding-top: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  border-color: color-mix(in srgb, #3d3e44 50%, transparent);

  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color--gray-700) 50%, transparent);
  }

  &:is(.dark *) {
    border-color: color-mix(in srgb, #4c4c54 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color--night-gray-700) 50%, transparent);
    }
  }
}

.search-filters__action {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-400);
  -webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  @media (hover: hover) {
    &:hover,
    &:hover:is(.dark *) {
      color: var(--color--white);
    }
  }
}

.search-filters__dot {
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-600);
  }
}

.quick-filters__select-all {
  position: absolute;
  right: var(--space--xx-small);
  padding-top: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  border-bottom-right-radius: var(--border-radius--large);
}

.quick-filters__select-all-icon {
  fill: currentcolor;
  color: var(--color--gray-400);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.search-result {
  margin-bottom: var(--space--x-small);
}

.search-result__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
}

.search-result__body {
  width: 100%;
  padding-right: 3rem;
}

.search-result__title {
  padding: 0px;
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--bold);
  text-decoration-line: underline;
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--black);
    }

    &:hover:is(.dark *) {
      color: var(--color--white);
    }
  }
}

.search-result__warning {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  fill: currentcolor;
}

.search-result__warning-icon {
  display: inline;
  width: 1rem;
  height: 1rem;
  margin-left: var(--space--xx-small);
  fill: currentcolor;
}

.search-result__url {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-400);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.result__description {
  color: var(--color--gray-400);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.results {
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;

  .suggestion {
    margin-inline: var(--space--x-small);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: var(--space--small);
    color: var(--color--gray-800);

    &:focus {
      outline-style: none;

      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }

    &:is(.dark *) {
      color: var(--color--night-white);
    }

    &:hover,
    &:focus,
    &.first {
      border-radius: var(--border-radius--small);
      background-color: var(--color--gray-200);
      color: var(--color--gray-800);

      &:is(.dark *) {
        background-color: var(--color--night-gray-900);
        color: var(--color--night-white);
      }
    }

    &:hover {
      cursor: pointer;
    }

    svg {
      margin-right: var(--space--x-small);
      display: inline-block;
      width: var(--space--medium);
    }
  }

  .suggestion-image {
    margin-right: var(--space--x-small);
    display: inline-block;
    width: var(--space--medium);
    border-radius: var(--border-radius--full);
    border-style: solid;
    border-width: 1px;
    background-color: var(--color--gray-100);
  }

  .suggestion-name {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
  }

  .suggestion-type {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--gray-400);
    padding: var(--space--xx-small);
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    text-transform: uppercase;
  }

  .group-name {
    margin-top: var(--space--x-small);
    margin-left: var(--space--base);
    display: inline-block;
    padding: var(--space--x-small);
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    font-weight: var(--font-weight--semibold);
    color: var(--color--gray-600);
    text-transform: capitalize;

    &:focus {
      outline-style: none;

      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }

    &:is(.dark *) {
      color: var(--color--night-white);
    }
  }
  a.group-name {
    text-decoration-line: underline;

    &:focus,
    &:hover {
      border-radius: var(--border-radius--small);
      background-color: var(--color--gray-200);
      color: var(--color--gray-800);

      &:is(.dark *) {
        background-color: var(--color--night-gray-900);
        color: var(--color--night-white);
      }
    }
  }

  .group-count {
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    color: var(--color--gray-600);
    font-style: italic;

    &:is(.dark *) {
      color: var(--color--night-gray-600);
    }
  }

  .group:not(:first-child) {
    border-top-style: solid;
    border-top-width: 1px;

    &:is(.dark *) {
      border-color: var(--color--gray-500);
    }
  }
}

.search-icon {
  height: 100%;
  width: var(--space--large);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius--small);
  background-color: transparent;
  padding-block: var(--space--small);
  text-align: center;
  font-size: var(--font-size--base);
  line-height: var(--line-height--snug);
  font-weight: var(--font-weight--normal);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

input[type="search"].search-query {
  width: 100%;
  border-radius: var(--border-radius--small);
  border-style: none;
  background-color: var(--color--white);
  padding-right: var(--space--small);
  padding-left: 2.5rem;
  color: var(--color--gray-700);
  -webkit-box-shadow: none;
          box-shadow: none;
  outline-style: none;

  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--white);
  }

  &:focus {
    outline-style: none;

    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
}

.search-dialog {
  margin-top: 10vh;
  width: calc(11/12 * 100%);
  border-radius: var(--border-radius--large);
  padding: 0px;

  @media (width >= 48rem) {
    width: calc(2/3 * 100%);
  }
}

.search-dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);

  > svg {
    fill: currentcolor;
  }
}

.search-dialog__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-400);
  border-radius: var(--border-radius--medium);
  padding-block: 0.125rem;
  padding-inline: 0.375rem;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--night-gray-400);
  }

  kbd {
    font-family: var(--font-family--sans);
  }
}

.search-dialog__gpt {
  margin-inline: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--gray-100);
  padding: var(--space--small);
  color: var(--color--gray-800);

  &:focus {
    outline-style: none;

    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-800);
    color: var(--color--night-white);
  }
}

.search-dialog__gpt-icon {
  margin-right: var(--space--base);
  fill: currentcolor;
}

.search-dialog__spinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@-webkit-keyframes search-dialog-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes search-dialog-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.search-dialog__spinner-icon {
  margin-right: var(--space--x-small);
  fill: currentcolor;
  -webkit-animation: search-dialog-spin 1s linear infinite;
          animation: search-dialog-spin 1s linear infinite;
}

.search-dialog__status {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-block: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.search-dialog__beta {
  margin-left: var(--space--x-small);
  padding-block: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  text-decoration-line: underline;
}

input[type="text"].spotlight-search-query {
  margin: 0px;
  position: relative;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-style: none;
  border-radius: var(--border-radius--small);
  background-color: var(--color--white);
  padding-block: var(--space--small);
  padding-left: 2.5rem;
  padding-right: var(--space--small);
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  color: var(--color--gray-700);
  -webkit-box-shadow: none;
          box-shadow: none;
  outline-style: none;

  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &::-webkit-input-placeholder {
    color: var(--color--gray-500);
  }

  &::-moz-placeholder {
    color: var(--color--gray-500);
  }

  &:-ms-input-placeholder {
    color: var(--color--gray-500);
  }

  &::-ms-input-placeholder {
    color: var(--color--gray-500);
  }

  &::placeholder {
    color: var(--color--gray-500);
  }

  &:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--white);

    &::-webkit-input-placeholder {
      color: var(--color--night-white);
    }

    &::-moz-placeholder {
      color: var(--color--night-white);
    }

    &:-ms-input-placeholder {
      color: var(--color--night-white);
    }

    &::-ms-input-placeholder {
      color: var(--color--night-white);
    }

    &::placeholder {
      color: var(--color--night-white);
    }
  }
}

#search-bar {
  dialog {
    margin-inline: auto;
    margin-top: 10vh;
    overflow: visible;
    opacity: 95%;
    -webkit-box-shadow: var(--shadow--2x-large);
            box-shadow: var(--shadow--2x-large);
    backdrop-filter: blur(16px);

    &:is(.dark *) {
      border-style: solid;
      border-width: 1px;
      border-color: var(--color--gray-500);
      background-color: var(--color--night-gray-900);
      color: var(--color--night-white);
    }
  }
}

.dark .search_types .choices[data-type*=select-multiple] .choices__button {
  background-image: url(/assets/icons/search/close-white-00212e980fe93fa0c341c9c16f05501e9ba63378e9e7140efda79948d95ae0ce.svg);
}

.search_types {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-left-radius: var(--border-radius--large);
  border-bottom-right-radius: var(--border-radius--large);
  background-color: var(--color--white);
  padding-inline: var(--space--xx-small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-800);
  }

  label {
    margin-block: var(--space--xx-small);
    display: inline-block;
    border-radius: var(--border-radius--small);
    border-style: solid;
    border-width: 1px;
    padding-inline: var(--space--x-small);
    padding-block: var(--space--xx-small);
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    font-weight: var(--font-weight--normal);
    color: var(--color--black);

    &:is(.dark *) {
      color: var(--color--night-white);
    }
  }

  input[type="checkbox"] {
    margin: 0px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    & + label {
      cursor: pointer;
    }

    &:checked + label {
      background-color: var(--color--gray-100);

      &:is(.dark *) {
        background-color: var(--color--night-gray-900);
      }
    }

    &:focus + label {
      -webkit-box-shadow: 0 0 0 3px currentcolor;
              box-shadow: 0 0 0 3px currentcolor;
    }
  }

  .choices {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-bottom: 0;
  }

  .choices[data-type*=select-multiple] .choices__button {
    border-left: none;
    margin-left: 2px;
    margin-right: 0;
    background-image: url(/assets/icons/close-d7db4e6e0fa5d56e71fd79f707d6bfc815147cf562cc4464e85c1dee378b4f0a.svg)
  }

  .choices__inner {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0;
  }

  input[type="search"] {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .choices__list--multiple .choices__item {
    border-style: none;
    background-color: var(--color--gray-100);
    color: var(--color--gray-800);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
      color: var(--color--night-white);
    }

    &.is-highlighted {
      background-color: var(--color--gray-400);

      &:is(.dark *) {
        background-color: var(--color--night-gray-500);
      }
    }
  }
}

.search-form__filter_options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}

.search-result__icon {
  fill: currentcolor;
  width: var(--space--medium);
  height: var(--space--medium);
}
}
@layer base{

@-webkit-keyframes yellowfade {
  from {
    background: #ffffcc;
  }
  to {
    background: transparent;
  }
}

@keyframes yellowfade {
  from {
    background: #ffffcc;
  }
  to {
    background: transparent;
  }
}

.item-highlight {
  -webkit-animation: yellowfade 1s;
          animation: yellowfade 1s;
}
}
@layer base{

.tippy-box[data-theme~="tickets"] {
  min-width: calc(100vw - 30px);

  @media (min-width: 600px) {
    min-width: 25rem;
  }

  > .tippy-content {
    padding: 0;
  }
}

.ticket-header {
  width: 100%;
  margin-top: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);

  a {
    font-weight: var(--font-weight--bold);
    color: var(--color--gray-700);

    &:is(.dark *) {
      color: var(--color--night-gray-300);
    }
  }
}

.overdue {
  border-radius: var(--border-radius--small);
  background-color: var(--color--red-200);
  padding: var(--space--x-small);

  &:is(.dark *) {
    background-color: var(--color--night-red-800);
  }
}

.tickets {
  .header-inset .heading--header {
    font-weight: var(--font-weight--extrabold);
    font-size: 2rem;
  }
}

.ticket-checkbox-form {
  display: inline;
}

input[type="checkbox"].ticket-checkbox {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);
  padding: 0px;
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);

  &:is(.dark *) {
    border-color: var(--color--gray-500);
    background-color: var(--color--night-gray-900);
  }

  &:checked {
    background-color: var(--color--green-600);

    &:is(.dark *) {
      background-color: var(--color--night-green-400);
    }

    background-image: url(/assets/icons/checkmark-white-03b088bbeca4da2a399e5a227be36ea964d9016be547c74d69a7df15a1a427ef.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
  }
}

input[type="checkbox"].ticket-checkbox:checked + label.ticket-checkbox--label {
  display: none;
}

label.ticket-checkbox--label {
  height: 2.5rem;
  width: 2.5rem;
  padding-top: var(--space--x-small);
  text-align: center;
  font-weight: var(--font-weight--normal);
  font-size: 0.5rem;
  line-height: 0.75rem;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
}

.ticket-sidebar {
  a {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--normal);
    color: var(--color--gray-600);
    text-decoration-line: underline;

    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }

    &:is(.dark *) {
      color: var(--color--gray-400);
    }

    float: right;
    margin-top: 1px;
  }
}

.ticket-menu__edit {
  padding-bottom: var(--space--x-small);
}

.ticket-menu__convert {
  padding-block: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  text-align: left;
}

.ticket-title {
  padding-block: 0px;
  margin-right: var(--space--xx-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
}

.ticket-title__text {
  display: inline-block;
  margin-top: var(--space--xx-small);
  margin-left: var(--space--xx-small);
}

.ticket-meta__status {
  margin-right: var(--space--x-small);
}

.ticket-body {
  margin: var(--space--base);
}

.ticket-detail {
  margin-top: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.ticket-detail__label {
  margin-right: var(--space--xx-small);
}

.ticket-repeat-strip {
  padding: var(--space--base);
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-left-radius: var(--border-radius--small);
  border-bottom-right-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--gray-500);
    background-color: var(--color--night-gray-700);
  }
}

.ticket-filters {
  padding-inline: var(--space--base);
}

.ticket-filters__summary {
  margin-block: var(--space--base);
  font-weight: var(--font-weight--medium);
}

.ticket-filters__form {
  margin-bottom: var(--space--base);
}

.ticket-filters__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space--x-small);
  }
}

.ticket-filters__reset {
  text-align: right;
}

.ticket-layout {
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space--medium);

  @media (width >= 80rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ticket-layout__main {
  @media (width >= 80rem) {
    grid-column: span 2 / span 2;
  }
}

.ticket-layout__aside {
  position: sticky;
  top: var(--space--x-small);
}

.ticket-sidebar__content {
  padding-top: var(--space--medium);
}

.ticket-sidebar__row {
  padding-bottom: var(--space--base);
}

.ticket-attachable__status {
  display: inline-block;
  margin-left: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.ticket-attachable__icon {
  fill: currentcolor;
  width: 0.75rem;
  height: 0.75rem;
}

.ticket-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--base);
  margin-top: var(--space--base);
}

.help-ticket-title {
  display: block;
  font-weight: var(--font-weight--bold);
  text-decoration-line: underline;
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--black);
    }

    &:hover:is(.dark *) {
      color: var(--color--white);
    }
  }
}

.help-ticket-avatars {
  padding-left: var(--space--x-small);
  width: 3rem;
}

.help-ticket-status {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.overdue-pill {
  border-radius: var(--border-radius--small);
  font-weight: var(--font-weight--bold);
  background-color: var(--color--red-200);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);

  &:is(.dark *) {
    background-color: var(--color--night-red-800);
  }
}

.support-link {
  text-decoration-line: underline;
  color: var(--color--gray-600);
  font-weight: var(--font-weight--normal);

  &:is(.dark *) {
    color: var(--color--night-blue-100);
  }
}

.rotation-summary {
  padding-block: var(--space--base);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--white);
  }
}

.support-ticket-intro {
  @media (width >= 80rem) {
    width: calc(2/3 * 100%);
  }
}

.task-trigger__table {
  margin-block: var(--space--base);
}

.task-trigger__due {
  margin-block: var(--space--base);
}
}
@layer base{

.comment-header {
  a {
    font-weight: var(--font-weight--bold);
    color: var(--color--gray-700);
  }
}

.comment-text {
  /* Prevents overflow. Accounts for the width of the profile icon and padding. */
  width: calc(100% - 52px);
}

.comment:last-child {
  margin-bottom: var(--space--medium);
}

.people-to-notify summary {
  list-style-type: none;

  &::-webkit-details-marker {
    display:none;
  }
}

.comment {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: var(--space--medium);

  > :not(:last-child) {
    -webkit-margin-end: var(--space--small);
            margin-inline-end: var(--space--small);
  }
}

.comment__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.comment__image {
  height: 2.5rem;
  width: 2.5rem;
}

.comment__image--ringed {
  -webkit-box-shadow: 0 0 0 8px var(--color--white);
          box-shadow: 0 0 0 8px var(--color--white);

  &:is(.dark *) {
    -webkit-box-shadow: 0 0 0 8px var(--color--gray-800);
            box-shadow: 0 0 0 8px var(--color--gray-800);
  }
}

.comment__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}

.comment__byline {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.comment__author {
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--white);
  }
}

.comment__meta,
.comment__meta-link {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.comment__edited {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-900);
    }

    &:hover:is(.dark *) {
      color: var(--color--white);
    }
  }
}

.comment__edit-link {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-900);
    }

    &:hover:is(.dark *) {
      color: var(--color--gray-100);
    }
  }
}

.comment__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.comment__edit {
  padding-left: var(--space--x-small);
}

.comment__body {
  margin-top: var(--space--xx-small);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.versions-note {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.dropdown .version-link {
  border-top-style: solid;
  border-top-width: 1px;
  text-decoration-line: none;
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--black);
  }

  @media (hover: hover) {
    &:hover,
    &:hover:is(.dark *) {
      background-color: var(--color--blue-600);
      color: var(--color--white);
    }
  }
}

.comment-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--space--medium);

  > :not(:last-child) {
    -webkit-margin-end: var(--space--small);
            margin-inline-end: var(--space--small);
  }

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
  }
}

.comment-form__body {
  min-width: 0px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.comment-panel {
  border-bottom-left-radius: var(--border-radius--small);
  border-bottom-right-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--black);
  }
}

.comment-panel--spaced-above {
  margin-top: var(--space--medium);
}

.comment-panel--spaced-below {
  margin-bottom: var(--space--medium);
}

.comment-form__editor {
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.comment-form__footer {
  margin-top: var(--space--small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.comment-form__notify-list {
  padding-left: var(--space--x-small);
  padding-right: var(--space--base);
}

.comment-form__cancel {
  display: inline-block;
  margin-right: var(--space--base);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.notify-note {
  margin-top: var(--space--base);
  margin-bottom: var(--space--x-small);
}

.notify-note__icon {
  display: inline;
  height: var(--space--medium);
  fill: currentcolor;
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.notify-note__toggle {
  text-decoration-line: underline;
  cursor: pointer;
}

.notify-note__people {
  padding-left: var(--space--x-small);
  padding-top: var(--space--x-small);

  @media (width >= 48rem) {
    width: 75%;
  }
}

.comments-toolbar {
  margin-top: var(--space--xx-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--space--x-small);
}

.comments-thread {
  padding-inline: var(--space--medium);
}

.comments-count-link {
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-500);
  }

  svg {
    fill: currentcolor;
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-700);
    }

    &:hover:is(.dark *) {
      color: var(--color--yellow-100);
    }
  }
}

.version-item {
  position: relative;
  padding-bottom: var(--space--large);
  margin-top: var(--space--medium);
}

.version-item__rail {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  margin-left: -1px;
  height: 100%;
  width: 0.125rem;
  background-color: var(--color--gray-200);
}

.version-item__row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  > :not(:last-child) {
    -webkit-margin-end: var(--space--small);
            margin-inline-end: var(--space--small);
  }
}

.version-item__icon-wrap {
  position: relative;
  padding-inline: var(--space--xx-small);
}

.version-item__glyph {
  color: var(--color--gray-500);
  height: 1.25rem;
  width: 1.25rem;
  fill: currentcolor;
}

.version-item__body {
  min-width: 0px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-block: 0.375rem;
}

.version-item__author {
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.version-item__author--underlined {
  text-decoration-line: underline;
}
}
@layer base{
/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}

.attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Mentions styles */
.attachable {
  display: inline-block;
}

.mention-label {
  display: inline-block;
}

.mention-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mentions-container {
  position: fixed;
  border-color: var(--color--gray-100);
  background-color: var(--color--white);

  &:is(.dark *) {
    border-color: var(--color--gray-300);
    background-color: var(--color--night-gray-700);
  }

  border-radius: 4px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);
  z-index: 100;

  [role="listbox"] {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  [role="option"] {
    display: block;
    padding: 0.2em 1em;
    text-align: left;
    min-width: 15em;
    max-width: 100%;
  }

  [aria-selected="true"] {
    background: #1b6ac9;
    color: #fff;

    span {
      font-weight: bold;
    }
  }

  .person-link-image {
    display: none;
  }
}

/* Mention styles in rich text areas */

.trix-content,
.rich_text_area {
  .person-link-name {
    color: var(--color--gray-700);
    text-decoration-line: underline;

    &:is(.dark *) {
      color: var(--color--night-gray-300);
    }
  }

  .person-link-image {
    border-style: solid;
    border-width: 1px;
  }

  .opportunity-mention,
  .project-mention,
  .ticket-mention,
  .message-mention {
    font-weight: var(--font-weight--medium);
    color: var(--color--red-600);
    text-decoration-line: underline;

    &:is(.dark *) {
      color: var(--color--night-yellow-400);
    }
  }

  .attachment {
    a.opportunity-mention,
    a.project-mention,
    a.ticket-mention,
    a.message-mention {
      font-weight: var(--font-weight--medium);
      color: var(--color--red-600);
      text-decoration-line: underline;

      &:is(.dark *) {
        color: var(--color--night-yellow-400);
      }
    }
  }
}

.mentions-collection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}

figure[data-trix-attachment] svg {
  display: none;
}

/* For the tooltip when mentioning someone in a post or comment */
.dark .mentions-container {
  .highlight {
    background-color: var(--color--blue-700);
  }
}
}
@layer base{

.new_estimate {
  label {
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
  }

  .choices__inner {
    min-height: 54px;
  }

  .choices__list--single {
    padding: 10px 16px 4px 4px;
  }
}

.tentative td {
  background-color: var(--color--yellow-100);

  &:is(.dark *) {
    background-color: var(--color--yellow-900);
  }
}
}
@layer base{

.evaluation-summary {
  color: var(--color--red-700);

  &:is(.dark *) {
    color: var(--color--red-300);
  }

  #total {
    background-color: var(--color--red-100);
    color: var(--color--red-700);
  }

  &.above-threshold {
    color: var(--color--green-700);

    &:is(.dark *) {
      color: var(--color--green-300);
    }

    #total {
      background-color: var(--color--green-100);
      color: var(--color--green-700);
    }
  }
}

.scorecards,
.candidates {
  #total {
    margin: 0;
    width: 3rem;
  }
}

.question-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.question-fields__main {
  width: 75%;
}

.question-fields__aside {
  width: 25%;
}

.question-fields__choices {
  width: 50%;

  @media (width >= 48rem) {
    width: 25%;
  }
}

.question-fields__scores {
  width: 50%;

  @media (width >= 48rem) {
    width: 75%;
  }
}

.question-fields__list {
  list-style-type: disc;
  margin-left: var(--space--medium);
}

.question-fields__score-input {
  width: 100%;

  @media (width >= 48rem) {
    width: 50%;
  }
}

.choice-label {
  display: block;
  width: 100%;
}

.sortable-placeholder {
  margin-block: var(--space--large);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-400);
  background-color: var(--color--gray-200);
}
}
@layer base{
.status {
  border-radius: var(--border-radius--full);
  padding-inline: var(--space--x-small);
  padding-block: var(--space--xx-small);
  text-align: center;
  font-weight: var(--font-weight--bold);
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--night-gray-900);
  }

  &.small {
    padding-inline: var(--space--x-small);
    padding-block: var(--space--xx-small);
  }

  &.todo {
    background-color: var(--color--blue-500);

    &:is(.dark *) {
      background-color: var(--color--blue-400);
    }
  }

  &.done,
  &.won {
    background-color: var(--color--green-500);

    &:is(.dark *) {
      background-color: var(--color--green-400);
    }
  }

  &.blocked,
  &.lost {
    background-color: var(--color--red-500);

    &:is(.dark *) {
      background-color: var(--color--red-400);
    }
  }

  &.working,
  &.pending {
    background-color: var(--color--yellow-500);

    &:is(.dark *) {
      background-color: var(--color--gray-400);
    }
  }

  &.graceful {
    font-weight: var(--font-weight--medium);
  }

  &.setup {
    background-color: var(--color--blue-200);

    &:is(.dark *) {
      background-color: var(--color--blue-400);
    }
  }

  &.delivery {
    background-color: var(--color--green-200);

    &:is(.dark *) {
      background-color: var(--color--green-400);
    }
  }

  &.transition {
    background-color: var(--color--yellow-200);

    &:is(.dark *) {
      background-color: var(--color--yellow-400);
    }
  }

  &.growth {
    background-color: var(--color--purple-200);

    &:is(.dark *) {
      background-color: var(--color--purple-400);
    }
  }
}
}
@layer base{
.summit-description {
  summary {
    padding-block: var(--space--base);
    font-size: var(--font-size--x-large);
    line-height: var(--font-size--x-large--line-height);
    font-weight: var(--font-weight--bold);

    p {
      display: inline;
      padding: 0px;
    }
  }
}
}
@layer base{

trix-toolbar {
  background-color: var(--color--white);
  padding-top: var(--space--x-small);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }

  border-bottom: 1px solid #bbb;
  position: sticky;
  top: 0;
  z-index: 1;

  .trix-button--icon-inlineCode::before {
    background-image: url(/assets/icons/code-9d2ac0aa56e9ed757866bdd70eab2275ace1c276b5a0073edb914c7f33486d4f.svg);
  }

  .trix-button--icon-code::before {
    background-image: url(/assets/icons/code-block-c373d8671dd6e09f14954817bf357d96b0ea99e2f6c151b07a3b8c8a2598ae6e.svg);
  }

}

#comment-form {
  trix-toolbar {
    background-color: var(--color--gray-100);

    &:is(.dark *) {
      background-color: var(--color--night-gray-700);
    }
  }

  trix-editor[contenteditable="false"] {
    background-color: var(--color--gray-100);

    &:is(.dark *) {
      background-color: var(--color--night-gray-700);
    }
  }
}

trix-editor {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-style: solid;
  border-top-width: 0px;
}

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 33%;
              flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

/* For code blocks in comments */
.dark .trix-content pre,
.dark .trix-content code {
  background-color: var(--color--gray-700);
}
}
@layer base{

.reactions-add-button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  cursor: pointer;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius--full);
  border-color: var(--color--gray-400);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:hover {
    @media (hover: hover) {
      border-color: var(--color--gray-500);
      color: var(--color--gray-900);
    }
  }

  &:is(.dark *) {
    color: var(--color--gray-400);

    &:hover {
      @media (hover: hover) {
        color: var(--color--gray-100);
      }
    }
  }

  svg {
    fill: currentcolor;
  }
}

.reactions-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--x-small);
  margin-top: var(--space--base);

  .reactions-add-button {
    height: 30px;
    width: 30px;
    border-style: solid;
    border-width: 1px;
  }

  .reaction {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: var(--border-radius--full);
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--gray-400);
    padding-inline: var(--space--x-small);
    padding-block: 0.125rem;
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);

    &:hover {
      @media (hover: hover) {
        border-color: var(--color--gray-500);
      }
    }

    &.reacted {
      border-color: var(--color--blue-500);
      font-weight: var(--font-weight--bold);
      color: var(--color--blue-500);

      &:hover {
        @media (hover: hover) {
          border-color: var(--color--blue-600);
        }
      }
    }
  }
}

.reaction__emoji {
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}

.reaction__emoji--spaced {
  margin-right: var(--space--x-small);
}

.dropdown--reactions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space--x-small);
  border-style: solid;
  border-width: 1px;
  /* Block padding comes from .dropdown, which always accompanies this class
     and used to out-cascade the old p-4 utility the same way. */
  padding-inline: var(--space--base);
  max-width: 20rem;
}
}
@layer base{
.star {
  margin-bottom: 0.2rem;
  fill: currentcolor;
}
}
@layer base{

nav.tabs {
  margin-bottom: -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  > :not(:last-child) {
    -webkit-margin-end: var(--space--large);
            margin-inline-end: var(--space--large);
  }

  .tab {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-inline: var(--space--xx-small);
    padding-bottom: var(--space--base);
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
    font-weight: var(--font-weight--medium);

    .tab__label {
      white-space: nowrap;
    }

    &.active {
      border-color: var(--color--red-500);
      color: var(--color--red-600);

      &:hover {
        @media (hover: hover) {
          border-color: var(--color--red-300);
          color: var(--color--red-700);
        }
      }

      &:is(.dark *) {
        color: var(--color--red-400);
      }
    }

    &.inactive {
      border-color: transparent;
      color: var(--color--gray-600);

      &:hover {
        @media (hover: hover) {
          border-color: var(--color--gray-400);
          color: var(--color--gray-800);
        }
      }

      &:is(.dark *) {
        color: var(--color--gray-400);

        &:hover {
          @media (hover: hover) {
            border-color: var(--color--gray-100);
            color: var(--color--gray-100);
          }
        }
      }

      .tab__label {
        @container (44rem <= width < 76rem) {
          display: none;
        }
      }
    }
  }
}

.projects-billing_terms {
  .tab.billing.inactive {
    border-color: var(--color--red-500);
    color: var(--color--red-600);

    &:hover {
      @media (hover: hover) {
        border-color: var(--color--red-300);
        color: var(--color--red-700);
      }
    }

    &:is(.dark *) {
      color: var(--color--red-400);
    }
  }
}

.tabs-narrow {
  @container (width >= 44rem) {
    display: none;
  }
}

.tabs-wide {
  display: none;

  @container (width >= 44rem) {
    display: block;
  }
}
}
@layer base{
.tippy-box[data-theme~='legend'] {
  width: 25rem;
  background-color: rgba(245, 245, 245, 1);

  .dark & {
      /* Toggle these styles only when dark mode is applied */
      background-color: var(--color--night-gray-900);
      color: var(--color--gray-200);
  }

  > .tippy-content {
      padding: 0 10px;
  }

  tr {
      font-weight: var(--font-weight--bold);
      padding: 0 10px;
  }

  th {
      font-weight: var(--font-weight--bold);
      border-top: none;
      text-transform: none;
  }
}
}
@layer base{

.timeline {
  display: none;
}

.timeline-item .timeline {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  margin-left: -1px;
  height: 100%;
  width: 0.125rem;
  background-color: var(--color--gray-100);
}

.timeline-item {
  position: relative;
}

.tickets,
.opportunities {
  .timeline-item:not(:last-child) .timeline {
    display: block;
  }
}

.timeline-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2rem;
  height: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  -webkit-box-shadow: 0 0 0 8px var(--color--white);
          box-shadow: 0 0 0 8px var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--gray-800);
    -webkit-box-shadow: 0 0 0 8px var(--color--gray-900);
            box-shadow: 0 0 0 8px var(--color--gray-900);
  }
}
}
@layer base{

.project-ai-summary {
  border-top-style: solid;
  border-top-width: 1px;
  padding: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--space--x-small);
}

.project-ai-summary__icon {
  padding-top: var(--space--xx-small);

  svg {
    fill: currentcolor;
  }
}

.project-messages {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.project-team-scroll {
  max-height: 24rem;
  overflow: scroll;
}

.project-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  padding-inline: var(--space--medium);
  padding-top: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }

  @media (width >= 40rem) {
    padding-bottom: 0px;
  }
}

.project-tabs__nav {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.project-tabs__action {
  @media (width >= 64rem) {
    margin-top: -0.5rem;
  }
}

.tickets-summary th:first-child {
  width: 75%;
}

.tickets-summary th:last-child {
  width: 25%;
}

.tickets-summary__repeat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.tickets-summary__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--x-small);
}

.artifact-image-link {
  display: block;
  margin-bottom: var(--space--base);
}

.artifact-actions {
  padding-inline: var(--space--x-small);
}

input.artifact-url-field {
  display: block;
  width: 100%;
}

.artifact-delete-form,
.artifact-submit {
  display: block;
}

.billing-active-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color--green-500);
  fill: currentcolor;
}
}
@layer base{

.sync-error {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--x-small);
}

.sync-error__icon {
  margin-top: 0.375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  fill: currentcolor;
  color: var(--color--red-500);
}

.sync-error__title {
  font-weight: var(--font-weight--semibold);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--red-600);

  &:is(.dark *) {
    color: var(--color--red-400);
  }
}

.client-charts__main {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(8/12 * 100%);
  }
}

.client-charts__aside {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(4/12 * 100%);
  }
}

.client-billing__stats {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(1/3 * 100%);
  }

  @media (width >= 96rem) {
    width: calc(1/4 * 100%);
  }
}

.client-billing__chart {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(2/3 * 100%);
  }

  @media (width >= 96rem) {
    width: calc(3/4 * 100%);
  }
}

.client-invite-note {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.client-logo-input::-webkit-file-upload-button {
  margin-right: var(--space--base);
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);
  border-radius: var(--border-radius--small);
  border-width: 0;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
  background-color: var(--color--gray-600);
  color: var(--color--white);
  cursor: pointer;
}

.client-logo-input::file-selector-button {
  margin-right: var(--space--base);
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);
  border-radius: var(--border-radius--small);
  border-width: 0;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
  background-color: var(--color--gray-600);
  color: var(--color--white);
  cursor: pointer;
}

.client-logo-input:hover::-webkit-file-upload-button {
  background-color: var(--color--gray-700);
}

.client-logo-input:hover::file-selector-button {
  background-color: var(--color--gray-700);
}

.client-logo-preview-wrap {
  margin-top: var(--space--x-small);
  margin-bottom: var(--space--base);
}

.client-logo-preview {
  height: 5rem;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-300);
  border-radius: 0.25rem;
  padding: var(--space--x-small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.client-advanced {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);
}

.client-advanced__grid {
  gap: var(--space--x-small);
  padding-top: var(--space--base);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.slack-info {
  color: var(--color--gray-600);
}

.slack-status--connected {
  color: var(--color--green-600);
}

.slack-status--none {
  color: var(--color--gray-400);
}

.budget-note {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

/* Contract cards, rendered on client and project billing pages. */
}
@layer base{

.contact-page {
  @media (width >= 80rem) {
    max-width: var(--container--large);
  }
}

.case-study-warning {
  fill: currentcolor;
  width: var(--space--base);
  height: var(--space--base);
  margin-left: var(--space--xx-small);
}

.contact-versions {
  width: 100%;
}

.contact-row {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-800);
  }
}

.contact-row__name {
  font-weight: var(--font-weight--bold);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}
}
@layer base{

.messages--content-block {
  container-type: inline-size;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.messages--content-block .content-block .section {
  height: 100% !important;
}

.messages--content-block .interests-sidebar {
  padding-right: 0;
}

@container (max-width: 768px) {
  .messages--content-block .interests-sidebar {
    display: none;
  }
}

.profile-check__main {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(8/12 * 100%);
  }
}

.profile-check__aside {
  @media (width >= 80rem) {
    margin-bottom: 0px;
    width: calc(4/12 * 100%);
  }
}

.profile-check__row {
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.timer-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.timer-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  border-radius: var(--border-radius--full);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--green-300);
  background-color: var(--color--green-100);
  padding-inline: 0.625rem;
  padding-block: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--green-800);

  &:is(.dark *) {
    border-color: color-mix(in srgb, #2f855a 50%, transparent);
    background-color: color-mix(in srgb, #22543d 30%, transparent);
    color: var(--color--green-300);

    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color--green-700) 50%, transparent);
      background-color: color-mix(in oklab, var(--color--green-900) 30%, transparent);
    }
  }
}

.timer-badge__dot {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--space--x-small);
  width: var(--space--x-small);
}

@-webkit-keyframes timer-badge-ping {
  75%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

@keyframes timer-badge-ping {
  75%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

.timer-badge__ping {
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius--full);
  background-color: var(--color--green-500);
  opacity: 75%;
  -webkit-animation: timer-badge-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
          animation: timer-badge-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

  &:is(.dark *) {
    background-color: var(--color--green-400);
  }
}

.timer-badge__core {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: var(--space--x-small);
  width: var(--space--x-small);
  border-radius: var(--border-radius--full);
  background-color: var(--color--green-600);

  &:is(.dark *) {
    background-color: var(--color--green-400);
  }
}

.utilization-summary__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--large);
  padding: var(--space--base);
}

.utilization-summary__value {
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--gray-100);
  }
}

.utilization-summary__value--tooltip {
  cursor: help;
}
}
@layer base{

.opportunity-data-note {
  p:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  li {
    list-style-type: disc;
    list-style-position: inside;
  }
}

.opportunity_ready_for_evaluation {
  .hint {
    margin-left: 0.75rem;
  }
}

.opportunities-edit {
  a.button--edit {
    display: none;
  }
  .destroy-button {
    display: block;
  }

  .vditor {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top-color: #e2e0Ec;
    border-bottom-color: #e2e0Ec;
  }

  .vditor-toolbar {
    border-radius: 0;
  }
}

.opportunities-index {
  .team-link {
    font-weight: var(--font-weight--normal);
    color: var(--color--gray-600);

    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }

    &:is(.dark *) {
      color: var(--color--gray-400);
    }
  }
  .primary-team {
    font-weight: var(--font-weight--bold);
  }
}

.opportunities-show {
  .primary-team {
    font-weight: var(--font-weight--bold);
  }

  a.button--edit {
    display: block;
  }

  .destroy-button {
    display: none;
  }
}

.opportunity-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top-left-radius: var(--border-radius--small);
  border-top-right-radius: var(--border-radius--small);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: var(--color--gray-50);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);

  &:is(.dark *) {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--color--night-gray-500);
    background-color: var(--color--night-gray-900);
  }

  button#opportunity_next_step {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 2px solid rgb(107, 70, 193);
  }
  select#opportunity_step {
    background-color: var(--color--purple-200);

    &:is(.dark *) {
      background-color: var(--color--night-purple-800);
    }

    &:hover {
      background-color: var(--color--purple-300);

      &:is(.dark *) {
        background-color: var(--color--night-purple-900);
      }
    }
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    margin: 0;
    width: 25px;
    color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-position: 50% 50%;
    max-width: none;
    border-width: 1px;
    border-color: rgb(107, 70, 193);
    border-left-width: 0;
  }
}

.opportunities-tickets {
  .section-content > .section {
      margin-bottom: 0px;
    }
}

.opportunity-header__status {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.opportunity-header__ready {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
}

.opportunity-header__ready-icon {
  fill: currentcolor;
  color: var(--color--green-500);
}

.opportunity-header__bullet {
  display: inline-block;
  margin-inline: var(--space--xx-small);
}

.opportunity-header__days {
  display: inline-block;
  margin-left: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-style: italic;
}

.opportunity-header__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.opportunity-header__brand-icon {
  width: var(--space--medium);
  height: var(--space--medium);
}

.opportunity-header__brand-icon--crunchbase {
  fill: currentcolor;
  color: #0288d1;
}

.opportunity-header__step-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.opportunity-header__step-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.opportunity-header__copilot-icon {
  height: 1rem;
  width: auto;
}

.opportunity-title {
  padding-top: 0px;
  padding-bottom: var(--space--x-small);
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--extrabold);
}

.opportunity-owner-link {
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.opportunity-tags {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.opportunity-tags--spaced {
  margin-top: var(--space--xx-small);
}

.tag-pill {
  display: inline-block;
  white-space: nowrap;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color--gray-200);
    }

    &:hover:is(.dark *) {
      background-color: var(--color--night-gray-700);
    }
  }
}

.opportunity-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  container-type: inline-size;
  gap: var(--space--base);
  padding-left: var(--space--medium);
  padding-right: var(--space--base);
  padding-top: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }

  @media (width >= 40rem) {
    padding-bottom: 0px;
  }
}

.opportunity-tabs__nav {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.opportunity-tabs__aside {
  text-align: right;
}

.opportunity-description {
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.opportunity-comments-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--space--x-small);
}

.opportunity-contact-strip {
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
}

.opportunity-details-summary {
  padding: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
}

.opportunity-details-divider {
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.opportunity-details-divider--bottom {
  border-top-width: 0px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.opportunity-issues-grid {
  -webkit-column-gap: var(--space--base);
     -moz-column-gap: var(--space--base);
          column-gap: var(--space--base);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-study-list {
  list-style-type: disc;
  padding-left: var(--space--medium);
}

.case-study-warning-icon {
  display: inline;
  width: 1rem;
  height: 1rem;
  margin-left: var(--space--xx-small);
  fill: currentcolor;
}

.pipeline-cards {
  display: grid;
  gap: var(--space--base);

  @media (width >= 48rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pipeline-card {
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.pipeline-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--base);
  padding: 1.25rem;
  text-align: left;
}

.opportunity-form__row {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--base);
  padding-inline: var(--space--base);
}

.opportunity-form__pair {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  padding-inline: var(--space--base);
}

.opportunity-form__inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.opportunity-form__peek {
  padding-inline: var(--space--base);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  svg {
    fill: currentcolor;
  }
}

.opportunity-form__grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space--base);
}

.opportunity-form__contact-grid {
  display: grid;
  gap: var(--space--base);

  @media (width >= 48rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.opportunity-form__advanced {
  gap: var(--space--x-small);
  padding-top: var(--space--base);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.opportunity-form__actions {
  margin-inline: var(--space--base);
  margin-bottom: var(--space--base);
  text-align: right;
}

.opportunity-form__details {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);
}

.opportunity-editor {
  margin-bottom: var(--space--base);
  grid-column: span 2 / span 2;
}

.opportunity-editor__canvas {
  margin-bottom: var(--space--base);
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-inline: var(--space--large);
  padding-block: var(--space--base);
}

.kickoff-brief {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--medium);
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);

  @media (width >= 48rem) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: var(--space--large);
  }
}

.kickoff-brief__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 0px;
  overflow-x: auto;
  overflow-wrap: break-word;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.kickoff-brief__aside {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  @media (width >= 48rem) {
    width: 14rem;
  }
}

.kickoff-brief__label {
  font-weight: var(--font-weight--semibold);
}

.kickoff-brief__history {
  margin-top: var(--space--xx-small);
}

.kickoff-brief__history-link {
  text-decoration-line: underline;
}

.kickoff-brief__rule {
  margin-block: var(--space--base);
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.kickoff-brief__busy {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 75%;
  cursor: not-allowed;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.kickoff-brief__spinner {
  margin-right: var(--space--x-small);
  height: 1rem;
  width: 1rem;
  fill: currentcolor;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

.opportunity-tabs__action {
  margin-top: -0.5rem;
}

.contract-modal__drive-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--space--xx-small);
}

.suggestions-divider {
  margin-top: var(--space--base);
  margin-bottom: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  padding-top: var(--space--x-small);
}

.suggestion-list {
  list-style-type: disc;
  padding-left: var(--space--medium);
}

.estimate-card {
  margin-inline: var(--space--base);
  margin-bottom: 1.25rem;
  border-radius: var(--border-radius--medium);
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.estimate-card__header {
  padding-inline: var(--space--base);
  padding-block: 1.25rem;

  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.estimate-card__main {
  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.estimate-card__info {
  margin-top: var(--space--small);

  @media (width >= 40rem) {
    margin-top: 0px;
  }
}

.estimate-card__title {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }
}

.estimate-card__dot {
  display: none;

  @media (width >= 40rem) {
    display: inline;
    margin-inline: var(--space--x-small);
  }
}

.estimate-card__detail {
  margin-top: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }

  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.estimate-card__figure {
  margin-top: var(--space--xx-small);

  @media (width >= 40rem) {
    margin-top: 0px;
  }
}

.estimate-card__actions {
  margin-top: var(--space--base);

  @media (width >= 40rem) {
    margin-top: 0px;
    margin-left: var(--space--medium);
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.estimate-totals {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 3rem;
  padding-inline: var(--space--medium);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.info-banner {
  margin-inline: var(--space--base);
  margin-bottom: var(--space--base);
  border-radius: var(--border-radius--medium);
  background-color: var(--color--blue-100);
  padding: var(--space--base);

  &:is(.dark *) {
    background-color: var(--color--night-blue-700);
  }
}

.info-banner__icon {
  fill: currentcolor;
  color: var(--color--blue-500);
}

.estimate-toggles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-inline: var(--space--medium);
  padding-bottom: var(--space--base);
}

.estimate-toggles__option {
  margin-right: var(--space--base);
}

.estimate-form {
  margin-inline: var(--space--base);
  margin-bottom: 1.25rem;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--medium);
  padding: var(--space--base);
}

.estimate-form__row {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.estimate-form__skill {
  @media (width >= 40rem) {
    width: 50%;
    padding-right: var(--space--x-small);
  }
}

.estimate-form__person {
  margin-top: var(--space--x-small);

  @media (width >= 40rem) {
    margin-top: 0px;
    width: 50%;
  }
}

.estimate-form__pricing {
  margin-top: var(--space--x-small);
  gap: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.estimate-form__actions {
  margin-block: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.estimate-staffing {
  border-top-style: solid;
  border-top-width: 1px;
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
}

.estimate-staffing__summary {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
}

.estimate-staffing__table {
  margin-top: var(--space--base);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.estimate-staffing__caption {
  margin-bottom: var(--space--x-small);
  padding-inline: 1.25rem;
  text-align: left;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
}

.estimate-staffing__note {
  margin-top: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.brief-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--base);
}

.brief-panel {
  border-radius: var(--border-radius--large);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.brief-panel__header {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.brief-panel__title {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
}

.brief-panel__body {
  overflow-x: auto;
  overflow-wrap: break-word;
  padding: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.brief-panel__body--pre {
  white-space: pre-wrap;
}

.diff-table-wrap {
  overflow-x: auto;
  border-radius: var(--border-radius--medium);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

table.diff-table {
  border-collapse: collapse;
  font-family: var(--font-family--mono);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.diff-table__head {
  background-color: var(--color--gray-50);
  text-align: left;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.diff-table__label {
  padding-inline: var(--space--small);
  padding-block: var(--space--xx-small);
  font-weight: var(--font-weight--semibold);
}

.diff-table__num {
  width: 2.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding-inline: var(--space--x-small);
  padding-block: 0.125rem;
  text-align: right;
  vertical-align: top;
  color: var(--color--gray-400);
}

.diff-table__code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding-inline: var(--space--small);
  padding-block: 0.125rem;
  vertical-align: top;
}

.diff-line--added {
  background-color: var(--color--green-100);

  &:is(.dark *) {
    background-color: color-mix(in srgb, #22543d 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color--green-900) 30%, transparent);
    }
  }
}

.diff-line--removed {
  background-color: var(--color--red-100);

  &:is(.dark *) {
    background-color: color-mix(in srgb, #742a2a 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color--red-900) 30%, transparent);
    }
  }
}

.diff-line--neutral {
  background-color: var(--color--gray-50);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.diff-word--added {
  background-color: var(--color--green-200);
  color: var(--color--green-900);

  &:is(.dark *) {
    background-color: var(--color--green-800);
    color: var(--color--green-100);
  }
}

.diff-word--removed {
  background-color: var(--color--red-200);
  color: var(--color--red-900);
  text-decoration-line: line-through;

  &:is(.dark *) {
    background-color: var(--color--red-800);
    color: var(--color--red-100);
  }
}

.brief-history {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--medium);
  padding: var(--space--base);

  @media (width >= 48rem) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.brief-history__aside {
  @media (width >= 48rem) {
    width: 18rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.brief-history__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--xx-small);
}

.brief-history__main {
  min-width: 0px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.brief-version {
  position: relative;
  border-radius: var(--border-radius--medium);
  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
}

.brief-version--viewed {
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
  }
}

.brief-version--other {
  @media (hover: hover) {
    &:hover {
      background-color: var(--color--gray-100);
    }

    &:hover:is(.dark *) {
      background-color: var(--color--night-gray-800);
    }
  }
}

.brief-version__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--x-small);
  padding: var(--space--small);
}

.brief-version__label {
  display: inline-block;
  border-radius: var(--border-radius--small);
  background-color: var(--color--gray-200);
  padding-inline: var(--space--x-small);
  padding-block: 0.125rem;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-700);

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  &:focus {
    outline-style: none;
  }

  &:is(.dark *) {
    background-color: var(--color--night-gray-600);
    color: var(--color--night-white);
  }
}

.brief-version__byline {
  margin-top: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}

.brief-version__actions {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--x-small);
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.brief-compare {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 80vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--base);
}

.brief-compare__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space--base);
}

.brief-compare__title {
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--semibold);
}

.brief-compare__title--pinned {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.brief-compare__fields,
.brief-compare__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--base);
  overflow-y: auto;
}

.brief-compare__list {
  gap: var(--space--x-small);
}

.brief-compare__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--x-small);
}

.brief-compare__label {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
}

.brief-compare__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);
  padding-bottom: var(--space--x-small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }
}

.brief-compare__date {
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}
}
@layer base{

.people-show {
  .information {
    .info-list {
      svg {
        opacity: 0.75;
        display: block;
        margin-top: 2px;
      }

      > div {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space--x-small);
        border-style: none;
        padding-block: var(--space--x-small);
      }

      dt {
        text-align: right;
        font-weight: var(--font-weight--light);
      }

      dd {
        grid-column: span 11 / span 11;
      }
    }
  }
}

.person-profile__top-links {
  display: none;

  @media (width >= 64rem) {
    display: block;
  }
}

.person-profile__layout {
  text-align: center;

  @media (width >= 64rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
  }
}

.person-profile__avatar {
  margin-top: -8rem;
  margin-inline: auto;
  display: block;
  height: 12rem;
  width: 12rem;
  border-radius: var(--border-radius--full);
  border-style: solid;
  border-width: 8px;
  border-color: var(--color--white);
  background-color: var(--color--gray-100);
  background-position: center;
  background-size: cover;

  @media (width >= 64rem) {
    margin-top: -10rem;
    margin-inline: 0px;
  }

  &:is(.dark *) {
    border-color: var(--color--night-gray-900);
  }
}

.person-profile__row {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.person-profile__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  padding-top: var(--space--large);
  padding-bottom: 0px;
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--bold);

  @media (width >= 64rem) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: var(--space--base);
  }

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.person-profile__divider {
  margin-inline: auto;
  width: 80%;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-color: var(--color--gray-500);
  padding-top: var(--space--small);
  opacity: 0.25;

  @media (width >= 64rem) {
    margin-inline: 0px;
    width: 100%;
  }
}

.person-profile__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.person-profile__bio {
  padding-top: var(--space--large);
  text-align: justify;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  @media (width >= 64rem) {
    text-align: left;
  }

  @media (width >= 80rem) {
    font-size: var(--font-size--base);
    line-height: var(--font-size--base--line-height);
  }
}

.person-profile__mobile-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--x-small);

  @media (width >= 64rem) {
    display: none;
  }
}

.person-info__item {
  padding-top: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-600);

  @media (width >= 80rem) {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
  }
}

.person-info__item--primary {
  padding-top: var(--space--base);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--bold);
  color: inherit;
}

.person-info__item--baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.person-info__icon {
  margin-right: var(--space--x-small);
  fill: currentcolor;
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }
}

.person-info__icon--small {
  width: 0.75rem;
  height: 0.75rem;
}

.person-info__value {
  text-align: left;

  &:is(.dark *) {
    color: var(--color--night-gray-200);
  }
}

.person-info__label {
  margin-right: var(--space--xx-small);

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }
}

.person-info__reports {
  margin-left: var(--space--x-small);
  width: 100%;
  text-align: left;
}

.person-info__report-avatar {
  position: relative;
  margin-left: -0.5rem;
}

.person-social {
  margin-top: var(--space--large);
  margin-inline: auto;
  padding-bottom: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  @media (width >= 48rem) {
    width: 80%;
  }
}

.person-social__link {
  margin-right: var(--space--x-small);
  display: inline-block;
  color: var(--color--gray-600);
}

.person-social__icon {
  fill: currentcolor;
  color: var(--color--gray-600);

  @media (width >= 48rem) {
    width: var(--space--medium);
    height: var(--space--medium);
  }

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--red-600);
    }

    &:hover:is(.dark *) {
      color: var(--color--night-red-400);
    }
  }
}

.pronunciation-button {
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  &:focus {
    color: var(--color--gray-800);
  }

  @media (hover: hover) {
    &:hover {
      cursor: pointer;
    }
  }
}

.pronunciation-button__icon {
  margin-left: var(--space--x-small);
  fill: currentcolor;
}

.pronunciation-link {
  display: block;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);

  @media (width >= 80rem) {
    font-size: var(--font-size--small);
    line-height: var(--font-size--small--line-height);
  }
}

.pronunciation-link__icon {
  margin-right: var(--space--x-small);
  fill: currentcolor;
  color: var(--color--gray-600);
}

.person-profile-block {
  margin-top: 10rem;
  border-radius: var(--border-radius--large);
  -webkit-box-shadow: var(--shadow--2x-large);
          box-shadow: var(--shadow--2x-large);

  @media (width >= 48rem) {
    margin-top: 8rem;
  }

  .person-profile-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    @media (width >= 64rem) {
      margin-block: 0px;
    }
  }

  .person-profile {
    z-index: 20;
    margin-inline: 0px;
    width: 100%;
    border-radius: var(--border-radius--large);
    background-color: var(--color--white);
    padding: var(--space--large);

    @media (width >= 48rem) {
      padding: var(--space--large);
    }

    @media (width >= 64rem) {
      height: 100%;
    }

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
    }
  }
}
}
@layer base{

.person-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.person-cell__avatar {
  width: 2.5rem;
  height: 2.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.person-cell__image {
  width: 2.5rem;
  height: 2.5rem;
}

.person-cell__text {
  margin-left: var(--space--small);
}

.person-tabs {
  margin-bottom: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
  padding-inline: var(--space--medium);
  padding-top: var(--space--base);

  &:is(.dark *) {
    border-color: var(--color--night-gray-500);
  }

  @media (width >= 40rem) {
    padding-bottom: 0px;
  }
}

.person-position-note {
  padding-inline: var(--space--medium);
}

.person-position-note__icon {
  fill: currentcolor;
}

.person-bio-summary {
  padding-top: var(--space--x-small);
  padding-inline: var(--space--medium);
}

.croppie-frame {
  width: 100%;
  height: 18rem;
}

.croppie-frame__canvas {
  width: 100%;
}

.people-timezones__form {
  padding-left: var(--space--base);
  padding-bottom: var(--space--small);

  @media (width >= 80rem) {
    position: absolute;
    top: var(--space--small);
    right: var(--space--base);
  }
}

input.people-timezones__datetime {
  display: inline;
  width: auto;
}

.people-timezones__empty {
  padding-inline: var(--space--base);
  padding-top: var(--space--x-small);
  padding-bottom: 0px;
}

.people-timezones__table {
  margin-bottom: -1.5rem;
  table-layout: fixed;
}

.people-timezones__head {
  display: none;

  @media (width >= 40rem) {
    display: table-header-group;
  }
}

.people-timezones__cell {
  vertical-align: top;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.people-timezones__cell--current {
  background-color: var(--color--blue-200);

  &:is(.dark *) {
    background-color: var(--color--blue-900);
  }
}

.people-timezones__your-offset {
  text-transform: uppercase;
}

.people-timezones__mobile-offset {
  display: block;
  padding-bottom: var(--space--x-small);
  font-weight: var(--font-weight--bold);

  @media (width >= 40rem) {
    display: none;
  }
}

.people-timezones__group {
  display: block;
  margin: var(--space--xx-small);
  margin-bottom: var(--space--x-small);
  white-space: normal;
}

.people-timezones__mobile-time {
  display: block;
  padding-top: var(--space--x-small);

  @media (width >= 40rem) {
    display: none;
  }
}

.people-timezones__foot {
  display: none;

  @media (width >= 40rem) {
    display: table-footer-group;
  }
}

.people-timezones__foot-cell {
  padding-bottom: var(--space--medium);
}

.status-pill {
  border-radius: var(--border-radius--full);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--small);
  font-weight: var(--font-weight--semibold);
}

.status-pill--alert {
  background-color: var(--color--red-200);
  color: var(--color--red-700);
}

.status-pill--ok {
  background-color: var(--color--green-200);
  color: var(--color--green-700);
}

.status-pill--alert-dark {
  background-color: var(--color--red-200);
  color: var(--color--red-700);

  &:is(.dark *) {
    background-color: var(--color--red-800);
    color: var(--color--night-white);
  }
}

.status-pill--ok-dark {
  background-color: var(--color--green-200);
  color: var(--color--green-700);

  &:is(.dark *) {
    background-color: var(--color--green-800);
    color: var(--color--night-white);
  }
}

.ability-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  border-bottom-style: solid;
  border-bottom-width: 1px;

  @media (width >= 64rem) {
    border-width: 0px;
  }
}

.ability-row__skill {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}

.ability-row__name {
  font-weight: var(--font-weight--bold);
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--white);
  }
}

.ability-row__level {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

  @media (width >= 40rem) {
    width: 50%;
    padding-inline: var(--space--x-small);
  }

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}

.ability-row__interest {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

  @media (width >= 40rem) {
    width: 50%;
    padding-inline: var(--space--xx-small);
  }

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}

select.ability-row__select {
  width: 100%;
  padding-block: 0px;
  margin-block: 0px;
}

.ability-row__status {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: var(--space--x-small);
  padding-left: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.ability-row__renew {
  font-weight: var(--font-weight--bold);
  text-decoration-line: underline;
  color: var(--color--red-600);

  &:is(.dark *) {
    color: var(--color--red-800);
  }
}

.ability-row__updated {
  padding-top: var(--space--xx-small);
}

.ability-note--ok {
  color: var(--color--green-700);

  &:is(.dark *) {
    color: var(--color--green-500);
  }
}

.ability-note--removed {
  color: var(--color--red-700);

  &:is(.dark *) {
    color: var(--color--red-500);
  }
}

.ability-stripe {
  padding: var(--space--xx-small);
  margin: var(--space--xx-small);
}

.ability-stripe--odd:nth-child(odd),
.ability-stripe--even:nth-child(even) {
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.abilities-help {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.abilities-help__panels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--color--gray-100);

  > :not(:last-child) {
    -webkit-margin-end: var(--space--base);
            margin-inline-end: var(--space--base);
  }

  @media (width >= 80rem) {
    padding-bottom: var(--space--x-small);
  }

  &:is(.dark *) {
    background-color: var(--color--gray-600);
  }
}

.abilities-help__panel {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.abilities-help__content {
  margin-left: var(--space--large);
  padding-bottom: var(--space--base);
}

.skills-show-more-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.skills-show-more-wrap {
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
}

.skills-show-more {
  border-radius: var(--border-radius--full);
  border-style: solid;
  border-width: 2px;
  background-color: var(--color--white);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);

  &:is(.dark *) {
    border-color: var(--color--gray-600);
    background-color: var(--color--gray-600);
    color: var(--color--white);
  }
}

.skills-show-more__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--space--x-small);
  margin: var(--space--x-small);
}

.skills-show-more__icon {
  z-index: 1;
  fill: currentcolor;
  color: var(--color--gray-400);
}

.skills-highlighted {
  padding-inline: var(--space--base);
}

.skills-grid {
  display: grid;
  gap: var(--space--medium);
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (width >= 80rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.skills-grid--gutters {
  padding-inline: 1.25rem;
}

.skills-type {
  width: 100%;
}

.skills-surface {
  background-color: var(--color--white);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

td.skills-cell {
  padding-left: var(--space--x-small);

  @media (width >= 40rem) {
    padding-left: var(--space--base);
  }
}

.skill-indicator {
  width: var(--space--medium);
  fill: currentcolor;
}

.featured-skill-cell {
  @media (width >= 40rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.featured-skill-indicator {
  display: none;

  @media (width >= 40rem) {
    display: block;
    width: calc(1/3 * 100%);
  }
}

.legend-trigger {
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    color: var(--color--black);
  }
}

.legend-caption {
  padding: 0.625rem;
  text-align: left;
  font-weight: var(--font-weight--bold);
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

tr.person-accounts__client-row {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: var(--color--gray-300);
}

.person-projects-empty {
  display: none;
  padding-inline: var(--space--base);

  &:only-child {
    display: block;
  }
}

.person-positions-content {
  margin-top: calc(-1 * var(--space--base));
}

.position-add-link {
  margin-inline: var(--space--base);
  margin-top: var(--space--base);
}

.custom-social-link {
  margin-top: var(--space--x-small);
  border-top-style: solid;
  border-top-width: 1px;
  padding-top: var(--space--x-small);
}

.github-profile-fields {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-top: var(--space--x-small);
}
}
@layer base{

tr.skill-group-row {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-600);
    background-color: var(--color--night-gray-800);
  }
}

tr.skill-row--striped:nth-child(odd) {
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.featured-pill {
  border-radius: var(--border-radius--full);
  background-color: var(--color--purple-200);
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);
}

.ability-quick-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--x-small);
}

.ability-quick-form__field {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
}
@layer base{

.schedule-modal__zone {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.message-title-field {
  padding-top: var(--space--x-small);
  padding-bottom: 0px;
}

input.message-title-input {
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--extrabold);
}

.message-body {
  padding: var(--space--base);
  padding-bottom: 0px;
}

.message-byline {
  margin-top: var(--space--x-small);
  margin-bottom: var(--space--medium);
}

.message-byline__avatar {
  width: 2.5rem;
}

.message-byline__name {
  margin-left: var(--space--x-small);
}

.message-form__actions {
  margin-block: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.message-form__schedule {
  margin-left: var(--space--x-small);
  margin-top: var(--space--x-small);
}

.message-form__schedule-icon {
  fill: currentcolor;
}

.message-form__schedule-icon--active {
  color: var(--color--green-700);

  &:is(.dark *) {
    color: var(--color--green-300);
  }
}

.message-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.message-header__actions {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}

.message-title {
  padding-block: 0px;
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
}

.message-tags {
  width: 100%;
  margin-top: var(--space--xx-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.message-checkin-note {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.message-edited {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-500);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-900);
    }

    &:hover:is(.dark *) {
      color: var(--color--gray-100);
    }
  }
}

.message-item {
  margin-bottom: var(--space--large);
}

.message-item__title {
  display: block;
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--bold);
  text-decoration-line: underline;
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--black);
    }

    &:hover:is(.dark *) {
      color: var(--color--white);
    }
  }
}

.message-item__meta {
  margin-block: var(--space--xx-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.message-item__people {
  margin-block: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.message-item__author {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.message-item__avatar {
  width: 2.5rem;
  margin-right: var(--space--x-small);
}

.message-item__participants {
  padding-left: var(--space--x-small);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.message-list {
  padding-inline: var(--space--base);
}

.message-summary-list {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);
}

.message-filters {
  margin-bottom: var(--space--medium);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-inline: var(--space--base);
}

.message-filters__summary {
  margin-bottom: var(--space--base);
  font-weight: var(--font-weight--medium);
}

.message-filters__grid {
  display: grid;
  gap: var(--space--base);
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.message-filters__actions {
  padding-bottom: var(--space--base);
  text-align: right;
}

.draft-notice {
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.draft-notice__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.draft-notice__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  fill: currentcolor;
  color: var(--color--blue-500);
}

.draft-notice__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.draft-notice__title {
  font-weight: var(--font-weight--bold);
}

.draft-notice__change {
  font-weight: var(--font-weight--normal);
  text-decoration-line: underline;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.draft-item {
  margin-bottom: var(--space--x-small);
}

.draft-item__scheduled {
  font-weight: var(--font-weight--bold);

  svg {
    fill: currentcolor;
  }
}

.subscription-card {
  padding: var(--space--medium);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.subscription-card__prompt {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  text-align: center;
}

.subscription-card__title {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--bold);
  text-align: center;
}

.subscription-card__actions {
  margin-block: var(--space--base);
  text-align: center;
}

.subscribers-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.subscribers-toggle__icon {
  display: inline;
  height: var(--space--medium);
  fill: currentcolor;
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.subscribers-empty {
  display: inline-block;
  padding-inline: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.interest-check-ins {
  padding-top: var(--space--x-small);
}

.interest-subscribers {
  margin-top: var(--space--x-small);
}

.pulse-hint {
  margin-bottom: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);
}

.pulse-hint--adaptive {
  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.review-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--x-small);

  @media (width >= 80rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.review-filters__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--x-small);
}

.password-actions {
  margin-block: var(--space--x-small);
}

.password-alt {
  display: inline;
  margin-left: var(--space--base);
}

.password-alt__or {
  display: none;

  @media (width >= 48rem) {
    display: inline;
  }
}

.formatting-help {
  margin-top: 0.375rem;
}

.formatting-help__summary {
  text-align: right;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  margin-right: var(--space--xx-small);
}

.formatting-help__body {
  text-align: left;
}

.info-banner-note {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: var(--space--base);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.info-banner__icon--pinned {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.help-banner-icon {
  color: var(--color--red-600);
  fill: currentcolor;
  margin-top: -0.25rem;
  margin-right: var(--space--x-small);
}

.help-banner-icon--snug {
  margin-right: var(--space--xx-small);
}

.share-button {
  background-color: var(--color--blue-500);
  color: var(--color--white);
  text-align: center;

  &:is(.dark *) {
    background-color: var(--color--night-blue-500);
    color: var(--color--night-white);
  }
}

.reaction-hovercard {
  padding: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.interest-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.interest-row__title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: var(--space--base);
}

.interest-count {
  padding: var(--space--base);
  text-align: center;
  white-space: nowrap;
}

.interest-count__link {
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }

  svg {
    fill: currentcolor;
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-700);
    }

    &:hover:is(.dark *) {
      color: var(--color--gray-100);
    }
  }
}

.interest-link {
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  text-decoration-line: underline;
}

.reaction-hovercard__emoji {
  font-size: 4.5rem;
  line-height: 1;
}

.hover-link {
  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.index-links {
  list-style-type: disc;
  padding: var(--space--base);
}

.index-links__section-end {
  margin-bottom: var(--space--base);
}

.rotation-request-body {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);
}

.rotation-request-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: var(--space--small);
}
}
@layer base{

.review-heading {
  margin-bottom: var(--space--base);
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--gray-100);
  }
}

.review-note {
  margin-top: var(--space--base);
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-300);
  }
}

.review-update-link {
  font-weight: var(--font-weight--semibold);
  text-decoration-line: underline;
}

.review-pick-note {
  margin-top: var(--space--base);
  margin-bottom: var(--space--small);
  text-align: center;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.review-submit-note {
  margin-bottom: var(--space--small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.review-prompt {
  margin-bottom: var(--space--base);
  text-align: center;
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.review-options {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space--small);
}

.review-options--spaced {
  margin-bottom: var(--space--base);
}

.review-option {
  display: block;
  text-align: center;
  text-decoration-line: none;
  border-radius: var(--border-radius--large);
  padding-block: 1.25rem;
  padding-inline: var(--space--x-small);
}

.review-option__label {
  display: block;
  font-size: var(--font-size--small);
  line-height: var(--line-height--tight);
  font-weight: var(--font-weight--semibold);
}

.review-divider {
  margin-block: var(--space--base);
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--gray-700);
  }
}

.review-submit {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.rating-card {
  border-radius: var(--border-radius--large);
  padding: var(--space--base);
}

.rating-card__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--small);
}

.rating-card__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius--large);
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
}

.rating-card__label {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--semibold);
}

.portal-rule {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);

  &:is(.dark *) {
    border-color: var(--color--gray-600);
  }
}

.portal-subheading {
  margin-bottom: var(--space--small);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    border-color: var(--color--gray-600);
  }
}

.portal-project__header {
  padding-inline: var(--space--medium);
}

.portal-project__body {
  padding-inline: var(--space--medium);
  padding-bottom: var(--space--medium);
}

.portal-project__link-body {
  padding-inline: var(--space--medium);
  padding-block: var(--space--base);
}

.portal-project__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space--large);
  margin-bottom: var(--space--large);
}

.portal-block {
  margin-bottom: var(--space--medium);
}

.portal-links > :not(:last-child) {
  margin-bottom: var(--space--x-small);
}

.portal-link {
  color: var(--color--blue-600);

  &:is(.dark *) {
    color: var(--color--blue-400);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.portal-schedule-link {
  display: none;

  @media (width >= 48rem) {
    display: inline-block;
  }
}

.portal-schedule-content {
  padding-bottom: 8rem;
}

.portal-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius--large);
  margin-right: var(--space--base);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.client-schedule__head,
.client-schedule__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space--base);
  padding-inline: var(--space--medium);
  padding-block: var(--space--small);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
}

.client-schedule__head {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color--gray-600);
}

.client-schedule__row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.client-schedule__right {
  text-align: right;
}

.client-schedule__person {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0px;
}

.client-schedule__name-wrap {
  min-width: 0px;
}

.client-schedule__name {
  font-weight: var(--font-weight--medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-schedule__title {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-schedule__days {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
  text-align: right;
}

.portal-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, auto));
  gap: var(--space--large);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.portal-team__member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.portal-team__name {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  text-wrap: balance;
}

.portal-note {
  margin-bottom: var(--space--x-small);
}

.portal-note--italic {
  font-style: italic;
}

.portal-page-title {
  position: relative;
  padding-bottom: var(--space--base);

  &:is(.dark *) {
    color: var(--color--white);
  }
}

.portal-form-narrow {
  max-width: 28rem;
}

.account-manager {
  padding: var(--space--medium);
  border-radius: var(--border-radius--small);
}

.account-manager-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--base);
}

.account-manager-avatar {
  width: 2rem;
  height: 1.75rem;
  border-radius: var(--border-radius--large);
}

.account-manager-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--xx-small);
}

.account-manager-name {
  font-weight: var(--font-weight--bold);
}

.account-manager-contact > :not(:last-child) {
  margin-bottom: var(--space--xx-small);
}

.account-manager-help-text {
  margin-top: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-style: italic;
}
}
@layer base{

.billing-details {
  margin-top: var(--space--x-small);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--medium);
  width: 100%;
}

.billing-details__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.billing-details__item--fill {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.billing-details__label {
  font-weight: var(--font-weight--semibold);
}

.utilization-filter {
  padding-inline: var(--space--x-small);
  padding-block: var(--space--large);
}

.utilization-filter__date {
  width: 50%;
  padding-right: var(--space--x-small);

  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }

  @media (width >= 80rem) {
    width: 25%;
  }
}

.utilization-filter__submit {
  width: 100%;
  padding-inline: var(--space--small);
}

table.utilization-totals {
  table-layout: fixed;
}

.utilization-cell-link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.target-indicator {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--color--blue-500);
}

.target-indicator__icon {
  fill: currentcolor;
  width: 1rem;
  height: 1rem;
}

.budget-filters__dates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.budget-filters__gap {
  padding-left: var(--space--base);
}

.budget-heading {
  display: inline-block;
}

.budget-nav {
  display: inline-block;
  margin-left: var(--space--base);
}

input.budget-input {
  @media (width >= 48rem) {
    display: inline-block;
  }
}

input.budget-input--narrow {
  @media (width >= 48rem) {
    display: inline-block;
    width: 75%;
  }
}

.budget-unit {
  display: inline-block;
  margin-left: -2rem;
}

.budget-unit--wide {
  display: inline-block;
  margin-left: -2.5rem;
}

.revenue-filter__date {
  width: 100%;
  padding-right: var(--space--x-small);

  @media (width >= 64rem) {
    width: 50%;
  }

  @media (width >= 80rem) {
    width: calc(1/3 * 100%);
  }
}

table.day-assignments-table {
  border-style: solid;
  border-width: 1px;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

td.day-assignment-hours {
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
}
}
@layer base{

.timer-card {
  margin-bottom: var(--space--medium);
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--gray-50);
  padding: var(--space--base);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.timer-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: var(--space--small);
}

.timer-card__cluster {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.timer-card__icon {
  fill: currentcolor;
  height: 1.25rem;
  width: 1.25rem;
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.timer-card__title {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.timer-card__hint {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.timer-session {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space--base);
  padding-inline: var(--space--small);
  padding-block: var(--space--x-small);
  margin-bottom: var(--space--xx-small);
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-800);
  }
}

.timer-session__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  min-width: 0px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

input.timer-hours-field {
  width: 5rem;
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  background-color: var(--color--white);
  padding-inline: var(--space--xx-small);
  padding-block: var(--space--xx-small);
  margin-bottom: 0px;
  text-align: center;
  font-family: var(--font-family--mono);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
  font-variant-numeric: tabular-nums;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
    color: var(--color--night-white);
  }

  &:focus {
    outline-style: none;
    border-color: var(--color--gray-400);
    -webkit-box-shadow: 0 0 0 2px var(--color--gray-400), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            box-shadow: 0 0 0 2px var(--color--gray-400), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }
}

input.timer-hours-field--total {
  padding-block: var(--space--x-small);
}

.timer-session__range {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-inline: 0.625rem;
  padding-block: 0.125rem;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
    color: var(--color--night-gray-300);
  }
}

.timer-session__discard {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--space--xx-small);
  border-radius: var(--border-radius--small);
  color: var(--color--gray-400);
  -webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;

  &:is(.dark *) {
    color: var(--color--night-gray-500);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--red-600);
    }

    &:hover:is(.dark *) {
      color: var(--color--night-red-400);
    }
  }
}

.timer-session__discard-icon {
  fill: currentcolor;
  height: 1rem;
  width: 1rem;
}

.timer-active {
  border-radius: var(--border-radius--small);
  border-left-style: solid;
  border-left-width: 4px;
  border-color: var(--color--red-600);
  background-color: var(--color--white);
  padding: var(--space--base);
  margin-block: var(--space--small);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);

  &:is(.dark *) {
    border-color: var(--color--night-red-600);
    background-color: var(--color--night-gray-800);
  }
}

.timer-active__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.timer-active__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--small);
}

.timer-dot {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 0.75rem;
  width: 0.75rem;
}

@-webkit-keyframes ping {
  75%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping {
  75%, 100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

.timer-dot__ping {
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius--full);
  background-color: var(--color--red-500);
  opacity: 75%;
  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

  &:is(.dark *) {
    background-color: var(--color--night-red-500);
  }
}

.timer-dot__core {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: var(--border-radius--full);
  height: 0.75rem;
  width: 0.75rem;
  background-color: var(--color--red-600);

  &:is(.dark *) {
    background-color: var(--color--night-red-600);
  }
}

.timer-display {
  font-family: var(--font-family--mono);
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--bold);
  letter-spacing: 0.025em;
  color: var(--color--gray-900);
  font-variant-numeric: tabular-nums;

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.timer-card__totals {
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--color--gray-300);
  padding-top: var(--space--small);
  margin-top: var(--space--x-small);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.timer-card__totals-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space--base);
}

.timer-card__total-label {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--bold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}
}
@layer base{

.workable-button {
  margin-right: var(--space--x-small);
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
    color: var(--color--night-red-400);
  }
}

.workable-button__icon {
  display: inline;
  fill: currentcolor;
}

.evaluation {
  margin-block: var(--space--base);
}

.evaluation-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.evaluation-summary--below {
  margin-bottom: var(--space--base);
}

.evaluation-summary--spaced {
  margin-block: var(--space--base);
}

input.evaluation-summary__total {
  text-align: center;
}

.evaluation-summary__description {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  padding-inline: var(--space--base);
}

.threshold-note {
  padding: var(--space--base);
  margin-bottom: var(--space--x-small);
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-600);
  background-color: var(--color--gray-300);

  &:is(.dark *) {
    border-color: var(--color--night-gray-400);
    background-color: var(--color--night-gray-700);
  }
}

.threshold-note__text {
  @media (width >= 48rem) {
    width: 75%;
  }
}

.scorecard-instructions {
  padding: var(--space--base);
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-600);
  background-color: var(--color--gray-100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  &:is(.dark *) {
    border-color: var(--color--night-gray-400);
    background-color: var(--color--night-gray-700);
  }
}

.scorecard-instructions__link {
  display: inline-block;
  margin-left: var(--space--base);
}

tr.manual_onboarding_task {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-200);
}

p.onboarding-note {
  padding-block: 0px;
  padding-inline: var(--space--base);
}

.onboarding-legend {
  padding-block: var(--space--medium);
}

.onboarding-legend__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  line-height: 1.25rem;
  font-size: var(--font-size--small);

  @media (width >= 40rem) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  @media (width >= 64rem) {
    margin-inline: 0px;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -webkit-column-gap: var(--space--large);
       -moz-column-gap: var(--space--large);
            column-gap: var(--space--large);
    row-gap: 4rem;
  }
}

.onboarding-legend__item {
  padding-inline: var(--space--base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.onboarding-legend__term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.onboarding-legend__label {
  padding-left: var(--space--x-small);
  font-weight: var(--font-weight--semibold);
}

.onboarding-legend__desc {
  padding-top: var(--space--base);
}

.onboarding-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  padding-bottom: var(--space--xx-small);
}

.onboarding-option__link {
  padding-left: var(--space--xx-small);
}

.report-toolbar {
  display: flow-root;
  padding: var(--space--base);
}

.report-description {
  margin-bottom: var(--space--base);
}

.report-subscribe {
  margin-top: var(--space--base);
  padding-top: var(--space--base);
  border-top-style: solid;
  border-top-width: 1px;
}

.report-subscribe__title {
  margin-bottom: var(--space--xx-small);
}

.report-subscribe__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.report-subscribe__hint {
  margin-bottom: var(--space--small);
}

.report-subscribe__inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.report-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 80vh;
}

.onboarding-boolean {
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--large);
  padding-inline: var(--space--base);
  padding-block: var(--space--x-small);
}

.onboarding-boolean__no {
  color: var(--color--red-500);
  fill: currentcolor;
}

.scorecard-field-heading {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
}

.scorecard-field-handle {
  color: var(--color--white);
  margin-right: var(--space--xx-small);
}

.scorecard-field-messages {
  color: var(--color--green-500);
}

.help-icon--dei {
  color: var(--color--purple-700);
  fill: currentcolor;
}

.removable-row .remove-reveal {
  visibility: hidden;
  margin-left: var(--space--x-small);
  padding-block: var(--space--xx-small);
}

.removable-row:hover .remove-reveal {
  visibility: visible;
}

.remove-reveal--pinned {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.removable-row--experience {
  margin-bottom: var(--space--x-small);

  @media (width >= 96rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

input.experience-field {
  @media (width >= 96rem) {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-right: var(--space--x-small);
  }
}

fieldset.scorecard-field-form {
  cursor: move;
}

label.inline-label,
input.inline-input {
  display: inline;
}
}
@layer base{

.pipelines-show {
  .main-app {
    padding: 1rem 0 1rem 0;

    @media (width >= 48rem) {
      padding: 2rem 0 2rem 0;
    }
  }

  header {
    margin-left: 1rem;

    @media (width >= 48rem) {
      margin-left: 2rem;
    }
  }

  footer {
    display: none;
  }
}

.sortable-chosen {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

.pipeline-board {
  overflow-x: auto;
  padding-left: 0px;
  padding-right: var(--space--base);

  @media (width >= 48rem) {
    padding-inline: 2.5rem;
  }
}

.pipeline-board__columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--base);
  margin-right: var(--space--base);
}

.pipeline-column {
  border-style: solid;
  border-width: 1px;
  min-width: 20rem;
  max-width: 28rem;
  background-color: var(--color--gray-100);
  padding-inline: var(--space--small);

  &:is(.dark *) {
    border-style: none;
    background-color: var(--color--gray-800);
  }
}

.pipeline-column__title {
  padding: var(--space--small);
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--semibold);
}

.pipeline-column__count {
  margin-left: var(--space--x-small);
  border-radius: var(--border-radius--full);
  background-color: var(--color--white);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    background-color: var(--color--night-gray-700);
    color: var(--color--night-gray-200);
  }
}

.pipeline-column__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--x-small);
  margin-bottom: var(--space--base);
  height: 70dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

.pipeline-column__more {
  display: block;
  text-align: center;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.pipeline-column__add {
  display: block;
  width: 100%;
  padding-block: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-100);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.opportunity-card {
  border-radius: var(--border-radius--large);
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);
  padding: var(--space--base);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: -webkit-grab;
  cursor: grab;

  &:is(.dark *) {
    background-color: var(--color--gray-700);
  }
}

.opportunity-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: var(--space--x-small);
}

.opportunity-card__name {
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--black);

  &:is(.dark *) {
    color: var(--color--white);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-line: underline;
    }
  }
}

.opportunity-card__comments {
  margin-top: -0.25rem;
  margin-left: var(--space--x-small);
  color: var(--color--gray-500);

  svg {
    fill: currentcolor;
  }

  @media (hover: hover) {
    &:hover {
      color: var(--color--gray-700);
    }

    &:hover:is(.dark *) {
      color: var(--color--yellow-100);
    }
  }
}

.opportunity-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--x-small);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.team-chip {
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-inline: var(--space--x-small);
  padding-block: var(--space--xx-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-800);

  &:is(.dark *) {
    background-color: var(--color--gray-600);
    color: var(--color--gray-200);
  }
}

.team-chip--primary {
  font-weight: var(--font-weight--semibold);
}
}
@layer base{
.opportunities-staffing-show {
  .staffing-link {
    display: none;
  }
}
}
@layer base{

.utilization-show {
  details summary::-webkit-details-marker,
  details summary::marker  {
    margin-right: 0px;
    margin-left: var(--space--base);
  }

  summary > table td:first-child {
    padding-left: var(--space--x-small);
  }
}

.utilization-breakdown {
  td:first-child {
    width: 27.4%;
  }
}
}
@layer base{
.help-show {
  .header-inset svg {
    width: 30px;
    height: 30px;
    padding: 4px;
    margin-right: 4px;

    &.people-team-icon {
      width: 30px;
      height: 30px;
      padding: 0;
      margin: 0;
    }
  }
}
}
@layer base{

form.edit_blog_draft,
form.new_blog_draft {
  .blog_draft_publication_type, .blog_draft_auto_social_share {
    label {
      margin-bottom: 0px;
    }

    span.radio {
      margin-right: var(--space--base);
      display: inline-block;
    }
  }
}

form.edit_blog_draft,
form.new_blog_draft {
  div.input:not(:last-child) {
    margin-bottom: 0px;
  }

  .blog_draft_publication_type, .blog_draft_auto_social_share {
    label {
      margin-bottom: 0px;
    }

    span.radio {
      margin-right: var(--space--base);
      display: inline-block;
    }
  }

  #suggest-tag,
  #tag-suggestions,
  input[type="text"],
  textarea,
  .choices__inner {
    margin-bottom: 0px;
    border-radius: 0;
    border-style: solid;
    border-width: 0px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-color: transparent;
    padding: var(--space--x-small);
    font-weight: var(--font-weight--normal);
    -webkit-box-shadow: none;
            box-shadow: none;

    &:is(.dark *) {
      border-color: var(--color--gray-500);
      color: var(--color--night-white);
    }

    &:focus {
      border-radius: var(--border-radius--small);
    }
  }

  .choices__inner {
    padding: 0px;
    padding-left: var(--space--xx-small);
  }

  .tagify {
    display: block;
    border-style: solid;
    border-width: 0px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  .blog_draft_title input[type="text"] {
    margin-bottom: var(--space--xx-small);
    font-size: var(--font-size--2x-large);
    line-height: var(--font-size--2x-large--line-height);
    font-weight: var(--font-weight--extrabold);
  }

  .blog_draft_teaser textarea,
  .blog_draft_tags {
    margin-top: var(--space--xx-small);
  }

  .counter {
    display: inline-block;
    background-color: var(--color--white);
    text-align: right;
    font-size: var(--font-size--x-small);
    line-height: var(--font-size--x-small--line-height);
    color: var(--color--gray-500);

    &:is(.dark *) {
      background-color: var(--color--night-gray-900);
      color: var(--color--gray-400);
    }

    float: right;
    margin-top: -1.75rem;
    margin-right: 0.25rem;
  }

  .choices__list.choices__list--multiple,
  input[type="search"].choices__input {
    background-color: transparent;
  }

  .choices__list--multiple .choices__item {
    border-style: none;
    background-color: var(--color--gray-100);
    color: var(--color--gray-800);

    &:is(.dark *) {
      background-color: var(--color--night-gray-800);
      color: var(--color--night-white);
    }
  }
}

.tagify {
  padding-block: var(--space--xx-small);

  --tag-bg: rgb(240 240 248 / var(--tw-bg-opacity));
  font-size: 14px;
}

.tagify__dropdown {
  font-size: 14px;
}

.dark {
  .tagify {
    --tags-border-color: rgb(103 103 110 / var(--tw-border-opacity));
    --tag-bg: rgb(61 62 68 / var(--tw-bg-opacity));
    --tag-text-color: rgb(248 248 242 / var(--tw-text-opacity));
    --placeholder-color: rgb(61 62 68 / var(--tw-bg-opacity));
    --placeholder-color-focus: rgb(161 162 168 / var(--tw-bg-opacity));
    --tag-hover: rgb(61 62 68 / var(--tw-bg-opacity));
  }

  .tagify__dropdown {
    --tagify-dd-bg-color: rgb(61 62 68 / var(--tw-bg-opacity));
    --tagify-dd-color-primary: rgb(41 41 44 / var(--tw-bg-opacity));
  }
}

.blog-preview {
  height: 200px;
  width: 100%;
  overflow: hidden;
  border: 0;

  &::-webkit-scrollbar {
    display: none;
  }
}

.blog-draft__column {
  max-width: var(--container--medium);
}

.blog-notice {
  inset-inline: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space--base);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.25rem;
  text-align: center;

  @media (width >= 48rem) {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: left;
  }
}

.blog-notice__icon {
  fill: currentcolor;
}

.blog-notice__icon--info {
  color: var(--color--blue-500);
}

.blog-notice__icon--error {
  color: var(--color--red-500);
}

.blog-notice__message {
  width: 100%;
}

.blog-notice__title {
  font-weight: var(--font-weight--bold);
}

.blog-notice__detail--spaced {
  padding-top: var(--space--x-small);
}

.blog-notice__error {
  color: var(--color--red-700);
}

.blog-notice__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space--x-small);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.blog-draft__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--x-small);
}

.blog-draft__title {
  padding-block: 0;
}

.blog-draft__actions {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: end;
  gap: var(--space--xx-small);
}

.blog-draft__body {
  padding: var(--space--base);
  padding-bottom: 0;
}

.blog-form__grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.blog-form__tag-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.blog-form__suggest {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

@-webkit-keyframes blog-suggest-pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes blog-suggest-pulse {
  50% {
    opacity: 0.5;
  }
}

.blog-form__suggest-icon {
  color: var(--color--purple-700);

  @media (prefers-reduced-motion: no-preference) {
    -webkit-animation: blog-suggest-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            animation: blog-suggest-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  &:is(.dark *) {
    color: var(--color--purple-500);
  }
}

.blog-form__suggest:hover .blog-form__suggest-icon,
.blog-form__suggest:disabled .blog-form__suggest-icon {
  -webkit-animation: none;
          animation: none;
}

.blog-form__suggest:disabled .blog-form__suggest-icon {
  color: var(--color--gray-500);
}

.blog-form__suggestions:empty {
  display: none;
}

.blog-form__editor {
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--large);
  margin-bottom: var(--space--base);
}

.blog-form__footer {
  padding: var(--space--base);
}

.blog-form__footer-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.blog-form__status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.blog-form__pr-link {
  margin-right: var(--space--base);
  text-decoration-line: underline;
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.blog-form__preview {
  margin-right: var(--space--x-small);
}

.blog-form__action {
  display: inline-block;
}

.blog-form__draft-note {
  margin-top: var(--space--x-small);
  text-align: right;
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--medium);
  color: var(--color--gray-800);

  &:is(.dark *) {
    color: var(--color--gray-200);
  }
}

.blog-form__draft-note--detail {
  margin-top: var(--space--xx-small);
  font-weight: var(--font-weight--normal);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--gray-400);
  }
}

.blog-form__new-column {
  @media (width >= 48rem) {
    margin-bottom: 0px;
  }

  @media (width >= 96rem) {
    width: calc(2/3 * 100%);
  }
}

.blog-form__title-wrapper {
  padding-top: var(--space--x-small);
  padding-bottom: 0;
}

.blog-form__title-input {
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--extrabold);
}

.blog-form__note {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.blog-form__group {
  margin-block: var(--space--base);
}

.blog-form__spaced-label {
  margin-top: var(--space--base);
}

.blog-form__external {
  padding-inline: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: var(--space--medium);
}

.blog-form__external-summary {
  margin-bottom: var(--space--base);
  font-weight: var(--font-weight--medium);
}

.blog-drafts__item {
  margin-bottom: var(--space--large);
}

.blog-drafts__title {
  display: block;
  font-size: var(--font-size--x-large);
  line-height: var(--font-size--x-large--line-height);
  font-weight: var(--font-weight--bold);
  text-decoration-line: underline;
  color: var(--color--gray-900);

  &:hover {
    @media (hover: hover) {
      color: var(--color--black);
    }
  }

  &:is(.dark *) {
    color: var(--color--night-gray-100);

    &:hover {
      @media (hover: hover) {
        color: var(--color--white);
      }
    }
  }
}

.blog-drafts__updated {
  margin-block: var(--space--xx-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.blog-drafts__badge {
  display: inline-block;
  margin-right: var(--space--xx-small);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--x-small);
  border-radius: var(--border-radius--full);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  font-weight: var(--font-weight--medium);
  background-color: var(--color--gray-100);
  color: var(--color--gray-700);

  &:is(.dark *) {
    background-color: var(--color--gray-800);
    color: var(--color--gray-200);
  }
}

.blog-merged__para {
  margin-bottom: var(--space--base);
}

.blog-merged__link {
  text-decoration-line: underline;
  color: var(--color--blue-600);

  &:hover {
    @media (hover: hover) {
      color: var(--color--blue-800);
    }
  }

  &:visited {
    color: var(--color--purple-600);
  }
}

.tag-suggestions__heading {
  display: inline;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--medium);
}

.tag-suggestions__list {
  display: inline-block;
}

.tag-suggestions__empty {
  display: none;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-style: italic;

  &:only-child {
    display: block;
  }
}
}
@layer base{

form div.input.signup_waitlisted {
  margin-left: 1rem;
  margin-bottom: 0;

  label.checkbox {
    margin: 0;
    font-weight: normal;
  }
}

.event-title {
  padding-block: 0px;
  font-size: var(--font-size--2x-large);
  line-height: var(--font-size--2x-large--line-height);
  font-weight: var(--font-weight--extrabold);
}

.event-when {
  margin-top: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.event-people {
  margin-top: var(--space--base);
}

.event-waitlist-label {
  margin-block: var(--space--x-small);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
}

.event-tags {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  margin-bottom: var(--space--x-small);
}

.event-form__panel {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: var(--space--base);
}

.event-form__section {
  padding: var(--space--base);
}

.event-form__repeat {
  gap: var(--space--x-small);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--space--base);

  @media (width >= 48rem) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.event-form__interval {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  visibility: hidden;
  gap: var(--space--x-small);
}

.event-signup {
  margin-bottom: var(--space--base);
}

.event-signup--tight {
  margin-bottom: var(--space--x-small);
}

.event-signup--wrap {
  white-space: normal;
}

.event-signup-external {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: baseline;
}

.event-signup-external__label {
  margin-right: var(--space--x-small);
}

.event-signup-note {
  text-align: center;
}

.event-signup-note--strong {
  font-weight: var(--font-weight--bold);
}

.event-empty {
  padding: var(--space--large);
  padding-bottom: 0px;
}

.event-empty-signups {
  padding-block: var(--space--base);
}

.event-actions > :not(:last-child) {
  margin-bottom: var(--space--x-small);
}

.event-action-link {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--xx-small);
}

.event-handbook-note {
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  text-align: center;
}

.event-card--active {
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--blue-700);
}

.section-header .event-card__link {
  color: var(--color--gray-700);

  &:is(.dark *) {
    color: var(--color--night-gray-300);
  }
}

.event-card__time {
  font-weight: var(--font-weight--normal);
}

.event-card__body {
  margin-block: var(--space--base);
}

.event-card__desc {
  margin-bottom: var(--space--base);
}

.summit-banner--active {
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--blue-700);

  &:is(.dark *) {
    border-color: var(--color--blue-300);
  }
}

.summit-banner__header {
  padding-bottom: var(--space--x-small);
}

.summit-banner__title,
.summit-banner__name,
.summit-banner__time {
  color: var(--color--blue-600);

  &:is(.dark *) {
    color: var(--color--blue-400);
  }
}

.summit-banner__title,
.summit-banner__name {
  @media (hover: hover) {
    &:hover {
      color: var(--color--blue-700);
    }

    &:hover:is(.dark *) {
      color: var(--color--night-blue-300);
    }
  }
}

.summit-banner__name {
  text-decoration-line: underline;
}

.summit-banner__icon {
  fill: currentcolor;
  color: var(--color--blue-600);

  &:is(.dark *) {
    color: var(--color--blue-400);
  }
}

.signed-up-indicator {
  display: inline-block;
  margin-right: var(--space--x-small);
  fill: currentcolor;
  color: var(--color--blue-700);

  &:is(.dark *) {
    color: var(--color--blue-300);
  }
}

.check-in-meta {
  padding-inline: var(--space--base);
  padding-bottom: var(--space--base);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
}

.check-in-panel {
  border-top-left-radius: var(--border-radius--small);
  border-top-right-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.check-in-spacer {
  margin-bottom: var(--space--base);
}

.check-in-divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.check-in-divider__rule {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.check-in-date {
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: var(--border-radius--small);
  background-color: var(--color--gray-100);
  text-transform: uppercase;
  padding: var(--space--x-small);
  margin-left: var(--space--base);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.check-in-empty {
  margin-block: var(--space--base);
}

.check-in-frequency {
  display: inline;
  margin-inline: var(--space--x-small);
}

.summit-toolbar-block {
  margin: 0px;
  margin-inline: var(--space--base);
}

.summit-toolbar {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.summit-pill {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  border-radius: var(--border-radius--small);
  -webkit-box-shadow: var(--shadow--large);
          box-shadow: var(--shadow--large);
  background-color: var(--color--white);
  padding-block: var(--space--x-small);
  padding-inline: var(--space--base);
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-700);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
    color: var(--color--night-gray-300);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color--gray-300);
    }

    &:hover:is(.dark *) {
      background-color: var(--color--gray-800);
    }
  }
}

.summit-pill--spaced {
  margin-right: var(--space--x-small);
}

.summit-break {
  background-color: var(--color--gray-200);

  &:is(.dark *) {
    background-color: var(--color--night-gray-900);
  }
}

.summit-events {
  gap: var(--space--base);

  @media (width >= 48rem) {
    display: grid;
  }
}

.summit-events--cols-1 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.summit-events--cols-2 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.summit-events--cols-3 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.summit-event-card {
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--small);
  padding: var(--space--base);
  margin-bottom: var(--space--base);

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
  }
}

.summit-event-title {
  padding-top: 0px;
}

.summit-event-link {
  display: block;
}

.summit-description-content {
  padding-inline: var(--space--large);
}

.summit-note {
  font-style: italic;
}

.shoutout-quote {
  margin-inline: var(--space--base);
}

.summit-list {
  margin-top: var(--space--x-small);
}

.summit-subheading {
  margin-top: var(--space--x-small);
}

.summit-glyph {
  color: var(--color--blue-700);
}

.summit-glyph--adaptive {
  fill: currentcolor;

  &:is(.dark *) {
    color: var(--color--blue-300);
  }
}
}
@layer base{
.weekly_project_billings-index table td {
  padding-top: var(--space--x-small);
  padding-bottom: 0px;

  &.billing-information {
    padding-bottom: var(--space--x-small);
  }
}
}
@layer base{

.ralph-thread {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space--small);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow: hidden auto;
}

.ralph-thread > :first-child {
  margin-top: auto;
}

.ralph-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
}

.ralph-message__bubble {
  max-width: 80%;
  border-radius: var(--border-radius--small);
  padding-inline: var(--space--small);
  padding-block: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  min-width: 0;
  overflow-wrap: break-word;

  pre {
    overflow-x: auto;
  }
}

.ralph-message--user {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;

  .ralph-message__bubble {
    background-color: var(--color--blue-600);
    color: var(--color--white);

    &:is(.dark *) {
      background-color: var(--color--night-blue-600);
    }
  }
}

.ralph-message--assistant {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  .ralph-message__bubble {
    padding-inline: 0px;
    max-width: 75ch;
  }
}

.ralph-message--error {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  .ralph-message__bubble {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color--red-200);
    background-color: var(--color--red-100);
    color: var(--color--red-700);

    &:is(.dark *) {
      border-color: var(--color--night-red-700);
      background-color: var(--color--night-red-900);
      color: var(--color--night-red-300);
    }
  }
}

.ralph-pending {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-600);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.ralph-progress {
  -webkit-animation: ralph-fade-in 250ms ease-out;
          animation: ralph-fade-in 250ms ease-out;

  .markdown p {
    padding-block: 0px;
    line-height: var(--line-height--base);
  }
}

.ralph-page {
  .main-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 0;
  }
}

.ralph-layout {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  margin-bottom: 0;
  grid-template-rows: minmax(0, 1fr);

  > .section {
    min-height: 0;
    margin-bottom: 0;
  }

  > .section:last-child {
    height: auto;
    max-height: 100%;
    -ms-flex-item-align: start;
        align-self: start;
  }

  @container (min-width: 48rem) {
    grid-template-columns: minmax(0, 48rem) minmax(0, 28rem);
  }
}

.ralph-conversations {
  padding: var(--space--base);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow: hidden auto;
}

@-webkit-keyframes ralph-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes ralph-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.ralph-conversation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--small);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--color--gray-100);

  &:is(.dark *) {
    border-color: var(--color--night-gray-800);
  }

  &:last-child {
    border-bottom-style: none;
  }

  -webkit-animation: ralph-fade-in 250ms ease-out;

          animation: ralph-fade-in 250ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ralph-conversation,
  .ralph-progress {
    -webkit-animation: none;
            animation: none;
  }
}

.ralph-composer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--small);
}

.ralph-composer__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ralph-composer__thumb {
  width: 2.25rem;
  height: 2.25rem;
}

.ralph-composer__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.ralph-composer__shell {
  border-radius: var(--border-radius--small);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--gray-300);
  background-color: var(--color--white);
  -webkit-box-shadow: var(--shadow--base);
          box-shadow: var(--shadow--base);
  -webkit-transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, translate, scale, rotate, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, translate, scale, rotate, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;

  &:is(.dark *) {
    border-color: var(--color--night-gray-700);
    background-color: var(--color--night-gray-900);
  }

  &:focus-within {
    border-color: var(--color--blue-500);
  }

  &:focus-within:is(.dark *) {
    border-color: var(--color--night-blue-500);
  }
}

textarea.ralph-composer__input {
  resize: none;
  margin-bottom: 0px;
  border-width: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  outline-style: none;
  max-height: 40vh;
  overflow-x: hidden;

  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 60%;
  }
}

.ralph-composer__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--space--small);
  padding-inline: var(--space--small);
  padding-bottom: var(--space--x-small);
}

.ralph-composer__hint {
  font-size: var(--font-size--x-small);
  line-height: var(--font-size--x-small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.ralph-composer__send {
  &:disabled {
    opacity: 60%;
    cursor: not-allowed;
  }
}

.ralph-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0px;
}

.ralph-intro {
  padding: var(--space--medium);
}

.ralph-intro__greeting {
  margin-bottom: var(--space--base);
  font-size: var(--font-size--base);
  line-height: var(--font-size--base--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-900);

  &:is(.dark *) {
    color: var(--color--night-white);
  }
}

.ralph-chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space--x-small);
}

.ralph-chip {
  white-space: nowrap;
  border-radius: var(--border-radius--full);
  background-color: var(--color--gray-100);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--small);
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  font-weight: var(--font-weight--semibold);
  color: var(--color--gray-800);

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
    color: var(--color--night-gray-200);
  }
}

.ralph-chat-well {
  background-color: #f0f0f8;
  padding: var(--space--medium);
  border-bottom-left-radius: var(--border-radius--small);
  border-bottom-right-radius: var(--border-radius--small);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--space--base);
  min-height: 0px;

  &:is(.dark *) {
    background-color: var(--color--night-gray-800);
  }
}

.ralph-conversation__link {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space--small);
  padding-block: var(--space--base);
  min-width: 0px;
}

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

.ralph-conversation__time {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: var(--font-size--small);
  line-height: var(--font-size--small--line-height);
  color: var(--color--gray-500);

  &:is(.dark *) {
    color: var(--color--night-gray-400);
  }
}

.ralph-conversation__delete {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color--red-500);

  svg {
    fill: currentcolor;
  }
}

.header-inset .ralph-sidebar-title {
  padding-block: 0px;
  font-size: var(--font-size--large);
  line-height: var(--font-size--large--line-height);
  font-weight: var(--font-weight--bold);
}

.ralph-heading {
  padding-block: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space--x-small);
}

.header-inset .ralph-heading__icon {
  height: 2rem;
  width: auto;
}

.ralph-spinner-icon {
  fill: currentcolor;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  height: 1rem;
  width: 1rem;
}

.ralph-spinner-icon--pinned {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
}
@layer utilities{

/*
  Visually hides content while keeping it available to screen readers.
  From Roux. Prefer this over Tailwind's sr-only in converted markup.
*/

.u-hide-visually {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
  The canonical sr-only definition, byte-for-byte what Tailwind's utility
  compiles to. Tailwind emits an identical rule until it is removed; this one
  is what markup keeps using afterwards. Rules that must hide elements by
  selector (rather than by class) copy these declarations — see
  pages/blog-posts.css.
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
}
@layer utilities{

.hidden {
  display: none;
}

.block {
  display: block;
}

.grid {
  display: grid;
}

.fill-current {
  fill: currentColor;
}

.text-current {
  color: currentColor;
}
}
@layer utilities{
/* Keeps .text-current links from picking up the light-mode link color when
   dark mode is toggled on via the .dark class. */
.dark .text-current {
  color: currentColor !important;
}
}
/*
  Elements throughout the app rely on this Tailwind-era default border color;
  removing it requires giving every borderless-bordered element an explicit
  border color.
*/
@layer base {
  ::-ms-backdrop {
    border-color: var(--color--gray-200, currentcolor);
  }
  ::-webkit-file-upload-button {
    border-color: var(--color--gray-200, currentcolor);
  }
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color--gray-200, currentcolor);
  }
}