@charset "UTF-8";
:root {
  --blue-10: rgba(13, 160, 224, 0.12);
  --blue-30: #ABE6FF;
  --blue-40: #80D9FF;
  --blue-50: #40C3FB;
  --blue-60: #0DA0E0;
  --blue-70: #0A74A2;
  --brand-10: rgba(31, 101, 235, 0.12);
  --brand-30: #C9DDFB;
  --brand-40: #8EB7F6;
  --brand-60: #1F65EB;
  --brand-70: #1248B7;
  --brand-80: #0B3383;
  --bronze-10: rgba(161, 90, 90, 0.12);
  --bronze-40: #E4A6A6;
  --bronze-60: #A15A5A;
  --bronze-70: #793030;
  --brown-30: #CDB7AF;
  --brown-40: #AA8C81;
  --brown-60: #795548;
  --brown-70: #58382C;
  --cyan-60: #0C97AD;
  --cyan-70: #085A67;
  --gold-30: #FFE3B2;
  --gold-40: #FFCE79;
  --gold-50: #FFBD4C;
  --gold-60: #F6A925;
  --gold-70: #B67B14;
  --gray-00: #FFFFFF;
  --gray-10: #F8F8F8;
  --gray-20: #EAEAEA;
  --gray-30: #CBCBCB;
  --gray-40: #AEAEAE;
  --gray-50: #909090;
  --gray-60: #757575;
  --gray-70: #575757;
  --gray-80: #3D3D3D;
  --gray-85: #313131;
  --gray-90: #292929;
  --gray-100: #101010;
  --gray-cold-10: rgba(1, 19, 52, 0.03);
  --gray-cold-20: rgba(1, 19, 52, 0.06);
  --gray-cold-30: rgba(1, 19, 52, 0.1);
  --gray-cold-40: rgba(1, 19, 52, 0.14);
  --gray-cold-50: rgba(1, 19, 52, 0.2);
  --green-10: rgba(13, 136, 63, 0.12);
  --green-30: #9CE6B9;
  --green-40: #57C784;
  --green-50: #26A859;
  --green-60: #119748;
  --green-70: #08672E;
  --indigo-20: #E8EAF6;
  --indigo-30: #D5DBFB;
  --indigo-40: #AFBBF9;
  --indigo-50: #778BEA;
  --indigo-60: #3F53B5;
  --indigo-70: #2B3B8E;
  --indigo-90: #060E38;
  --lime-40: #D9EF8D;
  --lime-60: #B2DE1C;
  --lime-70: #96B91E;
  --magenta-40: #F6AABF;
  --magenta-60: #E82B5E;
  --magenta-70: #B20E3A;
  --orange-40: #F6A77A;
  --orange-50: #F08344;
  --orange-60: #EF6516;
  --orange-70: #CA500A;
  --peach-30: #FFD9CE;
  --peach-40: #FFBDA8;
  --peach-60: #FC7F58;
  --peach-70: #C85735;
  --pink-30: #F6CCFD;
  --pink-40: #E4A1F5;
  --pink-60: #BF3BE0;
  --pink-70: #8E27A7;
  --purple-30: #D4C1F5;
  --purple-40: #B592F1;
  --purple-60: #673AB7;
  --purple-70: #4C2392;
  --red-10: rgba(222, 51, 35, 0.12);
  --red-30: #FAB6AF;
  --red-50: #F34E3F;
  --red-60: #DE3323;
  --red-70: #BB1A0B;
  --red-80: #911206;
  --teal-10: rgba(13, 141, 129, 0.12);
  --teal-30: #A9EFE8;
  --teal-40: #6CE2D6;
  --teal-50: #26C1B1;
  --teal-60: #0D8D81;
  --teal-70: #08675D;
  --yellow-10: rgba(240, 203, 18, 0.12);
  --yellow-50: #FADC43;
  --yellow-60: #F0CB12;
  --yellow-70: #C2A308;
  --color-red_200: #FFF4F4;
  --color-red_300: #F5BCBC;
  --color-red_400: #FF8080;
  --color-red_500: #F44336;
  --color-red_600: #E10707;
  --complete-bg: #BED59E;
  --complete-border-color: #EEF9E0;
  --complete-color: #5D970C;
  --warning-bg: #DE5A5A;
  --warning-border-color: #F0BFBF;
  --warning-color: var(--color-red_500);
  --edit-color: #159688;
  --current-color: #23cf80;
  --bg-default: #FFFFFF;
  /* #region Скроллбар */
  --scrollbar-color: rgba(255, 255, 255, 0);
  --scrollbar-color--hover: rgba(246, 246, 246, 0.15);
  --scrollbar-color--wrapper-hover: var(--background-surface-weaker);
  --scrollbar-thumb-color: rgba(246, 246, 246, 0);
  --scrollbar-thumb-color--wrapper-hover: rgba(80, 80, 80, 0.3);
  --scrollbar-thumb-color--hover: rgba(80, 80, 80, 0.5);
  --scrollbar-thumb-color--active: rgba(80, 80, 80, 0.8);
  --scrollbar-width: 8px;
  --scrollbar-border-invisible: 2px solid transparent;
  --scrollbar-border: 2px solid var(--scrollbar-color--wrapper-hover);
  --scrollbar-radius: 3px;
  /* #endregion */
  --border-color: var(--color-secondary_600);
  --border-color_dark: var(--color-text_200);
  --radius: 6px;
  --radius-small: 3px;
  --radius-big: 12px;
  --focus: 0 0 0 3px var(--color-primary_300);
  --box-shadow-menu-modal: 0px 46px 80px rgba(0, 0, 0, 0.13),
                           0px 17px 29px rgba(0, 0, 0, 0.09),
                           0px 8px 14px rgba(0, 0, 0, 0.07),
                           0px 4px 7px rgba(0, 0, 0, 0.06),
                           0px 2px 3px rgba(0, 0, 0, 0.04);
  --modal-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%),
                  0 24px 38px 3px rgb(0 0 0 / 14%),
                  0 9px 46px 8px rgb(0 0 0 / 12%);
  --box-shadow: 0px 16.7908px 29.2013px rgba(0, 0, 0, 0.0896976),
                0px 3.99607px 6.94968px rgba(0, 0, 0, 0.0576822);
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
figure,
figcaption,
dl,
dd {
  margin: 0;
}

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

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background-color: transparent;
  border: none;
  padding: 0;
  text-align: left;
}

input[type=radio] {
  background-color: var(--foreground-contrast);
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select,
button {
  appearance: none;
}

textarea {
  resize: none;
}

button {
  cursor: pointer;
}

th {
  font-weight: inherit;
}

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

img {
  max-width: 100%;
  display: block;
  position: relative;
  color: transparent;
}
img::before, img::after {
  content: "";
  position: absolute;
}
img::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-surface-weaker);
  z-index: 1;
}
img::after {
  top: 50%;
  right: 50%;
  z-index: 2;
  transform: translate(50%, -50%);
  width: 24px;
  max-width: 60%;
  height: 24px;
  max-height: 60%;
  mask: url("img/UnknownImage.svg") center/cover no-repeat;
  -webkit-mask: url("img/UnknownImage.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
}

li {
  list-style: none;
}

ul,
ol {
  padding: 0;
}

cite {
  display: block;
  font-style: normal;
}

address {
  font-style: normal;
}

label {
  cursor: inherit;
}

html {
  height: 100%;
}

body {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  --bg-under-text: var(--background-surface-weakest);
  --icon-sprite-size: 24px;
  --side-menu-width: var(--sidebar-compact);
  font-family: var(--font-family);
  color: var(--foreground-stronger);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--background-surface-weakest);
  overflow: hidden;
}
body:has(.side-menu--expanded) {
  --side-menu-width: var(--sidebar-expanded);
}

.modal-open {
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
  pointer-events: none;
}

.hidden-box {
  display: none !important;
}

#app {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  flex-grow: 1;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  padding-left: var(--side-menu-width);
  will-change: padding-left;
  transition: padding-left 0.3s;
}
.content:has(.offpanel--page-root-parent.offpanel--left.offpanel--absolute.offpanel--show) {
  padding-left: calc(280px + var(--side-menu-width));
}

.scroll-page-trigger {
  display: flex;
  flex-direction: column;
}

.key-value-pair {
  display: flex;
  gap: 4px;
}
.key-value-pair:hover > .button--icon {
  opacity: 1;
}
.key-value-pair > .text:first-child {
  flex-grow: 1;
  display: flex;
  gap: 4px;
}
.key-value-pair > .text:first-child::after {
  content: "";
  min-width: 16px;
  border-top: 1px dashed var(--color-text_300);
  flex-grow: 1;
  margin-top: 12px;
  opacity: 0.5;
}
.key-value-pair > .button--icon {
  opacity: 0;
  margin-top: -4px;
  margin-right: -24px;
}
.key-value-pair .b-tooltip {
  margin-top: -4px;
  margin-left: -4px;
  margin-right: -4px;
}

.key-value-pair--small > .text:first-child::after {
  content: "";
  margin-top: 10px;
}

.key-value-pair__old-value {
  color: var(--color-text_300);
  text-decoration: line-through;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.5;
}
.key-value-pair__old-value::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  mask: url("./../_content/BlazorWebKit/img/ArrowNext.svg") center/cover no-repeat;
  -webkit-mask: url("./../_content/BlazorWebKit/img/ArrowNext.svg") center/cover no-repeat;
  background-color: var(--foreground-stronger);
  opacity: 1;
}

.invisible-element-0 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-0:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-0 {
  will-change: opacity;
}

.target-for-invisible-element-0:hover .invisible-element-0, .target-for-invisible-element-0:focus-within .invisible-element-0 {
  opacity: 1;
}

.invisible-element-1 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-1:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-1 {
  will-change: opacity;
}

.target-for-invisible-element-1:hover .invisible-element-1, .target-for-invisible-element-1:focus-within .invisible-element-1 {
  opacity: 1;
}

.invisible-element-2 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-2:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-2 {
  will-change: opacity;
}

.target-for-invisible-element-2:hover .invisible-element-2, .target-for-invisible-element-2:focus-within .invisible-element-2 {
  opacity: 1;
}

.invisible-element-3 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-3:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-3 {
  will-change: opacity;
}

.target-for-invisible-element-3:hover .invisible-element-3, .target-for-invisible-element-3:focus-within .invisible-element-3 {
  opacity: 1;
}

.invisible-element-4 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-4:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-4 {
  will-change: opacity;
}

.target-for-invisible-element-4:hover .invisible-element-4, .target-for-invisible-element-4:focus-within .invisible-element-4 {
  opacity: 1;
}

.invisible-element-5 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-5:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-5 {
  will-change: opacity;
}

.target-for-invisible-element-5:hover .invisible-element-5, .target-for-invisible-element-5:focus-within .invisible-element-5 {
  opacity: 1;
}

.invisible-element-6 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-6:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-6 {
  will-change: opacity;
}

.target-for-invisible-element-6:hover .invisible-element-6, .target-for-invisible-element-6:focus-within .invisible-element-6 {
  opacity: 1;
}

.invisible-element-7 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-7:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-7 {
  will-change: opacity;
}

.target-for-invisible-element-7:hover .invisible-element-7, .target-for-invisible-element-7:focus-within .invisible-element-7 {
  opacity: 1;
}

.invisible-element-8 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-8:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-8 {
  will-change: opacity;
}

.target-for-invisible-element-8:hover .invisible-element-8, .target-for-invisible-element-8:focus-within .invisible-element-8 {
  opacity: 1;
}

.invisible-element-9 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-9:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-9 {
  will-change: opacity;
}

.target-for-invisible-element-9:hover .invisible-element-9, .target-for-invisible-element-9:focus-within .invisible-element-9 {
  opacity: 1;
}

.invisible-element-10 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-10:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-10 {
  will-change: opacity;
}

.target-for-invisible-element-10:hover .invisible-element-10, .target-for-invisible-element-10:focus-within .invisible-element-10 {
  opacity: 1;
}

.invisible-element-11 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-11:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-11 {
  will-change: opacity;
}

.target-for-invisible-element-11:hover .invisible-element-11, .target-for-invisible-element-11:focus-within .invisible-element-11 {
  opacity: 1;
}

.invisible-element-12 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-12:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-12 {
  will-change: opacity;
}

.target-for-invisible-element-12:hover .invisible-element-12, .target-for-invisible-element-12:focus-within .invisible-element-12 {
  opacity: 1;
}

.invisible-element-13 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-13:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-13 {
  will-change: opacity;
}

.target-for-invisible-element-13:hover .invisible-element-13, .target-for-invisible-element-13:focus-within .invisible-element-13 {
  opacity: 1;
}

.invisible-element-14 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-14:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-14 {
  will-change: opacity;
}

.target-for-invisible-element-14:hover .invisible-element-14, .target-for-invisible-element-14:focus-within .invisible-element-14 {
  opacity: 1;
}

.invisible-element-15 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-15:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-15 {
  will-change: opacity;
}

.target-for-invisible-element-15:hover .invisible-element-15, .target-for-invisible-element-15:focus-within .invisible-element-15 {
  opacity: 1;
}

.invisible-element-16 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-16:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-16 {
  will-change: opacity;
}

.target-for-invisible-element-16:hover .invisible-element-16, .target-for-invisible-element-16:focus-within .invisible-element-16 {
  opacity: 1;
}

.invisible-element-17 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-17:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-17 {
  will-change: opacity;
}

.target-for-invisible-element-17:hover .invisible-element-17, .target-for-invisible-element-17:focus-within .invisible-element-17 {
  opacity: 1;
}

.invisible-element-18 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-18:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-18 {
  will-change: opacity;
}

.target-for-invisible-element-18:hover .invisible-element-18, .target-for-invisible-element-18:focus-within .invisible-element-18 {
  opacity: 1;
}

.invisible-element-19 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-19:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-19 {
  will-change: opacity;
}

.target-for-invisible-element-19:hover .invisible-element-19, .target-for-invisible-element-19:focus-within .invisible-element-19 {
  opacity: 1;
}

.invisible-element-20 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-20:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-20 {
  will-change: opacity;
}

.target-for-invisible-element-20:hover .invisible-element-20, .target-for-invisible-element-20:focus-within .invisible-element-20 {
  opacity: 1;
}

.invisible-element-21 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-21:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-21 {
  will-change: opacity;
}

.target-for-invisible-element-21:hover .invisible-element-21, .target-for-invisible-element-21:focus-within .invisible-element-21 {
  opacity: 1;
}

.invisible-element-22 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-22:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-22 {
  will-change: opacity;
}

.target-for-invisible-element-22:hover .invisible-element-22, .target-for-invisible-element-22:focus-within .invisible-element-22 {
  opacity: 1;
}

.invisible-element-23 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-23:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-23 {
  will-change: opacity;
}

.target-for-invisible-element-23:hover .invisible-element-23, .target-for-invisible-element-23:focus-within .invisible-element-23 {
  opacity: 1;
}

.invisible-element-24 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-24:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-24 {
  will-change: opacity;
}

.target-for-invisible-element-24:hover .invisible-element-24, .target-for-invisible-element-24:focus-within .invisible-element-24 {
  opacity: 1;
}

.invisible-element-25 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-25:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-25 {
  will-change: opacity;
}

.target-for-invisible-element-25:hover .invisible-element-25, .target-for-invisible-element-25:focus-within .invisible-element-25 {
  opacity: 1;
}

.invisible-element-26 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-26:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-26 {
  will-change: opacity;
}

.target-for-invisible-element-26:hover .invisible-element-26, .target-for-invisible-element-26:focus-within .invisible-element-26 {
  opacity: 1;
}

.invisible-element-27 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-27:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-27 {
  will-change: opacity;
}

.target-for-invisible-element-27:hover .invisible-element-27, .target-for-invisible-element-27:focus-within .invisible-element-27 {
  opacity: 1;
}

.invisible-element-28 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-28:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-28 {
  will-change: opacity;
}

.target-for-invisible-element-28:hover .invisible-element-28, .target-for-invisible-element-28:focus-within .invisible-element-28 {
  opacity: 1;
}

.invisible-element-29 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-29:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-29 {
  will-change: opacity;
}

.target-for-invisible-element-29:hover .invisible-element-29, .target-for-invisible-element-29:focus-within .invisible-element-29 {
  opacity: 1;
}

.invisible-element-30 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-30:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-30 {
  will-change: opacity;
}

.target-for-invisible-element-30:hover .invisible-element-30, .target-for-invisible-element-30:focus-within .invisible-element-30 {
  opacity: 1;
}

.invisible-element-31 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-31:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-31 {
  will-change: opacity;
}

.target-for-invisible-element-31:hover .invisible-element-31, .target-for-invisible-element-31:focus-within .invisible-element-31 {
  opacity: 1;
}

.invisible-element-32 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-32:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-32 {
  will-change: opacity;
}

.target-for-invisible-element-32:hover .invisible-element-32, .target-for-invisible-element-32:focus-within .invisible-element-32 {
  opacity: 1;
}

.invisible-element-33 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-33:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-33 {
  will-change: opacity;
}

.target-for-invisible-element-33:hover .invisible-element-33, .target-for-invisible-element-33:focus-within .invisible-element-33 {
  opacity: 1;
}

.invisible-element-34 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-34:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-34 {
  will-change: opacity;
}

.target-for-invisible-element-34:hover .invisible-element-34, .target-for-invisible-element-34:focus-within .invisible-element-34 {
  opacity: 1;
}

.invisible-element-35 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-35:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-35 {
  will-change: opacity;
}

.target-for-invisible-element-35:hover .invisible-element-35, .target-for-invisible-element-35:focus-within .invisible-element-35 {
  opacity: 1;
}

.invisible-element-36 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-36:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-36 {
  will-change: opacity;
}

.target-for-invisible-element-36:hover .invisible-element-36, .target-for-invisible-element-36:focus-within .invisible-element-36 {
  opacity: 1;
}

.invisible-element-37 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-37:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-37 {
  will-change: opacity;
}

.target-for-invisible-element-37:hover .invisible-element-37, .target-for-invisible-element-37:focus-within .invisible-element-37 {
  opacity: 1;
}

.invisible-element-38 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-38:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-38 {
  will-change: opacity;
}

.target-for-invisible-element-38:hover .invisible-element-38, .target-for-invisible-element-38:focus-within .invisible-element-38 {
  opacity: 1;
}

.invisible-element-39 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-39:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-39 {
  will-change: opacity;
}

.target-for-invisible-element-39:hover .invisible-element-39, .target-for-invisible-element-39:focus-within .invisible-element-39 {
  opacity: 1;
}

.invisible-element-40 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-40:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-40 {
  will-change: opacity;
}

.target-for-invisible-element-40:hover .invisible-element-40, .target-for-invisible-element-40:focus-within .invisible-element-40 {
  opacity: 1;
}

.invisible-element-41 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-41:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-41 {
  will-change: opacity;
}

.target-for-invisible-element-41:hover .invisible-element-41, .target-for-invisible-element-41:focus-within .invisible-element-41 {
  opacity: 1;
}

.invisible-element-42 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-42:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-42 {
  will-change: opacity;
}

.target-for-invisible-element-42:hover .invisible-element-42, .target-for-invisible-element-42:focus-within .invisible-element-42 {
  opacity: 1;
}

.invisible-element-43 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-43:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-43 {
  will-change: opacity;
}

.target-for-invisible-element-43:hover .invisible-element-43, .target-for-invisible-element-43:focus-within .invisible-element-43 {
  opacity: 1;
}

.invisible-element-44 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-44:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-44 {
  will-change: opacity;
}

.target-for-invisible-element-44:hover .invisible-element-44, .target-for-invisible-element-44:focus-within .invisible-element-44 {
  opacity: 1;
}

.invisible-element-45 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-45:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-45 {
  will-change: opacity;
}

.target-for-invisible-element-45:hover .invisible-element-45, .target-for-invisible-element-45:focus-within .invisible-element-45 {
  opacity: 1;
}

.invisible-element-46 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-46:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-46 {
  will-change: opacity;
}

.target-for-invisible-element-46:hover .invisible-element-46, .target-for-invisible-element-46:focus-within .invisible-element-46 {
  opacity: 1;
}

.invisible-element-47 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-47:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-47 {
  will-change: opacity;
}

.target-for-invisible-element-47:hover .invisible-element-47, .target-for-invisible-element-47:focus-within .invisible-element-47 {
  opacity: 1;
}

.invisible-element-48 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-48:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-48 {
  will-change: opacity;
}

.target-for-invisible-element-48:hover .invisible-element-48, .target-for-invisible-element-48:focus-within .invisible-element-48 {
  opacity: 1;
}

.invisible-element-49 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-49:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-49 {
  will-change: opacity;
}

.target-for-invisible-element-49:hover .invisible-element-49, .target-for-invisible-element-49:focus-within .invisible-element-49 {
  opacity: 1;
}

.invisible-element-50 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-50:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-50 {
  will-change: opacity;
}

.target-for-invisible-element-50:hover .invisible-element-50, .target-for-invisible-element-50:focus-within .invisible-element-50 {
  opacity: 1;
}

.invisible-element-51 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-51:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-51 {
  will-change: opacity;
}

.target-for-invisible-element-51:hover .invisible-element-51, .target-for-invisible-element-51:focus-within .invisible-element-51 {
  opacity: 1;
}

.invisible-element-52 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-52:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-52 {
  will-change: opacity;
}

.target-for-invisible-element-52:hover .invisible-element-52, .target-for-invisible-element-52:focus-within .invisible-element-52 {
  opacity: 1;
}

.invisible-element-53 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-53:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-53 {
  will-change: opacity;
}

.target-for-invisible-element-53:hover .invisible-element-53, .target-for-invisible-element-53:focus-within .invisible-element-53 {
  opacity: 1;
}

.invisible-element-54 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-54:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-54 {
  will-change: opacity;
}

.target-for-invisible-element-54:hover .invisible-element-54, .target-for-invisible-element-54:focus-within .invisible-element-54 {
  opacity: 1;
}

.invisible-element-55 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-55:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-55 {
  will-change: opacity;
}

.target-for-invisible-element-55:hover .invisible-element-55, .target-for-invisible-element-55:focus-within .invisible-element-55 {
  opacity: 1;
}

.invisible-element-56 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-56:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-56 {
  will-change: opacity;
}

.target-for-invisible-element-56:hover .invisible-element-56, .target-for-invisible-element-56:focus-within .invisible-element-56 {
  opacity: 1;
}

.invisible-element-57 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-57:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-57 {
  will-change: opacity;
}

.target-for-invisible-element-57:hover .invisible-element-57, .target-for-invisible-element-57:focus-within .invisible-element-57 {
  opacity: 1;
}

.invisible-element-58 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-58:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-58 {
  will-change: opacity;
}

.target-for-invisible-element-58:hover .invisible-element-58, .target-for-invisible-element-58:focus-within .invisible-element-58 {
  opacity: 1;
}

.invisible-element-59 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-59:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-59 {
  will-change: opacity;
}

.target-for-invisible-element-59:hover .invisible-element-59, .target-for-invisible-element-59:focus-within .invisible-element-59 {
  opacity: 1;
}

.invisible-element-60 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-60:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-60 {
  will-change: opacity;
}

.target-for-invisible-element-60:hover .invisible-element-60, .target-for-invisible-element-60:focus-within .invisible-element-60 {
  opacity: 1;
}

.invisible-element-61 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-61:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-61 {
  will-change: opacity;
}

.target-for-invisible-element-61:hover .invisible-element-61, .target-for-invisible-element-61:focus-within .invisible-element-61 {
  opacity: 1;
}

.invisible-element-62 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-62:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-62 {
  will-change: opacity;
}

.target-for-invisible-element-62:hover .invisible-element-62, .target-for-invisible-element-62:focus-within .invisible-element-62 {
  opacity: 1;
}

.invisible-element-63 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-63:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-63 {
  will-change: opacity;
}

.target-for-invisible-element-63:hover .invisible-element-63, .target-for-invisible-element-63:focus-within .invisible-element-63 {
  opacity: 1;
}

.invisible-element-64 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-64:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-64 {
  will-change: opacity;
}

.target-for-invisible-element-64:hover .invisible-element-64, .target-for-invisible-element-64:focus-within .invisible-element-64 {
  opacity: 1;
}

.invisible-element-65 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-65:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-65 {
  will-change: opacity;
}

.target-for-invisible-element-65:hover .invisible-element-65, .target-for-invisible-element-65:focus-within .invisible-element-65 {
  opacity: 1;
}

.invisible-element-66 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-66:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-66 {
  will-change: opacity;
}

.target-for-invisible-element-66:hover .invisible-element-66, .target-for-invisible-element-66:focus-within .invisible-element-66 {
  opacity: 1;
}

.invisible-element-67 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-67:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-67 {
  will-change: opacity;
}

.target-for-invisible-element-67:hover .invisible-element-67, .target-for-invisible-element-67:focus-within .invisible-element-67 {
  opacity: 1;
}

.invisible-element-68 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-68:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-68 {
  will-change: opacity;
}

.target-for-invisible-element-68:hover .invisible-element-68, .target-for-invisible-element-68:focus-within .invisible-element-68 {
  opacity: 1;
}

.invisible-element-69 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-69:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-69 {
  will-change: opacity;
}

.target-for-invisible-element-69:hover .invisible-element-69, .target-for-invisible-element-69:focus-within .invisible-element-69 {
  opacity: 1;
}

.invisible-element-70 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-70:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-70 {
  will-change: opacity;
}

.target-for-invisible-element-70:hover .invisible-element-70, .target-for-invisible-element-70:focus-within .invisible-element-70 {
  opacity: 1;
}

.invisible-element-71 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-71:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-71 {
  will-change: opacity;
}

.target-for-invisible-element-71:hover .invisible-element-71, .target-for-invisible-element-71:focus-within .invisible-element-71 {
  opacity: 1;
}

.invisible-element-72 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-72:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-72 {
  will-change: opacity;
}

.target-for-invisible-element-72:hover .invisible-element-72, .target-for-invisible-element-72:focus-within .invisible-element-72 {
  opacity: 1;
}

.invisible-element-73 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-73:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-73 {
  will-change: opacity;
}

.target-for-invisible-element-73:hover .invisible-element-73, .target-for-invisible-element-73:focus-within .invisible-element-73 {
  opacity: 1;
}

.invisible-element-74 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-74:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-74 {
  will-change: opacity;
}

.target-for-invisible-element-74:hover .invisible-element-74, .target-for-invisible-element-74:focus-within .invisible-element-74 {
  opacity: 1;
}

.invisible-element-75 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-75:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-75 {
  will-change: opacity;
}

.target-for-invisible-element-75:hover .invisible-element-75, .target-for-invisible-element-75:focus-within .invisible-element-75 {
  opacity: 1;
}

.invisible-element-76 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-76:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-76 {
  will-change: opacity;
}

.target-for-invisible-element-76:hover .invisible-element-76, .target-for-invisible-element-76:focus-within .invisible-element-76 {
  opacity: 1;
}

.invisible-element-77 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-77:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-77 {
  will-change: opacity;
}

.target-for-invisible-element-77:hover .invisible-element-77, .target-for-invisible-element-77:focus-within .invisible-element-77 {
  opacity: 1;
}

.invisible-element-78 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-78:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-78 {
  will-change: opacity;
}

.target-for-invisible-element-78:hover .invisible-element-78, .target-for-invisible-element-78:focus-within .invisible-element-78 {
  opacity: 1;
}

.invisible-element-79 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-79:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-79 {
  will-change: opacity;
}

.target-for-invisible-element-79:hover .invisible-element-79, .target-for-invisible-element-79:focus-within .invisible-element-79 {
  opacity: 1;
}

.invisible-element-80 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-80:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-80 {
  will-change: opacity;
}

.target-for-invisible-element-80:hover .invisible-element-80, .target-for-invisible-element-80:focus-within .invisible-element-80 {
  opacity: 1;
}

.invisible-element-81 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-81:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-81 {
  will-change: opacity;
}

.target-for-invisible-element-81:hover .invisible-element-81, .target-for-invisible-element-81:focus-within .invisible-element-81 {
  opacity: 1;
}

.invisible-element-82 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-82:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-82 {
  will-change: opacity;
}

.target-for-invisible-element-82:hover .invisible-element-82, .target-for-invisible-element-82:focus-within .invisible-element-82 {
  opacity: 1;
}

.invisible-element-83 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-83:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-83 {
  will-change: opacity;
}

.target-for-invisible-element-83:hover .invisible-element-83, .target-for-invisible-element-83:focus-within .invisible-element-83 {
  opacity: 1;
}

.invisible-element-84 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-84:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-84 {
  will-change: opacity;
}

.target-for-invisible-element-84:hover .invisible-element-84, .target-for-invisible-element-84:focus-within .invisible-element-84 {
  opacity: 1;
}

.invisible-element-85 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-85:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-85 {
  will-change: opacity;
}

.target-for-invisible-element-85:hover .invisible-element-85, .target-for-invisible-element-85:focus-within .invisible-element-85 {
  opacity: 1;
}

.invisible-element-86 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-86:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-86 {
  will-change: opacity;
}

.target-for-invisible-element-86:hover .invisible-element-86, .target-for-invisible-element-86:focus-within .invisible-element-86 {
  opacity: 1;
}

.invisible-element-87 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-87:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-87 {
  will-change: opacity;
}

.target-for-invisible-element-87:hover .invisible-element-87, .target-for-invisible-element-87:focus-within .invisible-element-87 {
  opacity: 1;
}

.invisible-element-88 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-88:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-88 {
  will-change: opacity;
}

.target-for-invisible-element-88:hover .invisible-element-88, .target-for-invisible-element-88:focus-within .invisible-element-88 {
  opacity: 1;
}

.invisible-element-89 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-89:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-89 {
  will-change: opacity;
}

.target-for-invisible-element-89:hover .invisible-element-89, .target-for-invisible-element-89:focus-within .invisible-element-89 {
  opacity: 1;
}

.invisible-element-90 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-90:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-90 {
  will-change: opacity;
}

.target-for-invisible-element-90:hover .invisible-element-90, .target-for-invisible-element-90:focus-within .invisible-element-90 {
  opacity: 1;
}

.invisible-element-91 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-91:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-91 {
  will-change: opacity;
}

.target-for-invisible-element-91:hover .invisible-element-91, .target-for-invisible-element-91:focus-within .invisible-element-91 {
  opacity: 1;
}

.invisible-element-92 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-92:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-92 {
  will-change: opacity;
}

.target-for-invisible-element-92:hover .invisible-element-92, .target-for-invisible-element-92:focus-within .invisible-element-92 {
  opacity: 1;
}

.invisible-element-93 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-93:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-93 {
  will-change: opacity;
}

.target-for-invisible-element-93:hover .invisible-element-93, .target-for-invisible-element-93:focus-within .invisible-element-93 {
  opacity: 1;
}

.invisible-element-94 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-94:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-94 {
  will-change: opacity;
}

.target-for-invisible-element-94:hover .invisible-element-94, .target-for-invisible-element-94:focus-within .invisible-element-94 {
  opacity: 1;
}

.invisible-element-95 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-95:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-95 {
  will-change: opacity;
}

.target-for-invisible-element-95:hover .invisible-element-95, .target-for-invisible-element-95:focus-within .invisible-element-95 {
  opacity: 1;
}

.invisible-element-96 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-96:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-96 {
  will-change: opacity;
}

.target-for-invisible-element-96:hover .invisible-element-96, .target-for-invisible-element-96:focus-within .invisible-element-96 {
  opacity: 1;
}

.invisible-element-97 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-97:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-97 {
  will-change: opacity;
}

.target-for-invisible-element-97:hover .invisible-element-97, .target-for-invisible-element-97:focus-within .invisible-element-97 {
  opacity: 1;
}

.invisible-element-98 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-98:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-98 {
  will-change: opacity;
}

.target-for-invisible-element-98:hover .invisible-element-98, .target-for-invisible-element-98:focus-within .invisible-element-98 {
  opacity: 1;
}

.invisible-element-99 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-99:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-99 {
  will-change: opacity;
}

.target-for-invisible-element-99:hover .invisible-element-99, .target-for-invisible-element-99:focus-within .invisible-element-99 {
  opacity: 1;
}

.invisible-element-100 {
  opacity: 0;
  transition: opacity 0.3s;
}
.invisible-element-100:has(.dropdown-menu--show) {
  opacity: 1;
}
.diagram-canvas .invisible-element-100 {
  will-change: opacity;
}

.target-for-invisible-element-100:hover .invisible-element-100, .target-for-invisible-element-100:focus-within .invisible-element-100 {
  opacity: 1;
}

@keyframes open-modal-scroll-box {
  from {
    overflow: hidden;
  }
  to {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@keyframes open-modal-scroll-box-both {
  from {
    overflow: hidden;
  }
  to {
    overflow: auto;
  }
}
@keyframes open-accordion {
  from {
    overflow: hidden;
  }
  to {
    overflow: visible;
  }
}
.preloader {
  --preloader-color: var(--foreground-brand-strong);
  --preloader-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.preloader::before {
  content: "";
  width: var(--preloader-size);
  height: var(--preloader-size);
  mask: url("img/Preloader.svg") center/cover no-repeat;
  -webkit-mask: url("img/Preloader.svg") center/cover no-repeat;
  background-color: var(--preloader-color);
  animation: loader-rotation 0.7s infinite ease-out;
}

.preloader--static {
  position: relative;
  transform: none;
  left: auto;
  top: auto;
}

.preloader--warning {
  --preloader-color: var(--status-danger-strong);
}

.preloader--tertiary {
  --preloader-color: var(--foreground-weak);
}

.preloader--skeleton-icon {
  --preloader-color: var(--background-neutral-weak);
}

.preloader--skeleton-icon::before {
  mask-image: url("img/CircleFill.svg");
  -webkit-mask-image: url("img/CircleFill.svg");
  animation: loader-opcity 0.6s infinite;
}

.preloader--extra-small {
  --preloader-size: 12px;
}

.preloader--small {
  --preloader-size: 16px;
}

.preloader--button-default {
  --preloader-size: 20px;
}

.preloader--medium {
  --preloader-size: 24px;
}

.preloader--big {
  --preloader-size: 32px;
}

.preloader--large {
  --preloader-size: 64px;
}

@keyframes loader-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.skeleton-loader {
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
  height: 32px;
}

.skeleton-loader:not(.skeleton-loader--grid) {
  background: #F8F8F8;
  background-image: linear-gradient(to right, #F8F8F8 0%, #F8F8F8 20%, #F1F1F1 40%, #F8F8F8 100%);
  background-repeat: no-repeat;
  background-size: 1200px 32px;
  animation: shimmer 1s linear infinite;
}

.skeleton-loader--rect-small {
  height: 24px;
}

.skeleton-loader--text-small {
  height: 11px;
  border-radius: 0;
}

.skeleton-loader--grid {
  grid-column: span 2;
  display: grid;
  grid-template-columns: var(--grid-column-width) minmax(64px, 1fr);
  gap: 8px;
}

.skeleton-loader--grid::after {
  content: "";
  height: 100%;
  border-radius: 4px;
  background: #F8F8F8;
  background-image: linear-gradient(to right, #F8F8F8 0%, #F8F8F8 20%, #F1F1F1 40%, #F8F8F8 100%);
  background-repeat: no-repeat;
  background-size: 1200px 32px;
  animation: shimmer 1s linear infinite;
  animation-delay: 0.2s;
}

.skeleton-loader--grid span {
  display: flex;
  align-items: center;
}

.skeleton-loader--grid span::before {
  content: "";
  height: 16px;
  width: 100%;
  border-radius: 4px;
  background: #F8F8F8;
  background-image: linear-gradient(to right, #F8F8F8 0%, #F8F8F8 20%, #F1F1F1 40%, #F8F8F8 100%);
  background-repeat: no-repeat;
  background-size: 1600px 32px;
  animation: shimmer 1s linear infinite;
}

@media (max-width: 992px) {
  .skeleton-loader--grid {
    grid-template-columns: 1fr;
    gap: 4px;
    height: 62px;
  }
  .skeleton-loader--grid::after {
    height: 32px;
  }
}
@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }
  100% {
    background-position: 1200px 0;
  }
}
.scroll-box {
  --bacground-color-box: var(--background-surface-weakest);
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-box::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.scroll-box::-webkit-scrollbar-track {
  background-color: var(--background-surface-weaker);
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: var(--foreground-weaker);
  border: 2px solid var(--background-surface-weaker);
  border-radius: 3px;
  transition: border-width 0.3s;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  border-width: 1px;
}

.scroll-box > .scroll-shadow-child > .footer {
  z-index: 6;
}

.scroll-box.container > .scroll-shadow-child {
  padding-right: var(--padding-container);
  padding-left: var(--padding-container);
}

.scroll-box.container--offset-left > .scroll-shadow-child {
  padding-right: 0;
}

.scroll-box.container--offset-right > .scroll-shadow-child {
  padding-left: 0;
}

.scroll-box.padding > .scroll-shadow-child {
  padding-top: var(--padding-size);
  padding-bottom: var(--padding-size);
}

.scroll-box.padding--offset-top > .scroll-shadow-child {
  padding-bottom: 0;
}

.scroll-box.padding--offset-bottom > .scroll-shadow-child {
  padding-top: 0;
}

.scroll-box:not(.scroll-box--row) > .scroll-shadow-child {
  display: flex;
  flex-direction: column;
  gap: var(--flex-gap);
  flex-grow: 1;
  position: relative;
  height: fit-content;
}

.scroll-box:not(.scroll-box--row) > .scroll-shadow-child::before, .scroll-box:not(.scroll-box--row) > .scroll-shadow-child::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: var(--scroll-shadow-size);
  background-color: var(--bacground-color-box);
  z-index: 5;
  pointer-events: none;
}

.scroll-box:not(.scroll-box--row) > .scroll-shadow-child::before {
  top: var(--top-box);
  transition: top 0.3s;
}

.scroll-box:not(.scroll-box--row) > .scroll-shadow-child::after {
  bottom: var(--bottom-box);
  transition: bottom 0.3s;
}

.scroll-box--invisible::-webkit-scrollbar {
  display: none;
}

@-moz-document url-prefix() {
  .scroll-box--invisible {
    scrollbar-width: none;
  }
}
.scroll-box--hover-visible::-webkit-scrollbar-track {
  background-color: transparent;
  transition: background-color 0.3s;
}

.scroll-box--hover-visible::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

.scroll-box--hover-visible:hover::-webkit-scrollbar-track {
  background-color: var(--background-surface-weaker);
}

.scroll-box--hover-visible:hover::-webkit-scrollbar-thumb {
  background-color: var(--foreground-weaker);
  border-color: var(--background-surface-weaker);
}

.scroll-box--row {
  overflow-y: hidden;
  overflow-x: auto;
}

.scroll-box--row > .scroll-shadow-child {
  display: flex;
  gap: var(--flex-gap);
  flex-grow: 1;
  position: relative;
}

.scroll-box--row > .scroll-shadow-child::before, .scroll-box--row > .scroll-shadow-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--scroll-shadow-size);
  background-color: var(--bacground-color-box);
  z-index: 5;
  pointer-events: none;
}

.scroll-box--row > .scroll-shadow-child::before {
  left: var(--left-box);
  transition: left 0.3s;
}

.scroll-box--row > .scroll-shadow-child::after {
  right: var(--right-box);
  transition: right 0.3s;
}

.scroll-box--both {
  overflow-x: auto;
}

.scroll-box--with-bottom-margin:not(.scroll-box--row) > .scroll-shadow-child {
  padding-bottom: 0;
}

.scroll-shadow-parent {
  --top-box: 0px;
  --bottom-box: 0px;
  --left-box: 0px;
  --right-box: 0px;
  --scroll-shadow-color: rgba(0,0,0, 0.4);
  --scroll-shadow-size: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  flex-grow: 1;
}

.scroll-shadow-parent:has(> .scroll-box) > .container {
  padding-right: 0;
  padding-left: 0;
}

.scroll-shadow-parent:has(> .scroll-box) > .padding {
  padding-top: 0;
  padding-bottom: 0;
}

.scroll-shadow-parent:has(> .scroll-box--row)::before, .scroll-shadow-parent:has(> .scroll-box--row):after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--scroll-shadow-size);
  z-index: 4;
  pointer-events: none;
}

.scroll-shadow-parent:has(> .scroll-box--row)::before {
  left: var(--left-box);
  background: radial-gradient(farthest-side at 0% 50%, var(--scroll-shadow-color), transparent);
  transition: left 0.3s;
}

.scroll-shadow-parent:has(> .scroll-box--row)::after {
  right: var(--right-box);
  background: radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-color), transparent) 0 100%;
  transition: right 0.3s;
}

.scroll-shadow-parent:has(> .scroll-box:not(.scroll-box--row))::before, .scroll-shadow-parent:has(> .scroll-box:not(.scroll-box--row)):after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: var(--scroll-shadow-size);
  z-index: 4;
  pointer-events: none;
}

.scroll-shadow-parent:has(> .scroll-box:not(.scroll-box--row))::before {
  top: var(--top-box);
  background: radial-gradient(farthest-side at 50% 0%, var(--scroll-shadow-color), transparent);
  transition: top 0.3s;
}

.scroll-shadow-parent:has(> .scroll-box:not(.scroll-box--row))::after {
  bottom: var(--bottom-box);
  background: radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow-color), transparent) 0 100%;
  transition: bottom 0.3s;
}

.scroll-shadow-parent > .background-surface-weaker {
  --bacground-color-box: var(--background-surface-weaker);
}

.scroll-shadow-parent > .background-surface-weakest {
  --bacground-color-box: var(--background-surface-weakest);
}

.scroll-shadow-parent > .background-brand {
  --bacground-color-box: var(--background-brand);
}

.scroll-shadow-parent > .background-success-weakest {
  --bacground-color-box: var(--status-success-weakest);
}

.scroll-shadow-parent > .background-warning-weakest {
  --bacground-color-box: var(--status-warning-weakest);
}

.scroll-shadow-parent > .background-danger-weakest {
  --bacground-color-box: var(--status-danger-weakest);
}

.scroll-shadow-parent > .background-progress-weakest {
  --bacground-color-box: var(--status-progress-weakest);
}

.scroll-shadow-parent > .background-warning {
  --bacground-color-box: #FFF2F2;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  width: var(--side-menu-width);
  height: 100vh;
  background-color: var(--background-surface-weaker);
  overflow: hidden;
  will-change: width;
  box-shadow: 0 0 0 1px var(--border-neutral-strong);
  transition: width 0.3s;
}

.side-menu:focus-within:not(:hover) .invisible-element-2 {
  opacity: 0;
}

.side-menu .checkbox--favourites::after {
  mask: url("img/MenuFavorites.svg") center/cover no-repeat;
  -webkit-mask: url("img/MenuFavorites.svg") center/cover no-repeat;
}

.side-menu .checkbox--favourites:has(.checkbox__input:checked)::after {
  mask: url("img/MenuFavoritesFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/MenuFavoritesFill.svg") center/cover no-repeat;
}

.side-menu--expanded .side-menu__expand-button::before {
  mask: url("img/MenuArrowCompress.svg") center/cover no-repeat;
  -webkit-mask: url("img/MenuArrowCompress.svg") center/cover no-repeat;
}

.side-menu--expanded .menu-item--context {
  padding-right: 19px;
}

.side-menu__header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.side-menu__expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-top: 1px solid var(--border-neutral-strong);
  background-color: var(--background-surface-weaker);
  transition: background-color 0.3s;
}

.side-menu__expand-button::before {
  content: "";
  width: 18px;
  height: 18px;
  mask: url("img/MenuArrowExpand.svg") center/cover no-repeat;
  -webkit-mask: url("img/MenuArrowExpand.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
  transition: background-color 0.3s;
}

.side-menu__expand-button:hover::before {
  background-color: var(--foreground-stronger);
}

.side-menu__expand-button:focus {
  outline: transparent;
}

.side-menu__expand-button:focus-visible {
  opacity: 1;
  box-shadow: var(--button-focus);
}

.side-menu__list {
  display: flex;
  flex-direction: column;
}

.side-menu__list.scroll-box {
  flex-grow: 1;
}

.side-menu__list.scroll-box::before, .side-menu__list.scroll-box::after {
  content: "";
  position: sticky;
  right: 8px;
  left: 8px;
  z-index: 7;
  height: 1px;
  width: calc(100% - 16px);
  border-top: 1px solid var(--border-neutral-strong);
}

.side-menu__list.scroll-box::before {
  top: 0;
}

.side-menu__list.scroll-box::after {
  bottom: 0;
  margin-top: auto;
}

.side-menu__list.scroll-box + .side-menu__expand-button {
  border-color: transparent;
}

.side-menu__item {
  position: relative;
  white-space: nowrap;
}

.side-menu__item .accordion {
  padding: 0;
  min-width: fit-content;
}

.side-menu__item .accordion:last-child {
  padding-bottom: 0;
}

.side-menu__item .accordion:has(.menu-item--active):not(:has(.accordion__content--active)) .accordion__toggle {
  --bg-under-text: var(--button-bg-active);
  --button-bg: var(--button-bg-active);
  --button-bg-hover: var(--button-bg-active);
}

.side-menu__item .accordion--with-sticky-header::before {
  display: none;
}

.side-menu__item .accordion--with-sticky-header > .accordion__item .accordion__header {
  top: 0;
  background-color: var(--background-surface-weaker);
}

.side-menu__item .accordion__header {
  padding: 4px 8px;
  transition: padding-bottom 0.3s;
}

.side-menu__item .accordion__header:has(.button--focused) {
  transition: none;
  padding-bottom: 0;
}

.side-menu__item .accordion__toggle {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 6px;
  padding-right: 12px;
  padding-left: 8px !important;
}

.side-menu__item .accordion__toggle.button--with-caret::after {
  width: 16px;
  height: 16px;
  order: 3;
  margin-left: auto;
  background-color: var(--foreground-weak);
  mask-image: url("img/MenuChevronRight.svg");
  -webkit-mask-image: url("img/MenuChevronRight.svg");
  margin-right: 0 !important;
}

.side-menu__item .accordion__toggle.button--focused::before {
  bottom: 0;
}

.side-menu__item .accordion__toggle::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -8px;
  bottom: -4px;
  left: -8px;
}

.side-menu__item .accordion__content {
  padding-top: 0;
}

.side-menu__item .accordion__inner > .group-menu {
  position: static;
  width: 100%;
  opacity: 1;
  pointer-events: all;
  padding: 0;
  white-space: nowrap;
}

.side-menu__item .accordion__inner > .group-menu::before {
  display: none;
}

.side-menu__item .accordion__inner > .group-menu .group-menu__item:last-child .menu-item {
  padding-bottom: 12px;
}

.side-menu__item .accordion__inner > .group-menu .group-menu__item:last-child .menu-item::before {
  height: calc(100% - 4px);
}

.side-menu__item .accordion__inner > .group-menu .draggable-container__item:last-child > .svg-icon {
  top: 50%;
}

.side-menu__item .accordion__inner > .group-menu .draggable-container__item:last-child > .group-menu__item .menu-item {
  padding-bottom: 12px;
}

.side-menu__item .accordion__inner > .group-menu .draggable-container__item:last-child > .group-menu__item .menu-item::before {
  height: calc(100% - 4px);
}

.side-menu__item--with-border {
  padding-bottom: 16px;
}

.side-menu__item--with-border::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 16px;
  right: 16px;
  height: 1px;
  border-radius: 1px;
  background-color: var(--border-neutral-strong);
}

.menu-item {
  position: relative;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: fit-content;
}

.menu-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 8px);
  border-radius: 6px;
  pointer-events: none;
  transition: background-color 0.3s;
}

.menu-item:focus {
  outline: transparent;
}

.menu-item:focus-visible::before {
  box-shadow: var(--button-focus);
}

.menu-item:not(:disabled):not(.menu-item--active, .side-menu__logo):hover::before {
  background-color: var(--background-neutral-weaker-hover);
}

.menu-item--active::before {
  background-color: var(--background-neutral-weaker-active);
}

.menu-item--active + .invisible-element-1 {
  opacity: 1;
}

.menu-item--active + .actions-right-column .invisible-element-1 {
  opacity: 1;
}

.menu-item--big {
  padding: 8px 12px;
  width: 100%;
}

.menu-item--big::before {
  top: 4px;
  height: calc(100% - 8px);
}

.menu-item--with-indicator::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 1;
  width: 12px;
  height: 12px;
  mask: url("img/CircleFill.svg") center/cover no-repeat;
  background-color: var(--status-danger-strong);
}

.side-menu__logo {
  padding: 12px 8px;
}

.side-menu__logo::before {
  height: calc(100% - 16px);
  top: 8px;
}

.group-menu {
  position: fixed;
  left: var(--side-menu-width);
  padding: 10px 0 10px 4px;
  z-index: -1;
  width: calc(var(--sidebar-expanded) + 8px);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  transition: opacity 0.3s;
}

.group-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 20px;
  height: 100%;
}

.group-menu--context {
  left: 0;
  padding: 0;
  padding-bottom: 10px;
  width: var(--sidebar-expanded);
  top: 52px;
  bottom: 0;
}

.group-menu--context .group-menu__item--with-actions .menu-item {
  padding-right: 44px;
}

.group-menu--context .group-menu__item--with-actions .menu-item:hover, .group-menu--context .group-menu__item--with-actions .menu-item:focus-visible, .group-menu--context .group-menu__item--with-actions .menu-item.menu-item--active {
  padding-right: 68px;
}

.group-menu--context .group-menu__item--with-actions:has(.actions-right-column:hover) .menu-item, .group-menu--context .group-menu__item--with-actions:has(.actions-right-column:focus-within) .menu-item {
  padding-right: 68px;
}

.group-menu--show {
  opacity: 1;
  pointer-events: all;
  z-index: 9999;
}

.group-menu__inner {
  display: flex;
  flex-direction: column;
  background-color: var(--background-surface-weaker);
  border-radius: 8px;
  max-height: 100%;
  padding-top: 0;
  overflow: auto;
  box-shadow: 0px 48px 80px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 3.996px 8px 0px rgba(0, 0, 0, 0.06), 0px -4px 24px 0px rgba(0, 0, 0, 0.06);
}

.group-menu__inner:has(.menu-work-group__header) {
  gap: 0;
}

.group-menu__header {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
  position: sticky;
  top: 0;
  background-color: var(--background-surface-weaker);
  z-index: 1;
  padding: 12px;
}

.group-menu__header--context {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-menu__list {
  display: flex;
  flex-direction: column;
}

.group-menu__list .draggable-container__item > .svg-icon {
  --icon-size: 18px;
}

.group-menu__list .draggable-container__item > .group-menu__item::after {
  display: none;
}

.group-menu__list .draggable-container__item > .group-menu__item:last-child .menu-item {
  padding-bottom: 12px;
}

.group-menu__list .draggable-container__item > .group-menu__item:last-child .menu-item::before {
  height: calc(100% - 4px);
}

.group-menu__list .draggable-container__item:last-child > .svg-icon {
  top: calc(50% - 4px);
}

.group-menu__list .draggable-container__item:last-child > .group-menu__item:last-child .menu-item {
  padding-bottom: 20px;
}

.group-menu__list .draggable-container__item:last-child > .group-menu__item:last-child .menu-item::before {
  height: calc(100% - 12px);
}

.group-menu__item {
  position: relative;
}

.group-menu__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 1px;
  height: 100%;
  border-left: 1px solid var(--border-neutral-strong);
  pointer-events: none;
}

.group-menu__item:last-child::before {
  display: none;
}

.group-menu__item:last-child .menu-item {
  padding-bottom: 20px;
}

.group-menu__item:last-child .menu-item::before {
  height: calc(100% - 12px);
}

.group-menu__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  height: 50%;
  width: 10px;
  border: 1px solid var(--border-neutral-strong);
  border-radius: 0 0 0 30px;
  border-top: none;
  border-right: none;
  pointer-events: none;
}

.group-menu__item .menu-item {
  padding-left: 48px;
}

.group-menu__item .menu-item::before {
  top: 2px;
  left: 40px;
  width: calc(100% - 48px);
  height: calc(100% - 4px);
}

.group-menu__item .menu-item--big {
  padding-top: 12px;
  padding-bottom: 12px;
}

.group-menu__item .menu-item--big::before {
  top: 4px;
  height: calc(100% - 8px);
}

.group-menu__item .menu-item--big + .actions-right-column {
  top: 16px;
}

.group-menu__item--with-actions,
.side-menu__item--with-actions {
  position: relative;
}

.group-menu__item--with-actions .menu-item,
.side-menu__item--with-actions .menu-item {
  padding-right: 44px;
}

.group-menu__item--with-actions .actions-right-column,
.side-menu__item--with-actions .actions-right-column {
  position: absolute;
  right: 16px;
}

.side-menu__item--with-actions .actions-right-column {
  top: 12px;
}

.group-menu__item--with-actions .actions-right-column {
  top: 8px;
}

.side-menu__item--profile .group-menu__item .menu-item {
  padding-top: 17px;
  padding-bottom: 17px;
}

.side-menu__item--profile .group-menu__item .menu-item::before {
  top: 8px;
  height: calc(100% - 16px);
}

.side-menu__item--profile .group-menu__item .actions-right-column {
  top: 16px;
}

.side-menu__item--profile .actions-right-column {
  top: 8px;
  right: 12px;
}

.group-menu__item--without-tree .menu-item {
  padding-left: 16px;
}

.group-menu__item--without-tree .menu-item::before {
  left: 8px;
  width: calc(100% - 16px);
}

.group-menu__item--without-tree::before, .group-menu__item--without-tree::after {
  display: none;
}

.group-menu__item--footer .menu-item {
  padding-top: 16px;
  padding-bottom: 16px !important;
}

.group-menu__item--footer .menu-item::before {
  height: calc(100% - 16px) !important;
  top: 8px;
}

.group-menu__item--footer .actions-right-column {
  top: 16px;
}

.group-menu__wrapper {
  border-top: 1px solid var(--border-neutral-strong);
  border-bottom: 1px solid var(--border-neutral-strong);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.group-menu__wrapper .group-menu__item::before, .group-menu__wrapper .group-menu__item::after {
  display: none;
}

.group-menu__wrapper .menu-item {
  background-color: transparent;
  width: 100%;
  padding-left: 16px;
}

.group-menu__wrapper .menu-item::before {
  left: 8px;
  width: calc(100% - 16px);
}

.breadcrumbs {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  display: flex;
}

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

.breadcrumbs__item + .breadcrumbs__item:before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  mask: url("img/ChevronRight.svg") center/cover no-repeat;
  -webkit-mask: url("img/ChevronRight.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
}

.breadcrumbs__item:not(:has(.breadcrumbs__current-location)) {
  flex-shrink: 0;
}

.breadcrumbs__current-location {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  color: var(--foreground-weak);
}

.header {
  border-bottom: 1px solid transparent;
  position: relative;
}

.header--with-border {
  border-color: var(--border-neutral-strong);
}

.header--with-border .breadcrumbs + .header__body .actions-right-column:last-child {
  align-self: flex-start;
  margin-top: -6px;
}

.breadcrumbs {
  padding-top: 4px;
}

.breadcrumbs + .header__body:not(.header__body--no-height) {
  height: 44px;
}

.breadcrumbs + .header__body:not(.header__body--no-height) + .header__bottom {
  padding-top: 8px;
}

.breadcrumbs + .header__body--no-height {
  padding: 8px 0;
}

.header__body {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
}

.header__body--no-height {
  height: auto;
  min-height: 64px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.header__body--with-margin {
  margin-bottom: 8px;
}

.header__body--with-border {
  border-color: var(--border-neutral-strong);
}

.header__body--with-border + .header__bottom {
  padding-top: 8px;
}

.header__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}

.header__bottom--offset-top {
  margin-top: -8px;
}

.header__bottom--offset-top-big {
  margin-top: -16px;
}

.header__search--small {
  max-width: 224px;
}

.badge {
  --badge-bg: var(--background-neutral-weak);
  --badge-color: var(--foreground-stronger);
  color: var(--badge-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 100%;
  width: fit-content;
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  border-radius: var(--badge-radius);
  background-color: var(--badge-bg);
  position: relative;
  padding: 0 6px;
}

.badge:has(.badge__close) {
  padding-right: 32px;
}

.badge > .text:not(.line-clamp-two, .line-clamp-tree, .line-clamp-for, .line-clamp-five) {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

.badge > .text.font-italic {
  padding-right: 1px;
}

.badge > .text:not(.text--brand-strong, .text--strong, .text--weak, .text--danger, .text--contrast, .text--active, .text--disabled, .text--weak, .text--warning, .text--error, .text--success, .text--private, .text--public) {
  color: inherit;
}

.badge .abbr-icon:first-child,
.badge .svg-icon:first-child,
.badge .type-icon:first-child,
.badge .severity-icon:first-child,
.badge .preloader:first-child {
  margin-left: -2px;
}

.badge .svg-icon {
  --icon-size: 16px;
}

.badge .preloader {
  --preloader-size: 16px;
}

.badge .entity-widget__text {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

.badge .badge__close {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 100%;
  min-height: auto;
}

.badge--border-gray,
.badge--border-warning,
.badge--border-success,
.badge--border-danger {
  border: 1px solid var(--badge-border-color);
  padding: 0 5px;
}

.badge--border-gray.badge--big,
.badge--border-warning.badge--big,
.badge--border-success.badge--big,
.badge--border-danger.badge--big {
  padding: 0 7px;
}

.badge--border-gray {
  --badge-border-color: var(--border-neutral-stronger);
}

.badge--border-warning {
  --badge-border-color: var(--status-warning-strong);
}

.badge--border-success {
  --badge-border-color: var(--status-success-strong);
}

.badge--border-danger {
  --badge-border-color: var(--status-danger-strong);
}

.badge--beta {
  --badge-bg: var(--bage-beta);
  --badge-color: var(--bage-beta-color);
}

.badge--primary {
  --badge-bg: var(--background-brand);
  --badge-color: var(--foreground-contrast);
}

.badge--blue {
  --badge-bg: var(--bage-blue);
  --badge-color: var(--foreground-strong);
}

.badge--manager {
  --badge-bg: var(--bage-manager);
  --badge-color: var(--foreground-contrast);
}

.badge--user {
  --badge-bg: var(--bage-user);
  --badge-color: #B8A16A;
}

.badge--owner {
  --badge-bg: var(--bage-owner);
  --badge-color: var(--foreground-contrast);
}

.badge--member {
  --badge-bg: var(--bage-member);
}

.badge--warning {
  --badge-bg: var(--status-warning-strong);
  --badge-color: var(--foreground-contrast);
}

.badge--danger {
  --badge-bg: var(--status-danger-strong);
  --badge-color: var(--foreground-contrast);
}

.badge--success {
  --badge-bg: var(--status-success-strong);
  --badge-color: var(--foreground-contrast);
}

.badge--brand-weaker {
  --badge-bg: var(--background-brand-weaker);
}

.badge--white {
  --badge-bg: var(--background-surface-weakest);
}

.badge--white.button {
  --button-bg: var(--background-surface-weakest);
  --button-bg-hover: var(--background-neutral-weaker-hover);
  --button-bg-active: var(--background-neutral-weaker-active);
}

.badge--ci-component {
  --badge-bg: var(--bage-ci-component);
  --badge-color: var(--foreground-stronger);
  padding: 0 2px;
  flex-shrink: 1;
}

.badge--current {
  --badge-bg: var(--background-surface-weakest);
  padding: 2px 8px;
  box-shadow: 0 0 0 1px var(--status-success-weak);
}

.badge--big {
  padding: 8px;
  min-width: 32px;
  height: auto;
}

.badge--big .svg-icon {
  --icon-size: 18px;
}

.badge--big .preloader {
  --preloader-size: 18px;
}

.badge--medium,
.badge--small {
  padding-right: 4px;
  padding-left: 4px;
  gap: 2px;
}

.badge--medium {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  min-width: 20px;
  min-height: 20px;
  height: 20px;
}

.badge--medium .svg-icon {
  --icon-size: 14px;
}

.badge--medium .preloader {
  --preloader-size: 14px;
}

.badge--small {
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
  min-height: 16px;
  height: 16px;
  min-width: 16px;
}

.badge--small .svg-icon {
  --icon-size: 12px;
}

.badge--small .preloader {
  --preloader-size: 12px;
}

.badge--big-radius {
  border-radius: var(--badge-radius-big);
}

.badge--round {
  border-radius: 16px;
  padding-right: 8px;
  padding-left: 8px;
}

.badge--tag-fill-color {
  --badge-bg: transparent;
}

.badge--tag-fill-color::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--color-tag);
  opacity: 0.12;
  border-radius: var(--radius-small);
}

.badge--tag-with-icon::before,
.badge--tag-not-badge::before,
.badge--tag-fill-color::before {
  content: "";
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-tag);
}

.badge--tag-with-icon,
.badge--tag-fill-color {
  padding-left: 4px;
}

.badge--tag-with-icon::before,
.badge--tag-fill-color::before {
  width: 8px;
  height: 8px;
}

.badge--tag-not-badge {
  --badge-bg: transparent;
  padding: 0;
  min-height: auto;
  height: auto;
  word-break: break-word;
  flex-shrink: 1;
}

.badge--tag-not-badge::before {
  width: 16px;
  height: 16px;
}

.button {
  --button-bg: var(--background-neutral-weak);
  --button-bg-hover: var(--background-neutral-weak-hover);
  --button-bg-active: var(--background-neutral-weak-active);
  --button-bg-disabled: var(--background-neutral-weak-disabled);
  --button-text-color: var(--foreground-brand-strong);
  --svg-icon-color: var(--foreground-brand-strong);
  --button-shadow-focus: var(--button-focus);
  --bg-under-text: var(--button-bg);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 32px;
  width: fit-content;
  min-height: 32px;
  height: 32px;
  padding: var(--button-padding);
  background-color: var(--button-bg);
  border-radius: var(--button-radius);
  color: var(--button-text-color);
  white-space: nowrap;
  position: relative;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.3s, margin-left 0.3s, min-width 0.3s, width 0.3s, padding 0.3s;
}

.button:focus {
  outline: transparent;
}

.button:focus-visible {
  outline: transparent;
  box-shadow: var(--button-shadow-focus);
  z-index: 1;
}

.button:not(:disabled):not(.button--disabled, .button--active):not(:has(.button__action-indicator)):hover {
  --bg-under-text: var(--button-bg-hover);
  background-color: var(--button-bg-hover);
}

.button:not(:disabled):not(.button--disabled, .button--active):not(:has(.button__action-indicator)):active {
  --bg-under-text: var(--button-bg-active);
  box-shadow: none;
  background-color: var(--button-bg-active);
}

.button:disabled, .button.button--disabled {
  --bg-under-text: var(--button-bg-disabled);
  --button-bg: var(--button-bg-disabled);
  --svg-icon-color: var(--foreground-disabled);
  cursor: not-allowed;
}

.button:disabled:not(.button--primary, .button--primary-danger, .button--primary-neutral), .button.button--disabled:not(.button--primary, .button--primary-danger, .button--primary-neutral) {
  --button-text-color: var(--foreground-disabled);
}

.button:has(.button__action-indicator):not(:disabled):not(.button--disabled):not(:hover) .button__action-indicator {
  color: var(--foreground-strong);
  --svg-icon-color: var(--foreground-strong);
}

.button:has(.button__action-indicator) .button__action-indicator {
  color: var(--button-text-color);
}

.button:has(.button__counter) {
  padding-right: 7px;
}

.button__counter {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.01375rem;
  padding: 3px 6.5px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  background-color: var(--button-text-color);
  color: var(--foreground-contrast);
}

@media (min-width: 1200px) {
  .button--adaptive .svg-icon {
    display: none;
  }
}
@media (max-width: 1200px) {
  .button--adaptive {
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    padding: 4px;
    min-width: 32px;
    gap: 0;
  }
}
.button--loading {
  --loader-bg: var(--svg-icon-color);
  pointer-events: none;
  transition: none;
}

.button--loading > .svg-icon {
  opacity: 0;
  transition: none;
}

.button--loading:not(.button--with-icon) {
  --button-text-color: transparent;
}

.button--loading .preloader {
  transform: none;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.button--loading .preloader::before {
  width: var(--loader-size);
  height: var(--loader-size);
  background-color: var(--loader-bg);
}

.button--loading:not(.button--select) {
  --loader-size: 18px;
}

.button--loading:not(.button--select) .preloader {
  top: 3px;
  left: 3px;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
}

.button--loading:not(.button--select).button--with-icon:not(.button--small) .preloader {
  left: 6px;
}

.button--loading:not(.button--select).button--with-icon .preloader {
  width: 18px;
}

.button--with-loading {
  --loader-size: 18px;
  padding-left: 7px;
  pointer-events: none;
}

.button--with-loading .preloader {
  position: static;
  transform: none;
}

.button--with-loading .preloader::before {
  width: var(--loader-size);
  height: var(--loader-size);
}

.button--with-border {
  box-shadow: 0 0 0 1px var(--button-text-color) inset;
}

.button--gray-text {
  --button-text-color: var(--color-text_500);
}

.button--black-text {
  --button-text-color: var(--foreground-stronger);
}

.button--warning-text {
  --button-text-color: var(--color-red_500);
}

.button--primary-text {
  --button-text-color: var(--color-primary_500);
  --svg-icon-color: var(--color-primary_500);
}

.button--with-caret {
  min-width: 46px;
}

.button--with-caret::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  margin-left: auto;
  mask: url("img/ChevronMenu.svg") center/cover no-repeat;
  -webkit-mask: url("img/ChevronMenu.svg") center/cover no-repeat;
  background-color: var(--svg-icon-color);
  transition: opacity 0.3s, transform 0.3s;
}

.button--with-caret.button--select::after, .button--with-caret.accordion__toggle::after {
  width: 24px;
  height: 24px;
  mask: url("img/ChevronRight.svg") center/cover no-repeat;
  -webkit-mask: url("img/ChevronRight.svg") center/cover no-repeat;
  transform: rotate(90deg);
}

.button--with-caret:not(.button--reverse):not(.button--multiselect):not(.accordion__toggle):not(.button--icon) {
  padding-right: 7px;
}

.button--with-caret.button--reverse:not(.button--icon) {
  padding-left: 7px;
}

.button--with-caret.button--icon::after {
  margin-left: 0;
}

.button--icon:not(.button--with-caret) {
  padding: 0px !important;
}

.button--with-icon:not(.button--reverse) {
  padding-left: 7px;
}

.button--with-icon.button--reverse {
  padding-right: 7px;
}

.button--neutral {
  --button-text-color: var(--foreground-stronger);
  --svg-icon-color: var(--foreground-stronger);
}

.button--danger {
  --button-text-color: var(--status-danger-strong);
  --svg-icon-color: var(--status-danger-strong);
}

.button--primary,
.button--primary-neutral,
.button--primary-danger {
  --button-text-color: var(--foreground-contrast);
  --svg-icon-color: var(--foreground-contrast);
}

.button--primary:disabled, .button--primary.button--disabled,
.button--primary-neutral:disabled,
.button--primary-neutral.button--disabled,
.button--primary-danger:disabled,
.button--primary-danger.button--disabled {
  --svg-icon-color: var(--foreground-contrast);
}

.button--primary .button__counter,
.button--primary-neutral .button__counter,
.button--primary-danger .button__counter {
  background-color: var(--button-text-color);
  color: var(--button-bg);
}

.button--primary {
  --button-bg: var(--background-brand);
  --button-bg-hover: var(--background-brand-hover);
  --button-bg-active: var(--background-brand-active);
  --button-bg-disabled: var(--background-brand-disabled);
}

.button--primary-neutral {
  --button-bg: var(--background-neutral-strong);
  --button-bg-hover: var(--background-neutral-strong-hover);
  --button-bg-active: var(--background-neutral-strong-active);
  --button-bg-disabled: var(--background-neutral-strong-disabled);
}

.button--primary-danger {
  --button-bg: var(--status-danger-strong);
  --button-bg-hover: var(--status-danger-strong-hover);
  --button-bg-active: var(--status-danger-strong-active);
  --button-bg-disabled: var(--status-danger-strong-disabled);
}

.button--tertiary,
.button--tertiary-neutral,
.button--tertiary-danger,
.button--quaternary,
.button--quaternary-neutral,
.button--quaternary-danger {
  --button-bg: var(--background-neutral-weaker);
  --button-bg-disabled: var(--background-neutral-weaker);
}

.button--tertiary,
.button--tertiary-neutral,
.button--tertiary-danger {
  --button-bg-hover: var(--background-neutral-weaker-hover);
  --button-bg-active: var(--background-neutral-weaker-active);
}

.button--tertiary {
  --button-text-color: var(--foreground-brand-strong);
  --svg-icon-color: var(--foreground-brand-strong);
}

.button--tertiary-neutral {
  --button-text-color: var(--foreground-stronger);
  --svg-icon-color: var(--foreground-stronger);
}

.button--tertiary-danger {
  --button-text-color: var(--status-danger-strong);
  --svg-icon-color: var(--status-danger-strong);
}

.button--quaternary,
.button--quaternary-neutral,
.button--quaternary-danger {
  --button-bg-hover: var(--background-neutral-weaker);
  --button-bg-active: var(--background-neutral-weaker);
  --button-text-color: var(--foreground-weak);
  --svg-icon-color: var(--foreground-weak);
}

.button--quaternary:not(:disabled):not(.button--disabled):hover, .button--quaternary:not(:disabled):not(.button--disabled):active {
  --button-text-color: var(--foreground-brand-strong);
  --svg-icon-color: var(--foreground-brand-strong);
}

.button--quaternary-neutral:not(:disabled):not(.button--disabled):hover, .button--quaternary-neutral:not(:disabled):not(.button--disabled):active {
  --button-text-color: var(--foreground-stronger);
  --svg-icon-color: var(--foreground-stronger);
}

.button--quaternary-danger:not(:disabled):not(.button--disabled):hover {
  --button-text-color: var(--status-danger-strong);
  --svg-icon-color: var(--status-danger-strong);
}

.button--quaternary-danger:not(:disabled):not(.button--disabled):active {
  --button-text-color: var(--status-danger-strong);
  --svg-icon-color: var(--status-danger-strong);
}

.button--has-changes:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border: solid 1px #FFF;
  border-radius: 50%;
  background-color: var(--color-red_500);
  animation: upate-trigger-pulse 1.5s ease infinite;
}

@keyframes upate-trigger-pulse {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.button--with-warning-indicator:before,
.button--with-complete-indicator:before,
.button--with-error-indicator:before {
  content: "";
  position: absolute;
  top: 4px;
  right: 3px;
  width: 12px;
  height: 12px;
  z-index: 1;
  border: solid 2px var(--gray-00);
  border-radius: 50%;
  transition: border-color 0.3s;
}

.button--with-warning-indicator:not(.button--reverse):has(.svg-icon)::before,
.button--with-complete-indicator:not(.button--reverse):has(.svg-icon)::before,
.button--with-error-indicator:not(.button--reverse):has(.svg-icon)::before {
  right: auto;
  left: 18px;
}

.button--with-warning-indicator::before {
  background-color: #F2C527;
}

.button--with-complete-indicator::before {
  background-color: var(--current-color);
}

.button--with-error-indicator::before {
  background-color: var(--color-red_500);
}

.button--small,
.button--extra-small {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.01375rem;
  gap: 2px;
  padding: 4px 5px;
  border-radius: var(--badge-radius);
}

.button--small.button--with-icon:not(.button--reverse),
.button--extra-small.button--with-icon:not(.button--reverse) {
  padding-left: 4px;
}

.button--small.button--with-icon.button--reverse,
.button--extra-small.button--with-icon.button--reverse {
  padding-right: 4px;
}

.button--small:not(.button--select),
.button--extra-small:not(.button--select) {
  --loader-size: 16px;
}

.button--extra-small {
  min-width: 16px;
  min-height: 16px;
  height: 16px;
}

.button--extra-small.button--with-caret:not(.accordion__toggle)::after {
  width: 6px;
  height: 6px;
}

.button--extra-small.button--with-caret.accordion__toggle::after {
  width: 12px;
  height: 12px;
}

.button--small {
  min-width: 24px;
  min-height: 24px;
  height: 24px;
}

.button--small.button--with-caret:not(.accordion__toggle)::after {
  width: 8px;
  height: 8px;
}

.button--small.button--with-caret.accordion__toggle::after {
  width: 16px;
  height: 16px;
}

.button--big {
  min-width: 40px;
  min-height: 40px;
  height: 40px;
}

.button--big:not(.button--select) {
  --loader-size: 24px;
}

.button--no-height {
  height: auto;
}

.button--no-hover {
  --button-bg-hover: var(--button-bg);
  --button-bg-active: var(--button-bg);
}

.button--fills {
  width: 100%;
  height: 100%;
  border-radius: 0;
  white-space: normal;
}

.button--active {
  background-color: var(--background-neutral-weaker-active);
  cursor: default;
}

.button--new {
  --button-bg: #FFFEF3;
  --button-bg-hover: #faf9ed;
  --button-bg-active: #f3f2e3;
  --button-bg-disabled: #FFFEF3;
}

.button--new::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  border-radius: 0 1px 1px 0;
  background-color: #F2C527;
}

.button--macro {
  --button-bg: var(--background-macro);
  --button-bg-hover: var(--background-macro-hover);
  --button-bg-active: var(--background-macro-active);
  --button-text-color: var(--foreground-stronger);
  --svg-icon-color: var(--foreground-stronger);
}

.button--contrast {
  --button-bg: var(--background-surface-weakest);
  --button-bg-hover: var(--background-surface-weakest-hover);
  --button-bg-active: var(--background-surface-weakest-active);
  --button-bg-disabled: var(--background-surface-weakest);
}

.button--full-width {
  width: 100%;
  justify-content: center;
}

.button--full-height {
  height: 100%;
}

.button--select {
  --button-bg: var(--background-surface-weakest);
  --button-bg-hover: var(--background-surface-weakest-hover);
  --button-bg-active: var(--background-surface-weakest-active);
  --button-bg-disabled: var(--background-surface-weakest);
  --button-text-color: var(--foreground-stronger);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  padding-right: 4px !important;
  padding-left: 8px;
  border: 1px solid var(--border-neutral-strong);
  width: 100%;
}

.button--select.button--loading {
  --loader-size: 18px;
  --loader-bg: var(--foreground-brand-strong);
}

.button--select.button--loading .preloader {
  top: 50%;
  right: 7px;
  left: auto;
  transform: translate(0, -50%);
  width: var(--loader-size);
  height: var(--loader-size);
  background-color: var(--button-bg);
}

.button--select:hover .preloader {
  background-color: var(--button-bg-hover);
}

.button--select:active .preloader, .button--select.button--focused .preloader {
  background-color: var(--button-bg-active);
}

.button--select:disabled, .button--select.button--disabled {
  --button-text-color: var(--foreground-stronger);
  border-style: dashed;
}

.button--select:disabled::after, .button--select.button--disabled::after {
  --svg-icon-color: var(--foreground-disabled);
}

.button--select:focus-visible {
  box-shadow: none;
  border-color: var(--brand-70);
}

.button--multi-select {
  height: auto;
  padding: 4px;
}

.button--multi-select .dropdown--chiplist {
  padding: 0;
  border: none;
  flex-shrink: 1;
  background-color: transparent !important;
  min-height: 24px;
}

.button--select-conditions {
  border-radius: 32px;
  z-index: 1;
  border: 2px solid var(--conditions-color);
}

.button--select-conditions:after {
  width: 16px;
  height: 16px;
}

.button--focused:not(.accordion__toggle) {
  --button-bg: var(--button-bg-active);
  --button-bg-hover: var(--button-bg-active);
}

.button--with-flex-shrink {
  flex-shrink: 1;
}

.button--round {
  border-radius: 40px;
}

.button--tooltip {
  --svg-icon-color: var(--foreground-strong);
  cursor: help;
}

.button--tooltip:not(:disabled):hover {
  --svg-icon-color: var(--foreground-brand-strong);
}

.button--input-file {
  cursor: pointer;
}

.button--input-file:has(input:focus-visible) {
  box-shadow: var(--button-focus);
}

.button--big-radius {
  border-radius: 8px;
}

.button-copy {
  color: var(--foreground-stronger);
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-width: 36px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 0 4px;
  border-radius: 24px;
  background-color: var(--color-secondary_300);
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s;
}

.button-copy:not(.button-copy--overflow) .button-copy__value {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

.button-copy::before, .button-copy::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s, right 0.3s, background-color 0.3s;
}

.button-copy::before {
  width: 12px;
  height: 12px;
  right: -14px;
  background-color: var(--color-primary_100);
}

.button-copy::after {
  width: 11px;
  height: 11px;
  right: -11px;
  mask: url("img/Copy.svg") center/cover no-repeat;
  -webkit-mask: url("img/Copy.svg") center/cover no-repeat;
  background-color: var(--foreground-brand-strong);
}

.button-copy:focus {
  outline: transparent;
}

.button-copy:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
}

.button-copy:focus-visible::before, .button-copy:focus-visible::after {
  right: 4px;
  opacity: 1;
}

.button-copy:hover:not(:disabled) {
  background-color: var(--color-primary_100);
}

.button-copy:hover:not(:disabled)::before, .button-copy:hover:not(:disabled)::after {
  right: 4px;
  opacity: 1;
}

.button-copy:active:not(:disabled) {
  box-shadow: none;
  background-color: var(--color-secondary_400);
}

.button-copy:active:not(:disabled)::before {
  background-color: var(--color-secondary_400);
}

.button-copy:disabled {
  background-color: var(--color-secondary_300);
  color: var(--color-text_500);
}

.button-copy:disabled .button-copy__value {
  color: var(--color-text_500);
}

.button-copy__text {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
}

.button-copy__text::after {
  content: ":";
}

.button-copy__info {
  display: inline-flex;
  color: var(--foreground-brand-strong);
  transition: opacity 0.3s;
}

.button-copy__info .button-copy__value {
  width: calc(var(--letter-size) * var(--overflow-count));
}

.button-copy__value {
  --letter-size: 5.95px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  overflow: hidden;
  color: var(--foreground-brand-strong);
  transition: opacity 0.3s;
}

.button-copy--without-text {
  min-width: 20px;
}

.button-copy--without-text .button-copy__text {
  display: none;
}

.button-copy--hide {
  min-width: 44px;
}

.button-copy--hide::before {
  display: none;
}

.button-copy--hide .button-copy__text {
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);
  left: -14px;
  opacity: 0;
  transition: opacity 0.3s, left 0.3s;
}

.button-copy--hide:hover:not(:disabled) .button-copy__text, .button-copy--hide:focus-visible:not(:disabled) .button-copy__text {
  left: calc(50% + 2px);
  opacity: 1;
}

.button-copy--hide:hover:not(:disabled) .button-copy__value,
.button-copy--hide:hover:not(:disabled) .button-copy__info, .button-copy--hide:focus-visible:not(:disabled) .button-copy__value,
.button-copy--hide:focus-visible:not(:disabled) .button-copy__info {
  opacity: 0;
}

.button-copy--hide:hover:not(:disabled)::after, .button-copy--hide:focus-visible:not(:disabled)::after {
  right: calc(50% - 15px);
}

.button-copy--hide .button-copy__value--overflow {
  right: 4px;
}

.button-copy__value--overflow {
  display: flex;
  justify-content: flex-end;
}

.button-copy--without-overflow {
  flex-shrink: 2;
  min-width: min-content;
}

.button-copy--without-overflow .button-copy__value {
  min-width: calc(var(--letter-size) * var(--overflow-count));
}

.link {
  word-break: break-word;
}

.link:not(.link--quaternary, .link--without-line) > [class*=__text] {
  color: var(--foreground-brand-strong);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--foreground-brand-weak), var(--foreground-brand-weak));
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  transition: background-size 0.3s;
}

.link:not(.link--quaternary, .link--without-line):hover > [class*=__text], .link:not(.link--quaternary, .link--without-line):focus > [class*=__text] {
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

.link:not(.link--quaternary, .link--without-line):focus {
  outline: transparent;
}

.link:not(.link--quaternary, .link--without-line):focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--button-radius);
}

.link > .svg-icon {
  display: inline-block;
  margin: 0 2px -4px 2px;
}

.link--brand-weak .link__text {
  color: var(--foreground-brand-weak) !important;
  background-image: linear-gradient(var(--foreground-brand-strong), var(--foreground-brand-strong)), linear-gradient(var(--foreground-brand-weak), var(--foreground-brand-weak)) !important;
}

.link--brand-weak.link--without-line .link__text {
  background-image: linear-gradient(var(--foreground-brand-weak), var(--foreground-brand-weak)), linear-gradient(transparent, transparent) !important;
}

.link--quaternary {
  --svg-icon-color: var(--foreground-brand-strong);
}

.link--quaternary:not(:hover, :focus-visible) .svg-icon {
  --svg-icon-color: var(--foreground-strong);
}

.link--quaternary:focus {
  outline: transparent;
}

.link--quaternary:focus-visible {
  outline: transparent;
  box-shadow: none;
  color: var(--foreground-brand-strong);
}

.link--button {
  padding: 4px 8px;
  height: 32px;
  flex-shrink: 0;
}

.link--without-line > [class*=__text] {
  color: var(--foreground-brand-strong);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent, transparent);
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  transition: background-size 0.3s;
}

.link--without-line:hover > [class*=__text], .link--without-line:focus > [class*=__text] {
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

.link--without-line:focus {
  outline: transparent;
}

.link--without-line:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--button-radius);
}

.link--without-line.link--brand-weak > [class*=__text] {
  color: var(--foreground-brand-weak);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent, transparent);
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  transition: background-size 0.3s;
}

.link--without-line.link--brand-weak:hover > [class*=__text], .link--without-line.link--brand-weak:focus > [class*=__text] {
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

.link--without-line.link--brand-weak:focus {
  outline: transparent;
}

.link--without-line.link--brand-weak:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--button-radius);
}

.link--brand-weak > [class*=__text] {
  color: var(--foreground-brand-weak);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--foreground-brand-weak), var(--foreground-brand-weak));
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  transition: background-size 0.3s;
}

.link--brand-weak:hover > [class*=__text], .link--brand-weak:focus > [class*=__text] {
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

.link--brand-weak:focus {
  outline: transparent;
}

.link--brand-weak:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--button-radius);
}

.title {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
  color: var(--foreground-stronger);
  word-break: break-word;
  position: relative;
}

.title:not(:has(.field__editable-label), .line-clamp-two, .line-clamp-tree, .line-clamp-for, .line-clamp-five) {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

.title:focus-visible {
  outline: transparent;
}

.title--big-clamp {
  line-clamp: 5;
  -webkit-line-clamp: 5;
}

.title--with-button {
  margin-left: -3px;
}

.title--strong {
  color: var(--foreground-strong);
}

.title--contrast {
  color: var(--foreground-contrast);
}

.title--brand-strong {
  color: var(--foreground-brand-strong);
}

.title--danger {
  color: var(--status-danger-strong);
}

.title-box {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.title-box__badge {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  color: var(--foreground-weak);
}

.text {
  color: var(--foreground-stronger);
  word-break: break-word;
  transition: color 0.3s;
}

.text--with-overflow {
  --letter-size: 7.03px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
}

.text--strong {
  color: var(--foreground-strong);
}

.text--weak {
  color: var(--foreground-weak);
}

.text--weaker {
  color: var(--foreground-weaker);
}

.text--contrast {
  color: var(--foreground-contrast);
}

.text--disabled {
  color: var(--foreground-disabled);
}

.text--brand-strong {
  color: var(--foreground-brand-strong);
}

.text--brand-weak {
  color: var(--foreground-brand-weak);
}

.text--success {
  color: var(--status-success-strong);
}

.text--warning {
  color: var(--status-warning-strong);
}

.text--danger {
  color: var(--status-danger-strong);
}

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

.text--progress {
  color: var(--status-progress-strong);
}

.text--debug {
  color: var(--status-debug-strong);
}

.text--public {
  color: var(--access-public);
}

.text--lock {
  color: var(--access-lock);
}

.text--private {
  color: var(--access-private);
}

.text--data-type-struct {
  color: var(--data-type-struct);
}

.text__value {
  width: calc(var(--letter-size) * var(--overflow-count));
  overflow: hidden;
}

.text__value--overflow {
  display: flex;
  justify-content: flex-end;
}

.empty-text {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: italic;
  color: var(--color-text_300);
}

.empty-text--center {
  text-align: center;
  justify-content: center;
}

.empty-text--center-full {
  height: 100%;
  justify-content: center;
  text-align: center;
}

.empty-text--table-cell {
  color: var(--color-text_200);
}

.empty-text--table-empty {
  justify-content: center;
}

.empty-text--table-empty,
.empty-text--content-empty {
  padding: 8px 16px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border-color_dark);
}

.empty-text--table-empty {
  height: 160px;
}

.empty-text--content-empty {
  height: 80px;
}

.per-page-loader {
  position: sticky;
  left: 0;
}

.per-page-loader .empty-text {
  position: sticky;
  left: var(--padding-container);
}

.line-clamp-one {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  height: fit-content;
}

.line-clamp-two {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  word-break: break-word;
  height: fit-content;
}

.line-clamp-tree {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  word-break: break-word;
  height: fit-content;
}

.line-clamp-for {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  word-break: break-word;
  height: fit-content;
}

.line-clamp-five {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  word-break: break-word;
  height: fit-content;
}

.align-right {
  text-align: right;
}

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

.text-no-shrink {
  flex-shrink: 0;
}

.svg-icon {
  --svg-icon-radius: var(--radius);
  display: block;
  flex-shrink: 0;
  transition: background-color 0.3s, transform 0.3s, opacity 0.3s, mix-blend-mode 0.3s;
}

img.svg-icon {
  object-fit: contain;
  object-position: center;
}

.svg-icon--colored {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.svg-icon--no-colored {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: var(--svg-icon-color);
}

.svg-icon--minimal,
.svg-icon--extra-small,
.svg-icon--small,
.svg-icon--basic-size,
.svg-icon--medium,
.svg-icon--big,
.svg-icon--biggest,
.svg-icon--large,
.svg-icon--extra-big,
.svg-icon--fills,
.svg-icon--full-height,
.svg-icon--error-page,
.svg-icon--button-default {
  width: var(--icon-size);
  min-width: var(--icon-size);
  height: var(--icon-size);
}

.svg-icon--minimal,
.svg-icon--extra-small,
.svg-icon--small,
.svg-icon--button-default {
  --svg-icon-radius: 2px;
}

.svg-icon--minimal {
  --icon-size: 8px;
}

.svg-icon--extra-small {
  --icon-size: 12px;
}

.svg-icon--small {
  --icon-size: 16px;
}

.svg-icon--button-default {
  --icon-size: 18px;
}

.svg-icon--basic-size {
  --icon-size: 24px;
}

.svg-icon--medium {
  --icon-size: 32px;
}

.svg-icon--big {
  --icon-size: 40px;
}

.svg-icon--biggest {
  --icon-size: 48px;
}

.svg-icon--large {
  --icon-size: 64px;
}

.svg-icon--extra-big {
  --icon-size: 100px;
}

.svg-icon--error-page {
  --icon-size: 164px;
}

.svg-icon--fills {
  --icon-size: 100%;
}

.svg-icon--full-height {
  --icon-size: 100%;
  width: auto;
  min-width: auto;
  object-fit: contain;
}

.svg-icon--optional-gray {
  --svg-icon-color: var(--optional-gray);
}

.svg-icon--optional-green {
  --svg-icon-color: var(--optional-green);
}

.svg-icon--optional-teal {
  --svg-icon-color: var(--optional-teal);
}

.svg-icon--optional-lime {
  --svg-icon-color: var(--optional-lime);
}

.svg-icon--optional-blue {
  --svg-icon-color: var(--optional-blue);
}

.svg-icon--optional-indigo {
  --svg-icon-color: var(--optional-indigo);
}

.svg-icon--optional-purple {
  --svg-icon-color: var(--optional-purple);
}

.svg-icon--optional-pink {
  --svg-icon-color: var(--optional-pink);
}

.svg-icon--optional-magenta {
  --svg-icon-color: var(--optional-magenta);
}

.svg-icon--optional-orange {
  --svg-icon-color: var(--optional-orange);
}

.svg-icon--optional-peach {
  --svg-icon-color: var(--optional-peach);
}

.svg-icon--optional-bronze {
  --svg-icon-color: var(--optional-bronze);
}

.svg-icon--optional-gold {
  --svg-icon-color: var(--optional-gold);
}

.svg-icon--optional-brown {
  --svg-icon-color: var(--optional-brown);
}

.svg-icon--optional-gray-stronger {
  --svg-icon-color: var(--optional-gray-stronger);
}

.svg-icon--optional-green-stronger {
  --svg-icon-color: var(--optional-green-stronger);
}

.svg-icon--optional-teal-stronger {
  --svg-icon-color: var(--optional-teal-stronger);
}

.svg-icon--optional-lime-stronger {
  --svg-icon-color: var(--optional-lime-stronger);
}

.svg-icon--optional-blue-stronger {
  --svg-icon-color: var(--optional-blue-stronger);
}

.svg-icon--optional-indigo-stronger {
  --svg-icon-color: var(--optional-indigo-stronger);
}

.svg-icon--optional-purple-stronger {
  --svg-icon-color: var(--optional-purple-stronger);
}

.svg-icon--optional-pink-stronger {
  --svg-icon-color: var(--optional-pink-stronger);
}

.svg-icon--optional-magenta-stronger {
  --svg-icon-color: var(--optional-magenta-stronger);
}

.svg-icon--optional-orange-stronger {
  --svg-icon-color: var(--optional-orange-stronger);
}

.svg-icon--optional-peach-stronger {
  --svg-icon-color: var(--optional-peach-stronger);
}

.svg-icon--optional-bronze-stronger {
  --svg-icon-color: var(--optional-bronze-stronger);
}

.svg-icon--optional-gold-stronger {
  --svg-icon-color: var(--optional-gold-stronger);
}

.svg-icon--optional-brown-stronger {
  --svg-icon-color: var(--optional-brown-stronger);
}

.svg-icon--optional-gray-weak {
  --svg-icon-color: var(--optional-gray-weak);
}

.svg-icon--optional-green-weak {
  --svg-icon-color: var(--optional-green-weak);
}

.svg-icon--optional-teal-weak {
  --svg-icon-color: var(--optional-teal-weak);
}

.svg-icon--optional-lime-weak {
  --svg-icon-color: var(--optional-lime-weak);
}

.svg-icon--optional-blue-weak {
  --svg-icon-color: var(--optional-blue-weak);
}

.svg-icon--optional-indigo-weak {
  --svg-icon-color: var(--optional-indigo-weak);
}

.svg-icon--optional-purple-weak {
  --svg-icon-color: var(--optional-purple-weak);
}

.svg-icon--optional-pink-weak {
  --svg-icon-color: var(--optional-pink-weak);
}

.svg-icon--optional-magenta-weak {
  --svg-icon-color: var(--optional-magenta-weak);
}

.svg-icon--optional-orange-weak {
  --svg-icon-color: var(--optional-orange-weak);
}

.svg-icon--optional-peach-weak {
  --svg-icon-color: var(--optional-peach-weak);
}

.svg-icon--optional-bronze-weak {
  --svg-icon-color: var(--optional-bronze-weak);
}

.svg-icon--optional-gold-weak {
  --svg-icon-color: var(--optional-gold-weak);
}

.svg-icon--optional-brown-weak {
  --svg-icon-color: var(--optional-brown-weak);
}

.svg-icon--stronger {
  --svg-icon-color: var(--foreground-stronger);
}

.svg-icon--strong {
  --svg-icon-color: var(--foreground-strong);
}

.svg-icon--weak {
  --svg-icon-color: var(--foreground-weak);
}

.svg-icon--weaker {
  --svg-icon-color: var(--foreground-weaker);
}

.svg-icon--contrast {
  --svg-icon-color: var(--foreground-contrast);
}

.svg-icon--disabled {
  --svg-icon-color: var(--foreground-disabled);
}

.svg-icon--brand-strong {
  --svg-icon-color: var(--foreground-brand-strong);
}

.svg-icon--brand-weak {
  --svg-icon-color: var(--foreground-brand-weak);
}

.svg-icon--success {
  --svg-icon-color: var(--status-success-strong);
}

.svg-icon--warning {
  --svg-icon-color: var(--status-warning-strong);
}

.svg-icon--danger {
  --svg-icon-color: var(--status-danger-strong);
}

.svg-icon--error {
  --svg-icon-color: var(--status-error-strong);
}

.svg-icon--progress {
  --svg-icon-color: var(--status-progress-strong);
}

.svg-icon--inert {
  --svg-icon-color: var(--status-inert-strong);
}

.svg-icon--inert-weak {
  --svg-icon-color: var(--status-inert-weak);
}

.svg-icon--inert-weaker {
  --svg-icon-color: var(--status-inert-weaker);
}

.svg-icon--debug {
  --svg-icon-color: var(--status-debug-strong);
}

.svg-icon--wait {
  --svg-icon-color: var(--status-wait-strong);
}

.svg-icon--public {
  --svg-icon-color: var(--access-public);
}

.svg-icon--lock {
  --svg-icon-color: var(--access-lock);
}

.svg-icon--private {
  --svg-icon-color: var(--access-private);
}

.svg-icon--admin {
  --svg-icon-color: var(--access-admin);
}

.svg-icon--relation {
  --svg-icon-color: var(--connection-relation);
}

.svg-icon--internal {
  --svg-icon-color: var(--connection-internal);
}

.svg-icon--local {
  --svg-icon-color: var(--connection-local);
}

.svg-icon--priority-high {
  --svg-icon-color: var(--priority-high);
}

.svg-icon--priority-medium {
  --svg-icon-color: var(--priority-medium);
}

.svg-icon--priority-low {
  --svg-icon-color: var(--priority-low);
}

.svg-icon--severity-fatal {
  --svg-icon-color: var(--severity-fatal);
}

.svg-icon--severity-critical {
  --svg-icon-color: var(--severity-critical);
}

.svg-icon--severity-major {
  --svg-icon-color: var(--severity-major);
}

.svg-icon--severity-warning {
  --svg-icon-color: var(--severity-warning);
}

.svg-icon--severity-info {
  --svg-icon-color: var(--severity-info);
}

.svg-icon--severity-unknown {
  --svg-icon-color: var(--severity-unknown);
}

.svg-icon--severity-ok {
  --svg-icon-color: var(--severity-ok);
}

.svg-icon--array {
  --svg-icon-color: var(--data-type-array);
}

.svg-icon--string {
  --svg-icon-color: var(--data-type-string);
}

.svg-icon--string {
  --svg-icon-color: var(--data-type-string);
}

.svg-icon--struct {
  --svg-icon-color: var(--data-type-struct);
}

.svg-icon--guid {
  --svg-icon-color: var(--data-type-guid);
}

.svg-icon--double {
  --svg-icon-color: var(--data-type-double);
}

.svg-icon--char {
  --svg-icon-color: var(--data-type-char);
}

.svg-icon--byte {
  --svg-icon-color: var(--data-type-byte);
}

.svg-icon--int {
  --svg-icon-color: var(--data-type-int);
}

.svg-icon--int64 {
  --svg-icon-color: var(--data-type-int64);
}

.svg-icon--float {
  --svg-icon-color: var(--data-type-float);
}

.svg-icon--bool {
  --svg-icon-color: var(--data-type-bool);
}

.svg-icon--dynamic {
  --svg-icon-color: var(--data-type-dynamic);
}

.svg-icon--wildcard {
  --svg-icon-color: var(--data-type-wildcard);
}

.svg-icon--object {
  --svg-icon-color: var(--data-type-object);
}

.svg-icon--date-time {
  --svg-icon-color: var(--data-type-date-time);
}

.svg-icon--observability-logs {
  --svg-icon-color: var(--observability-logs);
}

.svg-icon--observability-metrics {
  --svg-icon-color: var(--observability-metrics);
}

.svg-icon--green {
  --svg-icon-color: var(--edit-color);
}

.svg-icon--start-events {
  --svg-icon-color: #E98741;
}

.svg-icon--unactive {
  opacity: 0.5;
  filter: grayscale(1);
}

.svg-icon--round {
  border-radius: 50%;
}

.svg-icon--with-radius {
  border-radius: var(--svg-icon-radius);
}

@media (max-height: 816px) {
  .svg-icon--adaptive-height {
    max-height: var(--icon-size);
    height: 2.6vh;
    min-height: 16px;
  }
}
.abbr-icon {
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
  color: var(--foreground-stronger);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}

.abbr-icon--extra-small {
  font-size: 0.5625rem;
  line-height: 0.75rem;
  letter-spacing: 0.0225rem;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.abbr-icon--small {
  font-size: 0.8125rem;
  line-height: 1rem;
  letter-spacing: 0.0325rem;
  width: 24px;
  height: 24px;
}

.abbr-icon--medium {
  font-size: 1.25rem;
  line-height: 1.375rem;
  letter-spacing: 0.05rem;
  width: 40px;
  height: 40px;
}

.abbr-icon--big {
  font-size: 2rem;
  line-height: 2.25rem;
  letter-spacing: 0.08rem;
  width: 64px;
  height: 64px;
}

.abbr-icon--round {
  border-radius: 50%;
  color: var(--foreground-contrast);
}

.indicator-icon {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-text_300);
}

.indicator-icon--active {
  background-color: var(--current-color);
}

.type-icon {
  --type-icon-color: #29C4F0;
  --type-icon-size: 24px;
  width: var(--type-icon-size);
  height: var(--type-icon-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-icon:not(.type-icon--array)::before {
  content: "";
  width: 100%;
  height: 100%;
  mask: url("img/CircleFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/CircleFill.svg") center/cover no-repeat;
  background-color: var(--type-icon-color);
}

.type-icon--string {
  --type-icon-color: #29C4F0;
}

.type-icon--dynamic {
  --type-icon-color: #853892;
}

.type-icon--bool {
  --type-icon-color: #950000;
}

.type-icon--byte {
  --type-icon-color: #f6c322;
}

.type-icon--char {
  --type-icon-color: #b4d346;
}

.type-icon--double {
  --type-icon-color: #3db556;
}

.type-icon--guid {
  --type-icon-color: #f5821f;
}

.type-icon--int {
  --type-icon-color: #cc9966;
}

.type-icon--int64 {
  --type-icon-color: #ac8f27;
}

.type-icon--struct {
  --type-icon-color: #e45777;
}

.type-icon--date {
  --type-icon-color: #e45777;
}

.type-icon--enum {
  --type-icon-color: #23888E;
}

.type-icon--null {
  --type-icon-color: #ecc322;
}

.type-icon--array::before {
  content: "";
  width: 100%;
  height: 100%;
  mask: url("img/Array.svg") center/cover no-repeat;
  -webkit-mask: url("img/Array.svg") center/cover no-repeat;
  background-color: var(--type-icon-color);
}

.type-icon--small {
  --type-icon-size: 12px;
}

.severity-widget {
  position: relative;
  color: var(--severity-color);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  width: 100%;
  height: 100%;
}

.severity-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--severity-bg);
  opacity: 0.24;
  pointer-events: none;
}

.severity-widget--bg-light::before {
  opacity: 0.08;
}

.severity-widget--bg-light .severity-icon--small {
  opacity: 0.5;
}

.severity-widget--without-bg::before {
  display: none;
}

.severity-widget--round {
  border-radius: 20px;
  width: fit-content;
  white-space: nowrap;
}

.severity-widget--round::before {
  border-radius: 20px;
}

.severity-icon {
  --severity-bg: var(--severity-ok);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--background-surface-weakest);
}

.severity-icon:not(:has(.svg-icon)) {
  background-color: var(--severity-bg);
}

.severity-icon .svg-icon {
  --icon-size: 18px;
}

.severity-icon--medium .svg-icon {
  --icon-size: 24px;
}

.severity-icon--small {
  width: 8px;
  height: 8px;
}

.severity-icon--6,
.severity-widget--6 {
  --severity-bg: var(--severity-unknown);
  --severity-color: #6C6C6C;
}

.severity-icon--1,
.severity-widget--1 {
  --severity-bg: var(--severity-fatal);
  --severity-color: #6D0E05;
}

.severity-icon--2,
.severity-widget--2 {
  --severity-bg: var(--severity-critical);
  --severity-color: #B63B2F;
}

.severity-icon--3,
.severity-widget--3 {
  --severity-bg: var(--severity-major);
  --severity-color: #B46233;
}

.severity-icon--4,
.severity-widget--4 {
  --severity-bg: var(--severity-warning);
  --severity-color: #B4980E;
}

.severity-icon--5,
.severity-widget--5 {
  --severity-bg: var(--severity-info);
  --severity-color: #3092BC;
}

.icon-box {
  --bg-icon-box: transparent;
  --size-icon-box: 32px;
  --border-radius-icon-box: 3px;
  --bg-opacity-icon-box: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-box);
  height: var(--size-icon-box);
  position: relative;
}

.icon-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border: 1px solid transparent;
  border-radius: var(--border-radius-icon-box);
  background-color: var(--bg-icon-box);
  opacity: var(--bg-opacity-icon-box);
}

.icon-box .svg-icon {
  position: relative;
}

.icon-box--with-border {
  --border-color-icon-box: transparent;
  border-color: var(--border-color-icon-box);
}

.icon-box--round {
  --border-radius-icon-box: 50%;
}

.icon-box--button-default {
  --size-icon-box: 18px;
}

.icon-box--medium {
  --size-icon-box: 24px;
}

.icon-box--big {
  --size-icon-box: 40px;
}

.icon-box--extra-big {
  --size-icon-box: 48px;
}

.icon-box--biggest {
  --size-icon-box: 64px;
}

.icon-box--gray {
  --bg-icon-box: var(--color-secondary_500);
  --border-color-icon-box: var(--border-color_dark);
}

.icon-box--white {
  --bg-icon-box: var(--bg-default);
  --border-color-icon-box: var(--border-color);
}

.icon-box--secondary {
  --bg-icon-box: var(--color-secondary_300);
  --border-color-icon-box: var(--color-primary_500);
}

.icon-box--complete {
  --bg-icon-box: var(--complete-border-color);
  --border-color-icon-box: var(--complete-color);
}

.icon-box--error {
  --bg-icon-box: var(--color-red_200);
  --border-color-icon-box: var(--color-red_400);
}

.icon-box--warning {
  --bg-icon-box: var(--beta-bage-bg);
  --border-color-icon-box: var(--beta-bage-color);
}

.icon-box--menu-color {
  --bg-icon-box: var(--color-menu_800);
  --border-color-icon-box: var(--color-menu_800);
}

.icon-box--with-blur {
  backdrop-filter: blur(0.9407664537px);
  -webkit-backdrop-filter: blur(0.9407664537px);
}

.ci-state-icon {
  display: flex;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--ci-state-color);
}

.ci-state-icon--unknown,
.ci-state-icon--info {
  --ci-state-color: #B6BBBD;
}

.ci-state-icon--fatal {
  --ci-state-color: #A02919;
}

.ci-state-icon--critical {
  --ci-state-color: #F2422A;
}

.ci-state-icon--major {
  --ci-state-color: #F28727;
}

.ci-state-icon--warning {
  --ci-state-color: #F2C527;
}

.ci-state-icon--ok {
  --ci-state-color: #23CF80;
}

.task-state-icon {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--task-state-color);
}

.task-state-icon::before {
  content: "";
  width: 12px;
  height: 4px;
  border-radius: 1px;
  flex-shrink: 0;
  background-color: var(--task-state-color);
}

.task-state-icon--0 {
  --task-state-color: #FFFFFF;
  color: var(--color-text_800);
}

.task-state-icon--0::before {
  border: 1px solid var(--color-text_300);
}

.task-state-icon--1 {
  --task-state-color: #D9D9D9;
}

.task-state-icon--2 {
  --task-state-color: #E8C54B;
}

.task-state-icon--3 {
  --task-state-color: var(--color-red_500);
}

.task-state-icon--4 {
  --task-state-color: #23CF80;
}

.ci-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  height: fit-content;
}

.ci-icon--archive {
  padding: 2px;
  box-shadow: 0 0 0 1px var(--border-color) inset;
}

.ci-icon--archive .svg-icon {
  filter: invert(74%) sepia(11%) saturate(17%) hue-rotate(20deg) brightness(81%) contrast(89%);
  width: calc(var(--icon-size) - 4px);
  min-width: calc(var(--icon-size) - 4px);
  height: calc(var(--icon-size) - 4px);
}

.ci-icon--unknown .svg-icon {
  filter: invert(78%) sepia(2%) saturate(436%) hue-rotate(152deg) brightness(95%) contrast(92%);
}

.ci-icon--fatal .svg-icon {
  filter: invert(12%) sepia(88%) saturate(3690%) hue-rotate(15deg) brightness(99%) contrast(99%);
}

.ci-icon--critical .svg-icon {
  filter: invert(40%) sepia(38%) saturate(5604%) hue-rotate(340deg) brightness(96%) contrast(99%);
}

.ci-icon--major .svg-icon {
  filter: invert(72%) sepia(59%) saturate(4599%) hue-rotate(346deg) brightness(103%) contrast(90%);
}

.ci-icon--warning .svg-icon {
  filter: invert(81%) sepia(51%) saturate(1067%) hue-rotate(341deg) brightness(107%) contrast(90%);
}

.ci-icon--ok .svg-icon {
  filter: invert(65%) sepia(83%) saturate(439%) hue-rotate(95deg) brightness(89%) contrast(86%);
}

.ci-icon--maintenance .svg-icon {
  filter: invert(11%) sepia(65%) saturate(5070%) hue-rotate(259deg) brightness(122%) contrast(102%);
}

.icon-sprite--gray {
  fill: var(--optional-gray);
}

.icon-sprite--green {
  fill: var(--optional-green);
}

.icon-sprite--teal {
  fill: var(--optional-teal);
}

.icon-sprite--blue {
  fill: var(--optional-blue);
}

.icon-sprite--purple {
  fill: var(--optional-purple);
}

.icon-sprite--pink {
  fill: var(--optional-pink);
}

.icon-sprite--peach {
  fill: var(--optional-peach);
}

.icon-sprite--gold {
  fill: var(--optional-gold);
}

.icon-sprite--brown {
  fill: var(--optional-brown);
}

.dropdown {
  flex-shrink: 0;
  flex-grow: 0;
  width: fit-content;
}

.dropdown:not(.dropdown--select) .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored) > .svg-icon {
  --svg-icon-color: var(--foreground-weak);
}

.dropdown:not(.dropdown--select) .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored):not(:disabled):hover > .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.dropdown.dropdown--select .dropdown-menu__item--footer .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored) > .svg-icon {
  --svg-icon-color: var(--foreground-weak);
}

.dropdown.dropdown--select .dropdown-menu__item--footer .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored):not(:disabled):hover > .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.dropdown--nested {
  width: 100%;
  height: 100%;
}

.dropdown__toggle {
  width: 100%;
}

.dropdown-menu {
  position: fixed;
  z-index: -1;
  max-width: 500px;
  min-height: 32px;
  max-height: 40vh;
  margin: 4px 0 !important;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-menu-modal);
  background-color: var(--background-surface-weakest);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dropdown-menu:not(dropdown-menu--tooltip):not(.dropdown-menu--tooltip-dark) {
  transition: opacity 0.3s, z-index 0.3s;
}

.dropdown-menu > .scroll-box {
  transform: perspective(0);
}

.dropdown-menu--tooltip {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  margin: 0 !important;
  padding: 16px 8px;
  padding-right: 32px;
}

.dropdown-menu--tooltip-dark {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  padding: 4px 8px;
  color: var(--foreground-contrast);
  background-color: var(--background-neutral-strong);
}

.dropdown-menu--tooltip-dark .title,
.dropdown-menu--tooltip-dark .text {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  color: var(--foreground-contrast);
}

.dropdown-menu--tooltip-dark > .flex-box--column {
  margin: auto 0;
}

.dropdown-menu--show {
  opacity: 1;
  pointer-events: all;
  z-index: 9999;
}

.dropdown-menu--show.dropdown-menu--tooltip, .dropdown-menu--show.dropdown-menu--tooltip-dark {
  transition: opacity 0.3s 0.4s;
  will-change: opacity;
}

.dropdown-menu--new:not(.dropdown-menu--select) .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored) > .svg-icon {
  --svg-icon-color: var(--foreground-weak);
}

.dropdown-menu--new:not(.dropdown-menu--select) .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored):not(:disabled):hover > .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.dropdown-menu--select .dropdown-menu__item--footer .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored) > .svg-icon {
  --svg-icon-color: var(--foreground-weak);
}

.dropdown-menu--select .dropdown-menu__item--footer .button-menu:not(.button-menu--warning):not(.button-menu--primary):not(.button-menu--icon-is-colored):not(:disabled):hover > .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.dropdown-menu--chiplist {
  margin: 4px 0 !important;
  max-width: none;
}

.dropdown-menu--chiplist .accordion {
  width: 100%;
}

.dropdown-menu--chiplist .accordion .accordion__item {
  border-radius: 0;
}

.dropdown-menu__list:not(:last-of-type) {
  border-bottom: 1px solid var(--border-neutral-strong);
}

.dropdown-menu__list:first-child .dropdown-menu__item:first-child .button-menu {
  border-radius: var(--radius) var(--radius) 0 0;
}

.dropdown-menu__list:last-child .dropdown-menu__item:last-child .button-menu {
  border-radius: 0 0 var(--radius) var(--radius);
}

.dropdown-menu__header {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--border-neutral-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 16px;
  background-color: var(--background-surface-weakest);
  color: var(--foreground-weak);
}

.dropdown-menu__header input {
  color: var(--foreground-stronger);
}

.dropdown-menu__item:has(.dropdown-menu__item-actions) {
  position: relative;
}

.dropdown-menu__item--footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background-color: var(--background-surface-weakest);
  border-top: 1px solid var(--border-neutral-strong);
}

.dropdown-menu__item-actions {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translate(0, -50%);
}

.dropdown-menu__item-actions:has(.checkbox--without-events) {
  pointer-events: none;
}

.dropdown-menu__line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--border-neutral-strong);
  margin: 4px 0;
}

.button-menu {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  --button-bg: var(--background-neutral-weaker);
  --button-bg-hover: var(--background-neutral-weaker-hover);
  --button-bg-active: var(--background-neutral-weaker-active);
  --button-text-color: var(--foreground-stronger);
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--button-text-color);
  word-break: break-word;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  background-color: var(--button-bg);
  transition: background-color 0.3s;
}

.button-menu:focus {
  outline: transparent;
}

.button-menu:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
}

.button-menu:not(:disabled):not(.button-menu--disabled):not(.button-menu--selected):hover {
  background-color: var(--button-bg-hover);
}

.button-menu:not(:disabled):not(.button-menu--disabled):not(.button-menu--selected):active {
  background-color: var(--button-bg-active);
}

.button-menu:disabled, .button-menu.button-menu--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-menu .button {
  justify-content: flex-start;
}

.button-menu .accordion {
  margin-left: -8px;
}

.button-menu .structs-tree {
  gap: 0;
}

.button-menu--with-actions-right {
  padding-right: var(--padding-dropdown-button);
}

.button-menu--nested:not(:disabled) {
  padding-right: 8px;
}

.button-menu--nested:not(:disabled)::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: auto;
  mask: url("img/ArrowRight.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
  transition: background-color 0.3s;
}

.button-menu--nested:not(:disabled):hover::after {
  background-color: var(--foreground-brand-strong);
}

.button-menu--warning {
  --button-text-color: var(--status-danger-strong);
}

.button-menu--warning .svg-icon {
  --svg-icon-color: var(--status-danger-strong);
}

.button-menu--primary {
  --button-text-color: var(--foreground-brand-strong);
}

.button-menu--primary .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.button-menu--secondary {
  --button-bg: var(--background-neutral-weak);
  --button-bg-hover: var(--background-neutral-weak-hover);
  --button-bg-active: var(--background-neutral-weak-active);
  --button-text-color: var(--foreground-brand-strong);
}

.button-menu--selected {
  background-color: var(--background-neutral-weaker-active);
}

.button-menu--reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.button-menu--reverse > .svg-icon:first-child {
  margin-left: auto;
}

.button-menu--no-hover {
  --button-bg-hover: transparent;
}

.button-menu--without-padding {
  padding-top: 0;
  padding-bottom: 0;
}

.item-menu {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  --button-bg-hover: var(--background-neutral-weaker-hover);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: default;
}

.item-menu .checkbox {
  width: 100%;
  align-self: stretch;
  align-items: center;
  padding: 10px 16px;
  padding-left: 19px;
}

.item-menu .checkbox::after {
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
}

.item-menu .checkbox:has(.checkbox__input:checked):not(.checkbox--switch) {
  background-color: var(--background-neutral-weaker-active);
}

.item-menu .checkbox:has(.checkbox__input:checked):not(.checkbox--switch):hover {
  background-color: var(--background-neutral-weaker-active);
}

.item-menu .checkbox:not(:has(.checkbox__input:disabled)):hover {
  background-color: var(--button-bg-hover);
}

.item-menu .checkbox__label {
  align-items: center;
  padding-top: 0 !important;
}

.item-menu .checkbox--switch {
  padding-left: 18px;
}

.item-menu .checkbox--switch::after {
  top: 50%;
  left: 18px;
  transform: translate(0, -50%);
}

.item-menu .checkbox--switch:has(.checkbox__input:checked)::after {
  left: 34px;
}

.item-menu .checkbox--switch-reverse::after {
  left: auto;
  right: 32px;
}

.item-menu .checkbox--switch-reverse:has(.checkbox__input:checked)::after {
  right: 16px;
  left: auto;
}

.snackbar-stack {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  width: fit-content;
  min-width: 160px;
  max-height: 100vh;
  background-color: transparent;
}

.snackbar-stack .snackbar {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: auto;
  margin-right: 24px;
  margin-left: 24px;
  padding: 8px;
  padding-right: 4px;
}

.snackbar-stack .snackbar:first-child {
  margin-top: 24px;
}

.snackbar-stack .snackbar:last-child {
  margin-bottom: 24px;
}

.snackbar-stack--center {
  margin: 0 auto;
  left: 64px;
  right: 0;
}

.snackbar-stack--left {
  left: 64px;
  right: auto;
}

.snackbar-stack--right {
  right: 24px;
  left: auto;
  margin-left: 64px;
}

.snackbar {
  position: fixed;
  top: 24px;
  margin: 0 auto;
  left: 88px;
  right: 24px;
  z-index: 9999;
  max-width: 640px;
  width: fit-content;
  min-width: 160px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--background-neutral-strong);
  color: var(--foreground-contrast);
  padding: 8px 16px;
  border-radius: 8px;
  width: fit-content;
  opacity: 0;
  flex-shrink: 0;
  pointer-events: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1215686275), 0px 4px 4px 0px rgba(0, 0, 0, 0.1019607843), 0px 10px 6px 0px rgba(0, 0, 0, 0.0588235294), 0px 18px 7px 0px rgba(0, 0, 0, 0.0196078431), 0px 28px 8px 0px rgba(0, 0, 0, 0);
  transition: opacity 0.3s;
}

.snackbar--show-always {
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 16px;
  z-index: 9998;
}

.snackbar--group::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -3px;
  left: 8px;
  z-index: -1;
  height: 100%;
  border-radius: 8px;
  background-color: #292929;
}

.snackbar--warning .snackbar__body::before,
.snackbar--success .snackbar__body::before,
.snackbar--info .snackbar__body::before,
.snackbar--error .snackbar__body::before {
  content: "";
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.snackbar--warning .snackbar__body::before {
  mask-image: url("img/StatesWarning.svg");
  -webkit-mask-image: url("img/StatesWarning.svg");
  background-color: var(--status-warning-strong);
}

.snackbar--success .snackbar__body::before {
  mask-image: url("img/StatesSuccess.svg");
  -webkit-mask-image: url("img/StatesSuccess.svg");
  background-color: var(--status-success-strong);
}

.snackbar--info .snackbar__body::before {
  mask-image: url("img/StatesInfo.svg");
  -webkit-mask-image: url("img/StatesInfo.svg");
  background-color: var(--status-inert-weak);
}

.snackbar--error .snackbar__body::before {
  mask-image: url("img/StatesError.svg");
  -webkit-mask-image: url("img/StatesError.svg");
  background-color: var(--status-danger-strong);
}

.snackbar--show {
  opacity: 1;
  pointer-events: all;
}

.snackbar__body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
}

.snackbar__close:hover .svg-icon {
  background-color: var(--foreground-contrast);
}

#blazor-error-ui {
  gap: 24px;
  background-color: #3D3D3D;
  position: fixed;
  top: 24px;
  right: 24px;
  left: 88px;
  z-index: 9999;
  min-width: 160px;
  max-width: 640px;
  width: fit-content;
  min-height: 40px;
  margin: 0 auto;
  padding: 12px 104px 12px 40px;
  border-radius: 8px;
  color: var(--gray-00);
  display: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1215686275), 0px 4px 4px 0px rgba(0, 0, 0, 0.1019607843), 0px 10px 6px 0px rgba(0, 0, 0, 0.0588235294), 0px 18px 7px 0px rgba(0, 0, 0, 0.0196078431), 0px 28px 8px 0px rgba(0, 0, 0, 0);
}

#blazor-error-ui::before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translate(0, -50%);
  mask-image: url("img/StatesError.svg");
  -webkit-mask-image: url("img/StatesError.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: var(--status-danger-strong);
}

#blazor-error-ui .reload {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translate(0, -50%);
  color: var(--foreground-brand-weak);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent, transparent);
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  transition: background-size 0.3s;
}

#blazor-error-ui .reload:hover, #blazor-error-ui .reload:focus {
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

#blazor-error-ui .dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translate(0, -50%);
  transition: color 0.3s;
}

#blazor-error-ui .dismiss::before {
  content: "";
  width: 18px;
  height: 18px;
  mask: url("img/Close.svg") center/cover no-repeat;
  -webkit-mask: url("img/Close.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
  transition: background-color 0.3s;
}

#blazor-error-ui .dismiss:hover::before {
  background-color: var(--foreground-contrast);
}

.footer {
  position: sticky;
  bottom: 0px;
  z-index: 6;
  background-color: var(--background-surface-weakest);
}

.footer--with-border {
  box-shadow: 0 1px 0 0 var(--border-neutral-strong) inset;
}

.footer__top {
  padding-top: 16px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
  transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
}

.footer__bottom::-webkit-scrollbar {
  display: none;
}

.footer__right-column {
  margin-left: auto;
}

.footer__bottom--hide {
  height: 0;
  overflow-y: hidden;
  padding-top: 0;
  padding-left: 4px;
  padding-bottom: 0;
  margin-left: -4px;
}

.footer__actions {
  display: flex;
  gap: 16px;
}

.footer__actions:last-child {
  margin-left: auto;
}

.modal-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
}

.modal-container.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 43, 77, 0.15);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1;
}

.modal {
  max-width: 80vw;
  width: 100%;
  border-radius: var(--radius);
  position: relative;
  z-index: 2;
}

.modal--with-animation {
  display: grid;
  grid-template-rows: 0fr;
  will-change: grid-template-rows;
  transition: grid-template-rows 0.3s ease-out;
}

.modal--with-animation .scroll-box {
  overflow: hidden;
}

.modal--show {
  grid-template-rows: 1fr;
}

.modal--show .scroll-box {
  animation-name: open-modal-scroll-box;
  animation-duration: 0s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

.modal--show .scroll-box--both {
  animation-name: open-modal-scroll-box-both;
}

.modal__wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--background-surface-weakest);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 132px;
  max-height: calc(100vh - 64px);
  box-shadow: var(--modal-shadow);
}

.modal__wrapper .header__body:not(.header__body--no-height) .text--weak {
  padding-bottom: 16px;
}

.modal__wrapper > .preloader {
  font-size: 0;
  margin-top: 32px;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  --button-radius: 0 var(--radius);
}

.modal__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-height: 100%;
  min-height: 0;
}

.modal__inner:first-child {
  padding-top: 48px;
}

.modal__inner:has(.footer__bottom--hide) .modal__body, .modal__inner:not(:has(.footer)) .modal__body {
  padding-bottom: 32px;
}

.modal__inner:has(.footer__top) .modal__body {
  padding-bottom: 16px;
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  max-height: 100%;
  flex-grow: 1;
  padding-top: 4px;
  padding-bottom: 16px;
}

.modal__body:last-child {
  padding-bottom: 24px;
}

.modal__body + .footer {
  margin-top: 0;
}

.modal--minimal {
  width: 280px !important;
}

.modal--extra-small {
  width: 394px !important;
}

.modal--small {
  width: 480px !important;
}

.modal--medium {
  width: 640px !important;
}

.modal--big {
  width: 800px !important;
}

.modal--extra-big {
  width: 998px !important;
}

.modal--full-width {
  width: calc(100vw - 64px) !important;
  max-width: calc(100vw - 64px) !important;
}

.modal__wrapper--heights-medium {
  height: 652px;
}

.modal__wrapper--heights-full {
  height: calc(100vh - 64px);
}

.modal--diagram {
  cursor: default;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}

.modal--diagram .modal-close {
  top: 6px;
}

.modal--diagram .modal__wrapper {
  max-height: 100%;
  margin: 6px 0;
}

.tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  box-shadow: 0 -1px 0 0 var(--border-neutral-strong) inset;
}

.tabs:has(.tabs__button--icon) {
  gap: 8px;
}

.tabs__button {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 100%;
  min-height: 32px;
  padding: 0 2px 8px 2px;
  color: var(--foreground-stronger);
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

.tabs__button:has(.tabs__badge) {
  padding-right: 0;
}

.tabs__button:focus {
  outline: transparent;
}

.tabs__button:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--radius-small);
}

.tabs__button:not(:disabled):not(.tabs-button--disabled):hover {
  color: var(--foreground-brand-strong);
}

.tabs__button:not(:disabled):not(.tabs-button--disabled):hover .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.tabs__button::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 0;
  height: 2px;
  background-color: var(--foreground-brand-strong);
  transition: width 0.3s;
}

.tabs__button--icon {
  padding-right: 8px;
  padding-left: 8px;
}

.tabs__badge {
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
  color: var(--foreground-weak);
  margin-bottom: 8px;
}

.tabs__button--active {
  color: var(--foreground-brand-strong);
}

.tabs__button--active::before {
  width: 100%;
}

.tabs__button--active .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.tab-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.tab-content__item {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tab-content__item--active {
  display: flex;
}

.tab-content__body {
  padding-top: 32px;
  height: 100%;
}

.b-tooltip {
  cursor: help;
}

.b-tooltip > .button {
  cursor: help;
}

.b-tooltip-inline {
  display: inline-block;
}

.tippy-box {
  max-width: 500px;
  background-color: var(--background-neutral-strong);
}

.tippy-box[data-state=visible] {
  transition-delay: 0.3s;
}

.tippy-box[style="transition-duration: 0ms;"] {
  transition-delay: 0s;
}

.tippy-box[data-placement^=top] {
  margin-bottom: -6px;
}

.tippy-box[data-placement^=right] {
  margin-left: -6px;
}

.tippy-box[data-placement^=bottom] {
  margin-top: -6px;
}

.tippy-box[data-placement^=left] {
  margin-right: -6px;
}

.tippy-box .preloader {
  position: static;
  flex-direction: row;
  transform: none;
  color: var(--foreground-contrast);
}

.tippy-box .preloader::before {
  background-color: var(--foreground-contrast);
  width: 16px;
  height: 16px;
}

.tippy-content {
  max-height: calc(100vh - 4px);
  overflow: auto;
}

.tippy-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.tippy-content::-webkit-scrollbar-track {
  background-color: var(--background-neutral-strong-hover);
}

.tippy-content::-webkit-scrollbar-thumb {
  background-color: var(--foreground-weak);
  border: 2px solid var(--background-neutral-strong-hover);
  border-radius: var(--scrollbar-radius);
}

.tippy-arrow {
  display: none;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.accordion__item {
  width: 100%;
  transition: background-color 0.3s;
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: fit-content;
  transition: padding-top 0.3s;
}

.accordion__header:has(.accordion__toggle.button--small) + .accordion__content:not(.accordion__content--without-padding) {
  padding-left: 28px;
}

.accordion__toggle {
  --button-text-color: var(--foreground-stronger);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  padding-right: 4px;
}

.accordion__toggle.button--with-caret {
  min-width: 32px;
}

.accordion__toggle.button--with-caret:not(.button--icon) {
  padding-left: 4px;
}

.accordion__toggle.button--with-caret:not(.button--icon)::after {
  margin-right: 4px;
}

.accordion__toggle.button--with-caret:not(.button--icon).button--small {
  padding-left: 0;
}

.accordion__toggle.button--with-caret:not(.button--icon).button--small::after {
  margin-right: 0;
}

.accordion__toggle.button--with-caret.button--icon {
  padding-right: 0;
}

.accordion__toggle.button--with-caret::after {
  transform: rotate(0deg);
  order: -1;
  margin-left: 0;
}

.accordion__toggle.button--with-caret.button--focused::after {
  transform: rotate(90deg);
}

.accordion__toggle.button--small {
  min-width: 24px;
}

.accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-left: 36px;
  will-change: grid-template-rows;
  transition: grid-template-rows 0.3s, padding-bottom 0.3s, padding-top 0.3s;
}

.accordion__content--without-padding {
  padding-left: 0;
}

.accordion__content--active {
  grid-template-rows: 1fr;
  padding-top: 4px;
  overflow: visible;
}

.accordion__content--active > .accordion__inner {
  animation-name: open-accordion;
}

.accordion__inner {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  animation-name: open-modal-scroll-box;
  animation-duration: 0s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

.accordion--with-background > .accordion__item > .accordion__header,
.accordion--with-background > .accordion__item > .accordion__content {
  padding-right: 32px;
}

.accordion--with-background > .accordion__item:has(.accordion__content--without-padding) > .accordion__header,
.accordion--with-background > .accordion__item:has(.accordion__content--without-padding) > .accordion__content--without-padding {
  padding-right: 8px;
}

.accordion--with-background > .accordion__item:has(.accordion__content--without-padding) > .accordion__content--without-padding {
  padding-left: 8px;
}

.accordion--with-background .accordion__item {
  border-radius: 8px;
}

.accordion--with-background .accordion__item--active {
  background-color: var(--background-surface-weaker);
}

.accordion--with-background .accordion__item--active .accordion__header {
  padding-top: 8px;
}

.accordion--with-background .accordion__content--active {
  padding-top: 8px;
  padding-bottom: 8px;
}

.accordion--with-counter > .accordion__item {
  counter-increment: counter;
  position: relative;
}

.accordion--with-counter > .accordion__item:first-child > .accordion__header::after {
  top: 4px;
}

.accordion--with-counter > .accordion__item:not(:last-child):not(:first-child) > .accordion__header::after {
  height: 100%;
}

.accordion--with-counter > .accordion__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 12px;
  z-index: 0;
  width: 1px;
  height: calc(100% + 32px);
  background-color: var(--border-brand-weak);
}

.accordion--with-counter > .accordion__item > .accordion__header {
  position: relative;
  z-index: 3;
}

.accordion--with-counter > .accordion__item > .accordion__header:has(.accordion__toggle:focus-visible) {
  background-color: var(--background-surface-weakest);
  z-index: 4;
}

.accordion--with-counter > .accordion__item > .accordion__header:has(.accordion__toggle:focus-visible)::after {
  opacity: 0;
}

.accordion--with-counter > .accordion__item > .accordion__header .accordion__toggle {
  padding-left: 0;
}

.accordion--with-counter > .accordion__item > .accordion__header .accordion__toggle::after {
  margin-right: 0;
}

.accordion--with-counter > .accordion__item > .accordion__header .accordion__toggle::before {
  content: counter(counter);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  position: relative;
  z-index: 1;
  order: -2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-brand-strong);
  background-color: var(--background-surface-weakest);
}

.accordion--with-counter > .accordion__item > .accordion__header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 0;
  width: 1px;
  height: calc(100% - 4px);
  background-color: var(--border-brand-weak);
}

.accordion--with-counter > .accordion__item > .accordion__content {
  padding-left: 56px;
}

.accordion--with-counter > .accordion__item > .accordion__content--without-padding {
  padding-left: 24px;
}

.accordion--with-sticky-header::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  z-index: 7;
  width: 100%;
  height: 8px;
  margin-bottom: -20px;
  background-color: var(--background-surface-weakest);
}

.accordion--with-sticky-header > .accordion__item > .accordion__header {
  background-color: var(--background-surface-weakest);
  position: sticky;
  top: 3.9px;
  z-index: 6;
}

.markdown-container,
.editor-preview {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  line-height: 1.125rem;
  color: var(--foreground-stronger);
  word-wrap: break-word;
}

.markdown-container h1:not(:last-child),
.markdown-container h2:not(:last-child),
.markdown-container h3:not(:last-child),
.markdown-container h6:not(:last-child),
.editor-preview h1:not(:last-child),
.editor-preview h2:not(:last-child),
.editor-preview h3:not(:last-child),
.editor-preview h6:not(:last-child) {
  margin-bottom: 16px;
}

.markdown-container h1:not(:first-child),
.markdown-container h2:not(:first-child),
.markdown-container h3:not(:first-child),
.editor-preview h1:not(:first-child),
.editor-preview h2:not(:first-child),
.editor-preview h3:not(:first-child) {
  margin-top: 32px;
}

.markdown-container h1,
.editor-preview h1 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
}

.markdown-container h2,
.editor-preview h2 {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
}

.markdown-container h3,
.markdown-container h4,
.editor-preview h3,
.editor-preview h4 {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
}

.markdown-container h4:not(:last-child),
.markdown-container h5:not(:last-child),
.editor-preview h4:not(:last-child),
.editor-preview h5:not(:last-child) {
  margin-bottom: 8px;
}

.markdown-container h4:not(:first-child),
.markdown-container h5:not(:first-child),
.markdown-container h6:not(:first-child),
.editor-preview h4:not(:first-child),
.editor-preview h5:not(:first-child),
.editor-preview h6:not(:first-child) {
  margin-top: 24px;
}

.markdown-container h5,
.editor-preview h5 {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.markdown-container h6,
.editor-preview h6 {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
}

.markdown-container p,
.editor-preview p {
  white-space: pre-wrap;
}

.markdown-container p:not(:last-child),
.editor-preview p:not(:last-child) {
  margin-bottom: 16px;
}

.markdown-container strong,
.editor-preview strong {
  font-weight: 700;
}

.markdown-container ul,
.markdown-container ol,
.editor-preview ul,
.editor-preview ol {
  margin: 0;
  padding-left: 24px;
}

.markdown-container ul:not(:last-child),
.markdown-container ol:not(:last-child),
.editor-preview ul:not(:last-child),
.editor-preview ol:not(:last-child) {
  margin-bottom: 16px;
}

.markdown-container ul > li,
.editor-preview ul > li {
  list-style: disc;
}

.markdown-container ol > li,
.editor-preview ol > li {
  list-style: decimal;
}

.markdown-container img,
.editor-preview img {
  object-fit: contain;
  margin-bottom: 16px;
}

.markdown-container a,
.editor-preview a {
  display: inline-block;
  color: var(--foreground-brand-strong);
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--foreground-brand-weak), var(--foreground-brand-weak));
  background-position: 0 93%, 0 93%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  transition: background-size 0.3s;
}

.markdown-container a:hover, .markdown-container a:focus-visible,
.editor-preview a:hover,
.editor-preview a:focus-visible {
  color: var(--foreground-brand-strong);
  text-decoration: none;
  background-size: 100% 1px, 100% 1px;
}

.markdown-container a:focus,
.editor-preview a:focus {
  outline: transparent;
}

.markdown-container a:focus-visible,
.editor-preview a:focus-visible {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: var(--radius-small);
}

.markdown-container pre,
.editor-preview pre {
  width: 100%;
}

.markdown-container pre > code,
.editor-preview pre > code {
  width: 100%;
  margin: 0;
}

.markdown-container pre:not(:last-child),
.editor-preview pre:not(:last-child) {
  margin-bottom: 16px;
}

.markdown-container code,
.editor-preview code {
  --letter-size: 5.95px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  display: inline-block;
  padding: 1px 4px;
  border-radius: 2px;
  background-color: var(--background-neutral-weak);
  white-space: pre-wrap;
  max-width: 100%;
}

.markdown-container blockquote,
.editor-preview blockquote {
  padding: 8px 0 8px 10px;
  width: fit-content;
  max-width: 100%;
  position: relative;
}

.markdown-container blockquote:not(:last-child),
.editor-preview blockquote:not(:last-child) {
  margin-bottom: 16px;
}

.markdown-container blockquote::before,
.editor-preview blockquote::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0px;
  z-index: 2;
  height: calc(100% - 16px);
  width: 2px;
  border-left: 2px solid var(--border-neutral-stronger);
}

.markdown-container blockquote p,
.editor-preview blockquote p {
  margin-bottom: 0;
}

.markdown-container blockquote p:not(:last-child),
.editor-preview blockquote p:not(:last-child) {
  margin-bottom: 8px;
}

.markdown-container table:not([class]),
.editor-preview table:not([class]) {
  border-collapse: collapse;
  border: 1px solid var(--border-neutral-strong);
  border-spacing: 1px;
}

.markdown-container table:not([class]):not(:last-child),
.editor-preview table:not([class]):not(:last-child) {
  margin-bottom: 24px;
}

.markdown-container thead:not([class]),
.editor-preview thead:not([class]) {
  background-color: var(--background-surface-weaker);
}

.markdown-container th:not([class]),
.markdown-container td:not([class]),
.editor-preview th:not([class]),
.editor-preview td:not([class]) {
  border: 1px solid var(--border-neutral-strong);
  min-height: 40px;
  height: 40px;
  padding: 8px;
}

.markdown-container td:not([class]),
.editor-preview td:not([class]) {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.markdown-container--field {
  padding: 4px 8px;
  border-radius: var(--radius-small);
  transition: background-color 0.3s;
  cursor: text;
  position: relative;
  min-height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.markdown-container--field:hover:hover {
  background-color: var(--background-surface-weakest-hover);
}

.markdown-container--field::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--border-neutral-strong);
  pointer-events: none;
}

.cropper-image {
  width: 330px;
  height: 330px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.cropper-hide {
  display: none;
}

.original-save-hide {
  display: none;
}

.cropper-image__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.cropper-image__input:hover + .cropper-image__inner {
  border-style: solid;
}

.cropper-image__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary_100);
  border: 1px dashed var(--border-brand-strong);
  border-radius: 8px;
}

.cropper-image__inner::before {
  content: "";
  width: 115px;
  height: 56px;
  background: url("img/CropperIcon.svg") center/cover no-repeat;
  margin-bottom: 8px;
}

.cropper-image__title {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
}

.cropper-image__text {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 380;
  letter-spacing: -0.01375rem;
  color: var(--foreground-weak);
  margin-bottom: 20px;
}

.cropper-image__button {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  color: var(--foreground-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  background-color: var(--background-surface-weakest);
  padding: var(--button-padding);
  border-radius: var(--radius-small);
  width: fit-content;
  flex-shrink: 0;
}

.image-list {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100% !important;
  background-color: var(--color-primary_100);
}

.cropper-field {
  --cropper-result-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cropper-result {
  border-radius: var(--cropper-result-radius);
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

.cropper-field--round-icon {
  --cropper-result-radius: 50%;
}

.split-view {
  height: 100%;
  min-height: 0;
  display: flex;
}

.split-sidebar--with-border:not(:last-child),
.split-content--with-border:not(:last-child) {
  border-right: 1px solid var(--border-neutral-strong);
}

.split-content {
  flex-grow: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 400px;
}

.split-content__body {
  padding-top: 32px;
  padding-bottom: 32px;
  height: 100%;
}

.split-sidebar {
  --sidebar-width: 360px;
  opacity: 1;
  max-width: var(--sidebar-width);
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  transition: width 0.3s, min-width 0.3s, padding-right 0.3s, padding-left 0.3s;
}

.split-sidebar.split-sidebar--hidden {
  width: 0;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  opacity: 0;
}

@media (max-width: 1400px) {
  .split-sidebar--with-adaptive {
    max-width: calc(var(--sidebar-width) - 50px);
    width: calc(var(--sidebar-width) - 50px);
    min-width: calc(var(--sidebar-width) - 50px);
  }
}
@media (max-width: 1200px) {
  .split-sidebar--with-adaptive {
    max-width: calc(var(--sidebar-width) - 100px);
    width: calc(var(--sidebar-width) - 100px);
    min-width: calc(var(--sidebar-width) - 100px);
  }
}
.split-sidebar__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  padding-bottom: 8px;
  background-color: var(--bg-under-text);
}

.split-sidebar__header--with-border {
  border-bottom: 1px solid var(--border-neutral-strong);
}

.split-sidebar__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.split-sidebar__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.split-sidebar__item,
.split-viev-item {
  display: flex;
  min-height: 64px;
  flex-shrink: 0;
}

.split-sidebar__item > .button--fills,
.split-viev-item > .button--fills {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  justify-content: flex-start;
  padding-left: 32px;
  padding-top: 8px;
  padding-bottom: 8px;
  height: auto;
}

.split-sidebar__item > .button--big-radius,
.split-viev-item > .button--big-radius {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 8px;
}

.split-sidebar__item:has(> .actions-right-column) .button--active + .actions-right-column *[class^=invisible-element-],
.split-sidebar__item:has(> .actions-right-column) .button--active + .actions-right-column *[class*=" invisible-element-"],
.split-viev-item:has(> .actions-right-column) .button--active + .actions-right-column *[class^=invisible-element-],
.split-viev-item:has(> .actions-right-column) .button--active + .actions-right-column *[class*=" invisible-element-"] {
  opacity: 1;
}

.split-sidebar__item:has(> .actions-right-column) > .dropdown,
.split-viev-item:has(> .actions-right-column) > .dropdown {
  margin-right: calc(var(--padding-split-button) * -1);
}

.split-sidebar__item:has(> .actions-right-column) > .dropdown .dropdown__toggle .button,
.split-viev-item:has(> .actions-right-column) > .dropdown .dropdown__toggle .button {
  padding-right: var(--padding-split-button);
  height: auto;
}

.split-sidebar__item:has(> .actions-right-column) > .button,
.split-viev-item:has(> .actions-right-column) > .button {
  padding-right: var(--padding-split-button);
  margin-right: calc(var(--padding-split-button) * -1);
  height: auto;
}

.split-sidebar__item:has(> .actions-right-column) > .actions-right-column,
.split-viev-item:has(> .actions-right-column) > .actions-right-column {
  padding-right: 8px;
}

.split-sidebar__item--medium {
  min-height: 48px;
}

.split-sidebar__item--small {
  min-height: 40px;
}

.steps {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
}

.steps--without-steps {
  display: none;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.steps__item:not(:last-child) {
  flex-grow: 1;
  position: relative;
}

.steps__item:not(:last-child)::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--border-neutral-strong);
}

.steps__button {
  --marker-bg: var(--background-neutral-weaker);
  --marker-bg-hover: var(--background-neutral-weaker-hover);
  --marker-bg-active: var(--background-neutral-weaker-active);
  --marker-color: var(--foreground-stronger);
  --marker-border-color: currentColor;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  color: var(--foreground-stronger);
  transition: color 0.3s;
}

.steps__button:focus {
  outline: transparent;
}

.steps__button:hover:not(.steps__button--active):has(.steps__marker) .steps__marker {
  background-color: var(--marker-bg-hover);
}

.steps__button:focus-visible:not(.steps__button--active):has(.steps__marker) .steps__marker {
  box-shadow: 0 0 0 1px currentColor, 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus);
}

.steps__button:focus-visible:has(.steps__marker) .steps__marker {
  box-shadow: 0 0 0 1px var(--background-brand), 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus);
}

.steps__button:active:not(.steps__button--active):has(.steps__marker) .steps__marker {
  background-color: var(--marker-bg-active);
}

.steps__button:disabled {
  opacity: 0.6;
}

.steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 32px;
  border-radius: 10px;
  padding: 4px;
  background-color: var(--marker-bg);
  box-shadow: 0 0 0 1px var(--marker-border-color);
  color: var(--marker-color);
  transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

.steps__button--active {
  --marker-bg: var(--background-brand);
  --marker-border-color: var(--background-brand);
  --marker-color: var(--foreground-contrast);
  color: var(--foreground-brand-strong);
  cursor: default;
}

.steps-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.steps-content + .footer {
  margin-top: 24px;
}

.steps-content__item {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s;
}

.steps-content__item > .footer {
  margin-top: 24px;
}

.steps-content__item--active {
  opacity: 1;
  position: static;
  pointer-events: all;
  height: 100%;
  overflow: visible;
}

.table {
  --bg-under-text: var(--background-surface-weakest);
  --table-radius: var(--radius);
  --table-padding: 8px;
  --table-padding-right: var(--table-padding);
  --table-padding-left: var(--table-padding);
  --header-bg: var(--background-surface-weaker);
  --header-border-color: var(--border-neutral-strong);
  --header-row-height: 40px;
  --row-height: 40px;
  --row-bg-hover: var(--background-surface-weakest);
  --row-bg: var(--background-surface-weakest);
  --row-radius: var(--radius);
  --row-cursor: default;
  --cell-border-color: var(--border-neutral-strong);
  --border-width: 1px;
  --padding-end-text: 8px;
  min-width: fit-content;
}

.table:has(.header-cell__riseze-box) {
  width: fit-content;
}

.table:has(.header-cell__riseze-box) .cell__inner {
  container: cell-width/inline-size;
}

@container cell-width (max-width: 60px) {
  .table:has(.header-cell__riseze-box) .cell__inner > .severity-widget:has(.severity-icon) {
    justify-content: center;
    gap: 0;
  }
  .table:has(.header-cell__riseze-box) .cell__inner > .severity-widget:has(.severity-icon) .text {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}
@container cell-width (max-width: 54px) {
  .table:has(.header-cell__riseze-box) .cell__inner > .entity-widget {
    gap: 0;
  }
  .table:has(.header-cell__riseze-box) .cell__inner > .entity-widget .text {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}
@container cell-width (max-width: 200px) {
  .table:has(.header-cell__riseze-box) .cell__inner:has(> .flex-box) > .flex-box {
    overflow: hidden;
    flex-grow: 1;
    height: 100%;
  }
  .table:has(.header-cell__riseze-box) .cell__inner:has(> .flex-box) > .flex-box > span .badge {
    min-width: 50px;
  }
  .table:has(.header-cell__riseze-box) .cell__inner:has(> .flex-box) > .flex-box > .actions-right-column {
    position: absolute;
    right: 8px;
  }
  .table:has(.header-cell__riseze-box) .cell__inner:has(> .flex-box) > .flex-box > .actions-right-column::before {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -4px;
    background-color: var(--bg-under-text);
    transition: background-color 0.3s;
  }
}
.table:has(.table__body--hidden) .table__inner {
  margin-bottom: calc(var(--row-height) * -1);
}

.table:has(.table__body--hidden) .header-cell:first-of-type .header-cell__inner::before {
  border-bottom-left-radius: var(--table-radius);
}

.table:has(.table__body--hidden) .header-cell:last-of-type .header-cell__inner::before {
  border-bottom-right-radius: var(--table-radius);
}

.table:has(.table__body--hidden) .header-cell__inner::before {
  border-bottom-width: 1px;
}

.table:has(.table__body--hidden).table--test-borders .header-cell:first-of-type .header-cell__inner::before {
  border-bottom-left-radius: var(--table-radius);
  border-left-width: 0;
}

.table:has(.table__body--hidden).table--test-borders .header-cell:last-of-type .header-cell__inner::before {
  border-bottom-right-radius: var(--table-radius);
  border-right-width: 0;
}

.table:has(.table__body--hidden).table--test-borders .header-cell__inner::before {
  border-top-width: 0;
  border-bottom-width: 0;
}

.table:has(.table__header--hidden) .table__inner {
  margin-top: calc(var(--row-height) * -1 - 8px);
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top,
.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom {
  content: "";
  display: block;
  position: sticky;
  z-index: 20;
  pointer-events: none;
  width: 100%;
  height: 8px;
  border: 1px solid var(--cell-border-color);
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::before, .table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::after,
.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::before,
.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::after {
  content: "";
  position: absolute;
  mask: url("img/SupportingTableRadius.svg") center/cover no-repeat;
  -webkit-mask: url("img/SupportingTableRadius.svg") center/cover no-repeat;
  background-color: var(--background-surface-weakest);
  width: 8px;
  height: 8px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top {
  top: 0;
  border-bottom-width: 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  margin-bottom: -8px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::before, .table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::after {
  top: -2px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::before {
  left: -2px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-top::after {
  right: -2px;
  transform: rotate(90deg);
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom {
  bottom: 0;
  border-top-width: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-top: -8px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::before, .table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::after {
  bottom: -2px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::before {
  left: -1px;
  transform: rotate(-90deg);
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__plug-bottom::after {
  right: -1px;
  transform: rotate(180deg);
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)) .table__row:first-of-type .cell:first-child .cell__inner::before {
  border-top-left-radius: 0px;
}

.table:has(.table__header--hidden):has(.table__row:not(.table__row--header)):has(.table__row--select:first-of-type) .table__plug-top {
  border-color: var(--border-brand-strong);
}

.table:has(.table__header--hidden) .table__row:not(.table__row--header):first-of-type .cell:first-of-type .cell__inner {
  border-top-left-radius: var(--table-radius);
}

.table:has(.table__header--hidden) .table__row:not(.table__row--header):first-of-type .cell:first-of-type .cell__inner::before {
  border-top-left-radius: var(--table-radius);
}

.table:has(.table__header--hidden) .table__row:not(.table__row--header):first-of-type .cell:last-of-type .cell__inner {
  border-top-right-radius: var(--table-radius);
}

.table:has(.table__header--hidden) .table__row:not(.table__row--header):first-of-type .cell:last-of-type .cell__inner::before {
  border-top-right-radius: var(--table-radius);
}

.table:has(.table__header--hidden) .table__row:not(.table__row--header):first-of-type .cell__inner::before {
  border-top-width: 0;
}

.table .invisible-element-11 {
  position: absolute;
  right: 8px;
  transition: none;
}

.table .invisible-element-11::before {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -4px;
  background-color: var(--bg-under-text);
  transition: background-color 0.3s;
}

.table--fit-content {
  width: fit-content;
}

.table--full-height {
  flex-grow: 1;
  height: 100%;
}

.table__inner {
  border-radius: var(--table-radius);
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: none;
  position: relative;
}

.table__header {
  position: sticky;
  top: 0;
  z-index: 5;
}

.table__header--unsticky {
  position: static;
}

.table__header--hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
}

.table__body > .scroll-page-trigger {
  display: contents;
}

.table__body--hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
}

.table__row {
  border-radius: var(--row-radius);
}

.table__row:not(.table__row--header) {
  cursor: var(--row-cursor);
}

.table__row:not(.table__row--header):last-of-type .cell:first-of-type .cell__inner {
  border-bottom-left-radius: var(--table-radius);
  overflow: hidden;
}

.table__row:not(.table__row--header):last-of-type .cell:first-of-type .cell__inner::before {
  border-bottom-left-radius: var(--table-radius);
}

.table__row:not(.table__row--header):last-of-type .cell:first-of-type.cell--without-padding .cell__inner > * {
  border-bottom-left-radius: var(--table-radius);
}

.table__row:not(.table__row--header):last-of-type .cell:last-of-type .cell__inner {
  border-bottom-right-radius: var(--table-radius);
  overflow: hidden;
}

.table__row:not(.table__row--header):last-of-type .cell:last-of-type .cell__inner::before {
  border-bottom-right-radius: var(--table-radius);
}

.table__row:not(.table__row--header):last-of-type .cell:last-of-type.cell--without-padding .cell__inner > * {
  border-bottom-right-radius: var(--table-radius);
}

.table__row:not(.table__row--header):first-of-type .cell__inner::before {
  border-top: 1px solid var(--border-neutral-strong);
}

.table__row:not(.table__row--header):hover .cell__inner {
  --bg-under-text: var(--row-bg-hover);
  background-color: var(--row-bg-hover);
}

.table__row:not(:last-of-type) .header-cell__inner::before,
.table__row:not(:last-of-type) .cell__inner::before {
  border-bottom-width: 0;
}

.table__row--header {
  height: var(--header-row-height);
}

.table__row--attention {
  --row-bg: #FFFFF7;
  --row-bg-hover: #FFFFF7;
}

.table__row--active {
  --row-bg: var(--background-neutral-weaker-active);
  --row-bg-hover: var(--background-neutral-weaker-active);
}

.table__row--new {
  --row-bg: #FEFCF4;
  --row-bg-hover: #FEFCF4;
}

.table__row--new .cell:first-child .cell__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2px;
  height: 100%;
  border-radius: 0 1px 1px 0;
  background-color: #F2C527;
}

.table__row--select:not(.table__row--header):first-of-type .cell__inner::before {
  border-top: 1px solid var(--border-brand-strong);
}

.table__row--select .cell__inner::before {
  border-color: var(--border-brand-strong);
}

.table__row--select .cell:not(:last-child) .cell__inner::before {
  border-right-color: var(--cell-border-color);
}

.table__row--select + .table__row--select .cell__inner::before {
  border-top-color: var(--cell-border-color);
}

.table__row--select + .table__row:not(.table__row--select) .cell__inner::before {
  border-top-color: var(--border-brand-strong);
}

.header-cell,
.cell {
  text-align: left;
  padding: 0;
  height: 1px;
}

.header-cell:not(:first-of-type) .header-cell__inner::before,
.header-cell:not(:first-of-type) .cell__inner::before,
.cell:not(:first-of-type) .header-cell__inner::before,
.cell:not(:first-of-type) .cell__inner::before {
  border-left-width: 0;
}

.header-cell:hover .invisible-element-11,
.cell:hover .invisible-element-11 {
  opacity: 1;
}

.header-cell {
  --table-cell-width: auto;
  min-width: var(--table-cell-width);
  width: var(--table-cell-width);
  max-width: var(--table-cell-width);
}

.header-cell:first-of-type .header-cell__inner {
  border-top-left-radius: var(--table-radius);
}

.header-cell:first-of-type .header-cell__inner::before {
  border-top-left-radius: var(--table-radius);
}

.header-cell:first-of-type .header-cell__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-color: var(--background-surface-weakest);
  width: 10px;
  height: 10px;
}

.header-cell:last-of-type .header-cell__inner {
  border-top-right-radius: var(--table-radius);
}

.header-cell:last-of-type .header-cell__inner::before {
  border-top-right-radius: var(--table-radius);
}

.header-cell:last-of-type .header-cell__inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  background-color: var(--background-surface-weakest);
  width: 10px;
  height: 10px;
}

.header-cell--no-width {
  min-width: 100px !important;
}

.header-cell--expand {
  width: auto !important;
  max-width: none !important;
}

.header-cell--drag .header-cell__inner {
  padding-left: 0;
}

.cell:first-of-type .cell__inner::after {
  border-top-left-radius: var(--row-radius);
  border-bottom-left-radius: var(--row-radius);
}

.cell:first-of-type .cell__inner::before {
  left: 0.5px;
  width: calc(100% - 0.5px);
}

.cell:last-of-type .cell__inner::after {
  border-top-right-radius: var(--row-radius);
  border-bottom-right-radius: var(--row-radius);
}

.header-cell__inner,
.cell__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 4px 8px;
  position: relative;
}

.header-cell__inner::before,
.cell__inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0.5px;
  border-style: solid;
  pointer-events: none;
}

.header-cell__inner {
  --bg-under-text: var(--header-bg);
  min-height: var(--header-row-height);
  background-color: var(--header-bg);
}

.header-cell__inner::before {
  border-color: var(--header-border-color);
  border-bottom-width: 0;
}

.header-cell__riseze-box {
  position: relative;
}

.header-cell__resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 1;
  width: 8px;
  height: 100%;
  cursor: e-resize;
  user-select: none;
}

.header-cell__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.cell__inner {
  background-color: var(--row-bg);
  min-height: var(--row-height);
  min-width: 32px;
  transition: background-color 0.3s;
}

.cell__inner::before {
  z-index: 1;
  border-color: var(--cell-border-color);
}

.cell__inner:not(:has(> *)) {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  font-style: italic;
  color: var(--foreground-disabled);
}

.cell__inner--action-only {
  padding: 0;
}

.cell__inner--action-only .dropdown,
.cell__inner--action-only .dropdown__toggle {
  height: 100%;
  width: 100%;
}

.table--white-header {
  --header-bg: var(--background-surface-weakest);
}

.table--with-hover {
  --row-cursor: pointer;
  --row-bg-hover: var(--background-surface-weakest-hover);
}

.table--without-borders {
  --header-border-color: transparent;
  --cell-border-color: transparent;
}

.table--without-borders .header-cell__button-sort {
  margin-left: 0;
}

.table--without-radius {
  --border-width: 0;
  --table-radius: 0;
}

.table--without-radius .table__row:not(.table__row--select) .cell:first-of-type .header-cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .cell:first-of-type .cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .header-cell:first-of-type .header-cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .header-cell:first-of-type .cell__inner::before {
  border-left-color: transparent;
}

.table--without-radius .table__row:not(.table__row--select) .cell:last-of-type .header-cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .cell:last-of-type .cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .header-cell:last-of-type .header-cell__inner::before,
.table--without-radius .table__row:not(.table__row--select) .header-cell:last-of-type .cell__inner::before {
  border-right-color: transparent;
}

.table--big-rows {
  --row-height: 64px;
}

.table--big-rows.table--white-header {
  --header-row-height: 24px;
}

.table--with-padding-small .header-cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-small .cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-medium .header-cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-medium .cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-big .header-cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-big .cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-extra-big .header-cell:first-of-type:not(.header-cell--no-width),
.table--with-padding-extra-big .cell:first-of-type:not(.header-cell--no-width) {
  min-width: calc(var(--table-cell-width) + var(--table-padding-left));
  width: calc(var(--table-cell-width) + var(--table-padding-left));
}

.table--with-padding-small .header-cell:first-of-type.header-cell--no-width,
.table--with-padding-small .cell:first-of-type.header-cell--no-width,
.table--with-padding-medium .header-cell:first-of-type.header-cell--no-width,
.table--with-padding-medium .cell:first-of-type.header-cell--no-width,
.table--with-padding-big .header-cell:first-of-type.header-cell--no-width,
.table--with-padding-big .cell:first-of-type.header-cell--no-width,
.table--with-padding-extra-big .header-cell:first-of-type.header-cell--no-width,
.table--with-padding-extra-big .cell:first-of-type.header-cell--no-width {
  min-width: calc(100px + var(--table-padding-left)) !important;
}

.table--with-padding-small .header-cell:first-of-type .header-cell__inner,
.table--with-padding-small .header-cell:first-of-type .cell__inner,
.table--with-padding-small .cell:first-of-type .header-cell__inner,
.table--with-padding-small .cell:first-of-type .cell__inner,
.table--with-padding-medium .header-cell:first-of-type .header-cell__inner,
.table--with-padding-medium .header-cell:first-of-type .cell__inner,
.table--with-padding-medium .cell:first-of-type .header-cell__inner,
.table--with-padding-medium .cell:first-of-type .cell__inner,
.table--with-padding-big .header-cell:first-of-type .header-cell__inner,
.table--with-padding-big .header-cell:first-of-type .cell__inner,
.table--with-padding-big .cell:first-of-type .header-cell__inner,
.table--with-padding-big .cell:first-of-type .cell__inner,
.table--with-padding-extra-big .header-cell:first-of-type .header-cell__inner,
.table--with-padding-extra-big .header-cell:first-of-type .cell__inner,
.table--with-padding-extra-big .cell:first-of-type .header-cell__inner,
.table--with-padding-extra-big .cell:first-of-type .cell__inner {
  padding-left: var(--table-padding-left);
}

.table--with-padding-small .header-cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-small .cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-medium .header-cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-medium .cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-big .header-cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-big .cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-extra-big .header-cell:last-of-type:not(.header-cell--no-width),
.table--with-padding-extra-big .cell:last-of-type:not(.header-cell--no-width) {
  min-width: calc(var(--table-cell-width) + var(--table-padding-right));
  width: calc(var(--table-cell-width) + var(--table-padding-right));
}

.table--with-padding-small .header-cell:last-of-type.header-cell--no-width,
.table--with-padding-small .cell:last-of-type.header-cell--no-width,
.table--with-padding-medium .header-cell:last-of-type.header-cell--no-width,
.table--with-padding-medium .cell:last-of-type.header-cell--no-width,
.table--with-padding-big .header-cell:last-of-type.header-cell--no-width,
.table--with-padding-big .cell:last-of-type.header-cell--no-width,
.table--with-padding-extra-big .header-cell:last-of-type.header-cell--no-width,
.table--with-padding-extra-big .cell:last-of-type.header-cell--no-width {
  min-width: calc(100px + var(--table-padding-right)) !important;
}

.table--with-padding-small .header-cell:last-of-type .header-cell__inner,
.table--with-padding-small .header-cell:last-of-type .cell__inner,
.table--with-padding-small .cell:last-of-type .header-cell__inner,
.table--with-padding-small .cell:last-of-type .cell__inner,
.table--with-padding-medium .header-cell:last-of-type .header-cell__inner,
.table--with-padding-medium .header-cell:last-of-type .cell__inner,
.table--with-padding-medium .cell:last-of-type .header-cell__inner,
.table--with-padding-medium .cell:last-of-type .cell__inner,
.table--with-padding-big .header-cell:last-of-type .header-cell__inner,
.table--with-padding-big .header-cell:last-of-type .cell__inner,
.table--with-padding-big .cell:last-of-type .header-cell__inner,
.table--with-padding-big .cell:last-of-type .cell__inner,
.table--with-padding-extra-big .header-cell:last-of-type .header-cell__inner,
.table--with-padding-extra-big .header-cell:last-of-type .cell__inner,
.table--with-padding-extra-big .cell:last-of-type .header-cell__inner,
.table--with-padding-extra-big .cell:last-of-type .cell__inner {
  padding-right: var(--table-padding-right);
}

.table--with-padding-small {
  --table-padding: 4px;
}

.table--with-padding-medium {
  --table-padding: 16px;
}

.table--with-padding-big {
  --table-padding: 24px;
}

.table--with-padding-extra-big {
  --table-padding: 32px;
}

.table--with-checkboxes {
  --padding-end-text: 40px;
}

.table--with-checkboxes .header-cell:nth-child(2) .header-cell__inner::before {
  border-left-color: transparent;
}

.table--with-sticky-first-column .header-cell:first-child,
.table--with-sticky-first-column .cell:first-child {
  position: sticky;
  left: var(--sticky-first-column-size);
  z-index: 2;
}

.table--with-sticky-first-column .cell:first-child .cell__inner {
  background-color: var(--background-surface-weakest);
}

.table--with-sticky-first-column .cell:first-child .cell__inner::before {
  background-color: var(--row-bg);
  z-index: 1;
  transition: background-color 0.3s;
}

.table--with-sticky-first-column .cell:first-child .cell__inner > * {
  position: relative;
  z-index: 2;
}

.table--with-sticky-first-column .table__row:hover .cell:first-child .cell__inner::before {
  background-color: var(--row-bg-hover);
}

.table--with-sticky-last-column .header-cell:last-child,
.table--with-sticky-last-column .cell:last-child {
  position: sticky;
  right: var(--sticky-last-column-size);
  z-index: 2;
}

.table--with-sticky-last-column .header-cell:nth-last-child(2) .header-cell__inner::before {
  border-right-width: 0;
}

.table--with-sticky-last-column .header-cell:last-child .header-cell__inner::before {
  border-left-width: 0.5px;
}

.table--with-sticky-last-column .cell:nth-last-child(2) .cell__inner::before {
  border-right-width: 0;
}

.table--with-sticky-last-column .cell:last-child:has(.dropdown-menu--show) {
  z-index: 3;
}

.table--with-sticky-last-column .cell:last-child .cell__inner {
  background-color: var(--background-surface-weakest);
}

.table--with-sticky-last-column .cell:last-child .cell__inner::before {
  border-left-width: 0.5px;
  background-color: var(--row-bg);
  z-index: 1;
  transition: background-color 0.3s;
}

.table--with-sticky-last-column .cell:last-child .cell__inner > * {
  position: relative;
  z-index: 2;
}

.table--with-sticky-last-column .table__row:hover .cell:last-child .cell__inner::before {
  background-color: var(--row-bg-hover);
}

.cell--without-padding .cell__inner {
  padding: 0;
}

.cell--without-padding .cell__inner > .dropdown {
  height: 100%;
  width: 100%;
}

.cell--without-padding .cell__inner > .dropdown .dropdown__toggle {
  height: 100%;
  width: 100%;
}

.cell--without-padding .cell__inner .dropdown--chiplist {
  width: 100%;
  height: 100%;
  padding: 8px;
  align-items: center;
  border: none;
  border-radius: 0px;
}

.cell--without-padding .cell__inner .dropdown--chiplist:focus-within {
  box-shadow: var(--focus) inset;
}

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

.cell--right-content .cell__inner {
  justify-content: flex-end;
}

.cell--no-access {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  font-style: italic;
  color: var(--foreground-weak);
}

.cell--no-access .cell__inner {
  background-image: url("img/GradientNoAccess.svg");
  background-repeat: repeat;
  gap: 4px;
}

.header-cell__button-sort {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  padding: 2px 4px;
  border-radius: var(--radius-small);
  margin-left: auto;
}

.header-cell__button-sort:focus {
  outline: transparent;
}

.header-cell__button-sort:focus-visible {
  box-shadow: var(--focus);
}

.header-cell__button-sort::before, .header-cell__button-sort::after {
  content: "";
  width: 8.33px;
  height: 5.18px;
  transition: background-color 0.3s;
}

.header-cell__button-sort::before {
  mask: url("img/ArrowSortTop.svg") center/cover no-repeat;
  -webkit-mask: url("img/ArrowSortTop.svg") center/cover no-repeat;
  background-color: var(--color-sort-top-button);
}

.header-cell__button-sort:after {
  mask: url("img/ArrowSortBottom.svg") center/cover no-repeat;
  -webkit-mask: url("img/ArrowSortBottom.svg") center/cover no-repeat;
  background-color: var(--color-sort-bottom-button);
}

.header-cell--sort {
  --color-sort-top-button: var(--foreground-weaker);
  --color-sort-bottom-button: var(--foreground-weaker);
}

.header-cell--sort-desc {
  --color-sort-top-button: var(--foreground-weaker);
  --color-sort-bottom-button: var(--foreground-brand-strong);
}

.header-cell--sort-asc {
  --color-sort-top-button: var(--foreground-brand-strong);
  --color-sort-bottom-button: var(--foreground-weaker);
}

@-moz-document url-prefix() {
  .header-cell,
  .cell {
    height: 100%;
  }
}
.table__drop-item {
  cursor: grab;
}

.table__drop-item:active {
  cursor: grabbing !important;
}

.table__end-text {
  position: sticky;
  left: var(--sticky-first-column-size);
  z-index: 2;
  width: fit-content;
  padding: 12px 8px 12px var(--padding-end-text);
}

.entity-widget {
  --badge-icon-size: 16px;
  --badge-icon-position: -3px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--foreground-stronger);
}

a.entity-widget {
  transition: color 0.3s;
}

a.entity-widget:not(:hover, :focus-visible) .button__action-indicator {
  --svg-icon-color: var(--foreground-weak);
}

a.entity-widget:focus-visible .entity-widget__text {
  color: var(--foreground-brand-strong);
}

a.entity-widget:focus {
  outline: transparent;
}

.entity-widget--big {
  --badge-icon-size: 24px;
  --badge-icon-position: -2px;
}

.entity-widget--medium {
  --badge-icon-size: 20px;
  --badge-icon-position: -2px;
}

.entity-widget--small {
  --badge-icon-size: 12px;
  --badge-icon-position: -1px;
  gap: 4px;
}

.entity-widget--extra-small {
  --badge-icon-size: 9px;
  --badge-icon-position: -2px;
  gap: 4px;
}

.entity-widget--user-group .entity-widget__icon-box,
.entity-widget--access-edit .entity-widget__icon-box,
.entity-widget--access-read .entity-widget__icon-box,
.entity-widget--logs .entity-widget__icon-box,
.entity-widget--metrics .entity-widget__icon-box {
  position: relative;
}

.entity-widget--user-group .entity-widget__icon-box::before, .entity-widget--user-group .entity-widget__icon-box::after,
.entity-widget--access-edit .entity-widget__icon-box::before,
.entity-widget--access-edit .entity-widget__icon-box::after,
.entity-widget--access-read .entity-widget__icon-box::before,
.entity-widget--access-read .entity-widget__icon-box::after,
.entity-widget--logs .entity-widget__icon-box::before,
.entity-widget--logs .entity-widget__icon-box::after,
.entity-widget--metrics .entity-widget__icon-box::before,
.entity-widget--metrics .entity-widget__icon-box::after {
  content: "";
  width: var(--badge-icon-size);
  height: var(--badge-icon-size);
  position: absolute;
  right: var(--badge-icon-position);
  bottom: var(--badge-icon-position);
  z-index: 1;
  border-radius: 50%;
}

.entity-widget--user-group .entity-widget__icon-box::before,
.entity-widget--access-edit .entity-widget__icon-box::before,
.entity-widget--access-read .entity-widget__icon-box::before,
.entity-widget--logs .entity-widget__icon-box::before,
.entity-widget--metrics .entity-widget__icon-box::before {
  background-color: var(--background-surface-weakest);
  box-shadow: 0 0 0 1px var(--background-surface-weakest), 0px 0px 4px 0px rgba(0, 0, 0, 0.04), -2px -2px 4px 0px rgba(0, 0, 0, 0.04);
}

.entity-widget--user-group .entity-widget__icon-box::after,
.entity-widget--access-edit .entity-widget__icon-box::after,
.entity-widget--access-read .entity-widget__icon-box::after,
.entity-widget--logs .entity-widget__icon-box::after,
.entity-widget--metrics .entity-widget__icon-box::after {
  -webkit-mask: url("img/AltUserGroup.svg") center/cover no-repeat;
  mask: url("img/AltUserGroup.svg") center/cover no-repeat;
  background-color: var(--badge-icon-color);
}

.entity-widget--access-edit {
  --badge-icon-color: var(--access-public);
}

.entity-widget--access-edit .entity-widget__icon-box::after {
  -webkit-mask-image: url("img/AltEditCircle.svg");
  mask-image: url("img/AltEditCircle.svg");
}

.entity-widget--access-read {
  --badge-icon-color: var(--access-private);
}

.entity-widget--access-read .entity-widget__icon-box::after {
  -webkit-mask-image: url("img/AltShowCircle.svg");
  mask-image: url("img/AltShowCircle.svg");
}

.entity-widget--user-group {
  --badge-icon-color: var(--access-lock);
}

.entity-widget--user-group .entity-widget__icon-box::after {
  -webkit-mask-image: url("img/AltUsersCircle.svg");
  mask-image: url("img/AltUsersCircle.svg");
}

.entity-widget--is-synced {
  --badge-icon-color: var(--background-brand-active);
}

.entity-widget--logs {
  --badge-icon-color: var(--observability-logs);
}

.entity-widget--logs .entity-widget__icon-box::after {
  -webkit-mask-image: url("img/AltGraphCircle.svg");
  mask-image: url("img/AltGraphCircle.svg");
}

.entity-widget--metrics {
  --badge-icon-color: var(--observability-metrics);
}

.entity-widget--metrics .entity-widget__icon-box::after {
  -webkit-mask-image: url("img/AltMetricsCircle.svg");
  mask-image: url("img/AltMetricsCircle.svg");
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.loading-indicator--show {
  position: relative;
}

.loading-indicator__overlay {
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
  width: 100%;
  height: 100%;
  justify-content: center;
}

.loading-indicator__overlay::before {
  width: 32px;
  height: 32px;
}

.circle-diagram {
  display: flex;
  align-items: center;
  gap: 24px;
}

.circle-diagram:has(.circle-diagram__inner--medium) {
  gap: 16px;
}

.circle-diagram:has(.circle-diagram__inner--small) {
  gap: 8px;
}

.circle-diagram:has(.circle-diagram__inner--extra-small) {
  gap: 4px;
}

.circle-diagram__inner {
  --bg-color-diagram: var(--background-surface-weakest);
  --size-diagram: 112px;
  --border-size-diagram: 10px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.06rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-diagram);
  height: var(--size-diagram);
  border-radius: 50%;
  position: relative;
  background-image: conic-gradient(var(--conic-gradient), #F84D4D 0);
}

.circle-diagram__inner:not(.circle-diagram__inner--fills)::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: var(--border-size-diagram);
  right: var(--border-size-diagram);
  bottom: var(--border-size-diagram);
  left: var(--border-size-diagram);
  z-index: 0;
  background-color: var(--bg-color-diagram);
}

.circle-diagram__value {
  position: relative;
  z-index: 1;
  text-align: center;
}

.circle-diagram__inner--gray {
  --bg-color-diagram: var(--background-surface-weaker);
}

.circle-diagram__inner--extra-small {
  --size-diagram: 24px;
  --border-size-diagram: 4px;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
}

.circle-diagram__inner--small {
  --size-diagram: 32px;
  --border-size-diagram: 4px;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.circle-diagram__inner--medium {
  --size-diagram: 64px;
  --border-size-diagram: 6px;
}

.circle-diagram__inner--medium.circle-diagram__inner--empty {
  font-size: 7px;
}

.circle-diagram__inner--empty {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  color: var(--foreground-weak);
  background-color: var(--background-surface-weaker);
}

.circle-diagram__inner--empty.circle-diagram__inner--gray {
  background-color: var(--background-surface-weak);
}

.circle-diagram__legends-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.circle-diagram__legends-list--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.circle-diagram__legends-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.circle-diagram__legends-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--bg-legends);
}

.diagram-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  outline: none;
  overflow: hidden;
  touch-action: none;
  background-color: var(--background-surface-weak);
}

.diagram-canvas:active {
  cursor: grabbing;
}

.diagram-canvas--with-radius {
  border-radius: 6px;
}

.diagram-canvas__header-actions,
.diagram-canvas-header-actions {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 32px;
}

.diagram-canvas-header-actions {
  width: calc(100% - 156px);
}

.diagram-svg-layer,
.diagram-html-layer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  pointer-events: none;
  -webkit-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.html-layer,
.svg-layer {
  position: absolute;
  pointer-events: none;
  -webkit-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.diagram-node {
  position: absolute;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: grab;
  pointer-events: all;
  border-radius: 24px;
}

.diagram-node:active {
  cursor: grabbing;
}

.diagram-node.StartEvent::before, .diagram-node.Scheduler::before, .diagram-node.ManualRun::before, .diagram-node.Webhook::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-contrast);
  background-color: rgba(239, 246, 255, 0.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.diagram-node.StartEvent::after, .diagram-node.Scheduler::after, .diagram-node.ManualRun::after, .diagram-node.Webhook::after {
  content: "";
  position: absolute;
  top: -1.5px;
  right: -2px;
  z-index: 3;
  width: 20px;
  height: 20px;
  mask: url("img/FlagFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/FlagFill.svg") center/cover no-repeat;
  background-color: var(--color-diagram-block);
}

.diagram-node.Switch .diagram-port--right,
.diagram-node.Switch .diagram-port--right:not(.diagram-port--has-links) {
  width: 20px;
  height: 20px;
  margin: -10px -18px;
  background-image: url("img/PortSwitch.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: var(--foreground-contrast);
}

.diagram-node.Switch .diagram-port--right::after,
.diagram-node.Switch .diagram-port--right:not(.diagram-port--has-links)::after {
  display: none;
}

.diagram-node.Switch .diagram-port--right::before,
.diagram-node.Switch .diagram-port--right:not(.diagram-port--has-links)::before {
  display: none;
}

.diagram-node.Switch .diagram-port--right:hover,
.diagram-node.Switch .diagram-port--right:not(.diagram-port--has-links):hover {
  transform: scale(1.5);
}

.diagram-node.Empty .diagram-block, .diagram-node.StartEmpty .diagram-block {
  width: 1px;
  height: 1px;
  pointer-events: none;
  box-shadow: none;
  opacity: 0;
}

.diagram-node.Empty .diagram-port:hover, .diagram-node.StartEmpty .diagram-port:hover {
  transform: scale(1.5);
}

.diagram-node.Empty .diagram-port {
  width: 20px;
  height: 20px;
  margin: -10px -19px;
  background-color: var(--foreground-contrast);
}

.diagram-node.Empty .diagram-port::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask: url("img/PortEmpty.svg") center/cover no-repeat;
  -webkit-mask: url("img/PortEmpty.svg") center/cover no-repeat;
  background-color: var(--color-diagram-block);
}

.diagram-node.StartEmpty .diagram-port {
  width: 34px;
  height: 34px;
  margin: -17px -20px;
  background-color: #EBEFF6;
  border: 1.2px solid var(--border-contrast);
}

.diagram-node.StartEmpty .diagram-port::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 7px;
  width: 20px;
  height: 20px;
  mask: url("img/FlagFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/FlagFill.svg") center/cover no-repeat;
  background-color: var(--color-diagram-block);
}

.diagram-node.ManualRun .diagram-block::after, .diagram-node.Scheduler .diagram-block::after, .diagram-node.Webhook .diagram-block::after {
  border-color: #000;
}

.diagram-node.ManualRun .diagram-block__inner, .diagram-node.Scheduler .diagram-block__inner, .diagram-node.Webhook .diagram-block__inner {
  background-color: #3E3E3E;
}

.diagram-node.ManualRun .diagram-block__image, .diagram-node.Scheduler .diagram-block__image, .diagram-node.Webhook .diagram-block__image {
  display: none;
}

.diagram-node.ManualRun .index-node, .diagram-node.Scheduler .index-node, .diagram-node.Webhook .index-node {
  color: var(--foreground-contrast);
}

.diagram-node.ManualRun::after {
  mask: url("img/Code.svg") center/cover no-repeat;
  -webkit-mask: url("img/Code.svg") center/cover no-repeat;
  background-color: var(--color-diagram-block);
}

.diagram-node--locked {
  cursor: pointer;
}

.diagram-node--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.diagram-node--disabled .diagram-block:hover::before {
  opacity: 0;
}

.diagram-port {
  width: 16px;
  height: 16px;
  margin: -8px -17px;
  border-radius: 50%;
  background-color: var(--color-diagram-block);
  cursor: pointer;
  position: absolute;
  transition: transform 0.3s;
}

.diagram-port::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  transition: box-shadow 0.3s;
}

.diagram-port:not(.diagram-port--has-links)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  mask: url("img/Plus.svg") center/cover no-repeat;
  -webkit-mask: url("img/Plus.svg") center/cover no-repeat;
  background-color: var(--color-diagram-block);
  transition: opacity 0.3s, background-color 0.3s;
}

.diagram-port:not(.diagram-port--has-links)::after {
  content: "";
  background-color: rgba(255, 255, 255, 0.8);
}

.diagram-port:not(.diagram-port--has-links):hover {
  transform: scale(1.5);
}

.diagram-port:hover::after {
  box-shadow: 0 0 0 2px var(--border-brand-weak);
}

.diagram-port--top {
  top: 0;
  left: 50%;
}

.diagram-port--topright {
  top: 0;
  right: 0;
}

.diagram-port--topleft {
  top: 0;
  left: 0;
}

.diagram-port--right {
  top: 50%;
  right: 0;
}

.diagram-port.bottom {
  bottom: 0;
  left: 50%;
}

.diagram-port--bottomright {
  right: 0;
  bottom: 0;
}

.diagram-port--bottomleft {
  bottom: 0;
  left: 0;
}

.diagram-port--left {
  top: 50%;
  left: 0;
}

.diagram-link {
  pointer-events: visiblePainted;
  cursor: pointer;
}

.diagram-navigator {
  z-index: 10;
}

.diagram-navigator .current-view {
  position: absolute;
  border: 2px solid #000;
}

.diagram-group {
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: move;
  pointer-events: all;
}

.diagram-group .children {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.diagram-link foreignObject.diagram-link-label {
  overflow: visible;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

div.diagram-control {
  position: absolute;
}

.executable.diagram-control {
  pointer-events: all;
  cursor: pointer;
}

.diagram-link:not(.diagram-link--attached) {
  stroke-dasharray: 5;
  animation: dash 0.5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -10;
  }
}
.diagram-block {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background-color: var(--background-surface-weakest);
  -webkit-box-shadow: 0px -0.2407077551px 5.8801465034px 0px rgba(0, 0, 0, 0.03), 0px -0.5784541965px 14.1308097839px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px -0.2407077551px 5.8801465034px 0px rgba(0, 0, 0, 0.03), 0px -0.5784541965px 14.1308097839px 0px rgba(0, 0, 0, 0.04);
  position: relative;
}

.diagram-block::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid var(--border-contrast);
  border-radius: 24px;
}

.diagram-block::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 28px;
  border: 2px solid var(--border-brand-weak);
  opacity: 0;
  box-shadow: 0px -0.1937079579px 4.7320084572px 0px rgba(0, 0, 0, 0.03), 0px -0.4655071497px 11.3716745377px 0px rgba(0, 0, 0, 0.04);
  transition: opacity 0.3s, transform 0.3s, background-color 0.3s, border-radius 0.3s, height 0.3s, top 0.3s;
}

.diagram-block:hover::before {
  opacity: 1;
}

.diagram-block--life-cycle {
  width: 160px;
  height: 52px;
  border-radius: 20px;
}

.diagram-block--life-cycle::after {
  border-radius: 20px;
  background-color: var(--color-diagram-block);
  opacity: 0.12;
}

.diagram-block--life-cycle::before {
  border-radius: 24px;
}

.diagram-block--life-cycle.diagram-block--selected::before {
  height: calc(100% + 16px);
  top: -8px;
  border-radius: 28px;
}

.diagram-block--life-cycle .diagram-block__inner {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  border-radius: 20px;
  text-align: center;
}

.diagram-block__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 16px;
  height: 100%;
  border-radius: 24px;
}

.diagram-block__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170%;
  height: 170%;
  min-width: 170%;
  object-fit: contain;
  filter: blur(40px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

.diagram-block__image--svg {
  opacity: 0.8;
}

.diagram-block--empty-block {
  background-color: #C9DEFE;
}

.diagram-block--empty-block:after {
  border-color: var(--border-brand-strong);
}

.diagram-block--empty-block + .title-node {
  color: var(--foreground-brand-strong);
}

.diagram-block--selected::before {
  opacity: 1;
  transform: scale(1.1);
  background-color: rgba(114, 141, 193, 0.15);
}

.diagram-block--failed::after {
  border-color: var(--status-warning-strong);
}

.hint-node {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translate(100%, -50%);
  width: max-content;
}

.hint-node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translate(0, -50%) rotate(45deg);
  width: 13px;
  height: 13px;
  z-index: -1;
  background-color: var(--background-surface-weakest);
  border-radius: 0 0 0 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0392156863);
}

.hint-node__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  padding: 8px;
  background-color: var(--background-surface-weakest);
  border-radius: 6px;
}

.title-node {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  display: flex;
  justify-content: center;
  position: absolute;
  left: -32px;
  top: calc(100% + 4px);
  width: calc(100% + 64px);
  text-align: center;
}

.index-node {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.default-node .diagram-port:hover, .default-node .diagram-port--has-links, .diagram-group--default .diagram-port--has-links {
  background-color: black;
}

.diagram-navigator.default {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 3px solid #9BA8B0;
  border-radius: 15px;
  padding: 20px;
  background-color: var(--background-surface-weakest);
}

div.diagram-group--default {
  outline: 2px solid black;
  background: rgb(198, 198, 198);
}

div.diagram-group--default.diagram-group--selected {
  outline: 2px solid #6e9fd4;
}

g.diagram-group--default rect {
  outline: 2px solid black;
  fill: rgb(198, 198, 50);
}

g.diagram-group--default.diagram-group--selected > rect {
  outline: 2px solid green;
}

.diagram-link path {
  stroke-linecap: round;
}

.diagram-link div.default-link-label {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  display: inline-block;
  color: var(--foreground-stronger);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 34px;
  padding: 2px 4px;
  text-align: center;
  min-width: 46px;
  width: max-content;
  max-width: 160px;
  transform: translate(-50%, -50%);
}

.selection-helper {
  transition: stroke 0.3s, stroke-opacity 0.3s;
}

.icon-badge-diagram {
  position: relative;
}

.icon-badge-diagram::before {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(239, 246, 255, 0.5);
  backdrop-filter: blur(3.7278966904px);
  -webkit-backdrop-filter: blur(3.7278966904px);
}

.icon-badge-diagram::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2.5px;
  z-index: 2;
  width: 9px;
  height: 9px;
  mask: url("img/FlagFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/FlagFill.svg") center/cover no-repeat;
  background-color: #E98741;
}

.icon-badge-diagram--manual-run::after {
  mask: url("img/Code.svg") center/cover no-repeat;
  -webkit-mask: url("img/Code.svg") center/cover no-repeat;
}

.button--canvas-add {
  min-width: 96px;
  background-color: #C9DEFE;
  border-color: var(--border-brand-strong);
  border-radius: 12px;
}

.panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 13px;
  bottom: 0;
  display: none;
  z-index: 9997;
  max-height: 100%;
}

.panel .header--with-border + .modal__inner .modal__body {
  padding-top: 16px;
}

.panel--show {
  display: flex;
}

.panel__inner {
  --panel-width: 80vw;
  position: absolute;
  max-width: var(--panel-width);
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel__inner--fit-content {
  width: fit-content;
  max-width: 100%;
  min-width: var(--panel-width);
}

.panel__inner--minimal {
  --panel-width: 280px;
}

.panel__inner--extra-small {
  --panel-width: 394px;
}

.panel__inner--small {
  --panel-width: 480px;
}

.panel__inner--medium {
  --panel-width: 640px;
}

.panel__inner--big {
  --panel-width: 800px;
}

.panel__inner--extra-big {
  --panel-width: 998px;
}

.conditions-tree--color-or {
  --conditions-color: var(--border-brand-weak);
}

.conditions-tree--color-and {
  --conditions-color: #d8be81;
}

.conditions-tree__list {
  position: relative;
  width: max-content;
}

.conditions-tree__item {
  width: fit-content;
  position: relative;
  border-radius: 6px;
}

.conditions-tree__item > .conditions-tree__item {
  padding: 0;
}

.conditions-tree__item::before {
  content: "";
  position: absolute;
  left: -47px;
  width: 47px;
  height: 2px;
  border-left: 2px solid var(--conditions-color);
}

.conditions-tree__item::after {
  content: "";
  position: absolute;
  left: -47px;
  width: 47px;
  height: 100%;
  top: 0;
  border-left: 2px solid var(--conditions-color);
}

.conditions-tree__item:not(.conditions-tree__item--after):not(:last-child)::before {
  border-top: 2px solid var(--conditions-color);
}

.conditions-tree__item:not(.conditions-tree__item--after):first-child::before {
  height: 50%;
  border-radius: 16px 0 0 0;
}

.conditions-tree__item:first-child::after {
  top: calc(50% + 16px);
  height: 50%;
}

.conditions-tree__item:last-child::after {
  display: none;
}

.conditions-tree__item:not(:first-child):not(:last-child)::after {
  top: -8px;
  height: calc(100% + 16px);
}

.conditions-tree__item:not(.conditions-tree__item--after):not(:last-child):not(.conditions-tree__item--parent)::before {
  top: calc(50% - 1px);
}

.conditions-tree__item:last-child::before {
  border-radius: 0 0 0 16px;
  border-bottom: 2px solid var(--conditions-color);
}

.conditions-tree__item:last-child:not(.conditions-tree__item--parent)::before {
  bottom: calc(50% - 1px);
  height: 100%;
}

.conditions-tree__item > .flex-box > .field--dinamic:has(> .filter-search) {
  min-width: 280px;
  max-width: 444px;
}

.conditions-tree__item--without-bg {
  padding-top: 4px;
  padding-bottom: 4px;
}

.conditions-tree__item--after::before {
  border-radius: 0 0 0 16px;
  border-bottom: 2px solid var(--conditions-color);
}

.conditions-tree__item--after:not(.conditions-tree__item--parent)::before {
  bottom: calc(50% - 1px);
}

.conditions-tree__item--parent {
  background-color: var(--background-surface-weaker);
}

.conditions-tree__item--parent:not(.conditions-tree__item--without-bg) {
  padding: 4px;
}

.conditions-tree__item--parent::before {
  top: 20px;
}

.conditions-tree__action {
  margin-left: -8px;
  margin-right: -4px;
}

.structs-tree {
  --struct-tree-color: var(--border-neutral-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.structs-tree .structs-tree__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding-left: 36px;
  position: relative;
}

.structs-tree .structs-tree__item:first-child::before {
  height: 100%;
}

.structs-tree .structs-tree__item:not(:first-child)::before {
  top: -16px;
  height: calc(100% + 16px);
}

.structs-tree .structs-tree__item:last-child::before {
  height: 32px;
}

.structs-tree .structs-tree__item:last-child:first-child::before {
  height: 16px;
}

.structs-tree .structs-tree__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  width: 1px;
  border-left: 0.8px solid var(--struct-tree-color);
}

.structs-tree .structs-tree__item::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  height: 1px;
  width: 16px;
  border-top: 0.8px solid var(--struct-tree-color);
}

.structs-tree .structs-tree__item .accordion {
  width: 100%;
}

.structs-tree .structs-tree__item > .flex-box:not(.container-fit-content),
.structs-tree .structs-tree__item > .grid-box {
  width: 100%;
}

.structs-tree .structs-tree__item > .flex-box,
.structs-tree .structs-tree__item > .grid-box {
  min-height: 32px;
}

.structs-tree .structs-tree__item:has(.structs-tree__header)::after {
  top: 14px;
}

.structs-tree .structs-tree__actions {
  position: absolute;
  top: 0;
  right: -32px;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: opacity;
}

.structs-tree__item:hover > .structs-tree__actions, .structs-tree__item:focus-within > .structs-tree__actions {
  opacity: 1;
}

.structs-tree__item:hover > .flex-box > .structs-tree__header .type-icon,
.structs-tree__item:hover > .flex-box > .structs-tree__header .radio-buttons, .structs-tree__item:focus-within > .flex-box > .structs-tree__header .type-icon,
.structs-tree__item:focus-within > .flex-box > .structs-tree__header .radio-buttons {
  opacity: 1;
  color: #000;
}

.structs-tree__header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 28px;
}

.structs-tree__header:hover > .structs-tree__actions, .structs-tree__header:focus-within > .structs-tree__actions {
  opacity: 1;
}

.structs-tree--medium .structs-tree__item {
  padding-left: 48px;
}

.structs-tree--medium .structs-tree__item:first-child::before {
  top: -16px;
  height: calc(100% + 16px);
}

.structs-tree--medium .structs-tree__item:first-child:last-child::before {
  height: calc(50% + 16px);
}

.structs-tree--medium .structs-tree__item:last-child::before {
  height: calc(50% + 16px);
  width: 32px;
  border-bottom: 0.8px solid var(--struct-tree-color);
  border-bottom-left-radius: 16px;
}

.structs-tree--medium .structs-tree__item:last-child::after {
  display: none;
}

.structs-tree--medium .structs-tree__item::after {
  top: 50%;
  width: 32px;
}

.structs-tree--small {
  gap: 0;
}

.structs-tree--small .structs-tree__item {
  min-height: 24px;
  padding-left: 28px;
}

.structs-tree--small .structs-tree__item::after, .structs-tree--small .structs-tree__item::before {
  left: 8px;
}

.structs-tree--small .structs-tree__item::after {
  top: 12px;
}

.structs-tree--small .structs-tree__item:last-child::before {
  height: 24px;
  top: -12px;
}

.structs-tree--small .structs-tree__item:last-child:first-child::before {
  top: -4px;
}

.structs-tree--small .structs-tree__item > .flex-box,
.structs-tree--small .structs-tree__item > .grid-box {
  min-height: 24px;
}

.structs-tree--primary,
.structs-tree__item--primary {
  --struct-tree-color: var(--border-brand-strong);
}

.structs-tree--yellow,
.structs-tree__item--yellow {
  --struct-tree-color: var(--status-warning-strong);
}

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

.draggable-container__list {
  display: flex;
  flex-direction: column;
}

.draggable-placeholder {
  background-color: var(--background-surface-weaker);
}

.draggable-container__list {
  --icon-left-position: 24px;
}

.draggable-container__list:not(:last-of-type) {
  padding-bottom: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-neutral-strong);
}

.draggable-container__item {
  position: relative;
}

.draggable-container__item:hover > .svg-icon {
  --svg-icon-color: var(--foreground-brand-strong);
}

.draggable-container__item > .svg-icon {
  position: absolute;
  top: 50%;
  left: var(--icon-left-position);
  z-index: 1;
  transform: translate(0, -50%);
  cursor: move;
}

.draggable-container__item:not([draggable=true]) > .svg-icon {
  display: none;
}

.draggable-preview-start > .svg-icon {
  display: none;
}

.draggable-placeholder {
  height: 2px;
  width: 100%;
  background-color: var(--foreground-brand-strong);
}

.draggable-placeholder--hidden {
  display: none;
}

.CodeMirror {
  font-family: monospace;
  height: 300px;
  color: #000;
  direction: ltr;
}

.CodeMirror-lines {
  padding: 4px 0;
}

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px;
}

.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler {
  background-color: #fff;
}

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker {
  color: #000;
}

.CodeMirror-guttermarker-subtle {
  color: #999;
}

.CodeMirror-cursor {
  border-left: 1px solid #000;
  border-right: none;
  width: 0;
}

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-fat-cursor .CodeMirror-line::selection, .cm-fat-cursor .CodeMirror-line > span::selection, .cm-fat-cursor .CodeMirror-line > span > span::selection {
  background: 0 0;
}

.cm-fat-cursor .CodeMirror-line::-moz-selection, .cm-fat-cursor .CodeMirror-line > span::-moz-selection, .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
  background: 0 0;
}

.cm-fat-cursor {
  caret-color: transparent;
}

@-moz-keyframes blink {
  50% {
    background-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    background-color: transparent;
  }
}
@keyframes blink {
  50% {
    background-color: transparent;
  }
}
.cm-tab {
  display: inline-block;
  text-decoration: inherit;
}

.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: 0;
  overflow: hidden;
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute;
}

.cm-s-default .cm-header {
  color: #00f;
}

.cm-s-default .cm-quote {
  color: #090;
}

.cm-negative {
  color: #d44;
}

.cm-positive {
  color: #292;
}

.cm-header, .cm-strong {
  font-weight: 700;
}

.cm-em {
  font-style: italic;
}

.cm-link {
  text-decoration: underline;
}

.cm-strikethrough {
  text-decoration: line-through;
}

.cm-s-default .cm-keyword {
  color: #708;
}

.cm-s-default .cm-atom {
  color: #219;
}

.cm-s-default .cm-number {
  color: #164;
}

.cm-s-default .cm-def {
  color: #00f;
}

.cm-s-default .cm-variable-2 {
  color: #05a;
}

.cm-s-default .cm-type, .cm-s-default .cm-variable-3 {
  color: #085;
}

.cm-s-default .cm-comment {
  color: #a50;
}

.cm-s-default .cm-string {
  color: #a11;
}

.cm-s-default .cm-string-2 {
  color: #f50;
}

.cm-s-default .cm-meta {
  color: #555;
}

.cm-s-default .cm-qualifier {
  color: #555;
}

.cm-s-default .cm-builtin {
  color: #30a;
}

.cm-s-default .cm-bracket {
  color: #997;
}

.cm-s-default .cm-tag {
  color: #170;
}

.cm-s-default .cm-attribute {
  color: #00c;
}

.cm-s-default .cm-hr {
  color: #999;
}

.cm-s-default .cm-link {
  color: #00c;
}

.cm-s-default .cm-error {
  color: red;
}

.cm-invalidchar {
  color: red;
}

.CodeMirror-composing {
  border-bottom: 2px solid;
}

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22;
}

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3);
}

.CodeMirror-activeline-background {
  background: #e8f2ff;
}

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.CodeMirror-scroll {
  overflow: scroll !important;
  margin-bottom: -50px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: 0;
  position: relative;
  z-index: 0;
}

.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar {
  position: absolute;
  z-index: 6;
  display: none;
  outline: 0;
}

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0;
}

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0;
}

.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3;
}

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: 0 0 !important;
  border: none !important;
}

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent;
}

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent;
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px;
}

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: 0 0;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

.CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px;
}

.CodeMirror-rtl pre {
  direction: rtl;
}

.CodeMirror-code {
  outline: 0;
}

.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}

.CodeMirror-measure pre {
  position: static;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}

div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected {
  background: #d9d9d9;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0;
}

.CodeMirror-crosshair {
  cursor: crosshair;
}

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
  background: #d7d4f0;
}

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0;
}

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, 0.4);
}

.cm-force-border {
  padding-right: 0.1px;
}

@media print {
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}
.cm-tab-wrap-hack:after {
  content: "";
}

span.CodeMirror-selectedtext {
  background: 0 0;
}

.EasyMDEContainer {
  display: block;
}

.CodeMirror-rtl pre {
  direction: rtl;
}

.EasyMDEContainer.sided--no-fullscreen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.EasyMDEContainer .CodeMirror {
  box-sizing: border-box;
  height: auto;
  border: 1px solid #ced4da;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 10px;
  font: inherit;
  z-index: 0;
  word-wrap: break-word;
}

.EasyMDEContainer .CodeMirror-scroll {
  cursor: text;
}

.EasyMDEContainer .CodeMirror-fullscreen {
  background: #fff;
  position: fixed !important;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 8;
  border-right: none !important;
  border-bottom-right-radius: 0 !important;
}

.EasyMDEContainer .CodeMirror-sided {
  width: 50% !important;
}

.EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
  border-right: none !important;
  border-bottom-right-radius: 0;
  position: relative;
  flex: 1 1 auto;
}

.EasyMDEContainer .CodeMirror-placeholder {
  opacity: 0.5;
}

.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
  background: #d9d9d9;
}

.editor-toolbar {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  padding: 9px 10px;
  border-top: 1px solid #ced4da;
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.editor-toolbar.fullscreen {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  background: #fff;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 9;
}

.editor-toolbar.fullscreen::before {
  width: 20px;
  height: 50px;
  background: -moz-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.editor-toolbar.fullscreen::after {
  width: 20px;
  height: 50px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
  position: fixed;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

.EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
  width: 100%;
}

.editor-toolbar .easymde-dropdown, .editor-toolbar button {
  background: 0 0;
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.editor-toolbar button {
  font-weight: 700;
  min-width: 30px;
  padding: 0 6px;
  white-space: nowrap;
}

.editor-toolbar button.active, .editor-toolbar button:hover {
  background: #fcfcfc;
  border-color: #95a5a6;
}

.editor-toolbar i.separator {
  display: inline-block;
  width: 0;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #fff;
  color: transparent;
  text-indent: -10px;
  margin: 0 6px;
}

.editor-toolbar button:after {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 65%;
  vertical-align: text-bottom;
  position: relative;
  top: 2px;
}

.editor-toolbar button.heading-1:after {
  content: "1";
}

.editor-toolbar button.heading-2:after {
  content: "2";
}

.editor-toolbar button.heading-3:after {
  content: "3";
}

.editor-toolbar button.heading-bigger:after {
  content: "▲";
}

.editor-toolbar button.heading-smaller:after {
  content: "▼";
}

.editor-toolbar.disabled-for-preview button:not(.no-disable) {
  opacity: 0.6;
  pointer-events: none;
}

@media only screen and (max-width: 700px) {
  .editor-toolbar i.no-mobile {
    display: none;
  }
}
.editor-statusbar {
  padding: 8px 10px;
  font-size: 12px;
  color: #959694;
  text-align: right;
}

.EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
  width: 100%;
}

.editor-statusbar span {
  display: inline-block;
  min-width: 4em;
  margin-left: 1em;
}

.editor-statusbar .lines:before {
  content: "lines: ";
}

.editor-statusbar .words:before {
  content: "words: ";
}

.editor-statusbar .characters:before {
  content: "characters: ";
}

.editor-preview-full {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 7;
  overflow: auto;
  display: none;
  box-sizing: border-box;
}

.editor-preview-side {
  position: fixed;
  bottom: 0;
  width: 50%;
  top: 50px;
  right: 0;
  z-index: 9;
  overflow: auto;
  display: none;
  box-sizing: border-box;
  border: 1px solid #ddd;
  word-wrap: break-word;
}

.editor-preview-active-side {
  display: block;
}

.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
  flex: 1 1 auto;
  height: auto;
  position: static;
}

.editor-preview-active {
  display: block;
}

.editor-preview {
  padding: 10px;
  background: #fafafa;
}

.editor-preview > p {
  margin-top: 0;
}

.editor-preview pre {
  background: #eee;
  margin-bottom: 10px;
}

.editor-preview table td, .editor-preview table th {
  border: 1px solid #ddd;
  padding: 5px;
}

.cm-s-easymde .cm-tag {
  color: #63a35c;
}

.cm-s-easymde .cm-attribute {
  color: #795da3;
}

.cm-s-easymde .cm-string {
  color: #183691;
}

.cm-s-easymde .cm-header-1 {
  font-size: calc(1.375rem + 1.5vw);
}

.cm-s-easymde .cm-header-2 {
  font-size: calc(1.325rem + 0.9vw);
}

.cm-s-easymde .cm-header-3 {
  font-size: calc(1.3rem + 0.6vw);
}

.cm-s-easymde .cm-header-4 {
  font-size: calc(1.275rem + 0.3vw);
}

.cm-s-easymde .cm-header-5 {
  font-size: 1.25rem;
}

.cm-s-easymde .cm-header-6 {
  font-size: 1rem;
}

.cm-s-easymde .cm-header-1, .cm-s-easymde .cm-header-2, .cm-s-easymde .cm-header-3, .cm-s-easymde .cm-header-4, .cm-s-easymde .cm-header-5, .cm-s-easymde .cm-header-6 {
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.cm-s-easymde .cm-comment {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.cm-s-easymde .cm-link {
  color: #7f8c8d;
}

.cm-s-easymde .cm-url {
  color: #aab2b3;
}

.cm-s-easymde .cm-quote {
  color: #7f8c8d;
  font-style: italic;
}

.editor-toolbar .easymde-dropdown {
  position: relative;
  background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
  border-radius: 0;
  border: 1px solid #fff;
}

.editor-toolbar .easymde-dropdown:hover {
  background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
}

.easymde-dropdown-content {
  display: block;
  visibility: hidden;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 8px;
  z-index: 2;
  top: 30px;
}

.easymde-dropdown:active .easymde-dropdown-content, .easymde-dropdown:focus .easymde-dropdown-content, .easymde-dropdown:focus-within .easymde-dropdown-content {
  visibility: visible;
}

.easymde-dropdown-content button {
  display: block;
}

span[data-img-src]::after {
  content: "";
  background-image: var(--bg-image);
  display: block;
  max-height: 100%;
  max-width: 100%;
  background-size: contain;
  height: 0;
  padding-top: var(--height);
  width: var(--width);
  background-repeat: no-repeat;
}

.editor-toolbar {
  padding: 0 !important;
  border: none;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  container-type: inline-size;
  container-name: editor-toolbar;
}

.editor-toolbar > button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  transition: background-color 0.3s;
}

.editor-toolbar > button:hover {
  background: none;
  border-color: transparent;
}

.editor-toolbar > button:hover .fa::before {
  background-color: var(--foreground-stronger);
}

.editor-toolbar > button.active {
  border-color: transparent;
}

.editor-toolbar > button.active .fa::before {
  background-color: var(--foreground-stronger);
}

.editor-toolbar.fullscreen {
  padding-left: 72px !important;
}

.editor-toolbar.disabled-for-preview button:not(:disabled) {
  opacity: 1;
}

.editor-toolbar.disabled-for-preview button:not(:disabled):not(.no-disable) .fa {
  pointer-events: all;
  cursor: not-allowed;
}

.editor-toolbar.disabled-for-preview button:not(:disabled):not(.no-disable) .fa::before {
  background-color: var(--foreground-disabled);
}

.editor-toolbar .separator {
  display: none !important;
}

.fa::before {
  content: "" !important;
  background-color: var(--foreground-weak);
  width: 18px;
  height: 18px;
  display: block;
  transition: background-color 0.3s;
}

.fa-bold::before {
  mask: url("img/WysiwygBold.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygBold.svg") center/cover no-repeat;
}

.fa-italic::before {
  mask: url("img/WysiwygItalic.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygItalic.svg") center/cover no-repeat;
}

.fa-header::before {
  mask: url("img/WysiwygHeader.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygHeader.svg") center/cover no-repeat;
}

.mde-code,
.mde-link {
  margin-left: 24px !important;
}

.mde-preview {
  margin-left: auto !important;
}

.fa-code::before {
  mask: url("img/WysiwygCode.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygCode.svg") center/cover no-repeat;
}

.fa-quote-left::before {
  mask: url("img/WysiwygQuote.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygQuote.svg") center/cover no-repeat;
}

.fa-list-ul::before {
  mask: url("img/WysiwygListBullet.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygListBullet.svg") center/cover no-repeat;
}

.fa-list-ol::before {
  mask: url("img/WysiwygListNumber.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygListNumber.svg") center/cover no-repeat;
}

.fa-link::before {
  mask: url("img/WysiwygLink.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygLink.svg") center/cover no-repeat;
}

.fa-image::before {
  mask: url("img/WysiwygImage.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygImage.svg") center/cover no-repeat;
}

.fa-table::before {
  mask: url("img/WysiwygTable.svg") center/cover no-repeat;
  -webkit-mask: url("img/WysiwygTable.svg") center/cover no-repeat;
}

.fa-eye::before {
  mask: url("img/Show.svg") center/cover no-repeat;
  -webkit-mask: url("img/Show.svg") center/cover no-repeat;
}

.fa-question-circle::before {
  mask: url("img/Help.svg") center/cover no-repeat;
  -webkit-mask: url("img/Help.svg") center/cover no-repeat;
}

.fa-columns::before {
  mask: url("img/WindowCompress.svg") center/cover no-repeat;
  -webkit-mask: url("img/WindowCompress.svg") center/cover no-repeat;
}

.fa-arrows-alt::before {
  mask: url("img/WindowExpand.svg") center/cover no-repeat;
  -webkit-mask: url("img/WindowExpand.svg") center/cover no-repeat;
}

@container editor-toolbar (max-width: 594px) {
  .mde-code,
  .mde-link,
  .mde-preview {
    margin-left: 0 !important;
  }
}
.editor-preview {
  padding: 16px !important;
}

.cm-formatting-list-ul {
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  height: 16px;
  vertical-align: text-bottom;
  padding-right: 8px;
}

.cm-formatting-list-ul::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--foreground-stronger);
}

.markdown-edit {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

.markdown-edit:not(.markdown-edit--without-buttons) {
  padding: 0 8px 16px 8px;
  background-color: var(--background-surface-weaker);
  border-radius: 4px;
  min-height: 170px;
}

.markdown-edit .CodeMirror {
  padding: 4px;
  border: 1px solid var(--border-neutral-strong);
  border-radius: 4px;
  background-color: var(--background-surface-weakest);
}

.markdown-edit .CodeMirror.CodeMirror-fullscreen {
  padding-left: 72px !important;
}

.markdown-edit .cm-header-1 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
}

.markdown-edit .cm-header-2 {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
}

.markdown-edit .cm-header-3,
.markdown-edit .cm-header-4 {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
}

.markdown-edit .cm-header-5 {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.markdown-edit .cm-header-6 {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
}

.markdown-edit .cm-strong {
  font-weight: 700;
}

.markdown-edit--without-buttons .editor-toolbar {
  display: none;
}

.markdown-edit--disabled .editor-toolbar button {
  opacity: 0.6;
  pointer-events: none;
}

.markdown-edit--disabled .editor-toolbar .EasyMDEContainer .CodeMirror {
  pointer-events: none;
}

.markdown-edit--with-max-height .CodeMirror-scroll {
  max-height: var(--markdown-max-hieght);
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: var(--progress-height);
  }
}
.progress-bar {
  display: flex;
  align-items: center;
  border-radius: 24px;
  background-color: var(--background-surface-weak);
  overflow: hidden;
  width: 100%;
  height: var(--progress-height);
  color: var(--foreground-contrast);
}

.progress-bar--small {
  --progress-height: 4px;
  font-size: 0;
}

.progress-bar--medium {
  --progress-height: 8px;
  font-size: 8px;
}

.progress-bar--big {
  --progress-height: 16px;
}

.progress-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  background-color: var(--progress-color);
  transition: width 0.3s ease;
}

.progress-bar__item--blue {
  --progress-color: var(--background-brand);
}

.progress-bar__item--red {
  --progress-color: var(--status-danger-strong);
}

.progress-bar__item--striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--progress-height);
}

.progress-bar__item--animated {
  animation: 1s linear infinite progress-bar-stripes;
}

.flex-box {
  display: flex;
}

@media (max-width: 1200px) {
  .flex-box--adaptive--medium {
    flex-direction: column;
  }
}
@media (max-width: 1200px) {
  .flex-box--adaptive--medium-revers {
    flex-direction: column-reverse;
  }
}
@media (max-width: 1400px) {
  .flex-box--adaptive--big {
    flex-direction: column;
  }
}
@media (max-width: 1400px) {
  .flex-box--adaptive--big-revers {
    flex-direction: column-reverse;
  }
}
@media (max-width: 1600px) {
  .flex-box--adaptive--extra-big {
    flex-direction: column;
  }
}
@media (max-width: 1600px) {
  .flex-box--adaptive--extra-big-revers {
    flex-direction: column-reverse;
  }
}
.flex-box--column {
  flex-direction: column;
}

.flex-box--gap-extra-small {
  --flex-gap: 2px;
  gap: 2px;
}

.flex-box--gap-small {
  --flex-gap: 4px;
  gap: 4px;
}

.flex-box--gap {
  --flex-gap: 8px;
  gap: 8px;
}

.flex-box--medium {
  --flex-gap: 12px;
  gap: 12px;
}

.flex-box--gap-big {
  --flex-gap: 16px;
  gap: 16px;
}

.flex-box--gap-extra-big {
  --flex-gap: 24px;
  gap: 24px;
}

.flex-box--gap-biggest {
  --flex-gap: 32px;
  gap: 32px;
}

.flex-box--gap-very-biggest {
  --flex-gap: 48px;
  gap: 48px;
}

.flex-box--gap-extra-biggest {
  --flex-gap: 64px;
  gap: 64px;
}

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

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

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

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

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

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

.flex-box--wrap {
  flex-wrap: wrap;
}

.flex-box--full-size {
  flex-grow: 1;
}

.flex-box--with-indicator {
  position: relative;
}

.flex-box--with-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translate(0px, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-red_500);
}

.flex-box--buttons-group:has(> * .button--small) .checkbox {
  padding: 3px;
}

.flex-box--buttons-group:has(> * .button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) .checkbox {
  background-color: transparent;
}

.flex-box--buttons-group:has(> * .button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) > *:not(:last-child)::after {
  top: 8px;
  height: calc(100% - 16px);
}

.flex-box--buttons-group .checkbox {
  background-color: var(--background-neutral-weak);
  padding: 7px;
  border-radius: 3px;
}

.flex-box--buttons-group .checkbox::after {
  left: 4px;
}

.flex-box--buttons-group > * {
  position: relative;
  margin-right: 1px;
}

.flex-box--buttons-group > * .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):first-child:not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.flex-box--buttons-group > * .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):not(:first-child):not(:last-child) {
  border-radius: 0px;
}

.flex-box--buttons-group > * .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):last-child:not(:first-child) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.flex-box--buttons-group > *:first-child:not(:last-child):not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.flex-box--buttons-group > *:first-child:not(:last-child):not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) .button:not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.flex-box--buttons-group > *:first-child:not(:last-child):not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) .button:not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):last-child:not(:first-child) {
  border-radius: 0px;
}

.flex-box--buttons-group > *:not(:first-child):not(:last-child) .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) {
  border-radius: 0px !important;
}

.flex-box--buttons-group > *:last-child:not(:first-child) .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.flex-box--buttons-group > *:last-child:not(:first-child) .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):first-child:not(:last-child) {
  border-radius: 0px;
}

.flex-box--buttons-group > *:last-child:not(:first-child) .button:not(:focus-visible):not(.button--tertiary, .button--tertiary-neutral, .button--tertiary-danger):not(:first-child):not(:last-child) {
  border-radius: 0px;
}

.flex-box--buttons-group > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 0.8px;
  height: 100%;
  background-color: #ccc;
}

.flex-box--button {
  position: relative;
  transition: box-shadow 0.3s, background-color 0.3s;
}

.flex-box--button .checkbox,
.flex-box--button button:not(.flex-box__button),
.flex-box--button a:not(.flex-box__button),
.flex-box--button .b-tooltip,
.flex-box--button .badge:has(.text[title]:not([title=""])) {
  z-index: 2;
}

.flex-box--button:not(:has(.flex-box__button[disabled=true])) [class^=background-]:hover, .flex-box--button:not(:has(.flex-box__button[disabled=true])).flex-box[class*=" background-"]:hover {
  box-shadow: var(--box-shadow);
}

.flex-box--button:not(:has(.flex-box__button[disabled=true])):not([class^=background-], [class*=" background-"]):hover {
  background-color: var(--color-secondary_500);
}

.flex-box--button:not(:has(.flex-box__button[disabled=true])):hover .flex-box__button-indicator {
  color: var(--color-primary_500);
  --svg-icon-color: var(--color-primary_500);
}

.flex-box__button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--container-radius);
}

.flex-box__button:focus {
  outline: transparent;
}

.flex-box__button:focus-visible {
  box-shadow: var(--button-focus);
}

.flex-box__button-indicator {
  color: var(--color-text_300);
  --svg-icon-color: var(--color-text_300);
}

.grid-box {
  display: grid;
  width: 100%;
  grid-template-columns: var(--grid-column-width) minmax(64px, 1fr);
  gap: var(--grid-gap) 8px;
}

.grid-box > .flex-box {
  min-height: 32px;
}

@media (max-width: 992px) {
  .grid-box:not(.grid-box--without-adaptive) {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .grid-box:not(.grid-box--without-adaptive) .grid-box__row {
    grid-column: auto;
  }
  .grid-box:not(.grid-box--without-adaptive) .grid-box__label {
    min-height: auto;
  }
  .grid-box:not(.grid-box--without-adaptive) > *:not(.grid-box__label):not(:last-child) {
    margin-bottom: var(--grid-gap);
  }
}
.grid-box--gap-extra-small {
  --grid-gap: 2px;
}

.grid-box--gap-small {
  --grid-gap: 4px;
}

.grid-box--gap {
  --grid-gap: 8px;
}

.grid-box--gap-big {
  --grid-gap: 16px;
}

.grid-box--gap-extra-big {
  --grid-gap: 24px;
}

.grid-box--gap-biggest {
  --grid-gap: 32px;
}

.grid-box--gap-extra-biggest {
  --grid-gap: 64px;
}

.grid-box__label {
  display: block;
  min-height: 32px;
  padding-top: 8px;
}

.grid-box__label > .field-label,
.grid-box__label > .text {
  display: inline;
  line-height: 18px;
  word-break: break-word;
}

.grid-box__label > .b-tooltip,
.grid-box__label > .dropdown,
.grid-box__label > .svg-icon,
.grid-box__label > .type-icon {
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
}

.grid-box__label > .type-icon {
  display: inline-flex;
}

.grid-box__label > .svg-icon--small,
.grid-box__label > .type-icon--small {
  margin-top: 0;
}

.grid-box__label > .b-tooltip,
.grid-box__label > .dropdown {
  align-self: flex-start;
}

.grid-box__label--centered {
  display: flex;
  align-items: center;
  padding-top: 0;
}

.grid-box__label--centered > .b-tooltip,
.grid-box__label--centered > .dropdown,
.grid-box__label--centered > .svg-icon,
.grid-box__label--centered > .type-icon {
  margin-top: 0;
}

.grid-box__row {
  grid-column: span 2;
  min-height: 32px;
}

.container {
  --padding-container: 32px;
  padding-right: var(--padding-container);
  padding-left: var(--padding-container);
}

.container--medium {
  --padding-container: 24px ;
}

.container--small {
  --padding-container: 16px ;
}

.container--extra-small {
  --padding-container: 8px ;
}

.container--minimal {
  --padding-container: 4px ;
}

.container--offset-left {
  padding-right: 0;
}

.container--offset-right {
  padding-left: 0;
}

.padding {
  --padding-size: 32px;
  padding-top: var(--padding-size);
  padding-bottom: var(--padding-size);
}

.padding--medium {
  --padding-size: 24px ;
}

.padding--small {
  --padding-size: 16px ;
}

.padding--extra-small {
  --padding-size: 8px ;
}

.padding--minimal {
  --padding-size: 4px ;
}

.padding--offset-top {
  padding-bottom: 0;
}

.padding--offset-bottom {
  padding-top: 0;
}

.container-extra-small-form,
.container-small-form,
.container-form,
.container-big-form,
.container-rubricator {
  max-width: var(--container-width);
  width: 100%;
}

.container-extra-small-form.container:not(.container--offset-left):not(.container--offset-right),
.container-small-form.container:not(.container--offset-left):not(.container--offset-right),
.container-form.container:not(.container--offset-left):not(.container--offset-right),
.container-big-form.container:not(.container--offset-left):not(.container--offset-right),
.container-rubricator.container:not(.container--offset-left):not(.container--offset-right) {
  max-width: calc(var(--container-width) + var(--padding-container) * 2);
}

.container-extra-small-form.container--offset-left, .container-extra-small-form.container--offset-right,
.container-small-form.container--offset-left,
.container-small-form.container--offset-right,
.container-form.container--offset-left,
.container-form.container--offset-right,
.container-big-form.container--offset-left,
.container-big-form.container--offset-right,
.container-rubricator.container--offset-left,
.container-rubricator.container--offset-right {
  max-width: calc(var(--container-width) + var(--padding-container));
}

.container-rubricator {
  --container-width: 200px;
}

.container-extra-small-form {
  --container-width: 456px;
}

.container-small-form {
  --container-width: 640px;
}

.container-form {
  --container-width: 800px;
}

.container-big-form {
  --container-width: 1140px;
}

.container-fit-content {
  width: fit-content;
}

.border-radius {
  border-radius: var(--container-radius);
}

.border-container-stronger {
  border: 1px solid var(--border-neutral-stronger);
}

.border-container-strong {
  border: 1px solid var(--border-neutral-strong);
}

.border-container-contrast {
  border: 1px solid var(--border-contrast);
}

.border-container-brand {
  border: 1px solid var(--border-brand-strong);
}

.border-container-warning {
  border: 1px solid var(--status-warning-strong);
}

.border-container-danger {
  border: 1px solid var(--status-danger-strong);
}

.border-container-success {
  border: 1px solid var(--status-success-strong);
}

.border-container-progress {
  border: 1px solid var(--status-progress-strong);
}

.border-container-transparent {
  border: 1px solid transparent;
}

.border-container-gray {
  border: 1px solid var(--border-color_dark);
}

.border-container-complete {
  border: 1px solid var(--complete-color);
}

.border-container-current {
  border: 1px solid var(--current-color);
}

.border-container-primary {
  border: 1px solid var(--color-primary_500);
}

.border-container-error {
  border: 1px solid var(--status-danger-strong);
}

.background-surface-weaker {
  --bg-under-text: var(--background-surface-weaker);
  background-color: var(--background-surface-weaker);
}

.background-surface-weaker-active {
  --bg-under-text: var(--background-surface-weaker-active);
  background-color: var(--background-surface-weaker-active);
}

.background-surface-weakest {
  --bg-under-text: var(--background-surface-weakest);
  background-color: var(--background-surface-weakest);
}

.background-brand {
  --bg-under-text: var(--background-brand);
  background-color: var(--background-brand);
}

.background-success-weakest {
  --bg-under-text: var(--status-success-weakest);
  background-color: var(--status-success-weakest);
}

.background-warning-weakest {
  --bg-under-text: var(--status-warning-weakest);
  background-color: var(--status-warning-weakest);
}

.background-danger-weakest {
  --bg-under-text: var(--status-danger-weakest);
  background-color: var(--status-danger-weakest);
}

.background-progress-weakest {
  --bg-under-text: var(--status-progress-weakest);
  background-color: var(--status-progress-weakest);
}

.background-warning {
  --bg-under-text: #FAF5F4;
  background-color: #FAF5F4;
}

.actions-right-column {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.actions-right-column__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.actions-right-column__group:not(:last-child) {
  padding-right: 8px;
  position: relative;
}

.actions-right-column__group:not(:last-child)::before {
  content: "";
  width: 1px;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
  border-right: 1px solid var(--border-neutral-strong);
}

.console-logs {
  --letter-size: 7.03px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  width: 100%;
  min-height: 32px;
  background-color: #292929;
  color: var(--foreground-contrast);
  padding: 4px 8px;
}

.fieldset {
  display: block;
}

.fieldset .flex-box:focus-within > .fieldset__actions, .fieldset .flex-box:hover > .fieldset__actions {
  opacity: 1;
}

.fieldset__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.fieldset__legend {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
  display: flex;
  align-items: center;
}

.fieldset__actions {
  margin-left: -8px;
  margin-right: -32px;
  opacity: 0;
  transition: opacity 0.3s;
}

.fieldset__actions:hover {
  opacity: 1;
}

.field {
  --field-width: 100%;
  --loader-bg: var(--foreground-brand-strong);
  --loader-size: 18px;
  display: flex;
  max-width: 100%;
  width: var(--field-width);
  min-width: 70px;
  position: relative;
  flex-direction: column;
}

.field > .dropdown--chiplist .dropdown-menu,
.field > .dropdown--select .dropdown-menu {
  width: fit-content;
  min-width: var(--field-dropdown-width);
  max-width: 500px;
}

.field:not(.field--extra-small, .field--small, .field--medium) > .dropdown--chiplist .dropdown-menu,
.field:not(.field--extra-small, .field--small, .field--medium) > .dropdown--select .dropdown-menu {
  width: var(--field-dropdown-width);
  min-width: var(--field-dropdown-width);
  max-width: var(--field-dropdown-width);
}

.field:has(.text-edit:hover) .preloader {
  background-color: var(--background-surface-weakest-hover);
}

.field:hover .field__buttons, .field:focus-within .field__buttons {
  opacity: 1;
}

.field .flex-box {
  min-height: auto;
}

.field input {
  display: block;
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border-neutral-strong);
  border-radius: var(--button-radius);
  padding: 3px 8px;
  background-color: var(--background-surface-weakest);
  transition: background-color 0.3s;
}

.field input::placeholder {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  color: var(--foreground-weak);
}

.field input:focus {
  outline: transparent;
  box-shadow: none;
  border-color: var(--border-focus);
}

.field input:not(:disabled):hover {
  background-color: var(--background-surface-weakest-hover);
}

.field input:disabled {
  border-style: dashed;
  cursor: not-allowed;
}

.field input:disabled::placeholder {
  color: inherit !important;
  font-style: italic;
}

.field input.invalid {
  border-color: var(--status-danger-strong);
}

.field input.invalid:focus {
  border-color: var(--status-danger-strong);
}

.field .text-edit--with-action {
  padding-right: 32px;
}

.field .text-edit--secret {
  padding-left: 32px;
}

.field .preloader {
  transform: none;
  border-radius: var(--button-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  top: 7px;
  right: 7px;
  left: auto;
  width: var(--loader-size);
  height: var(--loader-size);
  background-color: var(--background-surface-weakest);
}

.field .preloader::before {
  width: var(--loader-size);
  height: var(--loader-size);
  background-color: var(--loader-bg);
}

.field:has(.validation-message) .markdown-edit .CodeMirror {
  border-color: var(--status-danger-strong);
}

.field:has(.validation-message) .textarea-box::before {
  border-color: var(--status-danger-strong) !important;
}

.field:has(.validation-message) .dropdown .dropdown__toggle .button {
  border-color: var(--status-danger-strong);
}

.field:has(.validation-message) input {
  border-color: var(--status-danger-strong) !important;
}

.field:has(.validation-message) input:focus {
  box-shadow: none;
}

.field:has(.validation-message) .field--search input {
  border-color: var(--border-neutral-strong) !important;
}

.field:has(.validation-message) .field--search input:focus {
  border-color: var(--border-focus) !important;
}

.field:has(.validation-message) .content-edit:not(:focus-within) {
  border-color: var(--status-danger-strong) !important;
}

.field:has(.validation-message) .dropdown--chiplist {
  border-color: var(--status-danger-strong);
}

.field:has(.validation-message) .dropdown--chiplist:focus-within {
  box-shadow: none;
}

.field--focused input {
  box-shadow: var(--button-focus);
}

.field--with-actions input {
  padding-right: 40px;
}

.field--with-actions .numeric-edit {
  padding-right: 40px !important;
}

.field--with-actions .numeric-edit::-webkit-inner-spin-button, .field--with-actions .numeric-edit::-webkit-outer-spin-button {
  margin-right: -12px;
}

.field--with-actions .field__buttons {
  right: 32px;
}

.field--with-actions .field__numeric-icon {
  right: 22px;
}

.field--with-actions .numeric-edit--hours {
  margin-right: 42px;
}

.field--with-actions .field__numeric-icon--hours {
  right: -36px;
}

.field--with-actions .button--icon {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

.field--with-actions .button--icon.button--small {
  right: 4px;
  padding: 0;
}

.field--loading input {
  padding-right: 40px;
}

.field--search::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translate(0, -50%);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  mask: url("img/Search.svg") center/cover no-repeat;
  -webkit-mask: url("img/Search.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
}

.field--search .button--icon {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

.field--search:not(.dropdown--chiplist):not(.dropdown--select) input {
  padding-right: 32px;
  padding-left: 31px;
}

.field--search:hover .button--icon, .field--search:focus-within .button--icon {
  opacity: 1;
  pointer-events: all;
}

.field--invalid:not(.dropdown--chiplist) input,
.field--invalid:not(.dropdown--chiplist) .button--select {
  border-color: var(--status-danger-strong);
}

.field--invalid:not(.dropdown--chiplist) input:focus,
.field--invalid:not(.dropdown--chiplist) .button--select:focus {
  box-shadow: none;
}

.field--invalid:not(.dropdown--chiplist) .content-edit:not(.content-edit--not-field) {
  border-color: var(--status-danger-strong);
}

.field--invalid:not(.dropdown--chiplist) .content-edit:not(.content-edit--not-field):focus-within {
  box-shadow: none;
}

.field--invalid .dropdown--chiplist {
  border-color: var(--status-danger-strong);
}

.field--invalid .dropdown--chiplist:focus-within {
  box-shadow: none;
}

.validation-message {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 380;
  letter-spacing: -0.01375rem;
  display: flex;
  align-items: center;
  color: var(--status-danger-strong);
  padding: 2px;
  padding-bottom: 0;
}

.validation-message + .field__help {
  padding-top: 0;
}

.field--half {
  width: 50%;
}

.field--fit-content > .dropdown--chiplist .dropdown-menu,
.field--fit-content > .dropdown--select .dropdown-menu,
.field--extra-small > .dropdown--chiplist .dropdown-menu,
.field--extra-small > .dropdown--select .dropdown-menu,
.field--dinamic > .dropdown--chiplist .dropdown-menu,
.field--dinamic > .dropdown--select .dropdown-menu {
  width: fit-content !important;
  min-width: var(--field-dropdown-width);
}

.field--dinamic:not(.field--extra-small) > .dropdown--chiplist .dropdown-menu,
.field--dinamic:not(.field--extra-small) > .dropdown--select .dropdown-menu {
  max-width: var(--field-width);
}

.field--dinamic.field--extra-small > .dropdown--chiplist .dropdown-menu,
.field--dinamic.field--extra-small > .dropdown--select .dropdown-menu {
  max-width: 500px !important;
}

.field--dinamic > .numeric-edit {
  width: 68px;
}

.field--fit-content > .dropdown--chiplist .dropdown-menu,
.field--fit-content > .dropdown--select .dropdown-menu {
  max-width: 500px !important;
}

.field--fit-content {
  max-width: fit-content;
  flex-shrink: 0;
}

.field--extra-small {
  --field-width: 70px;
}

.field--small {
  --field-width: 224px;
}

.field--medium {
  --field-width: 376px;
}

.field--fills {
  --field-width: 100%;
  height: 100%;
}

.field--dinamic {
  max-width: var(--field-width);
  width: fit-content;
  flex-shrink: 0;
}

.field--dinamic:has(.textarea-box__inner) .field__text-for-resize {
  padding: 0 12px;
}

.field--dinamic .textarea-box__inner {
  padding-right: 2px;
}

.field--dinamic .textarea-box__inner textarea {
  padding-right: 0;
}

.field__text-for-resize {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 9px;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.field__help {
  padding: 2px;
  padding-bottom: 0;
}

.field__text-for-resize--numeric {
  padding-right: 24px;
}

.field__action {
  position: absolute;
  top: 0;
  right: 0;
}

.numeric-edit {
  min-width: 100%;
  padding-right: 24px !important;
}

.numeric-edit::-webkit-inner-spin-button, .numeric-edit::-webkit-outer-spin-button {
  opacity: 0;
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin-right: -16px;
}

.numeric-edit--percent::-webkit-inner-spin-button, .numeric-edit--percent::-webkit-outer-spin-button,
.numeric-edit--hours::-webkit-inner-spin-button,
.numeric-edit--hours::-webkit-outer-spin-button,
.numeric-edit--without-buttons::-webkit-inner-spin-button,
.numeric-edit--without-buttons::-webkit-outer-spin-button {
  display: none;
}

.numeric-edit--without-buttons {
  padding-right: 8px;
}

.numeric-edit--without-buttons .field__buttons {
  display: none;
}

.field__buttons {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.field__buttons::before, .field__buttons::after {
  content: "";
  border-style: solid;
  width: 0;
  height: 0;
}

.field__buttons::before {
  border-width: 0px 4px 6px 4px;
  border-color: transparent transparent var(--foreground-weak) transparent;
}

.field__buttons::after {
  border-width: 6px 4px 0px 4px;
  border-color: var(--foreground-weak) transparent transparent transparent;
}

.field__buttons--disabled {
  display: none;
}

.numeric-edit--percent {
  padding-right: 24px;
}

@-moz-document url-prefix() {
  .numeric-edit {
    padding-right: 4px !important;
  }
  .numeric-edit .field__buttons {
    display: none;
  }
}
.field__numeric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  right: 0px;
  width: 24px;
  height: 24px;
}

.field__numeric-icon::before {
  content: "%";
  color: var(--foreground-weak);
}

.numeric-edit--hours {
  margin-right: 42px;
  padding-right: 8px !important;
}

.field__numeric-icon--hours {
  right: -36px;
}

.field__numeric-icon--hours::before {
  display: none;
}

.time-edit {
  min-width: 100%;
  cursor: text;
}

.time-edit::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.field__time-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  right: 8px;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.field__time-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  -webkit-mask: url("img/Time.svg") center/cover no-repeat;
  mask: url("img/Time.svg") center/cover no-repeat;
  background-color: var(--foreground-brand-strong);
}

.field__icon-left {
  position: absolute;
  top: 4px;
  left: 4px;
  pointer-events: none;
}

*:has(> .field .field__editable-label) {
  min-width: 0;
}

.field__editable-label {
  margin-left: -8px;
  box-shadow: 0 0 0 1px transparent;
  border-radius: var(--button-radius);
  padding: 4px 8px;
  cursor: text;
  min-height: 32px;
}

.field__editable-label .text-edit {
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  font-size: 0;
  border: 0;
}

.field__editable-label .textarea-box {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.field__editable-label .textarea-box textarea {
  word-break: inherit;
}

.field__editable-label .textarea-box textarea::placeholder {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  font-weight: 400;
}

.field__editable-label:focus-within {
  border: none;
  padding: 0;
}

.field__editable-label:focus-within .field__editable-text,
.field__editable-label:focus-within .field__editable-placeholder {
  display: none;
}

.field__editable-label:focus-within .text-edit {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  width: 100%;
  min-height: 32px;
  height: auto;
  padding: 3px 7px;
  border: 1px solid var(--border-neutral-strong);
}

.field__editable-label:focus-within .textarea-box {
  position: static;
  pointer-events: all;
  opacity: 1;
}

.field__editable-label:hover {
  box-shadow: 0 0 0 1px var(--border-neutral-strong);
}

.field__editable-text {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

.field__editable-label--textarea {
  position: relative;
  padding-top: 0;
  padding-right: 2px;
  padding-bottom: 0;
  min-height: auto;
}

.field__editable-label--textarea .field__editable-placeholder {
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
}

.field__editable-text--textarea {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: var(--max-height-textarea);
  -webkit-line-clamp: var(--max-height-textarea);
  word-break: break-word;
  margin-top: 8px;
  margin-bottom: 8px;
}

.field__editable-placeholder {
  color: var(--foreground-weak);
}

.select-wrapper .blazored-typeahead {
  --typeahead-loader-color: var(--background-surface-weakest);
  position: static;
  border: 1px solid var(--border-neutral-strong);
  transition: background-color 0.3s;
}

.select-wrapper .blazored-typeahead:focus-within {
  box-shadow: var(--focus);
}

.select-wrapper .blazored-typeahead:hover {
  background-color: var(--background-surface-weakest-hover);
  --typeahead-loader-color: var(--background-surface-weakest-hover);
}

.select-wrapper .blazored-typeahead.valid.modified {
  border: 1px solid var(--border-neutral-strong);
}

.select-wrapper .blazored-typeahead__input {
  cursor: pointer;
  padding-right: 40px;
  border: none;
}

.select-wrapper .blazored-typeahead__input:focus + .blazored-typeahead__input-icon svg {
  transform: rotate(-180deg);
}

.select-wrapper .blazored-typeahead__input-hidden {
  display: none;
}

.select-wrapper .blazored-typeahead__results {
  width: 100%;
  max-height: 44vh;
  border-radius: var(--radius);
  margin-top: 4px;
}

.select-wrapper .blazored-typeahead__result {
  transition: background-color 0.3s;
  border: none;
  padding: 8px 8px 8px 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.select-wrapper .blazored-typeahead__result:not(.blazored-typeahead__selected-item):hover {
  background-color: var(--background-surface-weakest-hover);
  border: none;
}

.select-wrapper .blazored-typeahead__input-mask {
  padding: 4px 8px;
  min-height: 32px;
  cursor: pointer;
}

.select-wrapper .blazored-typeahead__selected-item {
  background-color: var(--background-surface-weakest-active);
}

.select-wrapper .blazored-typeahead__active-item {
  background-color: var(--background-surface-weakest);
}

.select-wrapper .blazored-typeahead__clear {
  display: none;
}

.select-wrapper .blazored-typeahead__input-icon {
  padding: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
}

.select-wrapper .blazored-typeahead__input-icon path {
  fill: var(--foreground-brand-strong);
}

.select-wrapper .blazored-typeahead__input-icon svg {
  transition: transform 0.3s;
}

.blazored-typeahead__loader {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  pointer-events: none;
  background-color: var(--typeahead-loader-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none !important;
  transition: background-color 0.3s;
}

.blazored-typeahead__loader::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--foreground-brand-strong);
}

.blazored-typeahead__loader::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 12px;
  height: 12px;
  z-index: 1;
  transform-origin: 100%;
  background-color: var(--typeahead-loader-color);
  animation: loader-rotation 0.7s infinite ease-out;
  -webkit-animation: loader-rotation 0.7s infinite ease-out;
  transition: background-color 0.3s;
}

.dropdown--select {
  width: 100%;
  min-height: 32px;
}

.dropdown--select .dropdown__toggle .entity-widget__text {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  height: fit-content;
}

.dropdown--select .dropdown-menu--show:not(dropdown-menu--tooltip):not(.dropdown-menu--tooltip-dark) {
  transition: opacity 0.3s 0.1s;
}

.dropdown--select-hovered .dropdown__toggle .button--with-caret {
  border-color: transparent;
}

.dropdown--select-hovered .dropdown__toggle .button--with-caret::after {
  opacity: 0;
}

.dropdown--select-hovered .dropdown__toggle .button--with-caret:hover, .dropdown--select-hovered .dropdown__toggle .button--with-caret.button--focused {
  border-color: var(--border-neutral-strong);
}

.dropdown--select-hovered .dropdown__toggle .button--with-caret:hover::after, .dropdown--select-hovered .dropdown__toggle .button--with-caret.button--focused::after {
  opacity: 1;
}

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

.select-trigger > .svg-icon,
.select-trigger > .abbr-icon,
.select-trigger > .type-icon,
.select-trigger > .ci-icon {
  margin-left: -4px;
}

.select-trigger > .severity-icon {
  margin-left: -2px;
}

.select-trigger > .entity-widget:first-child .svg-icon,
.select-trigger > .entity-widget:first-child .abbr-icon,
.select-trigger > .entity-widget:first-child .type-icon {
  margin-left: -4px;
}

.multiselect-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.placeholder-template {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  color: var(--foreground-weak);
}

.textarea-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  background-color: var(--background-surface-weakest);
  transition: background-color 0.3s;
}

.textarea-box:not(.textarea-box--disabled):focus-within::before {
  border-color: var(--border-focus);
}

.textarea-box:not(.textarea-box--disabled):hover {
  background-color: var(--background-surface-weakest-hover);
}

.textarea-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--button-radius);
  pointer-events: none;
  border: 1px solid var(--border-neutral-strong);
  transition: background-color 0.3s;
}

.textarea-box--disabled {
  cursor: not-allowed;
}

.textarea-box--disabled::before {
  border-style: dashed;
}

.textarea-box--disabled .textarea-box__inner {
  pointer-events: none;
}

.textarea-box__inner {
  background: none;
  padding-left: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  max-height: calc(var(--line-height-edit) * var(--max-height-textarea));
  transition: background-color 0.3s;
}

.textarea-box__inner::-webkit-scrollbar-track {
  margin-top: -8px;
  margin-bottom: -8px;
}

.textarea-box__inner textarea {
  display: block;
  width: 100%;
  min-height: 16px;
  height: 16px;
  padding-right: 8px;
  position: relative;
  z-index: 1;
  overflow-y: hidden;
}

.textarea-box__inner textarea:focus, .textarea-box__inner textarea:focus-visible {
  outline: transparent;
}

.textarea-box__inner textarea::placeholder {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  color: var(--foreground-weak);
}

.checkbox {
  display: flex;
  gap: 7px;
  padding-top: 7px;
  padding-left: 3px;
  width: fit-content;
  min-height: 32px;
  word-break: break-word;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
}

.checkbox::before {
  content: "";
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2px var(--border-neutral-stronger) inset;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: var(--background-surface-weakest);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.checkbox::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 1;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  mask: url("img/ControlCheck.svg") center/cover no-repeat;
  -webkit-mask: url("img/ControlCheck.svg") center/cover no-repeat;
  background-color: transparent;
  transition: background-color 0.3s, left 0.3s, right 0.3s, border-color 0.3s, box-shadow 0.1s, width 0.3s, transform 0.3s;
}

.checkbox:not(.checkbox--chart-legend, .checkbox--switch):hover::before {
  box-shadow: 0 0 0 2px var(--border-brand-weak) inset;
}

.checkbox:has(.checkbox__input:focus-visible)::before {
  box-shadow: 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus), 0 0 0 2px var(--border-neutral-stronger) inset;
}

.checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:checked)::before, .checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:not([type=radio]):indeterminate)::before {
  background-color: var(--background-brand);
  box-shadow: none;
}

.checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:checked)::after, .checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:not([type=radio]):indeterminate)::after {
  background-color: var(--foreground-contrast);
}

.checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):not(.checkbox--chart-legend, .checkbox--radio):hover::before, .checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:not([type=radio]):indeterminate):not(:has(.checkbox__input:disabled)):not(.checkbox--chart-legend, .checkbox--radio):hover::before {
  background-color: var(--background-brand-hover);
  box-shadow: none;
}

.checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:checked):has(.checkbox__input:focus-visible)::before, .checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:not([type=radio]):indeterminate):has(.checkbox__input:focus-visible)::before {
  box-shadow: 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus);
}

.checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:checked:disabled)::before, .checkbox:not(.checkbox--radio, .checkbox--favourites, .checkbox--is-not):has(.checkbox__input:not([type=radio]):indeterminate:disabled)::before {
  background-color: var(--background-brand-disabled);
}

.checkbox:has(.checkbox__input:not([type=radio]):indeterminate)::after {
  mask-image: url("img/ControlIndeterminateMini.svg");
  -webkit-mask-image: url("img/ControlIndeterminateMini.svg");
}

.checkbox:has(.checkbox__input:disabled) {
  cursor: not-allowed;
}

.checkbox:has(.checkbox__input:disabled:not(:checked, :indeterminate)):not(.checkbox--switch)::before {
  box-shadow: 0 0 0 2px var(--border-disabled) inset;
}

.checkbox__input {
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  position: absolute;
}

.checkbox__label {
  display: flex;
  gap: 4px;
  width: 100%;
  padding-top: 1px;
}

.checkbox__label > .svg-icon.svg-icon--basic-size {
  margin-top: -4px;
}

.checkbox--fills {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 0;
}

.checkbox--fills::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox--with-text {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
  color: var(--color-text_400);
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--border-neutral-strong);
  border-radius: var(--button-radius);
  background-color: var(--background-surface-weakest);
  transition: color 0.3s, border-color 0.3s;
}

.checkbox--with-text::before, .checkbox--with-text::after {
  display: none;
}

.checkbox--with-text:has(.checkbox__input:checked) {
  border-color: var(--border-brand-strong);
  color: var(--foreground-brand-strong);
}

.checkbox--with-text:has(.checkbox__input:focus-visible) {
  box-shadow: var(--button-focus);
}

.checkbox--with-text .checkbox__label {
  align-items: center;
  justify-content: center;
}

.checkbox--without-events {
  pointer-events: none;
}

.checkbox--favourites {
  width: 24px;
  min-height: 24px;
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  padding: 0;
}

.checkbox--favourites::before {
  display: none;
}

.checkbox--favourites::after {
  position: static;
  width: 16px;
  height: 16px;
  mask: url("img/StarEpmty.svg") center/cover no-repeat;
  -webkit-mask: url("img/StarEpmty.svg") center/cover no-repeat;
  background-color: var(--foreground-weaker);
  transition: background-color 0.3s;
}

.checkbox--favourites:not(:has(.checkbox__input:disabled)):hover::after {
  background-color: var(--status-favorites-strong);
}

.checkbox--favourites:has(.checkbox__input:checked)::after {
  mask-image: url("img/Star.svg");
  -webkit-mask-image: url("img/Star.svg");
  background-color: var(--status-favorites-strong);
}

.checkbox--favourites:has(.checkbox__input:checked):hover::after {
  background-color: var(--status-favorites-strong-hover);
}

.checkbox--favourites:has(.checkbox__input:focus-visible) {
  box-shadow: var(--button-focus);
}

.checkbox--with-background,
.checkbox--with-background-hover {
  align-items: center;
  padding: 4px 7px;
}

.checkbox--with-background::after,
.checkbox--with-background-hover::after {
  top: 50%;
  transform: translate(0, -50%);
  left: 4px;
}

.checkbox--with-background .checkbox__label,
.checkbox--with-background-hover .checkbox__label {
  padding-top: 0;
  align-items: center;
}

.checkbox--with-background:has(.checkbox__input:checked) {
  background-color: var(--background-neutral-weaker-active);
}

.checkbox--with-background:has(.checkbox__input:not(:checked, :disabled)):hover {
  background-color: var(--background-neutral-weaker-hover);
}

.checkbox--with-background-hover {
  border-radius: 4px;
}

.checkbox--with-background-hover:has(.checkbox__input:not(:disabled)):hover {
  background-color: var(--background-neutral-weaker-hover);
}

.checkbox--show-indicator .checkbox__label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translate(0, -50%);
  width: 4px;
  height: 4px;
  background-color: var(--status-danger-strong);
  border-radius: 50%;
}

.checkbox--chart-legend {
  transition: opacity 0.3s;
  align-items: center;
}

.checkbox--chart-legend .checkbox__label {
  gap: 4px;
  align-items: center;
}

.checkbox--chart-legend::before, .checkbox--chart-legend::after {
  display: none;
}

.checkbox--chart-legend:has(.checkbox__input:not(:checked)) {
  opacity: 0.5;
}

.checkbox--is-not {
  width: 24px;
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  padding: 0;
}

.checkbox--is-not::before {
  display: none;
}

.checkbox--is-not::after {
  position: static;
  width: 16px;
  height: 16px;
  mask: url("img/IsNot.svg") center/cover no-repeat;
  -webkit-mask: url("img/IsNot.svg") center/cover no-repeat;
  background-color: var(--foreground-weak);
  transition: background-color 0.3s;
}

.checkbox--is-not:not(:has(.checkbox__input:disabled)):hover::after {
  background-color: var(--status-is-not-strong-hover);
}

.checkbox--is-not:has(.checkbox__input:checked)::after {
  mask-image: url("img/IsNotFill.svg");
  -webkit-mask-image: url("img/IsNotFill.svg");
  background-color: var(--status-is-not-strong);
}

.checkbox--is-not:has(.checkbox__input:focus-visible) {
  box-shadow: var(--button-focus);
}

.checkbox--switch {
  padding-top: 6px;
  padding-left: 2px;
}

.checkbox--switch::before {
  width: 36px;
  height: 20px;
  background-color: var(--background-surface-stronger);
  box-shadow: none;
  border-radius: 12px;
}

.checkbox--switch:after {
  width: 20px;
  height: 20px;
  z-index: 0;
  top: 6px;
  left: 2px;
  mask-image: url("img/ControlSwitch.svg");
  -webkit-mask-image: url("img/ControlSwitch.svg");
  background-color: var(--foreground-contrast);
}

.checkbox--switch:has(.checkbox__input:checked)::after {
  left: 18px;
}

.checkbox--switch:has(.checkbox__input:not(:disabled)):hover::before {
  background-color: var(--background-surface-stronger-hover);
}

.checkbox--switch:has(.checkbox__input:focus-visible)::before {
  box-shadow: 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus);
}

.checkbox--switch .checkbox__label {
  padding-top: 2px;
}

.checkbox--switch-reverse {
  flex-direction: row-reverse;
  padding-left: 0;
  padding-right: 2px;
}

.checkbox--switch-reverse::after {
  left: auto;
  right: 2px;
}

.checkbox--switch-reverse:has(.checkbox__input:checked)::after {
  right: 18px;
  left: auto;
}

.radio-group {
  display: flex;
  flex-direction: column;
}

.checkbox--radio::before {
  border-radius: 50%;
}

.checkbox--radio::after {
  display: none;
}

.checkbox--radio:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled))::before {
  box-shadow: 0 0 0 5px var(--background-brand) inset;
}

.checkbox--radio:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover::before {
  box-shadow: 0 0 0 5px var(--background-brand-hover) inset;
}

.checkbox--radio:has(.checkbox__input:checked):has(.checkbox__input:focus-visible)::before {
  box-shadow: 0 0 0 5px var(--background-brand) inset, 0 0 0 2px var(--border-contrast), 0 0 0 3px var(--border-focus);
}

.checkbox--radio:has(.checkbox__input:checked):has(.checkbox__input:disabled)::before {
  box-shadow: 0 0 0 5px var(--background-brand-disabled) inset;
}

.radio-buttons {
  display: flex;
  width: fit-content;
  background-color: var(--background-surface-weak);
  border-radius: 6px;
  padding: 2px;
}

.checkbox--button {
  padding: 2px 7px;
  min-height: 28px;
  border-radius: 4px;
  color: var(--foreground-strong);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.checkbox--button::before, .checkbox--button::after {
  display: none;
}

.checkbox--button:has(.checkbox__input:checked) {
  color: var(--foreground-brand-strong);
  background-color: var(--background-surface-weakest);
  cursor: default;
}

.checkbox--button:has(.checkbox__input:checked):has(.checkbox__input:not(:disabled)) .svg-icon {
  opacity: 1;
  mix-blend-mode: normal;
}

.checkbox--button:has(.checkbox__input:not(:checked)):not(:hover) .text {
  color: var(--foreground-strong);
}

.checkbox--button:has(.checkbox__input:disabled) {
  color: var(--foreground-weak);
}

.checkbox--button:has(.checkbox__input:disabled) .text {
  color: var(--foreground-weak);
}

.checkbox--button .checkbox__label {
  align-items: center;
  gap: 4px;
  padding-top: 0;
}

.checkbox--button .svg-icon {
  opacity: 0.5;
  mix-blend-mode: luminosity;
  transition: mix-blend-mode 0.3s;
}

.checkbox--button:has(.checkbox__input:not(:disabled)):hover {
  color: var(--foreground-brand-strong);
}

.checkbox--button:has(.checkbox__input:not(:disabled)):hover .svg-icon {
  opacity: 1;
  mix-blend-mode: normal;
}

.checkbox--button:has(.checkbox__input:focus-visible) {
  box-shadow: var(--button-focus);
}

.radio-buttons--small .checkbox--button {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
  min-height: 20px;
}

.dropdown--chiplist {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 32px;
  padding: 3px;
  border: 1px solid var(--border-neutral-strong);
  border-radius: var(--button-radius);
  background-color: var(--background-surface-weakest);
  position: relative;
  transition: background-color 0.3s;
}

.dropdown--chiplist:not(.dropdown--chiplist-disabled):hover {
  background-color: var(--background-surface-weakest-hover);
}

.dropdown--chiplist:focus-within {
  box-shadow: var(--button-focus);
}

.dropdown--chiplist > input {
  min-height: 24px;
  min-width: 120px;
  width: auto;
  flex-grow: 1;
  border: none;
  background-color: transparent;
  margin-left: -4px;
}

.dropdown--chiplist > input:focus {
  outline: transparent;
  box-shadow: none;
}

.dropdown--chiplist > input:focus::placeholder {
  color: transparent;
}

.dropdown--chiplist > input:not(:disabled):hover {
  background-color: transparent;
}

.dropdown--chiplist > input:disabled {
  cursor: not-allowed;
  border-style: none;
}

.dropdown--chiplist > input::placeholder {
  color: var(--foreground-weak);
  transition: color 0.2s;
}

.dropdown--chiplist > .dropdown__input-box input {
  min-height: 24px;
  min-width: 120px;
  width: auto;
  flex-grow: 1;
  border: none;
  background-color: transparent;
  margin-left: -4px;
}

.dropdown--chiplist > .dropdown__input-box input:focus {
  outline: transparent;
  box-shadow: none;
}

.dropdown--chiplist > .dropdown__input-box input:focus::placeholder {
  color: transparent;
}

.dropdown--chiplist > .dropdown__input-box input:not(:disabled):hover {
  background-color: transparent;
}

.dropdown--chiplist > .dropdown__input-box input:disabled {
  cursor: not-allowed;
  border-style: none;
}

.dropdown--chiplist > .dropdown__input-box input::placeholder {
  color: var(--foreground-weak);
  transition: color 0.2s;
}

.dropdown--chiplist > .dropdown__input-box .textarea-box {
  background-color: transparent;
}

.dropdown--chiplist > .dropdown__input-box .textarea-box::before {
  border: none;
}

.dropdown--chiplist > .dropdown__input-box .textarea-box__inner {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 4px;
}

.dropdown--chiplist .dropdown__toggle {
  margin: -3px;
  width: auto;
}

.dropdown--chiplist .dropdown__toggle > .button--with-caret {
  background-color: transparent;
  padding: 3px;
  padding-right: 4px;
  min-height: 30px;
  height: auto;
}

.dropdown--chiplist .dropdown__toggle > .button--with-caret:focus-visible {
  box-shadow: none;
}

.dropdown--chiplist .dropdown__toggle > .button--with-caret .text {
  padding-left: 4px;
}

.dropdown--chiplist .dropdown__toggle + .dropdown-menu {
  margin: 4px 0 !important;
}

.dropdown--chiplist .dropdown-menu {
  margin: 4px 0 !important;
  max-width: none;
}

.dropdown--chiplist .dropdown-menu .accordion {
  width: 100%;
}

.dropdown--chiplist .dropdown-menu .accordion .accordion__item {
  border-radius: 0;
}

.button--select > .dropdown--chiplist:focus-within {
  box-shadow: none;
}

.dropdown--chiplist-disabled,
.button--multi-select:disabled {
  border-style: dashed;
  cursor: not-allowed;
}

.dropdown--chiplist-disabled .badge,
.button--multi-select:disabled .badge {
  padding-right: 6px;
}

.dropdown--chiplist-disabled .badge .badge__close,
.button--multi-select:disabled .badge .badge__close {
  display: none;
}

.dropdown--chiplist-disabled input::placeholder,
.button--multi-select:disabled input::placeholder {
  color: transparent;
}

.dropdown--chiplist-disabled:has(> .badge) .dropdown__input-box {
  display: none;
}

.dropdown__input-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dropdown__autocomptlete-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fields-double {
  display: flex;
}

.fields-double .field:focus-within {
  z-index: 7;
}

.fields-double .field:first-child > input {
  border-radius: 3px 0 0 3px;
}

.fields-double .field:first-child .button--select,
.fields-double .field:first-child .content-edit,
.fields-double .field:first-child .dropdown--chiplist {
  border-radius: 3px 0 0 3px;
}

.fields-double .field:last-child > input {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.fields-double .field:last-child .button--select,
.fields-double .field:last-child .content-edit,
.fields-double .field:last-child .dropdown--chiplist {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.fields-double > .dropdown .dropdown__toggle .button {
  border: 1px solid var(--border-neutral-strong);
}

.fields-double > .dropdown:focus-within {
  z-index: 7;
}

.fields-double > .dropdown:first-child .dropdown__toggle .button {
  border-radius: 3px 0 0 3px;
}

.fields-double > .dropdown:last-child .dropdown__toggle .button {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.field--data-picker::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 24px;
  height: 24px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: var(--foreground-brand-strong);
  pointer-events: none;
}

.field--data-picker input {
  cursor: pointer;
  width: 100%;
  padding-right: 32px;
}

.field--data-picker input.active {
  box-shadow: var(--button-focus);
}

.field--data-picker .field__text-for-resize {
  padding-right: 40px;
}

.field--data-picker-interval::before {
  mask-image: url("img/CalendarInterval.svg");
  -webkit-mask-image: url("img/CalendarInterval.svg");
}

.field--data-picker-date::before {
  mask-image: url("img/CalendarDate.svg");
  -webkit-mask-image: url("img/CalendarDate.svg");
}

.field--data-picker-date-start::before {
  mask-image: url("img/CalendarDateStart.svg");
  -webkit-mask-image: url("img/CalendarDateStart.svg");
}

.field--data-picker-date-end::before {
  mask-image: url("img/CalendarDateEnd.svg");
  -webkit-mask-image: url("img/CalendarDateEnd.svg");
}

.dropdown-menu--date-picker-range {
  max-height: none;
  height: 392px;
  min-width: 414px;
}

.flatpickr-calendar {
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  flex-direction: column;
  box-shadow: var(--modal-shadow);
  background-color: var(--background-surface-weakest);
  padding: 4px 0;
  width: 256px;
  position: fixed;
  z-index: 9999;
  border-radius: var(--radius);
  transition: opacity 0.3s;
  margin: 1px 0;
}

.flatpickr-calendar.open {
  opacity: 1;
  pointer-events: all;
}

.flatpickr-calendar.inline {
  opacity: 1;
  pointer-events: all;
}

.flatpickr-months {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0 4px;
  user-select: none;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-small);
  transition: background-color 0.3s;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background-color: var(--background-surface-weakest-hover);
}

.flatpickr-prev-month::before,
.flatpickr-next-month::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--foreground-brand-strong);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  display: none;
}

.flatpickr-prev-month::before {
  -webkit-mask: url("img/ArrowBack.svg") center/cover no-repeat;
  mask: url("img/ArrowBack.svg") center/cover no-repeat;
}

.flatpickr-next-month::before {
  -webkit-mask: url("img/ArrowNext.svg") center/cover no-repeat;
  mask: url("img/ArrowNext.svg") center/cover no-repeat;
}

.flatpickr-monthDropdown-months {
  padding: 4px;
  padding-right: 32px;
  border-radius: var(--radius);
  height: 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.flatpickr-monthDropdown-months:focus {
  outline: transparent;
  box-shadow: var(--button-focus);
}

.flatpickr-monthDropdown-months:focus + .numInputWrapper::before {
  transform: rotate(270deg);
}

.flatpickr-monthDropdown-months:hover {
  background-color: var(--background-surface-weakest-hover);
  border-color: var(--border-neutral-strong);
}

.flatpickr-monthDropdown-months + .numInputWrapper {
  position: relative;
}

.flatpickr-monthDropdown-months + .numInputWrapper::before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: -32px;
  -webkit-mask: url("img/ChevronRight.svg") center/cover no-repeat;
  mask: url("img/ChevronRight.svg") center/cover no-repeat;
  background-color: var(--foreground-brand-strong);
  transform: rotate(90deg);
  pointer-events: none;
  transition: transform 0.3s;
}

.numInputWrapper {
  position: relative;
}

.numInputWrapper:hover .numInput, .numInputWrapper:focus-within .numInput {
  background-color: var(--background-surface-weakest-hover);
  border-color: var(--border-neutral-strong);
}

.numInputWrapper:hover .arrowUp,
.numInputWrapper:hover .arrowDown, .numInputWrapper:focus-within .arrowUp,
.numInputWrapper:focus-within .arrowDown {
  opacity: 1;
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius);
}

.numInput {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: text !important;
  height: 32px;
  padding: 4px !important;
  width: 68px;
  border-radius: var(--radius) !important;
  border: 1px solid transparent !important;
  transition: background-color 0.3s, border-color 0.3s;
}

.numInput::-webkit-inner-spin-button, .numInput::-webkit-outer-spin-button {
  display: none;
}

.numInput:focus {
  outline: transparent;
}

.numInput:focus-visible {
  box-shadow: var(--button-focus);
}

.numInput:hover {
  background-color: var(--background-surface-weakest-hover);
  border-color: var(--border-neutral-strong) !important;
}

.flatpickr-innerContainer {
  padding: 0 16px;
}

.dayContainer,
.flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, 32px);
}

.flatpickr-weekday {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-weak);
}

.flatpickr-day {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.flatpickr-day:not(.flatpickr-disabled) {
  cursor: pointer;
}

.flatpickr-day:not(.flatpickr-disabled):not(.selected):not(.inRange):hover {
  background-color: var(--background-surface-weakest-hover);
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--foreground-weak);
}

.flatpickr-day.selected {
  background-color: var(--background-brand);
  color: var(--foreground-contrast);
  border-color: var(--border-brand-weak);
  border-radius: var(--radius);
  z-index: 1;
}

.flatpickr-day.selected.startRange:not(.endRange) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.flatpickr-day.selected.endRange:not(.startRange) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-day.inRange {
  background-color: var(--background-brand-disabled);
}

.flatpickr-day.flatpickr-disabled {
  cursor: not-allowed;
  color: var(--foreground-disabled);
  text-decoration: line-through;
}

.flatpickr-day.today:not(.selected):not(.inRange) {
  background-color: var(--background-surface-weakest-active);
}

.flatpickr-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  padding-bottom: 4px;
  border-top: 1px solid var(--border-neutral-strong);
  user-select: none;
}

.flatpickr-time input {
  height: 32px;
  padding: 4px;
  width: 68px;
  border-radius: var(--radius);
  border: 1px solid var(--border-neutral-strong);
  transition: background-color 0.3s, border-color 0.3s;
}

.flatpickr-time input:focus {
  outline: transparent;
}

.flatpickr-time input:focus-visible {
  box-shadow: var(--button-focus);
}

.flatpickr-time input:hover {
  background-color: var(--background-surface-weakest-hover);
}

.arrowUp,
.arrowDown {
  --arrow-color: var(--foreground-weak);
  position: absolute;
  right: 4px;
  width: 16px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.arrowUp:hover,
.arrowDown:hover {
  --arrow-color: var(--foreground-brand-strong);
}

.arrowUp:active,
.arrowDown:active {
  transform: translate(0.5px, 0.5px);
}

.arrowUp::before,
.arrowDown::before {
  content: "";
  border-style: solid;
  width: 0;
  height: 0;
  transition: border-color 0.3s;
}

.arrowUp {
  top: 7px;
}

.arrowUp::before {
  border-width: 0px 4px 6px 4px;
  border-color: transparent transparent var(--arrow-color) transparent;
}

.arrowDown {
  bottom: 7px;
}

.arrowDown::before {
  border-width: 6px 4px 0px 4px;
  border-color: var(--arrow-color) transparent transparent transparent;
}

.date-picker-range {
  display: flex;
  height: 392px;
}

.date-picker-range .flatpickr-calendar {
  box-shadow: none;
}

.date-picker-range__body {
  width: 256px;
  flex-shrink: 0;
}

.date-picker-range__body .fieldset {
  padding: 16px;
  border-bottom: 1px solid var(--border-neutral-strong);
}

.date-picker-range__list {
  background-color: var(--background-surface-weaker);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.date-picker-range__button {
  padding: 8px;
  width: 100%;
  transition: background-color 0.3s;
}

.date-picker-range__button:hover {
  background-color: var(--background-surface-weaker-active);
}

.date-picker-range__button:focus {
  outline: transparent;
}

.date-picker-range__button:focus-visible {
  box-shadow: var(--button-focus);
}

.content-edit-box {
  position: relative;
  border-radius: var(--button-radius);
}

.content-edit {
  vertical-align: middle;
  background: none;
}

.content-edit::-webkit-scrollbar-track {
  border-radius: var(--button-radius);
}

.content-edit:not(.content-edit--not-field) {
  width: 100%;
  border-radius: var(--button-radius);
  max-height: 136px;
  height: fit-content;
  min-height: 32px;
  background-color: var(--background-surface-weakest);
  transition: background-color 0.3s;
  border: 1px solid var(--border-neutral-strong);
  border-radius: var(--button-radius);
}

.content-edit:not(.content-edit--not-field):focus-within {
  box-shadow: var(--button-focus);
}

.content-edit:not(.content-edit--not-field):not(.content-edit--disabled):hover {
  background-color: var(--background-surface-weakest-hover);
}

.content-edit:not(.content-edit--not-field) .content-edit__body {
  line-height: 26px !important;
  width: 100%;
  min-height: 30px;
  padding: 2px 4px;
  word-wrap: break-word;
  word-break: break-all;
}

.content-edit:not(.content-edit--not-field) .content-edit__body[contenteditable] {
  cursor: text;
}

.content-edit:not(.content-edit--not-field) .content-edit__body:focus {
  outline: transparent;
}

.content-edit:not(.content-edit--not-field) .badge {
  margin: 1px 2px;
  height: auto;
  white-space: normal;
}

.content-edit .badge {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
  cursor: grab;
  user-select: auto;
  display: inline-flex;
}

.content-edit .badge:active {
  cursor: grabbing;
}

.content-edit--not-field {
  width: fit-content;
}

.content-edit--not-field .badge {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  max-width: 300px;
  width: max-content;
}

.content-edit--disabled {
  user-select: none;
  cursor: not-allowed;
}

.content-edit--disabled:not(.content-edit--not-field) {
  border-style: dashed;
}

.content-edit--disabled .content-edit__body {
  pointer-events: none;
}

.content-edit--disabled .badge .button--icon {
  display: none;
}

.content-edit__body {
  cursor: default;
}

.content-edit__placeholder {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
  color: var(--foreground-weak);
  position: absolute;
  top: 8px;
  left: 4px;
  pointer-events: none;
}

.field > .dropdown + .filter-search .undeletable .badge {
  opacity: 0;
}

.field:has(> .filter-search:not(.filter-search--without-search)) .filter-search + .preloader {
  right: 18px;
}

.filter-search {
  position: relative;
}

.filter-search .dropdown {
  width: 100%;
}

.filter-search .dropdown-menu {
  width: var(--field-dropdown-width);
  max-width: none;
}

.filter-search .dropdown--chiplist .text-edit,
.filter-search .dropdown--chiplist .textarea-box__inner textarea {
  padding-right: 68px;
}

.filter-search .content-edit {
  padding-right: 48px;
  padding-left: 32px;
}

.filter-search .content-edit:has(.undeletable) {
  position: relative;
}

.filter-search .content-edit:has(.undeletable)::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 32px;
  height: 30px;
  width: 32px;
  z-index: 1;
}

.filter-search .content-edit .content-edit__body {
  padding-right: 16px;
  padding-left: 0;
}

.filter-search .content-edit .badge {
  margin: 0 2px;
}

.filter-search .content-edit .badge--macro {
  margin-left: 0;
}

.filter-search .content-edit .badge--query {
  margin: 1px 0;
  cursor: text;
}

.filter-search .content-edit .badge--query:focus {
  outline: none;
}

.filter-search .content-edit .badge--query:focus-visible {
  box-shadow: var(--button-focus);
}

.filter-search .content-edit .undeletable {
  cursor: default;
}

.filter-search .content-edit .undeletable .badge {
  cursor: default;
  pointer-events: none;
  margin-left: -2px;
}

.filter-search .content-edit__placeholder {
  left: 32px;
}

.filter-search--without-search .content-edit {
  padding-right: 0;
}

.filter-search--with-reset .content-edit {
  padding-right: 80px;
}

.filter-search--with-reset.filter-search--without-search .content-edit {
  padding-right: 36px;
}

.filter-search__button {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  height: calc(100% - 10px);
}

.filter-search__actions-right {
  display: flex;
  gap: 8px;
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 1;
  height: calc(100% - 8px);
}

.filter-search__actions-right .button {
  height: 100%;
  min-height: auto;
}

.filter-search__actions-right .button:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--border-neutral-strong);
  position: absolute;
  top: 0;
  right: -4px;
}

.filter-search__search-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.icon-picker__radio {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}

.icon-picker__label {
  --icon-picker-label-color: var(--foreground-brand-strong);
  border-radius: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.icon-picker__label::before {
  content: "";
  mask: url("img/CircleFill.svg") center/cover no-repeat;
  -webkit-mask: url("img/CircleFill.svg") center/cover no-repeat;
  background-color: var(--icon-picker-label-color);
  width: 24px;
  height: 24px;
}

.icon-picker__label::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--icon-picker-label-color);
  opacity: 0;
  transition: opacity 0.3s;
}

.icon-picker__label:hover::after {
  opacity: 0.12;
}

.icon-picker__label:has(.icon-picker__radio:checked)::after {
  opacity: 1;
}

.icon-picker__label:has(.icon-picker__radio:focus-visible) {
  box-shadow: var(--button-focus);
}

.icon-picker__label--gray {
  --icon-picker-label-color: var(--optional-gray);
}

.icon-picker__label--green {
  --icon-picker-label-color: var(--optional-green);
}

.icon-picker__label--teal {
  --icon-picker-label-color: var(--optional-teal);
}

.icon-picker__label--blue {
  --icon-picker-label-color: var(--optional-blue);
}

.icon-picker__label--purple {
  --icon-picker-label-color: var(--optional-purple);
}

.icon-picker__label--pink {
  --icon-picker-label-color: var(--optional-pink);
}

.icon-picker__label--peach {
  --icon-picker-label-color: var(--optional-peach);
}

.icon-picker__label--gold {
  --icon-picker-label-color: var(--optional-gold);
}

.icon-picker__label--brown {
  --icon-picker-label-color: var(--optional-brown);
}

.notification-message {
  padding: 8px;
  border-radius: 8px;
  background-color: var(--background-neutral-strong);
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  color: var(--foreground-contrast);
}

.notification-message::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.notification-message .text,
.notification-message .title {
  color: inherit;
}

.notification-message__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.notification-message--success {
  --notification-message-bg: var(--status-success-weakest);
}

.notification-message--success::before {
  mask-image: url("img/StatesSuccess.svg");
  -webkit-mask-image: url("img/StatesSuccess.svg");
  background-color: var(--status-success-strong);
}

.notification-message--warning {
  --notification-message-bg: var(--status-warning-weakest);
}

.notification-message--warning::before {
  mask-image: url("img/StatesWarning.svg");
  -webkit-mask-image: url("img/StatesWarning.svg");
  background-color: var(--status-warning-strong);
}

.notification-message--error {
  --notification-message-bg: var(--status-danger-weakest);
}

.notification-message--error::before {
  mask-image: url("img/StatesError.svg");
  -webkit-mask-image: url("img/StatesError.svg");
  background-color: var(--status-danger-strong);
}

.notification-message--full-window {
  background-color: var(--notification-message-bg);
  padding: 16px;
  color: var(--foreground-stronger);
}

.error-view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
}

.error-view__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.error-view__title {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.08rem;
  display: flex;
  gap: 4px;
  padding-left: 36px;
}

.error-view__error-name {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
  color: var(--foreground-weak);
}

.error-view__description {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 380;
  letter-spacing: -0.02rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

:root {
  --offpanel-width: 400px;
  --offpanel-height: 562px;
  --offpanel-padding-x: 1rem;
  --offpanel-padding-y: 1rem;
  --offpanel-border-width: 1px;
  --offpanel-border-color: transparent;
  --offpanel-box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .5);
  --offpanel-transition: transform 0.3s;
  --offpanel-title-line-height: 1.5;
}

.offpanel-parent {
  position: relative;
  overflow: hidden;
  transition: padding 0.3s;
}

.offpanel-parent:has(.offpanel--top.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)) {
  padding-top: var(--offpanel-height);
}

.offpanel-parent:has(.offpanel--right.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)) {
  padding-right: var(--offpanel-width);
}

.offpanel-parent:has(.offpanel--right.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)):has(.offpanel__left-side) {
  padding-right: calc(var(--offpanel-width) + 308px);
}

.offpanel-parent:has(.offpanel--bottom.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)) {
  padding-bottom: var(--offpanel-height);
}

.offpanel-parent:has(.offpanel--left.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)) {
  padding-left: var(--offpanel-width);
}

.offpanel-parent:has(.offpanel--left.offpanel--show.offpanel--absolute:not(.offpanel--not-displacement)):has(.offpanel__left-side) {
  padding-left: calc(var(--offpanel-width) + 308px);
}

.offpanel {
  --offpanel-margin-left: var(--side-menu-width);
  position: fixed;
  overflow: hidden;
  z-index: 1039;
  display: flex;
  flex-direction: column;
  background-color: var(--background-surface-weakest);
  pointer-events: none;
  box-shadow: 0px 46px 80px 0px rgba(0, 0, 0, 0.13), 0px 16.791px 29.201px 0px rgba(0, 0, 0, 0.09), 0px 8.152px 14.177px 0px rgba(0, 0, 0, 0.07), 0px 3.996px 6.95px 0px rgba(0, 0, 0, 0.06), 0px 1.58px 2.748px 0px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition-duration), width var(--transition-duration), height var(--transition-duration), margin var(--transition-duration);
}

.offpanel:has(.modal-container.is-active) {
  z-index: 9999;
}

.offpanel--without-animate {
  transition: none;
}

.offpanel--right,
.offpanel--left {
  top: 0;
  bottom: 0;
  width: var(--offpanel-width);
  min-width: var(--offpanel-width);
}

.offpanel--right:not(.offpanel--full-size):has(.offpanel__left-side),
.offpanel--left:not(.offpanel--full-size):has(.offpanel__left-side) {
  width: calc(var(--offpanel-width) + 308px);
}

.offpanel--left {
  --rotate-close-button: -90deg;
  left: 0;
  margin-left: var(--offpanel-margin-left);
  transform: translateX(-100%);
}

.offpanel--left.offpanel--absolute {
  box-shadow: var(--offpanel-border-width) 0px 0px 0px var(--offpanel-border-color);
}

.offpanel--right {
  --rotate-close-button: 90deg;
  right: 0;
  transform: translateX(100%);
}

.offpanel--right.offpanel--absolute {
  box-shadow: calc(var(--offpanel-border-width) * -1) 0px 0px 0px var(--offpanel-border-color);
}

.offpanel--top,
.offpanel--bottom {
  right: 0;
  left: 0;
  margin-left: var(--offpanel-margin-left);
  height: var(--offpanel-height);
}

.offpanel--top {
  --rotate-close-button: 0deg;
  top: 0;
  transform: translateY(-100%);
}

.offpanel--top.offpanel--absolute {
  box-shadow: 0px var(--offpanel-border-width) 0px 0px var(--offpanel-border-color);
}

.offpanel--bottom {
  --rotate-close-button: 180deg;
  bottom: 0;
  transform: translateY(100%);
}

.offpanel--bottom.offpanel--absolute {
  box-shadow: 0px calc(var(--offpanel-border-width) * -1) 0px 0px var(--offpanel-border-color);
}

.offpanel--show {
  --offpanel-border-color: var(--border-neutral-strong);
  pointer-events: all;
  transform: none;
}

.offpanel--absolute {
  position: absolute;
}

.offpanel--absolute.offpanel--full-size {
  height: 100%;
  width: 100%;
}

.offpanel--full-size {
  height: 100%;
  width: calc(100% - var(--offpanel-margin-left));
}

.offpanel--page-root-parent {
  --offpanel-width: 280px;
}

.offpanel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-neutral-strong);
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.offpanel-backdrop + .offpanel {
  z-index: 1041;
  box-shadow: var(--offpanel-border-width) 0px 0px 0px var(--offpanel-border-color);
}

.offpanel-backdrop--fade {
  opacity: 0;
}

.offpanel-backdrop--show {
  opacity: 0.5;
  pointer-events: all;
}

.offpanel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  padding-left: 24px;
  background-color: var(--background-surface-weaker);
}

.offpanel__header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
}

.offpanel__header-inner:has(.actions-right-column) {
  padding-right: 8px;
}

.offpanel__header-inner:has(.actions-right-column)::after {
  content: "";
  width: 1px;
  height: 24px;
  background-color: var(--foreground-weaker);
}

.offpanel__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-editor {
  height: 100%;
  min-height: 24px;
  background-color: var(--background-surface-weakest);
  border: 1px solid var(--border-neutral-strong);
  border-radius: 3px;
}

.code-editor .cm-merge-revert,
.code-editor .cm-collapsedLines {
  display: none;
}

.code-editor > .cm-editor {
  height: 100%;
  border-radius: 3px;
}

.code-editor > .cm-editor.cm-focused {
  outline: transparent;
  box-shadow: var(--button-focus);
  border-radius: 3px;
}

.code-editor .cm-scroller::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.code-editor .cm-scroller::-webkit-scrollbar-track {
  background-color: var(--background-surface-weaker);
}

.code-editor .cm-scroller::-webkit-scrollbar-thumb {
  background-color: var(--foreground-weaker);
  border: 2px solid var(--background-surface-weaker);
  border-radius: var(--scrollbar-radius);
}

.code-editor .cm-gutters {
  border-radius: 3px 0 0 3px;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  --letter-size: 4.86px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
  font-family: "Ubuntu-sans-mono", monospace !important;
  fill: var(--foreground-weak);
}

.interactive-value {
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.interactive-value:hover {
  background-color: var(--background-neutral-weaker-hover);
}

.font-inherit {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.font-title-medium {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 600;
  letter-spacing: -0.12rem;
}

.font-title-small {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 600;
  letter-spacing: -0.1rem;
}

.font-heading-large {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.08rem;
}

.font-heading-medium {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.06rem;
}

.font-heading-small {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
}

.font-subheading-large {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
}

.font-subheading-medium {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: -0.01625rem;
}

.font-label-large {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 560;
  letter-spacing: -0.02rem;
}

.font-label-medium {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 560;
  letter-spacing: -0.01625rem;
}

.font-label-small {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.01375rem;
}

.font-data-medium {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.font-data-small {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
}

.font-data-xsmall {
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
}

.font-additional-large {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 380;
  letter-spacing: -0.02rem;
}

.font-additional-medium {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 380;
  letter-spacing: -0.01625rem;
}

.font-additional-small {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 380;
  letter-spacing: -0.01375rem;
}

.font-mono-medium {
  --letter-size: 7.03px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 460;
  letter-spacing: -0.01625rem;
}

.font-mono-small {
  --letter-size: 5.95px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 460;
  letter-spacing: -0.01375rem;
}

.font-mono-xsmall {
  --letter-size: 4.86px;
  font-family: "Ubuntu-sans-mono", monospace;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  font-weight: 460;
  letter-spacing: -0.01125rem;
}

.font-italic {
  font-style: italic;
}
.font-italic.line-clamp-one, .font-italic.line-clamp-two, .font-italic.line-clamp-tree, .font-italic.line-clamp-for, .font-italic.line-clamp-five {
  padding-right: 1px;
}