@charset "UTF-8";.cb-scheme-variant {
  --bg: transparent;
  --text: var(--text-primary);
  --bg-hover: transparent;
  --bg-active: transparent;
  --outline: transparent;
  color: var(--text);
  background-color: var(--bg);
}
.cb-scheme-variant:hover {
  background-color: var(--bg-hover);
}
.cb-scheme-variant:active {
  background-color: var(--bg-active);
}

.cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}

.cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}

.cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}

.cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}

.cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}

.cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}

.cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}

.cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-light .cb-gray-50 {
  --bg: var(--tertiary-50);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-100 {
  --bg: var(--tertiary-100);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-200 {
  --bg: var(--tertiary-200);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-300 {
  --bg: var(--tertiary-300);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-400 {
  --bg: var(--tertiary-400);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-500 {
  --bg: var(--tertiary-500);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-600 {
  --bg: var(--tertiary-600);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-700 {
  --bg: var(--tertiary-700);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-800 {
  --bg: var(--tertiary-800);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-900 {
  --bg: var(--tertiary-900);
  --text: var(--white-to-black);
}

.theme-dark .cb-gray-50 {
  --bg: var(--tertiary-900);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-100 {
  --bg: var(--tertiary-800);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-200 {
  --bg: var(--tertiary-700);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-300 {
  --bg: var(--tertiary-600);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-400 {
  --bg: var(--tertiary-500);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-500 {
  --bg: var(--tertiary-400);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-600 {
  --bg: var(--tertiary-300);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-700 {
  --bg: var(--tertiary-200);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-800 {
  --bg: var(--tertiary-100);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-900 {
  --bg: var(--tertiary-50);
  --text: var(--white-to-black);
}

:root {
  --animation-timing-productive: cubic-bezier(0, 0, 0.44, 0.96);
  --animation-timing-expressive: cubic-bezier(0.645, 0.045, 0.355, 1);
  --animation-timing-entranceProductive: cubic-bezier(0, 0, 0.27, 0.96);
  --animation-timing-entranceExpressive: cubic-bezier(0.05, 0.025, 0.26, 0.96);
  --animation-timing-exitProductive: cubic-bezier(0.2, 0, 1, 0.85);
  --animation-timing-exitExpressive: cubic-bezier(0.1, 0.015, 0.85, 0.1);
  --animation-timing-linear: linear;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  min-height: 40px;
  padding: 10px 13px;
  transition: background-color 200ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 200ms cubic-bezier(0, 0, 0.44, 0.96);
  border-radius: 4px;
  font-family: var(--font-family);
}
.btn.btn-xs {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 12px;
}
.btn.btn-sm {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 14px;
}
.btn.btn-md {
  min-height: 40px;
  padding: 10px 13px;
}
.btn.btn-lg {
  min-height: 48px;
  padding: 14px 17px;
}
.btn.border-radius-0 {
  border-radius: 0;
}
.btn {
  --focus-ring: var(--primary-500);
}
.btn:focus {
  box-shadow: inset 0px 0px 0px 2px var(--focus-ring);
  outline: none;
}
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  --bg: var(--disabled-bg) !important;
  --text: var(--disabled-text) !important;
  --outline: var(--disabled-text) !important;
}
.btn:disabled.cb-muted, .btn.disabled.cb-muted {
  --bg: var(--disabled-bg-muted) !important;
}
.btn.cb-outline {
  box-shadow: inset 0 0 0 1px var(--outline);
}
.btn.cb-cta {
  background: linear-gradient(to right, var(--cygnus-500) 0%, var(--fornax-500) 100%);
  color: var(--tertiary-800);
}
.btn.cb-cta:hover {
  background: linear-gradient(to right, var(--cygnus-500) 40%, var(--fornax-500) 100%);
  box-shadow: 0px 5px 15px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta:active {
  background: linear-gradient(to right, var(--cygnus-500) 60%, var(--fornax-500) 100%);
  box-shadow: 0px 5px 25px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta {
  transition: background 600ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 0.2s cubic-bezier(0, 0, 0.44, 0.96);
}
.btn .no-focus-state:focus {
  --focus-ring: transparent;
}
.btn.btn-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-xs {
  gap: var(--spacing-xxs);
}
.btn.btn-icon.btn-xs .material-symbols-rounded {
  font-size: 12px;
}
.btn.btn-icon.btn-sm {
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-sm .material-symbols-rounded {
  font-size: 14px;
}
.btn.btn-icon.btn-md {
  gap: var(--spacing-sm);
}
.btn.btn-icon.btn-lg {
  gap: var(--spacing-md);
}

.gradient-highlight-btn {
  position: relative;
  min-width: calc(var(--sizing-lg) * 2);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  transition: border-bottom 0.2s linear;
  border: none;
  padding: var(--spacing-xxs) var(--spacing-md);
}
.gradient-highlight-btn:after {
  content: "";
  position: absolute;
  border-bottom: 0px solid var(--secondary-500);
  background: var(--tertiary-800);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: left 0.2s linear;
}
.gradient-highlight-btn.top:after {
  transition-property: bottom;
  bottom: 100%;
}
.gradient-highlight-btn.bottom:after {
  transition-property: top;
  top: 100%;
}
.gradient-highlight-btn.left:after {
  transition-property: right;
  right: 100%;
}
.gradient-highlight-btn.right:after {
  transition-property: left;
  left: 100%;
}
.gradient-highlight-btn.selected {
  background-color: var(--bg-primary);
}
.gradient-highlight-btn.selected.top:after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn.selected.bottom:after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn.selected.left:after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn.selected.right:after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn.selected:after {
  background: var(--primary-500);
}
.gradient-highlight-btn:hover {
  color: var(--text-primary);
}
.gradient-highlight-btn:hover.top:after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn:hover.bottom:after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn:hover.left:after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn:hover.right:after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn:hover {
  cursor: pointer;
}
.gradient-highlight-btn:focus {
  outline: none;
}

:root {
  /* Primitive Colours */
  /* Sol */
  --sol-50: #ffe7f2;
  --sol-100: #ffb5d8;
  --sol-200: #ff91c5;
  --sol-300: #ff5eaa;
  --sol-400: #ff3f99;
  --sol-500: #ff0f80;
  --sol-600: #e80e74;
  --sol-700: #b50b5b;
  --sol-800: #8c0846;
  --sol-900: #6b0636;
  --sol-0: #fff4f9;
  /* Luna */
  --luna-50: #efe7fb;
  --luna-100: #ccb5f1;
  --luna-200: #b491eb;
  --luna-300: #915ee2;
  --luna-400: #7c3fdc;
  --luna-500: #5b0fd3;
  --luna-600: #530ec0;
  --luna-700: #410b96;
  --luna-800: #320874;
  --luna-900: #260659;
  --luna-0: #f8f4fd;
  /* Aquila */
  --aquila-50: #edeffe;
  --aquila-100: #c8cefa;
  --aquila-200: #adb7f8;
  --aquila-300: #8796f5;
  --aquila-400: #7081f3;
  --aquila-500: #4c62f0;
  --aquila-600: #4559da;
  --aquila-700: #3646aa;
  --aquila-800: #2a3684;
  --aquila-900: #202965;
  --aquila-0: #f7f8fe;
  /* Lyra */
  --lyra-50: #e9fbf5;
  --lyra-100: #bbf3e1;
  --lyra-200: #9aedd2;
  --lyra-300: #6ce4be;
  --lyra-400: #4fdfb1;
  --lyra-500: #23d79e;
  --lyra-600: #20c490;
  --lyra-700: #199970;
  --lyra-800: #137657;
  --lyra-900: #0f5a42;
  --lyra-0: #f5fdfb;
  /* Pyxis */
  --pyxis-50: #fefcec;
  --pyxis-100: #fcf4c3;
  --pyxis-200: #faefa6;
  --pyxis-300: #f8e87e;
  --pyxis-400: #f6e365;
  --pyxis-500: #f4dc3e;
  --pyxis-600: #dec838;
  --pyxis-700: #ad9c2c;
  --pyxis-800: #867922;
  --pyxis-900: #665c1a;
  --pyxis-0: #fffdf6;
  /* Fornax */
  --fornax-50: #fff6ec;
  --fornax-100: #fee3c4;
  --fornax-200: #fdd5a8;
  --fornax-300: #fcc280;
  --fornax-400: #fcb667;
  --fornax-500: #fba441;
  --fornax-600: #e4953b;
  --fornax-700: #b2742e;
  --fornax-800: #8a5a24;
  --fornax-900: #69451b;
  --fornax-0: #fffbf6;
  /* Cygnus */
  --cygnus-50: #feeded;
  --cygnus-100: #fcc6c8;
  --cygnus-200: #fbaaae;
  --cygnus-300: #f98389;
  --cygnus-400: #f86b72;
  --cygnus-500: #f6464f;
  --cygnus-600: #e04048;
  --cygnus-700: #af3238;
  --cygnus-800: #87272b;
  --cygnus-900: #671d21;
  --cygnus-0: #fff7f7;
  /* Neutral */
  --neutral-white: #ffffff;
  --neutral-black: #000000;
  /* Greys */
  --grey-50: #fafafa;
  --grey-100: #e1e1e2;
  --grey-200: #c8c8ca;
  --grey-300: #afaeb2;
  --grey-400: #96959a;
  --grey-500: #7e7c81;
  --grey-600: #656369;
  --grey-700: #4c4951;
  --grey-800: #333039;
  --grey-900: #1a1721;
  /* Semantic Colours */
  /* Primary */
  --primary-50: var(--sol-50);
  --primary-100: var(--sol-100);
  --primary-200: var(--sol-200);
  --primary-300: var(--sol-300);
  --primary-400: var(--sol-400);
  --primary-500: var(--sol-500);
  --primary-600: var(--sol-600);
  --primary-700: var(--sol-700);
  --primary-800: var(--sol-800);
  --primary-900: var(--sol-900);
  /* Secondary */
  --secondary-50: var(--luna-50);
  --secondary-100: var(--luna-100);
  --secondary-200: var(--luna-200);
  --secondary-300: var(--luna-300);
  --secondary-400: var(--luna-400);
  --secondary-500: var(--luna-500);
  --secondary-600: var(--luna-600);
  --secondary-700: var(--luna-700);
  --secondary-800: var(--luna-800);
  --secondary-900: var(--luna-900);
  /* Tertiary */
  --tertiary-50: var(--grey-50);
  --tertiary-100: var(--grey-100);
  --tertiary-200: var(--grey-200);
  --tertiary-300: var(--grey-300);
  --tertiary-400: var(--grey-400);
  --tertiary-500: var(--grey-500);
  --tertiary-600: var(--grey-600);
  --tertiary-700: var(--grey-700);
  --tertiary-800: var(--grey-800);
  --tertiary-900: var(--grey-900);
  /* Info */
  --info-50: var(--aquila-50);
  --info-100: var(--aquila-100);
  --info-200: var(--aquila-200);
  --info-300: var(--aquila-300);
  --info-400: var(--aquila-400);
  --info-500: var(--aquila-500);
  --info-600: var(--aquila-600);
  --info-700: var(--aquila-700);
  --info-800: var(--aquila-800);
  --info-900: var(--aquila-900);
  /* Success */
  --success-50: var(--lyra-50);
  --success-100: var(--lyra-100);
  --success-200: var(--lyra-200);
  --success-300: var(--lyra-300);
  --success-400: var(--lyra-400);
  --success-500: var(--lyra-500);
  --success-600: var(--lyra-600);
  --success-700: var(--lyra-700);
  --success-800: var(--lyra-800);
  --success-900: var(--lyra-900);
  /* Caution */
  --caution-50: var(--pyxis-50);
  --caution-100: var(--pyxis-100);
  --caution-200: var(--pyxis-200);
  --caution-300: var(--pyxis-300);
  --caution-400: var(--pyxis-400);
  --caution-500: var(--pyxis-500);
  --caution-600: var(--pyxis-600);
  --caution-700: var(--pyxis-700);
  --caution-800: var(--pyxis-800);
  --caution-900: var(--pyxis-900);
  /* Warning */
  --warning-50: var(--fornax-50);
  --warning-100: var(--fornax-100);
  --warning-200: var(--fornax-200);
  --warning-300: var(--fornax-300);
  --warning-400: var(--fornax-400);
  --warning-500: var(--fornax-500);
  --warning-600: var(--fornax-600);
  --warning-700: var(--fornax-700);
  --warning-800: var(--fornax-800);
  --warning-900: var(--fornax-900);
  /* Error */
  --error-50: var(--cygnus-50);
  --error-100: var(--cygnus-100);
  --error-200: var(--cygnus-200);
  --error-300: var(--cygnus-300);
  --error-400: var(--cygnus-400);
  --error-500: var(--cygnus-500);
  --error-600: var(--cygnus-600);
  --error-700: var(--cygnus-700);
  --error-800: var(--cygnus-800);
  --error-900: var(--cygnus-900);
  /* UI Colour Tokens */
}
:root .theme-light {
  /* Backgrounds */
  --bg-primary: var(--neutral-white);
  --bg-secondary: var(--tertiary-50);
  --bg-tertiary: var(--tertiary-100);
  /* Text */
  --text-primary: var(--neutral-black);
  --text-secondary: var(--tertiary-700);
  --text-tertiary: var(--tertiary-500);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-600);
  --text-error: var(--error-500);
  --text-info: var(--info-500);
  --text-placeholder: var(--tertiary-400);
  /* Primary */
  --primary-solid-bg: var(--primary-500);
  --primary-outline-text-icon: var(--primary-600);
  --primary-ghost-text-icon: var(--primary-600);
  --primary-muted-text-icon: var(--primary-600);
  --primary-muted-bg: #ff0f801f;
  --primary-solid-bg-hover: var(--primary-400);
  --primary-solid-bg-active: var(--primary-600);
  --primary-muted-bg-hover: #ff0f8033;
  --primary-muted-bg-active: #ff0f8047;
  --primary-outline-bg-hover: #ff0f8014;
  --primary-outline-bg-active: #ff0f8029;
  --primary-ghost-bg-active: #ff0f8029;
  --primary-ghost-bg-hover: #ff0f8014;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-500);
  --secondary-outline-text-icon: var(--secondary-600);
  --secondary-ghost-text-icon: var(--secondary-600);
  --secondary-muted-text-icon: var(--secondary-600);
  --secondary-muted-bg: #5b0fd31f;
  --secondary-muted-bg-hover: #5b0fd333;
  --secondary-muted-bg-active: #5b0fd347;
  --secondary-solid-bg-hover: var(--secondary-400);
  --secondary-solid-bg-active: var(--secondary-600);
  --secondary-outline-bg-hover: #5b0fd314;
  --secondary-outline-bg-active: #5b0fd329;
  --secondary-ghost-bg-hover: #5b0fd314;
  --secondary-ghost-bg-active: #5b0fd329;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-black);
  --tertiary-outline-text-icon: var(--neutral-black);
  --tertiary-ghost-text-icon: var(--neutral-black);
  --tertiary-muted-text-icon: var(--neutral-black);
  --tertiary-muted-bg: #0000001f;
  --tertiary-solid-bg-hover: var(--tertiary-800);
  --tertiary-solid-bg-active: var(--tertiary-900);
  --tertiary-outline-bg-hover: #00000014;
  --tertiary-outline-bg-active: #00000029;
  --tertiary-ghost-bg-hover: #00000014;
  --tertiary-ghost-bg-active: #00000029;
  --tertiary-muted-bg-hover: #00000033;
  --tertiary-muted-bg-active: #00000047;
  --tertiary-solid-text-icon: var(--neutral-white);
  /* Success */
  --success-solid-bg: var(--success-500);
  --success-outline-text-icon: var(--success-600);
  --success-ghost-text-icon: var(--success-600);
  --success-muted-text-icon: var(--success-700);
  --success-muted-bg: #23d79e1f;
  --success-solid-bg-hover: var(--success-400);
  --success-solid-bg-active: var(--success-600);
  --success-outline-bg-hover: #23d79e14;
  --success-outline-bg-active: #23d79e29;
  --success-ghost-bg-hover: #23d79e14;
  --success-ghost-bg-active: #23d79e29;
  --success-muted-bg-hover: #23d79e33;
  --success-muted-bg-active: #23d79e47;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-500);
  --caution-outline-text-icon: var(--caution-600);
  --caution-ghost-text-icon: var(--caution-600);
  --caution-muted-text-icon: var(--caution-600);
  --caution-muted-bg: #f4dc3e1f;
  --caution-solid-bg-hover: var(--caution-400);
  --caution-solid-bg-active: var(--caution-600);
  --caution-outline-bg-hover: #f4dc3e14;
  --caution-outline-bg-active: #f4dc3e29;
  --caution-ghost-bg-hover: #f4dc3e14;
  --caution-ghost-bg-active: #f4dc3e29;
  --caution-muted-bg-hover: #f4dc3e33;
  --caution-muted-bg-active: #f4dc3e47;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-500);
  --warning-outline-text-icon: var(--warning-600);
  --warning-ghost-text-icon: var(--warning-600);
  --warning-muted-text-icon: var(--warning-600);
  --warning-muted-bg: #fba4411f;
  --warning-solid-bg-hover: var(--warning-400);
  --warning-solid-bg-active: var(--warning-600);
  --warning-outline-bg-hover: #fba44114;
  --warning-outline-bg-active: #fba44129;
  --warning-ghost-bg-hover: #fba44114;
  --warning-ghost-bg-active: #fba44129;
  --warning-muted-bg-hover: #fba44133;
  --warning-muted-bg-active: #fba44147;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-500);
  --error-outline-text-icon: var(--error-600);
  --error-ghost-text-icon: var(--error-600);
  --error-muted-text-icon: var(--error-600);
  --error-muted-bg: #f6464f1f;
  --error-solid-bg-hover: var(--error-400);
  --error-solid-bg-active: var(--error-600);
  --error-outline-bg-hover: #f6464f14;
  --error-outline-bg-active: #f6464f29;
  --error-ghost-bg-hover: #f6464f14;
  --error-ghost-bg-active: #f6464f29;
  --error-muted-bg-hover: #f6464f33;
  --error-muted-bg-active: #f6464f47;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-500);
  --info-outline-text-icon: var(--info-600);
  --info-ghost-text-icon: var(--info-600);
  --info-muted-text-icon: var(--info-600);
  --info-muted-bg: #4c62f01f;
  --info-solid-bg-hover: var(--info-400);
  --info-solid-bg-active: var(--info-600);
  --info-outline-bg-hover: #4c62f014;
  --info-outline-bg-active: #4c62f029;
  --info-ghost-bg-hover: #4c62f014;
  --info-ghost-bg-active: #4c62f029;
  --info-muted-bg-hover: #4c62f033;
  --info-muted-bg-active: #4c62f047;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-300);
  --disabled-bg: var(--tertiary-100);
  --disabled-bg-muted: #0000000a;
  --disabled-line: var(--tertiary-100);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-500);
  --link-visited: var(--secondary-300);
  /* General */
  --white-to-black: var(--neutral-white);
  --line-colour: var(--tertiary-300);
  --black-to-white: var(--neutral-black);
  --grey-light: var(--tertiary-50);
  --grey-medium: var(--tertiary-100);
  --grey-heavy: var(--tertiary-200);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #7e7c813d;
  --line-colour-light: var(--tertiary-100);
  --textbox-bg-default: #ffffff80;
  --textbox-bg-active: var(--tertiary-50);
  --textbox-bg-disabled: var(--disabled-bg);
}
:root .theme-dark {
  /* Backgrounds */
  --bg-primary: var(--tertiary-900);
  --bg-secondary: var(--tertiary-800);
  --bg-tertiary: var(--tertiary-700);
  /* Text */
  --text-primary: var(--neutral-white);
  --text-secondary: var(--tertiary-100);
  --text-tertiary: var(--tertiary-300);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-500);
  --text-error: var(--error-400);
  --text-info: var(--info-400);
  --text-placeholder: var(--tertiary-500);
  /* Primary */
  --primary-solid-bg: var(--primary-400);
  --primary-outline-text-icon: var(--primary-300);
  --primary-ghost-text-icon: var(--primary-300);
  --primary-muted-text-icon: var(--primary-300);
  --primary-muted-bg: #ff0f803d;
  --primary-solid-bg-hover: var(--primary-300);
  --primary-solid-bg-active: var(--primary-500);
  --primary-muted-bg-hover: #ff0f8052;
  --primary-muted-bg-active: #ff0f8066;
  --primary-outline-bg-hover: #ff0f803d;
  --primary-outline-bg-active: #ff0f8052;
  --primary-ghost-bg-active: #ff0f8052;
  --primary-ghost-bg-hover: #ff0f803d;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-400);
  --secondary-outline-text-icon: var(--secondary-200);
  --secondary-ghost-text-icon: var(--secondary-200);
  --secondary-muted-text-icon: var(--secondary-200);
  --secondary-muted-bg: #5b0fd33d;
  --secondary-muted-bg-hover: #5b0fd352;
  --secondary-muted-bg-active: #5b0fd366;
  --secondary-solid-bg-hover: var(--secondary-300);
  --secondary-solid-bg-active: var(--secondary-500);
  --secondary-outline-bg-hover: #5b0fd33d;
  --secondary-outline-bg-active: #5b0fd352;
  --secondary-ghost-bg-hover: #5b0fd33d;
  --secondary-ghost-bg-active: #5b0fd352;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-white);
  --tertiary-outline-text-icon: var(--neutral-white);
  --tertiary-ghost-text-icon: var(--neutral-white);
  --tertiary-muted-text-icon: var(--neutral-white);
  --tertiary-muted-bg: #ffffff3d;
  --tertiary-solid-bg-hover: var(--tertiary-50);
  --tertiary-solid-bg-active: var(--tertiary-100);
  --tertiary-outline-bg-hover: #ffffff3d;
  --tertiary-outline-bg-active: #ffffff52;
  --tertiary-ghost-bg-hover: #ffffff3d;
  --tertiary-ghost-bg-active: #ffffff52;
  --tertiary-muted-bg-hover: #ffffff52;
  --tertiary-muted-bg-active: #ffffff66;
  --tertiary-solid-text-icon: var(--neutral-black);
  /* Success */
  --success-solid-bg: var(--success-400);
  --success-outline-text-icon: var(--success-300);
  --success-ghost-text-icon: var(--success-300);
  --success-muted-text-icon: var(--success-300);
  --success-muted-bg: #23d79e3d;
  --success-solid-bg-hover: var(--success-300);
  --success-solid-bg-active: var(--success-500);
  --success-outline-bg-hover: #23d79e3d;
  --success-outline-bg-active: #23d79e52;
  --success-ghost-bg-hover: #23d79e3d;
  --success-ghost-bg-active: #23d79e52;
  --success-muted-bg-hover: #23d79e52;
  --success-muted-bg-active: #23d79e66;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-400);
  --caution-outline-text-icon: var(--caution-300);
  --caution-ghost-text-icon: var(--caution-300);
  --caution-muted-text-icon: var(--caution-300);
  --caution-muted-bg: #f4dc3e3d;
  --caution-solid-bg-hover: var(--caution-300);
  --caution-solid-bg-active: var(--caution-500);
  --caution-outline-bg-hover: #f4dc3e3d;
  --caution-outline-bg-active: #f4dc3e52;
  --caution-ghost-bg-hover: #f4dc3e3d;
  --caution-ghost-bg-active: #f4dc3e52;
  --caution-muted-bg-hover: #f4dc3e52;
  --caution-muted-bg-active: #f4dc3e66;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-400);
  --warning-outline-text-icon: var(--warning-300);
  --warning-ghost-text-icon: var(--warning-300);
  --warning-muted-text-icon: var(--warning-300);
  --warning-muted-bg: #fba4413d;
  --warning-solid-bg-hover: var(--warning-300);
  --warning-solid-bg-active: var(--warning-500);
  --warning-outline-bg-hover: #fba4413d;
  --warning-outline-bg-active: #fba44152;
  --warning-ghost-bg-hover: #fba4413d;
  --warning-ghost-bg-active: #fba44152;
  --warning-muted-bg-hover: #fba44152;
  --warning-muted-bg-active: #fba44166;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-400);
  --error-outline-text-icon: var(--error-300);
  --error-ghost-text-icon: var(--error-300);
  --error-muted-text-icon: var(--error-300);
  --error-muted-bg: #f6464f3d;
  --error-solid-bg-hover: var(--error-300);
  --error-solid-bg-active: var(--error-500);
  --error-outline-bg-hover: #f6464f3d;
  --error-outline-bg-active: #f6464f52;
  --error-ghost-bg-hover: #f6464f3d;
  --error-ghost-bg-active: #f6464f52;
  --error-muted-bg-hover: #f6464f52;
  --error-muted-bg-active: #f6464f66;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-400);
  --info-outline-text-icon: var(--info-200);
  --info-ghost-text-icon: var(--info-200);
  --info-muted-text-icon: var(--info-200);
  --info-muted-bg: #4c62f03d;
  --info-solid-bg-hover: var(--info-300);
  --info-solid-bg-active: var(--info-500);
  --info-outline-bg-hover: #4c62f03d;
  --info-outline-bg-active: #4c62f052;
  --info-ghost-bg-hover: #4c62f03d;
  --info-ghost-bg-active: #4c62f052;
  --info-muted-bg-hover: #4c62f052;
  --info-muted-bg-active: #4c62f066;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-400);
  --disabled-bg: var(--tertiary-700);
  --disabled-bg-muted: #ffffff0a;
  --disabled-line: var(--tertiary-800);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-300);
  --link-visited: var(--secondary-200);
  /* General */
  --white-to-black: var(--neutral-black);
  --line-colour: var(--tertiary-600);
  --black-to-white: var(--neutral-white);
  --grey-light: var(--tertiary-400);
  --grey-medium: var(--tertiary-500);
  --grey-heavy: var(--tertiary-600);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #0000003d;
  --line-colour-light: var(--tertiary-800);
  --textbox-bg-default: #4c495129;
  --textbox-bg-active: var(--tertiary-800);
  --textbox-bg-disabled: var(--disabled-bg);
}

:root {
  --typography-xs: 0.5rem;
  --typography-sm: 0.75rem;
  --typography-md: 0.875rem;
  --typography-lg: 1rem;
  --typography-xl: 1.25rem;
  --typography-xxl: 1.5rem;
  --typography-xxxl: 2rem;
  --font-family: Lato, sans-serif;
  --font-family-heading: filson-soft, sans-serif;
  --font-family-monospace: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
  --sizing-xs: 24px;
  --sizing-sm: 32px;
  --sizing-md: 56px;
  --sizing-lg: 64px;
  --sizing-xl: 256px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --animation-productive: cubic-bezier(0.000, 0.000, 0.440, 0.960);
  --animation-expressive: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --animation-entrance-productive: cubic-bezier(0.000, 0.000, 0.270, 0.960);
  --animation-entrance-expressive: cubic-bezier(0.050, 0.025, 0.260, 0.960);
  --animation-exit-productive: cubic-bezier(0.200, 0.000, 1.000, 0.850);
  --animation-exit-expressive: cubic-bezier(0.100, 0.015, 0.850, 0.100);
  --animation-linear: linear;
  --breakpoint-xxxs: 380px;
  --breakpoint-xxs: 480px;
  --breakpoint-xs: 640px;
  --breakpoint-sm: 800px;
  --breakpoint-md: 1000px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  /* Icon sizes */
  --icon-size-lg: 1rem;
  /* 16px */
  --icon-size-md: 0.75rem;
  /* 12px */
  --icon-size-sm: 0.625rem;
  /* 10px */
  --icon-size-xl: 1.25rem;
  /* 20px */
  --icon-size-xs: 0.5rem;
  /* 8px */
  --icon-size-xxl: 1.5rem;
  /* 24px */
  /* Padding */
  --padding-lg: 1rem;
  /* 16px */
  --padding-md: 0.75rem;
  /* 12px */
  --padding-sm: 0.5rem;
  /* 8px */
  --padding-x1: 0.125rem;
  /* 2px */
  --padding-x3: 0.375rem;
  /* 6px */
  --padding-x5: 0.625rem;
  /* 10px */
  --padding-x7: 0.875rem;
  /* 14px */
  --padding-x9: 1.125rem;
  /* 18px */
  --padding-x10: 1.25rem;
  /* 20px */
  --padding-x12: 1.5rem;
  /* 24px */
  --padding-xs: 0.25rem;
  /* 4px */
  /* Radius */
  --radius-0: 0;
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-pill: 62.4375rem;
  /* 999px */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-xs: 0.125rem;
  /* 2px */
}

.icon {
  display: inline-block;
}

input {
  color: var(--text-primary);
}

.material-symbols-rounded.filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-rounded.icon-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.material-symbols-rounded.icon-xs {
  font-size: var(--typography-xs);
}
.material-symbols-rounded.icon-sm {
  font-size: var(--typography-sm);
}
.material-symbols-rounded.icon-md {
  font-size: var(--typography-md);
}
.material-symbols-rounded.icon-lg {
  font-size: var(--typography-lg);
}

.properties-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.properties-tabs__header {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.properties-tab {
  padding: 4px 8px;
  height: 24px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
}
.properties-tab.selected {
  background: var(--bg);
}
.properties-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.properties-tab:hover:not(.disabled) {
  background: var(--bg-hover);
}
.properties-tab:hover:not(.disabled).selected {
  background: var(--bg-active);
}
.properties-tab {
  --text: var(--text-primary);
  --bg: rgba(0, 0, 0, 0.08);
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.12);
}
.properties-tab .cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.properties-tab .cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.properties-tab .cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.properties-tab .cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}
.properties-tab .cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.properties-tab .cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.properties-tab .cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.properties-tab .cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}
.properties-tab .cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.properties-tab .cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.properties-tab .cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.properties-tab .cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}
.properties-tab .cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.properties-tab .cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.properties-tab .cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.properties-tab .cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}
.properties-tab .cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.properties-tab .cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.properties-tab .cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.properties-tab .cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}
.properties-tab .cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.properties-tab .cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.properties-tab .cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.properties-tab .cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}
.properties-tab .cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.properties-tab .cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.properties-tab .cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.properties-tab .cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}
.properties-tab .cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.properties-tab .cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.properties-tab .cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.properties-tab .cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-dark .properties-tab.selected {
  background: rgba(255, 255, 255, 0.16);
}
.theme-dark .properties-tab:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.04);
}
.theme-dark .properties-tab:hover:not(.disabled).selected {
  background: rgba(255, 255, 255, 0.2);
}

.scrollbar-regular::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-track,
.scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-corner,
.scrollbar-thin::-webkit-scrollbar-corner {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tertiary-muted-bg-hover);
  border-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary-muted-bg-active);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-regular::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slim-input-container {
  display: flex;
}
.slim-input-container.single-line {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.slim-input-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-input-container label {
  font-size: 12px;
}

.slim-input-with-affix {
  position: relative;
}
.slim-input-with-affix .prefix {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .suffix {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .prefix.empty,
.slim-input-with-affix .suffix.empty {
  color: var(--text-tertiary);
}
.slim-input-with-affix .prefix.has-value,
.slim-input-with-affix .suffix.has-value {
  color: var(--text-primary);
}
.slim-input-with-affix.disabled .prefix,
.slim-input-with-affix.disabled .suffix, .slim-input-with-affix.read-only .prefix,
.slim-input-with-affix.read-only .suffix {
  color: var(--text-tertiary);
}

.slim-input {
  border: 1px solid var(--line-colour-light);
  font-size: 12px;
  padding: 4px 8px;
}
.slim-input:focus {
  outline: none;
  border: 1px solid var(--line-colour);
  background: var(--textbox-bg-active);
}
.slim-input.disabled, .slim-input.read-only {
  background: var(--textbox-bg-disabled);
  color: var(--text-tertiary);
}
.slim-input.enabled {
  background: var(--textbox-bg-default);
  color: var(--text-primary);
}

.prefix-icon {
  color: var(--text-placeholder);
  font-size: 18px;
}

.slim-search-input {
  position: relative;
  width: 400px;
}
.slim-search-input input {
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid var(--line-colour);
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  background: var(--textbox-bg-default);
}
.slim-search-input input:focus {
  background: var(--textbox-bg-active);
  outline: 1px solid var(--line-colour);
}
.slim-search-input .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.slim-search-input .icon.search-icon {
  left: 8px;
}
.slim-search-input .icon.clear-icon {
  right: 8px;
}

.slim-textarea-container {
  display: flex;
}
.slim-textarea-container.single-line {
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}
.slim-textarea-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-textarea-container label {
  font-size: 12px;
}

.slim-textarea {
  border: 1px solid var(--tertiary-200);
  font-size: 12px;
  padding: 4px 8px;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.slim-textarea:focus {
  outline: none;
  border: 1px solid var(--tertiary-300);
}
.slim-textarea.disabled, .slim-textarea.read-only {
  background: var(--tertiary-200);
  color: var(--tertiary-800);
  resize: none;
}
.slim-textarea.enabled {
  background: var(--tertiary-50);
  color: var(--tertiary-800);
}
.slim-textarea::placeholder {
  color: var(--tertiary-400);
}
.slim-textarea.disabled::placeholder, .slim-textarea.read-only::placeholder {
  color: var(--tertiary-600);
}

.tag {
  border-radius: 24px;
  min-width: 56px;
  text-align: center;
  display: inline-block;
}
.tag.tag-sm {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 0.75rem;
}
.tag.tag-md {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.875rem;
}
.tag.tag-lg {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 1rem;
}
.tag {
  --bg: transparent;
  --text: var(--text-primary);
  --bg-hover: transparent;
  --bg-active: transparent;
  --focus-ring: var(--primary-500);
  color: var(--text);
  text-decoration: none;
  background-color: var(--bg);
  border: 2px solid transparent;
}
.tag:hover {
  border-color: var(--info-500);
  cursor: pointer;
}
.tag:active {
  border-color: var(--tertiary-700);
}
.tag:focus {
  box-shadow: inset 0px 0px 0px 2px var(--focus-ring);
  outline: none;
}
.tag:disabled, .tag.disabled {
  cursor: not-allowed;
  pointer-events: none;
  --bg: var(--disabled-bg) !important;
  --text: var(--disabled-text) !important;
  --outline: var(--disabled-text) !important;
}
.tag:disabled.cb-muted, .tag.disabled.cb-muted {
  --bg: var(--disabled-bg-muted) !important;
}
.tag.bg-hover:hover {
  background-color: var(--bg-hover);
  border-color: transparent;
}

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

.text-tertiary {
  color: var(--text-tertiary);
}

.text-xs {
  font-size: var(--typography-xs);
}

.text-sm {
  font-size: var(--typography-sm);
}

.text-md {
  font-size: var(--typography-md);
}

.text-lg {
  font-size: var(--typography-lg);
}

.text-xl {
  font-size: var(--typography-xl);
}

.text-xxl {
  font-size: var(--typography-xxl);
}

.text-xxxl {
  font-size: var(--typography-xxxl);
}

.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;
  transition-property: transform, visibility, opacity;
}

.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;
  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;
  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;
  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;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.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;
}

.tippy-box[data-animation=shift-toward][data-state=hidden] {
  opacity: 0;
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
  transform: translateY(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
  transform: translateY(10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
  transform: translateX(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
  transform: translateX(10px);
}

.cb-tooltip {
  --tooltip-button-color: var(--tertiary-solid-bg);
  --tooltip-button-hover-color: var(--tertiary-solid-bg-hover);
  background: var(--bg);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1882352941);
}
.cb-tooltip .tippy-arrow {
  color: var(--bg);
}
.cb-tooltip .tippy-content {
  color: var(--text);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.cb-tooltip .tippy-content .tooltip-body {
  padding: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close {
  padding: 0;
  margin-left: auto;
  background-color: transparent;
  border-color: transparent;
  width: unset;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close:hover {
  background-color: transparent;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close:before {
  animation: none;
  margin-right: 0;
  margin: 0;
  font-size: 0.75rem;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading + .body-text {
  margin-top: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .heading-text {
  font-weight: bold;
  margin: 0;
  font-size: 0.875rem;
}
.cb-tooltip .tippy-content .tooltip-body .body-text {
  font-size: 0.75rem;
  margin: 0;
}
.cb-tooltip .tippy-content .tooltip-body .body-text img {
  margin-top: 16px;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 0;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step {
  background: var(--tooltip-button-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .skip-joyride:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip.tooltip-sm .tippy-content .tooltip-body, .cb-tooltip.context-menu .tippy-content .tooltip-body {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.position-relative {
  position: relative;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.gap-10 {
  gap: 10px;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.pre-wrap {
  white-space: pre-wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.center-content {
  display: grid;
  place-items: center;
}

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

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-minus-1 {
  z-index: -1;
}

.gap-xxs {
  gap: var(--spacing-xxs);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* align-items */
.ai-normal {
  align-items: normal;
}

.ai-stretch {
  align-items: stretch;
}

.ai-center {
  align-items: center;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-flex-start {
  align-items: flex-start;
}

.ai-flex-end {
  align-items: flex-end;
}

.ai-self-start {
  align-items: self-start;
}

.ai-self-end {
  align-items: self-end;
}

.ai-baseline {
  align-items: baseline;
}

.ai-first-baseline {
  align-items: first baseline;
}

.ai-last-baseline {
  align-items: last baseline;
}

.ai-safe-center {
  align-items: safe center;
}

.ai-unsafe-center {
  align-items: unsafe center;
}

.ai-inherit {
  align-items: inherit;
}

.ai-initial {
  align-items: initial;
}

.ai-unset {
  align-items: unset;
}

.ai-revert {
  align-items: revert;
}

.ai-revert-layer {
  align-items: revert-layer;
}

/* align-self */
.as-normal {
  align-self: normal;
}

.as-stretch {
  align-self: stretch;
}

.as-center {
  align-self: center;
}

.as-start {
  align-self: start;
}

.as-end {
  align-self: end;
}

.as-flex-start {
  align-self: flex-start;
}

.as-flex-end {
  align-self: flex-end;
}

.as-self-start {
  align-self: self-start;
}

.as-self-end {
  align-self: self-end;
}

.as-baseline {
  align-self: baseline;
}

.as-first-baseline {
  align-self: first baseline;
}

.as-last-baseline {
  align-self: last baseline;
}

.as-safe-center {
  align-self: safe center;
}

.as-unsafe-center {
  align-self: unsafe center;
}

.as-inherit {
  align-self: inherit;
}

.as-initial {
  align-self: initial;
}

.as-unset {
  align-self: unset;
}

.as-revert {
  align-self: revert;
}

.as-revert-layer {
  align-self: revert-layer;
}

/* align-content */
.ac-normal {
  align-content: normal;
}

.ac-center {
  align-content: center;
}

.ac-start {
  align-content: start;
}

.ac-end {
  align-content: end;
}

.ac-flex-start {
  align-content: flex-start;
}

.ac-flex-end {
  align-content: flex-end;
}

.ac-space-between {
  align-content: space-between;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-evenly {
  align-content: space-evenly;
}

.ac-stretch {
  align-content: stretch;
}

.ac-baseline {
  align-content: baseline;
}

.ac-first-baseline {
  align-content: first baseline;
}

.ac-last-baseline {
  align-content: last baseline;
}

.ac-safe-center {
  align-content: safe center;
}

.ac-unsafe-center {
  align-content: unsafe center;
}

.ac-inherit {
  align-content: inherit;
}

.ac-initial {
  align-content: initial;
}

.ac-unset {
  align-content: unset;
}

.ac-revert {
  align-content: revert;
}

.ac-revert-layer {
  align-content: revert-layer;
}

/* justify-items (mostly for CSS Grid but allow for completeness) */
.ji-normal {
  justify-items: normal;
}

.ji-stretch {
  justify-items: stretch;
}

.ji-center {
  justify-items: center;
}

.ji-start {
  justify-items: start;
}

.ji-end {
  justify-items: end;
}

.ji-flex-start {
  justify-items: flex-start;
}

.ji-flex-end {
  justify-items: flex-end;
}

.ji-self-start {
  justify-items: self-start;
}

.ji-self-end {
  justify-items: self-end;
}

.ji-left {
  justify-items: left;
}

.ji-right {
  justify-items: right;
}

.ji-legacy-left {
  justify-items: legacy left;
}

.ji-legacy-right {
  justify-items: legacy right;
}

.ji-legacy-center {
  justify-items: legacy center;
}

.ji-baseline {
  justify-items: baseline;
}

.ji-first-baseline {
  justify-items: first baseline;
}

.ji-last-baseline {
  justify-items: last baseline;
}

.ji-safe-center {
  justify-items: safe center;
}

.ji-unsafe-center {
  justify-items: unsafe center;
}

.ji-inherit {
  justify-items: inherit;
}

.ji-initial {
  justify-items: initial;
}

.ji-unset {
  justify-items: unset;
}

.ji-revert {
  justify-items: revert;
}

.ji-revert-layer {
  justify-items: revert-layer;
}

/* justify-content */
.jc-normal {
  justify-content: normal;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-flex-start {
  justify-content: flex-start;
}

.jc-flex-end {
  justify-content: flex-end;
}

.jc-left {
  justify-content: left;
}

.jc-right {
  justify-content: right;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.jc-stretch {
  justify-content: stretch;
}

.jc-safe-center {
  justify-content: safe center;
}

.jc-unsafe-center {
  justify-content: unsafe center;
}

.jc-inherit {
  justify-content: inherit;
}

.jc-initial {
  justify-content: initial;
}

.jc-unset {
  justify-content: unset;
}

.jc-revert {
  justify-content: revert;
}

.jc-revert-layer {
  justify-content: revert-layer;
}

/* padding */
.p-xxs {
  padding: var(--spacing-xxs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

/* margins */
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

/* font-sizes */
.fs-xs {
  font-size: var(--typography-xs);
}

.fs-sm {
  font-size: var(--typography-sm);
}

.fs-md {
  font-size: var(--typography-md);
}

.fs-lg {
  font-size: var(--typography-lg);
}

.fs-xl {
  font-size: var(--typography-xl);
}

.fs-xxl {
  font-size: var(--typography-xxl);
}

.fs-xxxl {
  font-size: var(--typography-xxxl);
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}

.h-50 {
  height: 50%;
}

.c-primary {
  color: var(--primary-500);
}

.c-secondary {
  color: var(--secondary-500);
}

.c-tertiary {
  color: var(--tertiary-500);
}

.virtual-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 100%;
  max-height: 100%;
}.diagram-object-list {
  --darkPrimary: #008cf0;
  --darkSecondary: #42b0ff;
  --darkPrimaryHover: rgb(0, 126, 216);
  --darkSecondaryHover: rgb(34, 163, 255);
  --darkDarkPrimary: rgb(0, 126, 216);
  --lightPrimary: #99d5ff;
  --lightSecondary: #cceaff;
  --lightPrimaryHover: rgb(112, 196, 255);
  --lightSecondaryHover: rgb(158, 215, 255);
  --lightDarkPrimary: rgb(112, 196, 255);
}
.diagram-object-list .virtual-scroll {
  position: absolute;
  inset: 0;
}
.diagram-object-list .menu {
  display: none;
  position: absolute;
  top: -12px;
  width: 100%;
  line-height: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.diagram-object-list .menu .material-symbols-rounded {
  padding: 2px;
  border-radius: 5px;
  background-color: var(--bg-secondary);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  color: var(--text-secondary);
}
.diagram-object-list .menu .material-symbols-rounded:hover {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.diagram-object-list .menu {
  z-index: 1;
}
.diagram-object-list {
  flex-grow: 1;
  position: relative;
  color: var(--text-primary);
}
.diagram-object-list:hover .menu {
  display: flex;
}
.diagram-object-list .runner-up-ranked {
  background-color: var(--warning-100);
}
.diagram-object-list .highest-ranked {
  background-color: var(--warning-500);
}
.diagram-object-list .highest-ranked * {
  color: var(--neutral-white) !important;
}
.diagram-object-list .diagram-object-list-item {
  padding-left: 12px;
  display: grid;
  grid-template-columns: auto 12px 1fr;
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.diagram-object-list .diagram-object-list-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.selected {
  background-color: var(--lightPrimary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.selected:hover {
  background-color: var(--lightPrimaryHover);
}
.diagram-object-list .diagram-object-list-item.selected .name .container .crosshair {
  color: var(--text-secondary);
}
.diagram-object-list .diagram-object-list-item.selected .name .container .crosshair:hover {
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.parent-selected {
  background-color: var(--lightSecondary);
  color: var(--text-primary);
}
.diagram-object-list .diagram-object-list-item.parent-selected:hover {
  background-color: var(--lightSecondaryHover);
}
.diagram-object-list .diagram-object-list-item.focused {
  outline: 1px solid var(--lightDarkPrimary);
  z-index: 1;
}
.diagram-object-list .diagram-object-list-item .chevron-icon {
  margin-left: -6px;
}
.diagram-object-list .diagram-object-list-item .name {
  position: relative;
  width: 100%;
}
.diagram-object-list .diagram-object-list-item .name .container {
  position: absolute;
  inset: 0;
  display: flex;
}
.diagram-object-list .diagram-object-list-item .name .container .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.diagram-object-list .diagram-object-list-item .name .container .name .search-term {
  color: var(--warning-500);
}
.diagram-object-list .diagram-object-list-item .name .container .crosshair {
  padding-right: 8px;
  padding-left: 4px;
  color: var(--text-secondary);
}
.diagram-object-list .diagram-object-list-item .name .container .crosshair:hover {
  color: var(--text-primary);
}
.diagram-object-list .depth-marker-container {
  display: flex;
}
.diagram-object-list .depth-marker {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.0823529412);
  margin-right: 11px;
}
.diagram-object-list .depth-marker.active {
  background: rgba(0, 0, 0, 0.3764705882);
}
.diagram-object-list .object-filter {
  display: grid;
  grid-template-columns: 24px auto auto 29px;
  align-items: center;
  background-color: var(--bg-tertiary);
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
}
.diagram-object-list .object-filter .name {
  padding-left: 0px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagram-object-list .object-filter .number {
  font-size: var(--typography-xs);
  margin-left: var(--spacing-xxs);
  margin-left: auto;
  margin-right: 8px;
  text-align: right;
  line-height: 1;
  margin-bottom: 2px;
}
.diagram-object-list .object-filter .palette-icon,
.diagram-object-list .object-filter .chevron-icon {
  font-size: 13px;
}
.diagram-object-list .object-filter .palette-icon:before,
.diagram-object-list .object-filter .chevron-icon:before {
  display: block;
}
.diagram-object-list .object-filter .chevron-icon {
  margin-left: 6px;
  margin-right: 5px;
}
.diagram-object-list .object-filter:hover {
  cursor: pointer;
}
.diagram-object-list .add-button {
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: 13px;
  color: var(--text-tertiary);
  height: 22px;
}
.diagram-object-list .add-button:hover {
  cursor: pointer;
  background: var(--tertiary-outline-bg-hover);
  color: var(--text-primary);
}
.diagram-object-list .add-button:hover.disabled {
  background: transparent;
  color: var(--disabled-text);
  pointer-events: none;
}
.diagram-object-list .add-button.disabled {
  color: var(--disabled-text);
}

.theme-dark .diagram-object-list .runner-up-ranked {
  background-color: var(--warning-900);
}
.theme-dark .diagram-object-list .highest-ranked {
  background-color: var(--warning-500);
}
.theme-dark .diagram-object-list .diagram-object-list-item.selected {
  background-color: var(--darkPrimary);
}
.theme-dark .diagram-object-list .diagram-object-list-item.selected:hover {
  background-color: var(--darkPrimaryHover);
}
.theme-dark .diagram-object-list .diagram-object-list-item.parent-selected {
  background-color: var(--darkSecondary);
}
.theme-dark .diagram-object-list .diagram-object-list-item.parent-selected:hover {
  background-color: var(--darkSecondaryHover);
}
.theme-dark .diagram-object-list .diagram-object-list-item.focused {
  outline: 1px solid var(--darkDarkPrimary);
}
.theme-dark .diagram-object-list .depth-marker {
  background: rgba(255, 255, 255, 0.0823529412);
}
.theme-dark .diagram-object-list .depth-marker.active {
  background: rgba(255, 255, 255, 0.3764705882);
}

.canvas-selected-panel {
  min-height: 100%;
  max-height: 100%;
  flex-grow: 1;
  width: var(--sizing-xl);
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  overflow-y: auto;
}
.canvas-selected-panel .subtitle {
  font-size: var(--typography-sm);
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.canvas-selected-panel .label {
  font-size: var(--typography-sm);
  color: var(--text-secondary);
}
.canvas-selected-panel .grid-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}
.canvas-selected-panel .grid-options .grid-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.canvas-selected-panel input[type=color] {
  width: 80px;
  background-color: transparent;
  border: none;
  padding: 0;
}
.canvas-selected-panel #clear-canvas-btn {
  margin-top: auto;
}
.canvas-selected-panel.loading {
  justify-content: center;
  align-items: center;
}
.canvas-selected-panel .auto-arrange-btn,
.canvas-selected-panel .export-diagram-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
}
.canvas-selected-panel .reset-btn {
  margin-top: var(--spacing-sm);
}
.canvas-selected-panel .slider-wrapper {
  margin-bottom: 4px;
}
.canvas-selected-panel .bottom-buttons {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}
.canvas-selected-panel .bottom-buttons > button:last-child {
  margin-top: auto;
}
.canvas-selected-panel .horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-selected-panel .snap-corner-btn {
  position: absolute;
  width: 15px;
  aspect-ratio: 1;
  background: var(--tertiary-300);
}
.canvas-selected-panel .snap-corner-btn.selected {
  background: var(--tertiary-500);
}
.canvas-selected-panel .snap-corner-btn.selected:hover {
  background: var(--tertiary-400);
}
.canvas-selected-panel .snap-corner-btn:hover {
  cursor: pointer;
  background: var(--tertiary-200);
}
.canvas-selected-panel .snap-corner-btn.top-left {
  top: 0;
  left: 0;
}
.canvas-selected-panel .snap-corner-btn.top-right {
  top: 0;
  right: 0;
}
.canvas-selected-panel .snap-corner-btn.bottom-left {
  bottom: 0;
  left: 0;
}
.canvas-selected-panel .snap-corner-btn.bottom-right {
  bottom: 0;
  right: 0;
}
.canvas-selected-panel .snap-selector {
  border: 1px solid var(--tertiary-200);
  position: relative;
  aspect-ratio: 1;
  width: auto;
  margin-left: auto;
}

.domain-property-category {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}
.domain-property-category .category-title {
  display: flex;
  align-items: center;
  font-size: var(--typography-sm);
  font-weight: bold;
  padding: var(--spacing-xxs) var(--spacing-md);
  background: var(--bg-tertiary);
  margin-bottom: 0;
}
.domain-property-category .category-title:hover {
  cursor: pointer;
}
.domain-property-category .icon {
  margin-left: auto;
}

.domain-properties-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.properties-panel {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  align-items: stretch;
  min-height: 100%;
  max-height: 100%;
  flex-grow: 1;
  padding-bottom: var(--spacing-md);
  overflow-y: auto;
}

.undo-redo-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.undo-redo-buttons .action-btn-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text-primary);
}
.undo-redo-buttons .action-btn-icon:hover {
  cursor: pointer;
}
.undo-redo-buttons .action-btn-icon.disabled {
  color: var(--disabled-text);
}
.undo-redo-buttons .action-btn-icon.disabled.undo-btn, .undo-redo-buttons .action-btn-icon.disabled.redo-btn {
  pointer-events: none;
}
.undo-redo-buttons .action-btn-icon.readonly-btn {
  background: var(--grey-medium);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--text-primary);
}
.undo-redo-buttons .action-btn-icon.readonly-btn.on {
  background: var(--warning-500);
}
.undo-redo-buttons .action-btn-icon.material-symbols-rounded {
  font-size: var(--typography-lg);
}
.undo-redo-buttons > div {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.combo-panel {
  --width: 256px;
  max-width: var(--width);
  min-width: var(--width);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-height: 100%;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--grey-heavy);
}
.combo-panel .add-items-palette {
  flex-grow: 0;
}

.add-items-palette {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}

.categories-container {
  display: flex;
  flex-direction: column;
}

.no-results {
  padding: var(--spacing-xl);
  text-align: center;
  font-size: var(--typography-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.category-palette-header {
  min-height: var(--sizing-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0px var(--spacing-sm);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.category-palette-header .name {
  margin-left: 2px;
  font-size: var(--typography-sm);
}
.category-palette-header .category-icon,
.category-palette-header .chevron-icon {
  margin-right: 10px;
}
.category-palette-header .category-icon:before,
.category-palette-header .chevron-icon:before {
  font-size: var(--typography-sm);
  margin-top: 1px;
  margin-right: 0px;
  display: block;
}
.category-palette-header .chevron {
  margin-left: auto;
  margin-right: 0;
}
.category-palette-header .chevron:before {
  font-size: var(--typography-sm);
  margin-top: 1px;
  margin-right: 0px;
  display: block;
}
.category-palette-header:hover {
  cursor: pointer;
}

.dependency-selector-menu .canvas-context-menu .keyboard-selected {
  background-color: var(--primary-50);
}
.dependency-selector-menu .resource-item,
.dependency-selector-menu .folder-item {
  transition: none !important;
  margin-left: 0;
}
.dependency-selector-menu .resource-item:hover,
.dependency-selector-menu .folder-item:hover {
  background-color: var(--bg-tertiary);
  cursor: pointer;
}
.dependency-selector-menu .dependency-selector .current-path-segment.header-text:hover {
  background: unset;
  cursor: default;
}
.dependency-selector-menu .resource-item.no-items {
  cursor: default !important;
  grid-template-columns: 1fr !important;
}
.dependency-selector-menu .resource-item.no-items:hover {
  background: unset !important;
}
.dependency-selector-menu .resource-item.no-items .item-text {
  text-align: center;
}
.dependency-selector-menu .resource-item.disabled {
  grid-template-columns: 16px 1fr 24px !important;
  cursor: default !important;
  opacity: 0.5;
}
.dependency-selector-menu .resource-item.disabled:hover {
  background: unset !important;
}
.dependency-selector-menu .resource-item.disabled .maxed {
  font-size: 10px;
  line-height: 10px;
  text-align: right;
  font-style: italic;
}.header-bar {
  position: sticky;
  top: 0;
  min-height: 40px;
  width: 100%;
  z-index: 1;
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-colour-light);
}
.header-bar .center-section {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
}
.header-bar .left-section {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.header-bar .right-section {
  display: flex;
}

.organisation-switcher {
  flex-grow: 1;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.organisation-switcher .search-input {
  margin-bottom: var(--spacing-sm);
}
.organisation-switcher .scrolling-container {
  overflow-y: auto;
}
.organisation-switcher .scrolling-container .orgs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.organisation-switcher .gradient-highlight-btn {
  background: var(--bg-primary);
  text-align: left;
}
.organisation-switcher .gradient-highlight-btn.selected {
  background: var(--bg-primary);
}

.page {
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 100vw;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 800px) {
  .page {
    flex-direction: column;
  }
}

.page-main {
  flex-grow: 1;
  z-index: 0;
  background: transparent;
  flex-basis: 100%;
}
@media (max-width: 800px) {
  .page-main {
    max-width: 100vw;
  }
}

.page-nav {
  background-color: var(--bg-primary);
  border-right: 1px solid var(--line-colour-light);
}
@media (max-width: 1000px) {
  .page-nav {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.page-content-scroll-container {
  overflow-y: auto;
}

.content-container {
  padding: 0;
}
.content-container.extruded {
  background: var(--bg-secondary);
  padding: var(--spacing-xxl);
}

.page-wrapper {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-title {
  font-size: calc(var(--typography-lg) * 2);
  color: var(--text-primary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-subtitle {
  font-size: var(--typography-lg);
  color: var(--text-secondary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-flex-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.page-flex-row.x-center {
  justify-content: center;
}
.page-flex-row.y-center {
  align-items: center;
}

.page-content {
  width: 100%;
  max-width: var(--breakpoint-lg);
  padding-top: calc(var(--spacing-xxl) * 2);
  padding-bottom: calc(var(--spacing-xxl) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg);
}
.page-content.no-header-bar {
  margin-top: var(--sizing-md);
}
@media (max-width: 1600px) {
  .page-content {
    max-width: var(--breakpoint-md);
  }
}
@media (max-width: 1200px) {
  .page-content {
    padding: calc(var(--spacing-xxl) * 2);
  }
}
@media (max-width: 1000px) {
  .page-content {
    padding: var(--spacing-xxl);
  }
}
@media (max-width: 800px) {
  .page-content {
    padding: var(--spacing-xl);
  }
}

.input-background {
  margin-top: var(--spacing-md);
  background: var(--bg-secondary);
  padding: var(--spacing-md);
}
.input-background h3 {
  margin-top: 0;
  font-family: var(--font-family-heading);
}
.input-background .code-block textarea {
  font-family: var(--font-family-monospace);
  font-size: var(--typography-sm);
}

.side-menu-item {
  height: var(--sizing-md);
  width: var(--sizing-md);
  display: flex;
  flex-direction: column;
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  user-select: none;
}
.side-menu-item.disabled {
  pointer-events: none;
}
.side-menu-item p {
  margin: 6px 0 0 0;
  font-size: var(--typography-xs);
}
.side-menu-item.selected {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
}
.side-menu-item:hover {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
  cursor: pointer;
}

.theme-dark .side-menu-item.selected {
  background-color: var(--grey-800);
}
.theme-dark .side-menu-item:hover {
  background-color: var(--grey-800);
}

.crud-page {
  display: contents;
}
.crud-page .create-button {
  height: auto;
}
.crud-page .crud-search-bar {
  max-width: var(--breakpoint-xxs);
}
.crud-page .actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: stretch;
  justify-content: space-between;
}
.crud-page .pagination {
  width: 100%;
  margin-top: var(--spacing-sm);
  font-size: var(--typography-sm);
  text-align: center;
}.admin-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-table {
  border-collapse: collapse;
  width: 100%;
}
.admin-table thead tr {
  border-top: 2px solid var(--line-colour-light);
  border-bottom: 2px solid var(--line-colour-light);
  color: var(--text-tertiary);
}
.admin-table tr {
  border-bottom: 1px solid var(--line-colour-light);
}
.admin-table tr th,
.admin-table tr td {
  padding: 10px;
  text-align: left;
}
.admin-table input[type=checkbox] {
  cursor: pointer;
  transform: scale(2);
}

.admin-drawer-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 100vh;
}

.admin-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--line-colour-light);
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.admin-user-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
.admin-user-form .btn {
  align-self: end;
  justify-self: start;
}

.dependency-manager-page {
  position: relative;
}
.dependency-manager-page .header-bar .left-section {
  align-items: center;
  margin-left: var(--spacing-sm);
}
.dependency-manager-page .header-bar .right-section {
  align-items: center;
  margin-right: var(--spacing-sm);
}
.dependency-manager-page .left-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: var(--bg-secondary);
  border-right: 1px solid var(--line-colour-light);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 2;
}
.dependency-manager-page .left-panel .tabs {
  padding: 12px;
  display: flex;
}
.dependency-manager-page .left-panel .search {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px;
  padding-top: 0;
  border-bottom: 1px solid var(--line-colour-light);
  flex-shrink: 0;
}
.dependency-manager-page .left-panel .close-button {
  padding: 0px;
}
.dependency-manager-page .left-panel .close-button:hover {
  background: transparent;
}
.dependency-manager-page .left-panel .dag-mode-section {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--line-colour-light);
  flex-shrink: 0;
}
.dependency-manager-page .left-panel .dag-mode-section .dag-mode-dropdown .dag-mode-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}
.dependency-manager-page .dependency-manager {
  position: relative;
  flex-grow: 1;
  min-height: 0;
  --left-panel-width: 0px;
  --right-panel-width: 0px;
}
.dependency-manager-page .dependency-manager.has-left-panel {
  --left-panel-width: 250px;
}
.dependency-manager-page .dependency-manager.has-right-panel {
  --right-panel-width: 250px;
}
.dependency-manager-page .dependency-manager .open-panel-button {
  position: absolute;
  top: 8px;
  z-index: 1;
}
.dependency-manager-page .dependency-manager .open-panel-button.left {
  left: 8px;
}
.dependency-manager-page .dependency-manager .open-panel-button.right {
  right: 8px;
}
.dependency-manager-page .dependency-manager .dependency-graph-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dependency-manager-page .dependency-manager .dependency-graph-container > div {
  position: absolute;
  inset: 0;
}
.dependency-manager-page .dependency-manager .dependency-graph-container .auto-zoom-button-container {
  position: absolute;
  bottom: 8px;
  right: calc(8px + var(--right-panel-width, 0px));
  left: calc(8px + var(--left-panel-width, 0px));
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.dependency-manager-page .dependency-manager .right-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-left: 1px solid var(--line-colour-light);
  overflow-y: auto;
  min-height: 0;
  font-size: var(--typography-md);
  z-index: 2;
}
.dependency-manager-page .dependency-manager .right-panel .tabs {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  border-bottom: 1px solid var(--line-colour-light);
}
.dependency-manager-page .dependency-manager .right-panel .close-button {
  padding: 0px;
}
.dependency-manager-page .dependency-manager .right-panel .close-button:hover {
  background: transparent;
}
.dependency-manager-page .dependency-manager .right-panel .selected-content {
  flex-grow: 1;
}
.dependency-manager-page .dependency-manager .right-panel .no-selection-message,
.dependency-manager-page .dependency-manager .right-panel .multiple-selection-message {
  padding: 12px;
  color: var(--text-secondary);
}
.dependency-manager-page .dependency-manager .right-panel .panel-section {
  padding: 12px;
  border-bottom: 1px solid var(--tertiary-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dependency-manager-page .dependency-manager .right-panel .panel-section .panel-title {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--typography-sm);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .changes-count {
  background: var(--text-tertiary);
  color: var(--bg-primary);
  font-size: var(--typography-xs);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .revert-all-button {
  padding: 4px;
  min-height: unset;
  background: transparent;
  border: none;
  color: var(--primary-500);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-left: auto;
  margin-right: 12px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .revert-all-button:hover {
  background: var(--primary-50);
  color: var(--primary-600);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .revert-all-button:active {
  background: var(--primary-100);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .clear-all-text {
  color: var(--primary-500);
  font-size: var(--typography-sm);
  font-weight: 500;
  cursor: pointer;
  margin-left: auto;
  margin-right: 0px;
  padding: 0px;
  border-radius: 4px;
  line-height: 1;
  user-select: none;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .panel-section .panel-title .clear-all-text:hover {
  color: var(--primary-700);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group {
  margin-bottom: 16px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group:last-child {
  margin-bottom: 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .resource-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .resource-info .resource-type-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .resource-info .resource-name-and-version {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .resource-info .resource-name-and-version .resource-name {
  font-size: var(--typography-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .resource-info .resource-type {
  font-size: var(--typography-xs);
  color: var(--text-tertiary);
  font-style: italic;
  flex-shrink: 0;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .revert-all-button {
  padding: 4px;
  min-height: unset;
  background: transparent;
  border: none;
  color: var(--primary-500);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 12px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .revert-all-button:hover {
  background: var(--primary-50);
  color: var(--primary-600);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .resource-group-header .revert-all-button:active {
  background: var(--primary-100);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--line-colour-light);
  border-radius: 6px;
  font-size: var(--typography-sm);
  transition: all 0.15s ease;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item:hover {
  border-color: var(--line-colour);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .change-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .change-content .change-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--typography-sm);
  line-height: 1.3;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .change-content .change-description {
  color: var(--text-secondary);
  font-size: var(--typography-sm);
  line-height: 1.4;
  word-wrap: break-word;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .revert-change-button {
  padding: 4px;
  min-height: unset;
  background: transparent;
  border: none;
  color: var(--primary-500);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .revert-change-button:hover {
  background: var(--primary-50);
  color: var(--primary-600);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item .revert-change-button:active {
  background: var(--primary-100);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item.added {
  border-left: 3px solid var(--success-400);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item.removed {
  border-left: 3px solid var(--error-400);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .resource-group .individual-changes .change-item.changed {
  border-left: 3px solid var(--warning-400);
}
.dependency-manager-page .dependency-manager .right-panel .changes-list .no-changes {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 20px;
  font-size: var(--typography-sm);
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .panel-section .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .panel-section .panel-title .errors-count {
  background: var(--error-500);
  color: var(--bg-primary);
  font-size: var(--typography-xs);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  white-space: nowrap;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .no-errors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 20px;
  font-size: var(--typography-sm);
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .no-errors .success-icon {
  color: var(--success-500);
  font-size: 18px;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group {
  margin-bottom: 16px;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group:last-child {
  margin-bottom: 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .resource-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .resource-info .resource-type-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .resource-info .resource-name-and-version {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .resource-info .resource-name-and-version .resource-name {
  font-size: var(--typography-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .resource-info .resource-name-and-version .resource-version {
  min-width: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .resource-group-header .error-count-badge {
  background: var(--error-500);
  color: var(--bg-primary);
  font-size: var(--typography-xs);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .individual-errors .validation-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .individual-errors .validation-messages .validation-message.error .validation-content .resource-list li .resource-name-and-version .resource-name {
  font-size: var(--typography-sm);
}
.dependency-manager-page .dependency-manager .right-panel .errors-list .resource-group .individual-errors .validation-messages .validation-message.error .validation-content .resource-list li .resource-name-and-version .resource-version {
  min-width: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dependency-manager-page canvas {
  font-variation-settings: "FILL" 1;
}
.dependency-manager-page .dependency-graph-tooltip {
  background: var(--bg-primary);
}
.dependency-manager-page .dependency-graph-tooltip .tippy-content {
  background-color: var(--error-muted-bg);
}
.dependency-manager-page .dependency-graph-tooltip .tippy-arrow {
  color: var(--error-muted-bg);
}
.dependency-manager-page .dependency-graph-tooltip .validation-messages .validation-message.error {
  border-width: 0px;
  background-color: transparent;
}

.dependency-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dependency-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border-radius: 4px;
  border: 1px solid var(--line-colour-light);
}
.dependency-item .dependency-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.dependency-item .dependency-info .name {
  font-weight: 500;
  font-size: var(--typography-sm);
}
.dependency-item .dependency-info .name.interactive {
  cursor: pointer;
}
.dependency-item .dependency-info .name.interactive:hover {
  color: var(--text-secondary);
}
.dependency-item .dependency-info .remove-button {
  margin-left: auto;
  padding: 2px;
  min-height: unset;
  background: transparent;
}
.dependency-item .dependency-info .remove-button span {
  font-size: 14px;
}
.dependency-item .version-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dependency-item .version-info .version {
  width: 100%;
  font-size: var(--typography-sm);
}
.dependency-item .version-info .version .version-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dependency-item .version-info .version .version-dropdown-item .new-version-tag {
  font-size: var(--typography-xs);
  line-height: var(--typography-xs);
  padding: 4px 8px;
  border-radius: 9px;
  border: none;
  min-height: unset;
  min-width: unset;
}
.dependency-item .version-info .version .version-dropdown-item .new-version-tag:hover {
  background: var(--info-muted-bg);
}
.dependency-item .version-info .version .version-dropdown-item .new-version-tag.added {
  background: var(--tertiary-muted-bg);
}
.dependency-item .version-info .toggle-new-version-btn {
  min-height: 28px;
}
.dependency-item .version-info .toggle-new-version-btn .material-symbols-rounded {
  font-size: 16px;
}

.dependency-header {
  display: grid;
  grid-template-columns: 14px 16px 1fr 12px;
  align-items: center;
  padding: 6px 8px 6px 4px;
  cursor: pointer;
}
.dependency-header .chevron-icon {
  color: var(--text-tertiary);
  margin-right: 2px;
}
.dependency-header .workspaces-icon {
  color: var(--text-secondary);
  margin-right: 4px;
}
.dependency-header .title {
  color: var(--text-primary);
  text-transform: uppercase;
  margin-right: 4px;
  font-weight: 700;
  font-size: var(--typography-sm);
}
.dependency-header .add-icon {
  margin-left: auto;
  color: var(--text-tertiary);
}
.dependency-header.open .chevron-icon {
  transform: rotate(90deg);
  color: var(--text-secondary);
}

.dependency-selector-menu {
  padding: 0;
  background: var(--bg-primary);
  border: 1px solid var(--line-colour-light);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: 1px 1px 4px 0 var(--drop-shadow);
  width: 257px;
  overflow: hidden;
}
.dependency-selector-menu .tippy-content {
  padding: 0;
}
.dependency-selector-menu .dependency-selector {
  display: flex;
  flex-direction: column;
  width: 256px;
  max-width: 256px;
  overflow: hidden;
}
.dependency-selector-menu .dependency-selector .header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-colour-light);
  flex-shrink: 0;
}
.dependency-selector-menu .dependency-selector .header .search-container {
  flex: 1;
  min-width: 0;
  position: relative;
}
.dependency-selector-menu .dependency-selector .header .search-container .slim-search-input {
  width: unset;
}
.dependency-selector-menu .dependency-selector .header .search-container input {
  width: 100%;
  padding: 10px 8px 10px 26px;
  border: none;
  border-top-left-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--typography-sm);
  height: 32px;
}
.dependency-selector-menu .dependency-selector .header .search-container input::placeholder {
  color: var(--text-tertiary);
}
.dependency-selector-menu .dependency-selector .header .search-container input:focus {
  outline: none;
  border-color: var(--primary-500);
}
.dependency-selector-menu .dependency-selector .header .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: unset;
  background: transparent;
  flex-shrink: 0;
  border-left: 1px solid var(--line-colour-light);
  border-radius: 0 8px 0 0;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}
.dependency-selector-menu .dependency-selector .header .close-button:hover {
  background: var(--bg-tertiary);
}
.dependency-selector-menu .dependency-selector .current-path-segment {
  border-bottom: 1px solid var(--line-colour-light);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: center;
}
.dependency-selector-menu .dependency-selector .current-path-segment .item-text {
  font-size: var(--typography-sm);
}
.dependency-selector-menu .dependency-selector .current-path-segment {
  cursor: pointer;
}
.dependency-selector-menu .dependency-selector .current-path-segment:hover {
  background: var(--tertiary-100);
}
.dependency-selector-menu .dependency-selector .current-path-items {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.dependency-selector-menu .dependency-selector .current-path-items .folder-item,
.dependency-selector-menu .dependency-selector .current-path-items .resource-item,
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item {
  padding: 8px 12px;
  cursor: pointer;
  gap: 8px;
  transition: background-color 0.15s ease;
  min-width: 0;
  border-radius: 0;
}
.dependency-selector-menu .dependency-selector .current-path-items .folder-item:last-child,
.dependency-selector-menu .dependency-selector .current-path-items .resource-item:last-child,
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item:last-child {
  border-radius: 0 0 8px 8px;
}
.dependency-selector-menu .dependency-selector .current-path-items .folder-item:hover,
.dependency-selector-menu .dependency-selector .current-path-items .resource-item:hover,
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item:hover {
  background: var(--tertiary-100);
}
.dependency-selector-menu .dependency-selector .current-path-items .folder-item .item-text,
.dependency-selector-menu .dependency-selector .current-path-items .resource-item .item-text,
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .item-text {
  flex: 1;
  font-size: var(--typography-sm);
  color: var(--text-primary);
  min-width: 0;
}
.dependency-selector-menu .dependency-selector .current-path-items .folder-item,
.dependency-selector-menu .dependency-selector .current-path-items .resource-item {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 16px 1fr 10px;
  gap: 8px;
  align-items: center;
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item.added {
  pointer-events: none;
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .item-text {
  font-style: italic;
  margin-left: auto;
  text-align: right;
  font-size: var(--typography-sm);
  color: var(--text-tertiary);
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .version-tag {
  font-size: var(--typography-sm);
  padding: 4px 8px;
  border-radius: 16px;
  border: none;
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .version-tag:hover {
  background: var(--info-muted-bg);
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .version-tag.added {
  background: var(--tertiary-muted-bg);
}
.dependency-selector-menu .dependency-selector .current-path-items .resource-version-item .added-text {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--typography-sm);
  color: var(--text-tertiary);
}

.create-new-version-menu {
  padding: 0;
  background: var(--bg-primary);
  border: 1px solid var(--line-colour-light);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: 1px 1px 4px 0 var(--drop-shadow);
  width: 257px;
  overflow: hidden;
}
.create-new-version-menu .tippy-content {
  padding: 0;
}
.create-new-version-menu .create-new-version-container {
  display: flex;
  flex-direction: column;
  width: 256px;
  max-width: 256px;
  overflow: hidden;
}
.create-new-version-menu .create-new-version-container .header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-colour-light);
  flex-shrink: 0;
}
.create-new-version-menu .create-new-version-container .header .title-container {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-left: 12px;
  color: var(--text-primary);
  font-size: var(--typography-sm);
  font-weight: 700;
}
.create-new-version-menu .create-new-version-container .header .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: unset;
  background: transparent;
  flex-shrink: 0;
  border-left: 1px solid var(--line-colour-light);
  border-radius: 0 8px 0 0;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}
.create-new-version-menu .create-new-version-container .header .close-button:hover {
  background: var(--bg-tertiary);
}
.create-new-version-menu .create-new-version-container .main-content {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}
.create-new-version-menu .create-new-version-container .main-content .previous-version {
  text-transform: uppercase;
  font-weight: 700;
}
.create-new-version-menu .create-new-version-container .main-content .note,
.create-new-version-menu .create-new-version-container .main-content .previous-version {
  color: var(--text-tertiary);
  font-size: 10px;
}
.create-new-version-menu .create-new-version-container .main-content .new-version-input-container,
.create-new-version-menu .create-new-version-container .main-content .description {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
.create-new-version-menu .create-new-version-container .main-content .new-version-input-container label,
.create-new-version-menu .create-new-version-container .main-content .description label {
  font-size: var(--typography-sm);
  color: var(--text-primary);
}
.create-new-version-menu .create-new-version-container .main-content .new-version-input,
.create-new-version-menu .create-new-version-container .main-content .description-input {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--line-colour-light);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--typography-sm);
  height: 24px;
  min-width: 50px;
}
.create-new-version-menu .create-new-version-container .main-content .new-version-input::placeholder,
.create-new-version-menu .create-new-version-container .main-content .description-input::placeholder {
  color: var(--text-tertiary);
}
.create-new-version-menu .create-new-version-container .main-content .new-version-input:focus,
.create-new-version-menu .create-new-version-container .main-content .description-input:focus {
  outline: none;
}
.create-new-version-menu .create-new-version-container .main-content .description-input {
  height: 80px;
}
.create-new-version-menu .create-new-version-container .main-content .version-type {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.create-new-version-menu .create-new-version-container .main-content .version-type .btn + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.create-new-version-menu .create-new-version-container .main-content .version-type .btn {
  box-shadow: none;
  border: 1px solid var(--outline);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
.create-new-version-menu .create-new-version-container .main-content .version-type .btn.active {
  background: var(--bg-active);
}
.create-new-version-menu .create-new-version-container .main-content .version-type .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
}
.create-new-version-menu .create-new-version-container .main-content .error-message {
  color: var(--error-500);
}
.create-new-version-menu .create-new-version-container .main-content .create-btn {
  align-self: stretch;
}

.validation-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.validation-messages .validation-message {
  display: flex;
  align-items: flex-start;
  padding: 8px;
  border-radius: 4px;
  font-size: var(--typography-sm);
  line-height: 1.4;
}
.validation-messages .validation-message .validation-content {
  flex: 1;
  min-width: 0;
}
.validation-messages .validation-message .validation-content .validation-text {
  margin-bottom: 4px;
  font-weight: 600;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}
.validation-messages .validation-message .validation-content .resource-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}
.validation-messages .validation-message .validation-content .resource-list li {
  font-size: var(--typography-sm);
  opacity: 0.8;
  margin-bottom: 2px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}
.validation-messages .validation-message .validation-icon {
  margin-right: 8px;
  margin-top: 1px;
}
.validation-messages .validation-message.error {
  background: var(--error-muted-bg);
  border: 1px solid var(--error-200);
}
.validation-messages .validation-message.error .validation-icon {
  color: var(--error-500);
}
.validation-messages .validation-message.error .validation-text {
  color: var(--error-700);
}
.validation-messages .validation-message.warning {
  background: var(--warning-muted-bg);
  border: 1px solid var(--warning-200);
}
.validation-messages .validation-message.warning .validation-icon {
  color: var(--warning-500);
}
.validation-messages .validation-message.warning .validation-text {
  color: var(--warning-700);
}

.resource-name-and-version {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.resource-name-and-version .resource-name {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resource-name-and-version .resource-version {
  font-size: var(--typography-xs);
  line-height: var(--typography-xs);
  padding: 4px 8px;
  border-radius: 9px;
  border: none;
  min-height: unset;
  min-width: unset;
}
.resource-name-and-version .resource-version:hover {
  background: var(--info-muted-bg);
}
.resource-name-and-version .resource-version.added {
  background: var(--tertiary-muted-bg);
}

.diagram-title {
  font-size: var(--typography-md);
}

.frame-grid-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.text-prefix {
  width: 16px;
  text-align: center;
  color: var(--tertiary-400);
}

.models-page .bulk-version-button {
  height: auto;
  margin-left: auto;
}
.models-page .metamodels-chips {
  flex-grow: 1;
}
.models-page .metamodels-chips label {
  margin-top: 0;
}

.name-with-path {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4px;
}
.name-with-path .path {
  color: var(--text-tertiary);
  font-size: 12px;
}
.name-with-path .name-text {
  color: var(--text-primary);
}

.profile-email-form .unconfirmed-email {
  font-size: var(--typography-sm);
  margin: var(--spacing-xs) 0 0 0;
}
.profile-email-form .unconfirmed-email a {
  color: var(--color-primary);
}

.project-switch-icon {
  width: var(--sizing-md);
  height: var(--sizing-md);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 800px) {
  .project-switch-icon {
    display: none;
  }
}

.resource-dropdown {
  display: grid;
  grid-template-columns: auto auto;
  position: relative;
  border-radius: 4px;
}
.resource-dropdown .edit-title-input {
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: none;
  outline: 1px solid var(--grey-heavy);
  font-size: var(--typography-md);
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.resource-dropdown .edit-title-input.editing {
  visibility: visible;
}
.resource-dropdown .edit-title-input.error {
  outline: 1px solid var(--error-500);
}
.resource-dropdown .title {
  padding-left: 8px;
  border-radius: 4px 0 0 4px;
  border: none;
  font-size: var(--typography-md);
}
.resource-dropdown .icon-btn {
  padding: 2px 4px;
  border-radius: 0 4px 4px 0;
  border: none;
  line-height: 1;
}
.resource-dropdown .icon-btn .icon {
  padding-top: 4px;
  font-size: var(--typography-md);
}

.resources-list {
  flex-grow: 1;
  position: relative;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.resources-list .virtual-scroll {
  flex-grow: 1;
  gap: 8px;
}
.resources-list .resources-list-header {
  margin-inline: 12px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  min-height: 24px;
  max-height: 24px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms var(--animation-timing-productive);
}
.resources-list .resources-list-header:hover {
  background-color: var(--grey-medium);
}
.resources-list .resources-list-header .chevron-icon {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 4px 2px;
}
.resources-list .resources-list-header .chevron-icon .material-symbols-rounded {
  font-size: 12px;
}
.resources-list .resources-list-header .chevron-icon.open .material-symbols-rounded {
  transform: rotate(90deg);
}
.resources-list .resources-list-header .header-icon {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-list .resources-list-header .header-icon .material-symbols-rounded {
  font-size: 16px;
}
.resources-list .resources-list-header .header-title {
  margin-inline: 8px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.resources-list .resources-list-item {
  margin-inline: 12px;
  border-radius: 4px;
  display: grid;
  min-height: 24px;
  max-height: 24px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms var(--animation-timing-productive), color 200ms var(--animation-timing-productive);
}
.resources-list .resources-list-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
.resources-list .resources-list-item:has([disabled]) {
  opacity: 0.5;
}
.resources-list .resources-list-item:has([disabled]):hover {
  background-color: transparent;
  color: var(--text-secondary);
}
.resources-list .resources-list-item .search-highlight {
  background-color: var(--warning-200);
  color: var(--warning-800);
  font-weight: 500;
}
.resources-list .resources-list-item.depth-0 {
  margin-left: 12px;
}
.resources-list .resources-list-item.depth-1 {
  margin-left: 24px;
}
.resources-list .resources-list-item.depth-2 {
  margin-left: 36px;
}
.resources-list .resources-list-item.depth-3 {
  margin-left: 48px;
}
.resources-list .resources-list-item .chevron-icon {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.resources-list .resources-list-item .chevron-icon .material-symbols-rounded {
  font-size: 12px;
  transition: transform 200ms var(--animation-timing-productive);
}
.resources-list .resources-list-item .chevron-icon.open .material-symbols-rounded {
  transform: rotate(90deg);
}
.resources-list .resources-list-item .chevron-icon .selection-indicator {
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--primary-100);
  border-radius: 50%;
  border: 1px solid var(--bg-primary);
  pointer-events: none;
  z-index: 1;
}
.resources-list .resources-list-item .chevron-placeholder {
  width: 16px;
}
.resources-list.selection-mode .resources-list-item {
  grid-template-columns: 24px 16px 1fr;
}
.resources-list.selection-mode .resources-list-item.has-children .chevron-icon {
  margin-inline: 0px 4px;
}
.resources-list.selection-mode .resources-list-item .checkbox-item {
  margin-inline: 0px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.resources-list.selection-mode .resources-list-item .checkbox-item:has(.checkbox-input:checked) {
  visibility: visible;
}
.resources-list.selection-mode .resources-list-item:hover .checkbox-item {
  visibility: visible;
}
.resources-list.selection-mode .resources-list-item .item-icon {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-list.selection-mode .resources-list-item .item-icon .material-symbols-rounded {
  font-size: 16px;
}
.resources-list.selection-mode .resources-list-item .item-name {
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}
.resources-list.highlight-mode .resources-list-item {
  grid-template-columns: 16px 16px 1fr;
}
.resources-list.highlight-mode .resources-list-item.has-children .chevron-icon {
  margin-inline: 0px 4px;
}
.resources-list.highlight-mode .resources-list-item .chevron-placeholder {
  margin-inline: 0px 4px;
}
.resources-list.highlight-mode .resources-list-item.selected {
  background-color: var(--bg-tertiary);
}
.resources-list.highlight-mode .resources-list-item.selected:hover {
  background-color: var(--tertiary-200);
}
.resources-list.highlight-mode .resources-list-item .item-icon {
  font-size: 16px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-list.highlight-mode .resources-list-item .item-icon .material-symbols-rounded {
  font-size: 16px;
}
.resources-list.highlight-mode .resources-list-item .item-name {
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
  cursor: pointer;
}
.resources-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.resources-list .empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.resources-list .loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-tertiary);
}

.theme-dark .resources-list.highlight-mode .resources-list-item.selected:hover {
  background-color: var(--tertiary-600);
}

.save-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  min-width: 35px;
  cursor: default;
}
.save-status span {
  font-size: var(--typography-sm);
}

.save-status-menu {
  display: flex;
  flex-direction: column;
}
.save-status-menu .error-message {
  display: flex;
  flex-direction: column;
  max-width: 250px;
  color: var(--error-500);
  padding: 8px;
  line-height: 20px;
  font-size: var(--typography-sm);
}
.save-status-menu .error-message .title {
  font-weight: 700;
}

.versions-tooltip .tippy-content {
  padding: 0;
}
.versions-tooltip {
  line-height: 1.15;
}

.versions-tooltip-content {
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 4px;
}

.items-container {
  display: flex;
  max-height: 50vh;
  flex-direction: column;
  overflow-y: auto;
}

.versions-context-menu-item {
  padding: 8px;
  display: flex;
  align-items: center;
}
.versions-context-menu-item .date {
  font-size: 10px;
  text-align: left;
  font-style: italic;
  margin-left: 8px;
  color: var(--text-secondary);
  flex-grow: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.versions-context-menu-item .material-symbols-rounded {
  font-size: 12px;
}

.right-actions {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 24px;
  gap: 8px;
}

.open-icon-button {
  border-radius: 24px;
  border: 0px solid var(--text-tertiary);
  cursor: pointer;
  background-color: var(--tertiary-50);
  transition: background-color 0.3s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-tertiary);
}

.select-version-button {
  cursor: pointer;
  border-radius: 24px;
  border: 1px solid var(--primary-500);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--primary-500);
  background-color: transparent;
  transition: width 0.3s, background-color 0.3s;
}
.select-version-button .confirm-text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s;
}
.select-version-button .check {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.select-version-button:hover, .select-version-button.confirming {
  background-color: var(--primary-500);
  color: var(--neutral-white);
}
.select-version-button.confirming {
  width: 85px;
}
.select-version-button.confirming .confirm-text {
  max-width: 100px;
}
.select-version-button.confirming .check {
  margin-left: 8px;
}
.select-version-button.disabled, .select-version-button.loading {
  cursor: default;
  color: var(--text-secondary);
  border-color: var(--tertiary-muted-bg);
}
.select-version-button.disabled:hover, .select-version-button.loading:hover {
  background-color: transparent;
  color: var(--text-secondary);
}

.versions-skeleton {
  width: 2rem;
  height: 8px;
  background: var(--tertiary-muted-bg);
  border-radius: 0.5rem;
  display: inline-block;
}

.divider {
  height: 1px;
  background: var(--tertiary-muted-bg);
}

.create-new-version-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}* {
	box-sizing: border-box;
}

html,
body,
#root {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-family);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-heading);
	}

	h5,
	h6 {
		color: var(--text-secondary);
		text-transform: uppercase;
	}

	p {
		margin: 0;
		padding: 0;
	}
}.new-theme-toggle {
	aspect-ratio: 66 / 30;
	border-radius: 9999px;
	overflow: hidden;
	cursor: pointer;

	.wmapp-switch {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;

		.sun,
		.moon {
			pointer-events: none;
			display: block;
			position: absolute;
			border: none;
			width: 36.36%;
			height: 80%;
			transform: translate3d(0, 0, 0) rotate(0);
			transition:
				transform 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s,
				opacity 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s;
			top: 10%;
			left: 4.55%;
		}

		.sun {
			opacity: 1;

			.st0 {
				fill: #fba441;
			}
		}

		.moon {
			opacity: 0;

			.st0 {
				fill: #f4dc3e;
			}
		}

		.wmapp-switch-switch {
			width: 100%;
			height: 100%;
			margin: 0;
			border: 0;
			background: #b7e3ff;
			overflow: hidden;
			transition: all 0.3s cubic-bezier(0, 0, 0.44, 0.96) 0s;

			.stars,
			.clouds {
				display: block;
				height: 80%;
				position: absolute;
				bottom: 10%;
				border: none;
				border-radius: 0;
				transition: all 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0.1s;
			}

			.clouds {
				width: 39.39%;
				background-size: 39.39%;
				right: 10.61%;
				opacity: 1;

				.st0 {
					fill: #ffffff;
				}
			}

			.stars {
				width: 59.09%;
				background-size: 45.45%;
				right: 106.06%;
				opacity: 0;

				.st0 {
					fill: #f4dd3f;
				}
			}
		}

		&.dark {
			.sun {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 0;
			}

			.moon {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 1;
			}

			.wmapp-switch-switch {
				background: #000;

				.clouds {
					right: -9.09%;
					opacity: 0;
				}

				.stars {
					right: 30.3%;
					opacity: 1;
				}
			}
		}
	}
}.ErrorMessage {
	--base-size: var(--typography-md);

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	font-size: var(--base-size);


	&.column {
		flex-direction: column;
	}

	&.row {
		flex-direction: row;
	}

	&.grid {
		display: grid;
		grid-template-areas: 'icon title'
			'message message';
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: var(--spacing-xs) var(--spacing-sm);
	}

	&.overlay {
		position: absolute;
	}

	>.icon {
		grid-area: icon;
		color: var(--text-error);
		font-size: calc(var(--base-size) * 3);
	}

	>.title {
		grid-area: title;
		font-size: calc(var(--base-size) * 1.5);
		margin: 0;
	}

	>.message {
		grid-area: message;
		text-align: center;
	}

	.codeblock {
		width: calc(100% - var(--spacing-xl));
		max-height: 70vh;
	}
}.inline-spinner__inline-container {
	height: 100%;
}

.inline-spinner__inline-container--overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 700;
}

.inline-spinner__spinner-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.inline-spinner__spinner-container svg {
	animation: inlineSpinnerScale 2s ease-in-out infinite,
		inlineSpinnerSpin 1.4s linear infinite;
}

@keyframes inlineSpinnerScale {
	0% {
		scale: 1;
		opacity: 0.7;
	}

	50% {
		scale: 1.2;
		opacity: 1;
	}

	100% {
		scale: 1;
		opacity: 0.7;
	}
}

@keyframes inlineSpinnerSpin {
	100% {
		transform: rotate(360deg);
	}
}.form-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%
}

.form-input-wrapper .label-wrapper,
.form-input-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.form-input-wrapper .label,
.form-input-label-row .label,
.form-input-label {
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.form-input-wrapper .required-marker,
.form-input-label-row .required-marker,
.form-input-required-marker {
	color: var(--error-500);
	font-weight: 400;
}

.form-input-wrapper .label-actions,
.form-input-label-row .label-actions,
.form-input-label-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
	cursor: pointer;
}

.form-input-wrapper .bottom-bar,
.form-input-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 1.25rem;
}

.form-input-wrapper .helper-text-container,
.form-input-bottom-bar .helper-text-container,
.form-input-helper-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.form-input-wrapper .helper-text--error,
.form-input-bottom-bar .helper-text--error,
.form-input-helper-text--error {
	color: var(--error-500);
}

.form-input-wrapper .helper-text,
.form-input-bottom-bar .helper-text,
.form-input-helper-text {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--text-secondary);
	flex: 1;
}

.form-input-wrapper .link-slot,
.form-input-bottom-bar .link-slot,
.form-input-link {
	font-size: 0.75rem;
	line-height: 1rem;
	text-decoration: none;
	color: var(--primary-500);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	flex-shrink: 0;
	margin-left: auto;
}

.form-input-wrapper .link-slot:hover,
.form-input-bottom-bar .link-slot:hover,
.form-input-link:hover {
	text-decoration: underline;
}

.form-input-wrapper .link-slot:focus,
.form-input-bottom-bar .link-slot:focus,
.form-input-link:focus {
	outline: 2px solid var(--info-500);
	outline-offset: 2px;
}

.form-input-wrapper.valid .helper-text:not(.helper-text--error),
.form-input-wrapper.valid .form-input-helper-text:not(.form-input-helper-text--error),
.form-input-bottom-bar.valid .helper-text:not(.helper-text--error),
.form-input-bottom-bar.valid .form-input-helper-text:not(.form-input-helper-text--error) {
	color: var(--success-500);
}

.form-input-wrapper.invalid .helper-text,
.form-input-wrapper.invalid .form-input-helper-text,
.form-input-bottom-bar.invalid .helper-text,
.form-input-bottom-bar.invalid .form-input-helper-text {
	color: var(--error-500);
}.simple-input-wrapper {
	--input-border-radius: 4px;
	--input-border-width: 1px;
	--input-border-color: var(--line-colour);
	--input-focus-color: var(--info-300);
	--input-text-color: var(--text-secondary);
	--input-placeholder-color: var(--text-placeholder);
	--input-icon-color: var(--text-secondary);
	--input-background-color: var(--textbox-bg-default);
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-padding-inline-start: var(--input-padding-inline);
	--input-padding-inline-end: var(--input-padding-inline);
	--input-font-size: var(--typography-md);
	--icon-size: 16px;
}

.simple-input-wrapper.simple-input--size-md {
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-md);
}

.simple-input-wrapper.simple-input--size-sm {
	--input-padding-block: 5.1px;
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-sm);
}

/* Validation state styling for the wrapper */
.simple-input-wrapper.invalid {
	--input-border-color: var(--line-error);
}

.simple-input-wrapper.valid {
	--input-border-color: var(--line-success);
}

.simple-input-wrapper.disabled,
.simple-input-wrapper.read-only {
	--input-border-color: var(--line-disabled);
	--input-placeholder-color: var(--disabled-text);
	--input-icon-color: var(--disabled-text);
	--input-background-color: var(--textbox-bg-disabled);
}

.simple-input-wrapper.read-only {
	.simple-input__field:focus-within {
		border-color: var(--input-focus-color);
		box-shadow: inset 0 0 0 0.5px var(--input-focus-color);
		--input-background-color: var(--textbox-bg-disabled);
	}
}

.simple-input-wrapper.disabled {
	--input-text-color: var(--disabled-text);
}

.simple-input__field {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	border-radius: var(--input-border-radius);
	border: var(--input-border-width) solid var(--input-border-color);
	background-color: var(--input-background-color);
	transition: border-color 160ms var(--animation-productive),
		box-shadow 160ms var(--animation-productive);
	box-shadow: none;
}

.simple-input__field:focus-within {
	border-color: var(--input-focus-color);
	box-shadow: inset 0 0 0 0.5px var(--input-focus-color);
	--input-background-color: var(--textbox-bg-active);
}

.simple-input__field.simple-input__field--has-icon {
	--input-padding-inline-start: var(--spacing-xs);
}

.simple-input__field.simple-input__field--has-trailing {
	--input-padding-inline-end: var(--spacing-xs);
}

.simple-input__leading-icon {
	margin-left: var(--input-padding-inline-start);
	color: var(--input-icon-color);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.simple-input__input-element {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--input-text-color);
	font-size: var(--input-font-size);
	padding: var(--input-padding-block) var(--input-padding-inline-end) var(--input-padding-block) var(--input-padding-inline-start);
	min-width: 0;
}

.simple-input__input-element::placeholder {
	color: var(--input-placeholder-color);
}

.simple-input__trailing-slot {
	margin-right: var(--input-padding-inline-end);
	display: inline-flex;

	align-items: center;
	gap: var(--spacing-xs);
}.input__action-button {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--input-icon-color);
  cursor: pointer;
  border-radius: 4px;
  transition: color 160ms var(--animation-productive),
    background-color 160ms var(--animation-productive);
}

.input__action-button:hover:not(:disabled) {
  color: var(--input-focus-color);
}

.input__action-button:focus-visible {
  outline: 2px solid var(--input-focus-color);
  outline-offset: 2px;
}

.input__action-button--disabled,
.input__action-button:disabled {
  cursor: not-allowed;
  color: var(--disabled-text);
}

.input__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
}
.segmented-control {
  display: block;
  position: relative;
  line-height: 1;

  /* Size variants */
  &.segmented-control-size-sm {
    .segment {
      padding: 7px 16px;
      font-size: 12px;
    }
  }

  &.segmented-control-size-md {
    .segment {
      padding: 13px 16px;
      font-size: 12px;
    }
  }

  &.segmented-control-size-lg {
    .segment {
      padding: 11px 20px;
      font-size: 16px;
    }
  }

  .segment {
    flex: 1;
    text-align: center;
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-inline-width: 0px;
    position: relative;
    color: var(--text-primary);

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-left-width: 1px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right-width: 1px;
    }

    &:focus {
      outline: none;
    }
  }

  .underlay {
    display: flex;

    .segment {
      border-color: var(--bg-secondary);

      span {
        visibility: hidden;
      }

      + .segment {
        &:before {
          content: "";
          display: block;
          width: 1px;
          height: 70%;
          background: var(--tertiary-200);
          position: absolute;
          top: 15%;
          left: 0px;
          transition: opacity 0.15s ease;
          opacity: 1;
        }
      }

      &.selected + .segment {
        &:before {
          opacity: 0;
        }
      }
    }
  }

  .overlay {
    display: flex;
    position: absolute;
    inset: 0;

    .segment {
      background: transparent;

      span {
        visibility: visible;
      }
    }
  }

  .indicator {
    background-color: var(--bg-secondary);
    border-radius: 4px;
    box-shadow: 0px 2px 4px
        color-mix(in srgb, var(--text-primary) 10%, transparent),
      0px 0px 1px color-mix(in srgb, var(--text-primary) 30%, transparent);
    position: absolute;
    top: 0;
    left: 0;

    transition: width 0.15s ease, transform 0.15s ease, height 0.15s ease;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

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

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

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

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
.resource-crud {
	height: 100dvh !important;

	.left-panel,
	.right-panel {
		overflow-y: auto !important;
	}

	.left-panel {
		padding: var(--spacing-md);
		padding-top: var(--spacing-lg);
		background: var(--bg-secondary);
		border-right: 1px solid var(--line-colour-light);
	}

	.right-panel {
		padding: var(--spacing-lg);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.resource-breadcrumbs {
		color: var(--text-tertiary);
	}
}.breadcrumbs {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-xxs);
	align-items: center;
	justify-content: flex-start;
	color: var(--text-tertiary);

	&,
	& a {
		font-size: var(--typography-md);
	}
}.folder-panel {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	height: 100%;

	.add-folder {
		align-self: flex-end;
		margin-top: auto;
	}
}.folder-tree {
	--font-size: var(--typography-md);

	&,
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	/* Root level folder */
	>.folder-item {
		margin-left: 0 !important;
	}
}

.folder-item-drag-ghost {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	border-radius: 4px;
	background-color: var(--bg-tertiary);
	opacity: 0.8;

	>li {
		margin: 0;
	}
}

.folder-item {
	margin-left: 16px;
	position: relative;

	&.drop-target>.folder {
		outline: 1px dashed var(--primary-solid-bg);
		position: relative;
		z-index: 2;
	}

	&.collapsible {
		margin-left: 17px;
	}

	&.selected {
		>.folder {
			background-color: var(--primary-muted-bg);

			&:hover {
				background-color: var(--bg-tertiary);
			}
		}
	}

	&.search-match-self {
		>.folder {
			background-color: var(--pyxis-100);
		}
	}

	&.selectable {
		.folder:hover {
			background-color: var(--bg-tertiary);
			cursor: pointer;
		}
	}

	.folder {
		display: flex;
		gap: 8px;
		align-items: center;
		user-select: none;
		margin-left: 2px;
		padding: 4px 8px;
		border-radius: 4px;

		.folder-name {
			flex-grow: 1;
			font-size: var(--font-size);
			position: relative;
			display: flex;
			align-items: center;
			gap: 8px;

			input {
				appearance: none;
				outline: none;
				border: none;
				font-size: var(--font-size);
				background: transparent;
				padding: 0;
				margin: 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}

			.close-icon {
				color: var(--text-tertiary);
				z-index: 2;
				cursor: pointer;

				font-size: var(--font-size);

				&:hover {
					background: var(--tertiary-ghost-bg-hover);
				}
			}
		}

		.folder-icon {
			font-size: var(--font-size);
		}
	}

	.folder-children>li {
		border-left: 1px solid var(--bg-tertiary);
	}

	.folder-chevron {
		width: 16px;
		height: 16px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;

		--chevron-size: 5px;

		>.chevron {
			&.down {
				border-left: var(--chevron-size) solid transparent;
				border-right: var(--chevron-size) solid transparent;
				border-top: var(--chevron-size) solid var(--text-tertiary);
			}

			&.right {
				border-bottom: var(--chevron-size) solid transparent;
				border-top: var(--chevron-size) solid transparent;
				border-left: var(--chevron-size) solid var(--text-tertiary);
			}

			&.left {
				border-bottom: var(--chevron-size) solid transparent;
				border-top: var(--chevron-size) solid transparent;
				border-right: var(--chevron-size) solid var(--text-tertiary);
			}

			&.up {
				border-left: var(--chevron-size) solid transparent;
				border-right: var(--chevron-size) solid transparent;
				border-bottom: var(--chevron-size) solid var(--text-tertiary);
			}
		}

		&:hover {
			background: var(--tertiary-ghost-bg-hover);
		}
	}
}

.folder-context-menu {
	.context-menu-item {
		padding: 8px 12px;
		font-size: var(--font-size);
		min-width: 100px;

		>span {
			gap: 8px;
			display: flex;
			align-items: center;
			width: 100%;
			flex-wrap: nowrap;

			&.error {
				color: var(--text-error);
			}
		}

		&,
		.material-symbols-rounded {
			font-size: var(--font-size);
		}
	}
}.table.resource-table {}.table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--bg-primary);
	color: var(--text-primary);

	--table-border-colour: var(--line-colour-light);
	border-top: 1px solid var(--table-border-colour);

	th,
	td {
		text-align: left;
		vertical-align: middle;
		border: none;
		font-size: var(--typography-md);
		padding: var(--spacing-xs);
	}

	tr {
		border-bottom: 1px solid var(--table-border-colour);
	}

	thead {
		text-transform: uppercase;
		color: var(--text-tertiary);
		font-weight: bold;
		font-size: var(--typography-lg);
		border: none;

		th>*:first-child {
			display: flex;
			gap: var(--spacing-xxs);
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: fit-content;
		}

		th.sortable>*:first-child {
			cursor: pointer;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}

	}

	tbody {
		tr {

			&.empty,
			&.loading,
			&.error {
				td {
					text-align: center;
				}
			}

			&.loading {
				border-bottom: none;

				&:hover {
					background: unset;
					cursor: wait;
				}
			}

			&.drop-target {
				outline: 1px dashed var(--primary-solid-bg);
				outline-offset: -4px;
				border-radius: 8px;
			}

			&:hover {
				background: var(--bg-secondary);
				cursor: pointer;

				.additional-actions {
					visibility: visible;
				}
			}

			&.selected {
				background: var(--primary-muted-bg);
			}

		}
	}

	.btn-icon {
		padding: 4px;
		min-height: unset;
	}

	.material-symbols-rounded {
		color: var(--text-tertiary);
	}

	.actions {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}

	.additional-actions {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		visibility: hidden;
	}
}

.theme-dark {
	.table {
		background-color: var(--bg-primary);
		color: var(--text-primary);
		box-shadow: 0 1px 3px var(--drop-shadow);

		thead {
			background-color: var(--grey-heavy);
			color: var(--text-secondary);
		}

		&.table-striped tbody tr:nth-child(even) {
			background-color: var(--grey-medium);
		}

		&.table-hover tbody tr:hover {
			background-color: var(--primary-muted-bg-hover);
		}
	}
}.resource-drag-ghost {
	position: fixed;
	pointer-events: none;
	z-index: 10;
	left: 0;
	top: 0;
	opacity: 0.8;

	display: flex;
	gap: 8px;
	align-items: center;
	background: var(--bg-tertiary);
	border-radius: 8px;
	padding: 4px 8px;
}.resource-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);

	h1 {
		margin: 0;
		color: var(--text-primary);
		font-size: var(--typography-xxl);
		font-family: var(--font-family-heading);
	}

	.actions {
		display: flex;
		flex-direction: row;
		flex: 1;
		justify-content: flex-end;
		align-items: center;
		gap: var(--spacing-md);

		.form-input-wrapper {
			max-width: 300px;
		}
	}
}.resource-breadcrumb-button {
	background: none;
	border: none;
	color: var(--link-default);
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.resource-breadcrumb-button:hover {
	text-decoration: underline;
}

.resource-breadcrumb-button:visited {
	color: var(--link-visited);
}.resource-table-row {
	&.drop-target {
		outline: 1px dashed var(--primary-solid-bg);
		outline-offset: -4px;
		border-radius: 8px;
	}
}.v-stack,
.h-stack {
  display: flex;
}

.v-stack {
  flex-direction: column;
}.inline-code-block {
	display: inline-block;
	font-family: 'Courier New', Courier, monospace;
	background-color: var(--primary-muted-bg);
	padding: 0.1em 0.3em;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--primary-muted-text-icon);
}.bot-page {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.bot-page-content {
	gap: var(--spacing-lg);
	display: flex;
	flex-direction: column;
}.bot-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.title-row {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);

		h1,
		h2 {
			margin: 0;
			color: var(--text-primary);
			font-size: var(--typography-xl);
			font-family: var(--font-family-heading);
		}

		h2 {
			color: var(--text-secondary);
		}
	}

	.actions {
		display: flex;
		gap: var(--spacing-sm);
	}
}.skeleton-shell {
	--inner-height: 24px;
	--outer-height: 24px;
	--outer-width: 100%;
	height: var(--outer-height);
	display: flex;
	align-items: center;
	width: var(--outer-width);
	overflow: hidden;

	.skeleton-bar {
		border-radius: var(--radius-sm);
		position: relative;
		background: var(--bg-tertiary);
		width: 100%;
		height: var(--inner-height);


		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(40deg, transparent, var(--tertiary-muted-bg), transparent);
			transform: translateX(-100%);
			animation: skeleton-shimmer 1.2s linear infinite;
			pointer-events: none;
		}
	}
}

@keyframes skeleton-shimmer {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}.breadcrumb-link {
	background: none;
	border: none;
	color: var(--link-default);
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.breadcrumb-link:hover {
	text-decoration: underline;
}

.breadcrumb-link:visited {
	color: var(--link-default) !important;
}.link {
	color: var(--link-default);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--font-family);

	&:visited {
		color: var(--link-visited);
	}

	&:hover {
		text-decoration: underline;
	}

	&:focus {
		box-shadow: inset 0px 0px 0px 2px var(--link-default);
	}
}.bot-dependencies-table-container {
	display: flex;
	flex-direction: column;
	margin-top: var(--spacing-xs);
	gap: var(--spacing-lg);

	.table-headline {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			text-transform: uppercase;
			font-weight: 700;
		}

		.dependencies-search-input {
			width: 200px;
		}
	}
}.tab-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);

	.tab-headers {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline-block;
		width: fit-content;
		position: relative;
		border-bottom: 1px solid var(--line-colour-light);

		>li:not(.tab-indicator) {
			display: inline-block;
			padding: var(--spacing-xs) var(--spacing-md);
			color: var(--text-secondary);

			&:hover {
				cursor: pointer;
				background: var(--tertiary-ghost-bg-hover);
			}

			&.selected {
				color: var(--primary-500);

				.tab-header-with-count {
					.count {
						background: var(--primary-muted-bg);
						color: var(--primary-muted-text-icon);
					}
				}

			}

			.tab-header-with-count {
				display: inline-flex;
				align-items: center;
				gap: var(--spacing-xs);

				.count {
					background: var(--tertiary-muted-bg);
					color: var(--tertiary-muted-text-icon);
					border-radius: var(--radius-pill);
					padding: var(--spacing-xxs) var(--spacing-xs);
					font-size: var(--typography-sm);
					line-height: 1.15;
				}
			}
		}

		.tab-indicator {
			position: absolute;
			bottom: 0;
			height: 1.5px;
			background: var(--primary-500);
			display: block;
			transition: transform 0.2s ease, width 0.2s ease;
		}
	}
}

.tab-container--neutral {
	.tab-headers {
		border-bottom: none;

		>li:not(.tab-indicator) {
			color: var(--text-tertiary);
			font-size: var(--typography-md);
			line-height: 20px;
			padding: var(--spacing-sm);

			&.selected {
				color: var(--tertiary-ghost-text-icon);

				.tab-header-with-count {
					.count {
						background: var(--tertiary-muted-bg);
						color: var(--tertiary-muted-text-icon);
					}
				}
			}
		}

		.tab-indicator {
			background: var(--line-colour);
			height: 1px;
		}
	}
}.table-headline {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		text-transform: uppercase;
		font-weight: 700;
	}

	.bot-versions-search-input {
		width: 200px;
	}
}

.bot-versions-resources {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}


.bot-versions-resource-counter {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
}.details-step {
	color: var(--text-secondary);
	font-size: var(--typography-md);

	h4 {
		color: var(--text-primary);
		font-size: var(--typography-lg);
	}

	table {
		th {
			font-weight: bold;
			text-align: left;
			text-transform: uppercase;
			color: var(--text-tertiary);
		}
	}

	.bot-dependencies-table-container {
		padding: var(--spacing-xs) var(--spacing-md);
		border-radius: var(--spacing-sm);
		border: 1px solid var(--line-colour-light);
		background: var(--bg-secondary);

		.bot-dependencies-table {
			background: var(--bg-secondary);
			border: none;

			tbody tr:last-child {
				border-bottom: none;
			}
		}
	}
}.switch-input {
  --switch-focus-color: var(--info-300);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.switch-input--invalid {
  --switch-focus-color: var(--error-500);
}

.switch-input--valid {
  --switch-focus-color: var(--success-500);
}

.switch-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  cursor: pointer;
}

.switch-input--disabled .switch-control {
  cursor: not-allowed;
}

.switch-input--read-only .switch-control {
  cursor: default;
}

.switch-input--read-only .switch-track {
  cursor: default;
}

.switch-input--read-only .switch-track:hover .switch-button {
  transform: none;
}

.switch-input--read-only .switch-label {
  color: var(--text-secondary);
}

.switch-native-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.switch-native-input:focus-visible + .switch-track {
  box-shadow: 0 0 0 2px var(--switch-focus-color);
}

.switch-track {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--switch-size) * 2);
  height: var(--switch-size);
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tertiary-200);
  transition: background 200ms var(--animation-productive);
}

.theme-dark .switch-track {
  background: var(--tertiary-300);
}

.switch-input--disabled .switch-track {
  background: var(--tertiary-200);
}

.theme-dark .switch-input--disabled .switch-track {
  background: var(--tertiary-300);
}

.switch-input:not(.switch-input--disabled):not(.switch-input--read-only) .switch-track {
  cursor: pointer;
}

.switch-button {
  pointer-events: none;
  --switch-button-size: calc(var(--switch-size) * 0.66);
  height: var(--switch-button-size);
  width: var(--switch-button-size);
  border-radius: 50%;
  margin: calc(var(--switch-size) / 6);
  margin-left: calc(var(--switch-size) / 6);
  background-color: var(--neutral-black);
  transition: background-color 200ms var(--animation-productive),
    margin-left 200ms var(--animation-productive),
    transform 200ms var(--animation-productive);
}

.switch-input--checked .switch-button {
  margin-left: calc(var(--switch-size) * 1.166);
  background-color: var(--grey-50);
}

.switch-input--disabled .switch-button {
  background-color: var(--tertiary-300);
}

.theme-dark .switch-input--disabled .switch-button {
  background-color: var(--tertiary-200);
}

.switch-input:not(.switch-input--disabled):not(.switch-input--read-only) .switch-track:hover .switch-button {
  transform: scale(1.15);
}

.switch-input {
  --switch-size: 24px;
}

.switch-input--size-xs,
.switch-input--size-sm {
  --switch-size: 16px;
}

.switch-input--size-md {
  --switch-size: 24px;
}

.switch-input--size-lg {
  --switch-size: 32px;
}

.switch-input--unchecked .switch-track {
  background: var(--tertiary-200);
}

.theme-dark .switch-input--unchecked .switch-track {
  background: var(--tertiary-300);
}

.switch-input--checked:not(.switch-input--disabled) .switch-track {
  background: linear-gradient(
    90deg,
    var(--warning-solid-bg) 0%,
    var(--primary-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-horizon:not(
    .switch-input--disabled
  )
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--warning-solid-bg) 0%,
    var(--primary-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-flare:not(.switch-input--disabled)
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--error-solid-bg) 0%,
    var(--warning-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-aurora:not(
    .switch-input--disabled
  )
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--info-solid-bg) 0%,
    var(--success-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-galaxy:not(
    .switch-input--disabled
  )
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--info-solid-bg) 0%,
    var(--secondary-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-gravity:not(
    .switch-input--disabled
  )
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--secondary-solid-bg) 0%,
    var(--primary-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-nebula:not(
    .switch-input--disabled
  )
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--secondary-solid-bg) 0%,
    var(--success-solid-bg) 60%
  );
}

.switch-input--checked.switch-input--gradient-grey:not(.switch-input--disabled)
  .switch-track {
  background: linear-gradient(
    90deg,
    var(--tertiary-solid-bg) 0%,
    var(--tertiary-solid-bg) 60%
  );
}

.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  user-select: none;
}

.switch-input--disabled .switch-label {
  color: var(--text-secondary);
}

.theme-dark .switch-label {
  color: inherit;
}

.theme-dark .switch-input--disabled .switch-label {
  color: var(--text-secondary);
}

.theme-dark .switch-input--read-only .switch-label {
  color: var(--text-secondary);
}

.switch-label-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.marketplace-configuration {
	.paid-feature-notice {
		align-items: center;
		justify-items: center;
		padding: var(--spacing-md);
		border: 1px solid var(--info-muted-text-icon);
		background: var(--info-muted-bg);
		border-radius: var(--radius-md);

		.material-symbols-rounded,
		strong {
			color: var(--info-muted-text-icon);
		}
	}
}.checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  .checkbox-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .checkbox-wrapper {
    position: relative;
    display: inline-block;
  }

  .checkbox-input {
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    border: 2px solid var(--line-colour);
    border-radius: 2px;
    background-color: transparent;
    position: relative;
    display: block;

    &:focus-visible:not(.checkbox-input-disabled) {
      outline: 2px solid var(--primary-500);
    }
  }

  .checkbox-input.checkbox-checked:not(.checkbox-input-disabled) {
    background-color: var(--secondary-solid-bg-hover);
    border-color: var(--secondary-solid-bg-hover);

    &:focus-visible {
      outline: 2px solid var(--primary-500);
    }
  }

  .checkbox-input.checkbox-indeterminate:not(.checkbox-input-disabled) {
    background-color: var(--secondary-solid-bg-hover);
    border-color: var(--secondary-solid-bg-hover);

    &:focus-visible {
      outline: 2px solid var(--primary-500);
    }
  }

  .checkbox-input.checkbox-input-disabled {
    border-color: var(--line-disabled);
    background-color: var(--disabled-bg);
    cursor: not-allowed;

    &.checkbox-checked,
    &.checkbox-indeterminate {
      background-color: #e8e8e8;
      border-color: #e8e8e8;
    }
  }

  .checkbox-input-disabled ~ .checkbox-icon .check-icon,
  .checkbox-input-disabled ~ .checkbox-icon .indeterminate-icon {
    color: var(--disabled-text);
  }

  .checkbox-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .check-icon,
  .indeterminate-icon {
    color: var(--neutral-white);
  }

  .check-icon .material-symbols-rounded,
  .indeterminate-icon .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24;
  }

  .checkbox-label {
    color: var(--text-primary);
    align-self: center;
    cursor: pointer;
    line-height: 1;
    user-select: none;
  }

  .checkbox-label.checkbox-label-disabled {
    color: var(--disabled-text);
    cursor: not-allowed;
  }

  .checkbox-label-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .form-input-bottom-bar {
    margin-top: 0;
  }

  .checkbox-validation-errors {
    margin-top: var(--spacing-xs);
    color: var(--error-solid-text-icon);
    font-size: var(--typography-sm);
  }

  /* Size variants */
  &.checkbox-size-xs .checkbox-input {
    width: 12px;
    height: 12px;
  }

  &.checkbox-size-xs .checkbox-icon .material-symbols-rounded {
    font-size: 8px;
  }

  &.checkbox-size-sm .checkbox-input {
    width: 16px;
    height: 16px;
  }

  &.checkbox-size-sm .checkbox-icon .material-symbols-rounded {
    font-size: 12px;
  }

  &.checkbox-size-md .checkbox-input {
    width: 24px;
    height: 24px;
  }

  &.checkbox-size-md .checkbox-icon .material-symbols-rounded {
    font-size: 18px;
  }

  &.checkbox-size-lg .checkbox-input {
    width: 32px;
    height: 32px;
  }

  &.checkbox-size-lg .checkbox-icon .material-symbols-rounded {
    font-size: 24px;
  }

  /* Disabled state */
  &.checkbox-disabled .checkbox-wrapper {
    cursor: not-allowed;
  }

  &.checkbox-disabled .checkbox-label {
    cursor: not-allowed;
  }
}
.bordered-table {
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--spacing-sm);
	border: 1px solid var(--line-colour-light);
	background: var(--bg-secondary);

	.table {
		background: var(--bg-secondary);
		border: none;

		tbody tr:last-child {
			border-bottom: none;
		}
	}
}.share-bot-version-modal {
	>div {
		width: min(900px, 90dvw);

		.modal-content {
			width: 100%;
		}
	}
}@media (prefers-color-scheme: dark) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: dark;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #484f58;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: rgba(110, 118, 129, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
  }
}
@media (prefers-color-scheme: light) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: light;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsl(210, 18%, 87%);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #cf222e;
  }
}
[data-color-mode*='dark'] .wmde-markdown,
[data-color-mode*='dark'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='dark'],
.wmde-markdown[data-color-mode*='dark'],
body[data-color-mode*='dark'] {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}
[data-color-mode*='light'] .wmde-markdown,
[data-color-mode*='light'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='light'],
.wmde-markdown[data-color-mode*='light'],
body[data-color-mode*='light'] {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --color-prettylights-syntax-entity-tag: #116329;
  --color-prettylights-syntax-keyword: #cf222e;
  --color-prettylights-syntax-string: #0a3069;
  --color-prettylights-syntax-variable: #953800;
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
  --color-prettylights-syntax-string-regexp: #116329;
  --color-prettylights-syntax-markup-list: #3b2300;
  --color-prettylights-syntax-markup-heading: #0550ae;
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
  --color-prettylights-syntax-meta-diff-range: #8250df;
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: hsl(210, 18%, 87%);
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
}
.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
}
.wmde-markdown details,
.wmde-markdown figcaption,
.wmde-markdown figure {
  display: block;
}
.wmde-markdown summary {
  display: list-item;
}
.wmde-markdown [hidden] {
  display: none !important;
}
.wmde-markdown a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
}
.wmde-markdown a:active,
.wmde-markdown a:hover {
  outline-width: 0;
}
.wmde-markdown abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.wmde-markdown b,
.wmde-markdown strong {
  font-weight: 600;
}
.wmde-markdown dfn {
  font-style: italic;
}
.wmde-markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-text-primary);
}
.wmde-markdown small {
  font-size: 90%;
}
.wmde-markdown sub,
.wmde-markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.wmde-markdown sub {
  bottom: -0.25em;
}
.wmde-markdown sup {
  top: -0.5em;
}
.wmde-markdown img {
  display: inline-block;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: var(--color-canvas-default);
}
.wmde-markdown code,
.wmde-markdown kbd,
.wmde-markdown pre,
.wmde-markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.wmde-markdown figure {
  margin: 1em 40px;
}
.wmde-markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
}
.wmde-markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wmde-markdown [type='button'],
.wmde-markdown [type='reset'],
.wmde-markdown [type='submit'] {
  -webkit-appearance: button;
}
.wmde-markdown [type='button']::-moz-focus-inner,
.wmde-markdown [type='reset']::-moz-focus-inner,
.wmde-markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.wmde-markdown [type='button']:-moz-focusring,
.wmde-markdown [type='reset']:-moz-focusring,
.wmde-markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.wmde-markdown [type='checkbox'],
.wmde-markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
.wmde-markdown [type='number']::-webkit-inner-spin-button,
.wmde-markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}
.wmde-markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.wmde-markdown [type='search']::-webkit-search-cancel-button,
.wmde-markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
.wmde-markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
.wmde-markdown a:hover {
  text-decoration: underline;
}
.wmde-markdown hr::before {
  display: table;
  content: '';
}
.wmde-markdown hr::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}
.wmde-markdown h4 {
  font-weight: 600;
  font-size: 1em;
}
.wmde-markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}
.wmde-markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-fg-muted);
}
.wmde-markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}
.wmde-markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}
.wmde-markdown ul,
.wmde-markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}
.wmde-markdown ol ol,
.wmde-markdown ul ol {
  list-style-type: lower-roman;
}
.wmde-markdown ul ul ol,
.wmde-markdown ul ol ol,
.wmde-markdown ol ul ol,
.wmde-markdown ol ol ol {
  list-style-type: lower-alpha;
}
.wmde-markdown dd {
  margin-left: 0;
}
.wmde-markdown tt,
.wmde-markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}
.wmde-markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}
.wmde-markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown ::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown input::-webkit-outer-spin-button,
.wmde-markdown input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.wmde-markdown [data-catalyst] {
  display: block;
}
.wmde-markdown::before {
  display: table;
  content: '';
}
.wmde-markdown::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown > *:first-child {
  margin-top: 0 !important;
}
.wmde-markdown > *:last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.wmde-markdown .absent {
  color: var(--color-danger-fg);
}
.wmde-markdown a.anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}
.wmde-markdown .anchor:focus {
  outline: none;
}
.wmde-markdown p,
.wmde-markdown blockquote,
.wmde-markdown ul,
.wmde-markdown ol,
.wmde-markdown dl,
.wmde-markdown table,
.wmde-markdown pre,
.wmde-markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}
.wmde-markdown blockquote > :first-child {
  margin-top: 0;
}
.wmde-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.wmde-markdown sup > a::before {
  content: '[';
}
.wmde-markdown sup > a::after {
  content: ']';
}
.wmde-markdown h1 .octicon-link,
.wmde-markdown h2 .octicon-link,
.wmde-markdown h3 .octicon-link,
.wmde-markdown h4 .octicon-link,
.wmde-markdown h5 .octicon-link,
.wmde-markdown h6 .octicon-link {
  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
}
.wmde-markdown h1:hover .anchor,
.wmde-markdown h2:hover .anchor,
.wmde-markdown h3:hover .anchor,
.wmde-markdown h4:hover .anchor,
.wmde-markdown h5:hover .anchor,
.wmde-markdown h6:hover .anchor {
  text-decoration: none;
}
.wmde-markdown h1:hover .anchor .octicon-link,
.wmde-markdown h2:hover .anchor .octicon-link,
.wmde-markdown h3:hover .anchor .octicon-link,
.wmde-markdown h4:hover .anchor .octicon-link,
.wmde-markdown h5:hover .anchor .octicon-link,
.wmde-markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}
.wmde-markdown h1 tt,
.wmde-markdown h1 code,
.wmde-markdown h2 tt,
.wmde-markdown h2 code,
.wmde-markdown h3 tt,
.wmde-markdown h3 code,
.wmde-markdown h4 tt,
.wmde-markdown h4 code,
.wmde-markdown h5 tt,
.wmde-markdown h5 code,
.wmde-markdown h6 tt,
.wmde-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.wmde-markdown ul.no-list,
.wmde-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.wmde-markdown ol[type='1'] {
  list-style-type: decimal;
}
.wmde-markdown ol[type='a'] {
  list-style-type: lower-alpha;
}
.wmde-markdown ol[type='i'] {
  list-style-type: lower-roman;
}
.wmde-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.wmde-markdown ul ul,
.wmde-markdown ul ol,
.wmde-markdown ol ol,
.wmde-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.wmde-markdown li > p {
  margin-top: 16px;
}
.wmde-markdown li + li {
  margin-top: 0.25em;
}
.wmde-markdown dl {
  padding: 0;
}
.wmde-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.wmde-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wmde-markdown table th {
  font-weight: 600;
}
.wmde-markdown table th,
.wmde-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}
.wmde-markdown table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}
.wmde-markdown table img {
  background-color: transparent;
}
.wmde-markdown img[align='right'] {
  padding-left: 20px;
}
.wmde-markdown img[align='left'] {
  padding-right: 20px;
}
.wmde-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.wmde-markdown span.frame {
  display: block;
  overflow: hidden;
}
.wmde-markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown span.frame span img {
  display: block;
  float: left;
}
.wmde-markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-fg-default);
}
.wmde-markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}
.wmde-markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.wmde-markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown span.align-right span img {
  margin: 0;
  text-align: right;
}
.wmde-markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-left span {
  margin: 13px 0 0;
}
.wmde-markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown code,
.wmde-markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
}
.wmde-markdown code br,
.wmde-markdown tt br {
  display: none;
}
.wmde-markdown del code {
  text-decoration: inherit;
}
.wmde-markdown pre code {
  font-size: 100%;
}
.wmde-markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.wmde-markdown pre {
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
}
.wmde-markdown pre code,
.wmde-markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
.wmde-markdown pre > code {
  padding: 16px;
  overflow: auto;
  display: block;
}
.wmde-markdown .csv-data td,
.wmde-markdown .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.wmde-markdown .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: var(--color-canvas-default);
  border: 0;
}
.wmde-markdown .csv-data tr {
  border-top: 0;
}
.wmde-markdown .csv-data th {
  font-weight: 600;
  background: var(--color-canvas-subtle);
  border-top: 0;
}
.wmde-markdown .footnotes {
  font-size: 12px;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border-default);
}
.wmde-markdown .footnotes ol {
  padding-left: 16px;
}
.wmde-markdown .footnotes li {
  position: relative;
}
.wmde-markdown .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
}
.wmde-markdown .footnotes li:target {
  color: var(--color-fg-default);
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}
.wmde-markdown .task-list-item {
  list-style-type: none;
}
.wmde-markdown .task-list-item label {
  font-weight: 400;
}
.wmde-markdown .task-list-item.enabled label {
  cursor: pointer;
}
.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {
  margin-top: 3px;
}
.wmde-markdown .task-list-item .handle {
  display: none;
}
.wmde-markdown .task-list-item-checkbox,
.wmde-markdown .contains-task-list input[type='checkbox'] {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,
.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {
  margin: 0 -1.6em 0.25em 0.2em;
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(50%);
          filter: invert(50%);
}
.wmde-markdown pre {
  position: relative;
}
.wmde-markdown pre .copied {
  visibility: hidden;
  display: flex;
  position: absolute;
  cursor: pointer;
  color: var(--color-fg-defaul);
  top: 6px;
  right: 6px;
  border-radius: 5px;
  background: var(--color-border-default);
  padding: 6px;
  font-size: 12px;
  transition: all 0.3s;
}
.wmde-markdown pre .copied .octicon-copy {
  display: block;
}
.wmde-markdown pre .copied .octicon-check {
  display: none;
}
.wmde-markdown pre:hover .copied {
  visibility: visible;
}
.wmde-markdown pre:hover .copied:hover {
  background: var(--color-prettylights-syntax-entity-tag);
  color: var(--color-canvas-default);
}
.wmde-markdown pre:hover .copied:active,
.wmde-markdown pre .copied.active {
  background: #2e9b33;
  color: var(--color-canvas-default);
}
.wmde-markdown pre .active .octicon-copy {
  display: none;
}
.wmde-markdown pre .active .octicon-check {
  display: block;
}
.highlight-line {
  background-color: var(--color-neutral-muted);
}
.code-line.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  color: var(--color-fg-subtle);
  content: attr(line);
  white-space: nowrap;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-prettylights-syntax-comment);
}
.token.namespace {
  opacity: 0.7;
}
.token.property,
.token.tag,
.token.selector,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
}
.token.maybe-class-name {
  color: var(--color-prettylights-syntax-variable);
}
.token.property-access,
.token.operator,
.token.boolean,
.token.number,
.token.selector .token.class,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--color-prettylights-syntax-constant);
}
.token.deleted {
  color: var(--color-prettylights-syntax-markup-deleted-text);
}
.code-line .token.deleted {
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.token.inserted {
  color: var(--color-prettylights-syntax-markup-inserted-text);
}
.code-line .token.inserted {
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.token.variable {
  color: var(--color-prettylights-syntax-constant);
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--color-prettylights-syntax-string);
}
.token.color,
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--color-prettylights-syntax-string);
}
.token.rule,
.token.regex,
.token.important,
.token.keyword {
  color: var(--color-prettylights-syntax-keyword);
}
.token.coord {
  color: var(--color-prettylights-syntax-meta-diff-range);
}
.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
.w-md-editor-area {
  overflow: auto;
  border-radius: 5px;
}
.w-md-editor-text {
  min-height: 100%;
  position: relative;
  text-align: left;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  font-size: 14px !important;
  line-height: 18px !important;
  font-variant-ligatures: common-ligatures;
}
.w-md-editor-text-pre,
.w-md-editor-text-input,
.w-md-editor-text > .w-md-editor-text-pre {
  margin: 0;
  border: 0;
  background: none;
  box-sizing: inherit;
  display: inherit;
  font-family: inherit;
  font-family: var(--md-editor-font-family) !important;
  font-size: inherit;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  tab-size: inherit;
  text-indent: inherit;
  text-rendering: inherit;
  text-transform: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
  word-break: normal;
  padding: 0;
}
.w-md-editor-text-pre {
  position: relative;
  margin: 0px !important;
  pointer-events: none;
  background-color: transparent !important;
}
.w-md-editor-text-pre > code {
  padding: 0 !important;
  font-family: var(--md-editor-font-family) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}
.w-md-editor-text-input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  resize: none;
  color: inherit;
  overflow: hidden;
  outline: 0;
  padding: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: transparent;
}
.w-md-editor-text-input:empty {
  -webkit-text-fill-color: inherit !important;
}
.w-md-editor-text-pre,
.w-md-editor-text-input {
  word-wrap: pre;
  word-break: break-word;
  white-space: pre-wrap;
}
/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .w-md-editor-text-input {
    color: transparent !important;
  }
  .w-md-editor-text-input::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
.w-md-editor-text-pre .punctuation {
  color: var(--color-prettylights-syntax-comment, #8b949e) !important;
}
.w-md-editor-text-pre .token.url,
.w-md-editor-text-pre .token.content {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.title.important {
  color: var(--color-prettylights-syntax-markup-bold, #24292f);
}
.w-md-editor-text-pre .token.code-block .function {
  color: var(--color-prettylights-syntax-entity, #8250df);
}
.w-md-editor-text-pre .token.bold {
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.title {
  line-height: unset !important;
  font-size: unset !important;
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.code.keyword {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.strike,
.w-md-editor-text-pre .token.strike .content {
  color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
}
.w-md-editor-toolbar-child {
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  z-index: 1;
  display: none;
}
.w-md-editor-toolbar-child.active {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar {
  border-bottom: 0;
  padding: 3px;
  border-radius: 3px;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
  width: -webkit-fill-available;
  height: initial;
  box-sizing: border-box;
  padding: 3px 4px 2px 4px;
  margin: 0;
}
.w-md-editor-toolbar {
  border-bottom: 1px solid var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  padding: 5px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
          user-select: none;
  flex-wrap: wrap;
}
.w-md-editor-toolbar.bottom {
  border-bottom: 0px;
  border-top: 1px solid var(--md-editor-box-shadow-color);
  border-radius: 0 0 3px 3px;
}
.w-md-editor-toolbar ul,
.w-md-editor-toolbar li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: initial;
}
.w-md-editor-toolbar li {
  display: inline-block;
  font-size: 14px;
}
.w-md-editor-toolbar li + li {
  margin: 0;
}
.w-md-editor-toolbar li > button {
  border: none;
  height: 20px;
  line-height: 14px;
  background: none;
  padding: 4px;
  margin: 0 1px;
  border-radius: 2px;
  text-transform: none;
  font-weight: normal;
  overflow: visible;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  color: var(--color-fg-default);
}
.w-md-editor-toolbar li > button:hover,
.w-md-editor-toolbar li > button:focus {
  background-color: var(--color-neutral-muted);
  color: var(--color-accent-fg);
}
.w-md-editor-toolbar li > button:active {
  background-color: var(--color-neutral-muted);
  color: var(--color-danger-fg);
}
.w-md-editor-toolbar li > button:disabled {
  color: var(--md-editor-box-shadow-color);
  cursor: not-allowed;
}
.w-md-editor-toolbar li > button:disabled:hover {
  background-color: transparent;
  color: var(--md-editor-box-shadow-color);
}
.w-md-editor-toolbar li.active > button {
  color: var(--color-accent-fg);
  background-color: var(--color-neutral-muted);
}
.w-md-editor-toolbar-divider {
  height: 14px;
  width: 1px;
  margin: -3px 3px 0 3px !important;
  vertical-align: middle;
  background-color: var(--md-editor-box-shadow-color);
}
.w-md-editor-bar {
  position: absolute;
  cursor: s-resize;
  right: 0;
  bottom: 0;
  margin-top: -11px;
  margin-right: 0;
  width: 14px;
  z-index: 3;
  height: 10px;
  border-radius: 0 0 3px 0;
  -webkit-user-select: none;
          user-select: none;
}
.w-md-editor-bar svg {
  display: block;
  margin: 0 auto;
}
.w-md-editor {
  text-align: left;
  border-radius: 3px;
  padding-bottom: 1px;
  position: relative;
  color: var(--color-fg-default);
  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --md-editor-background-color: var(--color-canvas-default, #ffffff);
  --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
.w-md-editor.w-md-editor-rtl {
  direction: rtl !important;
  text-align: right !important;
}
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
  right: unset !important;
  left: 0;
  text-align: right !important;
  box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
}
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
  text-align: right !important;
}
.w-md-editor-toolbar {
  height: -webkit-fit-content;
  height: fit-content;
}
.w-md-editor-content {
  height: 100%;
  overflow: auto;
  position: relative;
  border-radius: 0 0 3px 0;
}
.w-md-editor .copied {
  display: none !important;
}
.w-md-editor-input {
  width: 50%;
  height: 100%;
}
.w-md-editor-text-pre > code {
  word-break: break-word !important;
  white-space: pre-wrap !important;
}
.w-md-editor-preview {
  width: 50%;
  box-sizing: border-box;
  box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
  position: absolute;
  padding: 10px 20px;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 5px 0;
  display: flex;
  flex-direction: column;
}
.w-md-editor-preview .anchor {
  display: none;
}
.w-md-editor-preview .contains-task-list li.task-list-item {
  list-style: none;
}
.w-md-editor-show-preview .w-md-editor-input {
  width: 0%;
  overflow: hidden;
  background-color: var(--md-editor-background-color);
}
.w-md-editor-show-preview .w-md-editor-preview {
  width: 100%;
  box-shadow: inset 0 0 0 0;
}
.w-md-editor-show-edit .w-md-editor-input {
  width: 100%;
}
.w-md-editor-show-edit .w-md-editor-preview {
  width: 0%;
  padding: 0;
}
.w-md-editor-fullscreen {
  overflow: hidden;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
}
.w-md-editor-fullscreen .w-md-editor-content {
  height: 100%;
}
.textarea-wrapper {
  --textarea-border-radius: 4px;
  --textarea-border-width: 1px;
  --textarea-border-color: var(--line-colour);
  --textarea-focus-color: var(--info-300);
  --textarea-text-color: var(--text-secondary);
  --textarea-placeholder-color: var(--text-placeholder);
  --textarea-background-color: var(--textbox-bg-default);
  --textarea-padding-block: var(--spacing-xs);
  --textarea-padding-inline: var(--spacing-sm);
  --textarea-font-size: var(--typography-md);
  --icon-size: 16px;
}

.textarea-wrapper.textarea--size-md {
  --textarea-padding-block: var(--spacing-xs);
  --textarea-padding-inline: var(--spacing-sm);
  --textarea-font-size: var(--typography-md);
}

/* Validation state styling for the wrapper */
.textarea-wrapper.invalid {
  --textarea-border-color: var(--line-error);
}

.textarea-wrapper.valid {
  --textarea-border-color: var(--line-success);
}

.textarea-wrapper.disabled,
.textarea-wrapper.read-only {
  --textarea-border-color: var(--line-disabled);
  --textarea-text-color: var(--disabled-text);
  --textarea-placeholder-color: var(--disabled-text);
  --textarea-background-color: var(--textbox-bg-disabled);
}

.textarea-wrapper.read-only {
  .textarea__field:focus-within {
    --textarea-background-color: var(--textbox-bg-disabled);
  }
}

.textarea__field {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--textarea-border-radius);
  border: var(--textarea-border-width) solid var(--textarea-border-color);
  background-color: var(--textarea-background-color);
  transition: border-color 160ms var(--animation-productive),
    box-shadow 160ms var(--animation-productive);
  box-shadow: none;
}

.textarea__field:focus-within {
  border-color: var(--textarea-focus-color);
  box-shadow: inset 0 0 0 0.5px var(--textarea-focus-color);
  --textarea-background-color: var(--textbox-bg-active);
}

.textarea__element {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--textarea-text-color);
  font-size: var(--textarea-font-size);
  font-family: inherit;
  padding: var(--textarea-padding-block) var(--textarea-padding-inline);
  min-width: 0;
  resize: vertical;
  line-height: 1.5;
}

.textarea__element::placeholder {
  color: var(--textarea-placeholder-color);
}

.textarea__element:disabled {
  cursor: not-allowed;
  resize: none;
}

.textarea__actions {
  position: absolute;
  top: var(--textarea-padding-block);
  right: var(--textarea-padding-inline);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  z-index: 1;
}

.textarea__action-button {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--textarea-text-color);
  cursor: pointer;
  border-radius: 4px;
  transition: color 160ms var(--animation-productive),
    background-color 160ms var(--animation-productive);
}

.textarea__action-button:hover:not(:disabled) {
  color: var(--textarea-focus-color);
}

.textarea__action-button:focus-visible {
  outline: 2px solid var(--textarea-focus-color);
  outline-offset: 2px;
}

.textarea__action-button--disabled,
.textarea__action-button:disabled {
  cursor: not-allowed;
  color: var(--disabled-text);
}

.textarea__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
}
.bot-edit {

	.bot-edit-form {
		display: grid;
		gap: var(--spacing-lg);
		grid-template: 'avatar name description' auto
			'cover cover cover' auto
			'details details details' 1fr
			/ auto auto 1fr;

		.textarea__field {
			height: 100%;
		}
	}

	.file-input.tiles {
		width: 100%;
		height: 200px;
		background: var(--info-muted-bg);

		.files {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			.file-upload-button {
				padding: var(--spacing-xs);
				height: auto;
				flex-direction: row;

				&.disabled {
					display: none;
				}
			}

			.file-item.preview {
				width: 100%;
				height: 100%;

				.file-preview {
					opacity: 1
				}

				.file-name {
					display: none;
				}
			}

		}



	}
}.bot-avatar {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);

	>img {
		border-radius: 999rem;
		border: 2px solid var(--line-colour-light);
		object-fit: cover;
	}

	>div {
		>:is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--font-family-heading);
			font-size: var(--typography-xxl);
			margin: 0 0 var(--spacing-xxs) 0;
		}

		>span {
			font-size: var(--typography-md);
			color: var(--text-secondary);
		}
	}
}
.file-input {
  input[type="file"] {
    display: none;
  }

  .file-input-label {
    display: block;
    margin-bottom: var(--spacing-xs);
  }

  .file-item {
    position: relative;
  }

  .file-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    z-index: 0;
  }

  .file-progress-bar {
    height: var(--spacing-xs);
    position: absolute;
    left: var(--spacing-xs);
    bottom: var(--spacing-xs);
    width: calc(100% - var(--spacing-xs) * 2);
    z-index: 1;
  }

  .file-remove-icon,
  .file-upload-success-icon,
  .file-upload-failed-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--spacing-xs);
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    z-index: 1;
  }

  .file-remove-icon {
    color: var(--primary-solid-bg);
    cursor: pointer;

    &:hover {
      color: var(--primary-solid-bg-hover);
    }

    &:active {
      color: var(--primary-solid-bg-active);
    }

    &.disabled {
      opacity: 0.5;
      user-select: none;
      cursor: not-allowed;
    }
  }

  .file-upload-success-icon {
    color: var(--success-solid-bg);
  }

  .file-upload-failed-icon {
    color: var(--error-solid-bg);
  }

  .drop-placeholder {
    cursor: pointer;
    border: 2px dashed var(--info-solid-bg) !important;

    &.drag-over {
      cursor: copy;
    }
  }

  .drop-placeholder:hover,
  .drop-placeholder.drag-over,
  .file-item:hover {
    background: color-mix(in srgb, var(--info-solid-bg-hover) 10%, transparent);
  }

  /* Disabled state */
  &.disabled {
    .file-input-label {
      color: var(--tertiary-500);
    }

    .drop-placeholder {
      cursor: not-allowed;
      color: var(--tertiary-500);
      border-color: var(--tertiary-600) !important;

      &:hover {
        background: transparent;
      }
    }
  }

  /* Size variants */
  &.file-input-size-xs {
    .file-input-label,
    .file-name {
      font-size: var(--typography-xs);
    }

    &.file-input-has-label {
      margin-top: 4px;
    }
  }

  &.file-input-size-sm {
    .file-input-label,
    .file-name {
      font-size: var(--typography-sm);
    }

    &.file-input-has-label {
      margin-top: 8px;
    }
  }

  &.file-input-size-md {
    .file-input-label,
    .file-name {
      font-size: var(--typography-md);
    }

    &.file-input-has-label {
      margin-top: 12px;
    }
  }

  &.file-input-size-lg {
    .file-input-label,
    .file-name {
      font-size: var(--typography-lg);
    }

    &.file-input-has-label {
      margin-top: 16px;
    }
  }

  /* List layout */
  &.list {
    .file-item {
      display: flex;
      gap: var(--spacing-xs);
      padding: var(--spacing-xs);
      align-items: center;
      width: 100%;
      max-width: 256px;
      border: 2px solid transparent;

      .file-name {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .file-upload-button {
      width: 100%;
      max-width: 256px;
      margin: var(--spacing-xs) 0;
    }
  }

  /* Tiles layout */
  &.tiles {
    .files {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
    }

    .file-item {
      position: relative;
      padding: var(--spacing-xs);
      padding-top: calc(16px + calc(var(--spacing-xs) * 2));
      gap: var(--spacing-xs);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 128px;
      height: 128px;

      .file-name {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &.preview .icon.file {
        visibility: hidden;
      }
    }

    .icon {
      &.file,
      &.file-add,
      &.hand-grab {
        font-size: var(--typography-lg);
      }
    }

    .file-upload-button {
      padding: var(--spacing-xs);
      padding-top: calc(16px + calc(var(--spacing-xs) * 2));
      gap: var(--spacing-xs);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 128px;
      height: 128px;
    }
  }
}

/* Dark theme overrides */
.theme-dark .file-input {
  .drop-placeholder:hover,
  .drop-placeholder.drag-over,
  .file-item:hover {
    background: var(--tertiary-400);
  }
}
.repository-credentials-modal {
	.modal-body {
		overflow: hidden;
	}

	.auto-zoom-button-container {
		display: none;
	}

	.force-graph-container {
		background: var(--bg-secondary);
	}
}.select-wrapper {
  /* Scoped styles for the Select component. Uses design tokens from the global token files.
     These tokens are defined under .theme-light and .theme-dark so the component will respond
     to theme changes. */
  --input-border-radius: 4px;
  --input-border-width: 1px;
  --input-border-color: var(--line-colour);
  --input-focus-color: var(--info-300);
  --input-text-color: var(--text-secondary);
  --input-placeholder-color: var(--text-placeholder);
  --input-icon-color: var(--text-secondary);
  --input-background-color: var(--textbox-bg-default);
  --input-padding-block: var(--spacing-xs);
  --input-padding-inline: var(--spacing-sm);
  --input-padding-inline-start: var(--input-padding-inline);
  --input-padding-inline-end: var(--input-padding-inline);
  --input-font-size: var(--typography-md);
  --icon-size: 16px;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: calc(100% - 4px);
  margin-left: 2px;
  font-size: var(--input-font-size);
  color: var(--input-text-color);

  .control {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--input-border-color);
    background-color: var(--input-background-color);
    transition: border-color 160ms var(--animation-productive),
      box-shadow 160ms var(--animation-productive);
    box-shadow: none;
    min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
    color: inherit;

    &:focus-visible {
      outline: none;
    }

    &.control--focused {
      border-color: var(--input-focus-color);
      box-shadow: inset 0 0 0 0.5px var(--input-focus-color);
      --input-background-color: var(--textbox-bg-active);
    }

    &.control--error {
      --input-border-color: var(--line-error);
    }

    &.disabled,
    &.read-only {
      --input-border-color: var(--line-disabled);
      --input-text-color: var(--disabled-text);
      --input-placeholder-color: var(--disabled-text);
      --input-icon-color: var(--disabled-text);
      --input-background-color: var(--textbox-bg-disabled);
      cursor: default;

      .selected-option {
        &:hover {
          cursor: auto;
        }
      }
    }

    &.read-only {
      .selected-option {
        color: var(--text-secondary);
      }
    }
  }

  .chevron-icon {
    &.up {
      transform: rotate(180deg);
    }
  }
}

.select-wrapper.size-xs {
  --input-padding-block: var(--spacing-xxs);
  --input-padding-inline: var(--spacing-xs);
  --input-font-size: var(--typography-sm);
  --icon-size: 14px;
}

.select-wrapper.size-sm {
  --input-padding-block: var(--spacing-xxs);
  --input-padding-inline: var(--spacing-xs);
  --input-font-size: var(--typography-sm);
}

.select-wrapper.size-lg {
  --input-padding-block: var(--spacing-sm);
  --input-padding-inline: var(--spacing-md);
  --input-font-size: var(--typography-lg);
  --icon-size: 20px;
}

/* Dropdown container used by the portal */
.select-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-secondary);
  margin-top: 2px;
  outline: none;
  max-height: 45vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0px 0px 8px 0px var(--drop-shadow);
  --option-padding-block: var(--input-padding-block, var(--spacing-xs));
  --option-padding-inline: var(--input-padding-inline, var(--spacing-sm));
  --option-font-size: var(--input-font-size, var(--typography-md));

  /* Scrollbar styling (WebKit) */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: var(--grey-medium);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--text-primary);
    border-radius: 4px;
  }

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--grey-heavy) var(--grey-medium);
}

.select-option-container {
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  color: var(--text-primary);
  gap: var(--spacing-xxs);
  padding-block: var(--option-padding-block);
  padding-inline: var(--option-padding-inline);
  font-size: var(--option-font-size);
  line-height: 1.25;

  &.size-xs,
  &.size-sm {
    --option-padding-block: var(--spacing-xxs);
    --option-padding-inline: var(--spacing-xs);
    --option-font-size: var(--typography-sm);
  }

  &.size-lg {
    --option-padding-block: var(--spacing-sm);
    --option-padding-inline: var(--spacing-md);
    --option-font-size: var(--typography-lg);
  }

  &.selected {
    background: var(--info-50);
  }

  &.highlighted {
    background: var(--info-100);
  }

  &:hover {
    background: var(--info-100);
    cursor: pointer;
  }
}

.theme-dark {
  .select-option-container {
    &.selected {
      background: var(--info-800);
    }

    &.highlighted {
      background: var(--info-700);
    }

    &:hover {
      background: var(--info-700);
    }
  }
}

/* Selected option (current selected row inside the control) */
.select-wrapper {
  .selected-option {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: var(--input-text-color);
    gap: var(--spacing-xs);
    padding-block: var(--input-padding-block);
    padding-inline-start: var(--input-padding-inline-start);
    padding-inline-end: var(--input-padding-inline-end);
    min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
    font-size: inherit;

    &:hover {
      cursor: pointer;
    }

    .icon {
      font-size: var(--icon-size);
      color: var(--input-icon-color);
      flex: 0 0 auto;
    }
  }
}

/* Search input used inside the selected-option when the select is searchable */
.select-search-input {
  width: 100%;
  border: none;
  outline: none;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit; /* inherit typography from the wrapper */
}

/* Inline spinner inside the options area when loading */
.select-inline-spinner {
  margin: var(--spacing-xl);
  flex-grow: 1;
  align-self: center;
  justify-self: center;
}

/* Empty options placeholder when there are no options */
.select-empty-options {
  flex-grow: 1;
  text-align: center;
  font-style: italic;
  color: var(--text-tertiary);
}

/* Validation errors container shown under the control */
.select-validation-errors {
  margin-top: var(--spacing-xs);
  color: var(--error-500);
  font-size: var(--typography-sm);
}

/* Current option wrapper inside the control */
.select-current-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
}

.select-display {
  flex-grow: 1;
  max-width: calc(100% - var(--spacing-md));
  min-width: 0;
  color: inherit;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  margin-left: -4px;
  position: absolute;
  width: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  top: 0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  bottom: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^=bottom] {
  padding-top: 10px;
}
.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^=top] {
  padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^=right] {
  padding-left: 8px;
}
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^=left] {
  padding-right: 8px;
}
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
.react-datepicker__week-number--keyboard-selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__week-number--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}
.react-datepicker__week-number--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .holiday-overlay,
.react-datepicker__month-text--holidays .holiday-overlay,
.react-datepicker__quarter-text--holidays .holiday-overlay,
.react-datepicker__year-text--holidays .holiday-overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:hover,
.react-datepicker__month-text--holidays:hover,
.react-datepicker__quarter-text--holidays:hover,
.react-datepicker__year-text--holidays:hover {
  background-color: #cf5300;
}
.react-datepicker__day--holidays:hover .holiday-overlay,
.react-datepicker__month-text--holidays:hover .holiday-overlay,
.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
.react-datepicker__year-text--holidays:hover .holiday-overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #bad9f1;
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
/* DatePicker Portal Styling */
.date-picker-portal {
  z-index: 800;
  position: relative;

  .react-datepicker {
    border: none;
    border-radius: unset;
    font-family: var(--font-family);
    outline: none;
    background: var(--tertiary-50);
    color: var(--tertiary-800);
    -webkit-box-shadow: 0px 0px 8px 0px var(--tertiary-300);
    box-shadow: 0px 0px 8px 0px var(--tertiary-300);
  }

  .react-datepicker__header {
    border-radius: unset;
    border: none;
    background: var(--tertiary-50);

    .react-datepicker__current-month,
    .react-datepicker-time__header,
    .react-datepicker-year-header {
      color: var(--tertiary-800);
      margin: 4px 0;
      font-weight: 400;
    }

    .react-datepicker__day-name,
    .react-datepicker__day,
    .react-datepicker__time-name {
      margin-top: 14px;
      font-weight: 700;
    }
  }

  .react-datepicker__day-name,
  .react-datepicker__day,
  .react-datepicker__time-name {
    color: var(--tertiary-800);
    margin: 0;
    padding: 0.2rem;
    box-sizing: content-box;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border: 1px solid transparent;
  }

  .react-datepicker__month-container {
    background: var(--tertiary-50);
  }

  .react-datepicker__day:hover,
  .react-datepicker__month-text:hover,
  .react-datepicker__quarter-text:hover,
  .react-datepicker__year-text:hover {
    border-radius: unset;
    background: none;
    border: 1px solid var(--primary-500);
  }

  .react-datepicker__day--today {
    position: relative;
    border-radius: unset;
    background: none;
    color: var(--primary-500);

    &:after {
      content: ".";
      position: absolute;
      bottom: 0;
      width: calc(100% - 0.4rem);
      display: block;
      text-align: center;
      line-height: 1;
      font-size: 24px;
      font-weight: bold;
    }
  }

  .react-datepicker__day--in-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--in-range,
  .react-datepicker__day--in-selecting-range,
  .react-datepicker__quarter-text--in-selecting-range,
  .react-datepicker__month-text--in-selecting-range,
  .react-datepicker__year-text--in-selecting-range {
    color: var(--tertiary-800);
    border-radius: unset;
    background: var(--tertiary-200);
  }

  .react-datepicker__day--selected,
  .react-datepicker__month-text--selected,
  .react-datepicker__quarter-text--selected,
  .react-datepicker__year-text--selected,
  .react-datepicker__day--range-start,
  .react-datepicker__month--range-start,
  .react-datepicker__quarter--range-start,
  .react-datepicker__year--range-start,
  .react-datepicker__day--range-end,
  .react-datepicker__month--range-end,
  .react-datepicker__quarter--range-end,
  .react-datepicker__year--range-end {
    border-radius: unset;
    background: var(--primary-solid-bg);
    color: white;
  }

  .react-datepicker__day--outside-month {
    opacity: 0.5;
  }

  .react-datepicker__navigation {
    margin: 4px 0;
  }

  .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow,
  .react-datepicker__navigation-icon::before {
    border-color: var(--tertiary-800);
  }
}

/* Dark theme overrides */
.theme-dark .date-picker-portal {
  .react-datepicker {
    outline: 2px solid var(--tertiary-300);
    background: var(--tertiary-300);
    color: var(--tertiary-800);
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .react-datepicker__header {
    background: var(--tertiary-300);
  }

  .react-datepicker__month-container {
    background: var(--tertiary-300);
  }
}

.react-datepicker-wrapper {
  display: block;
}
.radio-container {
  /* Size variants */
  &.radio-size-xs {
    --outer-size: 16px;
    --inner-size: 8px;
  }

  &.radio-size-sm {
    --outer-size: 16px;
    --inner-size: 8px;
  }

  &.radio-size-md {
    --outer-size: 24px;
    --inner-size: 14px;
  }

  &.radio-size-lg {
    --outer-size: 32px;
    --inner-size: 20px;
  }
}

.radio-checkmark-container {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-md);
}

.radio-input {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  width: var(--outer-size);
  height: var(--outer-size);
  border: 2px solid var(--tertiary-800);
  color: var(--tertiary-800);

  &:hover {
    border: 2px solid var(--info-500);
  }

  &:focus {
    border: 2px solid var(--primary-500);
  }

  &:checked {
    &::after {
      content: "";
      position: absolute;
      background: var(--tertiary-800);
      width: var(--inner-size);
      height: var(--inner-size);
      top: calc(calc(var(--outer-size) - var(--inner-size)) / 2);
      left: calc(calc(var(--outer-size) - var(--inner-size)) / 2);
      border-radius: 50%;
    }
  }

  &:disabled {
    border: 2px solid var(--tertiary-500);
    color: var(--tertiary-500);
    cursor: not-allowed;

    &:hover {
      border: 2px solid var(--tertiary-400);
    }

    &:focus {
      border: 2px solid var(--tertiary-400);
    }

    &:checked {
      &::after {
        background: var(--tertiary-500);
      }
    }
  }
}

.radio-label {
  color: var(--tertiary-800);
  cursor: pointer;
  align-self: center;
  line-height: 1;

  &.disabled {
    color: var(--tertiary-500);
    cursor: not-allowed;
  }
}

.radio-validation-errors {
  margin-top: var(--spacing-xs);
  color: var(--error-solid-bg);
  font-size: var(--font-size-sm);
}
.radio-group-container {
  width: 100%;
}

.radio-group-label {
  /* Size variants for label font size */
  &.radio-group-label-size-xs {
    font-size: var(--font-size-xs);
  }

  &.radio-group-label-size-sm {
    font-size: var(--font-size-sm);
  }

  &.radio-group-label-size-md {
    font-size: var(--font-size-md);
  }

  &.radio-group-label-size-lg {
    font-size: var(--font-size-lg);
  }
}

.radio-group {
  width: 100%;
  display: grid;
  margin: var(--spacing-xl) 0;

  /* Layout variants */
  &.radio-group-layout-vertical {
    grid-template-rows: repeat(var(--radio-count), 1fr);
  }

  &.radio-group-layout-horizontal {
    grid-template-columns: repeat(var(--radio-count), 1fr);
  }

  /* Gap size variants */
  &.radio-group-size-xs {
    gap: var(--spacing-xs);
  }

  &.radio-group-size-sm {
    gap: var(--spacing-sm);
  }

  &.radio-group-size-md {
    gap: var(--spacing-md);
  }

  &.radio-group-size-lg {
    gap: var(--spacing-lg);
  }

  /* Adjust top margin when there's a label */
  &.radio-group-has-label {
    margin-top: var(--spacing-md);
  }
}
.form {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  align-self: center;
  max-width: var(--breakpoint-xxxs);
}
.pin-input {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-md);

  input {
    text-align: center;
    padding: 0;
  }

  &.pin-input-lg input {
    width: 2em;
    height: 2em;
    font-size: 1.5em;
    margin: 0 0.5em;
  }

  &.pin-input-md input {
    width: 1.8em;
    height: 2em;
    font-size: 1.25em;
    line-height: 1.5em;
    margin: 0 0.3em;
  }

  &.pin-input-sm input {
    width: 1.5em;
    height: 1.5em;
    font-size: 1em;
    line-height: 1.5em;
    margin: 0 0.2em;
  }
}
.bot-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
	padding: var(--spacing-xxl);

	.title,
	.info {
		display: flex;
		flex-direction: row;
		gap: var(--spacing-lg);
		justify-content: space-between;
		align-items: flex-start;
	}

	.title {
		align-items: center;
	}

	.details-tab .wmde-markdown {
		background: none;
	}
}.bot-stats {
	color: var(--text-secondary);
	font-size: var(--typography-lg);

	tr:first-child td {
		border-top: 1px solid var(--line-colour-light);
	}

	td,
	th {
		border-bottom: 1px solid var(--line-colour-light);
		padding: var(--spacing-xxs) 0;
		font-weight: normal;
		text-align: left;
		min-height: 38px;
	}

	th {
		text-transform: uppercase;
		font-weight: bold;
		font-size: var(--typography-md);
		padding: var(--spacing-sm) 0;
	}

	td {
		&:last-child {
			text-align: right;
		}

		vertical-align: middle;
	}

	a {
		display: inline-block;
		font-size: var(--typography-sm);
	}

	.rating-and-installs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-lg);
	}

	.installs {
		display: flex;
		align-items: center;
		gap: var(--spacing-xxs);
		margin-top: var(--spacing-xxs);
		font-size: var(--typography-lg);
	}

	.summary {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
		justify-content: center;
		align-items: flex-end;

		p {
			margin: 0;
			font-size: var(--typography-sm);
			color: var(--text-primary);
			text-align: right;
		}
	}

	.bot-features {
		justify-content: flex-end;
	}


}.bot-features {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	justify-content: flex-start;
	align-items: center;
	flex-shrink: 0;
	align-self: stretch;
	align-items: center;
	gap: var(--spacing-xs);
	padding: 0;
	margin: 0;

	li {
		list-style: none;
		display: inherit;
		padding: var(--spacing-xxs);
		margin: 0;
		display: flex;
		align-items: center;
		gap: var(--spacing-xxs);

		&:hover {
			border-radius: var(--radius-md);
			background: var(--bg-tertiary);
			cursor: pointer;
		}

		.material-symbols-rounded {
			display: inherit;
			align-items: center;
			font-size: 1.2rem;
		}

		span {
			box-sizing: border-box;
		}
	}


}.star-rating {

	display: flex;
	gap: var(--spacing-xxs);
	align-items: center;
	font-size: var(--typography-lg);

	.value {
		color: var(--text-primary);
	}

	.total-ratings {
		color: var(--text-secondary);
	}

	.rating-stars {
		display: flex;
		align-items: center;
	}

	&.clickable {
		.rating-star:hover {
			cursor: pointer;

			.star-outline {
				stroke-width: 3px;
			}
		}
	}
}

.rating-star {
	--width: 100%;
	color: var(--caution-solid-bg);

	.star-outline {
		stroke-width: 1px;
		stroke: var(--caution-outline-text-icon);
	}

	.star-fill {
		fill: currentColor;
		clip-path: inset(0 calc(100% - var(--width, 0%)) 0 0);
	}
}.bot-list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);

	.bot-card {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 25%;
		min-width: 300px;
		max-width: 600px;

	}
}.bot-card {
	display: flex;
	flex-direction: column;
	min-width: 15rem;
	padding: var(--spacing-lg);
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--spacing-sm);
	border-radius: var(--radius-md, 0.5rem);
	border: 1px solid var(--line-colour-light);
	background: var(--bg-secondary);
	color: var(--text-primary);
	box-sizing: border-box;

	.title {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		text-align: left;
	}

	.stats-span {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		gap: var(--spacing-sm);

		.installs {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			gap: var(--spacing-xxs);
			font-size: var(--typography-md);
			color: var(--text-primary);

			.material-symbols-rounded {
				color: var(--text-info);
				font-size: 1rem;
			}
		}
	}

	&:is(a) {
		text-decoration: none;
		color: inherit;

		&:hover {
			background: var(--info-ghost-bg-hover);
			border-color: var(--line-colour);
			color: inherit;
			cursor: pointer;
		}
	}

	.description {
		margin: 0;
		font-size: var(--typography-md);
		color: var(--text-secondary);
		text-align: left;
		flex: 1;
	}

	.actions {
		grid-area: actions;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
		gap: var(--spacing-xs);

		.action-btn {
			display: inherit;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: var(--spacing-sm);
			align-self: stretch;

			.material-symbols-rounded {
				font-size: var(--typography-lg);
			}

		}
	}
}
.bot-banner {
	width: 100%;
	height: 250px;
	justify-content: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	&.unset {
		>div {
			backdrop-filter: blur(10px);

			img {
				display: block;
				width: auto;
				mask-image: linear-gradient(to right, black 90%, transparent 100%);
				mask-repeat: no-repeat;
				mask-size: 100% 100%;
			}
		}
	}

}.RatingModal[data-cid="30859666-c856-4c0c-81ce-e6d5cc541f92"] {
	.star-rating {
		.rating-stars {
			gap: var(--spacing-xs);
		}

		span.value {
			display: none;
		}
	}

	.notice {
		color: var(--text-tertiary);
		font-size: var(--typography-sm);
	}

	.rating-star {
		fill: 'var(--caution-solid-bg)';
		color: 'var(--caution-solid-bg)';
	}
}.release-notes {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	padding: var(--spacing-xxl);

	.wmde-markdown {
		background: none !important;
	}
}.organisation-profile {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
	padding: var(--spacing-xxl);

	>.title {
		display: flex;
		flex-direction: row;
		gap: var(--spacing-lg);
		justify-content: space-between;
		align-items: center;

		img {
			border-radius: 99999px;
			height: 128px;
			width: 128px;
			object-fit: cover;
		}

		h1 {
			flex-grow: 1;
			margin: 0;
			font-size: var(--typography-xxxl);
			font-family: var(--font-family-heading);
		}
	}

	h2 {
		margin: 0 0 var(--spacing-md) 0;
		font-family: var(--font-family-heading);
	}

	.meta {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xxs);
		align-items: flex-end;
		color: var(--text-tertiary);
	}

	.wmde-markdown {
		background: none !important;
	}
}.organisation-side-panel {
	height: 100%;
	padding: var(--spacing-md);
	padding-top: var(--spacing-lg);
	background: var(--bg-secondary);
	border-right: 1px solid var(--line-colour-light);
}