/*

The almost definitive Sparrows reset and setup stylez.
Based on work from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.
Lovingly tended to by Jonathon Bellew.

*/
html {
  font-size: 16px;
  -webkit-text-size-adjust: none;
}

* html {
  font-size: 100%;
}

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, :before, :after {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
  text-decoration: none !important;
}

:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  font-size: 62.5% !important;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  vertical-align: baseline;
}

ol, ul {
  list-style: none;
}

/*-- todo: tables still need 'cellspacing="0"' in the markup --*/
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}

u {
  text-decoration: none;
}

html {
  box-sizing: border-box;
}

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

textarea {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src: url(public/main/fonts/inter.da941c3b739014ce2d8e.woff2) format("woff2"), url(public/main/fonts/inter-v2-latin-300.52c104cfa3c1c6bced82.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(public/main/fonts/inter.da941c3b739014ce2d8e.woff2) format("woff2"), url(public/main/fonts/inter-v2-latin-400.f60fc6e27a1216af5719.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(public/main/fonts/inter.da941c3b739014ce2d8e.woff2) format("woff2"), url(public/main/fonts/inter-v2-latin-600.8b93a9314d54bdc2f007.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

input {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

:root {
  --radius-full: 50%;
  --radius-pill: 1000px;
  --radius-small: 3px;
  --radius-medium: 4px;
  --radius-large: 6px;
  --radius-x-large: 8px;
}

.RichtextRender {
  /* Set by FontSizeHoist / hoistFontSize. Outranks the font-size below on
     specificity wherever this mixin is included. */
  /* Apply a default padding if legacy cellpadding attribute is missing */
  /* Set default table styles if a table has a positive border attribute
     and no inline css */
  /* Set default table styles if a table has a positive border attribute
     and no inline css */
  /* Set default table styles if a table has a positive border attribute
     and no inline css */
}
.RichtextRender [style*="--dokio-font-size"] {
  font-size: var(--dokio-font-size) !important;
}
.RichtextRender p, .RichtextRender ol, .RichtextRender ul {
  font-size: 1em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h1:not(:empty), .RichtextRender h2:not(:empty), .RichtextRender h3:not(:empty), .RichtextRender h4:not(:empty), .RichtextRender h5:not(:empty), .RichtextRender h6:not(:empty), .RichtextRender p:not(:empty), .RichtextRender ol:not(:empty), .RichtextRender ul:not(:empty) {
  margin-bottom: 10px !important;
}
.RichtextRender h1 {
  font-size: 1.9em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h2 {
  font-size: 1.5em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h3 {
  font-size: 1.2em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h4 {
  font-size: 1.1em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h5 {
  font-size: 1em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender h6 {
  font-size: 0.9em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
}
.RichtextRender a {
  color: #1B9DDE;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: rgba(27, 157, 222, 0.3);
}
.RichtextRender a:hover {
  border-color: #1B9DDE;
}
.RichtextRender strong {
  font-weight: 600;
}
.RichtextRender em {
  font-style: italic;
}
.RichtextRender u {
  text-decoration: underline;
}
.RichtextRender blockquote {
  margin: 0 20px;
  font-style: italic;
}
.RichtextRender blockquote em {
  font-style: normal;
}
.RichtextRender img {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
}
.RichtextRender sup {
  font-size: 0.7em;
  line-height: 1em;
  letter-spacing: -0.01em;
  vertical-align: super;
}
.RichtextRender sub {
  font-size: 0.7em;
  line-height: 1em;
  letter-spacing: -0.01em;
  vertical-align: sub;
}
.RichtextRender ol {
  list-style-position: outside;
  list-style-type: decimal;
  padding-left: 1.5em;
}
.RichtextRender ul {
  list-style-position: outside;
  list-style-type: disc;
  padding-left: 1.5em;
}
.RichtextRender li {
  text-indent: 0.5em;
}
.RichtextRender > *:last-child {
  margin-bottom: 0;
}
.RichtextRender .small {
  font-size: 0.7em;
  line-height: 1em;
  letter-spacing: -0.01em;
}
.RichtextRender .large {
  font-size: 1.3em;
  line-height: 1.5em;
  letter-spacing: -0.02em;
}
.RichtextRender .emphasis {
  color: var(--hub-emphasis-color, #1B9DDE);
  font-weight: 600;
}
.RichtextRender mark {
  background-color: transparent;
  color: var(--hub-emphasis-color, #1B9DDE);
  font-weight: 600;
}
.RichtextRender del {
  text-decoration: line-through !important;
}
.RichtextRender s {
  text-decoration: line-through !important;
}
.RichtextRender table {
  border-collapse: collapse;
  margin-bottom: 20px;
}
.RichtextRender table:not([cellpadding]) th,
.RichtextRender table:not([cellpadding]) td {
  padding: 0.4rem;
}
.RichtextRender table[border]:not([border="0"]):not([style*=border-width]) th,
.RichtextRender table[border]:not([border="0"]):not([style*=border-width]) td {
  border-width: 1px;
}
.RichtextRender table[border]:not([border="0"]):not([style*=border-style]) th,
.RichtextRender table[border]:not([border="0"]):not([style*=border-style]) td {
  border-style: solid;
}
.RichtextRender table[border]:not([border="0"]):not([style*=border-color]) th,
.RichtextRender table[border]:not([border="0"]):not([style*=border-color]) td {
  border-color: #ccc;
}
.RichtextRender figure {
  display: table;
  margin: 1rem auto;
}
.RichtextRender figure figcaption {
  color: #999;
  display: block;
  margin-top: 0.25rem;
  text-align: center;
}
.RichtextRender hr {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 0 0 0;
}
.RichtextRender code {
  background-color: #e8e8e8;
  border-radius: 3px;
  padding: 0.1rem 0.2rem;
}
.RichtextRender .mce-content-body:not([dir=rtl]) blockquote {
  border-left: 2px solid #ccc;
  margin-left: 1.5rem;
  padding-left: 1rem;
}
.RichtextRender .mce-content-body[dir=rtl] blockquote {
  border-right: 2px solid #ccc;
  margin-right: 1.5rem;
  padding-right: 1rem;
}

:root {
  --spacing-double_large: 80px;
  --spacing-larger: 60px;
  --spacing-large: 40px;
  --spacing-medium_large: 25px;
  --spacing-medium: 20px;
  --spacing-medium_small: 15px;
  --spacing-normal: 10px;
  --spacing-small: 5px;
  --spacing-fine: 1px;
  --spacing-none: 0;
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

:root {
  --transition-viewer: 600ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-movement: 200ms ease-in-out;
  --transition-hover: 100ms ease-in-out;
}

:root {
  --confirm-bar-height: 94px;
}

.ConfirmBar ._content {
  display: flex;
  justify-content: center;
  gap: var(--spacing-large);
}

body[data-old-ui] .ConfirmBar {
  text-align: center;
  background-color: #FFFFFF;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  height: var(--confirm-bar-height);
  left: 0;
  right: 0;
  z-index: 1000;
}
body[data-old-ui] .ConfirmBar button,
body[data-old-ui] .ConfirmBar .Button {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.TitleBar {
  background-color: #2D3F50;
  z-index: 1000;
}
.TitleBar ._content {
  position: relative;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #FFFFFF;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
.TitleBar .options_container {
  margin-right: var(--spacing-medium);
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.TitleBar ._saving_status {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #9CB2C7;
  cursor: default;
  display: inline-flex;
  justify-content: end;
  min-width: 70px;
}
.TitleBar ._saving_status:after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 8px;
}
.TitleBar ._saving_status[_status=saved]:after {
  background: #50D38B;
}
.TitleBar ._saving_status[_status=not-saved]:after {
  background: #FF794F;
}
.TitleBar ._saving_status[_status=saving]:after {
  background: #FFC040;
}
.TitleBar ._actions {
  border-radius: 6px;
  background-size: 20px 20px !important;
  height: 20px !important;
  width: 20px !important;
  margin-left: 8px;
}
.TitleBar ._actions:hover {
  background-image: url(public/main/images/icons/legacy/ActionMenuWhite.d62e97dccd0d495b6d0c.svg) !important;
}
.TitleBar ._actions[_hidden] {
  display: none;
}
.TitleBar ._actions .Drop {
  top: 50px;
  width: 250px;
}
.TitleBar ._actions .Drop .Pointer {
  right: 15px;
}
.TitleBar .HelpButton {
  background-color: transparent;
  border-color: #BECDDA;
  color: #BECDDA;
  margin-right: var(--spacing-medium);
}
.TitleBar .HelpButton:hover {
  background-color: #3E586F;
  color: #BECDDA;
}

.Modal {
  visibility: hidden;
  position: fixed;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 999999;
}
.Modal.Alert ._close {
  display: none;
}
.Modal[_active] {
  visibility: visible;
  height: 100vh;
}
.Modal[_active] ._shade,
.Modal[_active] ._container {
  opacity: 1;
  visibility: visible;
}
.Modal ._container {
  visibility: hidden;
  opacity: 0;
  position: relative;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  width: 700px;
  z-index: 4000;
}
.Modal ._container ._close {
  cursor: pointer;
  position: absolute;
  background-image: url(public/main/images/icons/modal/close.1cf64b08e6eb8f7cbef4.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 46px 46px;
  right: 0;
  top: 0;
  z-index: 10;
  width: 46px;
  height: 46px;
}
.Modal ._container.TemplatePreview {
  position: absolute;
  margin-bottom: var(--spacing-none);
  margin-left: var(--spacing-none);
  margin-right: var(--spacing-none);
  margin-top: var(--spacing-none);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Modal ._content {
  position: relative;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  border-radius: 6px;
}
.Modal ._content .Inner {
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-top: var(--spacing-large);
  border-radius: 6px;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Modal ._content .Inner.Dark {
  background-color: #2D3F50;
}
.Modal ._content .Inner.Dark h2 {
  color: #FFFFFF;
}
.Modal ._content .Inner.Dark .Text {
  color: #9CB2C7;
}
.Modal ._content .Inner.Dark .Text a {
  color: #1B9DDE;
}
.Modal ._content .Inner.Dark .Text .List {
  padding-top: var(--spacing-normal);
}
.Modal ._content .Inner.Dark .Text .List .ListRow {
  margin-bottom: var(--spacing-medium);
}
.Modal ._content .Inner.Dark .Text .List .ListRow .ListColumn {
  display: inline-block;
  vertical-align: top;
  width: 350px;
}
.Modal ._content .Inner.Dark .Text .List .ListRow .ListColumn:first-of-type {
  color: #FFFFFF;
  width: 80px;
}
.Modal ._content .Inner.Dark .Text .List .ListRow .ListColumn.Scroll {
  max-height: 250px;
  overflow-y: auto;
}
.Modal ._content .Inner h2 {
  color: #1C2731;
  margin-bottom: var(--spacing-medium);
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.Modal ._content .Inner .Text {
  color: #3E586F;
  max-width: initial;
}
.Modal ._content .Inner p {
  margin-bottom: var(--spacing-medium);
}
.Modal .ModalActions {
  margin-top: var(--spacing-large);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 46px;
}
.Modal .ModalActions .Button,
.Modal .ModalActions button {
  min-width: 220px;
}
.Modal ._shade {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background-color: rgba(28, 39, 49, 0.6);
  content: "";
  height: 100vh;
  left: 0;
  top: 0;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  width: 100vw;
  z-index: 2000;
}

:root {
  --nav-sidebar-width: 54px;
}

body[data-old-ui] {
  --nav-sidebar-width: 0;
}

.Main[_layout=app] {
  max-width: 100vw;
  min-height: 100vh;
  padding-left: var(--nav-sidebar-width);
  background-color: var(--page-background, #eef1f5);
}
.Main[_layout=app] > .Page {
  padding: var(--spacing-large);
}

.Footer {
  text-align: center;
  padding-bottom: var(--spacing-medium);
  padding-top: var(--spacing-medium);
}
.Footer img {
  width: 80px;
  height: auto;
}

.constrained {
  margin: 0 auto;
  max-width: 1200px;
}

.translation_missing {
  background-color: orange;
  outline: 3px solid pink;
}

body[data-old-ui] .Main[_layout=app] {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  position: relative;
  padding-left: unset;
  min-height: 100vh;
}
body[data-old-ui] .Main[_layout=app] .Page {
  display: block;
}
body[data-old-ui] .Main[_layout=app] > .Page {
  padding: unset;
}
body[data-old-ui] .Main[_layout=app] .Content {
  grid-area: unset;
  position: relative;
  min-height: calc(100vh - 147px);
}
body[data-old-ui] .Main[_layout=app] .Content:after {
  content: "";
  display: table;
  clear: both;
}
body[data-old-ui] .Main[_layout=app] .Content[_has-confirm-bar] {
  padding-bottom: var(--confirm-bar-height);
}
body[data-old-ui] .Main[_layout=app] .Content:before {
  background-color: #fff;
  content: "";
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 200ms;
  z-index: 10;
}
body[data-old-ui] .Main[_layout=app].History--replacing .Content:before {
  opacity: 0.25;
}
body[data-old-ui] .Main[_layout=app] .constrained {
  margin: 0 auto;
  position: relative;
  width: 1024px;
}
body[data-old-ui] .Main[_layout=app] .Footer {
  text-align: center;
  padding-bottom: var(--spacing-medium);
  padding-top: var(--spacing-medium);
}
body[data-old-ui] .Main[_layout=app] .Footer img {
  width: 80px;
  height: auto;
}

@media screen and (min-width: 0\0 ) {
  .Main[_layout=app] .Content:before {
    display: none;
  }
}
.hidden {
  display: none;
}

.Main[_layout=login] {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  position: relative;
  min-height: 100vh;
  padding-bottom: 120px;
  padding-top: 150px;
}
.Main[_layout=login] .LoginBanner {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 0;
  left: 0;
  height: 100px;
}
.Main[_layout=login] .LoginBanner img {
  height: 55px;
  margin-top: 60px;
}
.Main[_layout=login] .LoginContainer {
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  border-radius: 6px;
  background-color: #FFFFFF;
  min-width: 400px;
  max-width: 60vw;
  display: table;
  margin: 0 auto;
  padding-top: 40px;
}
.Main[_layout=login] .LoginContainer .LowerSectionContainer {
  border-top-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  padding-top: var(--spacing-medium);
  padding-bottom: 40px;
}
.Main[_layout=login] .LoginContainer .Dropdown {
  padding-bottom: var(--spacing-medium);
}
.Main[_layout=login] .Notifications {
  margin-bottom: var(--spacing-medium);
}
.Main[_layout=login] .Notifications .LoginContainer {
  border-radius: 6px;
  padding-top: 0;
  width: 300px;
  background-color: #FFE6B3;
}
.Main[_layout=login] .Notifications .LoginContainer .Notification {
  text-align: left;
}
.Main[_layout=login] .Notifications .LoginContainer .Notification.LoginError[_type=error] {
  color: #1C2731;
  background-color: transparent;
  background-image: url(public/main/images/icons/legacy/StatusAlertCharcoal.70f40a0470c4e034417f.svg);
  background-position: 22px 50%;
  padding-left: 54px;
  padding-right: 40px;
}
.Main[_layout=login] .Notifications .LoginContainer .Notification.LoginError[_type=error] a {
  color: #1C2731;
}
.Main[_layout=login] .Footer {
  text-align: center;
  padding-bottom: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  position: absolute;
  width: 100%;
  bottom: 0;
  margin: auto;
}
.Main[_layout=login] .Footer img {
  width: 80px;
  height: auto;
}

.LoginHeader {
  text-align: center;
  width: 100%;
  padding-bottom: var(--spacing-medium);
  margin: 0 auto;
}
.LoginHeader ._logo {
  margin-bottom: var(--spacing-medium);
  max-height: 146px;
  max-width: 200px;
}
.LoginHeader h2 {
  color: #3E586F;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.LoginFlash {
  padding-top: var(--spacing-medium);
  text-align: center;
  color: #1C2731;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 auto 40px auto;
}

.LoginError {
  padding-top: var(--spacing-medium);
  text-align: center;
  color: #FF794F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 auto 40px auto;
  width: 100%;
}
.LoginError a {
  color: #FF794F;
  text-decoration: underline !important;
}

.LoginSection {
  text-align: center;
  margin: 20px auto;
  width: 300px;
}
.LoginSection:first-child {
  margin-top: 0px;
}
.LoginSection:last-child {
  margin-bottom: 0px;
}
.LoginSection .Dropdown[_autocomplete][_expanded] ._dropdown {
  max-height: 195px;
  border-color: #9CB2C7;
}
.LoginSection .Dropdown ._option, .LoginSection .Dropdown input {
  color: #3E586F;
  border-color: #3E586F;
  letter-spacing: -0.03em;
}
.LoginSection .Chooser ._choice {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
  border-color: #3E586F;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  padding-right: 10px;
}
.LoginSection .Chooser ._choice::after {
  display: none;
}
.LoginSection .Label .ResetPassword {
  margin-bottom: var(--spacing-medium);
}
.LoginSection .Label input {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  letter-spacing: -0.01em !important;
  color: #1C2731 !important;
  border-color: #9CB2C7 !important;
}
.LoginSection .Label input::placeholder {
  color: #9CB2C7 !important;
  opacity: 1; /* Firefox */
}
.LoginSection ._title {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
}
.LoginSection .Dropdown ._display {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-align: left;
  letter-spacing: -0.03em !important;
  color: #3E586F !important;
  border-color: #9CB2C7 !important;
}
.LoginSection .PasswordInput .Checkbox {
  margin-top: var(--spacing-normal);
  text-align: left;
}
.LoginSection .PasswordInput .Checkbox input {
  left: 0;
}
.LoginSection .PasswordInput .Checkbox ._label {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.LoginSection ._forgot {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.LoginSection ._forgot a {
  border-bottom-width: 1px;
  border-style: solid;
  color: #1B9DDE;
  border-color: #1B9DDE;
}
.LoginSection .LoginSectionButton {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 200px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
.LoginSection .LoginSectionButton.ResetButton {
  width: 100% !important;
}
.LoginSection .Text {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
  letter-spacing: -0.01em;
}
.LoginSection .Text[_error] {
  color: #FF794F;
}
.LoginSection .Text[_dump] {
  font-family: monospace;
  text-align: left;
}
.LoginSection .LoginFlash {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.HiddenSectionContainer {
  width: 100%;
}

.Toggle {
  display: none;
}

.HiddenSection {
  position: relative;
  padding-top: var(--spacing-medium);
}

.ToggleText,
.HiddenContent {
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative;
  z-index: 300;
}

.ToggleText {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-bottom-width: 1px;
  border-style: solid;
  color: #1B9DDE;
  border-color: #1B9DDE;
  cursor: pointer;
  margin-left: -18px;
  letter-spacing: -0.03em;
}

.ToggleText:after {
  position: absolute;
  margin-left: var(--spacing-medium_small);
  display: inline-block;
  content: "";
  background-image: url(public/main/images/icons/legacy/EventNextSkyBlue.2e21557a97e7436d43d7.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 20px;
  width: 10px;
  transition: all 0.3s;
  transform: rotate(-90deg);
}

.HiddenContent {
  max-height: 0;
  overflow: hidden;
}

.Toggle:checked + .ToggleText + .HiddenContent {
  overflow: visible;
  max-height: 1000px;
  padding-top: 25px;
}
.Toggle:checked + .ToggleText:after {
  transform: rotate(90deg);
}

.Main[_layout=viewer] {
  --header-height: 50px;
  --footer-height: 87px;
  --sidebar-inside-width: 500px;
  --sidebar-border-width: 1px;
  --sidebar-width: calc(var(--sidebar-inside-width) + var(--sidebar-border-width));
  --sidebar-variation-prev-next-width: 72px;
  --sidebar-variation-spacing: 80px; /* padding + gap */
  --sidebar-variation-select-width: calc(var(--sidebar-inside-width) - var(--sidebar-variation-prev-next-width) - var(--sidebar-variation-spacing));
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  transition: background 600ms ease-in-out;
}
@media (min-width: 1800px) {
  .Main[_layout=viewer] {
    --sidebar-inside-width: 580px;
  }
}
@media (min-width: 2060px) {
  .Main[_layout=viewer] {
    --sidebar-inside-width: 660px;
  }
}
.Main[_layout=viewer] .constrained {
  position: relative;
  margin: 0 auto;
  width: calc(100% - 2 * var(--spacing-large));
  max-width: 1024px;
}
.Main[_layout=viewer] .constrained-medium {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 824px;
}
.Main[_layout=viewer] .constrained-small {
  position: relative;
  width: 502px;
  margin: 0 auto;
}
.Main[_layout=viewer] .ConfirmBar {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-style: solid;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  height: var(--footer-height);
  left: var(--sidebar-width);
}

.ViewerFrame {
  height: 100vh;
  display: grid;
  margin-left: var(--nav-sidebar-width);
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "Sidebar Titlebar" "Sidebar ViewerScreen";
}
.ViewerFrame[_nosidebar] {
  background-color: #2D3F50;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "ViewerHeader Titlebar ." "ViewerScreen ViewerScreen ViewerScreen";
}
.ViewerFrame[_nosidebar] .ViewerHeader {
  justify-self: start;
}
.ViewerFrame[_nosidebar] .Sidebar {
  display: none;
}
.ViewerFrame[_nosidebar] .ViewerScreen {
  padding: 0;
  overflow: hidden;
}

body[data-old-ui] .ViewerFrame {
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "ViewerHeader Titlebar" "Sidebar ViewerScreen";
}
body[data-old-ui] .ViewerFrame[_nosidebar] {
  grid-template-areas: "ViewerHeader Titlebar ." "ViewerScreen ViewerScreen ViewerScreen";
}
body[data-old-ui] .TitleBar {
  grid-area: Titlebar;
}
body[data-old-ui] .TitleBar .Field:focus-within {
  background-color: inherit;
}
body[data-old-ui] .SidebarWrapper {
  height: calc(100vh - var(--header-height));
}

.ViewerHeader {
  grid-area: ViewerHeader;
  padding-left: var(--spacing-medium_large);
  background-color: #2D3F50;
  display: flex;
  align-items: center;
}
.ViewerHeader ._title {
  text-align: left;
  color: #EFF2F6;
  display: block;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ViewerHeader ._title ._exit {
  color: #9CB2C7;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: inline-block;
}
.ViewerHeader ._title ._exit:hover {
  text-decoration: underline !important;
}
.ViewerHeader ._title ._exit:before {
  display: inline-block;
  margin-right: 8px;
  margin-left: -2px;
  background-image: url(public/main/images/icons/legacy/ActionExitGrey.5defed4b65024db65cef.svg);
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: 20px;
  content: "";
  height: 20px;
  width: 20px;
}

.Sidebar {
  grid-area: Sidebar;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-right-width: 1px;
  border-style: solid;
  transition: opacity 600ms ease-in-out;
}
.Sidebar .Fields {
  position: relative;
}
.Sidebar .Fields.Structure {
  padding-bottom: 160px;
}
.Sidebar .Fields .Field {
  margin: 0;
  transition: background-color 0.2s;
}
.Sidebar .Fields .Field[_locked] {
  margin-bottom: var(--spacing-none);
}
.Sidebar .Fields .Field[_locked]:not([_type=divider]):not([_type=conditional]):hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Sidebar .Fields .Field[_locked]:not([_type=divider]):not([_type=conditional]):focus-within {
  background-color: #CED9E3;
}
.Sidebar .Fields .Field[_locked]:not([_type=divider]):not([_type=conditional]):focus-within > .varied {
  margin-left: -20px;
  opacity: 1;
}
.Sidebar .Fields .Field[_locked]:not([_type=conditional]) {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-top: var(--spacing-medium_small);
  padding-bottom: var(--spacing-medium_small);
}
.Sidebar .FieldsMessage {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-top: var(--spacing-medium_small);
  padding-bottom: var(--spacing-medium_small);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
  padding-bottom: 160px;
}
.Sidebar .FieldsMessage h1 {
  font-weight: bold;
}
.Sidebar .FieldsMessage h1, .Sidebar .FieldsMessage p {
  margin-bottom: var(--spacing-medium);
}
.Sidebar .FieldsMessage a {
  color: inherit;
  text-decoration: underline !important;
}
.Sidebar .SidebarWrapper {
  display: grid;
  height: 100vh;
  position: relative;
  grid-template-rows: max-content max-content max-content 1fr max-content;
  grid-template-areas: "SidebarTitleEdit" "VariationPicker" "PreviewContext" "SidebarContentContainer" "SidebarButtonContainer";
}
.Sidebar .SidebarWrapper .VariationPicker {
  grid-area: VariationPicker;
}
.Sidebar .SidebarWrapper .PreviewContextContainer {
  grid-area: PreviewContext;
}
.Sidebar .SidebarWrapper .SidebarContentContainer {
  grid-area: SidebarContentContainer;
  overflow-y: auto;
}
.Sidebar .SidebarWrapper .SidebarButtonContainer {
  grid-area: SidebarButtonContainer;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-style: solid;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  text-align: center;
}
.Sidebar .SidebarWrapper .SidebarButtonContainer button,
.Sidebar .SidebarWrapper .SidebarButtonContainer .Button {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.Sidebar .SidebarWrapper .SidebarButtonContainer:empty {
  border-top-width: 0;
  visibility: hidden;
}
.Sidebar .SidebarWrapper .TitleEdit {
  display: none;
  grid-area: SidebarTitleEdit;
}
.Sidebar .SidebarWrapper .TitleEdit:has(.Field) {
  display: block;
}

.ViewerScreen {
  grid-area: ViewerScreen;
  position: relative;
  overflow: auto;
  padding-top: 80px;
  background-color: var(--color-white);
}
.ViewerScreen h2 {
  text-align: center;
  color: #3E586F;
  margin-bottom: var(--spacing-large);
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.ViewerScreen .EntriesScreen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--spacing-double_large);
}
.ViewerScreen .EntriesPanel {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-radius: 4px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.ViewerScreen .EntriesPanel .Fields {
  position: relative;
  padding-top: 10px;
}
.ViewerScreen .Loading {
  opacity: 1;
  visibility: visible;
  position: absolute;
  background-color: rgba(28, 39, 49, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  z-index: 20;
}
.ViewerScreen .Loading .Spinner {
  opacity: 1;
  z-index: 100;
}

.StudioTopbar {
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  position: absolute;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  height: 50px;
  left: 430px;
  right: 0;
  top: 0;
  z-index: 1000;
}
.StudioTopbar ._content {
  position: relative;
  width: 100%;
}

.StudioNavigation {
  display: flex;
  justify-content: flex-end;
  padding-right: var(--spacing-medium);
  height: 50px;
  line-height: 50px;
  align-items: center;
}

.StudioDirectoryLabel {
  margin-right: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
}

.StudioSessionButton {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.StudioSessionButton .StudioSessionButton_delete {
  cursor: pointer;
  color: #3E586F;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: -4px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.StudioSessionButton .StudioSessionButton_delete:hover {
  color: #FF794F;
}
.StudioSessionButton:hover .StudioSessionButton_delete {
  opacity: 1;
}

.StudioStatii {
  position: absolute;
  padding-left: var(--spacing-medium);
  left: 0;
  top: 0;
}

.StudioStatus {
  position: relative;
  text-align: left;
  color: #3E586F;
  display: inline-block;
  padding-left: var(--spacing-medium);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-weight: 400;
  width: 120px;
}
.StudioStatus:before {
  display: block;
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 0;
  top: 20px;
  transition-delay: 100ms;
  transition: background 100ms linear;
  width: 8px;
}
.StudioStatus.synced:before, .StudioStatus.success:before {
  background-color: #1B9DDE;
}
.StudioStatus.dirty:before {
  background: brown;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #D1ECFA;
}
.StudioStatus.pending:before, .StudioStatus.syncing:before {
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #D1ECFA;
}
.StudioStatus.error:before {
  background: #FF794F;
}
.StudioStatus.synced .synced, .StudioStatus.syncing .syncing, .StudioStatus.success .success, .StudioStatus.pending .pending, .StudioStatus.error .error, .StudioStatus.dirty .dirty {
  opacity: 1;
}
.StudioStatus * {
  position: absolute;
  left: 18px;
  opacity: 0;
  top: 14px;
  transition-delay: 100ms;
  transition: opacity 100ms linear;
}

.StudioSidebar {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-right-width: 1px;
  border-style: solid;
  position: absolute;
  height: 100%;
  bottom: 0;
  left: 0;
  top: 0;
  width: 430px;
  border-right-width: 1px;
  border-style: solid;
  -webkit-transition: opacity 600ms ease-in-out;
  transition: opacity 600ms ease-in-out;
  z-index: 100;
}

.StudioSidebar ._divider {
  user-select: none;
  bottom: 0;
  cursor: ew-resize;
  right: -20px;
  top: 0;
  width: 20px;
  z-index: 1000;
}

.StudioTabs {
  width: 100%;
  user-select: none;
  color: #3E586F;
  background-color: #9CB2C7;
  padding-top: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  left: 0;
  top: 0;
}

.StudioTab {
  display: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-right: var(--spacing-fine);
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-medium_small);
  padding-right: var(--spacing-medium_small);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-weight: 400;
  cursor: pointer;
  transition: background 100ms ease-in-out;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
}
.StudioTab:hover {
  background: rgba(255, 255, 255, 0.2);
}
.StudioTab[_visible] {
  display: inline-block;
}
.StudioTab[_active] {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  color: #1C2731;
  font-weight: 600;
}

.StudioPanels {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 50px;
}

.StudioPanel {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  overflow-y: auto;
}
.StudioPanel[_active] {
  display: block;
}

.StudioEntries .Field {
  margin: 0;
}

.ExportSection {
  padding-bottom: var(--spacing-medium);
}
.ExportSection h3 {
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-weight: 400;
  padding-bottom: var(--spacing-normal);
}
.ExportSection p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-bottom: var(--spacing-normal);
}

.StudioExports {
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  overflow-y: auto;
}
.StudioExports pre {
  font-family: Consolas, monospace;
  padding: 10px;
  background: #FFFFFF;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: var(--spacing-medium_small);
}

.StudioExports__list {
  margin-top: var(--spacing-medium);
}

.StudioExport {
  margin-bottom: var(--spacing-normal);
}
.StudioExport .Button {
  width: 100%;
}

.StudioAssets {
  color: #3E586F;
  padding-top: var(--spacing-normal);
  overflow-y: auto;
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
}

.StudioAsset {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
}

.StudioFields__editor {
  position: absolute;
  width: 100%;
  height: calc(100% - 40px);
  top: 40px;
}

.StudioConsole {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  color: #1C2731;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  right: 0;
  top: 0;
}

.StudioConsole__content {
  width: 100%;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  bottom: 0;
  left: 0;
}
.StudioConsole__content p {
  color: #3E586F;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-family: Consolas, monospace;
}
.StudioConsole__content p.heading {
  font-weight: 600;
  text-transform: uppercase;
}
.StudioConsole__content p.error {
  background: #FF794F;
  color: #FFFFFF;
  padding: 5px;
}
.StudioConsole__content p.dimmed {
  opacity: 0.5;
}

.StudioPreview {
  position: absolute;
  left: 430px;
  top: 50px;
  right: 0;
  bottom: 0;
}

.JwtError {
  position: absolute;
  left: 10vh;
  width: 80vw;
  top: 10vh;
  padding: 1vw;
  border: solid 1px red;
  background: #fcc;
  color: #622;
  font-size: 20px;
}
.JwtError h1 {
  font-size: 2em;
  font-weight: bold;
}
.JwtError div.message {
  margin-top: 0.5em;
  font-size: 1.5em;
  margin-bottom: 2em;
}
.JwtError form {
  display: block;
  margin-bottom: 3em;
}
.JwtError form label {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.JwtError form div.existing {
  margin-bottom: 1em;
  width: 100%;
  word-wrap: break-word;
}
.JwtError form textarea {
  width: 100%;
  height: 5em;
}
.JwtError form input[type=submit] {
  margin-top: 0.5em;
  font-size: 1em;
}

.ActionBar {
  margin-bottom: var(--spacing-large);
  position: relative;
  min-height: 38px;
}
.ActionBar ._primary {
  margin-bottom: var(--spacing-medium);
}
.ActionBar ._primary > input {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
  padding-right: var(--spacing-normal);
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 300px;
  background-image: url(public/main/images/icons/legacy/ActionSearchSlate.adc838b30da7446960ad.svg);
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 20px 18px;
  padding-left: 40px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.ActionBar ._primary > input::placeholder {
  color: #9CB2C7;
}
.ActionBar ._primary ._status {
  text-align: left;
  color: #3E586F;
  padding-top: var(--spacing-normal);
  padding-left: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 300px;
  display: inline-block;
}
.ActionBar ._primary ._status:first-child {
  padding-left: 0;
}
.ActionBar ._primary .Masquerade {
  position: absolute;
  width: 270px;
  top: 0;
  right: 0;
}
.ActionBar ._primary .Masquerade .Dropdown ._input {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-top: 7px;
  padding-bottom: 7px;
  background-position: 10px 8px;
}
.ActionBar ._primary .Masquerade .Dropdown ._options {
  max-height: 139px;
}
.ActionBar ._primary .Masquerade .Dropdown ._option {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-top: 7px;
  padding-bottom: 7px;
}
.ActionBar ._primary .Masquerade .Dropdown ._display {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-top: 7px;
  padding-bottom: 7px;
}
.ActionBar ._primary .TopButtonGroup {
  position: absolute;
  top: 0;
  right: 0;
}
.ActionBar ._primary .TopButtonGroup [data-view-kebab-menu] {
  display: inline-block;
  position: relative;
  top: 4px;
}
.ActionBar ._primary .TopButtonGroup .Button,
.ActionBar ._primary .TopButtonGroup [data-view-create-multi] {
  position: relative;
  margin-left: var(--spacing-small);
}
.ActionBar ._primary .Button,
.ActionBar ._primary [data-view-create-multi] {
  position: absolute;
  top: 0;
  right: 0;
}
.ActionBar ._filters {
  border-color: rgba(156, 178, 199, 0.5);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  padding-left: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  position: relative;
  border-radius: 4px;
  background-color: var(--color-white);
}
.ActionBar ._filters ._actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.ActionBar ._filters ._actions .Drop {
  top: 50%;
  transform: translateY(-50%);
  right: -210px;
}
.ActionBar ._filters ._actions .Drop .Pointer {
  width: 14px;
  height: 28px;
  top: 50%;
  transform: translateY(-50%);
  right: 200px;
}
.ActionBar ._filters ._actions .Drop .Pointer:before {
  border-color: transparent white transparent transparent;
  border-width: 12px 12px 12px 0px;
}
.ActionBar ._filters ._actions .Drop .Pointer:after {
  right: 2px;
  border-color: transparent rgba(63, 87, 109, 0.04) transparent transparent;
  border-width: 14px 14px 14px 0px;
}
.ActionBar ._filters + ._filters {
  border-top: none;
}
.ActionBar ._filters ._filterTitle {
  color: #3E586F;
  display: inline-block;
  margin-bottom: var(--spacing-normal);
  margin-right: var(--spacing-normal);
  padding-bottom: var(--spacing-small);
  padding-top: var(--spacing-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-weight: 600;
}
.ActionBar ._filters._multiFilter {
  padding-bottom: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  display: flex;
  align-items: center;
}
.ActionBar ._filters._multiFilter ._filterTitle {
  flex-shrink: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 0;
}
.ActionBar ._filters._multiFilter ._filterPicker {
  flex: 1;
  min-width: 0;
}
.ActionBar ._filter {
  border: 1px solid var(--button-border-color);
  color: #3E586F;
  display: inline-block;
  margin-bottom: var(--spacing-normal);
  margin-right: var(--spacing-normal);
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-small);
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  cursor: pointer;
}
.ActionBar ._filter[_active] {
  color: #FFFFFF;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  background-color: var(--filter-button-active-background-color);
  border: 1px solid var(--filter-button-active-border-color);
}
.ActionBar ._filter:hover {
  background-color: var(--filter-button-active-hover-background-color);
}
.ActionBar ._filter input {
  display: none;
}
.ActionBar .BottomGroup {
  margin-top: var(--spacing-medium);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  height: 47px;
}
.ActionBar .BottomGroup .Toolbar {
  width: 90px;
}
.ActionBar .BottomGroup .SortGroup {
  display: flex;
  align-items: center;
}
.ActionBar .BottomGroup .SortGroup a {
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  min-width: 100px;
}
.ActionBar .BottomGroup .SortGroup[_paginate-sort-direction=asc] ._sort:after {
  background-image: url(public/main/images/icons/legacy/ArrowUpSlate.b6328d03b8cdcbb6ffa9.svg);
}
.ActionBar .BottomGroup .SortGroup[_paginate-sort-direction=desc] ._sort:after {
  background-image: url(public/main/images/icons/legacy/ArrowDownSlate.6db32b6c3c2eb283f73c.svg);
}
.ActionBar .BottomGroup .SortGroup ._sort:hover {
  text-decoration: underline !important;
}
.ActionBar .BottomGroup .SortGroup ._sort[_active] {
  font-weight: 600;
}
.ActionBar .BottomGroup .SortGroup ._sort[_active]:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  vertical-align: middle;
  content: "";
  width: 20px;
  height: 20px;
}

body[data-old-ui] .ActionBar ._filters {
  background-color: unset;
}
body[data-old-ui] .ActionBar ._filter {
  border-color: #3E586F;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
}
body[data-old-ui] .ActionBar ._filter[_active] {
  background-color: #3E586F;
}

.Badge {
  color: #3E586F;
  --icon-size: 15px;
  display: inline-flex;
  align-items: center;
  line-height: var(--icon-size);
  border-radius: 4px;
  padding: 2px 4px;
}
.Badge[_type=standard] {
  background-color: #FFFFFF;
}
.Badge[_type=warning] {
  background-color: #FFE6B3;
}
.Badge[_type=error] {
  background-color: #FFC5B3;
}
.Badge .BadgeIcon {
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.Badge .BadgeText {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AlertMessage {
  text-align: left;
  background-color: #1B9DDE;
  color: #FFFFFF;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  z-index: 1000;
  height: 50px;
  line-height: 50px;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
}
.AlertMessage ._message {
  display: inline-block;
}
.AlertMessage ._message a {
  color: #FFFFFF;
  text-decoration: underline !important;
}
.AlertMessage[_color=navy] {
  background-color: #2D3F50;
}
.AlertMessage[_color=red] {
  background-color: #FF794F;
}

.Announcements {
  margin-bottom: var(--spacing-large);
}

.ApprovalItems {
  padding-bottom: var(--spacing-large);
}
.ApprovalItems ._awaiting {
  text-align: center;
  color: #3E586F;
  padding-bottom: var(--spacing-large);
  padding-top: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ApprovalItems ._awaiting a {
  color: #1B9DDE;
}
.ApprovalItems ._pending-actions {
  display: flex;
  gap: 10px;
}

.ApprovalItem {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  margin-bottom: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  border-radius: 6px;
}
.ApprovalItem ._details {
  position: relative;
}
.ApprovalItem ._details ._sender {
  color: #3E586F;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ApprovalItem ._details ._sender a {
  color: #1B9DDE;
}
.ApprovalItem ._details .ApprovalStatus {
  display: inline-block;
  padding-left: var(--spacing-medium_small);
}
.ApprovalItem ._details ._timestamp {
  color: #9CB2C7;
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  bottom: 0;
  right: 0;
}
.ApprovalItem ._content {
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-top: var(--spacing-normal);
}
.ApprovalItem ._assets {
  padding-top: var(--spacing-normal);
}

.ApprovalStatus {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ApprovalStatus[_status=approved] {
  color: #3E586F;
}
.ApprovalStatus[_status=requested] {
  color: #FFC040;
}
.ApprovalStatus[_status=denied] {
  color: #FF794F;
}

.ArchiveViewer {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.ArchiveViewer ._wrapper {
  text-align: center;
  padding-top: 100px;
}
.ArchiveViewer img {
  display: inline-block;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
}

.AssetDownload {
  margin-bottom: var(--spacing-small);
}
.AssetDownload:last-of-type {
  margin-bottom: var(--spacing-none);
}
.AssetDownload:before {
  display: inline-block;
  background-image: url(public/main/images/icons/legacy/FileGenericSlate.7751ea1492d6f7003a8b.svg);
  background-repeat: no-repeat;
  background-size: 22px;
  content: "";
  height: 22px;
  width: 22px;
}
.AssetDownload ._filename {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: rgba(62, 88, 111, 0.3);
  color: #3E586F;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 100px);
  vertical-align: top;
}
.AssetDownload ._size {
  color: #9CB2C7;
  display: inline-block;
  padding-left: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  vertical-align: top;
}

.Badge {
  color: #3E586F;
  --icon-size: 15px;
  display: inline-flex;
  align-items: center;
  line-height: var(--icon-size);
  border-radius: 4px;
  padding: 2px 4px;
}
.Badge[_type=standard] {
  background-color: #FFFFFF;
}
.Badge[_type=warning] {
  background-color: #FFE6B3;
}
.Badge[_type=error] {
  background-color: #FFC5B3;
}
.Badge .BadgeIcon {
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.Badge .BadgeText {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Breadcrumbs ._breadcrumb {
  display: inline-flex;
  align-items: center;
}
.Breadcrumbs ._breadcrumb:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  margin-right: var(--spacing-small);
  background-image: url(public/main/images/icons/legacy/EventNextSlate.d9fcf68f1a458f41fcab.svg);
  background-position-y: 40%;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  content: "";
  height: 20px;
  right: 0;
  top: 0;
  width: 14px;
}
.Breadcrumbs ._breadcrumb:last-of-type:after {
  display: none;
}
.Breadcrumbs ._breadcrumb:last-of-type a {
  border: none !important;
  cursor: default;
}
.Breadcrumbs a {
  display: inline-block;
  padding-bottom: var(--spacing-fine);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  transition: border 100ms ease-in-out;
}

.Breakout {
  display: block;
  visibility: hidden;
  position: fixed;
  height: 0;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 3000;
}
.Breakout[_active] {
  visibility: visible;
  height: 100vh;
}
.Breakout[_active] ._shade,
.Breakout[_active] ._container {
  opacity: 1;
  visibility: visible;
}
.Breakout ._container {
  visibility: hidden;
  opacity: 0;
  position: relative;
  margin: 100px auto 0 auto;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  width: 50vw;
  max-width: 800px;
  z-index: 4000;
}
.Breakout ._button {
  border-bottom-width: 0 !important;
}
.Breakout ._minimise {
  text-align: right;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  color: #3E586F;
  cursor: pointer;
  user-select: none;
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background-image: url(public/main/images/icons/zoom-out.ce439df61c52e3e15e88.svg);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 14px auto;
  height: 27px;
  line-height: 26px;
  padding-right: 20px;
  right: 25px;
  top: 21px;
  z-index: 10;
}
.Breakout ._minimise:hover {
  background-image: url(public/main/images/icons/zoom-out-active.0a54a9b76bb2fc691fa0.svg);
}
.Breakout ._content {
  position: relative;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  border-radius: 6px;
  padding-bottom: var(--spacing-medium_large);
  padding-left: var(--spacing-medium_large);
  padding-right: var(--spacing-medium_large);
  padding-top: var(--spacing-medium_large);
}
.Breakout ._shade {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background-color: rgba(28, 39, 49, 0.4);
  content: "";
  height: 100vh;
  left: 0;
  top: 0;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  width: 100vw;
  z-index: 2000;
}

.BreakoutPlaceholder {
  border-radius: 6px;
  background: rgba(28, 39, 49, 0.1);
}

.Textarea ._toolbar ._expand {
  color: #3E586F;
  cursor: pointer;
  display: block;
  user-select: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background-image: url(public/main/images/icons/zoom-in.223c2214ac09ecbf19a9.svg);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 14px auto;
  padding-right: 20px;
  transition: color 100ms ease-in-out;
}
.Textarea ._toolbar ._expand:hover {
  color: #1B9DDE;
  background-image: url(public/main/images/icons/zoom-in-active.0051ddcb4025d68da30b.svg);
}
.Breakout .Textarea ._toolbar ._expand, .Textarea ._toolbar .Breakout ._expand {
  display: none;
}

.BudgetDashboard {
  background-color: #FFFFFF;
  display: inline-block;
  margin-bottom: var(--spacing-medium);
  position: relative;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 6px;
  vertical-align: top;
  display: inline-block;
  width: 100%;
}
.BudgetDashboard:after {
  content: "";
  display: table;
  clear: both;
}
.BudgetDashboard .BudgetIcon svg {
  width: 70px;
  height: 70px;
  vertical-align: middle;
}
.BudgetDashboard ._primary {
  border-color: rgba(156, 178, 199, 0.5);
  border-right-width: 1px;
  border-style: solid;
  width: 300px;
  display: inline-block;
  padding-right: var(--spacing-medium);
}
.BudgetDashboard ._secondary {
  border-color: rgba(156, 178, 199, 0.5);
  border-right-width: 1px;
  border-style: solid;
  display: inline-block;
  width: 300px;
}
.BudgetDashboard ._tertiary {
  text-align: center;
  display: inline-block;
  width: 220px;
  position: relative;
  overflow: visible;
}
.BudgetDashboard ._thumbnail {
  text-align: center;
  background-color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  width: 120px;
  height: 96.6px;
  line-height: 96.6px;
  left: 0px;
  top: 0px;
}
.BudgetDashboard ._primary {
  padding-left: var(--spacing-medium);
  padding-top: var(--spacing-medium_small);
  position: relative;
  height: 96.6px;
  margin-left: 120px;
  vertical-align: top;
}
.BudgetDashboard ._secondary {
  overflow: hidden;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium_small);
  height: 96.6px;
  vertical-align: top;
}
.BudgetDashboard ._tertiary {
  line-height: 96.6px;
  height: 96.6px;
  vertical-align: top;
}
.BudgetDashboard ._title {
  color: #1C2731;
  margin-bottom: var(--spacing-small);
  word-break: break-word;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
  max-height: 44px;
}
.BudgetDashboard ._title a {
  color: #1B9DDE;
}
.BudgetDashboard p {
  color: #3E586F;
  margin-bottom: var(--spacing-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-right: var(--spacing-medium);
}
.BudgetDashboard p strong {
  font-weight: 600;
}
.BudgetDashboard ._status {
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  position: relative;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  padding-top: 30px;
  vertical-align: middle;
}
.BudgetDashboard ._status[_type=tick-grey] {
  color: #3E586F;
  background-image: url(public/main/images/icons/legacy/StatusSuccessSlate.3267193c2d25c9b663c4.svg);
}
.BudgetDashboard ._status[_type=alert] {
  background-image: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
}

button,
.Button {
  text-align: center;
  background-color: transparent;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  cursor: pointer;
  display: inline-block;
  border-radius: 6px;
  user-select: none;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
}
button[_size=small],
.Button[_size=small] {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-left: var(--spacing-medium_small);
  padding-right: var(--spacing-medium_small);
  padding-top: 7px;
  padding-bottom: 7px;
  min-width: 120px;
}
button[_size=medium],
.Button[_size=medium] {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: 11px;
  padding-bottom: 11px;
  min-width: 150px;
}
button[_type=primary],
.Button[_type=primary] {
  background-color: var(--button-primary-background-color);
  border-color: var(--button-primary-border-color);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: var(--button-primary-foreground-color);
}
button[_type=primary]:hover,
.Button[_type=primary]:hover {
  background-color: var(--button-primary-hover-background-color);
  border-color: var(--button-primary-hover-border-color);
}
button[_type=secondary],
.Button[_type=secondary] {
  background-color: var(--button-secondary-background-color);
  border: var(--button-secondary-border-color);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: var(--button-secondary-foreground-color);
}
button[_type=secondary]:hover,
.Button[_type=secondary]:hover {
  background-color: var(--button-secondary-hover-background-color);
  border-color: var(--button-secondary-hover-border-color);
}
button[_type=tertiary],
.Button[_type=tertiary] {
  background-color: #FFC5B3;
  border-color: #FFC5B3;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
}
button[_type=tertiary]:hover,
.Button[_type=tertiary]:hover {
  background-color: #FF9E80;
  border-color: #FF9E80;
}
button[_type=toggle],
.Button[_type=toggle] {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
}
button[_type=toggle][_active],
.Button[_type=toggle][_active] {
  background-color: #3E586F;
  border-color: #3E586F;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #FFFFFF;
}
button[_type=toggle][_active]:hover,
.Button[_type=toggle][_active]:hover {
  background-color: #3E586F;
  border-color: #3E586F;
  color: #FFFFFF;
}
button[_type=toggle]:hover,
.Button[_type=toggle]:hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  color: #3E586F;
}
button[_loading], button[_type=disabled], button.Disabled,
.Button[_loading],
.Button[_type=disabled],
.Button.Disabled {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #DEE6ED;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #5C81A3;
  cursor: not-allowed;
}
button[_loading]:hover, button[_type=disabled]:hover, button.Disabled:hover,
.Button[_loading]:hover,
.Button[_type=disabled]:hover,
.Button.Disabled:hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #DEE6ED;
}
button[_theme=dark][_type=secondary],
.Button[_theme=dark][_type=secondary] {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #DEE6ED;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
}
button[_theme=dark][_type=secondary]:hover,
.Button[_theme=dark][_type=secondary]:hover {
  background-color: #CED9E3;
  border-color: #CED9E3;
}
button[_theme=dark][_type=toggle],
.Button[_theme=dark][_type=toggle] {
  background-color: #2D3F50;
  border-color: #2D3F50;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #DEE6ED;
}
button[_theme=dark][_type=toggle][_active],
.Button[_theme=dark][_type=toggle][_active] {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #DEE6ED;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
}
button[_theme=dark][_type=toggle][_active]:hover,
.Button[_theme=dark][_type=toggle][_active]:hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #DEE6ED;
  color: #3E586F;
}
button[_theme=dark][_type=toggle]:hover,
.Button[_theme=dark][_type=toggle]:hover {
  background-color: #496783;
  border-color: #496783;
  color: #FFFFFF;
}
button[_theme=dark][_loading], button[_theme=dark][_type=disabled], button[_theme=dark].Disabled,
.Button[_theme=dark][_loading],
.Button[_theme=dark][_type=disabled],
.Button[_theme=dark].Disabled {
  background-color: #496783;
  border-color: #496783;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #BECDDA;
  cursor: not-allowed;
}
button[_theme=dark][_loading]:hover, button[_theme=dark][_type=disabled]:hover, button[_theme=dark].Disabled:hover,
.Button[_theme=dark][_loading]:hover,
.Button[_theme=dark][_type=disabled]:hover,
.Button[_theme=dark].Disabled:hover {
  background-color: #496783;
  border-color: #496783;
}
button[_icon=left]:before,
.Button[_icon=left]:before {
  display: inline-block;
  padding-right: var(--spacing-small);
  content: "<";
}
button[_icon=right]:after,
.Button[_icon=right]:after {
  display: inline-block;
  padding-left: var(--spacing-small);
  content: ">";
}
button[_action=create]:after,
.Button[_action=create]:after {
  display: inline-block;
  padding-left: var(--spacing-small);
  content: "+";
}
button[_loading]:after,
.Button[_loading]:after {
  --size: 16px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-block;
  border-top: 1px solid currentColor;
  border-right: 1px solid transparent;
  box-sizing: border-box;
  animation: spinner 1s linear infinite;
  content: "";
  margin-left: 5px;
}

body[data-old-ui] button[_loading]:after,
body[data-old-ui] .Button[_loading]:after {
  display: inline-block;
  margin-left: var(--spacing-fine);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: loading_dots;
  animation-timing-function: linear;
  content: "";
  letter-spacing: 1px;
  border-radius: unset;
  border: unset;
}

@keyframes loading_dots {
  0%, 100% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ButtonsGroup {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ButtonsGroup .Button {
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
  margin-right: 0;
  border-right-width: 0;
}
.ButtonsGroup .Button:first-child:nth-last-child(2),
.ButtonsGroup .Button:first-child:nth-last-child(2) ~ .Button {
  width: 50%;
}
.ButtonsGroup .Button:first-child:nth-last-child(3),
.ButtonsGroup .Button:first-child:nth-last-child(3) ~ .Button {
  width: 33.3333%;
}
.ButtonsGroup .Button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ButtonsGroup .Button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ButtonsGroup .Button:last-child {
  border-right-width: 1px;
}
.ButtonsGroup .Button[_active] + .Button {
  border-left-width: 0;
}

.Card {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 6px;
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-top: var(--spacing-large);
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
}
.Card h2 {
  color: #1C2731;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 30px;
}
.Card h3 {
  color: #1C2731;
  margin-bottom: var(--spacing-medium);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.Changelog {
  color: #1C2731;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  max-height: calc(100vh - 280px);
  overflow-y: scroll;
}
.Changelog h1 {
  margin-bottom: var(--spacing-medium);
  font-size: 34px;
  line-height: 41px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.Changelog h2 {
  margin-bottom: var(--spacing-medium);
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.Changelog h3 {
  margin-bottom: var(--spacing-medium);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.Changelog p {
  margin-bottom: var(--spacing-medium);
}
.Changelog ul {
  margin-bottom: var(--spacing-medium);
  list-style-position: outside;
  list-style-type: disc;
}
.Changelog li {
  margin-bottom: var(--spacing-small);
  margin-left: 16px;
}
.Changelog a {
  color: #1C2731;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-decoration: underline !important;
}

.Chooser ._choice {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  cursor: pointer;
  display: block;
  user-select: none;
  margin-bottom: var(--spacing-normal);
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  position: relative;
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2.5em;
}
.Chooser ._choice:after {
  height: 100%;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ArrowRightSlate.7d262fa0c47db3f7f3f7.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 22px;
  content: "";
  right: 0;
  top: 0;
  vertical-align: top;
  width: 2.5em;
}
.Chooser ._choice:last-of-type {
  margin-bottom: var(--spacing-none);
}
.Chooser ._choice[_active] {
  border-color: #9CB2C7;
  background-color: #3E586F;
  color: #FFFFFF;
}
.Chooser ._choice[_active]:after {
  background-image: url(public/main/images/icons/legacy/ArrowRightWhite.fc5edbda3ef29563c234.svg);
}
.Chooser ._choice[_complete]:after {
  background-image: url(public/main/images/icons/legacy/StatusSuccessSlate.3267193c2d25c9b663c4.svg);
}

.Clipboard + ._suffix {
  cursor: pointer;
}

body[data-old-ui] .Column {
  float: left;
  width: 502px;
}
body[data-old-ui] .Column + body[data-old-ui] .Column {
  margin-left: var(--spacing-medium);
}
body[data-old-ui] + body[data-old-ui] {
  float: right;
}

.Crudsort {
  margin-bottom: var(--spacing-medium);
}
.Crudsort > ._title {
  color: #3E586F;
  margin-bottom: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Crudsort > ._empty {
  text-align: left;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-top-width: 1px;
  border-style: solid;
  color: #3E586F;
  display: none;
  margin-bottom: var(--spacing-small);
  padding-bottom: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  position: relative;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
}
.Crudsort[_empty] > ._empty {
  display: block;
}
.Crudsort ._new {
  text-align: right;
}
.Crudsort ._action {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #1B9DDE;
  cursor: pointer;
  padding-top: var(--spacing-small);
}
.Crudsort ._action:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  background-image: url(public/main/images/icons/legacy/ActionAddSkyBlue.dcc161fa32f3de413bb5.svg);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  content: "";
  height: 1.2em;
  width: 15px;
  vertical-align: top;
}

.CrudsortItem {
  margin-bottom: var(--spacing-small);
}
.Crudsort[_single-field] .CrudsortItem ._bar {
  overflow: visible;
  padding-bottom: var(--spacing-none);
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
  padding-top: var(--spacing-none);
  min-height: 46px;
}
.Crudsort[_single-field] .CrudsortItem .Label {
  margin-right: var(--spacing-double_large);
}
.Crudsort[_single-field] .CrudsortItem .Dropdown {
  position: absolute;
  left: -1px;
  right: 0;
  top: -1px;
}
.Crudsort[_single-field] .CrudsortItem .Dropdown ._display {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.Crudsort[_single-field] .CrudsortItem input {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
}
.CrudsortItem ._bar {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  overflow: hidden;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  position: relative;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
}
.CrudsortItem ._bar ._title {
  color: #3E586F;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  word-break: break-word;
  width: 350px;
}
.CrudsortItem ._bar ._title:hover:after {
  opacity: 1;
}
.CrudsortItem ._bar ._title:after {
  display: inline-block;
  margin-left: var(--spacing-normal);
  background-image: url(public/main/images/icons/legacy/ArrowDownSlate.6db32b6c3c2eb283f73c.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  content: "";
  height: 22px;
  transition: transform 0.3s;
  vertical-align: top;
  width: 22px;
}
.CrudsortItem ._bar ._handle {
  cursor: ns-resize;
  height: 100%;
  user-select: none;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionReorderSlate.669309e6b5be4760ce31.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  right: 40px;
  top: 0;
  transition: opacity 100ms ease-in-out;
  width: 40px;
}
.CrudsortItem ._bar ._handle:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.CrudsortItem ._bar ._divider {
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  height: 100%;
  position: absolute;
  right: 40px;
  top: 0;
  width: 0;
}
.CrudsortItem ._bar ._remove {
  cursor: pointer;
  height: 100%;
  user-select: none;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionDeleteSlate.f9b902cb8601cde1becf.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  right: 0;
  top: 0;
  transition: opacity 100ms ease-in-out;
  width: 40px;
}
.CrudsortItem ._bar ._remove:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.CrudsortItem ._panelWrapper {
  overflow: hidden;
  height: 0;
}
.CrudsortItem ._panel {
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 1px;
  border-style: solid;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.CrudsortItem[_expanded] ._bar {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.CrudsortItem[_expanded] ._title:after {
  transform: rotate(180deg);
}
.CrudsortItem[_expanded] ._panelWrapper {
  height: auto;
}

.WorkflowStages ._add,
.ExportChecklistSections ._add {
  text-align: right;
}
.WorkflowStages ._action,
.ExportChecklistSections ._action {
  color: #1B9DDE;
  cursor: pointer;
  padding-top: var(--spacing-small);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.WorkflowStages ._action:after,
.ExportChecklistSections ._action:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  background-image: url(public/main/images/icons/legacy/ActionAddSkyBlue.dcc161fa32f3de413bb5.svg);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  content: "";
  height: 1.2em;
  width: 15px;
  vertical-align: top;
}

.Details .TopButtons {
  margin-bottom: 20px;
  text-align: right;
  width: calc(100% + 40px);
  margin-left: -20px;
}
.Details .TopButtons a {
  margin-left: 20px;
}
.Details .Divider {
  margin-top: 40px;
  margin-bottom: 40px;
}
.Details .Container {
  background-color: #FFFFFF;
  position: relative;
  border-radius: 6px;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  width: calc(100% + 40px);
  margin-left: -20px;
}
.Details .Container .Edit {
  position: absolute;
  right: 20px;
  top: 20px;
}
.Details .Container .Edit:not(.Button) {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #1B9DDE;
}
.Details .Container .Edit:not(.Button):hover {
  text-decoration: underline !important;
}
.Details .Container .Heading {
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  margin-bottom: 20px;
}
.Details .Container .Columns {
  display: flex;
  gap: var(--spacing-large);
}
.Details .Container .Columns .Column {
  width: 460px;
}
.Details .Container .Columns .Column .Thumbnail {
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.3);
  margin-bottom: 20px;
}
.Details .Container .Columns .Column.Center {
  text-align: center;
}
.Details .Container .Columns .ColumnWide {
  min-width: 0;
}
.Details .Container .Columns ._links {
  padding-top: 10px;
}
.Details .Container .Columns ._links ._link {
  color: #1B9DDE;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
}
.Details .Container.inactive, .Details .Container.trashed {
  background-color: #FFC5B3;
}
.Details .Container.inactive .message_text::before, .Details .Container.trashed .message_text::before {
  content: " ";
  background-image: url(public/main/images/icons/legacy/StatusUnavailableSlate.1ce153d0413b1498fcd3.svg);
  width: 20px;
  height: 20px;
  display: block;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  background-size: 20px 20px;
  background-position: center;
}
.Details .Container.inactive .message_text, .Details .Container.trashed .message_text {
  padding-left: 25px;
}
.Details .Container.unpublished {
  background-color: #FFE6B3;
}
.Details .Container .StatusBanner {
  display: flex;
}
.Details .Container .StatusBanner strong {
  font-weight: 600;
}
.Details .Container .StatusBanner .message_text.tick::before, .Details .Container .StatusBanner .message_text.denied::before {
  content: " ";
  width: 22px;
  height: 22px;
  display: block;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  background-size: 22px 22px;
  background-position: center;
}
.Details .Container .StatusBanner .message_text.denied::before {
  background-image: url(public/main/images/icons/legacy/StatusUnavailableSlate.1ce153d0413b1498fcd3.svg);
}
.Details .Container .StatusBanner .message_text.tick::before {
  background-image: url(public/main/images/icons/legacy/StatusSuccessSlate.3267193c2d25c9b663c4.svg);
}
.Details .Container .StatusBanner .message_text.tick, .Details .Container .StatusBanner .message_text.denied {
  padding-left: 28px;
}
.Details .Container .StatusBanner .Label, .Details .Container .StatusBanner ._value {
  width: 100%;
}
.Details .Container .StatusBanner ._value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.Details .Container .StatusBanner .message_text {
  max-width: 75%;
}
.Details .Container .StatusBanner .message_text:only-child {
  max-width: 100%;
}
.Details .Container .MissionControl {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.Details .Container .MissionControl .Divider {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top-width: 1px;
}
.Details .Container .MissionControl .Label {
  position: relative;
  border-top: solid 1px #9CB2C7;
  padding-top: 20px;
  margin: 0;
}
.Details .Container .MissionControl .Label:first-child {
  padding: 0;
  border: none;
}
.Details .Container .MissionControl .Button {
  position: absolute;
  right: 0;
  bottom: 0;
}
.Details .Container .MissionControl ._value {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.datepicker {
  display: none;
  user-select: none;
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  left: 0;
  margin-top: 5px;
  top: 0;
  width: 220px;
  z-index: 100;
}
.datepicker:before {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-top-width: 1px;
  border-style: solid;
  display: block;
  position: absolute;
  content: "";
  height: 20px;
  left: 100px;
  top: 0;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  width: 20px;
}
.datepicker > div {
  display: none;
}
.datepicker table {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-radius: 4px;
  width: 100%;
  margin: 10px 0 0 0;
}
.datepicker table thead tr:first-child th {
  cursor: pointer;
}
.datepicker table thead tr:first-child th:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.datepicker table thead th {
  font-weight: 600;
  height: 20px;
  padding: 6px 0;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  width: 20px;
}
.datepicker table thead th.switch {
  width: 145px;
}
.datepicker table thead th.next .icon {
  text-align: right;
  margin-bottom: var(--spacing-none);
  margin-left: var(--spacing-none);
  margin-right: var(--spacing-none);
  margin-top: var(--spacing-none);
}
.datepicker table td {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #1B9DDE;
  height: 20px;
  padding: 5px 0;
  vertical-align: middle;
  width: 20px;
}
.datepicker table td.day {
  cursor: pointer;
}
.datepicker table td.day:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.datepicker table td.old, .datepicker table td.new {
  color: rgba(27, 157, 222, 0.5);
}
.datepicker table td.active, .datepicker table td.active:hover,
.datepicker table td span.active,
.datepicker table td span.active:hover {
  background-color: #1B9DDE;
  color: #FFFFFF;
  border-radius: 3px;
  font-weight: 600;
}
.datepicker table td.disabled {
  cursor: not-allowed;
  color: #EFF2F6;
}
.datepicker table td.disabled:hover {
  background-color: transparent;
}
.datepicker table td span {
  cursor: pointer;
  display: block;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 66px;
}
.datepicker table td span:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }
  .daterangepicker .ranges ul {
    width: 140px;
  }
  .daterangepicker.single .ranges ul {
    width: 100%;
  }
  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }
  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }
  .daterangepicker {
    direction: ltr;
    text-align: left;
  }
  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }
  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }
  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }
  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }
  .daterangepicker .ranges {
    float: left;
  }
  .daterangepicker.rtl .ranges {
    float: right;
  }
  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
.Divider {
  width: 100%;
  border-top: 2px solid #9CB2C7;
}
.Divider.WithText {
  margin-bottom: 10px;
}

._template {
  display: none;
}

.Dropdown[_autocomplete] ._input {
  display: block;
}
.Dropdown[_autocomplete][_expanded] ._dropdown {
  max-height: 195px;
}
.Dropdown[_expanded] ._display {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition: border-radius 0;
}
.Dropdown[_expanded] ._display:after {
  transform: rotate(180deg);
}
.Dropdown[_expanded] ._dropdown {
  border-bottom-width: 1px;
  border-style: solid;
  max-height: 156px;
}
.Dropdown[_empty] ._options:after {
  display: block;
}
.Dropdown[_loading] ._option {
  opacity: 0.4;
}
.Dropdown ._display {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  user-select: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  position: relative;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-right: 53px;
  transition: border-radius 200ms ease-in-out;
}
.Dropdown ._display:after {
  height: 100%;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ArrowDownSlate.6db32b6c3c2eb283f73c.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 22px;
  content: "";
  right: 0;
  top: 0;
  transition: transform 200ms ease-in-out;
  width: 53px;
}
.Dropdown ._dropdown {
  text-align: left;
  background-color: #FFFFFF;
  border-bottom-width: 0;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 1px;
  border-style: solid;
  position: absolute;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.1);
  width: 100%;
  left: 0;
  top: 0;
  max-height: 0;
  overflow: hidden;
  z-index: 2000;
}
.Dropdown ._input {
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 0;
  border-style: solid;
  border-right-width: 0;
  border-style: solid;
  border-top-width: 0;
  border-style: solid;
  color: #1C2731;
  display: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
  background-image: url(public/main/images/icons/legacy/ActionSearchSlate.adc838b30da7446960ad.svg);
  background-position: 10px 11px;
  background-repeat: no-repeat;
  background-size: 20px 18px;
  padding-left: 40px;
}
.Dropdown ._input::placeholder {
  color: #9CB2C7;
}
.Dropdown ._options {
  max-height: 156px;
  overflow-y: scroll;
}
.Dropdown ._option {
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  color: #3E586F;
  cursor: pointer;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.Dropdown ._option.inactive {
  color: #9CB2C7;
}
.Dropdown ._option:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Dropdown ._option:hover ._swatch {
  border: 1px dotted grey;
}
.Dropdown ._option.active {
  background-color: #D1ECFA;
}
.Dropdown ._option:last-child {
  border-bottom-color: transparent;
}
.Dropdown ._options:after {
  text-align: center;
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #EFF2F6;
  color: #EFF2F6;
  display: none;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  border-bottom-color: transparent;
  content: "No results found";
}
.Dropdown ._swatch {
  display: inline-block;
  margin-right: var(--spacing-normal);
  position: relative;
  border-radius: 50%;
  height: 18px;
  vertical-align: top;
  width: 18px;
  overflow: hidden;
}
.Dropdown ._swatch ._fill {
  display: inline-block;
  height: 100%;
  position: absolute;
}
.Dropdown ._swatch ._stroke {
  height: 100%;
  position: absolute;
  width: 100%;
  border-radius: 50%;
  left: 0;
  top: 0;
}

.DropdownPopover {
  position: absolute;
  position-area: bottom;
  width: 200px;
  border-radius: 6px;
  box-shadow: 1px 3px 15px 1px rgba(28, 39, 49, 0.4);
  padding: 14px;
}
.DropdownPopover ul li {
  border-radius: 6px;
}
.DropdownPopover ul li:hover {
  background-color: var(--color-silver);
}
.DropdownPopover ul li a {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: block;
  color: var(--color-sky_blue);
  padding: 8px;
}

.EmailTextarea {
  position: relative;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.EmailTextarea textarea, .Label .EmailTextarea textarea, .Field .EmailTextarea textarea {
  position: absolute;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  background: transparent !important;
  height: 136px;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  top: 0;
}
.EmailTextarea ._highlights {
  background-color: #FFFFFF;
  border-color: transparent;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 100%;
  color: white !important;
  height: 136px;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.EmailTextarea ._highlights b {
  background-color: #D1ECFA;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  padding-left: 5px;
  padding-right: 5px;
  color: transparent;
  outline: 2px solid #9CB2C7;
}
.EmailTextarea ._display {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 1px;
  border-style: solid;
  color: #3E586F;
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-small);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.EmailTextarea ._display.Invalid {
  background-color: #FF794F;
}

.EmailVerify {
  position: relative;
}
.EmailVerify ._icon {
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 26px;
  right: 9px;
  top: 8px;
  width: 24px;
}
.EmailVerify[_mode=loading] ._icon {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: animation_spin;
  animation-timing-function: linear;
  background-image: url(public/main/images/icons/legacy/EventLoadingSlate.835b7c62a01887a8a455.svg);
  background-size: 24px 24px;
}
.EmailVerify[_mode=loading] ._status {
  display: none;
}
.EmailVerify[_mode=success] ._icon {
  background-image: url(public/main/images/icons/legacy/StatusSuccessSlate.3267193c2d25c9b663c4.svg);
  background-size: 20px 20px;
}
.EmailVerify[_mode=success] ._status {
  display: none;
}
.EmailVerify[_mode=error] ._icon {
  background-image: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
  background-size: 20px 20px;
}
.EmailVerify ._status {
  color: #3E586F;
  padding-bottom: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.Empty {
  text-align: center;
  color: #3E586F;
  padding-top: var(--spacing-large);
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.ExportDetails {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  margin-bottom: 30px;
}
.ExportDetails .Label {
  margin-bottom: var(--spacing-none);
}
.ExportDetails .Label + .Field {
  margin-top: 30px;
}
.ExportDetails .Label ._locked dl {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.ExportDetails .Label ._locked.RichtextRender > :last-child {
  margin-bottom: 0 !important;
}
.ExportDetails .supplier-order-button-container {
  margin-top: var(--spacing-large);
  width: 100%;
  text-align: center;
}
.ExportDetails .Label + .Chooser,
.ExportDetails .Label + .Button,
.ExportDetails .Chooser + .Button {
  margin-top: var(--spacing-small);
}
.ExportDetails .Chooser {
  margin-top: 10px;
}
.ExportDetails .Chooser:nth-child(2) {
  margin-top: 30px;
}
.ExportDetails .ExportStatus {
  position: relative;
}
.ExportDetails .ExportStatus:before {
  background-color: #FFC040;
  position: absolute;
  border-radius: 50%;
  text-align: center;
  content: "";
  height: 20px;
  width: 20px;
  left: 0;
}
.ExportDetails .ExportStatus.Complete:before {
  background: #50D38B;
}
.ExportDetails .ExportStatus.Failed:before {
  background-color: #FF794F;
}
.ExportDetails .ExportStatus .ExportStatusText {
  padding-left: 25px;
}
.ExportDetails .Error {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  margin-top: var(--spacing-medium);
}
.ExportDetails .Error h3 {
  font-weight: 600;
}
.ExportDetails .Error h3:before {
  margin-right: var(--spacing-small);
  content: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
  width: 16px;
  height: auto;
  vertical-align: middle;
}
.ExportDetails .Error p {
  margin-top: var(--spacing-small);
}
.ExportDetails .Error a {
  color: #3E586F;
  text-decoration: underline !important;
}

.ExportOption {
  margin-bottom: var(--spacing-large);
  margin-left: 26px;
}
.ExportOption:last_of_type {
  margin-bottom: var(--spacing-none);
}
.ExportOption.Disabled p {
  color: #5C81A3;
}
.ExportOption p {
  color: #3E586F;
  user-select: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-top: var(--spacing-small);
  margin-left: 26px;
}
.ExportOption label.Radio {
  color: #3E586F;
  cursor: pointer;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.ExportOption label.Radio input {
  opacity: 0;
  position: absolute;
}
.ExportOption label.Radio input:checked + ._checkbox:before {
  background-color: #1B9DDE;
}
.ExportOption label.Radio input:disabled + ._checkbox:before {
  background-color: transparent;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
}
.ExportOption label.Radio input:disabled + ._checkbox + ._label {
  color: #5C81A3;
  cursor: not-allowed;
}
.ExportOption label.Radio:first-of-type ._checkbox {
  margin-top: var(--spacing-none);
}
.ExportOption label.Radio ._checkbox {
  display: inline-block;
  user-select: none;
  margin-top: var(--spacing-normal);
  vertical-align: top;
  position: relative;
}
.ExportOption label.Radio ._checkbox:before, .ExportOption label.Radio ._checkbox:after {
  margin-right: var(--spacing-normal);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 16px;
  margin-top: 2px;
  vertical-align: top;
  width: 16px;
}
.ExportOption label.Radio ._checkbox:before {
  background-color: #FFFFFF;
  border: 0.3em solid white;
}
.ExportOption label.Radio ._checkbox:after {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  left: 0;
  position: absolute;
  top: 0;
}
.ExportOption label.Radio ._label {
  display: inline-block;
  vertical-align: top;
  width: 400px;
}

.ExportPreview {
  margin-bottom: var(--spacing-large);
  overflow-x: hidden;
  width: 100%;
}
.ExportPreview[_mode=sidebar] {
  padding-top: var(--spacing-large);
  padding-right: var(--spacing-large);
  padding-left: var(--spacing-large);
}
.ExportPreview[_mode=sidebar] ._thumbnail img {
  max-height: 217px;
}
.ExportPreview[_mode=sidebar]:empty {
  margin-bottom: 0;
}
.ExportPreview[_mode=panel] {
  padding-top: var(--spacing-medium);
}
.ExportPreview[_mode=panel] ._thumbnail img {
  max-height: 440px;
}
.ExportPreview ._thumbnail {
  text-align: center;
  margin-bottom: var(--spacing-medium);
}
.ExportPreview ._thumbnail img {
  display: inline-block;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  max-width: 100%;
}
.ExportPreview ._actions {
  text-align: center;
}
.ExportPreview ._actions ._action-row {
  margin-bottom: var(--spacing-normal);
}
.ExportPreview ._actions .Button {
  min-width: 150px;
}
.ExportPreview ._actions .Button:nth-of-type(2) {
  margin-left: 10px;
}

.ExportStages {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.ExportStages h4 {
  color: #3E586F;
  margin-bottom: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.recipient-list-item:hover {
  text-decoration: underline !important;
}

.ExportStagesRight {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 87px;
}
.ExportStagesRight h2 {
  text-align: center;
  color: #3E586F;
  margin-bottom: var(--spacing-large);
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.ExportDetails2 {
  background-color: white;
}

.ExportButtons {
  border-top: 1px solid #9CB2C7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-large);
}

.Foggles th, .Foggles td {
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
  padding-top: var(--spacing-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
}
.Foggles th {
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: nowrap;
}
.Foggles td[data-default-value] {
  font-style: italic;
  color: #BECDDA;
}
.Foggles td.FoggleValue {
  text-align: center;
}
.Foggles a {
  color: #3E586F;
}

.Fields {
  padding-bottom: 20px;
}

.Field[_hidden] {
  display: none;
}
.Field[_hide-in-editor]:not([_locked]) {
  display: none;
}

.Modules {
  margin-bottom: var(--spacing-medium);
}
.Modules:last-of-type {
  margin-bottom: var(--spacing-none);
}
.Modules[_can-add] > ._add, .Modules[_can-switch] > ._add {
  display: inline-block;
}
.Modules[_can-switch] > ._add > ._addDisplay:after {
  display: none;
}
.Modules[_locked] > ._entries > .ModuleEntry > ._bar ._handle {
  display: none;
}
.Modules[_locked] > ._entries > .ModuleEntry > ._bar ._divider {
  display: none;
}
.Modules[_locked] > ._entries > .ModuleEntry > ._bar ._remove {
  display: none;
}
.Modules[_locked] > ._entries > .ModuleEntry > ._bar ._title {
  right: 10px !important;
}
.Modules[_order-locked] > ._entries > .ModuleEntry > ._bar ._handle {
  display: none;
}
.Modules[_order-locked] > ._entries > .ModuleEntry > ._bar ._divider {
  display: none;
}
.Modules[_remove-locked] > ._entries > .ModuleEntry > ._bar ._handle {
  right: 0px !important;
}
.Modules[_remove-locked] > ._entries > .ModuleEntry > ._bar ._divider {
  display: none;
}
.Modules[_remove-locked] > ._entries > .ModuleEntry > ._bar ._remove {
  display: none;
}
.Modules > ._add {
  text-align: right;
  display: none;
  position: relative;
}
.Modules > ._add .AddModule {
  color: #1B9DDE;
  cursor: pointer;
  padding-bottom: var(--spacing-none);
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
  padding-top: var(--spacing-none);
  padding-top: var(--spacing-small);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Modules > ._add .AddModule:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  background-image: url(public/main/images/icons/legacy/ActionAddSkyBlue.dcc161fa32f3de413bb5.svg);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  content: "";
  height: 15px;
  vertical-align: middle;
  width: 15px;
}
.Modules > ._add ._addDropdown {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  cursor: pointer;
  display: block;
  height: 100%;
  opacity: 0;
  padding-bottom: var(--spacing-none);
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
  padding-top: var(--spacing-none);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.ModuleEntry {
  margin-bottom: var(--spacing-small);
  --field-padding-right: 10px;
}
.ModuleEntry[_hidden] {
  display: none;
}
.ModuleEntry ._bar {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
  height: 46px;
}
.ModuleEntry ._bar .NiceCheckbox {
  height: 100%;
  position: absolute;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.ModuleEntry ._bar ._title {
  color: #3E586F;
  cursor: pointer;
  user-select: none;
  margin-bottom: var(--spacing-none);
  padding-bottom: var(--spacing-none);
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
  padding-top: var(--spacing-none);
  padding-top: var(--spacing-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  position: absolute;
  height: 100%;
  left: 10px;
  right: 80px;
  vertical-align: middle;
}
.ModuleEntry ._bar ._title:hover:after {
  opacity: 1;
}
.ModuleEntry ._bar ._title:after {
  display: inline-block;
  margin-left: var(--spacing-normal);
  background-image: url(public/main/images/icons/legacy/ArrowDownSlate.6db32b6c3c2eb283f73c.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  content: "";
  height: 22px;
  transition: opacity 100ms ease-in-out, transform 0.3s;
  vertical-align: top;
  width: 22px;
}
.ModuleEntry ._bar .NiceCheckbox + ._title {
  left: 36px;
}
.ModuleEntry ._bar ._handle {
  cursor: ns-resize;
  height: 100%;
  user-select: none;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionReorderSlate.669309e6b5be4760ce31.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  right: 40px;
  top: 0;
  width: 40px;
}
.ModuleEntry ._bar ._handle:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.ModuleEntry ._bar ._divider {
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  height: 100%;
  position: absolute;
  right: 40px;
  top: 0;
  width: 0;
}
.ModuleEntry ._bar ._remove {
  cursor: pointer;
  height: 100%;
  user-select: none;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionDeleteSlate.f9b902cb8601cde1becf.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  right: 0;
  top: 0;
  transition: opacity 100ms ease-in-out;
  width: 40px;
}
.ModuleEntry ._bar ._remove:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.ModuleEntry ._fieldsWrapper {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s;
}
.ModuleEntry ._fields {
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 1px;
  border-style: solid;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.ModuleEntry[_expanded] > ._bar {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ModuleEntry[_expanded] > ._bar ._title:after {
  transform: rotate(180deg);
}
.ModuleEntry[_expanded] > ._fieldsWrapper {
  position: static;
  max-height: none;
}
.ModuleEntry[_deactivated] ._title {
  opacity: 0.6;
  cursor: default;
}
.ModuleEntry[_deactivated] ._title:after {
  display: none;
}
.ModuleEntry .Field[_type=checkbox]:last-child {
  margin-bottom: var(--spacing-medium_small);
}

.Field[_type=conditional] .ConditionalPanel {
  opacity: 0;
  width: 100%;
  display: none;
}
.Field[_type=conditional] .ConditionalPanel:after:after {
  content: "";
  display: table;
  clear: both;
}
.Field[_type=conditional] .ConditionalPanel[_active] {
  opacity: 1;
  display: block;
}
.Field[_type=conditional] [_selector-hidden] .ConditionalPanel,
.Field[_type=conditional] .ConditionalPanel[_fields-all-hidden] {
  padding: 0;
}

.ModuleEntryLocked {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
}

.RecipientPicker {
  min-height: 506px;
}

.RecipientPickerLoading {
  background-color: rgba(28, 39, 49, 0.1);
  border-radius: 4px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 506px;
}

.ContactFilterablePickerContainer.Loaded .RecipientPickerLoading {
  display: none;
}

.SkeletonLoading {
  background-color: rgba(28, 39, 49, 0.1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-radius: 8px;
}

.FullWidthThumb {
  text-align: center;
}
.FullWidthThumb ._actions {
  padding-top: var(--spacing-medium);
}

.IconWidget {
  fill: currentColor;
  display: flex;
  flex-direction: column;
}
.IconWidget svg {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

.Header {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: -0.3px;
  margin-bottom: 24px;
}

body:not([data-old-ui]) .Header .Breadcrumbs {
  margin-top: 12px;
  color: var(--body-color);
}
body:not([data-old-ui]) .Header .Breadcrumbs ._breadcrumbs-container {
  display: flex;
  flex-wrap: wrap;
}
body:not([data-old-ui]) .Header .Breadcrumbs a {
  padding-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: normal;
  color: inherit;
}
body:not([data-old-ui]) .Header .Breadcrumbs a[href] {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
body:not([data-old-ui]) .Header .Breadcrumbs a:not([href]) {
  cursor: default;
}
body:not([data-old-ui]) .Header .Breadcrumbs ._breadcrumb:not(:last-of-type) a[href]:hover {
  color: var(--heading-color);
}
body:not([data-old-ui]) .Header .Breadcrumbs ._breadcrumb:last-of-type {
  flex: 1 1 0;
  min-width: min(160px, 100%);
}
body:not([data-old-ui]) .Header .Breadcrumbs ._breadcrumb:last-of-type a {
  max-width: 100%;
  color: var(--heading-color);
}

body[data-old-ui] [_theme=dark] .heading-container {
  color: #1C2731;
}
body[data-old-ui] [_theme=light] .heading-container {
  color: #FFFFFF;
}
body[data-old-ui] [_theme=dark] .Header .Tabs a {
  color: #5C81A3;
}
body[data-old-ui] [_theme=dark] .Header .Tabs a:hover {
  color: #1C2731;
}
body[data-old-ui] [_theme=dark] .Header .Tabs li[_active] a:after {
  background-color: #1C2731;
}
body[data-old-ui] [_theme=dark] .Header .Tabs li[_active] a {
  color: #1C2731;
}
body[data-old-ui] [_theme=dark] .Header .Tabs a ._count {
  background-color: #BECDDA;
  color: #3E586F;
}
body[data-old-ui] [_theme=dark] .Header .Tabs li[_active] ._count {
  background-color: #1C2731;
  color: #DEE6ED;
}

body[data-old-ui] .Header {
  margin-bottom: var(--spacing-large);
}
body[data-old-ui] .Header .heading-container {
  display: flex;
  align-items: center;
  max-width: 700px;
  height: 200px;
}
body[data-old-ui] .Header .heading-container h2 {
  font-size: 34px;
  line-height: 41px;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-weight: 300;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
}
body[data-old-ui] .Header .heading-container.reduce-height {
  height: 159px;
}
body[data-old-ui] .Header .constrained {
  height: 200px;
  position: relative;
}
body[data-old-ui] .Header ._logo {
  position: absolute;
  right: 0;
  top: 27px;
  max-height: 146px;
  max-width: 200px;
}
body[data-old-ui] .Header .Breadcrumbs {
  color: #3E586F;
  padding-top: 30px;
  background-color: #EFF2F6;
}
body[data-old-ui] .Header .Breadcrumbs ._breadcrumbs-container {
  height: 32px;
  margin: 0 auto;
  max-width: 1024px;
  display: flex;
  padding-top: 1px;
}
body[data-old-ui] .Header .Breadcrumbs a {
  color: #3E586F;
  border-bottom: 1px solid #edf0f4;
}
body[data-old-ui] .Header .Breadcrumbs a[href] {
  border-color: rgba(62, 88, 111, 0.3);
}
body[data-old-ui] .Header .Breadcrumbs a:hover {
  border-bottom-color: #3F576D;
}
body[data-old-ui] .Header .Tabs {
  position: absolute;
  bottom: 0;
  left: -18px;
}
body[data-old-ui] .Header .Tabs a {
  color: #BECDDA;
}
body[data-old-ui] .Header .Tabs a:hover {
  color: #FFFFFF;
}
body[data-old-ui] .Header .Tabs li[_active] a:after {
  background-color: #FFFFFF;
}
body[data-old-ui] .Header .Tabs li[_active] a {
  color: #FFFFFF;
}
body[data-old-ui] .Header .Tabs a ._count {
  background-color: #BECDDA;
  color: #3E586F;
}
body[data-old-ui] .Header .Tabs li[_active] ._count {
  background-color: #FFFFFF;
  color: #3E586F;
}

.KebabMenuButton svg {
  height: 24px;
  width: 24px;
  fill: var(--color-grey);
}
.KebabMenuButton:hover svg {
  fill: var(--color-sky_blue);
}

.KebabMenuPopover {
  --kebab-popover-callout-size: 20px;
  --kebab-popover-offset: 10px;
  margin: 0;
  inset: auto;
  top: anchor(top);
  left: calc(anchor(left) + var(--kebab-popover-callout-size) * 2 + var(--kebab-popover-offset));
  background-color: var(--color-white);
  padding: var(--spacing-normal);
  position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
  box-shadow: 1px 3px 15px 1px rgba(28, 39, 49, 0.4);
  width: 200px;
  text-align: left;
  border-radius: 6px;
  container-type: anchored;
}
.KebabMenuPopover::before {
  width: var(--kebab-popover-callout-size);
  height: var(--kebab-popover-callout-size);
  background-color: inherit;
  content: "";
  position-anchor: inherit;
  position: fixed;
  top: calc(anchor(top) + 16px);
  left: calc(anchor(left) + var(--kebab-popover-callout-size) + var(--kebab-popover-offset));
  clip-path: shape(from 100% 0, line to 100% 100%, line to 0 50%, close);
}
.KebabMenuPopover li {
  border-radius: 6px;
}
.KebabMenuPopover li:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.KebabMenuPopover li a {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: block;
  color: #1B9DDE;
  padding: 8px;
}
.KebabMenuPopover li .disabled {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: block;
  background-color: #FFFFFF;
  color: #9CB2C7;
  padding: 8px;
  cursor: not-allowed;
}

@container anchored(fallback: flip-inline) {
  .KebabMenuPopover::before {
    left: unset;
    right: calc(anchor(right) + var(--kebab-popover-callout-size) + var(--kebab-popover-offset));
    clip-path: shape(from 0 0, line to 0 100%, line to 100% 50%, close);
  }
}
@container anchored(fallback: flip-block flip-inline) {
  .KebabMenuPopover::before {
    left: unset;
    right: calc(anchor(right) + var(--kebab-popover-callout-size) + var(--kebab-popover-offset));
    clip-path: shape(from 0 0, line to 0 100%, line to 100% 50%, close);
  }
}
.Label,
.Field {
  clear: both;
  margin-bottom: 30px;
}
.Label.WithAttached,
.Field.WithAttached {
  margin-bottom: 20px;
}
.Label a,
.Field a {
  color: #1B9DDE;
}
.Label strong,
.Field strong {
  font-weight: bold;
}
.Label:last-of-type,
.Field:last-of-type {
  margin-bottom: var(--spacing-none);
}
.Label[_align=center],
.Field[_align=center] {
  text-align: center;
}
.Label[_type=error] ._title,
.Field[_type=error] ._title {
  position: relative;
}
.Label[_type=error] ._title:before,
.Field[_type=error] ._title:before {
  content: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
  position: absolute;
  margin-top: -3px;
  margin-right: 10px;
  right: 100%;
}
.Label ._title,
.Field ._title {
  color: #3E586F;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 6px;
}
.Label ._title .Badge,
.Field ._title .Badge {
  color: #1C2731;
  margin-left: 5px;
}
.Label ._description,
.Label ._instructions,
.Field ._description,
.Field ._instructions {
  color: #3E586F;
  margin-bottom: var(--spacing-normal);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: pre-wrap;
  margin-top: -5px;
}
.Label ._description p,
.Label ._instructions p,
.Field ._description p,
.Field ._instructions p {
  margin: 0 0 8px;
}
.Label ._description pre.Code,
.Label ._instructions pre.Code,
.Field ._description pre.Code,
.Field ._instructions pre.Code {
  border-radius: 4px;
  background: #f4f5f7;
  border: 1px solid #e1e4e8;
  margin: 0;
  overflow-x: auto;
  padding: 8px 10px;
  white-space: pre;
}
.Label ._description pre.Code code,
.Label ._instructions pre.Code code,
.Field ._description pre.Code code,
.Field ._instructions pre.Code code {
  color: #24292e;
  font-family: monospace;
  font-size: 12px;
}
.Label ._description pre.Code.CopyOnClick,
.Label ._instructions pre.Code.CopyOnClick,
.Field ._description pre.Code.CopyOnClick,
.Field ._instructions pre.Code.CopyOnClick {
  cursor: pointer;
  position: relative;
  transition: border-color 100ms ease-in-out;
}
.Label ._description pre.Code.CopyOnClick:hover,
.Label ._instructions pre.Code.CopyOnClick:hover,
.Field ._description pre.Code.CopyOnClick:hover,
.Field ._instructions pre.Code.CopyOnClick:hover {
  border-color: #b9bfc9;
}
.Label ._description pre.Code.CopyOnClick._copied:after,
.Label ._instructions pre.Code.CopyOnClick._copied:after,
.Field ._description pre.Code.CopyOnClick._copied:after,
.Field ._instructions pre.Code.CopyOnClick._copied:after {
  border-radius: 4px;
  background: #e6f4ea;
  color: #1a7f37;
  content: "Copied!";
  font-family: sans-serif;
  font-size: 11px;
  padding: 2px 8px;
  position: absolute;
  right: 8px;
  top: 8px;
}
.Label ._description pre.Code.CodePreview,
.Label ._instructions pre.Code.CodePreview,
.Field ._description pre.Code.CodePreview,
.Field ._instructions pre.Code.CodePreview {
  max-height: 320px;
  overflow-y: auto;
}
.Label ._value,
.Field ._value {
  color: #3E586F;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
  word-break: break-word;
}
.Label ._value .Badge,
.Field ._value .Badge {
  color: #1C2731;
  margin-left: 5px;
}
.Label ._sub_value,
.Field ._sub_value {
  color: #9CB2C7;
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
  margin-top: var(--spacing-small);
}
.Label ._noneditable_value,
.Field ._noneditable_value {
  color: #3E586F;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
}
.Label ._disabled,
.Field ._disabled {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
}
.Label ._locked,
.Field ._locked {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
}
.Label ._locked dl,
.Field ._locked dl {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  overflow: auto;
}
.Label ._locked dl dt,
.Field ._locked dl dt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3E586F;
  float: left;
  width: 35%;
}
.Label ._locked dl dd,
.Field ._locked dl dd {
  float: left;
  width: 65%;
}
.Label ._locked dl dd[_truncate],
.Field ._locked dl dd[_truncate] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Label ._footer,
.Field ._footer {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 1px;
  border-style: solid;
  color: #3E586F;
  padding-bottom: var(--spacing-normal);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: var(--spacing-normal);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: grid;
  gap: 5px;
}
.Label ._footer ._grouping,
.Field ._footer ._grouping {
  display: inline-block;
}
.Label ._footer ._count-divider,
.Field ._footer ._count-divider {
  display: inline-block;
  margin-left: 1px;
  margin-right: 2px;
}
.Label ._footer ._minimum,
.Field ._footer ._minimum {
  display: none;
}
.Label input[type=email],
.Label input[type=text],
.Label input[type=number],
.Label input[type=password],
.Field input[type=email],
.Field input[type=text],
.Field input[type=number],
.Field input[type=password] {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
}
.Label input[type=email]::placeholder,
.Label input[type=text]::placeholder,
.Label input[type=number]::placeholder,
.Label input[type=password]::placeholder,
.Field input[type=email]::placeholder,
.Field input[type=text]::placeholder,
.Field input[type=number]::placeholder,
.Field input[type=password]::placeholder {
  color: #9CB2C7;
}
.Label input[type=email]._with-footer,
.Label input[type=text]._with-footer,
.Label input[type=number]._with-footer,
.Label input[type=password]._with-footer,
.Field input[type=email]._with-footer,
.Field input[type=text]._with-footer,
.Field input[type=number]._with-footer,
.Field input[type=password]._with-footer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.Label input[type=color],
.Field input[type=color] {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
  padding-top: var(--spacing-small);
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
  height: 40px;
}
.Label textarea.LegacyTextArea,
.Field textarea.LegacyTextArea {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
  resize: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
  min-height: 8em;
}
.Label textarea.LegacyTextArea::placeholder,
.Field textarea.LegacyTextArea::placeholder {
  color: #9CB2C7;
}
.Label textarea.LegacyTextArea[_monospaced],
.Field textarea.LegacyTextArea[_monospaced] {
  font-family: monospace;
}
.Label ._prefixed, .Label ._suffixed,
.Field ._prefixed,
.Field ._suffixed {
  display: flex;
}
.Label ._prefixed input, .Label ._suffixed input,
.Field ._prefixed input,
.Field ._suffixed input {
  flex: 1;
}
.Label ._prefixed ._prefix,
.Label ._prefixed ._suffix, .Label ._suffixed ._prefix,
.Label ._suffixed ._suffix,
.Field ._prefixed ._prefix,
.Field ._prefixed ._suffix,
.Field ._suffixed ._prefix,
.Field ._suffixed ._suffix {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  display: inline-block;
  user-select: none;
  padding-bottom: var(--spacing-medium_small);
  padding-left: var(--spacing-medium_small);
  padding-right: var(--spacing-medium_small);
  padding-top: var(--spacing-medium_small);
  position: relative;
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1em;
  vertical-align: top;
}
.Label ._prefixed > input,
.Field ._prefixed > input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.Label ._prefixed > ._prefix,
.Field ._prefixed > ._prefix {
  border-right-width: 0;
  border-style: solid;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.Label ._suffixed > input,
.Field ._suffixed > input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.Label ._suffixed > ._suffix,
.Field ._suffixed > ._suffix {
  border-left-width: 0;
  border-style: solid;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.Label .DatePicker,
.Label .DateRangePicker,
.Field .DatePicker,
.Field .DateRangePicker {
  position: relative;
}
.Label .DatePicker ._display,
.Label .DateRangePicker ._display,
.Field .DatePicker ._display,
.Field .DateRangePicker ._display {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
  user-select: none;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  position: relative;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.Label .DatePicker input,
.Label .DateRangePicker input,
.Field .DatePicker input,
.Field .DateRangePicker input {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}
.Label .DatePicker[_status=filled] ._delete,
.Label .DateRangePicker[_status=filled] ._delete,
.Field .DatePicker[_status=filled] ._delete,
.Field .DateRangePicker[_status=filled] ._delete {
  display: block;
}
.Label .DatePicker ._delete,
.Label .DateRangePicker ._delete,
.Field .DatePicker ._delete,
.Field .DateRangePicker ._delete {
  cursor: pointer;
  display: none;
  height: 100%;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionDeleteSlate.f9b902cb8601cde1becf.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 22px auto;
  right: 0;
  top: 0;
  transition: opacity 100ms ease-in-out;
  width: 40px;
  z-index: 100;
}
.Label .DatePicker ._delete:hover,
.Label .DateRangePicker ._delete:hover,
.Field .DatePicker ._delete:hover,
.Field .DateRangePicker ._delete:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Label label.Radio,
.Field label.Radio {
  color: #3E586F;
  cursor: pointer;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Label label.Radio input,
.Field label.Radio input {
  opacity: 0;
  position: absolute;
}
.Label label.Radio input:checked + ._label:before,
.Field label.Radio input:checked + ._label:before {
  background-color: #1B9DDE;
}
.Label label.Radio input:disabled + ._label:before,
.Field label.Radio input:disabled + ._label:before {
  background-color: transparent;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
}
.Label label.Radio input:disabled + ._label,
.Field label.Radio input:disabled + ._label {
  color: #5C81A3;
  cursor: not-allowed;
}
.Label label.Radio:first-of-type ._label,
.Field label.Radio:first-of-type ._label {
  margin-top: var(--spacing-none);
}
.Label label.Radio ._label,
.Field label.Radio ._label {
  user-select: none;
  margin-top: var(--spacing-normal);
  position: relative;
}
.Label label.Radio ._label:before, .Label label.Radio ._label:after,
.Field label.Radio ._label:before,
.Field label.Radio ._label:after {
  margin-right: var(--spacing-normal);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 16px;
  margin-top: 2px;
  vertical-align: top;
  width: 16px;
}
.Label label.Radio ._label:before,
.Field label.Radio ._label:before {
  background-color: #FFFFFF;
  border: 0.3em solid white;
}
.Label label.Radio ._label:after,
.Field label.Radio ._label:after {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  left: 0;
  position: absolute;
  top: 0;
}
.Label label.Toggle,
.Field label.Toggle {
  cursor: pointer;
  user-select: none;
  position: absolute;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  top: 0;
  right: 0;
}
.Label label.Toggle ._display,
.Field label.Toggle ._display {
  display: inline-block;
  color: #3E586F;
  padding-right: var(--spacing-small);
  vertical-align: top;
}
.Label label.Toggle input,
.Field label.Toggle input {
  opacity: 0;
  position: absolute;
}
.Label label.Toggle input:checked + ._control,
.Field label.Toggle input:checked + ._control {
  background-color: #1B9DDE;
}
.Label label.Toggle input:checked + ._control:before,
.Field label.Toggle input:checked + ._control:before {
  left: 14px;
}
.Label label.Toggle ._control,
.Field label.Toggle ._control {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  display: inline-block;
  position: relative;
  border-radius: 16px;
  height: 16px;
  margin-top: 2px;
  transition: background 200ms ease-in-out;
  width: 30px;
  width: 30px;
}
.Label label.Toggle ._control:before,
.Field label.Toggle ._control:before {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  display: block;
  margin-right: var(--spacing-normal);
  position: absolute;
  border-radius: 16px;
  content: "";
  height: 16px;
  left: -1px;
  top: -1px;
  transition: left 200ms ease-in-out;
  width: 16px;
}
.Label ._title + .Checkbox ._label,
.Field ._title + .Checkbox ._label {
  margin-top: var(--spacing-none);
}
.Label .Checkbox,
.Field .Checkbox {
  color: #3E586F;
  cursor: pointer;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  position: relative;
}
.Label .Checkbox input,
.Field .Checkbox input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  width: 100%;
  z-index: 2;
}
.Label .Checkbox input:checked + ._label:after,
.Field .Checkbox input:checked + ._label:after {
  display: block;
}
.Label .Checkbox:first-of-type ._label,
.Field .Checkbox:first-of-type ._label {
  margin-top: var(--spacing-none);
}
.Label .Checkbox ._instructions,
.Field .Checkbox ._instructions {
  padding-left: 26px;
}
.Label .Checkbox ._label,
.Field .Checkbox ._label {
  user-select: none;
  margin-top: var(--spacing-normal);
  position: relative;
  padding-left: var(--spacing-medium_large);
  min-height: 16px;
}
.Label .Checkbox ._label:before, .Label .Checkbox ._label:after,
.Field .Checkbox ._label:before,
.Field .Checkbox ._label:after {
  border-radius: 4px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 16px;
  margin-top: 0.15em;
  vertical-align: top;
  width: 16px;
}
.Label .Checkbox ._label:before,
.Field .Checkbox ._label:before {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
}
.Label .Checkbox ._label:after,
.Field .Checkbox ._label:after {
  background-color: #1B9DDE;
  display: none;
  background-image: url(public/main/images/icons/check-white.de45b761602ad3293d01.svg);
  background-repeat: no-repeat;
  background-size: 0.6em auto;
  background-position: calc(50% - 0.05em) 50%;
}
.Label .Checkbox ._label[_label=left],
.Field .Checkbox ._label[_label=left] {
  padding-right: var(--spacing-medium_large);
  padding-left: var(--spacing-none);
}
.Label .Checkbox ._label[_label=left]:before, .Label .Checkbox ._label[_label=left]:after,
.Field .Checkbox ._label[_label=left]:before,
.Field .Checkbox ._label[_label=left]:after {
  right: 0;
  left: auto;
}

.AttachedFields {
  position: relative;
  padding-left: var(--spacing-medium);
}
.AttachedFields .Label {
  margin-bottom: var(--spacing-medium);
}
.AttachedFields .Label ._title {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 3px;
}
.AttachedFields .Label input[type=text] {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.AttachedFields:after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  content: "";
  border-color: #9CB2C7;
  border-left-width: 1px;
  border-style: solid;
  border-bottom-width: 1px;
  border-style: solid;
  border-radius: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ResourceHtml textarea {
  height: calc(90vh - 140px);
  max-height: calc(90vh - 140px);
}

.LedgerItem {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  color: #3E586F;
  padding-top: var(--spacing-medium_small);
  position: relative;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  transition: background 2000ms ease-out;
}
.LedgerItem[_new] {
  background-color: #D1ECFA;
}
.LedgerItems[_with-hub] .LedgerItem ._hub {
  color: #1B9DDE;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
}
.LedgerItems[_with-hub] .LedgerItem ._message,
.LedgerItems[_with-hub] .LedgerItem ._details {
  margin-left: 190px;
}
.LedgerItems[_with-hub] .LedgerItem ._details strong {
  display: inline-block;
  font-weight: 600;
  margin-right: var(--spacing-small);
}
.LedgerItems[_with-hub] .LedgerItem ._details li {
  margin-top: 3px;
  margin-bottom: 5px;
}
.LedgerItems[_with-hub] .LedgerItem ._details li ul {
  border-left: 1px solid #9CB2C7;
  margin-left: 5px;
  padding-left: 10px;
}
.LedgerItem ._hub {
  display: none;
  padding-top: var(--spacing-medium_small);
}
.LedgerItem ._message {
  display: block;
  padding-bottom: var(--spacing-medium_small);
  margin-right: 235px;
}
.LedgerItem ._message strong {
  color: #3E586F;
  font-weight: 600;
}
.LedgerItem ._timestamp {
  text-align: right;
  padding-top: var(--spacing-medium_small);
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: top;
  width: 235px;
}
.LedgerItem ._details {
  display: none;
  padding-bottom: var(--spacing-medium_small);
}
.LedgerItem--expanded ._details {
  display: block;
}

.NavigationBar {
  position: fixed;
  height: 100vh;
  width: var(--nav-sidebar-width);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-color);
  left: 0;
}
.NavigationBar .top, .NavigationBar .bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.NavigationBar .bottom {
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.NavigationBar .Logo {
  border-bottom: 1px solid var(--border-color);
  height: 40px;
  display: flex;
}
.NavigationBar .Logo img {
  width: 50px;
  object-fit: scale-down;
}
.NavigationBar .Popover::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--popover-background);
  transform: translateY(-50%) rotate(45deg);
}
.NavigationBar .Popover {
  position-area: right;
  background: var(--popover-background);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 6px;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 6px 18px rgba(15, 27, 62, 0.2196078431);
}
.NavigationBar .Link {
  border-radius: 9px;
  padding: 10px;
  width: 44px;
  height: 40px;
  interest-delay: 0s;
}
.NavigationBar .Link[data-active] {
  background-color: var(--nav-icon-active-background);
}
.NavigationBar .Link[data-active] svg {
  fill: var(--nav-icon-active-color);
}
.NavigationBar .Link:hover {
  background: var(--nav-icon-hover-background);
}
.NavigationBar .Link svg {
  fill: var(--nav-icon-color);
  width: 22px;
  height: 22px;
}
.NavigationBar .Link:has(> .NavCount) {
  position: relative;
}
.NavigationBar .NavCount {
  position: absolute;
  top: 4px;
  left: 24px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--notifications-count-color);
  color: #fff;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.NavigationBar .UserNotifications {
  height: 40px;
  width: 44px;
  display: flex;
  justify-content: space-around;
}
.NavigationBar .UserNotifications:has(> [data-notifications-empty]) {
  display: none;
}

.AdminSecondLevelMenu {
  transition: display 300ms allow-discrete;
  display: none;
  width: 200px;
  height: 100vh;
  top: 0;
  left: var(--nav-sidebar-width);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--border-color);
  box-shadow: rgba(15, 27, 62, 0.12) 14px 0px 40px;
  z-index: 10;
  flex-direction: column;
  opacity: 0;
  transition: opacity 300ms, display 300ms allow-discrete, overlay 300ms allow-discrete;
  overflow: hidden;
}
.AdminSecondLevelMenu:popover-open {
  display: flex;
  opacity: 0.95;
}
@starting-style {
  .AdminSecondLevelMenu:popover-open {
    opacity: 0;
  }
}
.AdminSecondLevelMenu .AdminHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 18px;
  flex: 0 0 40px;
  border-bottom: 1px solid var(--border-color);
}
.AdminSecondLevelMenu .AdminHeader svg {
  width: 18px;
}
.AdminSecondLevelMenu .AdminHeader + .AdminGroup,
.AdminSecondLevelMenu .AdminHeader + .AdminGroups > .AdminGroup:first-child {
  border-top: 0;
}
.AdminSecondLevelMenu h2, .AdminSecondLevelMenu h3 {
  font-weight: 600;
  color: var(--heading-color);
  padding: 0px 18px 4px;
}
.AdminSecondLevelMenu h2 {
  font-size: 15px;
}
.AdminSecondLevelMenu h3 {
  font-size: 13.5px;
}
.AdminSecondLevelMenu .AdminGroups {
  overflow-y: auto;
}
.AdminSecondLevelMenu .AdminGroup {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.AdminSecondLevelMenu .AdminGroup a {
  font-size: 13px;
  font-weight: 400;
  color: var(--body-color);
  text-decoration: none;
  line-height: 1.4;
  padding: 4px 18px;
}
.AdminSecondLevelMenu .AdminGroup a:hover {
  background-color: var(--color-silver);
}
.AdminSecondLevelMenu .AdminGroup a[aria-current] {
  background-color: var(--nav-icon-active-background);
  color: var(--nav-icon-active-color);
  font-weight: 500;
}

body[data-old-ui] .NavigationBar {
  padding: unset;
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 1001;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: unset;
  height: unset;
  flex-direction: unset;
}
body[data-old-ui] .NavigationBar .AdminSecondLevelMenu {
  transition: unset;
  width: unset;
}
body[data-old-ui] .NavigationBar .LinksContainer {
  width: 1060px;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links {
  display: unset;
  flex-direction: unset;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: inline-flex;
  height: 70px;
  position: relative;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li:hover .Link {
  color: #1B9DDE;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li[_active] .Link:after {
  content: "";
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1B9DDE;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li[_active] .Link {
  color: #1B9DDE;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li .Link {
  display: inline-flex;
  align-items: center;
  color: #1C2731;
  padding-left: 18px;
  padding-right: 18px;
  width: unset;
  height: unset;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li .Link .Count {
  position: relative;
  width: 26px;
  height: 11px;
  margin-right: 10px;
  margin-top: -1px;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li .Link .Count .CountNumber {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1B9DDE;
  color: #FFFFFF;
  width: 26px;
  height: 26px;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items {
  display: inline-flex;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items .Drop {
  top: 82px;
  left: 0;
  width: 260px;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items .Drop li {
  display: block;
  height: auto;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items .Drop li a {
  color: #3E586F;
  padding: 8px;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items .Drop li a:after {
  display: none;
}
body[data-old-ui] .NavigationBar .LinksContainer .Links li ._items .Drop .Pointer {
  left: 10px;
}
body[data-old-ui] .NavigationBar .User {
  position: absolute;
  height: 70px;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20px;
}
body[data-old-ui] .NavigationBar .User .Icon svg path {
  fill: var(--color-slate);
}
body[data-old-ui] .NavigationBar .UserNotifications {
  height: unset;
  width: unset;
  display: unset;
  justify-content: unset;
}
@media (max-width: 1600px) {
  body[data-old-ui] .NavigationBar .User .Profile .Name {
    display: none;
  }
}
@media (max-width: 1100px) {
  body[data-old-ui] .NavigationBar .User {
    position: relative;
  }
}
body[data-old-ui] .NavigationBar .HelpButton {
  background-color: transparent;
  margin-right: var(--spacing-medium);
}

.NiceCheckbox {
  display: inline-block;
  position: relative;
}
.NiceCheckbox input {
  visibility: hidden;
  position: absolute;
}
.NiceCheckbox input + label:before {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  vertical-align: -2px;
  content: "";
  width: 16px;
  height: 16px;
}
.NiceCheckbox input:checked + label:before {
  background-color: #1B9DDE;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  background-image: url(public/main/images/icons/check-white.de45b761602ad3293d01.svg);
  background-repeat: no-repeat;
  background-size: 10.2px auto;
  background-position: 2.5px 4px;
}

.Notifications {
  margin-bottom: var(--spacing-large);
}

.Notification {
  background-color: #FFFFFF;
  color: #3E586F;
  margin-bottom: var(--spacing-small);
  padding-bottom: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  padding-left: 60px;
}
.Notification:last-of-type {
  margin-bottom: var(--spacing-none);
}
.Notification[_type=success] {
  background-image: url(public/main/images/icons/legacy/StatusAlertSuccessSlate.3267193c2d25c9b663c4.svg);
}
.Notification[_type=error] {
  background-color: #FFE6B3;
  background-image: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
}
.Notification[_type=warning] {
  background-color: #FFE6B3;
  padding-left: var(--spacing-medium);
  padding-top: 40px;
  background-image: url(public/main/images/icons/legacy/StatusAlertSlate.5af4046dc9b37ca5c4f1.svg);
  background-size: 24px 24px;
  background-position: 50% 0;
}
.Notification[_type=warning] div {
  padding-top: var(--spacing-medium);
}
.Notification[_type=warning] div label {
  padding-left: 6px;
}

.Pagination {
  padding-top: 60px;
  padding-bottom: 20px;
}
.Pagination .PaginationContainer {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: var(--spacing-medium);
  display: flex;
  justify-content: center;
}
.Pagination .PaginationContainer a {
  background-color: #FFFFFF;
  color: #3E586F;
  user-select: none;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-right-width: 0;
  border-style: solid;
  border-color: #9CB2C7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
}
.Pagination .PaginationContainer a:first-child {
  border-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.Pagination .PaginationContainer a:last-child {
  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-right-width: 1px;
  border-style: solid;
}
.Pagination .PaginationContainer a:not(.Disabled):not(.PaginationCurrent):hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Pagination .PaginationContainer .PaginationFirst {
  background-image: url(public/main/images/pagination/first-dark-grey.761678d11b5ee60c56a0.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 18px 9px;
}
.Pagination .PaginationContainer .PaginationFirst.PaginationDisabled {
  background-image: url(public/main/images/pagination/first-medium-grey.dc49a37d6e6349fcfce5.svg);
  cursor: not-allowed;
}
.Pagination .PaginationContainer .PaginationPrev {
  background-image: url(public/main/images/icons/legacy/EventPrevSlate.62cd4a6867ba6fd7bcab.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 18px 9px;
}
.Pagination .PaginationContainer .PaginationPrev.PaginationDisabled {
  background-image: url(public/main/images/icons/legacy/EventPrevGrey.85c66d84879770b1ca4a.svg);
  cursor: not-allowed;
}
.Pagination .PaginationContainer .PaginationNext {
  background-image: url(public/main/images/icons/legacy/EventNextSlate.d9fcf68f1a458f41fcab.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 18px 9px;
}
.Pagination .PaginationContainer .PaginationNext.PaginationDisabled {
  background-image: url(public/main/images/icons/legacy/EventNextGrey.49642993a50222f05f3d.svg);
  cursor: not-allowed;
}
.Pagination .PaginationContainer .PaginationLast {
  background-image: url(public/main/images/pagination/last-dark-grey.3f7d2adb30da55e949c8.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 18px 9px;
}
.Pagination .PaginationContainer .PaginationLast.PaginationDisabled {
  background-image: url(public/main/images/pagination/last-medium-grey.ac8534911ae30be9978e.svg);
  cursor: not-allowed;
}
.Pagination .PaginationContainer .PaginationPage.PaginationCurrent {
  background-color: #3E586F;
  color: #FFFFFF;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
}
.Pagination .PaginationContainer .PaginationPage.PaginationCurrent + .PaginationPage, .Pagination .PaginationContainer .PaginationPage.PaginationCurrent + .PaginationNext {
  border-left-width: 0;
  border-style: solid;
}
.Pagination .PaginationStatus {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #3E586F;
  text-align: center;
}

.Previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--spacing-medium);
}
.Previews .Empty {
  grid-column: 1/-1;
}
.Previews[_loading] .Preview {
  opacity: 0.4;
}

.Preview {
  display: grid;
  gap: var(--spacing-medium);
  grid-template-areas: "content";
  background-color: var(--color-white);
  position: relative;
  border-radius: 8px;
}
.Preview:hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.3);
  transition: background-color 100ms ease-in-out, box-shadow 100ms ease-in-out;
}
.Preview .PreviewContent {
  grid-area: content;
  display: grid;
  grid-template-columns: 30% 1fr min-content;
  gap: var(--spacing-medium);
  --preview-content-height: 110px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Preview .PreviewContent ._primary {
  align-self: center;
}
.Preview .PreviewContent > .Options,
.Preview .PreviewContent > .PreviewKebab {
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
}
.Preview .PreviewContent ._thumbnail {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-top-left-radius: var(--radius-x-large);
  border-bottom-left-radius: var(--radius-x-large);
  padding: 4px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Preview .PreviewContent ._thumbnail .ThumbnailContainer {
  color: #3E586F;
}
.Preview .PreviewContent ._thumbnail .ThumbnailContainer img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  aspect-ratio: 1;
}
.Preview .PreviewContent ._title {
  color: #1C2731;
  margin-bottom: var(--spacing-small);
  word-break: break-word;
  overflow: hidden;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.Preview .PreviewContent ._title:hover {
  text-decoration: underline !important;
}
.Preview .PreviewContent p {
  color: #3E586F;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  overflow: hidden;
  max-height: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.Preview .PreviewContent .BadgeContainer {
  margin-top: var(--spacing-small);
}
.Preview .PreviewCheckbox {
  grid-area: checkbox;
  position: absolute;
  left: 10px;
  top: 10px;
}

body[data-old-ui] .PreviewContent {
  grid-template-columns: var(--preview-content-height) 1fr min-content;
  border-radius: 8px;
}
body[data-old-ui] .PreviewContent:hover {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.3);
}
body[data-old-ui] .Preview {
  background-color: unset;
  padding: unset;
  transition: unset;
}
body[data-old-ui] .Preview:hover {
  background-color: unset;
  box-shadow: unset;
}

.Quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--spacing-medium);
}
.Quicklinks a {
  position: relative;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 6px;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  display: inline-flex;
  justify-content: left;
  align-items: center;
  height: 90px;
  transition: background 100ms ease-in-out;
  vertical-align: top;
  height: 90px;
}
[_theme=dark] .Quicklinks a {
  color: #1C2731;
}
[_theme=dark] .Quicklinks a:before {
  background-image: url(public/main/images/quicklink-circle-dark.c1db751d767b199d9fe8.svg);
}
[_theme=dark] .Quicklinks a[_all]:before {
  background-image: url(public/main/images/quicklink-all-dark.63843abcf362e52c233b.svg);
}
[_theme=light] .Quicklinks a {
  color: #FFFFFF;
}
[_theme=light] .Quicklinks a:before {
  background-image: url(public/main/images/quicklink-circle-light.5a57bb7030915a10c7ee.svg);
}
[_theme=light] .Quicklinks a[_all]:before {
  background-image: url(public/main/images/quicklink-all-light.802ca337c956e7c543d6.svg);
}
.Quicklinks a:hover::after {
  background: rgba(156, 178, 199, 0.15);
}
.Quicklinks a[_all]:before {
  content: "";
}
.Quicklinks a:before {
  text-align: center;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  content: attr(_initial);
  font-size: 22px;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Quicklinks a:after {
  position: absolute;
  border-radius: 6px;
  inset: 0;
  transition: background 100ms ease-in-out;
  content: "";
}
.Quicklinks a ._text {
  padding-left: var(--spacing-normal);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
  min-width: 0;
}
.Quicklinks.launch-studio a {
  background-color: #2D3F50;
}

.Referenced {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Referenced ._references {
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  margin-top: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 4px;
  overflow: hidden;
}
.Referenced ._references[_multiple] ._reference {
  width: calc(25% - 8px);
}
.Referenced ._references[_multiple] ._reference:nth-child(4n) {
  margin-right: 0;
}
.Referenced ._references.NoBorder {
  border: 0;
  padding: 0;
}
.Referenced ._reference {
  border-color: #3E586F;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  border-radius: 4px;
  margin-bottom: var(--spacing-normal);
  margin-right: var(--spacing-normal);
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-small);
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Referenced ._pill {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  color: #3E586F;
  padding-bottom: var(--spacing-small);
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
  padding-top: var(--spacing-small);
  text-align: center;
  display: inline-block;
  border-radius: 1000px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  height: 18px;
  line-height: 18px;
  margin-left: 4px;
  float: right;
  margin-top: -1px;
  padding: 0 5px;
  vertical-align: top;
}
.Referenced.Conditional {
  margin-top: var(--spacing-medium);
}
.Referenced.Conditional ._references {
  display: none;
}
.Referenced.Conditional._visible ._references {
  display: block;
}

.Spinner {
  text-align: center;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  position: relative;
  user-select: none;
  height: 40px;
  margin-left: -27px;
  margin-top: -20px;
  padding-top: 26px;
  transition: opacity 300ms ease-in-out;
  min-width: 54px;
  z-index: 2000;
}
.Spinner:before {
  display: block;
  position: absolute;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: animation_spin;
  animation-timing-function: linear;
  background-image: url(public/main/images/icons/legacy/EventLoadingWhite.e5953adf6622e8f65df0.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  content: "";
  height: 24px;
  left: calc(50% - 12px);
  top: 0;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  width: 24px;
}

@keyframes animation_spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.SystemBar {
  text-align: left;
  background-color: #3E586F;
  color: #FFFFFF;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  height: 40px;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
}
.SystemBar ._nameplate {
  color: #FFFFFF;
  display: inline-block;
  margin-right: var(--spacing-large);
}
.SystemBar ._message {
  display: inline-block;
}
.SystemBar ._user {
  text-align: right;
  display: block;
  margin-top: var(--spacing-normal);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  position: absolute;
  background-image: url(public/main/images/icons/legacy/FileUserWhite.5e75f221bf917d5d2f4a.svg);
  background-repeat: no-repeat;
  background-size: 15px 20px;
  right: 0;
  top: 0;
}

.SystemUser {
  text-align: right;
  color: #FFFFFF;
  display: block;
  margin-top: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background-image: url(public/main/images/icons/legacy/FileUserWhite.5e75f221bf917d5d2f4a.svg);
  background-repeat: no-repeat;
  background-size: 15px 15px;
  right: 0;
}

.Tabs li {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: inline-flex;
  height: 70px;
  position: relative;
}
.Tabs li[_active] a:after {
  content: "";
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
}
.Tabs a {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  padding-left: 18px;
  padding-right: 18px;
}
.Tabs a ._count {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.Tabs li:first-child:nth-last-child(n+6),
.Tabs li:first-child:nth-last-child(n+6) ~ li {
  font-size: 14px;
}

.StudioTabs li:first-child:nth-last-child(n+6),
.StudioTabs li:first-child:nth-last-child(n+6) ~ li {
  font-size: 14px;
}

.TemplateDetails {
  padding: 30px 0 30px 30px;
  background-color: #FFFFFF;
}
.TemplateDetails ._column {
  display: inline-block;
  width: 50%;
  text-align: center;
  vertical-align: middle;
}
.TemplateDetails ._details {
  padding: 30px;
}
.TemplateDetails ._thumb img {
  width: auto;
  height: auto;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  max-width: 310px;
  max-height: 350px;
}
.TemplateDetails ._name {
  color: #1C2731;
  padding-bottom: var(--spacing-medium);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.TemplateDetails ._type {
  color: #3E586F;
  padding-bottom: var(--spacing-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.TemplateDetails ._metadata {
  padding-bottom: var(--spacing-medium);
}
.TemplateDetails ._metadata-header {
  color: #3E586F;
  padding-bottom: var(--spacing-small);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.TemplateDetails ._metadata-body {
  color: #9CB2C7;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.TemplateDetails ._description {
  color: #9CB2C7;
  padding-bottom: var(--spacing-medium);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.TemplateUpload ._step {
  color: #3E586F;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.TemplateUpload .Container .Heading {
  margin-bottom: 6px;
}
.TemplateUpload ._intro {
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 24px;
}
.TemplateUpload ._instructions {
  margin-bottom: 12px;
}
.TemplateUpload code {
  border-radius: 4px;
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  font-family: monospace;
  font-size: 12px;
  padding: 1px 5px;
  white-space: nowrap;
}
.TemplateUpload .Columns ._alternative {
  border-color: #9CB2C7;
  border-left-style: solid;
  border-left-width: 1px;
  padding-left: 40px;
}
.TemplateUpload ._files,
.TemplateUpload .YamlPreview {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #1C2731;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: 8px 10px;
}
.TemplateUpload ._files li {
  white-space: nowrap;
}
.TemplateUpload ._options {
  border-color: #9CB2C7;
  border-top-style: solid;
  border-top-width: 1px;
  margin-top: 24px;
  padding-top: 20px;
}
.TemplateUpload ._options ._instructions {
  margin: 6px 0 0;
  padding-left: 26px;
}

body:not([data-old-ui]) .TemplateUpload + .ConfirmBar {
  margin-top: 40px;
}

.TermsContainer ._container {
  margin: 0 auto;
  width: 60vw;
}
.TermsContainer ._content {
  position: relative;
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  padding: 20px 40px;
  min-height: 60vh;
  overflow-y: scroll;
}
.TermsContainer ._content .Title {
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  margin-bottom: 20px;
  font-weight: 400;
}

.TermsContainer__checkbox {
  text-align: center;
  margin-top: var(--spacing-large);
  position: relative;
}
.TermsContainer__checkbox ._label {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  padding-left: 6px;
  letter-spacing: -0.03em;
}

.TermsContainer__continue {
  text-align: center;
  margin-top: var(--spacing-medium);
  position: relative;
}
.TermsContainer__continue .Button {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-weight: normal;
  width: 200px;
}

:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

:root {
  --spacing-double_large: 80px;
  --spacing-larger: 60px;
  --spacing-large: 40px;
  --spacing-medium_large: 25px;
  --spacing-medium: 20px;
  --spacing-medium_small: 15px;
  --spacing-normal: 10px;
  --spacing-small: 5px;
  --spacing-fine: 1px;
  --spacing-none: 0;
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.Text {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  max-width: 502px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Text[_extended] {
  max-width: 675px;
}
.Text[_full] {
  max-width: 100%;
}
.Text[_align=center] {
  text-align: center;
}
.Text a {
  color: #1B9DDE;
}
.Text a:hover {
  text-decoration: underline !important;
}
.Text strong {
  font-weight: 600;
}
.Text p,
.Text ul,
.Text ol {
  margin-bottom: var(--spacing-normal);
}
.Text ul {
  list-style-position: outside;
  list-style-type: disc;
}
.Text ol {
  list-style-position: outside;
  list-style-type: decimal;
}
.Text dl[_stacked] dt {
  width: auto;
  float: none;
}
.Text dl[_stacked] dd {
  margin-left: 0;
}
.Text dl dt {
  color: #3E586F;
  margin-bottom: var(--spacing-small);
  float: left;
  width: 140px;
}
.Text dl dd {
  margin-bottom: var(--spacing-small);
  margin-left: 150px;
}
.Text ._list {
  display: block;
  margin-bottom: var(--spacing-medium);
}
.Text ._list span {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  padding-right: 10px;
}

.Textarea {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #3E586F;
  overflow: hidden;
  border-radius: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  width: 100%;
}
.Textarea::placeholder {
  color: #9CB2C7;
}
.Textarea._with-footer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.Textarea ._toolbar {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  overflow: hidden;
  position: relative;
  height: 27px;
}
.Textarea ._toolbar ._expand {
  position: absolute;
  height: 27px;
  line-height: 26px;
  right: 10px;
}
.Textarea textarea {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  display: block;
}
.Breakout .Textarea ._toolbar {
  display: none;
}
.Breakout .Textarea textarea {
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  height: 50vh;
  max-height: 650px;
}

.Uploader {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  color: #9CB2C7;
  overflow: hidden;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 11px;
  padding-bottom: 11px;
  position: relative;
  border-radius: 4px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
}
._control--with-crop .Uploader {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.Uploader[_status=filled] {
  color: #3E586F;
}
.Uploader[_status=filled] input[type=file] {
  display: none;
}
.Uploader[_status=filled] ._button {
  display: none;
}
.Uploader[_status=filled] ._delete {
  display: block;
}
.Uploader[_status=uploading] {
  animation: pulse 2s infinite;
}
.Uploader[_status=uploading] input[type=file] {
  display: none;
}
.Uploader[_status=uploading] ._status {
  display: block;
}
.Uploader[_status=uploading] ._button {
  display: none;
}
.Uploader[_status=uploading] ._delete {
  display: none;
}
.Uploader[_status=uploading] ._filename {
  display: none;
}
.Uploader ._file {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  font-size: 100px;
  right: 0;
  top: 0;
  z-index: 10;
}
.Uploader ._button {
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionUploadSlate.693950b482c4a48e64f9.svg);
  background-position: 50% 11px;
  background-repeat: no-repeat;
  bottom: 0;
  right: 16px;
  top: 0;
  width: 22px;
}
.Uploader ._delete {
  cursor: pointer;
  display: none;
  height: 100%;
  position: absolute;
  background-image: url(public/main/images/icons/legacy/ActionDeleteSlate.f9b902cb8601cde1becf.svg);
  background-position: 50% 11px;
  background-repeat: no-repeat;
  background-size: 22px auto;
  right: 0;
  top: 0;
  transition: opacity 100ms ease-in-out;
  width: 40px;
}
.Uploader ._delete:hover {
  opacity: 1;
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Uploader ._status {
  display: none;
}
.Uploader ._asset {
  margin-bottom: var(--spacing-none);
}
.Uploader ._asset:before {
  display: inline-block;
  background-image: url(public/main/images/icons/legacy/FileGenericSlate.7751ea1492d6f7003a8b.svg);
  background-repeat: no-repeat;
  content: "";
  height: 24px;
  vertical-align: middle;
  width: 26px;
}
.Uploader ._asset ._filename {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: rgba(62, 88, 111, 0.3);
  color: #3E586F;
  display: inline-block;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 100px);
  vertical-align: top;
}
.Uploader ._previewImage {
  margin-top: var(--spacing-normal);
  max-width: 100%;
  max-height: 400px;
}
.Uploader ._previewImage:not([src]),
.Uploader ._previewImage[src=""] {
  display: none;
}

@keyframes pulse {
  0%, 50%, 100% {
    background-color: rgba(27, 157, 222, 0.1);
  }
  25% {
    background-color: #FFFFFF;
  }
}
.VariationThumbnail {
  width: 100px;
  height: 100px;
}
.VariationThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.VariationIcon {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  bottom: 10px;
  left: 10px;
  background-position: center;
  background-image: url(public/main/images/icons/legacy/EventVariationsSlate.58b5d7eed9acc6cce2da.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  z-index: 10;
}

.Section {
  margin-bottom: var(--spacing-larger);
  position: relative;
}
.Section h2 {
  color: #3E586F;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 30px;
}
.Section h3 {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.Section [_position=top-right] {
  position: absolute;
  top: 0;
  right: 0;
}
.Section [_margin=none] {
  margin-bottom: 0;
}
.Section[_align-content=center] {
  text-align: center;
}
.Section header {
  display: flex;
  justify-content: space-between;
}
.Section header h3 {
  min-width: 200px;
}
.Section header a {
  color: #1B9DDE;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 23px;
}
.Section header a:hover {
  text-decoration: underline !important;
}

.Section.BottomHalfMargin {
  margin-bottom: 30px;
}

.SubSection {
  margin-bottom: var(--spacing-large);
}
.SubSection:after {
  clear: both;
  content: "";
  display: block;
}

.ViewerAlert {
  text-align: left;
  background-color: #FFC040;
  color: #3E586F;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 30px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.ViewerAlert[_variation=light] {
  background-color: #FFC040;
}
.ViewerAlert[_variation=dark] {
  background-color: #FF794F;
  color: #FFFFFF;
}
.ViewerAlert[_variation=dark] a {
  color: #FFFFFF;
}
.ViewerAlert[_variation=darker] {
  background-color: #FF794F;
  color: #FFFFFF;
}
.ViewerAlert[_variation=darker] a {
  color: #FFFFFF;
}
.ViewerAlert ._message {
  display: inline-block;
}
.ViewerAlert ._message strong {
  font-weight: bold;
}
.ViewerAlert ._action {
  text-align: right;
  display: block;
  margin-top: var(--spacing-normal);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  position: absolute;
  right: 0;
  top: 0;
}
.ViewerAlert[_variation=red] {
  background-color: #FFC5B3;
  color: #1C2731;
}
.ViewerAlert a {
  color: #3E586F;
  cursor: pointer;
  text-decoration: underline !important;
}
.ViewerAlert a[_launch-modal=changelog] {
  padding-left: 4px;
}

.ViewerShell {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.YamlPreview {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-family: monospace;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.YamlPreview.Long {
  max-height: 100em;
}
.YamlPreview.Unlimited {
  max-height: none;
}

.BulkSelectAllLabel {
  cursor: pointer;
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin-right: auto;
  margin-left: 10px;
}
.BulkSelectAllLabel input[type=checkbox] {
  cursor: pointer;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  position: relative;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
}
.BulkSelectAllLabel input[type=checkbox]:hover {
  border-color: #3E586F;
}
.BulkSelectAllLabel input[type=checkbox]:checked, .BulkSelectAllLabel input[type=checkbox]:indeterminate {
  background-color: #1B9DDE;
  border-color: #1B9DDE;
}
.BulkSelectAllLabel input[type=checkbox]:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.BulkSelectAllLabel input[type=checkbox]:indeterminate:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}

[data-view-admin-list] {
  width: 100%;
  color: #3E586F;
}
[data-view-admin-list] a {
  color: #3E586F;
  cursor: pointer;
}
[data-view-admin-list][_loading] .AdminListRow {
  opacity: 0.4;
}
[data-view-admin-list] ._column {
  position: relative;
  display: flex;
  align-items: center;
  word-break: break-word;
  width: 160px;
  justify-content: flex-end;
  white-space: pre-line;
}
[data-view-admin-list] ._column:first-of-type {
  justify-content: flex-start;
  flex: 1;
  min-width: 460px;
  padding-left: 10px;
}
[data-view-admin-list] ._column:first-of-type._thumb {
  padding-left: 0;
}
[data-view-admin-list] ._column:last-of-type {
  padding-right: 10px;
}
[data-view-admin-list] ._column._half {
  width: 80px;
}
[data-view-admin-list] ._column._extended {
  width: 240px;
}
[data-view-admin-list] ._column._double {
  width: 480px;
}
[data-view-admin-list] ._column._action {
  width: 70px;
  padding-right: 0;
}
[data-view-admin-list] ._column:empty:not(._action) {
  display: none;
}
[data-view-admin-list] .AdminListHeader {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #FFFFFF;
}
[data-view-admin-list] .AdminListHeader .Columns {
  display: flex;
  width: 100%;
  padding-right: 55px;
}
[data-view-admin-list] .AdminListHeader[_paginate-sort-direction=asc] ._column ._sort:after {
  background-image: url(public/main/images/icons/legacy/ArrowUpSlate.b6328d03b8cdcbb6ffa9.svg);
}
[data-view-admin-list] .AdminListHeader[_paginate-sort-direction=desc] ._column ._sort:after {
  background-image: url(public/main/images/icons/legacy/ArrowDownSlate.6db32b6c3c2eb283f73c.svg);
}
[data-view-admin-list] .AdminListHeader ._column {
  margin-bottom: var(--spacing-medium_small);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
[data-view-admin-list] .AdminListHeader ._column:first-of-type._thumb {
  padding-left: 67px;
}
[data-view-admin-list] .AdminListHeader ._column a:not(._sort) {
  cursor: default;
}
[data-view-admin-list] .AdminListHeader ._column ._sort:hover {
  text-decoration: underline !important;
}
[data-view-admin-list] .AdminListHeader ._column ._sort[_active] {
  font-weight: 600;
}
[data-view-admin-list] .AdminListHeader ._column ._sort[_active]:after {
  display: inline-block;
  margin-left: var(--spacing-small);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  vertical-align: middle;
  content: "";
  width: 20px;
  height: 20px;
}
[data-view-admin-list] .AdminListRow {
  position: relative;
  width: 100%;
}
[data-view-admin-list] .AdminListRow.Selected .Columns:before, [data-view-admin-list] .AdminListRow.Selected .Columns:after, [data-view-admin-list] .AdminListRow:hover .Columns:before, [data-view-admin-list] .AdminListRow:hover .Columns:after {
  position: absolute;
  top: 0;
  height: 55px;
  width: 8px;
  content: "";
}
[data-view-admin-list] .AdminListRow.Selected .Columns:before, [data-view-admin-list] .AdminListRow:hover .Columns:before {
  left: -8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
[data-view-admin-list] .AdminListRow.Selected .Columns:after, [data-view-admin-list] .AdminListRow:hover .Columns:after {
  right: -8px;
  width: 63px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
[data-view-admin-list] .AdminListRow.Selected .Columns {
  background-color: #D1ECFA;
}
[data-view-admin-list] .AdminListRow.Selected .Columns:before, [data-view-admin-list] .AdminListRow.Selected .Columns:after {
  background-color: #D1ECFA;
}
[data-view-admin-list] .AdminListRow:hover .Columns {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
[data-view-admin-list] .AdminListRow:hover .Columns:before, [data-view-admin-list] .AdminListRow:hover .Columns:after {
  background-color: #DEE6ED;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
[data-view-admin-list] .AdminListRow:hover .Columns ._column ._information ._title {
  text-decoration: underline !important;
}
[data-view-admin-list] .AdminListRow.Selected .ActionsContainer, [data-view-admin-list] .AdminListRow:hover .ActionsContainer {
  display: block;
}
[data-view-admin-list] .AdminListRow .Columns {
  display: flex;
  align-items: center;
  height: 56px;
  width: 100%;
  padding-right: 55px;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: #FFFFFF;
}
[data-view-admin-list] .AdminListRow .Columns ._column {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: right;
  height: 56px;
}
[data-view-admin-list] .AdminListRow .Columns ._column:first-child ._container {
  width: 100%;
}
[data-view-admin-list] .AdminListRow .Columns ._column:first-child ._container ._information {
  max-width: calc(100% - 67px);
}
[data-view-admin-list] .AdminListRow .Columns ._column:first-child ._container ._information ._title {
  width: 100%;
}
[data-view-admin-list] .AdminListRow .Columns ._column .Contents {
  max-height: 32px;
  overflow: hidden;
  width: 100%;
  padding-left: 20px;
}
[data-view-admin-list] .AdminListRow .Columns ._column .Contents .clamp-ellipsis.is-not-required {
  display: none;
}
[data-view-admin-list] .AdminListRow .Columns ._column .Contents a,
[data-view-admin-list] .AdminListRow .Columns ._column ._description a {
  color: #1B9DDE;
}
[data-view-admin-list] .AdminListRow .Columns ._column .Contents a:hover,
[data-view-admin-list] .AdminListRow .Columns ._column ._description a:hover {
  text-decoration: underline !important;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._container {
  display: flex;
  align-items: center;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._information {
  display: inline-block;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._information a._title {
  color: #1C2731;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-align: left;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 22px;
  width: 100%;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._information ._description {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--spacing-small);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 16px;
  width: 300px;
  max-width: 100%;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._thumbnail {
  margin-left: var(--spacing-small);
  margin-right: var(--spacing-medium);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  max-width: 42px;
  max-height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 2px;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._thumbnail img {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-style: solid;
  border-color: #FFFFFF;
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 38px;
  max-height: 38px;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._thumbnail._duplicating a,
[data-view-admin-list] .AdminListRow .Columns ._column ._thumbnail._duplicating img {
  visibility: hidden;
}
[data-view-admin-list] .AdminListRow .Columns ._column ._thumbnail._duplicating:after {
  animation: animation_spin 1s linear infinite;
  background-image: url(public/main/images/icons/legacy/EventLoadingSlate.835b7c62a01887a8a455.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: "";
  height: 20px;
  left: calc(50% - 10px);
  position: absolute;
  top: calc(50% - 10px);
  width: 20px;
}
[data-view-admin-list] .AdminListRow .ActionsContainer {
  position: absolute;
  display: block;
  width: 55px;
  top: 0;
  right: 0;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .KebabMenuButton {
  width: 100%;
  height: 56px;
  background-position: 15px;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .Drop {
  top: 50%;
  transform: translateY(-50%);
  right: -200px;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .Drop a.Disabled {
  color: #9CB2C7;
  cursor: not-allowed;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer {
  width: 14px;
  height: 28px;
  top: 50%;
  transform: translateY(-50%);
  right: 200px;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer:before {
  border-color: transparent white transparent transparent;
  border-width: 12px 12px 12px 0px;
}
[data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer:after {
  right: 2px;
  border-color: transparent rgba(63, 87, 109, 0.04) transparent transparent;
  border-width: 14px 14px 14px 0px;
}
@media (max-width: 1280px) {
  [data-view-admin-list] .AdminListRow .ActionsContainer .Drop {
    right: 55px;
    left: auto;
  }
  [data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer {
    right: -14px;
    left: auto;
  }
  [data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer:before {
    right: 2px;
    border-color: transparent transparent transparent white;
    border-width: 12px 0 12px 12px;
  }
  [data-view-admin-list] .AdminListRow .ActionsContainer .Drop .Pointer:after {
    right: -2px;
    border-color: transparent transparent transparent rgba(63, 87, 109, 0.04);
    border-width: 14px 0 14px 14px;
  }
}
@media (max-width: 1200px) {
  [data-view-admin-list] ._column:first-of-type {
    min-width: 320px;
  }
}
@media (max-width: 1100px) {
  [data-view-admin-list] .Columns ._column:nth-child(n+5) {
    display: none;
  }
}
@media (max-width: 980px) {
  [data-view-admin-list] .Columns ._column:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 820px) {
  [data-view-admin-list] .Columns ._column:nth-child(n+3) {
    display: none;
  }
  [data-view-admin-list] ._column:first-of-type {
    min-width: 0;
  }
}
@media (max-width: 600px) {
  [data-view-admin-list] .Columns ._column:nth-child(n+2) {
    display: none;
  }
}
[data-view-admin-list] [_paginate-results] {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 100ms;
}
[data-view-admin-list] [_paginate-results].History--replacing {
  opacity: 0.5;
}
[data-view-admin-list][_loading] .Preview {
  opacity: 0.4;
}
[data-view-admin-list] .AdminListHeaderBar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 36px;
  margin-top: -25px;
  margin-bottom: 40px;
}
[data-view-admin-list]._bulk .AdminListHeader {
  position: relative;
  margin-left: 40px;
}
[data-view-admin-list]._bulk .AdminListRowContainer {
  padding-left: 40px;
}
[data-view-admin-list] .AdminListHeaderCheckbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -40px;
  top: 0;
  bottom: 15px;
  width: 40px;
}
[data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox] {
  cursor: pointer;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  position: relative;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
}
[data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox]:hover {
  border-color: #3E586F;
}
[data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox]:checked, [data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox]:indeterminate {
  background-color: #1B9DDE;
  border-color: #1B9DDE;
}
[data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox]:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-view-admin-list] .AdminListHeaderCheckbox input[type=checkbox]:indeterminate:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
[data-view-admin-list] .AdminListRowCheckbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -40px;
  top: 0;
  height: 56px;
  width: 40px;
  z-index: 1;
}
[data-view-admin-list] .AdminListRowCheckbox input[type=checkbox] {
  cursor: pointer;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  position: relative;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
}
[data-view-admin-list] .AdminListRowCheckbox input[type=checkbox]:hover {
  border-color: #3E586F;
}
[data-view-admin-list] .AdminListRowCheckbox input[type=checkbox]:checked, [data-view-admin-list] .AdminListRowCheckbox input[type=checkbox]:indeterminate {
  background-color: #1B9DDE;
  border-color: #1B9DDE;
}
[data-view-admin-list] .AdminListRowCheckbox input[type=checkbox]:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-view-admin-list] .AdminListRowCheckbox input[type=checkbox]:indeterminate:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
[data-view-admin-list]._bulk .AdminListRow:not(._bulk-selectable) .AdminListRowCheckbox {
  visibility: hidden;
}
[data-view-admin-list]._bulk .AdminListRow.Selected .Columns {
  width: calc(100% + 40px + 8px);
  margin-left: -40px;
  padding-left: 40px;
  padding-right: 63px;
  border-bottom-color: transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
[data-view-admin-list]._bulk .AdminListRow.Selected .Columns:before, [data-view-admin-list]._bulk .AdminListRow.Selected .Columns:after {
  content: none;
}
[data-view-admin-list]._bulk .AdminListRow.Selected + .AdminListRow.Selected .Columns {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
[data-view-admin-list]._bulk .AdminListRow.Selected:last-child .Columns, [data-view-admin-list]._bulk .AdminListRow.Selected:not(:has(+ .AdminListRow.Selected)) .Columns {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
[data-view-admin-list] .PreviewCheckbox {
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
}
[data-view-admin-list] .PreviewCheckbox input[type=checkbox] {
  cursor: pointer;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #9CB2C7;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  position: relative;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
}
[data-view-admin-list] .PreviewCheckbox input[type=checkbox]:hover {
  border-color: #3E586F;
}
[data-view-admin-list] .PreviewCheckbox input[type=checkbox]:checked, [data-view-admin-list] .PreviewCheckbox input[type=checkbox]:indeterminate {
  background-color: #1B9DDE;
  border-color: #1B9DDE;
}
[data-view-admin-list] .PreviewCheckbox input[type=checkbox]:checked:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-view-admin-list] .PreviewCheckbox input[type=checkbox]:indeterminate:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
[data-view-admin-list] .Previews._bulk .Preview .PreviewCheckbox {
  display: flex;
}
[data-view-admin-list] .Previews._bulk .Preview.Selected:before, [data-view-admin-list] .Previews._bulk .Preview.Selected:hover:before {
  background-color: #D1ECFA;
}
[data-view-admin-list] .BulkActionBar {
  background-color: #FFFFFF;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--confirm-bar-height, 94px);
  z-index: 1001;
  box-shadow: 0 -2px 12px 0 rgba(28, 39, 49, 0.12);
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease-out, visibility 0s linear 240ms;
}
body:not([data-old-ui]) [data-view-admin-list] .BulkActionBar {
  left: var(--nav-sidebar-width);
}
[data-view-admin-list] .BulkActionBar._visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  [data-view-admin-list] .BulkActionBar {
    transition: none;
  }
  [data-view-admin-list] .BulkActionBar._visible {
    transition: none;
  }
}
[data-view-admin-list] .BulkActionBar ._inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
[data-view-admin-list] .BulkActionBar ._count {
  color: #3E586F;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  min-width: 110px;
  text-align: right;
  white-space: nowrap;
}
[data-view-admin-list] .BulkActionBar ._delete,
[data-view-admin-list] .BulkActionBar ._action {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  min-width: 225px;
  padding-top: 15px;
  padding-bottom: 15px;
}
@media (max-width: 600px) {
  [data-view-admin-list] .BulkActionBar ._inner {
    width: 100%;
    padding: 0 25px;
    gap: 25px;
  }
  [data-view-admin-list] .BulkActionBar ._count {
    min-width: 0;
    flex: none;
  }
  [data-view-admin-list] .BulkActionBar ._delete,
  [data-view-admin-list] .BulkActionBar ._action {
    min-width: 0;
    flex: 1;
  }
}

body:not([data-old-ui]) .Main[_layout=app] > .Page:has(.BulkActionBar._visible) {
  padding-bottom: calc(var(--spacing-large) + var(--confirm-bar-height, 94px));
}

[data-view-announcement] {
  background-color: #FFFFFF;
  color: #3E586F;
  margin-bottom: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-radius: 6px;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  position: relative;
  display: flex;
}
[data-view-announcement]:last-child {
  margin-bottom: var(--spacing-none);
}
[data-view-announcement] .Options {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 20px;
}
[data-view-announcement] .Options a {
  border: none;
}
[data-view-announcement] .TextContainer {
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
[data-view-announcement] .TextContainer.Fourths {
  width: 75%;
}
[data-view-announcement] .TextContainer.Thirds {
  width: 67%;
}
[data-view-announcement] .TextContainer.Half {
  width: 50%;
}
[data-view-announcement] .TextContainer.Full {
  display: none;
  width: 0;
}
[data-view-announcement] .TextContainer.NoImage {
  width: 100%;
  padding-right: var(--spacing-large);
}
[data-view-announcement] .Title {
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: var(--spacing-normal);
  font-weight: 400;
}
[data-view-announcement] .Timestamp {
  margin-bottom: var(--spacing-normal);
  color: #9CB2C7;
}
[data-view-announcement] .Message *:last-child {
  margin-bottom: 0 !important;
}
[data-view-announcement] .ImageContainer {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  padding-bottom: var(--spacing-normal);
  padding-left: var(--spacing-normal);
  padding-right: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-view-announcement] .ImageContainer.Fourths {
  width: 25%;
}
[data-view-announcement] .ImageContainer.Thirds {
  width: 33%;
}
[data-view-announcement] .ImageContainer.Half {
  width: 50%;
}
[data-view-announcement] .ImageContainer.Full {
  width: 100%;
}
[data-view-announcement] .ImageContainer.NoText {
  width: 100%;
}
[data-view-announcement] .ImageContainer img {
  width: 100%;
  height: auto;
}

.ConditionalPanel ._content {
  display: none;
}
.ConditionalPanel._visible ._content {
  margin-top: var(--spacing-medium);
  display: block;
}

[data-view-create-multi] {
  text-align: center;
  background-color: var(--button-primary-background-color);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  background-color: var(--button-primary-border-color);
  padding-top: 7px;
  padding-bottom: 7px;
}
[data-view-create-multi]:after {
  display: inline-block;
  padding-left: var(--spacing-small);
  content: "+";
}
[data-view-create-multi]:hover {
  background-color: var(--button-primary-background-color);
}
[data-view-create-multi] select {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-style: solid;
  cursor: pointer;
  display: block;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0;
  top: 0;
}

[data-view-dropdown] {
  position: relative;
  text-align: left;
  overflow: visible;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

._actions[data-view-dropdown] {
  background-image: url(public/main/images/icons/legacy/ActionMenuGrey.5ca2832038cdc3e88690.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  height: 24px;
  width: 34px;
  cursor: pointer;
}

._actions[data-view-dropdown]:hover {
  background-image: url(public/main/images/icons/legacy/ActionMenuSkyBlue.99ae8761bbe24bb1c744.svg);
}

.Drop {
  border-radius: 6px;
  position: absolute;
  background-color: #FFFFFF;
  display: none;
  box-shadow: 1px 3px 15px 1px rgba(28, 39, 49, 0.4);
  width: 200px;
  top: 0;
  right: 0;
  padding: 14px;
  z-index: 99999;
  text-align: left;
}
.Drop.selected {
  display: block;
}
.Drop li {
  border-radius: 6px;
}
.Drop li:hover {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.Drop li a {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: block;
  color: #1B9DDE;
  padding: 8px;
}
.Drop li .disabled {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: block;
  background-color: #FFFFFF;
  color: #9CB2C7;
  padding: 8px;
  cursor: not-allowed;
}
.Drop .Pointer {
  position: absolute;
  width: 28px;
  height: 14px;
  top: -12px;
  right: 35px;
}
.Drop .Pointer:before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
  border-width: 0 12px 12px 12px;
  z-index: 2;
}
.Drop .Pointer:after {
  position: absolute;
  top: -2px;
  right: -2px;
  content: "";
  border-style: solid;
  border-color: transparent transparent rgba(28, 39, 49, 0.04) transparent;
  border-width: 0 14px 14px 14px;
  z-index: 1;
}

.ExportChecklistSection {
  margin-bottom: 30px;
}
.ExportChecklistSection:last-child {
  margin-bottom: 0;
}

.HistoryProgress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

.HistoryProgress__bar {
  background-color: #3E586F;
  height: 4px;
  transition-property: width;
  transition-duration: 200ms;
  transition-timing-function: linear;
  width: 0;
}
[_theme=dark] .HistoryProgress__bar {
  background-color: #25373d;
}
[_theme=light] .HistoryProgress__bar {
  background-color: #aaa;
}

.Tooltip {
  background-color: #3E586F;
  display: none;
  position: fixed;
  border-radius: 6px;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  width: 200px;
  padding: 15px;
  margin-top: -25px;
  margin-left: 12px;
  z-index: 10000;
}
.Tooltip ._text {
  color: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.Tooltip a._link {
  display: block;
  color: #9CB2C7;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-top: var(--spacing-normal);
}
.Tooltip:after {
  left: -20px;
  top: 25px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.Tooltip:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #3E586F;
  border-width: 10px;
  margin-top: -10px;
}

.ApprovalControls {
  background-color: var(--dokio-background-color);
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
  border-color: #EFF2F6;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  margin-bottom: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  border-radius: 6px;
}
.ApprovalControls ._title {
  color: #3E586F;
  margin-bottom: var(--spacing-normal);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ApprovalControls ._instructions {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ApprovalControls ._comment {
  margin-bottom: var(--spacing-medium_small);
}
.ApprovalControls[_message-only] ._actions .Label {
  visibility: hidden;
}
.ApprovalControls ._actions {
  position: relative;
  margin-top: var(--spacing-medium);
}
.ApprovalControls ._actions:after {
  content: "";
  display: table;
  clear: both;
}
.ApprovalControls ._actions .Label {
  display: inline-block;
  margin-bottom: var(--spacing-none);
  margin-right: var(--spacing-large);
  padding-bottom: var(--spacing-normal);
  padding-top: var(--spacing-normal);
  margin-bottom: var(--spacing-normal);
}
.ApprovalControls ._actions button {
  position: relative;
  float: right;
}
.text__Title--h1e6Z {
  font-size: 34px;
  --dokio-line-height: 41px;
  line-height: var(--dokio-line-height);
  letter-spacing: -0.02em;
  /* paragraph-spacing: 22px; */
}

.text__SubHead--D_Ruc {
  font-size: 22px;
  --dokio-line-height: 27px;
  line-height: var(--dokio-line-height);
  letter-spacing: -0.02em;
  /* paragraph-spacing: 14px; */
}

.text__BodyLarge--lVTGv {
  font-size: 17px;
  --dokio-line-height: 22px;
  line-height: var(--dokio-line-height);
  letter-spacing: -0.01em;
  /* paragraph-spacing: 11px; */
}

.text__BodyMedium--YSEYC {
  font-size: 15px;
  --dokio-line-height: 20px;
  line-height: var(--dokio-line-height);
  letter-spacing: -0.01em;
  /* paragraph-spacing: 10px; */
}

.text__BodySmall--SlzEp {
  font-size: 12px;
  --dokio-line-height: 16px;
  line-height: var(--dokio-line-height);
  letter-spacing: -0.01em;
  /* paragraph-spacing: 8px; */
}

.text__Bold--JcQze {
  font-weight: bold;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Button--pOeDb {
  text-align: center;
  cursor: pointer;
  display: inline-block;
  border-radius: 6px;
  user-select: none;
  transition: 300ms ease-in-out;
  transition-property: background-color, border-color;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: var(--button-foreground);
  background-color: var(--button-background);
  border: 1px solid var(--button-border, var(--button-background));
  white-space: nowrap;
  min-width: 120px;
}
.index__Button--pOeDb:disabled {
  --button-background: #EFF2F6;
  --button-foreground: #9CB2C7;
  border-color: #9CB2C7;
  cursor: not-allowed;
}

.index__small--jOOxw {
  padding: 5px 15px;
}

.index__medium--CH7Hn {
  padding: 7px 15px;
}

.index__large--LOO4a {
  padding: 11px 20px;
}

.index__grow-max--BLrP6 {
  width: 100%;
}

.index__grow-natural--rlOdE {
  min-width: 9em;
}

.index__primary--i1fw3 {
  --button-background: var(--button-primary-background-color);
  --button-border: var(--button-primary-border-color);
  --button-foreground: var(--button-primary-foreground-color);
}
.index__primary--i1fw3:hover {
  --button-background: var(--button-primary-hover-background-color);
  --button-border: var(--button-primary-hover-border-color);
}

.index__secondary--xbPlv {
  --button-background: var(--button-secondary-background-color);
  --button-border: var(--button-secondary-border-color);
  --button-foreground: var(--button-secondary-foreground-color);
}
.index__secondary--xbPlv:hover {
  --button-background: var(--button-secondary-hover-background-color);
  --button-border: var(--button-secondary-hover-border-color);
}

.index__tertiary--li1bq {
  --button-background: #FFC5B3;
  --button-border: #FFC5B3;
  --button-foreground: #1C2731;
}
.index__tertiary--li1bq:hover {
  --button-background: #FF9E80;
  --button-border: #FF9E80;
}

.index__link--scuON {
  --button-background: transparent;
  --button-border: transparent;
  --button-foreground: #496783;
  min-width: 0;
  padding: 0;
}
.index__link--scuON:hover {
  --button-background: transparent;
  --button-border: transparent;
  --button-foreground: #496783;
  text-decoration: underline;
}
.index__link--scuON.index__Button--pOeDb:disabled, .index__link--scuON.index__loading--Hnz8d {
  --button-background: transparent;
  --button-border: transparent;
}

.index__Button--pOeDb:disabled,
.index__loading--Hnz8d {
  --button-background: #DEE6ED;
  --button-border: #DEE6ED;
  --button-foreground: #5C81A3;
  cursor: not-allowed;
  border-width: 0;
}
.index__Button--pOeDb:disabled:hover,
.index__loading--Hnz8d:hover {
  --button-background: #DEE6ED;
  --button-border: #DEE6ED;
  --button-foreground: #5C81A3;
}

.index__loading--Hnz8d:after {
  --loading-spinner-size: 16px;
  width: var(--loading-spinner-size);
  height: var(--loading-spinner-size);
  border-radius: 50%;
  display: inline-block;
  border-top: 1px solid currentColor;
  border-right: 1px solid transparent;
  box-sizing: border-box;
  animation: index__spinner--RBG_7 1s linear infinite;
  content: "";
  margin-left: 5px;
}

.index__loading--Hnz8d.index__oldUI--e7RPo:after {
  animation-duration: 2s;
  animation-name: index__old_loading_dots--Fvkdf;
  border: unset;
  letter-spacing: 1px;
  width: unset;
  height: unset;
}

.index__create--KDw72:after {
  display: inline-block;
  padding-left: 5px;
  content: "+";
}

@keyframes index__old_loading_dots--Fvkdf {
  0%, 100% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
@keyframes index__spinner--RBG_7 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.index__Icon--GvHAO {
  width: var(--icon-height);
  height: var(--icon-height);
  display: flex;
  flex-direction: column;
}
.index__Icon--GvHAO path {
  fill: currentColor;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.CheckboxInput__CheckboxInput--lStAj {
  --checkbox-text-color: #3E586F;
  --checkbox-cursor: pointer;
  --checkbox-background-color: #FFFFFF;
  --checkbox-check-color: #FFFFFF;
  --checkbox-width: 20px;
  display: grid;
  align-items: center;
  color: var(--checkbox-text-color);
  cursor: var(--checkbox-cursor);
  position: relative;
  width: max-content;
  max-width: 100%;
}
.CheckboxInput__CheckboxInput--lStAj > input {
  opacity: 0.00001;
  position: absolute;
  width: var(--checkbox-width);
  cursor: var(--checkbox-cursor);
  height: 100%;
  margin: 0;
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__Checked--dX0Sv {
  --checkbox-background-color: #3E586F;
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__Disabled--nSugg {
  --checkbox-check-color: #9CB2C7;
  --checkbox-text-color: #5C81A3;
  --checkbox-cursor: not-allowed;
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__Readonly--B1GIE {
  --checkbox-check-color: #3E586F;
  --checkbox-cursor: default;
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__Disabled--nSugg, .CheckboxInput__CheckboxInput--lStAj.CheckboxInput__Readonly--B1GIE {
  --checkbox-background-color: #EFF2F6;
}
.CheckboxInput__CheckboxInput--lStAj .CheckboxInput__Text--TFmU5 {
  color: var(--checkbox-text-color);
  position: relative;
}

.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__TextLeft--LAusw {
  grid-template-columns: 1fr var(--checkbox-width);
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__TextLeft--LAusw .CheckboxInput__Text--TFmU5 {
  padding-right: 5px;
}

.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__TextRight--Lyc0g {
  grid-template-columns: var(--checkbox-width) 1fr;
}
.CheckboxInput__CheckboxInput--lStAj.CheckboxInput__TextRight--Lyc0g .CheckboxInput__Text--TFmU5 {
  padding-left: 5px;
}

.CheckboxInput__Control--t72Jd {
  display: inline-block;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  background-color: var(--checkbox-background-color);
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
}
.CheckboxInput__Control--t72Jd path {
  fill: var(--checkbox-check-color);
}

.CheckboxInput__TextLeft--LAusw input {
  right: 0;
}

.CheckboxInput__Text--TFmU5.CheckboxInput__Small--IC6IH {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.CheckboxInput__Text--TFmU5.CheckboxInput__Medium--Zmfru {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.CheckboxInput__Text--TFmU5.CheckboxInput__Large--GHaYZ {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.index__Swatch--LuRmd {
  height: 22px;
  width: 22px;
  overflow: hidden;
  display: flex;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
}
.index__Swatch--LuRmd > div {
  width: 100%;
}
.ColourSelectInput__ColourSelectInput--qp1GJ {
  display: flex;
  gap: 10px;
  align-items: center;
}
.rdp {
  --rdp-cell-size: 40px;
  --rdp-accent-color: #0000ff;
  --rdp-background-color: #e7edff;
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
  margin: 1em;
}

/* Hide elements for devices that are not screen readers */
.rdp-vhidden {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute !important;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
}

/* Buttons */
.rdp-button_reset {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  cursor: default;
  color: inherit;
  background: none;
  font: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.rdp-button_reset:focus-visible {
  /* Make sure to reset outline only when :focus-visible is supported */
  outline: none;
}

.rdp-button {
  border: 2px solid transparent;
}

.rdp-button[disabled]:not(.rdp-day_selected) {
  opacity: 0.25;
}

.rdp-button:not([disabled]) {
  cursor: pointer;
}

.rdp-button:focus-visible:not([disabled]) {
  color: inherit;
  background-color: var(--rdp-background-color);
  border: var(--rdp-outline);
}

.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
  background-color: var(--rdp-background-color);
}

.rdp-months {
  display: flex;
}

.rdp-month {
  margin: 0 1em;
}

.rdp-month:first-child {
  margin-left: 0;
}

.rdp-month:last-child {
  margin-right: 0;
}

.rdp-table {
  margin: 0;
  max-width: calc(var(--rdp-cell-size) * 7);
  border-collapse: collapse;
}

.rdp-with_weeknumber .rdp-table {
  max-width: calc(var(--rdp-cell-size) * 8);
  border-collapse: collapse;
}

.rdp-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-align: left;
}

.rdp-multiple_months .rdp-caption {
  position: relative;
  display: block;
  text-align: center;
}

.rdp-caption_dropdowns {
  position: relative;
  display: inline-flex;
}

.rdp-caption_label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0.25em;
  white-space: nowrap;
  color: currentColor;
  border: 0;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 140%;
  font-weight: bold;
}

.rdp-nav {
  white-space: nowrap;
}

.rdp-multiple_months .rdp-caption_start .rdp-nav {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.rdp-multiple_months .rdp-caption_end .rdp-nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.rdp-nav_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  padding: 0.25em;
  border-radius: 100%;
}

/* ---------- */
/* Dropdowns  */
/* ---------- */
.rdp-dropdown_year,
.rdp-dropdown_month {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown {
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  opacity: 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.rdp-dropdown[disabled] {
  opacity: unset;
  color: unset;
}

.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
  background-color: var(--rdp-background-color);
  border: var(--rdp-outline);
  border-radius: 6px;
}

.rdp-dropdown_icon {
  margin: 0 0 0 5px;
}

.rdp-head {
  border: 0;
}

.rdp-head_row,
.rdp-row {
  height: 100%;
}

.rdp-head_cell {
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
}

.rdp-tbody {
  border: 0;
}

.rdp-tfoot {
  margin: 0.5em;
}

.rdp-cell {
  width: var(--rdp-cell-size);
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
  text-align: center;
}

.rdp-weeknumber {
  font-size: 0.75em;
}

.rdp-weeknumber,
.rdp-day {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rdp-cell-size);
  max-width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  margin: 0;
  border: 2px solid transparent;
  border-radius: 100%;
}

.rdp-day_today:not(.rdp-day_outside) {
  font-weight: bold;
}

.rdp-day_selected,
.rdp-day_selected:focus-visible,
.rdp-day_selected:hover {
  color: white;
  opacity: 1;
  background-color: var(--rdp-accent-color);
}

.rdp-day_outside {
  opacity: 0.5;
}

.rdp-day_selected:focus-visible {
  /* Since the background is the same use again the outline */
  outline: var(--rdp-outline);
  outline-offset: 2px;
  z-index: 1;
}

.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp-day_range_end.rdp-day_range_start {
  border-radius: 100%;
}

.rdp-day_range_middle {
  border-radius: 0;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.Input__Input--KhLNJ {
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

.Input__Input--KhLNJ input {
  width: 100%;
  border-width: 0;
  outline: none;
  background-color: inherit;
  color: inherit;
}

.Input__Theme-Light--YRNK1 {
  background-color: #FFFFFF;
  border-color: #9CB2C7;
  color: #1C2731;
}

.Input__Theme-Dark--sUsLA {
  background-color: #2D3F50;
  border-color: #9CB2C7;
  color: #FFFFFF;
}

.Input__medium--flOME input {
  padding: 11px 15px 11px 15px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.Input__small--ohYnc input {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding: 7px 15px 7px 15px;
}

.Input__ValidationMessages--uPKNT:not(:empty) {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: grid;
  gap: 5px;
  border-top: 1px solid;
  border-color: inherit;
  background-color: #EFF2F6;
  color: #3E586F;
  padding: 10px 15px;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.InputBox__InputBox--CVTz0 {
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  display: block;
  width: 100%;
  background: border-box var(--input-background-color);
  background-clip: padding-box;
}
.InputBox__InputBox--CVTz0.InputBox__Disabled--l2vne {
  cursor: var(--inputbox-cursor);
  --inputbox-cursor: not-allowed;
}
.InputBox__InputBox--CVTz0.InputBox__Disabled--l2vne input.InputBox__InputBoxInput--SupMz,
.InputBox__InputBox--CVTz0.InputBox__Disabled--l2vne textarea.InputBox__InputBoxInput--SupMz {
  cursor: inherit;
}
.InputBox__InputBox--CVTz0.InputBox__ReadOnly--qHxcV {
  cursor: var(--inputbox-cursor);
  --inputbox-cursor: default;
}
.InputBox__InputBox--CVTz0.InputBox__ReadOnly--qHxcV input.InputBox__InputBoxInput--SupMz {
  cursor: inherit;
}
.InputBox__InputBox--CVTz0.InputBox__Open--zwYFe {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.InputBox__Component--s4V5G {
  width: 100%;
  border-width: 0;
  outline: none;
  color: inherit;
  position: relative;
}

.InputBox__Component--s4V5G:empty {
  display: none;
}

.InputBox__Theme-Light--_hn_u {
  --input-border-color: #9CB2C7;
  --input-background-color: #FFFFFF;
  --validation-background-color: #EFF2F6;
  color: #1C2731;
}
.InputBox__Theme-Light--_hn_u.InputBox__Disabled--l2vne {
  color: #5C81A3;
  --input-background-color: #EFF2F6;
}
.InputBox__Theme-Light--_hn_u.InputBox__ReadOnly--qHxcV {
  --input-background-color: #EFF2F6;
}
.InputBox__Theme-Light--_hn_u.InputBox__Invalid--KtGqA {
  --input-border-color: #FF501A;
  --validation-background-color: #FFC5B3;
}

.InputBox__Theme-Dark--QaoGs {
  --input-border-color: #9CB2C7;
  --input-background-color: #2D3F50;
  color: #FFFFFF;
}

.InputBox__medium--ON9_J .InputBox__MainInput--s2uZE {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.InputBox__medium--ON9_J .InputBox__MainInput--s2uZE:not(.InputBox__RemovePadding--TabUY) {
  padding: 11px 15px 11px 15px;
}

.InputBox__small--PqK7i .InputBox__MainInput--s2uZE {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.InputBox__small--PqK7i .InputBox__MainInput--s2uZE:not(.InputBox__RemovePadding--TabUY) {
  padding: 7px 15px 7px 15px;
}

.InputBox__ValidationMessages--YQIxw:not(:empty) {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  display: grid;
  gap: 5px;
  background-color: var(--validation-background-color);
  color: #1C2731;
  padding: 10px 15px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 1px solid var(--input-border-color);
}

.InputBox__MainInput--s2uZE {
  display: flex;
  gap: 10px;
}

.InputBox__Children--cgeIe {
  flex-grow: 1;
  min-width: 0;
}

.InputBox__Icon--vtwYr {
  display: flex;
  width: max-content;
  align-items: center;
}

input.InputBox__InputBoxInput--SupMz,
textarea.InputBox__InputBoxInput--SupMz {
  font-size: inherit;
  border-width: 0;
  width: 100%;
  background-color: inherit;
  color: inherit;
  padding: 0;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.DateInput__DateInput--_E16O {
  background-color: inherit;
}

.DateInput__FloatingCalendar--iPxse {
  z-index: 99999;
  border-radius: 6px;
  box-shadow: 1px 3px 8px 1px rgba(0, 0, 0, 0.25);
}
.DateInput__FloatingCalendar--iPxse.DateInput__Theme-Light--DEsaw {
  background-color: #FFFFFF;
}

/* Up-pointing arrow at the top-left, mirroring the Callout pointer. */
.DateInput__FloatingCalendarPointer--cVLUU {
  position: absolute;
  top: -12px;
  left: 16px;
  width: 28px;
  height: 14px;
}
.DateInput__FloatingCalendarPointer--cVLUU::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
  border-width: 0 12px 12px 12px;
  z-index: 2;
}
.DateInput__FloatingCalendarPointer--cVLUU::after {
  position: absolute;
  top: -2px;
  left: -2px;
  content: "";
  border-style: solid;
  border-color: transparent transparent rgba(28, 39, 49, 0.04) transparent;
  border-width: 0 14px 14px 14px;
  z-index: 1;
}

/* When the calendar flips above the input, point the arrow down from the
   bottom edge instead. */
.DateInput__FloatingCalendarPointerDown--Vkna0 {
  top: auto;
  bottom: -12px;
}
.DateInput__FloatingCalendarPointerDown--Vkna0::before {
  top: auto;
  bottom: 0;
  border-color: #FFFFFF transparent transparent transparent;
  border-width: 12px 12px 0 12px;
}
.DateInput__FloatingCalendarPointerDown--Vkna0::after {
  top: auto;
  bottom: -2px;
  border-color: rgba(28, 39, 49, 0.04) transparent transparent transparent;
  border-width: 14px 14px 0 14px;
}

.DateInput__DateInputBox--PRoS_ {
  border-width: 0;
  border-color: transparent;
  display: flex;
  align-items: center;
}

.DateInput__DateInputField--M33la {
}

.DateInput__DateCaption--ht35d {
  margin-left: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

.DateInput__Theme-Light--DEsaw {
  --rdp-background-color: #EFF2F6;
  --rdp-accent-color: #D1ECFA;
}
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerDay--UMN2z,
.DateInput__Theme-Light--DEsaw .DateInput__CalendarSelect--iaCq4 {
  color: #1C2731;
}
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerDay--UMN2z:hover,
.DateInput__Theme-Light--DEsaw .DateInput__CalendarSelect--iaCq4:hover {
  background-color: #EFF2F6;
  color: #1C2731;
}
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerHeadCell--qvALl {
  color: #5C81A3;
}
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerDayOutside--B1wTk,
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerDayDisabled--AvR8Y {
  color: #5C81A3;
}
.DateInput__Theme-Light--DEsaw .DateInput__DayPickerDaySelected--cBTgT {
  background-color: #D1ECFA;
}
.DateInput__Theme-Light--DEsaw .DateInput__DateCaption--ht35d {
  border-bottom: 1px solid #9CB2C7;
}
.DateInput__Theme-Light--DEsaw .DateInput__DateInputBox--PRoS_,
.DateInput__Theme-Light--DEsaw .DateInput__CalendarOptionsSelect--bhOsh {
  background: #FFFFFF;
}
.DateInput__Theme-Light--DEsaw .DateInput__CalendarOption--HPnJh {
  color: #3E586F;
}
.DateInput__Theme-Light--DEsaw .DateInput__CalendarOption--HPnJh:hover {
  background-color: #EFF2F6;
}
.DateInput__Theme-Light--DEsaw .DateInput__CalendarOption-selected--TEqz4 {
  background-color: #D1ECFA;
  color: #1C2731;
}

.DateInput__Theme-Dark--mJrAI {
  --rdp-background-color: #496783;
  --rdp-accent-color: #496783;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerDay--UMN2z,
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarSelect--iaCq4 {
  color: #FFFFFF;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerDay--UMN2z:hover,
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarSelect--iaCq4:hover {
  background-color: #496783;
  color: #DEE6ED;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerHeadCell--qvALl {
  color: #BECDDA;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerDayOutsideMonth--vxsqi,
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerDayDisabled--AvR8Y {
  color: #BECDDA;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DayPickerDaySelected--cBTgT {
  color: #FFFFFF;
  background-color: #1B9DDE;
}
.DateInput__Theme-Dark--mJrAI .DateInput__DateCaption--ht35d {
  border-bottom: 1px solid #9CB2C7;
}
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarOptionsSelect--bhOsh {
  background: #3E586F;
}
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarOption--HPnJh {
  color: #FFFFFF;
}
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarOption--HPnJh:hover {
  background-color: #496783;
  color: #DEE6ED;
}
.DateInput__Theme-Dark--mJrAI .DateInput__CalendarOption-selected--TEqz4 {
  background-color: #1B9DDE;
  color: #FFFFFF;
}

.DateInput__DayPickerRoot--I6CS0 {
  padding: 15px;
}

.DateInput__DayPickerCell--vzKwU {
  text-align: center;
}
.DateInput__DayPickerCell--vzKwU button {
  background: none;
}

.DateInput__DayPickerDay--UMN2z {
  border-radius: 100%;
  padding: 0.5em;
  border-width: 0;
  width: 28px;
}
.DateInput__DayPickerDay--UMN2z:hover {
  cursor: pointer;
}

.DateInput__DayPickerDayDisabled--AvR8Y {
  cursor: not-allowed;
}
.DateInput__DayPickerDayDisabled--AvR8Y:hover {
  cursor: not-allowed;
  background-color: inherit;
}

.DateInput__DayPickerHeadCell--qvALl {
  padding: 0.5em;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.DateInput__DateCaption--ht35d {
  display: flex;
  padding-bottom: 5px;
}

.DateInput__DayPickerVHidden--w0TPZ {
  display: none;
}

.DateInput__CalendarSelect--iaCq4 {
  margin-right: 10px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  cursor: pointer;
}

.DateInput__CalendarSelectDropdownButton--dq4mj {
  display: inline-block;
  vertical-align: text-top;
  margin-left: 5px;
}

.DateInput__CalendarSelectButtonLabel--SYVml {
  display: flex;
  justify-content: space-between;
}

.DateInput__CalendarOptions--xVJ7q {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.1);
}

.DateInput__CalendarOptionsSelect--bhOsh {
  display: none;
  position: absolute;
  top: 50px;
  padding: 5px;
  box-shadow: 1px 2px 4px 1px rgba(28, 39, 49, 0.2);
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  z-index: 1;
}

.DateInput__CalendarOptionsScroll--rrehn {
  overflow-y: auto;
  height: 150px;
  width: 100px;
}

.DateInput__CalendarOption--HPnJh {
  padding: 5px;
  border-radius: 3px;
}

.DateInput__CalendarOptionsSelectActive--QmArG {
  display: block;
  background-color: #FFFFFF;
}
.index__Stack--cUAmM {
  display: flex;
}

.index__horizontal--mz7Ki {
  flex-direction: row;
  align-items: center;
}

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

.index__large--lZed7 {
  gap: 40px;
}

.index__mediumLarge--YdJ3s {
  gap: 25px;
}

.index__medium--q2aBh {
  gap: 20px;
}

.index__mediumSmall--KQyec {
  gap: 15px;
}

.index__normal--H4AK6 {
  gap: 10px;
}

.index__small--mOr97 {
  gap: 5px;
}

.index__fine--vJaGV {
  gap: 1px;
}

.index__none--RamYB {
  gap: 0;
}

.index__start--QtSe0 {
  justify-content: flex-start;
}

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

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

.index__end--xJRbW {
  justify-content: flex-end;
}

.index__Width_MAX_WIDTH--rQHap {
  width: 100%;
}

.index__Width_MAX_CONTENT--Z4bym {
  width: max-content;
}
.index__CalloutPosition--GkbAd {
  position: absolute;
  width: 1px;
}

.index__Callout--wKusm {
  border-radius: 6px;
  top: 20px;
  position: absolute;
  box-shadow: 1px 3px 8px 1px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  text-align: left;
}

.index__Theme-Light--wlZaX .index__Callout--wKusm {
  background-color: #FFFFFF;
}
.index__Theme-Light--wlZaX .index__Pointer--Xaf0Z::before {
  border-color: transparent transparent #FFFFFF transparent;
}

.index__Theme-Dark--oaJV9 .index__Callout--wKusm {
  background-color: #3E586F;
}
.index__Theme-Dark--oaJV9 .index__Pointer--Xaf0Z::before {
  border-color: transparent transparent #3E586F transparent;
}

.index__Pointer--Xaf0Z {
  position: absolute;
  width: 28px;
  height: 14px;
  top: -12px;
}
.index__Pointer--Xaf0Z::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
  border-width: 0 12px 12px 12px;
  z-index: 2;
}
.index__Pointer--Xaf0Z::after {
  position: absolute;
  top: -2px;
  right: -2px;
  content: "";
  border-style: solid;
  border-color: transparent transparent rgba(28, 39, 49, 0.04) transparent;
  border-width: 0 14px 14px 14px;
  z-index: 1;
}
.index__IconButton--C7dQV {
  cursor: pointer;
  width: 22px;
  display: flex;
}

.index__Theme-Light--q7ay6 svg {
  fill: #5C81A3;
}
.index__Theme-Light--q7ay6 svg:hover {
  fill: #3E586F;
}

.index__Theme-Dark--EU5BA svg {
  fill: #9CB2C7;
}
.index__Theme-Dark--EU5BA svg:hover {
  fill: #BECDDA;
}
.onBackground__onWhite--rO672 {
  color: #3E586F;
  --dokio-background-color: #FFFFFF;
  --dokio-hover-background: #EFF2F6;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}

.onBackground__onSilver--UKG7s {
  color: #3E586F;
  --dokio-background-color: #EFF2F6;
  --dokio-hover-background: #DEE6ED;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}

.onBackground__onCoolGrey--NlWXS {
  color: #3E586F;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}

.onBackground__onHover85--dIr8J {
  color: #3E586F;
  --dokio-background-color: #CED9E3;
  --dokio-hover-background: #BECDDA;
  --dokio-toggle-background: #3E586F;
  --dokio-toggle-foreground: #DEE6ED;
  --dokio-toggle-background-hover: #374D62;
}
.InputToolbar__Toolbar--i29yE {
  --toolbar-size: 24px;
  border-bottom: 1px solid #9CB2C7;
  display: grid;
  width: 100%;
  gap: var(--toolbar-size);
  grid-template-columns: minmax(0, auto) minmax(var(--toolbar-size), 1fr);
  grid-template-areas: "ToolbarOptions Expand";
}

.InputToolbar__ToolbarSection--zGTKm {
  display: flex;
  padding: 5px;
  flex-wrap: wrap;
  gap: 5px;
  min-height: var(--toolbar-size);
}

.InputToolbar__ToolbarOptions--LDJPC {
  grid-area: ToolbarOptions;
}

/*
 * Buttons that belong together (e.g. the bold / italic / underline
 * marks) sit tighter than the gap between unrelated toolbar actions,
 * and get a separator so the formatting cluster reads apart from the
 * merge-tag cluster next to it.
 */
.InputToolbar__ToolbarGroup--JpDsk {
  display: flex;
  gap: 2.5px;
  align-items: center;
}
.InputToolbar__ToolbarGroup--JpDsk:not(:last-child) {
  padding-right: 5px;
  border-right: 1px solid #9CB2C7;
}

.InputToolbar__Expand--Ei0a_ {
  grid-area: Expand;
  justify-content: flex-end;
}
.index__Icon--yUdTY {
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --icon-size: var(--dokio-line-height, 22px);
  height: var(--icon-size);
  width: var(--icon-size);
}
.index__Icon--yUdTY.index__Inline--Pv_Mt {
  transform: translateY(calc(var(--icon-size) * 0.1));
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  height: calc(var(--icon-size));
  width: calc(var(--icon-size));
  fill: #3E586F;
  background-color: var(--dokio-background-color);
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd:hover {
  background-color: var(--dokio-hover-background, #EFF2F6);
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd[aria-disabled=true] {
  fill: #9CB2C7;
  background-color: unset;
  cursor: not-allowed;
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd[aria-pressed=true] {
  fill: var(--dokio-toggle-foreground);
  background-color: var(--dokio-toggle-background);
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd[aria-pressed=true]:hover {
  background-color: var(--dokio-toggle-background-hover);
}
.index__Icon--yUdTY .index__InlineIconButton--yjsJd svg {
  width: calc(var(--icon-size) * 0.8);
  height: calc(var(--icon-size) * 0.8);
}

.index__InlineTextStoryBackground--IwJue {
  width: 410px;
  background-color: var(--dokio-background-color);
  padding: 10px;
}
.index__InlineTextStoryBackground--IwJue p {
  outline: 1px solid currentColor;
}
.index__ValidationStatus--fmDCV {
  display: flex;
  gap: 10px;
  align-items: center;
}
.Label__Label--I6M6v {
  display: inline-block;
  color: #3E586F;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.MultiCheckboxInput__MultiCheckboxInput--Or81g {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.MultiCheckboxInput__MultiCheckboxInput--Or81g.MultiCheckboxInput__Readonly--_DuS0 {
  pointer-events: none;
}

.MultiCheckboxInput__Option--bSjB8 {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.MultiCheckboxInput__Option--bSjB8.MultiCheckboxInput__Readonly--_DuS0 {
  cursor: default;
}
.MultiCheckboxInput__Option--bSjB8.MultiCheckboxInput__Disabled--zRCcv {
  cursor: not-allowed;
  opacity: 0.6;
}

.MultiCheckboxInput__OptionCheckbox--s5yFo {
  --checkbox-background-color: #FFFFFF;
  --checkbox-check-color: #FFFFFF;
  --checkbox-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  background-color: var(--checkbox-background-color);
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  flex-shrink: 0;
}
.MultiCheckboxInput__OptionCheckbox--s5yFo path {
  fill: var(--checkbox-check-color);
}
.MultiCheckboxInput__OptionCheckbox--s5yFo.MultiCheckboxInput__Checked--Qdo7l {
  --checkbox-background-color: #3E586F;
}
.MultiCheckboxInput__OptionCheckbox--s5yFo.MultiCheckboxInput__Readonly--_DuS0 {
  --checkbox-check-color: #3E586F;
  --checkbox-background-color: #EFF2F6;
}
.MultiCheckboxInput__OptionCheckbox--s5yFo.MultiCheckboxInput__Disabled--zRCcv {
  --checkbox-check-color: #9CB2C7;
  --checkbox-background-color: #EFF2F6;
}

.MultiCheckboxInput__OptionLabel--oNB4s {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  user-select: none;
}
.MultiCheckboxInput__OptionLabel--oNB4s.MultiCheckboxInput__Readonly--_DuS0 {
  color: #5C81A3;
}
.MultiCheckboxInput__OptionLabel--oNB4s.MultiCheckboxInput__Disabled--zRCcv {
  color: #5C81A3;
}

.MultiCheckboxInput__HiddenInput--HUJzW {
  opacity: 0.00001;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}
.NumberInput__NumberInput--LeLx6 {
  padding: 0 !important;
  border: 0 !important;
}
.RadioInput__RadioOption--pi7f2 {
  display: flex;
  gap: 5px;
  align-items: center;
}
.RadioInput__RadioOption--pi7f2 > input {
  margin: 0;
  margin-right: 5px;
  appearance: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: 0.2s all linear;
  outline: 1px solid #9CB2C7;
  border: 3px solid #FFFFFF;
  background-color: #FFFFFF;
}
.RadioInput__RadioOption--pi7f2 > input.RadioInput__ReadOnly--wT6BW,
.RadioInput__RadioOption--pi7f2 > input:disabled {
  background-color: #EFF2F6;
  outline-color: #BECDDA;
  border-color: #EFF2F6;
}
.RadioInput__RadioOption--pi7f2 > input:disabled:checked {
  background-color: #9CB2C7;
}
.RadioInput__RadioOption--pi7f2 > input:disabled,
.RadioInput__RadioOption--pi7f2 > input:disabled + label {
  cursor: not-allowed;
}
.RadioInput__RadioOption--pi7f2 > input:hover:not(:disabled, .RadioInput__ReadOnly--wT6BW) {
  outline-color: #9CB2C7;
  border-color: #DEE6ED;
  background-color: #DEE6ED;
}
.RadioInput__RadioOption--pi7f2 > input:checked {
  background-color: #3E586F;
}
.RadioInput__RadioOption--pi7f2 > input:hover:checked:not(:disabled, .RadioInput__ReadOnly--wT6BW) {
  outline-color: #3E586F;
}

.RadioInput__RadioOptionLabel--nUFl1 {
  color: #3E586F;
}

input:disabled + .RadioInput__RadioOptionLabel--nUFl1 {
  color: #5C81A3;
}
.useTextLimits__DisplayLimit--qfbI8 {
  margin-right: 5px;
}
.tox.tox-tinymce {
  border: 0 !important;
}

.tox.tox-tinymce {
  min-height: 200px !important;
}

.tox .tox-toolbar__group {
  padding: 0 6px 0 6px !important;
}

.tox-pop__dialog button[data-mce-name=imageoptions] {
  display: none !important;
}

.tox-tinymce-aux {
  z-index: 999999 !important;
}

.tox-tbtn--select {
  width: auto !important;
}

.tox.tox-tinymce {
  max-height: 60vh;
}

.index__ViewOnly--FUL1W {
  min-height: 200px;
}

.index__ModalLayout--Ab57e {
  display: grid;
  background-color: #EFF2F6;
  grid-template-rows: max-content max-content max-content;
  grid-template-areas: "header" "body" "ModalFooter";
}
.index__ModalLayout--Ab57e > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__ModalBody--ora8Z {
  grid-area: body;
  margin-bottom: 20px;
}
.index__ColourInput--dbcBq {
  color: #3E586F;
  position: relative;
  --input-padding: 15px;
  --select-background: #FFFFFF;
  --select-background-focused: #DEE6ED;
  --select-background-selected: #D1ECFA;
}

.index__ColourInput--is-open--dGbd7.index__bottom-start--q8cgf .index__ColourInputDisplay--k0Tw4, .index__ColourInput--is-open--dGbd7.index__bottom-end--KqZqd .index__ColourInputDisplay--k0Tw4 {
  border-radius: 4px 4px 0 0;
}
.index__ColourInput--is-open--dGbd7.index__top-start--Vvwxo .index__ColourInputDisplay--k0Tw4 {
  border-radius: 0 0 4px 4px;
}

/* Input display start */
.index__ColourInputDisplay--k0Tw4 {
  display: flex;
  align-items: center;
  background-color: var(--select-background);
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
}

.index__ColourInputDisplay--is-disabled--XxAuZ {
  background-color: #EFF2F6;
  cursor: not-allowed;
}
.index__ColourInputDisplay--is-disabled--XxAuZ .index__InputLabel--lOloo {
  color: #5C81A3;
}

.index__ColourInputDisplay--is-readonly--dgysp {
  background-color: #EFF2F6;
  cursor: initial;
}
.index__ColourInputDisplay--is-readonly--dgysp .index__InputLabel--lOloo {
  color: #1C2731;
}

.index__ColourInputDisplay--is-editable--uXOJj {
  cursor: text;
}

.index__InputContainer--RpEdo {
  position: relative;
  width: 100%;
}

.index__InputColourIcon--W4QVA {
  position: absolute;
  left: var(--input-padding);
  top: 50%;
  transform: translateY(-50%);
}

.index__Input--CpxQ2 {
  color: inherit;
  border-width: 0;
  width: 100%;
  height: 100%;
  padding: 13px 50px;
  border-radius: 4px;
}

.index__Input--on-top--Rf_fd {
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}

.index__InputLabel--lOloo {
  color: inherit;
  width: 100%;
  height: 100%;
  padding: 12px 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index__InputLabelInfo--iQfWZ {
  color: #5C81A3;
}

.index__ColourInputArrowContainer--vhdon {
  height: 100%;
  position: absolute;
  top: 12px;
  right: 0;
  padding-right: var(--input-padding);
  padding-left: var(--input-padding);
  cursor: pointer;
}

/* Dropdown start */
.index__ColourInputDropdown--FVD6w {
  background-color: var(--select-background);
  background-clip: padding-box;
  border-style: solid;
  border-color: #9CB2C7;
  right: 0;
  left: 0;
  z-index: 1000;
}
.index__ColourInputDropdown--FVD6w.index__top-start--Vvwxo {
  border-width: 1px 1px 0 1px;
  border-radius: 4px 4px 0 0;
}
.index__ColourInputDropdown--FVD6w.index__bottom-start--q8cgf, .index__ColourInputDropdown--FVD6w.index__bottom-end--KqZqd {
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 4px 4px;
}

.index__ColourDropdownContainer--wJHhR {
  --dropdown-padding: 15px;
  --dropdown-padding-half: calc(var(--dropdown-padding) / 2);
}

.index__DropdownEmpty--d8QHN {
  padding: var(--dropdown-padding);
}

.index__AllowNone--mle3y {
  display: flex;
  align-items: center;
  gap: var(--dropdown-padding);
  padding: var(--dropdown-padding);
  cursor: pointer;
}

.index__AllowNone--is-selected--BSHxO {
  background-color: var(--select-background-selected);
}

.index__AllowNone--is-focused--ivPYv:not(.index__AllowNone--is-selected--BSHxO) {
  background-color: var(--select-background-focused);
}

.index__AllowNone--mle3y:not(.index__AllowNone--is-selected--BSHxO) + .index__ColourContainer--aDY6d .index__ColourSection--wn6mc:first-of-type {
  border-top: 1px solid #DEE6ED;
}

.index__ColourContainer--aDY6d {
  padding-left: calc(var(--dropdown-padding) - 3px);
  padding-right: calc(var(--dropdown-padding) - 3px);
  max-height: 200px;
  overflow: auto;
}

.index__ColourSection--wn6mc {
  border-top: 1px solid #DEE6ED;
  padding-top: var(--dropdown-padding-half);
  padding-bottom: var(--dropdown-padding-half);
}

.index__ColourSection--wn6mc:first-of-type {
  border-top: none;
}

.index__ColourSectionHeader--lmBK7 {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #5C81A3;
  margin-top: var(--dropdown-padding-half);
}

.index__ColourList--x8bsB {
  display: flex;
  flex-wrap: wrap;
  padding: var(--dropdown-padding-half) 0;
}

.index__ColourListItem--Y20Iy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: var(--dropdown-padding-half);
}

.index__ColourListItem--Y20Iy:before {
  width: calc(var(--dropdown-padding) * 2);
  height: calc(var(--dropdown-padding) * 2);
  display: none;
  position: absolute;
  top: calc(var(--dropdown-padding) / 6);
  left: calc(var(--dropdown-padding) / 6);
  border-radius: 4px;
}

.index__ColourListItem--is-selected--JqVOi:before {
  display: block;
  background-color: var(--select-background-selected);
  content: "";
}

.index__ColourListItem--is-focused--c_jSI:not(.index__ColourListItem--is-selected--JqVOi):before {
  display: block;
  background-color: var(--select-background-focused);
  content: "";
}

.index__ColourListItemHidden--Nixrx {
  position: absolute;
  left: 0;
  font-size: 0.1px;
  color: transparent;
  z-index: -2;
}

.index__Footer--jY5DF {
  height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(239, 242, 246, 0.5);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: var(--dropdown-padding);
}

.index__ColourHover--NiDtn {
  color: #5C81A3;
}

.index__CustomiseButton--dcoQL {
  display: flex;
  gap: 5px;
  color: #1B9DDE;
  cursor: pointer;
}

.index__CustomiseButton--dcoQL:hover {
  color: #5C81A3;
}
.SelectListInput__SelectListInputContainer--AWuwM {
  position: relative;
  background-color: #DEE6ED;
  padding: 9px 12px;
}

.SelectListInput__SelectListInputInnerContainer--oNwI3 {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--select-background);
  border-radius: 4px;
  padding: 0 4px;
}

.SelectListInput__SelectInput--nGFOl {
  border-width: 0;
  color: inherit;
  padding: 0;
  width: 100%;
  margin: 4px 0;
}

.SelectListInput__SelectInputIcon--QcoIp {
  fill: #5C81A3;
}

.SelectListInput__SelectInput--nGFOl::placeholder {
  color: #5C81A3;
}
.SelectInputArrow__SelectInputArrow--SiEMI {
  transition: transform 0.3s;
}

.SelectInputArrow__SelectInputArrow--is-opened--AS80v {
  transform: rotate(180deg);
}
.Select__Theme-Light--A6uO0 {
  color: #3E586F;
  --select-background: #FFFFFF;
  --select-background-focused: #EFF2F6;
  --select-background-selected: #D1ECFA;
}
.Select__Theme-Light--A6uO0[aria-disabled=true], .Select__Theme-Light--A6uO0[aria-readonly=true] {
  --select-background: #EFF2F6;
}

.Select__Theme-Dark--WBNza {
  color: #FFFFFF;
  --select-background-focused: #106793;
  --select-background-selected: #9FD8F4;
  --select-color-selected: #3E586F;
}

.Select__Select--_0EbS {
  position: relative;
  --select-cursor: pointer;
}
.Select__Select--_0EbS[aria-readonly=true] {
  --select-cursor: default;
}
.Select__Select--_0EbS[aria-disabled=true] {
  --select-cursor: not-allowed;
}

.Select__Select--is-open--vjFm4.Select__bottom-start--OsG45 .Select__SelectInputDisplay--sVmS0, .Select__Select--is-open--vjFm4.Select__bottom-end--m7EWU .Select__SelectInputDisplay--sVmS0 {
  border-radius: 4px 4px 0 0;
}
.Select__Select--is-open--vjFm4.Select__top-start--b0kDN .Select__SelectInputDisplay--sVmS0 {
  border-radius: 0 0 4px 4px;
}

.Select__SelectOption--is-focused--vVCGA {
  background-color: var(--select-background-focused);
}

.Select__SelectOption--is-selected--jlQvp {
  background-color: var(--select-background-selected);
  color: var(--select-color-selected, inherit);
}

.Select__SelectInputContainer--MfeGV {
  position: relative;
}

.Select__SelectInputDisplay--sVmS0 {
  border: 1px solid #9CB2C7;
  background-clip: padding-box;
  background-color: var(--select-background);
  width: 100%;
  display: inline-block;
  border-radius: 4px;
  padding: 11px 15px;
  padding-right: 55px;
  cursor: var(--select-cursor);
}

.Select__SelectInputDisplay--is-disabled--Tt8KC {
  color: #9CB2C7;
}

.Select__SelectInputArrowContainer--g4wxR {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  cursor: var(--select-cursor);
}

.Select__SelectDropdown--jHkBA {
  background-color: var(--select-background);
  background-clip: padding-box;
  border-style: solid;
  border-color: #9CB2C7;
  right: 0;
  left: 0;
  z-index: 10000;
}
.Select__SelectDropdown--jHkBA.Select__top-start--b0kDN {
  border-width: 1px 1px 0 1px;
  border-radius: 4px 4px 0 0;
}
.Select__SelectDropdown--jHkBA.Select__bottom-start--OsG45, .Select__SelectDropdown--jHkBA.Select__bottom-end--m7EWU {
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 4px 4px;
}
.Select__SelectDropdown--jHkBA ul {
  overflow: auto;
  height: min-content;
  max-height: 30vh;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Select__SelectOption--MHUEB {
  border-bottom: 1px solid #9CB2C7;
  cursor: pointer;
  padding: 12px 15px;
}

.Select__SelectOption--MHUEB:last-of-type {
  border-bottom: none;
}

.Select__SelectOptionDisplay--VxlfL {
  color: #3E586F;
  cursor: pointer;
  padding: 12px 15px;
  text-align: center;
}

.Select__InputPlaceholder--WaJQx {
  color: #5C81A3;
}

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

.Select__SelectOptionWithThumbnail--BkKHz {
  display: flex;
  align-items: center;
  gap: 10px;
}

.Select__SelectOptionThumbnailWrap--_zRpV {
  position: relative;
  width: 28px;
  height: 22px;
  flex-shrink: 0;
}

.Select__SelectOptionThumbnail--Tx2KA {
  width: 44px;
  height: 44px;
  position: absolute;
  top: -11px;
  left: -15px;
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border-radius: 3px;
}
.index__ColourIcon--tJxgm {
  position: relative;
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 4px;
}

.index__ColourIcon--tJxgm:not(.index__Empty--M9CuI, .index__Bordered--TdwAt) {
  box-shadow: 1px 1px 5px 0px rgba(28, 39, 49, 0.35);
}

.index__ColourIcon--tJxgm.index__Empty--M9CuI {
  border: 1px solid #9CB2C7;
}

.index__ColourIcon--tJxgm.index__Empty--M9CuI:before {
  content: "";
  position: absolute;
  width: 23px;
  height: 1px;
  background-color: #9CB2C7;
  top: 9px;
  left: -3px;
  transform: rotate(134deg);
}

.index__ColourIcon--tJxgm.index__Bordered--TdwAt {
  border: 1px solid #9CB2C7;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

body.ReactModal__Body--open {
  overflow: hidden;
}

.index__ModalOverlay--B60v7 {
  background-color: rgba(28, 39, 49, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index__ModalContainer--Wp5HY {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
}
.index__ModalContainer--Wp5HY.index__Theme-Light--zlTUG {
  background-color: #EFF2F6;
}
.index__ModalContainer--Wp5HY.index__Theme-Dark--M89cp {
  background-color: #2D3F50;
}

.index__small--zClqJ,
.index__standard--rP5YN,
.index__large--NkUIJ {
  /* `vh` reflects the largest possible viewport (address-bar-hidden state),
   * so `90vh` can exceed 90% of the currently visible area on Chromium-based
   * browsers when the URL/tab bar is visible. `dvh` adjusts dynamically to
   * the visible viewport, which keeps the modal inside the viewport for
   * users who haven't auto-hidden their browser chrome. The vh fallback
   * handles older browsers. */
  max-height: 90vh;
  max-height: 90dvh;
  max-width: 90vw;
  max-width: 90dvw;
}

.index__standard--rP5YN {
  width: 800px;
}

.index__large--NkUIJ {
  width: 1000px;
}

.index__full_screen--MAjYH {
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  overflow: hidden;
}

.index__Close--yC9Wk {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  color: #3E586F;
  z-index: 20001;
}
.index__ModalLayout--wDQ23 {
  display: grid;
  max-height: 90vh;
  background-color: #EFF2F6;
  /* The cmyk row only renders when the field opts in; with max-content it
     collapses to nothing otherwise. */
  grid-template-rows: max-content max-content 1fr max-content auto max-content;
  grid-template-areas: "header" "input" "picker" "cmyk" "colours" "ModalFooter";
}
.index__ModalLayout--wDQ23 > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Input--nRscz {
  grid-area: input;
  margin-top: 20px;
  margin-bottom: 20px;
  --input-padding: 15px;
}

.index__ColourInputRemove--eU0te {
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: var(--input-padding);
  padding-left: var(--input-padding);
  cursor: pointer;
}

.index__Picker--RBLzN {
  grid-area: picker;
  margin-bottom: var(--picker-padding);
  --picker-padding: 20px;
  overflow: auto;
  max-height: 260px;
}

.index__PickerAllowNoneOn--Vlo4q .index__SaturationPointerContainer--__fwA {
  display: none;
}
.index__PickerAllowNoneOn--Vlo4q .index__HuePointerContainer--uWVo5 {
  display: none;
}
.index__PickerAllowNoneOn--Vlo4q .index__SliderContainer--nUujI .rc-slider-handle {
  display: none;
}
.index__PickerAllowNoneOn--Vlo4q .index__RgbItem--tv5pf input {
  --editable-input-color: transparent;
}

.index__PickerContainer--mmJ11 {
  display: flex;
  gap: var(--picker-padding);
  padding: var(--picker-padding);
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

@media (max-width: 740px) {
  .index__PickerContainer--mmJ11 {
    flex-wrap: wrap;
  }
}
.index__PickerSaturation--Tkail {
  width: 220px;
  height: 220px;
}

.index__SaturationPointerContainer--__fwA {
  position: absolute;
}

.index__SaturationPointer--qWTIJ {
  width: 20px;
  height: 20px;
  transform: translate(-10px, -10px);
  border-radius: 4px;
  background-color: transparent;
  border: 2px solid #FFFFFF;
}

.index__PickerHue--PPPOV {
  width: 45px;
  height: 220px !important;
}

.index__HuePointerContainer--uWVo5 {
  position: absolute;
}

.index__HuePointer--iJFa4 {
  width: 41px;
  height: 15px;
  transform: translate(0, -7.5px);
  border-radius: 4px;
  background-color: transparent;
  border: 2px solid #FFFFFF;
  margin-left: 2px;
}

.index__PickerRgb--Hy9vM {
  width: 60px;
}

.index__PickerSlider--NZq0A {
  width: 195px;
}

.index__PickerSliderContainer--zx81M {
  display: flex;
  align-items: center;
  gap: var(--picker-padding);
  height: 46px;
  margin-bottom: 5px;
}

.index__PickerSliderLabel--cTMaB {
  color: #3E586F;
  width: 8px;
}

.index__SliderContainer--nUujI {
  width: 100%;
}

.index__RgbItem--tv5pf {
  margin-left: 0;
  margin-bottom: 5px;
}

.index__RgbItem--tv5pf input {
  --editable-input-color: #1C2731;
  --editable-input-box-shadow: none;
  font-size: inherit;
  border-radius: 4px;
  height: 46px;
  border: 1px solid #9CB2C7;
  text-align: center;
  padding: 0 10px;
}

.index__Cmyk--h678x {
  grid-area: cmyk;
  margin-bottom: 20px;
  --input-padding: 15px;
}

.index__CmykLabel--BxK22 {
  font-weight: 600;
  margin-bottom: 5px;
}

.index__CmykHint--B_Mr_ {
  margin-top: 5px;
  color: var(--color-text-subtle, #6b7280);
}

.index__Colours--TR370 {
  grid-area: colours;
  --dropdown-padding: 15px;
  overflow: auto;
  max-height: 250px;
}

.index__ColoursContainer--mgiSY {
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.simple3__Layout--yyELh {
  display: grid;
  grid-template-rows: max-content minmax(0, auto) max-content;
  grid-template-areas: "header" "results" "ModalFooter";
}

.simple3__Header--szexD {
  grid-area: header;
}

.simple3__Results--kT4w7 {
  grid-area: results;
  overflow: auto;
}
.index__Theme-Light--BUqMg {
  background-color: #EFF2F6;
  color: #1C2731;
}
.index__Theme-Light--BUqMg .index__Subheading--mYd_z {
  color: #3E586F;
}

.index__Theme-Dark--oTo4R {
  background-color: #2D3F50;
  color: #FFFFFF;
}
.index__Theme-Dark--oTo4R .index__Subheading--mYd_z {
  color: #9CB2C7;
}

.index__ModalHeader--lm5Y7 {
  padding: 40px 0 20px 0;
}

.index__Subheading--mYd_z {
}
.index__ModalFooter--lCk0K {
  grid-area: ModalFooter;
  overflow: hidden;
}

@media all and (max-width: 600px) {
  .index__ModalFooter--lCk0K > div {
    flex-direction: column;
  }
}
.index__bordered--AACrg {
  border-top: 1px solid #9CB2C7;
}

.index__small--dL8g5 {
  padding: 20px 40px;
}

.index__large--qhk_W {
  padding: 40px;
}

.index__small--dL8g5 button {
  min-width: 180px;
}

.index__large--qhk_W button {
  min-width: 220px;
}
.rc-slider {
  position: relative;
  height: 18px;
  padding: 7px 0;
  width: 100%;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-rail {
  position: absolute;
  width: 100%;
  background-color: #DEE6ED;
  height: 4px;
  border-radius: 6px;
}

.rc-slider-track {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 6px;
  background-color: #abe2fb;
}

.rc-slider-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: pointer;
  cursor: -webkit-grab;
  margin-top: -3px;
  cursor: grab;
  border-radius: 50%;
  background-color: #1B9DDE;
  touch-action: pan-x;
}

.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}

.rc-slider-handle:focus {
  outline: none;
}

.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}

.rc-slider-handle:hover {
  border-color: #57c5f7;
}

.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.rc-slider-mark {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}

.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  color: #999;
}

.rc-slider-mark-text-active {
  color: #666;
}

.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}

.rc-slider-dot {
  position: absolute;
  bottom: 0px;
  margin-left: -3px;
  width: 4px;
  height: 4px;
  background-color: #9CB2C7;
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
}

.rc-slider-dot-active {
  border-color: #1B9DDE;
}

.rc-slider-dot-reverse {
  margin-right: -4px;
}

.rc-slider-disabled {
  background-color: #e9e9e9;
}

.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  border-color: #ccc;
  box-shadow: none;
  background-color: #fff;
  cursor: not-allowed;
}

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}

.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}

.rc-slider-vertical .rc-slider-rail {
  height: 100%;
  width: 4px;
}

.rc-slider-vertical .rc-slider-track {
  left: 5px;
  bottom: 0;
  width: 4px;
}

.rc-slider-vertical .rc-slider-handle {
  margin-left: -5px;
  touch-action: pan-y;
}

.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}

.rc-slider-vertical .rc-slider-step {
  height: 100%;
  width: 4px;
}

.rc-slider-vertical .rc-slider-dot {
  left: 2px;
  margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:first-child {
  margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:last-child {
  margin-bottom: -4px;
}

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  display: block !important;
  animation-play-state: paused;
}

.rc-slider-tooltip-zoom-down-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  display: block !important;
  animation-play-state: paused;
}

.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}

.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}
.rc-slider-tooltip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-tooltip-hidden {
  display: none;
}

.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}

.rc-slider-tooltip-inner {
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}

.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}
.TextInput__TextInput--h1mxL {
}
@charset "UTF-8";
/*
 * MergeTagBuilderModal styling
 *
 * The modal renders inside the `FULL_SCREEN` Modal container (inset
 * `$spacing_large` from every edge of the viewport). Vertical structure:
 *
 *   ModalHeader     (fixed)
 *   .Body           (flex 1, internal split)
 *     .Conditionals (flex 1, scrolls — builder, left)
 *     .PreviewPane  (fixed 480px, scrolls internally — preview, right)
 *   ModalFooter     (fixed)
 *
 * The body uses `flex-direction: row` to place the builder on the left
 * and the preview on the right. Each side scrolls independently so the
 * preview stays visible no matter how tall the row tree grows.
 */
.MergeTagBuilderModal__ModalLayout--agXBT {
  /*
   * Flex column layout: header / body / footer. We deliberately stick
   * with flex (not grid) here because `<ModalHeader>` and `<ModalFooter>`
   * compose `grid-area: header` / `grid-area: ModalFooter` from
   * `simple3.css`, which are no-ops under flex but actively place the
   * children into phantom grid areas under `display: grid`, collapsing
   * the header and breaking the modal width.
   *
   * The Modal's `FULL_SCREEN` variant positions the container with
   * `top/left/right/bottom: $spacing_large`, so `height: 100%` makes
   * this layout fill that available space exactly.
   */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.MergeTagBuilderModal__ModalLayout--agXBT > div {
  padding-left: 40px;
  padding-right: 40px;
}

.MergeTagBuilderModal__Body--f0mgw {
  /*
   * `flex: 1 1 0` (basis = 0, NOT `auto`) is the critical bit: with
   * `flex-basis: auto` the engine resolves the basis from the body's
   * content height first — when the if/elif tree is taller than the
   * available room, that intrinsic height blows the body past the
   * remaining flex space and pushes the footer below the modal's
   * `overflow: hidden` clip (the "Save/Cancel partially hidden" bug).
   *
   * `flex-basis: 0` makes the body start at zero height and grow to
   * fill exactly the remaining flex space; combined with `min-height: 0`
   * + `overflow: hidden` (so .Conditionals can shrink/scroll inside a
   * bounded body), the footer is always reserved its natural height.
   *
   * Children flow horizontally: the row builder on the left and the
   * preview pane on the right. Each scrolls independently.
   */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  padding-top: 5px;
  padding-bottom: 20px;
  gap: 40px;
  overflow: hidden;
}

/*
 * Make sure the header and footer don't shrink below their content size.
 * `flex-shrink: 0` keeps them at their natural height even when the
 * viewport gets short; the body absorbs all remaining space.
 */
.MergeTagBuilderModal__ModalLayout--agXBT > :first-child,
.MergeTagBuilderModal__ModalLayout--agXBT > :last-child {
  flex-shrink: 0;
}

.MergeTagBuilderModal__Conditionals--iuXKX {
  flex: 1 1 auto;
  /* min-height: 0 is essential: without it, this flex item won't shrink
   * below the intrinsic height of the if/elif tree, which then forces
   * the body to overflow downward and hides the footer's Save/Cancel. */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Restore the natural side-padding the parent's `>div` rule strips,
   * so the scrollbar doesn't sit flush against the rows. */
  padding-right: 5px;
  margin-right: -5px;
}

/* ---- Rows ------------------------------------------------------------- */
.MergeTagBuilderModal__RowList--_oIvM {
  display: flex;
  flex-direction: column;
  /* spacing_normal (10px) gives enough breathing room between siblings
   * that the per-row divider doesn't feel cramped, while still keeping
   * dense tag-heavy templates compact. */
  gap: 10px;
}

.MergeTagBuilderModal__Row--KWbHP {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top-level rows (direct children of .Conditionals > .RowList) get a
 * subtle horizontal rule beneath them so each independent section reads
 * as its own block. Nested rows inside a .Block don't get this treatment
 * — their grouping is signalled by the block's left rail instead. */
.MergeTagBuilderModal__Conditionals--iuXKX > .MergeTagBuilderModal__RowList--_oIvM > .MergeTagBuilderModal__Row--KWbHP {
  padding-bottom: 10px;
}

.MergeTagBuilderModal__Conditionals--iuXKX > .MergeTagBuilderModal__RowList--_oIvM > .MergeTagBuilderModal__Row--KWbHP:not(:last-child) {
  border-bottom: 1px solid #9CB2C7;
}

/*
 * The row now stacks vertically: a header strip (kind-picker pills on
 * the left, remove-row X on the right) sits above a full-width config
 * area. The previous horizontal layout reserved a fixed 160px cell for
 * the kind <Select>, which crowded the merge-tag predicate / text
 * fields beside it; moving the kind picker into the header strip lets
 * the config field span the entire row.
 */
.MergeTagBuilderModal__RowMain--ZeKKx {
  display: flex;
  flex-direction: column;
  /* Gap separates the kind-picker pill row from the config field below.
   * `$spacing_normal` gives the pills clear vertical breathing room
   * (the previous `$spacing_small` felt cramped against the input). */
  gap: 10px;
}

.MergeTagBuilderModal__RowHeader--fyoWr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/*
 * Pill-style radio group for the row kind. Mirrors the "Sets" filter
 * pills on `MergeTagLibraryModal.css` (`.SetPill` / `.SetPillActive`)
 * for cross-modal consistency — same border, padding, colours, hover,
 * and active states. The native radio is hidden; the <label> paints
 * the visual state and is kept in the DOM so screen readers announce
 * the radio group correctly.
 */
/*
 * The Text row's rich-text / plain toggle. Sits between the kind pills
 * and the remove button, pushed to the right so it reads as a property
 * of the row rather than a fourth kind option.
 */
.MergeTagBuilderModal__RichTextToggle--zGIHZ {
  flex: 0 0 auto;
  white-space: nowrap;
}

.MergeTagBuilderModal__KindPills--c7D8X {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.MergeTagBuilderModal__KindPill--AdN45 {
  display: inline-flex;
  align-items: center;
  border: 1px solid #3E586F;
  background: #FFFFFF;
  color: #3E586F;
  border-radius: 4px;
  padding: 5px 15px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.MergeTagBuilderModal__KindPill--AdN45:hover {
  background: #EFF2F6;
}

.MergeTagBuilderModal__KindPillActive--noayW,
.MergeTagBuilderModal__KindPillActive--noayW:hover {
  background: #3E586F;
  color: #FFFFFF;
  border-color: #3E586F;
}

.MergeTagBuilderModal__KindPill--AdN45 input {
  display: none;
}

.MergeTagBuilderModal__ConfigCell--vyk1O {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Text row ---------------------------------------------------------- */
/* Wrapper around <TextInput> inside a Text row so the input fills the
 * remaining horizontal space at the same height as the kind <Select>. */
.MergeTagBuilderModal__TextRowField--X6l3U {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.MergeTagBuilderModal__TextRowField--X6l3U > * {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Wrapper around <RichTextInput> inside a Text row, used when the
 * builder was opened from a rich text host. Unlike `.TextRowField` this
 * stacks rather than centring: TinyMCE renders a toolbar above a fixed
 * height editing surface, so the row grows to fit it instead of trying
 * to line up with the kind <Select>.
 */
.MergeTagBuilderModal__TextRowRichField--tKDxf {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

/*
 * TinyMCE measures its own chrome and cannot shrink below it. Give the
 * editor room without letting a single row swallow the modal — the
 * builder is a list of rows, so each one has to stay scannable.
 */
.MergeTagBuilderModal__TextRowRichField--tKDxf .tox-tinymce {
  max-height: 320px;
}

/* ---- If / For inline configuration ----------------------------------- */
/*
 * A row whose configuration needs more than one line: a leading config
 * line plus whatever editor stacks under it. Children align as separate
 * flex rows so their cells line up vertically down the group.
 */
.MergeTagBuilderModal__RowConfigGroup--_Taxe {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

/*
 * Predicate rows + a trailing "+ Add condition" button for an
 * `{% if %}` / `{% elif %}` branch. The first row is the main predicate
 * (with the `If` / `Elif` keyword); subsequent rows are extra predicates
 * joined by the branch's connector (AND/OR).
 */
.MergeTagBuilderModal__IfConfigGroup--izBBx {
}

/*
 * If / For row config layout. Children are centred vertically so the kind
 * select, IF/FOR keyword, operator dropdown, and X button all align with
 * the middle of the (taller) merge-tag TextInput cell beside them.
 *
 * The merge-tag fields are now `<TextInput>` instances (see TagInputCell)
 * rather than the old custom TagPicker, so the row is naturally taller —
 * the TextInput's toolbar (with the "Insert merge tag" library button)
 * sits above the input field. Centre alignment keeps the visual weight
 * balanced for the operator + keyword chips sitting next to it.
 */
.MergeTagBuilderModal__IfConfig--slc1r,
.MergeTagBuilderModal__ForConfig--AEmAL {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}

/* Allow each cell inside an If/For predicate to shrink so the value field
 * stays inline with the operator instead of wrapping onto a new line. */
.MergeTagBuilderModal__IfConfig--slc1r > *,
.MergeTagBuilderModal__ForConfig--AEmAL > * {
  min-width: 0;
}

.MergeTagBuilderModal__BranchKeyword--W86b_ {
  color: #3E586F;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-width: 28px;
}

/*
 * "active" pill marking whichever branch the current Preview context
 * selects. Green "live" palette, matching the field-level active-branch
 * badges (FieldVisibilityWrapper / BranchSlots). Cosmetic read-out only —
 * it does not change the authored Django.
 *
 * For If / Elif it sits on its OWN line above the predicate row
 * (`.BranchActiveLead`) so it never competes for horizontal space with the
 * tag / operator / value cells — adding it inline shoved those cells to
 * the right. For the Else block label it's used inline (that row has no
 * inputs to displace).
 */
.MergeTagBuilderModal__BranchActiveLead--NdV96 {
  align-self: flex-start;
  display: flex;
  margin-bottom: -2px;
}

.MergeTagBuilderModal__BranchActiveBadge--vbTNG {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 9px;
  border: 1px solid #30C071;
  background: rgba(80, 211, 139, 0.16);
  color: #1e7e44;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.MergeTagBuilderModal__Separator--TY3Yq {
  color: #3E586F;
  white-space: nowrap;
}

.MergeTagBuilderModal__OperatorCell--pC3za {
  flex: 0 1 180px;
  min-width: 120px;
}

/* The Include row's component dropdown. */
.MergeTagBuilderModal__IncludeSelectCell--ek6IO {
  flex: 1 1 auto;
  min-width: 220px;
}

/* Stands in for the operator dropdown when the tag is `forloop.first` /
 * `forloop.last`, which have no value to compare. */
.MergeTagBuilderModal__LoopFlagNote--fRhko {
}

/*
 * Layout-only wrapper around the `<CheckboxInput>` that sits leftmost
 * inside a `.IfConfig` row, between the `If`/`Elif` keyword (or the
 * AND/OR connector cell on additional predicate rows) and the tag
 * input. The checkbox negates the WHOLE predicate
 * (`{% if not foo == "x" %}`) — see the comment in `PredicateRow` for
 * why it lives in the leading position.
 *
 * `flex: 0 0 auto` keeps the control at its intrinsic size when the
 * row shrinks so the tag / operator / value cells absorb the slack
 * instead. Visuals (box, checkmark, slate accent, "Not" label) come
 * from `CheckboxInput` itself — keep this rule purely about row
 * layout to avoid drifting from the shared checkbox styling.
 */
.MergeTagBuilderModal__NegateCheckbox--ent_S {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/*
 * Cell occupying the position of the `If` / `Elif` keyword on the FIRST
 * additional-predicate row. Hosts the AND/OR `<Select>` so the
 * connector dropdown lines up visually beneath the keyword above it.
 * Subsequent additional-predicate rows show `.ConnectorLabel` (a
 * static keyword) in the same slot for visual continuity.
 *
 * Width must accommodate the Select's internal padding (15px left +
 * 55px right for the chevron) plus the "AND"/"OR" label, otherwise the
 * label gets ellipsised to "A..".
 */
.MergeTagBuilderModal__ConnectorCell--HzSQu {
  flex: 0 1 110px;
  min-width: 110px;
}

.MergeTagBuilderModal__ConnectorLabel--EBk3R {
  color: #3E586F;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* Match the width of .ConnectorCell so the tag input below lines up
   * with the one above. The select cell has internal padding so the
   * bare label needs explicit width to occupy the same horizontal slot. */
  width: 110px;
  min-width: 110px;
  text-align: center;
}

/* ---- TextInput wrapper cells for If / Elif / For rows ----------------- */
/*
 * The merge-tag / collection / value / item TextInput is wrapped in one
 * of these flex cells so it expands to fill the available row width. The
 * inner `> *` rule lets the InputBox-wrapper that `<TextInput>` renders
 * stretch to the cell's width (without this, the InputBox would size to
 * its content and leave whitespace inside the cell).
 */
.MergeTagBuilderModal__TagInputCell--XUOZb {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
}

.MergeTagBuilderModal__TagInputCell--XUOZb > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* The value input (next to the operator dropdown) gets a smaller default
 * basis since users tend to type short comparison values; the cell still
 * grows when extra space is available. */
.MergeTagBuilderModal__ValueInputCell--M_86h {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
}

.MergeTagBuilderModal__ValueInputCell--M_86h > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* The For row's loop-variable name field. Fixed-ish width — the variable
 * name is usually short (`item`, `customer`, `o`), so we don't grow it
 * past a comfortable reading width. */
.MergeTagBuilderModal__ItemInputCell--PouKd {
  flex: 0 1 160px;
  min-width: 100px;
  display: flex;
}

.MergeTagBuilderModal__ItemInputCell--PouKd > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Remove buttons ---------------------------------------------------- */
.MergeTagBuilderModal__RemoveButton--O37AL {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #3E586F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.MergeTagBuilderModal__RemoveButton--O37AL:hover {
  background: #EFF2F6;
  color: #1C2731;
}

.MergeTagBuilderModal__InlineRemove--arCix {
  background: none;
  border: none;
  color: #3E586F;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 5px;
}

.MergeTagBuilderModal__InlineRemove--arCix:hover {
  color: #1C2731;
}

/* ---- Nested block (Then / Else / loop body / elif) ------------------ */
/*
 * A `.Block` wraps the rows under one branch of an If/For (Then, Elif body,
 * Else, or Loop body). The visual identity is:
 *   - 2px grey left rail (clear "this group belongs together" signal)
 *   - small left margin so the rail sits clear of the parent row's content
 *   - generous left padding so child rows don't crowd the rail
 *   - vertical gap between the label and its rows / between sibling rows
 */
.MergeTagBuilderModal__Block--BkSTQ {
  margin-top: 10px;
  margin-left: 10px;
  padding: 5px 0 5px 15px;
  border-left: 2px solid #9CB2C7;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * Section header for each branch ("Then", "Elif", "Else", "Loop body").
 *
 * The ::after element grows to fill the remaining width as a 1px rule,
 * giving every branch a clear, full-width separator that visually closes
 * off the previous group of rows. When the label has inline action buttons
 * (e.g. the "remove else" link on the Else label), the rule sits to the
 * right of those buttons — that's intentional, the rule is the
 * section-end marker rather than text underline.
 */
.MergeTagBuilderModal__BlockLabel--CuXaL {
  color: #3E586F;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.MergeTagBuilderModal__BlockLabel--CuXaL::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #9CB2C7;
}

/*
 * Non-editable placeholder shown inside an `if` / `for` body when the
 * modal is in `restrictToBlockWrap` mode. The body is the wrapped
 * field's own content, so there are no rows to edit here — just a
 * label hinting at what will sit inside the wrap at render time.
 */
.MergeTagBuilderModal__BlockWrapBodyPlaceholder--FNUuV {
  color: #3E586F;
  font-style: italic;
  padding: 5px 15px;
  background: #EFF2F6;
  border-radius: 4px;
  align-self: flex-start;
}

/*
 * Branched field-wrap guidance: tells the author that each elif/else
 * branch they add gets its own modules editor under the field. Shown
 * only in `branchWrap` mode, just above the Add elif / Add else
 * affordances. Replaces the banner that used to sit under the field.
 */
.MergeTagBuilderModal__BranchWrapHint--v74DR {
  color: #3E586F;
  padding: 5px 15px;
}

/* ---- "+ Add row / + Add elif / + Add else" buttons ------------------ */
.MergeTagBuilderModal__AddRowButton--UvE8_,
.MergeTagBuilderModal__AddRootRowButton--WqBCp {
  background: none;
  border: 1px dashed #9CB2C7;
  color: #3E586F;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 4px;
  align-self: flex-start;
  font-weight: 500;
}

.MergeTagBuilderModal__AddRowButton--UvE8_:hover,
.MergeTagBuilderModal__AddRootRowButton--WqBCp:hover {
  background: #EFF2F6;
  color: #1C2731;
  border-color: #3E586F;
}

.MergeTagBuilderModal__AddRootRowButton--WqBCp {
  /* Sits at the end of the .Conditionals scrolling area, just below the
   * last top-level row. The extra top margin pushes it clear of the
   * last row's bottom divider so it reads as a distinct "add a new
   * section" affordance rather than being attached to that row. */
  margin-top: 10px;
}

.MergeTagBuilderModal__AddElse--Ibrol {
}

.MergeTagBuilderModal__AddElif--o9H5Z {
  border-style: solid;
}

/*
 * Trailing "+ Add condition" button inside an If / Elif branch's
 * `.IfConfigGroup`. Sits flush-left below the predicate rows so the
 * affordance reads as part of the same predicate editor rather than a
 * separate block-level action.
 */
.MergeTagBuilderModal__AddCondition--hmWyL {
  align-self: flex-start;
  margin-left: 28px; /* aligns under the tag input cell, past the keyword */
}

/*
 * Container for the block-level "+ Add elif" / "+ Add else" buttons at
 * the bottom of an If block. Renders them on a single horizontal row
 * instead of stacking them vertically (the default for elements inside
 * the column-flex `.Block`).
 *
 * `flex-wrap: wrap` lets the buttons drop to a second line on very
 * narrow modals; in practice the modal is wide enough that they always
 * fit on one line.
 */
.MergeTagBuilderModal__BlockActions--N8XSl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* ---- Preview pane (always visible on the right of the body) -------- */
/*
 * Right-hand column. Sized to roughly 1/3 of the viewport so the preview
 * scales with available screen width, with a `320px` floor on narrow
 * viewports before the builder column has to give up width.
 * Full body height; internal `.Preview` scrolls.
 */
.MergeTagBuilderModal__PreviewPane--I3wIt {
  flex: 0 0 33.3333vw;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid #9CB2C7;
  padding-left: 40px;
  min-height: 0;
}

.MergeTagBuilderModal__PreviewLabel--P29jf {
  color: #3E586F;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

/*
 * "updating…" / "couldn't convert" next to the Preview heading. The RML
 * conversion is a server round trip, so the pane can briefly hold the
 * previous value; this says so without shouting. Deliberately quiet —
 * lowercase and unemphasised against the uppercase label.
 */
.MergeTagBuilderModal__PreviewStatus--XB_lJ {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #9CB2C7;
}

/* The wrapper that holds the PreviewCode. Internally scrolls. Visual
 * treatment lives on this element so the inner <pre> emitted by
 * <PreviewCode> can be a pure typography container.
 *
 * Light "code block" treatment: cool-grey surface against the modal's
 * silver body so the preview reads as a distinct code region without
 * the heavy "syntax editor" look the previous dark navy gave it. The
 * grey border and subtle inset top-line provide just enough separation
 * from the body without competing for attention. */
.MergeTagBuilderModal__Preview--bbxCn {
  flex: 1 1 auto;
  overflow: auto;
  background: #DEE6ED;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(28, 39, 49, 0.04);
}
@charset "UTF-8";
/*
 * `name = value` argument rows for an `{% include … with %}` /
 * `{% with %}` builder row.
 *
 * The layout deliberately echoes the compound-predicate editor in
 * MergeTagBuilderModal.css (`.IfConfigGroup` / `.IfConfig`): a column of
 * rows, each one a leading keyword cell followed by inputs, with the
 * "add another" affordance flush-left underneath. Same shape, so an
 * author who has met one recognises the other — the keyword cells even
 * share a width so the inputs line up down the column.
 *
 * Shared visuals (keyword, add button, remove button) compose from the
 * modal's stylesheet rather than being restated here, so a change to the
 * builder's look lands in both places at once.
 */
.BlockTagArgsEditor__ArgsGroup--rQxFt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

/*
 * One argument. Bottom-aligned, NOT centred like the single-row
 * `.IfConfig` / `.ForConfig` layouts: the value cell is taller than its
 * neighbours (a merge-tag `<TextInput>` carries the "Insert merge tag"
 * toolbar above its input, the plain name field doesn't), and centring
 * left the name's text sitting visibly below the value's. Aligning to
 * the bottom puts both text lines on the same line, which is what the
 * eye follows when reading a column of `name = value` rows.
 */
.BlockTagArgsEditor__ArgRow--ezmGB {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

/* Let every cell shrink so a long value stays on the row instead of
 * wrapping the `=` onto a line of its own. */
.BlockTagArgsEditor__ArgRow--ezmGB > * {
  min-width: 0;
}

/*
 * The `WITH name =` band. Its own children are centred against the name
 * field — the tallest thing in it — so the keyword and the `=` sit on
 * the name's text line rather than floating above or below it.
 */
.BlockTagArgsEditor__ArgLead--pt0VR {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
}

/*
 * "WITH" on the first row, "AND" on the rest. A fixed basis (rather than
 * a width, which would fight the composed rule's own `min-width`) keeps
 * the name fields lined up down the column — the same trick
 * `.ConnectorLabel` uses in the predicate editor.
 */
.BlockTagArgsEditor__ArgKeyword--B6sj4 {
  flex: 0 0 44px;
}

/* The bound name. Short by nature (`total`, `supply_point`), so it gets
 * a modest fixed-ish basis and leaves the slack to the value cell. */
.BlockTagArgsEditor__ArgNameCell--YtVMZ {
  flex: 0 1 200px;
  min-width: 110px;
  display: flex;
}

.BlockTagArgsEditor__ArgNameCell--YtVMZ > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* The literal `=` between the two fields — the character that ends up in
 * the Django, shown rather than implied. Monospace so it reads as syntax
 * next to the prose-ish keyword cell. */
.BlockTagArgsEditor__ArgEquals--IP8dh {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #3E586F;
  flex: 0 0 auto;
  font-weight: 600;
}

/* The bound expression — usually a merge tag chip, so it takes the
 * remaining width. */
.BlockTagArgsEditor__ArgValueCell--HttFQ {
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
}

.BlockTagArgsEditor__ArgValueCell--HttFQ > * {
  flex: 1 1 auto;
  min-width: 0;
}

.BlockTagArgsEditor__RemoveArgButton--ylzvO {
  flex: 0 0 auto;
}

/*
 * Sits under the rows, indented to the name field's left edge so it
 * reads as "another one of these" rather than a row-level action.
 * Matches `.AddCondition` in the predicate editor.
 */
.BlockTagArgsEditor__AddArgButton--PiuSb {
  margin-left: 52px;
}

.BlockTagArgsEditor__ArgsHint--tge09 {
  color: #3E586F;
  margin: 5px 0 0 52px;
}
@charset "UTF-8";
/*
 * Light "code block" styled preview for the rendered Django output.
 * Sits on a cool-grey surface (see `.Preview` in MergeTagBuilderModal.css)
 * with dark-on-light syntax highlighting tuned so each token type stays
 * readable against the grey background while still feeling like syntax
 * highlighting (not just bold/italic prose).
 *
 * The {{ tag }} chips here intentionally match the chip treatment used by
 * `<MergeTagInput>` inside text inputs / textareas — white pill, fine
 * grey border, charcoal text — so the visual vocabulary is consistent
 * across "preview of the rendered string" and "live editing of a merge
 * tag".
 */
.PreviewCode__Pre--B9HQy {
  /* Reset of the parent .Preview pre (which is overridden in
   * MergeTagBuilderModal.css to set spacing/sizing). The `.Pre` class is
   * the inner element rendered by <PreviewCode> itself. */
  margin: 0;
  display: block;
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1C2731;
}

/* Plain literal text between tags / blocks renders as dark-on-light text. */
.PreviewCode__Literal--NoIcY {
  color: #1C2731;
}

/* Inline {{ tag }} expression. Rendered as syntax-highlighted code (no
 * background/border) — the `{{` `}}` punct + identifier colour carry the
 * meaning, matching the look of {% … %} block tokens.
 *
 * `inline-block` keeps a short tag on one line (it shrink-wraps) while a
 * tag longer than the container breaks onto continuation lines inside
 * its own box — the inherited pre-wrap / break-word do the wrapping.
 * Plain inline text with `nowrap` instead overflowed the hover card
 * horizontally, where it was clipped and unreachable. */
.PreviewCode__Tag--qmFok {
  display: inline-block;
}

/* {% … %} block wrapper. Doesn't carry visual weight — the punct + keyword
 * spans inside do the work. */
.PreviewCode__Block--tsnfA {
  /* No visual treatment of its own. */
}

/*
 * Light-theme syntax palette. Each token uses the saturated "low" variant
 * of its colour family so it remains legible against the cool-grey
 * surface while still being distinguishable at a glance:
 *
 *   .Punct      slate     {%  %}  {{  }}  ,  :  etc.
 *   .Keyword    sky-blue  if / elif / else / endif / for / endfor / in / not
 *   .Operator   yellow    ==  !=  >=  <=  >  <
 *   .Identifier dark-blue tag names inside {% … %} (e.g. order.total)
 *   .String     green     quoted predicate values
 */
.PreviewCode__Punct--x4iGM {
  color: #3E586F;
}

.PreviewCode__Plain--PGX6T {
  color: #1C2731;
}

.PreviewCode__Keyword--kxNdw {
  color: #168ECA;
  font-weight: 600;
}

.PreviewCode__Operator--ruaWp {
  color: #FFB00F;
}

.PreviewCode__Identifier--tWyBn {
  color: #106793;
}

.PreviewCode__String--yvCqM {
  color: #30C071;
}
@charset "UTF-8";
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Main--Jcz_S {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-family: monospace;
  letter-spacing: 0;
  /* Let the host control the scroll surface — wrapping the highlighter
   * in a flex/scroll container is more flexible than baking overflow
   * into the <pre> here. */
  box-sizing: border-box;
}
@charset "UTF-8";
/*
 * FilterChainEditor styling
 *
 * Sits inside a `.PanelBody` in MergeTagLibraryModal, so it deliberately
 * carries no border or background of its own — the host panel supplies
 * the card.
 *
 *   .Root
 *     .Empty | (.OrderHint + .Rows)
 *     .AddButton
 *
 * Each `.Row` is a two-line block: the controls line (`.RowMain`, a flex
 * row of ordinal / filter select / argument / actions) with a help line
 * (`.RowHelp`) beneath it, indented to clear the ordinal.
 */
.FilterChainEditor__Root--FNwtV {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.FilterChainEditor__Empty--s_njL {
  color: #3E586F;
  font-style: italic;
}

.FilterChainEditor__OrderHint--JeCeJ {
  color: #3E586F;
}

.FilterChainEditor__Rows--F1big {
  /* Reset the `<ol>` defaults — the ordinal is painted by `.Ordinal` so
   * the number stays inside the row's flex layout and lines up with the
   * controls rather than hanging in the margin. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.FilterChainEditor__Row--rcUZa {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #9CB2C7;
  min-width: 0;
}

.FilterChainEditor__Row--rcUZa:last-child {
  border-bottom: none;
}

.FilterChainEditor__RowMain--BqWJI {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.FilterChainEditor__Ordinal--pb5bc {
  flex: 0 0 auto;
  width: 1.25em;
  color: #3E586F;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * The filter name select takes the lion's share of the row. `min-width: 0`
 * on every flex cell is what lets the row shrink inside the modal's
 * narrow right-hand column instead of overflowing it.
 */
.FilterChainEditor__NameCell--CMXA5 {
  flex: 1 1 11em;
  min-width: 0;
}

.FilterChainEditor__PresetCell--QpyeT {
  flex: 1 1 11em;
  min-width: 0;
}

.FilterChainEditor__ArgCell--oo8Fs {
  flex: 0 1 7em;
  min-width: 0;
}

.FilterChainEditor__ArgInput--Irbvu {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 15px;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  background: #FFFFFF;
  color: #1C2731;
  font-family: inherit;
}

.FilterChainEditor__ArgInput--Irbvu:disabled {
  background: #EFF2F6;
  color: #3E586F;
}

.FilterChainEditor__RowActions--zMdwo {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.FilterChainEditor__MoveButton--BuSFs,
.FilterChainEditor__RemoveButton--TspEw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #3E586F;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.FilterChainEditor__MoveButton--BuSFs:hover:not(:disabled),
.FilterChainEditor__RemoveButton--TspEw:hover:not(:disabled) {
  background: #EFF2F6;
  border-color: #9CB2C7;
}

/*
 * Disabled arrows stay in the DOM at reduced contrast rather than being
 * hidden: removing the first row's "up" button would reflow the action
 * cluster and shift the remove button horizontally between rows.
 */
.FilterChainEditor__MoveButton--BuSFs:disabled,
.FilterChainEditor__RemoveButton--TspEw:disabled {
  opacity: 0.35;
  cursor: default;
}

.FilterChainEditor__RowHelp--D2153 {
  color: #3E586F;
  /* Indent past the ordinal so the help text aligns with the controls
   * above it, not with the row number. */
  padding-left: calc(1.25em + 5px);
  min-width: 0;
  word-break: break-word;
}

.FilterChainEditor__AddButton--CJ766 {
  align-self: flex-start;
  padding: 5px 15px;
  border: 1px dashed #9CB2C7;
  border-radius: 4px;
  background: none;
  color: #3E586F;
  cursor: pointer;
  font-family: inherit;
}

.FilterChainEditor__AddButton--CJ766:hover:not(:disabled) {
  background: #EFF2F6;
  color: #1C2731;
}

.FilterChainEditor__AddButton--CJ766:disabled {
  opacity: 0.5;
  cursor: default;
}
@charset "UTF-8";
/*
 * MergeTagLibraryModal styling
 *
 * Card-style "panels" layout: the body stacks three bordered cards
 * inside a 90vh-tall modal.
 *
 *   ModalHeader               (fixed)
 *   .Body                     (flex column, scroll-bounded)
 *     .SetsPanel              (row card — "Sets" label + group pills)
 *     .Columns                (grid: name | description+tag)
 *       .NamePanel            (column card — header + search + list)
 *       .RightColumn          (grid: description / tag)
 *         .DescriptionPanel   (column card — header + body)
 *         .TagPanel           (column card — header + body)
 *   ModalFooter               (fixed)
 *
 * Each `.Panel` is a thin-grey-bordered, slightly-rounded white card with
 * an optional `.PanelHeader` strip (faint cool-grey bg, label text) and
 * a scrollable `.PanelBody` underneath. The Sets panel deviates: its row
 * layout puts the "Sets" label inline with the pills instead of a strip.
 */
.MergeTagLibraryModal__ModalLayout--prZVI {
  /*
   * Flex column layout: header / body / footer. We deliberately stick
   * with flex (not grid) here because `<ModalHeader>` and `<ModalFooter>`
   * compose `grid-area: header` / `grid-area: ModalFooter` from
   * `simple3.css`, which are no-ops under flex but actively place the
   * children into phantom grid areas under `display: grid`, collapsing
   * the header and breaking the modal width.
   *
   * Match the parent Modal's `max-height: 90dvh` exactly so the layout
   * fills the modal precisely. `dvh` (dynamic viewport height) tracks
   * the currently visible viewport; the `vh` line is the fallback for
   * older browsers.
   */
  display: flex;
  flex-direction: column;
  height: 90vh;
  height: 90dvh;
}
.MergeTagLibraryModal__ModalLayout--prZVI > div {
  padding-left: 40px;
  padding-right: 40px;
}

.MergeTagLibraryModal__Body--rh7bN {
  /*
   * `flex: 1 1 0` (basis = 0, NOT `auto`) keeps the body bounded to
   * exactly the leftover flex space. Combined with `min-height: 0` and
   * `overflow: hidden`, the cards inside can scroll without pushing
   * the footer past the modal's clip.
   */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  padding-bottom: 20px;
  gap: 10px;
  overflow: hidden;
}

/* Header / footer never shrink below their natural height. */
.MergeTagLibraryModal__ModalLayout--prZVI > :first-child,
.MergeTagLibraryModal__ModalLayout--prZVI > :last-child {
  flex-shrink: 0;
}

/* ---- Generic panel (card) base ---------------------------------------- */
.MergeTagLibraryModal__Panel--aGOKA {
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.MergeTagLibraryModal__PanelHeader--WIWAv {
  background: #DEE6ED;
  padding: 10px 15px;
  font-weight: 500;
  /* Headers and labels use `$color_slate` to read as muted "section
   * labels" rather than primary content text. Matches the
   * `FilterLabel` colour in the shared FilterButtons component and
   * the section/label colour used elsewhere in the app. */
  color: #3E586F;
  border-bottom: 1px solid #9CB2C7;
  flex: 0 0 auto;
}

.MergeTagLibraryModal__PanelBody--nL2wJ {
  padding: 10px 15px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  color: #1C2731;
  word-break: break-word;
}

.MergeTagLibraryModal__PanelBodyPlaceholder--R0JUZ {
  color: #3E586F;
  font-style: italic;
}

/* ---- Sets panel ------------------------------------------------------- */
/*
 * Special row-layout panel: a "Sets" label on the left followed by one
 * pill per merge-tag group. No internal header strip — the row reads as
 * its own label + control pair. Explicit `background: $color_white`
 * (rather than relying solely on the composed `.Panel` rule) so the
 * card reads as a "panel body" sitting on the modal's silver surface,
 * matching the white interiors of the Name / Description / Tag panels.
 */
.MergeTagLibraryModal__SetsPanel--jYuSB {
  background: #FFFFFF;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
}

.MergeTagLibraryModal__SetsLabel--frZNM {
  font-weight: 500;
  /* Same muted label colour as `.PanelHeader` so all the modal's
   * section labels read with consistent visual weight. */
  color: #3E586F;
  flex: 0 0 auto;
}

.MergeTagLibraryModal__SetsPills--eyq5D {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
}

.MergeTagLibraryModal__SetPill--OIhFg {
  display: inline-flex;
  align-items: center;
  border: 1px solid #3E586F;
  background: #FFFFFF;
  color: #3E586F;
  border-radius: 4px;
  padding: 5px 15px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.MergeTagLibraryModal__SetPill--OIhFg:hover {
  background: #EFF2F6;
}

/*
 * Active pill uses the system's filter-button colour (`$color_slate`)
 * rather than the modal's charcoal so it reads as a "filter is on"
 * indicator instead of a heavy near-black chip. Matches the
 * `FilterButtons` component used elsewhere in the app.
 */
.MergeTagLibraryModal__SetPillActive--qutXn,
.MergeTagLibraryModal__SetPillActive--qutXn:hover {
  background: #3E586F;
  color: #FFFFFF;
  border-color: #3E586F;
}

/*
 * The actual radio input under each pill is invisible — the `<label>`
 * paints the visual state. Keep the input in the DOM so screen readers
 * announce the radio group correctly and `getByRole("radio")` selectors
 * keep working in tests.
 */
.MergeTagLibraryModal__SetPill--OIhFg input {
  display: none;
}

/* ---- Two-column body (Name | Description+Tag) ------------------------- */
.MergeTagLibraryModal__Columns--oVbfp {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  /* Force the implicit row to fill the flex track exactly — without
   * `minmax(0, 1fr)` the row defaults to `auto`, sizing to the tallest
   * cell's content and pushing the footer below the modal clip. */
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

/*
 * Name panel drops the rounded corners inherited from `.Panel`. The
 * search list rows extend the full width of the panel with their own
 * `border-bottom` dividers, and the rounded panel corners ended up
 * cutting into the bottom row's divider line awkwardly. Square
 * corners keep the row baselines aligned with the panel edges.
 */
.MergeTagLibraryModal__NamePanel--yh3WN {
  border-radius: 0;
}

/* ---- Search input (lives inside the Name panel, below its header) ----- */
/*
 * Styled as the topmost row of the list — same vertical rhythm as the
 * tag rows below — so the search field reads as part of the list
 * rather than a separate control. Border-bottom matches the row
 * separator above the first tag.
 */
.MergeTagLibraryModal__SearchInput--KFdEt {
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 15px;
  border: none;
  border-bottom: 1px solid #9CB2C7;
  background: #FFFFFF;
  color: #1C2731;
  box-sizing: border-box;
  font-family: inherit;
}

.MergeTagLibraryModal__SearchInput--KFdEt::placeholder {
  color: #3E586F;
}

/*
 * Suppress the focus background tint that the other text inputs in the
 * app apply. The search field sits as a list-row inside the Name
 * panel; tinting its background on focus made the row visually
 * "select" itself in a way the user found distracting.
 */
.MergeTagLibraryModal__SearchInput--KFdEt:focus {
  outline: none;
}

/* ---- Tag list inside the Name panel ----------------------------------- */
.MergeTagLibraryModal__List--V7mw8 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.MergeTagLibraryModal__Empty--P_Ghy {
  padding: 20px 15px;
  text-align: center;
  color: #3E586F;
}

.MergeTagLibraryModal__Item--Cvbza {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  /* List rows use `$color_slate` for the default state so the rows
   * read as scannable secondary content. The active row promotes to
   * `$color_charcoal` (+ bold) below so the current selection still
   * has clear visual weight. */
  color: #3E586F;
  box-sizing: border-box;
  /*
   * Explicitly square the row — native `<button>` elements pick up the
   * user-agent's default `border-radius` which is visible as a rounded
   * pill when the row's hover / active background paints; this keeps
   * the rows flush with the panel edges and each other.
   */
  border-radius: 0;
  /*
   * Every row carries its own bottom divider, including the last one.
   * The list scrolls inside the Name panel, and a missing bottom rule
   * on the final row leaves the row visually "floating" against the
   * panel border — the screenshot the user flagged showed this.
   * Keeping the divider on every row gives the list a consistent
   * baseline regardless of how many items it contains.
   */
  border-bottom: 1px solid #9CB2C7;
}

.MergeTagLibraryModal__Item--Cvbza:hover {
  background: #EFF2F6;
}

/*
 * The active row is signalled by the silver background only — text
 * weight and colour stay identical to the rest of the rows so the
 * list reads uniformly. The background paints the "selected"
 * affordance.
 */
.MergeTagLibraryModal__ItemActive--Lh3Wj,
.MergeTagLibraryModal__ItemActive--Lh3Wj:hover {
  background: #EFF2F6;
}

.MergeTagLibraryModal__ItemTitle--LPOlv {
  word-break: break-word;
}

/* ---- Right column (Description on top, Tag on bottom) ----------------- */
/*
 * Three stacked cards: Description, Filters, Tag.
 *
 * All three size to their CONTENT and pack to the top, leaving any
 * leftover height as empty space at the bottom of the column. Flex rather
 * than grid because grid tracks stretch to fill by default: giving
 * Filters `1fr` made a single-filter chain paint as an enormous empty
 * bordered box running most of the modal's height, which reads as broken
 * rather than as a card with room to grow.
 *
 * Only Filters may shrink. When a long chain runs the column out of room
 * it yields first and scrolls inside its own `.PanelBody` (which already
 * carries `overflow: auto`), so Description and Tag can never be pushed
 * out of view — Tag especially, since it's the live preview of what
 * Insert will actually emit.
 */
.MergeTagLibraryModal__RightColumn--wJ5JB {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

.MergeTagLibraryModal__DescriptionPanel--lepxC,
.MergeTagLibraryModal__TagPanel--HbQnb {
  flex: 0 0 auto;
}

/*
 * The one panel that must NOT clip its contents.
 *
 * `Select` positions its dropdown with floating-ui's default `absolute`
 * strategy and no portal, so the listbox is an ordinary absolutely-
 * positioned child. Any ancestor that clips or scrolls cuts it off — and
 * the `size()` middleware then measures `availableHeight` against that
 * clipped box, so the list renders both truncated AND mis-sized, drawn
 * over the rows behind it.
 *
 * `.Panel`'s `overflow: hidden` (which exists to keep the header's square
 * background inside the card's rounded corners) and `.PanelBody`'s
 * `overflow: auto` were both doing it. Corners are handled instead by
 * rounding `.FiltersHeader` directly.
 *
 * The cost is that a very long chain now grows the card rather than
 * scrolling inside it, and past roughly eight filters would run into the
 * modal body's own clip. Worth it: opening the filter dropdown is the
 * common interaction and chaining eight filters is not.
 */
.MergeTagLibraryModal__FiltersPanel--Xh06U {
  /*
   * Sizes to its rows and does NOT shrink. Shrinking only made sense
   * while the body could scroll; with `overflow: visible` a shrunken box
   * would let the rows spill over the Tag panel instead. Holding its
   * height means a long chain pushes Tag down the column — untidy at the
   * extreme, but never overlapping.
   */
  flex: 0 0 auto;
  overflow: visible;
}

/*
 * `.Panel` normally clips the header's square corners against its own
 * radius. With the clip gone the header has to round itself.
 */
.MergeTagLibraryModal__FiltersHeader--qOwfG {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.MergeTagLibraryModal__FiltersBody--dYbPE {
  overflow: visible;
}

.MergeTagLibraryModal__TagBody--Z4JuU {
  font-family: monospace;
  word-break: break-all;
}
.MergeTagDropdown__MergeTagDropdown--hNNtV {
  position: fixed;
  z-index: 10000;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 240px;
  overflow-y: auto;
  min-width: 220px;
  max-width: 320px;
  padding: 4px 0;
}

.MergeTagDropdown__GroupTitle--A8OV4 {
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary, #888);
  user-select: none;
}

.MergeTagDropdown__Item--zFo6w {
  padding: 6px 12px;
  cursor: pointer;
  display: block;
}

.MergeTagDropdown__Item--zFo6w:hover,
.MergeTagDropdown__ItemActive--Zky6P {
  background: var(--color-surface-hover, #f0f0f0);
}

.MergeTagDropdown__ItemTitle--CJ1ju {
  font-size: 13px;
  color: var(--color-text, #333);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.MergeTagDropdown__Tooltip--CyR15 {
  position: fixed;
  z-index: 10001;
  transform: translateY(-50%);
  background: var(--color-text, #222);
  color: var(--color-surface, #fff);
  font-family: monospace;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@charset "UTF-8";
/*
 * The contenteditable element backing `<MergeTagInput>`. Styled to read
 * as a native `<input>` (single-line) or `<textarea>` (multi-line)
 * inside the surrounding `InputBox` chrome.
 *
 * Composing `InputBoxInput` from `../InputBox.css` reuses the existing
 * input padding, font, background-colour, and width rules so chip-
 * enabled fields visually match the rest of the input library.
 */
.MergeTagInput__MergeTagInput--y3Tkb {
  outline: none;
  cursor: text;
  /*
   * The contenteditable needs a baseline height when empty so the user
   * has somewhere to click and start typing. `min-height` matches the
   * height a single line of text would take so the empty state visually
   * resembles an empty `<input>`.
   */
  min-height: 1.2em;
  /*
   * Block accidental display: flex/grid inheritance from a parent that
   * was sized for an `<input>` — `contenteditable` browsers occasionally
   * mis-render text alignment under those.
   */
  display: block;
  /*
   * Single-line default: behave like a real `<input>`. `white-space:
   * pre` preserves typed whitespace verbatim and prevents wrapping;
   * `overflow-x: auto` scrolls horizontally when content is wider than
   * the box (matching `<input>`'s native overflow behaviour);
   * `overflow-y: hidden` clamps the height to one line so the box
   * doesn't grow vertically as the user types past the visible width.
   *
   * The `Multiline` rule below overrides every one of these properties
   * for textarea-style usage.
   *
   * Trade-off: `overflow` on either axis clips the 3px selected-chip
   * outline at the box edges. The 4px vertical chip margin in the
   * single-line override below is zeroed out (chips never have a
   * neighbouring chip above/below in single-line mode), so the
   * outline collision the multiline mitigation prevents doesn't apply
   * here. The user still loses the top/bottom outline on a selected
   * chip — accepted as the cost of single-line layout fidelity.
   */
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  /* Containing block for the empty-state placeholder below. */
  position: relative;
}

.MergeTagInput__MergeTagInput--y3Tkb.MergeTagInput__Multiline--KCboS {
  /*
   * Match the legacy `<textarea>`'s fixed height. Without `max-height`
   * + `overflow-y: auto` the contenteditable div grows vertically to
   * fit its content (unlike a real `<textarea>` which scrolls inside a
   * fixed box). `min-height` keeps the empty-state affordance.
   *
   * Trade-off acknowledged in the file-level comment above: introducing
   * `overflow` clips the 3px selected-chip outline at the box edges.
   * Mitigated by the 4px vertical chip margin (lines 90-93) so the
   * outline stays inside the padding box for chips that aren't at the
   * very first/last line.
   */
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 8em;
  max-height: 8em;
  overflow-x: visible;
  overflow-y: auto;
}

.MergeTagInput__MergeTagInput--y3Tkb.MergeTagInput__Disabled--zv8YF,
.MergeTagInput__MergeTagInput--y3Tkb.MergeTagInput__Readonly--XBy7y {
  cursor: default;
}

/*
 * Empty-state placeholder. The contenteditable carries the placeholder
 * text on `data-placeholder` and a `data-empty="true"` flag set from
 * React (because `:empty` is fragile against zero-width nodes inserted
 * by some browsers post-focus). The flag drives the `::before` pseudo-
 * element that paints the placeholder.
 *
 * The placeholder is positioned out of the text flow. Clearing the field
 * leaves Chrome's placeholder `<br>` in the editor, and an in-flow
 * placeholder sits in front of it on the same line, so the caret would
 * blink at the end of the placeholder text (the far side of the box for
 * a long one) instead of at the start, where typing actually lands.
 */
.MergeTagInput__MergeTagInput--y3Tkb[data-empty=true]::before {
  content: attr(data-placeholder);
  color: #5C81A3;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
}

/*
 * Chip span styling — kept in sync (visually) with the rich-text editor's
 * `MERGE_TAG_CHIP_STYLE` rules so the same chip looks consistent across
 * editor surfaces.
 *
 * `:global(.merge-tag-chip)` because the chip class is shared with the
 * rich-text editor (the same class name lives in TinyMCE's content
 * iframe). Keeping the class global means we don't need CSS-module
 * name munging to find chip spans the editor injected.
 */
.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip {
  display: inline-block;
  padding: 0 4px;
  /*
   * Horizontal margin gives a visible gap between the chip and any
   * surrounding text caret / adjacent chip, so the cursor isn't flush
   * against the chip border when arrowing or clicking next to it.
   *
   * Vertical margin (`4px` top/bottom) gives the 3px selected-chip
   * outline space inside the padding box (so it isn't clipped by
   * `overflow-y: hidden` on the editor) and keeps consecutive chips
   * from colliding when long chips wrap onto multiple lines (multiline
   * mode only).
   */
  margin: 4px;
  border: 1px solid #BAE3F7;
  border-radius: 4px;
  background: #EDF7FD;
  color: #106793;
  font-weight: 500;
  user-select: none;
  /*
   * Default cursor (not pointer) because chips in plain-text inputs and
   * textareas don't open the merge-tag builder on click — they're just
   * read-only atomic visual representations of the underlying merge
   * tag. To edit a chip the user deletes it (Backspace skips across it
   * as one unit thanks to `contenteditable="false"`) and re-inserts a
   * fresh one via the toolbar.
   */
  cursor: default;
  line-height: inherit;
  vertical-align: baseline;
}

/*
 * A chip inside a formatting run has to LOOK formatted.
 *
 * The base chip rule above sets an explicit `font-weight: 500`, which
 * beats the weight inherited from an enclosing `<strong>` — so without
 * these overrides a merge tag sitting inside a bold run renders
 * identically to one outside it, even though the generated Django
 * wraps it in `<strong>` and the recipient's email shows it bold. The
 * editor would be quietly lying about the output.
 *
 * Both tag spellings are matched because `execCommand` emits `<b>` /
 * `<i>` in Chrome and Safari while the value → HTML repaint emits the
 * canonical `<strong>` / `<em>`; the DOM can hold either depending on
 * whether the run was just typed or repainted from the value.
 */
.MergeTagInput__MergeTagInput--y3Tkb strong .merge-tag-chip,
.MergeTagInput__MergeTagInput--y3Tkb b .merge-tag-chip {
  font-weight: 700;
}

.MergeTagInput__MergeTagInput--y3Tkb em .merge-tag-chip,
.MergeTagInput__MergeTagInput--y3Tkb i .merge-tag-chip {
  font-style: italic;
}

.MergeTagInput__MergeTagInput--y3Tkb u .merge-tag-chip {
  text-decoration: underline;
}

/*
 * Browser-native selection ring for `contenteditable="false"` chips,
 * surfaced when the user arrows onto / clicks the chip. Matches the
 * TinyMCE selection outline so the editor surfaces are consistent.
 */
/*
 * Selected-chip outline matches the rich-text editor's `[data-mce-
 * selected]` style (TinyMCE's `#b4d7ff`) so a selected chip looks the
 * same across the plain-text and richtext editing surfaces.
 */
.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip:focus,
.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip.is-selected,
.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip.mce-selected {
  outline: 3px solid #b4d7ff;
  outline-offset: 0;
}

.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip.is-selected::selection,
.MergeTagInput__MergeTagInput--y3Tkb .merge-tag-chip.is-selected *::selection {
  background: transparent;
}
@charset "UTF-8";
/*
 * Hover card for a merge tag chip.
 *
 * Same cool-grey code surface the builder's preview pane uses, so the
 * expression reads as the same kind of thing in both places. Sits above
 * modal content because a chip inside the builder can be hovered while
 * the modal is open.
 */
.index__Tooltip--oJXwF {
  /* Above the merge tag builder modal (20001) and the app's own overlay
   * layer (99999) — the card is portalled to the body, so it has to beat
   * whatever it's floating over rather than inherit a stacking context
   * from it. */
  z-index: 100000;
  /* Readable measure for the code; `shift` keeps the card inside the
   * viewport when the chip sits near an edge. Height is capped by the
   * `size` middleware at the space available next to the chip (inline
   * maxHeight), so a tall expression uses the whole viewport instead of
   * being clipped at a fixed measure; `overflow: auto` is only a last
   * resort for content taller than the screen. */
  max-width: 34em;
  overflow: auto;
  padding: 15px 10px;
  background: #DEE6ED;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(62, 88, 111, 0.18);
  /* The pointer is over the chip, not the card. Taking events would
   * make the chip's own mouseleave fire the moment the card lands
   * under the cursor, flickering it in and out. */
  pointer-events: none;
}

/*
 * The capped card clips its content (expression taller than the space
 * next to the chip). `overflow: auto` is only useful if the pointer can
 * reach the scrollbar, so here — and only here — the card takes events
 * and stays up while hovered; the component's hide grace covers the
 * trip from chip to card.
 */
.index__Clipped--LqNmx {
  pointer-events: auto;
}
.index__Placeholder--APvjO {
  border-width: 0;
  padding: 0;
  width: 100%;
}
.index__BreadcrumbsContainer--dKCs9 {
  width: 100%;
  min-width: 200px;
  overflow: hidden;
  display: flex;
  /* this should be 1lh, but that unit doesn't work yet, so we guess the line height */
  --guessed-line-height: calc(1.2 * 1em);
  --breadcrumb-gap: calc(0.25 * var(--guessed-line-height));
}

.index__BreadcrumbsList--GnUPa {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  visibility: hidden;
}

.index__BreadcrumbsVisible--RVlOQ {
  visibility: visible;
}

.index__TruncateRootText300--NidpC .index__BreadcrumbContainer--cl0dy:first-of-type .index__Text--x9Zlt {
  max-width: 300px;
}

.index__TruncateRootText200--NLR1J .index__BreadcrumbContainer--cl0dy:first-of-type .index__Text--x9Zlt {
  max-width: 200px;
}

.index__TruncateRootText100--MtERz .index__BreadcrumbContainer--cl0dy:first-of-type .index__Text--x9Zlt {
  max-width: 100px;
}

.index__TruncateRootText50--AyIot .index__BreadcrumbContainer--cl0dy:first-of-type .index__Text--x9Zlt {
  max-width: 50px;
}

.index__HideRootText--GwvwU .index__BreadcrumbContainer--cl0dy:first-of-type .index__Text--x9Zlt {
  display: none;
}

.index__TruncateTailText300--mWVSR .index__BreadcrumbContainer--cl0dy:last-of-type .index__Text--x9Zlt {
  max-width: calc(var(--container-width) - 7em); /* happens when ellipsis is invisible */
  min-width: 4em;
}

.index__TruncateTailText200--v6YnZ .index__BreadcrumbContainer--cl0dy:last-of-type .index__Text--x9Zlt {
  max-width: calc(var(--container-width) - 9em); /* happens when ellipsis is showing */
  min-width: 4em;
}

.index__HideTailText--aB_nJ .index__BreadcrumbContainer--cl0dy:last-of-type .index__Text--x9Zlt {
  display: none;
}

/* First middle breadcrumb starts from 3rd child */
.index__HideText1--eznc1 .index__BreadcrumbContainer--cl0dy:nth-child(3):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText2--a7dXK .index__BreadcrumbContainer--cl0dy:nth-child(4):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText3--boEee .index__BreadcrumbContainer--cl0dy:nth-child(5):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText4--uAcJY .index__BreadcrumbContainer--cl0dy:nth-child(6):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText5--q8zM5 .index__BreadcrumbContainer--cl0dy:nth-child(7):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText6--vh6Zy .index__BreadcrumbContainer--cl0dy:nth-child(8):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText7--XVPx5 .index__BreadcrumbContainer--cl0dy:nth-child(9):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText8--rNMMu .index__BreadcrumbContainer--cl0dy:nth-child(10):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText9--ZEcGs .index__BreadcrumbContainer--cl0dy:nth-child(11):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__HideText10--bk0aZ .index__BreadcrumbContainer--cl0dy:nth-child(n+12):not(:last-child) .index__Text--x9Zlt {
  display: none;
}

.index__ShowEllipsis--fuFVI .index__EllipsisContainer--P1ULK {
  display: flex;
}

.index__ShowEllipsis--fuFVI .index__BreadcrumbContainer--cl0dy {
  display: none;
}

.index__ShowEllipsis--fuFVI .index__BreadcrumbContainer--cl0dy:first-of-type,
.index__ShowEllipsis--fuFVI .index__BreadcrumbContainer--cl0dy:last-of-type {
  display: flex;
}

.index__Icon--LPVEN {
  width: var(--guessed-line-height);
  height: var(--guessed-line-height);
}

.index__Arrow--9Mf6V {
  width: calc(var(--guessed-line-height) * 0.75);
  height: calc(var(--guessed-line-height) * 0.75);
}

.index__Arrow--9Mf6V path {
  fill: currentColor;
  opacity: 50%;
}

.index__EllipsisContainer--P1ULK {
  display: none;
  align-items: center;
  gap: var(--breadcrumb-gap);
}

.index__BreadcrumbContainer--cl0dy {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}

.index__IconLink--fPuOj {
  cursor: pointer;
}

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

.index__TextLink--XcihZ:hover {
  cursor: pointer;
  text-decoration: underline !important;
}
/* okay for styling <button> or <a> */
.links__Link--FZhHO {
  text-decoration: underline !important;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
}
.index__LinkButton--t9hvp {
}
.HistoryActionLink__HistoryActionLink--HByZ3 {
}
.modals__Container--cuYLD {
  background-color: #EFF2F6;
  height: 100%;
}

.modals__Title--vplfC {
  color: #1C2731;
  overflow-wrap: anywhere;
}

.modals__Details--fxHqj {
  color: #3E586F;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modals__DetailHeader--BjkXf {
}

.modals__Buttons--MkRT7 {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px 40px;
  border-top: 1px solid #9CB2C7;
}

.modals__Preview--MzwWc {
  border-left: 1px solid #9CB2C7;
  position: relative;
  background-color: #FFFFFF;
}
.index__InfoBar--bORY_ {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.index__Title--MDCOs {
}

.index__Details--lCukT {
}

.index__Description--EtHgP {
  color: #3E586F;
}

.index__DetailHeader--wIdGP {
}

.index__DetailValue--NSUXc {
  overflow-wrap: break-word;
}
.index__Toolbar--wzxBi {
  display: flex;
  flex-direction: column;
  width: max-content;
  fill: #3E586F;
  user-select: none;
}

.index__ToolbarButton--_Cthx {
  padding: 10px;
  background-color: #EFF2F6;
  cursor: pointer;
}

.index__ToolbarButton--_Cthx:hover {
  background-color: #DEE6ED;
  fill: #3E586F;
}

.index__ToolbarButtonSelected--OhmhR {
  fill: #EFF2F6;
  background-color: #3E586F;
  border: 0;
}

.index__ToolbarButtonSelected--OhmhR:hover {
  fill: #EFF2F6;
  background-color: #3E586F;
}

.index__ToolbarButtonDisabled--cp24l,
.index__ToolbarButtonDisabled--cp24l:hover {
  fill: #9CB2C7;
  cursor: not-allowed;
}

.index__vertical--rmW2M .index__ToolbarButton--_Cthx {
  border-left: 1px solid #9CB2C7;
  border-right: 1px solid #9CB2C7;
}
.index__vertical--rmW2M .index__ToolbarButton--_Cthx:first-of-type {
  border-top: 1px solid #9CB2C7;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.index__vertical--rmW2M .index__ToolbarButton--_Cthx:last-of-type {
  border-bottom: 1px solid #9CB2C7;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.index__vertical--rmW2M .index__ToolbarButtonSelected--OhmhR:first-of-type {
  border-top: 1px solid #3E586F;
}
.index__vertical--rmW2M .index__ToolbarButtonSelected--OhmhR:last-of-type {
  border-bottom: 1px solid #3E586F;
}

.index__horizontal--GXV5g {
  flex-direction: row;
}
.index__horizontal--GXV5g .index__ToolbarButton--_Cthx {
  border-top: 1px solid #9CB2C7;
  border-bottom: 1px solid #9CB2C7;
}
.index__horizontal--GXV5g .index__ToolbarButton--_Cthx:first-of-type {
  border-left: 1px solid #9CB2C7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.index__horizontal--GXV5g .index__ToolbarButton--_Cthx:last-of-type {
  border-right: 1px solid #9CB2C7;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.index__horizontal--GXV5g .index__ToolbarButtonSelected--OhmhR:first-of-type {
  border-left: 1px solid #3E586F;
}
.index__horizontal--GXV5g .index__ToolbarButtonSelected--OhmhR:last-of-type {
  border-right: 1px solid #3E586F;
}

.index__ToolbarButton--_Cthx svg {
  width: 24px;
  height: 24px;
}

.index__Icon--sHb4d {
  width: 24px;
  height: 24px;
}
.imagePreview__Layout--DtI6i {
  display: grid;
  grid-template-columns: 460px minmax(0, auto);
  grid-template-rows: minmax(0, auto) 87px;
  grid-template-areas: "InfoBar Preview" "ModalFooter Preview";
}

.imagePreview__InfoBar--RDhDp {
  grid-area: InfoBar;
  overflow-y: auto;
}

.imagePreview__Preview--epMDy {
  grid-area: Preview;
  overflow: hidden;
}

.imagePreview__Toolbar--etvJP {
  position: absolute;
  left: 40px;
  top: 40px;
}
.AssetUploadInputModal__Layout--ImrEr {
}

.AssetUploadInputModal__InfoBar--WD7ud {
}

.AssetUploadInputModal__Preview--G2vm3 {
}

.AssetUploadInputModal__Toolbar--u9OWy {
}
.index__badge--vquFg {
  background-color: #FFFFFF;
  width: min-content;
  padding: 3px;
  border-radius: 3px;
  color: #3E586F;
  white-space: nowrap;
}

.index__warning--XzGxS {
  background-color: #FFE6B3;
}

.index__error--ADgeG {
  background-color: #FF9E80;
  color: #1C2731;
}
.index__PreviewViewer--hW48p {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index__IncludePadding--mIfKM {
  padding: 80px;
}

.index__Image--_PyJz,
.index__ErrorImage--Te3NM {
  max-width: min(100%, 2000px);
  max-height: min(100%, 2000px);
}

.index__Image--_PyJz {
  position: relative;
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.3);
}
.ImageWithBackup__BackupImg--qlzyq {
  filter: drop-shadow(0px 2px 4px rgba(35, 37, 39, 0.3));
  boxshadow: none;
}

.ImageWithBackup__MagicBg--tuEEm {
  background-color: #DEE6ED;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 7.075px, #EFF2F6 7.075px, #EFF2F6 14.15px);
  transition: background-color 200ms ease-in-out;
  background-size: 20px 20px;
  animation: ImageWithBackup__MagicBg--tuEEm 2s linear infinite;
}

@keyframes ImageWithBackup__MagicBg--tuEEm {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}
.ImageWithBackup__MagicBg--tuEEm:hover {
  background-color: #EFF2F6;
}
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.LoaderShade__LoaderShade--faFXR {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.LoaderShade__LoaderShade--faFXR .LoaderShade__Spinner--EXsv_ {
  color: #FFFFFF;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: center;
  user-select: none;
  position: relative;
  height: 40px;
  margin-left: -27px;
  margin-top: -20px;
  padding-top: 26px;
  transition: opacity 300ms ease-in-out;
  min-width: 54px;
  z-index: 2000;
}
.LoaderShade__LoaderShade--faFXR .LoaderShade__Spinner--EXsv_:before {
  display: block;
  position: absolute;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: LoaderShade__animation_spin--XvkK1;
  animation-timing-function: linear;
  background-image: url(public/main/images/icons/legacy/EventLoadingWhite.e5953adf6622e8f65df0.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  content: "";
  height: 24px;
  left: calc(50% - 12px);
  top: 0;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  width: 24px;
}
@keyframes LoaderShade__animation_spin--XvkK1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.UploadPreview__NoImage--CFZk4 {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.UploadPreview__Placeholder--JgV7r {
  color: #5C81A3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.UploadPreview__Buttons--ljGL5 {
  display: flex;
  gap: 20px;
}
.index__NoFile--zno07 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.index__NoFile--zno07 path {
  fill: #9CB2C7;
}
.AssetUploadInputManager__UploadInput--ZIIAh {
  opacity: 0;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.Cropper__Cropper--L9VHx {
  display: grid;
  grid-template-areas: "image panel";
  grid-auto-columns: auto min-content;
}

.Cropper__Cropper__image--y86mC {
  grid-area: image;
  position: relative;
  display: flex;
  max-height: 80vh;
  max-width: 50vw;
}

.Cropper__Cropper__image--y86mC .Cropper___shade--_1euX {
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  visibility: hidden;
  z-index: 20;
}

.Cropper__Cropper__image--y86mC .Cropper___shade--_1euX,
.Cropper__Cropper__image--y86mC .Cropper__cropper-crop--uUWoG {
  border-radius: 5px 0 0 5px;
}

.Cropper__Cropper__image--y86mC .Cropper___shade--visible--o_SaN {
  opacity: 1;
  visibility: visible;
}

.Cropper__Cropper__image--y86mC .Cropper___shade--_1euX {
  color: #FFFFFF;
  font-size: 12px;
}

.Cropper__Cropper__image--y86mC .Cropper__Spinner--Stymy {
  text-align: center;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  margin-left: -27px;
  margin-top: -20px;
  padding-top: 26px;
  transition: opacity 300ms ease-in-out;
  min-width: 54px;
  z-index: 2000;
}

.Cropper__Cropper__image--y86mC .Cropper__Spinner--Stymy:before {
  display: block;
  position: absolute;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: Cropper__loader_spin--xzkDO;
  animation-timing-function: linear;
  background-image: url(public/main/images/icons/legacy/EventLoadingWhite.e5953adf6622e8f65df0.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  content: "";
  height: 24px;
  left: calc(50% - 12px);
  top: 0;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  width: 24px;
}

@keyframes Cropper__loader_spin--xzkDO {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.Cropper__Cropper__panel--_R7HN {
  background-color: #EFF2F6;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 18px;
  grid-area: panel;
  width: 460px;
  border-left: 1px solid #9CB2C7;
}

.Cropper__Cropper__content--yOUbV {
  flex: 1;
}

.Cropper__Cropper__instructions--QpcYF {
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  width: 100%;
  padding-top: 10px;
}

.Cropper__Cropper__aspect--h2bnm {
  padding: 40px;
}

.Cropper__Cropper__aspect--h2bnm h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 27px;
  color: #3E586F;
}

.Cropper__Cropper__aspect--h2bnm .Cropper__RatioSelect--euwNd {
  padding-top: 20px;
}

.Cropper__Cropper__aspect--h2bnm .Cropper__CustomRatios--NgFsH {
  padding-top: 10px;
}

.Cropper__Cropper__aspect--h2bnm .Cropper__InputContainer--YO7kw {
  margin-top: 5px;
}

@media screen and (max-width: 1199px) {
  .Cropper__Cropper__image--y86mC {
    width: calc(100% - 300px);
  }
  .Cropper__Cropper__panel--_R7HN {
    width: 300px;
  }
}
.Cropper__ResetButton--DqOAY {
  color: #1B9DDE;
  display: flex;
  gap: 5px;
  cursor: pointer;
  border: none;
}
/*!
 * Cropper.js v1.5.6
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-10-04T04:33:44.164Z
 */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.3333333333%;
  left: 0;
  top: 33.3333333333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.3333333333%;
  top: 0;
  width: 33.3333333333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

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

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
.AssetUploadInputModalResizer__Resizer__content--slbc2 {
  padding: 40px;
}

.AssetUploadInputModalResizer__Resizer__dimensions--IpfnP h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 27px;
  color: #3E586F;
}

.AssetUploadInputModalResizer__Colon--s8vKN {
  padding-top: 16px;
}

.AssetUploadInputModalResizer__ResetButton--fAzvi {
  color: #1B9DDE;
  display: flex;
  gap: 5px;
  cursor: pointer;
  border: none;
}
.index__NavButton--HIX1I {
  color: #3E586F;
  background-color: #FFFFFF;
  padding: 20px;
  width: max-content;
}
.index__NavButton--HIX1I:hover, .index__NavButton--HIX1I.index__Active--O8Out {
  color: #1B9DDE;
}
.index__NavButton--HIX1I.index__Active--O8Out {
  border-bottom: 2px solid #1B9DDE;
}
.index__NavButtonGroup--eTl0M {
  display: flex;
  padding-left: 40px;
  padding-right: 40px;
}
.index__FilePicker--RjAFZ {
  display: grid;
  grid-template-columns: min-content 1fr 380px;
  grid-template-rows: min-content min-content minmax(0, 1fr) min-content;
  grid-template-areas: "navbuttons    navbuttons navbuttons" "breadcrumbs   breadcrumbs search" "files         preview preview" "ModalFooter   ModalFooter ModalFooter";
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #EFF2F6;
}

.index__NavButtons--cXd9v {
  grid-area: navbuttons;
  background-color: #FFFFFF;
}

.index__Breadcrumbs--MOYeE {
  grid-area: breadcrumbs;
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 20px;
  align-self: center;
  padding-right: 40px;
}

.index__Search--YqzG1 {
  grid-area: search;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.index__Search--YqzG1 div {
  max-width: 380px;
}

.index__Files--vXnEg {
  grid-area: files;
}

.index__Preview--mnFi6 {
  color: #5C81A3;
  grid-area: preview;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

.index__Files--vXnEg,
.index__Preview--mnFi6 {
  border-top: 1px solid #BECDDA;
  border-bottom: 1px solid #BECDDA;
}

.index__Files--vXnEg {
  border-right: 1px solid #BECDDA;
}
.index__LargeTile--U0HpH {
  background-color: var(--dokio-background-color);
  border-radius: 6px;
  padding: var(--spacing-medium);
  box-shadow: 1px 2px 4px 1px rgba(28, 39, 49, 0.2);
  position: relative;
}
.index__LargeTile--U0HpH:hover:not(.index__Disabled--pnP9l) {
  --dokio-background-color: #DEE6ED;
  box-shadow: 1px 2px 4px 1px rgba(28, 39, 49, 0.2);
}
.index__LargeTile--U0HpH:hover:not(.index__Disabled--pnP9l) .index__CheckboxPosition--qNHZt {
  display: inline-block;
}
.index__LargeTile--U0HpH:hover:not(.index__Disabled--pnP9l) .index__name--ik5Hy {
  text-decoration: underline !important;
}
.index__LargeTile--U0HpH.index__Selected--Ut_l8 {
  background-color: #D1ECFA;
}
.index__LargeTile--U0HpH.index__Selected--Ut_l8:hover {
  background-color: #BAE3F7;
}
.index__LargeTile--U0HpH:hover:not(.index__Disabled--pnP9l) .index__thumbContainer--qyBuQ, .index__LargeTile--U0HpH.index__Selected--Ut_l8 .index__thumbContainer--qyBuQ {
  background-color: inherit;
}
.index__LargeTile--U0HpH.index__Disabled--pnP9l {
  opacity: 40%;
}

.index__Hover-Pointer--QVwjg .index__thumbContainer--qyBuQ,
.index__Hover-Pointer--QVwjg .index__name--ik5Hy {
  cursor: pointer;
}

.index__Hover-Zoom--cpicv .index__thumbContainer--qyBuQ,
.index__Hover-Zoom--cpicv .index__name--ik5Hy {
  cursor: zoom-in;
}

.index__Disabled--pnP9l .index__thumbContainer--qyBuQ,
.index__Disabled--pnP9l .index__name--ik5Hy {
  cursor: not-allowed;
}

.index__CheckboxPosition--qNHZt {
  position: absolute;
  display: none;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.index__ForceShowCheckboxPosition--DIJxZ {
  display: inline-block;
}

.index__thumbContainer--qyBuQ {
  border-radius: 6px;
  width: 100%;
  aspect-ratio: 1/1;
  /* As a flex item (inside VStack) the automatic minimum size (min-height:
     auto) lets a tall thumbnail's intrinsic height override the aspect-ratio,
     stretching the tile. min-height: 0 keeps the box square so the image's
     max-height: 100% clamps tall thumbnails like the old fixed 220px did. */
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.index__thumbContainer--qyBuQ img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
.index__thumbContainer--qyBuQ.index__OldUi--PFnnN {
  padding: 1px solid var(--spacing-medium);
  background-color: var(--dokio-background-color);
}

/* Two classes so this beats FileThumbnail's own single-class max-width /
   max-height: 100% whatever order the stylesheets land in the bundle. */
.index__thumbContainer--qyBuQ .index__thumb--ZWoM7 {
  /* The thumbnail's own max-height: 100% needs a definite container height.
     Chrome and Firefox treat the aspect-ratio-derived height as definite;
     Safari does not, so the percentage resolves to none and a tall thumbnail
     renders at its intrinsic height, overflowing the square and overlapping
     the name below. An absolutely positioned box resolves percentages
     against the laid-out container in every engine, and auto margins centre
     it. The inset mirrors the container padding. */
  position: absolute;
  inset: 20px;
  margin: auto;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
}

.index__badgePosition--D8Xiy {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
}

.index__kebabPosition--H5Pp6 {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.index__kebabPosition--H5Pp6 > div {
  display: inline-block;
}

.index__name--ik5Hy {
  color: #1C2731;
  text-align: center;
  font-weight: var(--weight-medium);
}

.index__oldUiName--xMojH {
  font-weight: unset;
}

.index__details--AkBOy {
  color: #3E586F;
  white-space: pre-wrap;
  text-align: center;
}

.index__LargeTile--U0HpH.index__Disabled--pnP9l .index__details--AkBOy {
  color: #9CB2C7;
}

.index__name--ik5Hy,
.index__details--AkBOy {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.index__Drop--fwOMP {
  display: inline-block;
  cursor: pointer;
}

.index__Drop--fwOMP.index__Selected--RDSHS {
  display: initial;
}

.index__DropPopup--AmCch {
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: 1px 3px 15px 1px rgba(28, 39, 49, 0.4);
  width: 260px;
  top: 0;
  right: 0;
  z-index: 9999;
  text-align: left;
}
.index__DropPopup--AmCch ul,
.index__DropPopup--AmCch ol {
  margin: 0;
  padding: 0;
}
.index__DropPopup--AmCch li {
  list-style: none;
  display: block;
  color: #3E586F;
}
.index__DropPopup--AmCch li.index__Heading--SGwD5 {
  border-bottom: 1px solid #DEE6ED;
  user-select: none;
  border-radius: 0;
  padding: 13px 20px;
  color: #3E586F;
  font-weight: bold;
  margin-bottom: 10px;
}
.index__DropPopup--AmCch li:not(.index__Heading--SGwD5) {
  border-radius: 6px;
  cursor: pointer;
  margin: 0 10px;
}
.index__DropPopup--AmCch li:not(.index__Heading--SGwD5):first-of-type {
  margin-top: 10px;
}
.index__DropPopup--AmCch li:not(.index__Heading--SGwD5):last-of-type {
  margin-bottom: 10px;
}
.index__DropPopup--AmCch li:not(.index__Heading--SGwD5):hover {
  background-color: #EFF2F6;
}
.index__DropPopup--AmCch li:not(.index__Heading--SGwD5) > *:first-child {
  padding: 10px;
}
.index__DropPopup--AmCch li.index__Selected--RDSHS {
  background-color: #D1ECFA;
}
.index__DropPopup--AmCch li.index__Selected--RDSHS:hover {
  background-color: #BAE3F7;
}
.index__DropPopup--AmCch li.index__Selected--RDSHS > div {
  display: flex;
  justify-content: space-between;
}
.index__DropPopup--AmCch li a {
  display: inline-block;
  width: 100%;
  text-decoration: inherit !important;
  color: inherit;
}
.index__DropPopup--AmCch li button {
  text-decoration: inherit !important;
  width: 100%;
}
.index__DropPopup--AmCch li .index__disabled--YzvdT {
  background-color: #FFFFFF;
  colour: #9CB2C7;
  cursor: not-allowed;
}

.index__Option--Bp9No {
}

.index__Arrow--FnSAu,
.index__Arrow--FnSAu::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.index__Arrow--FnSAu {
  visibility: hidden;
}

.index__Arrow--FnSAu::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

.index__DropPopup--AmCch[data-popper-placement^=top] > .index__Arrow--FnSAu {
  bottom: -4px;
}

.index__DropPopup--AmCch[data-popper-placement^=bottom] > .index__Arrow--FnSAu {
  top: -4px;
}

.index__DropPopup--AmCch[data-popper-placement^=left] > .index__Arrow--FnSAu {
  right: -4px;
}

.index__DropPopup--AmCch[data-popper-placement^=right] > .index__Arrow--FnSAu {
  left: -4px;
}
.index__Thumb--eGLWW,
.index__ErrorThumb--QUDeS {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.index__WithBackground--qUJWE {
  box-shadow: 1px 2px 4px 1px rgba(28, 39, 49, 0.2);
}

.index__WithShadow--SXSL2 {
  filter: drop-shadow(0px 2px 4px rgba(35, 37, 39, 0.3));
}
.index__LargeTileGrid--Xh5iA {
  position: relative; /* for loadershade */
  min-height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.index__Grid--PrwPI {
  display: grid;
  grid-template-columns: repeat(var(--num-cols), calc(var(--tile-width) * 1px));
  gap: calc(var(--tile-gap) * 1px);
  padding: 20px 40px;
  justify-content: center;
}

.index__Empty--fHU6b {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: auto;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #5C81A3;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__FilterButtons--e7GNK {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.index__FilterButton--X87AN {
  white-space: nowrap;
  border: 1px solid #3E586F;
  color: #3E586F;
  padding-bottom: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  border-radius: 4px;
  cursor: pointer;
}
.index__FilterButton--X87AN.index__checked--wcXA1 {
  background-color: #3E586F;
  color: #FFFFFF;
  border: none;
}
.index__FilterButton--X87AN input {
  display: none;
}

.index__FilterLabel--cjR_j {
  color: #3E586F;
  display: inline-block;
  font-weight: 600;
}
.index__FilePicker--d7l9K {
  display: grid;
  grid-template-columns: min-content 1fr 380px;
  grid-template-rows: min-content min-content minmax(0, 1fr) min-content;
  grid-template-areas: "breadcrumbs   search search" "filters       filters filters" "files         preview preview" "ModalFooter   ModalFooter ModalFooter";
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #EFF2F6;
}

.index__Breadcrumbs--M8Uq7 {
  grid-area: breadcrumbs;
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 20px;
  align-self: center;
  padding-right: 40px;
}

.index__Search--CUP7y {
  grid-area: search;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.index__Search--CUP7y div {
  max-width: 380px;
}

.index__Filters--mqYTU {
  width: 100%;
  grid-area: filters;
  margin-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}

.index__SubFilters--yQ9IU {
  margin-top: 20px;
}

.index__Files--JAbhG {
  grid-area: files;
}

.index__Preview--pTltt {
  color: #5C81A3;
  grid-area: preview;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

.index__Files--JAbhG,
.index__Preview--pTltt {
  border-top: 1px solid #BECDDA;
  border-bottom: 1px solid #BECDDA;
}

.index__Files--JAbhG {
  border-right: 1px solid #BECDDA;
}
.UploadInputControl__UploadBox--YHBW8 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.UploadInputControl__UploadInput--X7QAV {
  cursor: var(--inputbox-cursor, pointer);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
.UploadInputControl__UploadInput--X7QAV.UploadInputControl__Viewable--VJbpr {
  cursor: pointer;
}

.UploadInputControl__Placeholder--LYq3R {
  color: #9CB2C7;
}

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

.UploadInputControl__PreviewImage--mwhcr {
  cursor: var(--inputbox-cursor, pointer);
  height: 300px;
  padding: 10px;
}
.UploadInputControl__PreviewImage--mwhcr.UploadInputControl__Viewable--VJbpr {
  cursor: pointer;
}

.UploadInputControl__UploadStatusPreview--Q_YMg {
  width: 28px;
  height: 22px;
}

.UploadInputControl__UploadStatusPreviewContainer--aBIsy {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -11px;
  left: -15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border-radius: 3px;
}
/*
 * The `preset_component` field: the component dropdown plus the
 * selected component's declared params rendered as merge-tag capable
 * inputs below it.
 */
.PresetComponentField__Field--GrL0X {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.PresetComponentField__Param--YeFvg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
}

.PresetComponentField__ParamLabel--iu7Rp {
  color: #5C81A3;
  font-size: 12px;
}
@charset "UTF-8";
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.BreakoutBox__breakoutModal--KXMth {
  max-height: 67vh;
  max-height: 67dvh;
  height: 67vh;
  height: 67dvh;
}

.BreakoutBox__BreakoutBox--unP92 {
  padding: 40px;
  border-radius: 6px;
  background-color: #EFF2F6;
  height: 100%;
  box-sizing: border-box;
}

.BreakoutBox__Theme-Light--RvQ7D.BreakoutBox__BreakoutBox--unP92 {
  background-color: #EFF2F6;
}

.BreakoutBox__Theme-Dark--EFBhd.BreakoutBox__BreakoutBox--unP92 {
  background-color: #2D3F50;
}

.BreakoutBox__content--EZ7G9 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* The field renders inside the global `_control` wrapper. Its internal
 * structure (InputBox > VStack > MainInput > Children > Component > editor)
 * is built from hashed CSS-module classes we can't target individually, so
 * we stretch the whole descendant chain generically: every wrapper becomes
 * a column flex box that grows, and the leaf editor/textarea fills what's
 * left. The toolbar keeps its natural height because it doesn't grow. */
.BreakoutBox__content--EZ7G9 ._control {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Propagate growth down through our own wrapper divs to the editable
 * element. These wrappers hold a single child each in the breakout (no
 * side icons), so turning them into growing column flex boxes is safe.
 * We stop at the TinyMCE root (`.tox`): it has its own internal flex
 * layout (fixed toolbar + growing edit area), so we must NOT flex its
 * descendants or the toolbar/statusbar stretch to fill. */
.BreakoutBox__content--EZ7G9 ._control div:not(.tox div):not(.tox):not([id$=_messages]):not([id$=_messages] *) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The InputBox renders a validation-messages sibling (id `<name>_messages`,
 * e.g. "0 / 100 characters") next to the editor's wrapper column. Pin it —
 * and leave its inner grid untouched — so it keeps its natural height
 * instead of growing and splitting the space with the editor. */
.BreakoutBox__content--EZ7G9 ._control div[id$=_messages] {
  flex: 0 0 auto !important;
  align-content: start;
}

/* Textarea fills the remaining height directly. */
.BreakoutBox__content--EZ7G9 ._control textarea {
  flex: 1;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Rich text (TinyMCE) sets a fixed pixel height and a 60vh cap on its own
 * root. Give the root the full height and let TinyMCE's own flex layout
 * size the toolbar (fixed) and edit area (grows) — don't touch its
 * descendants. */
.BreakoutBox__content--EZ7G9 ._control .Richtext {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* In the breakout the editor is given `height: 100%` (see RichTextInput's
 * `breakout` prop), so TinyMCE sizes its own chrome. We only need to let
 * its root fill our flex slot and drop the default 60vh cap. */
.BreakoutBox__content--EZ7G9 ._control .tox.tox-tinymce {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: none !important;
}

.BreakoutBox__minimise--GZYbD {
  border: none;
  text-align: right;
  color: #3E586F;
  cursor: pointer;
  user-select: none;
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  height: 27px;
  line-height: 26px;
  padding-right: 20px;
  right: 25px;
  top: 21px;
  z-index: 10;
}

.BreakoutBox__minimise--GZYbD svg {
  transition: fill 100ms ease-in-out;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  fill: #9CB2C7;
}

.BreakoutBox__minimise--GZYbD:hover svg {
  fill: #1B9DDE;
}

.BreakoutBox__title--jlHFy {
  color: #3E586F;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 6px;
}

.BreakoutBox__Theme-Dark--EFBhd .BreakoutBox__title--jlHFy {
  color: #9CB2C7;
}

.BreakoutBox__Theme-Dark--EFBhd .BreakoutBox__minimise--GZYbD {
  color: #9CB2C7;
}
.SearchInput__SearchInput--odxbt {
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.TextAreaInput__TextArea--mR_Mu {
  resize: none;
  min-height: 8em;
}

.TextAreaInput__ChipOverlayWrapper--tbmt0 {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.TextAreaInput__ChipOverlayWrapper--tbmt0 > textarea {
  flex: 1 1 auto;
  min-width: 0;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__warning--uvYRN .index__Status--yckOG,
.index__error--gfPIc .index__Status--yckOG {
  height: 44px;
}
.index__warning--uvYRN .index__Close--fFer6 path,
.index__error--gfPIc .index__Close--fFer6 path {
  fill: #1C2731;
}

.index__warning--uvYRN .index__Status--yckOG {
  background-color: #FFB00F;
}

.index__error--gfPIc .index__Status--yckOG {
  background-color: #FF794F;
}

.index__Alert--LJ_FR {
  padding: 40px 40px 0 40px;
}

.index__Modal--yGjoU {
  background-color: #EFF2F6;
}

.index__Title--jbOTM {
  color: #1C2731;
}

.index__DialogText--sUZDV {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
}

.index__Close--fFer6 {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  fill: #3E586F;
}
.index__Spinner--_6Efn svg {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: index__animation_spin--_GPRS;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}

.index__Spinner--_6Efn.index__light--tvgnE path {
  fill: #FFFFFF;
}

.index__Spinner--_6Efn.index__dark--t5Uoi path {
  fill: #9CB2C7;
}

@keyframes index__animation_spin--_GPRS {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ModalHeader and ModalFooter place themselves in the "header" and
 * "ModalFooter" areas; without them declared they land in implicit columns. */
.index__Layout--LcYlM {
  display: grid;
  width: 100%;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "header" "body" "ModalFooter";
  max-height: 90vh;
  max-height: 90dvh;
}

/* ModalHeader leaves its side padding to the layout */
.index__Layout--LcYlM > div:first-child {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Location--Wqd0m {
  font-family: monospace;
  overflow-wrap: anywhere;
  color: #1C2731;
}

.index__Body--B_MCV {
  grid-area: body;
  overflow: auto;
  padding: 0 40px 40px;
}

.index__Loading--Os0BK {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.index__Error--rPEVe,
.index__SummaryError--PwteW {
  color: #FF501A;
}

.index__Error--rPEVe {
}

.index__Section--KQagP + .index__Section--KQagP {
  margin-top: 40px;
}

.index__Hint--Anr9D {
  color: #3E586F;
  margin-top: 10px;
}

.index__SectionTitle--Ay90H {
  margin-bottom: 10px;
}

.index__Items--RilYo {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #BECDDA;
}

.index__Item--O_uJt {
  display: grid;
  grid-template-columns: minmax(0, 2fr) max-content minmax(0, 3fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #BECDDA;
}

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

.index__ItemExports--MLbDX {
  color: #3E586F;
  text-align: right;
}

.index__Skipped--NJDzh .index__ItemName--pHfpz {
  color: #3E586F;
}

.index__Skipped--NJDzh .index__ItemExports--MLbDX {
  color: #FF501A;
}

.index__Summary--MgWz7 {
  color: #3E586F;
  margin-bottom: 10px;
}
.index__Layout--YnVy8 {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, 2fr);
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "header header" "sidebar results" "ModalFooter ModalFooter";
}

.index__Header--EPSOd {
  grid-area: header;
  padding: 0 40px 20px 40px;
  border-bottom: 1px solid #BECDDA;
}

.index__Sidebar--_3LbC {
  grid-area: sidebar;
  overflow: auto;
  /* Don't let the column shrink below the MultiPicker's intrinsic width
     (460px) plus our own horizontal padding, or its table gets chopped. */
  min-width: 540px;
  padding: 40px;
  border-right: 1px solid #BECDDA;
}

.index__Results--iHC4T {
  grid-area: results;
  overflow: auto;
}

.index__CategorySelectors--VFs6M {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 40px;
  /* Space between each Select's label and its control (the Select
     component renders them in a zero-gap stack). */
  /* Same gap for the DateInput's <Label> wrapper (Start on / End on). */
}
.index__CategorySelectors--VFs6M [id$=-label] {
  display: block;
  margin-bottom: 5px;
}
.index__CategorySelectors--VFs6M label {
  display: inline-block;
  margin-bottom: 5px;
}

.index__MainArea--NDqPg {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px 40px;
}

.index__Dragging--vb20I {
  background: #78DDAA;
}

.index__MainAreaToolbar--Tc1VW {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.index__HiddenFileInput--UqR4E {
  display: none;
}

.index__Files--zsQPx {
  width: 100%;
}
.index__Files--zsQPx th,
.index__Files--zsQPx td {
  padding: 5px 10px;
  vertical-align: middle;
}
.index__Files--zsQPx th {
  font-weight: bold;
  border-bottom: solid 1px currentColor;
}
.index__Files--zsQPx th.index__FileSelectedHeader--aATcn {
  width: 3em;
}
.index__Files--zsQPx th.index__FilePreviewHeader--SKdLl {
  width: 4em;
}
.index__Files--zsQPx th.index__FileTypeHeader--kJMLd {
  width: 7.5em;
}
.index__Files--zsQPx th.index__FileSizeHeader--mzohR {
  width: 10em;
}
.index__Files--zsQPx th.index__FileStatusHeader--NtuVu {
  width: 10em;
}
.index__Files--zsQPx td {
  border-bottom: solid 1px #DEE6ED;
}
.index__Files--zsQPx tbody tr {
  cursor: pointer;
}
.index__Files--zsQPx tbody tr:hover {
  background-color: #DEE6ED;
}
.index__Files--zsQPx tbody tr.index__Unselected--E4MF5 {
  color: #9CB2C7;
}

.index__FileType--vdqAV {
  /* visible by default, hidden on small screens */
}

.index__FilePreview--xNjMx {
  width: 4em;
}

.index__PreviewImage--cnK2U {
  display: block;
  width: 3em;
  height: 3em;
  object-fit: contain;
}

.index__FileTypeIcon--UWN3P {
  display: block;
  margin: 0 auto;
  color: #9CB2C7;
  /* Some IconFlat file icons (FileGeneric, FileArchive) ship without a
     path fill and default to black, while others use currentColor. Force
     currentColor so every placeholder icon renders in the same colour. */
}
.index__FileTypeIcon--UWN3P path {
  fill: currentColor;
}

@media all and (max-height: 700px) {
  .index__Header--EPSOd {
    max-height: 40vh;
    overflow-y: auto;
  }
}
@media all and (max-height: 500px) {
  .index__Header--EPSOd {
    max-height: 30vh;
  }
}
@media all and (max-width: 768px) {
  .index__Layout--YnVy8 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "sidebar" "results" "ModalFooter";
  }
  .index__Sidebar--_3LbC {
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid #BECDDA;
    padding: 0 20px 20px 20px;
  }
  .index__Header--EPSOd {
    padding: 0 20px 20px 20px;
  }
  .index__MainArea--NDqPg {
    padding: 5px 20px;
  }
  .index__Files--zsQPx th,
  .index__Files--zsQPx td {
    padding: 5px 5px;
  }
  .index__Files--zsQPx th.index__FileTypeHeader--kJMLd, .index__Files--zsQPx th.index__FileSizeHeader--mzohR {
    width: auto;
  }
  .index__FilePath--cUYoM,
  .index__FileType--vdqAV {
    display: none;
  }
}
@media all and (max-width: 480px) {
  .index__Header--EPSOd {
    padding: 0 5px 5px 5px;
  }
  .index__MainArea--NDqPg {
    padding: 5px 5px;
  }
  .index__Files--zsQPx th.index__FileStatusHeader--NtuVu {
    width: auto;
  }
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__MultiPicker--jQ6JE {
  min-width: 460px;
}

.index__PopIn--J_e3v .index__Controls--csg7M,
.index__PopIn--J_e3v .index__Table--Tusun {
  display: none;
}

.index__PopIn--J_e3v:not(.index__PopInActive--SGfE9) .index__Controls--csg7M {
  display: none;
}

.index__PopInActive--SGfE9.index__PopIn--J_e3v .index__Controls--csg7M,
.index__PopInActive--SGfE9.index__PopIn--J_e3v .index__Table--Tusun {
  display: grid;
}

.index__PopIn--J_e3v .index__Controls--csg7M {
  margin-top: 20px;
}

.index__Controls--csg7M {
  display: grid;
  grid-template-columns: 310px 1fr;
  justify-items: end;
  align-items: center;
  margin-bottom: 20px;
}

.index__Controls--csg7M > div:first-child {
  justify-self: flex-start;
}

.index__AllOptions--nYp5r {
  height: 100%;
  display: flex;
  gap: 5px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.index__Container--YmlbJ {
  background-color: #FFFFFF;
  height: 276px;
  overflow: auto;
  border: 1px solid #9CB2C7;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index__Header--UvMbw {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background-color: #EFF2F6;
  color: #3E586F;
  position: sticky;
  top: 0;
  z-index: 10;
}

.index__Header--UvMbw .index__Option--yMxw8 {
  background-color: #EFF2F6;
  height: 36px;
}

.index__Header--UvMbw .index__Option--yMxw8 .index__Column--C44bb {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.index__Header--UvMbw .index__SelectOptionHidden--CiKYx {
  flex-shrink: 0;
  position: sticky;
  right: 0;
  background-color: #EFF2F6;
  border-bottom: 1px solid #9CB2C7;
  height: 37px;
}

.index__Option--yMxw8 {
  border-bottom: 1px solid #9CB2C7;
  display: inline-flex;
  align-items: center;
  height: 46px;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
  /* Columns shrink to fit, but no further than 120px each (the first keeps
     its 310px). Past that the rows overflow and the table scrolls sideways,
     with the sticky checkbox column still in view. */
  min-width: max(100%, 310px + (var(--multi-picker-columns, 1) - 1) * 120px + 53px);
}

.index__Column--C44bb {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 180px;
  display: inline-block;
  padding: 0 15px;
}

.index__Column--C44bb:first-of-type {
  min-width: 310px;
}

.index__Column--C44bb.index__FullWidth--eqdtJ {
  width: 100%;
}

.index__ColumnSpaceBetween--q0Obb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.index__Option--yMxw8 .index__Column--C44bb:first-child {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* The app's link colour, as on the details pages, so a name with a page
   stands out from the plain ones */
.index__Link--a8Mw8 {
  color: #1B9DDE;
  cursor: pointer;
}

/* reset.scss strips link underlines with !important */
.index__Link--a8Mw8:hover,
.index__Link--a8Mw8:focus-visible {
  text-decoration: underline !important;
}

.index__SelectOptionHidden--CiKYx {
  padding-right: 15px;
  background-color: #EFF2F6;
  width: 53px;
  height: 45px;
}

.index__SelectOption--YJTvA {
  flex-shrink: 0;
  position: sticky;
  right: 0;
  padding-right: 15px;
  background-color: #FFFFFF;
  width: 53px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.index__SelectOption--YJTvA div {
  align-items: center;
  width: 20px;
}
.index__SelectOption--YJTvA div div:first-child {
  visibility: hidden;
}

.index__Option--yMxw8.index__Disabled--KaAUX,
.index__Option--yMxw8.index__Disabled--KaAUX .index__Column--C44bb {
  cursor: not-allowed;
  color: #5C81A3;
}

.index__Status--jR2hu {
  background-color: #EFF2F6;
  color: #3E586F;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: center;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #9CB2C7;
  border-top: 0;
  padding-left: 15px;
}

.index__NoResults--Oq2yT {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CB2C7;
}
.index__VariationPrevNext--cw72E {
  display: flex;
  align-items: center;
}

.index__Buttons--W9XDP {
  display: flex;
}

.index__Button--QvYpO {
  height: 26px;
  fill: #9CB2C7;
}

.index__ButtonSelected--bcrLT {
  fill: #3E586F;
}

.index__Button--QvYpO > svg {
  height: 100%;
}
.index__VariationPicker--JGNwa {
  display: flex;
  justify-content: space-between;
  color: #3E586F;
  background-color: #DEE6ED;
  border-bottom: 1px solid #9CB2C7;
  padding: 10px 30px;
  gap: 20px;
}
.index__VariationSelect--moXOW {
  width: var(--sidebar-variation-select-width);
  cursor: pointer;
  background-color: #FFFFFF;
}

/* Override default Select background */
.index__VariationSelect--moXOW [role=combobox] {
  background-color: #DEE6ED;
}

.index__VariationSelect--moXOW [role=combobox][aria-expanded=true] ul {
  background-color: #FFFFFF;
}

.index__SelectInputDisplay--fJRLp {
  display: flex;
  align-items: center;
  background-color: #DEE6ED;
  transition: background-color 0.2s, border 0.2s;
  padding: 9px;
  border-width: 1px;
  border-color: #DEE6ED;
  border-radius: 4px;
  border-style: solid;
  user-select: none;
}

.index__SelectInputDisplay--fJRLp:hover {
  border-color: #9CB2C7;
}

.index__SelectInputDisplay--fJRLp:hover .index__ArrowContainer--RFZB3,
.index__SelectInputDisplay--is-open--Befwt .index__ArrowContainer--RFZB3 {
  display: inherit;
}

.index__SelectInputDisplay--is-open--Befwt {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #9CB2C7;
  background-color: #FFFFFF;
}

.index__SelectInputDisplay--is-disabled--CNFuu {
  color: #9CB2C7;
}

.index__LabelContainer--GNGbn {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-normal);
}
.index__LabelContainer--GNGbn.index__OldUi--FclUo {
  flex-direction: column;
  align-items: unset;
  gap: var(--spacing-small);
}

.index__Label--g9oS2 {
  font-weight: bold;
  color: #3E586F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.index__ArrowContainer--RFZB3 {
  display: none;
  transition: display 0.2s;
  margin-left: 5px;
}

.index__SelectOption--SPUMa {
  /* composes: BodyMedium from "@/styles/text.css"; */
}
.index__ModalLayout--gT2Dq {
  display: grid;
  height: 90vh;
  grid-template-rows: max-content 1fr max-content;
  grid-template-areas: "header" "form" "ModalFooter";
}
.index__ModalLayout--gT2Dq > div:not(.index__Form--Cdtwc) {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Form--Cdtwc {
  grid-area: form;
  margin-top: 20px;
  padding-bottom: 40px;
  border-top: 1px solid #9CB2C7;
  overflow: auto;
}

.index__AddVariation--SMicJ {
  margin-bottom: 25px;
}
.VariationListItem__VariationListItem--r1sKf {
  padding: 25px 25px 0 25px;
  cursor: pointer;
}

.VariationListItem__VariationListItem--r1sKf:hover {
  background-color: #DEE6ED;
}

.VariationListItem__Selected--_39e6 {
  background-color: #D1ECFA;
}

.VariationListItem__Selected--_39e6:hover {
  background-color: #BAE3F7;
}

.VariationListItem__VariationListItemInner--kdP4k {
  display: grid;
  gap: 20px;
  grid-template-columns: min-content minmax(0, auto) min-content;
  grid-template-areas: "VariationImageContainer VariationNameContainer VariationCriteriaContainer";
  padding-bottom: 20px;
  border-bottom: 1px solid #9CB2C7;
}
.VariationListItem__VariationListItemInner--kdP4k > div {
  min-height: 80px;
}

.VariationListItem__VariationImageContainer--jYZwS {
  grid-area: VariationImageContainer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.VariationListItem__VariationImage--Vj5jw {
  width: 100%;
  height: auto;
}

.VariationListItem__VariationNameContainer--nbumz {
  grid-area: VariationNameContainer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.VariationListItem__VariationNameContainer--nbumz div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.VariationListItem__VariationName--qdHCK {
}

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

.VariationListItem__VariationCriteriaContainer--FCynR {
  grid-area: VariationCriteriaContainer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 130px;
}

.VariationListItem__VariationCriteriaContainer--FCynR div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.VariationForm__VariationForm--wJ5b7 {
  padding: 20px 40px 0 40px;
  color: #3E586F;
  --dokio-background-color: #EFF2F6;
}

.VariationForm__VariationForm--wJ5b7:focus-within {
  background-color: #CED9E3;
  /* composes: onHover85 from "@/styles/onBackground.css"; */
  color: #3E586F;
  --dokio-background-color: #CED9E3;
  --dokio-hover-background: #BECDDA;
}

.VariationForm__VariationForm--wJ5b7:focus-within:hover {
  background-color: #CED9E3;
  /* composes: onHover85 from "@/styles/onBackground.css"; */
  color: #3E586F;
  --dokio-background-color: #CED9E3;
  --dokio-hover-background: #BECDDA;
}

.VariationForm__VariationForm--wJ5b7:hover {
  background-color: #DEE6ED;
  /* composes: onCoolGrey from "@/styles/onBackground.css"; */
  color: #3E586F;
  --dokio-background-color: #DEE6ED;
  --dokio-hover-background: #CED9E3;
}

.VariationForm__VariationForm--wJ5b7:last-of-type .VariationForm__VariationFormInner--Zivrr {
  border-bottom: none;
}

.VariationForm__VariationForm--wJ5b7 .VariationForm__VariationFormInner--Zivrr {
  padding-bottom: 20px;
  border-bottom: 1px solid #9CB2C7;
  --dokio-line-height: 20px;
}

.VariationForm__HalfInput--gyVr5 {
  width: 100%;
}

.VariationForm__DuplicatedFrom--xFEmB {
  color: #3E586F;
  margin-top: 5px;
}

.VariationForm__DuplicatedFrom--xFEmB strong {
  font-weight: bold;
}

.VariationForm__ChangeButton--oNzv5 {
  display: inline-block;
  margin-left: 5px;
}
.index__ToggleCheckbox--nI29y {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
  height: 20px;
}
.index__ToggleCheckbox--nI29y[aria-disabled=true] {
  cursor: not-allowed;
}
.index__ToggleCheckbox--nI29y[aria-readonly=true] {
  cursor: default;
}

.index__ToggleCheckbox--nI29y.index__Shape-square--gVUWM {
  --toggle-checkbox-radius: 6px;
}

.index__ToggleCheckbox--nI29y.index__Shape-circle--sjyCU {
  --toggle-checkbox-radius: 50%;
}

.index__ToggleCheckbox--nI29y:is(.index__Shape-square--gVUWM, .index__Shape-circle--sjyCU) {
  width: 20px;
}
.index__ToggleCheckbox--nI29y:is(.index__Shape-square--gVUWM, .index__Shape-circle--sjyCU) .index__Slider--jdq9I {
  position: absolute;
  width: 20px;
  height: 100%;
  border: solid 1px;
  border-radius: var(--toggle-checkbox-radius);
  padding: 2px;
  background: #EFF2F6;
  border: solid 1px #9CB2C7;
  fill: #3E586F;
  transition: fill 100ms ease-in-out, border-color 100ms ease-in-out, background-color 100ms ease-in-out;
}
.index__ToggleCheckbox--nI29y:is(.index__Shape-square--gVUWM, .index__Shape-circle--sjyCU).index__Checked--uN3sa .index__Slider--jdq9I {
  background: #3E586F;
  border-color: #3E586F;
  fill: #EFF2F6;
}
.index__ToggleCheckbox--nI29y:is(.index__Shape-square--gVUWM, .index__Shape-circle--sjyCU):not([aria-disabled=true], [aria-readonly=true]) .index__Slider--jdq9I:hover {
  background: #9CB2C7;
}

.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx {
  --toggle-checkbox-icon-fill: #9CB2C7;
  --toggle-checkbox-icon-background: #FFFFFF;
  --toggle-checkbox-toggle-fill: #DEE6ED;
  --toggle-checkbox-border-color: #9CB2C7;
  --toggle-checkbox-radius: 10px;
  border: 1px solid var(--toggle-checkbox-border-color);
  width: 36px;
  height: 20px;
  border-radius: var(--toggle-checkbox-radius);
  background-color: var(--toggle-checkbox-toggle-fill);
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx .index__Slider--jdq9I {
  background-color: var(--toggle-checkbox-icon-background);
  width: 18px;
  height: 18px;
  fill: var(--toggle-checkbox-icon-fill);
  position: absolute;
  height: 100%;
  border-radius: var(--toggle-checkbox-radius);
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--toggle-checkbox-border-color);
  padding: 2px;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx:not([aria-disabled=true], [aria-readonly=true]) {
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx:not([aria-disabled=true], [aria-readonly=true]) .index__Slider--jdq9I {
  transition: transform 200ms ease-in-out, fill 200ms ease-in-out, outline-color 200ms ease-in-out;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx.index__Checked--uN3sa .index__Slider--jdq9I {
  transform: translateX(16px);
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx.index__Checked--uN3sa {
  --toggle-checkbox-toggle-fill: #3E586F;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx.index__Checked--uN3sa:not([aria-disabled=true]) {
  --toggle-checkbox-icon-background: #FFFFFF;
  --toggle-checkbox-icon-fill: #3E586F;
  --toggle-checkbox-border-color: #3E586F;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx[aria-readonly=true] {
  --toggle-checkbox-toggle-fill: #EFF2F6;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx[aria-readonly=true].index__Checked--uN3sa {
  --toggle-checkbox-toggle-fill: #9CB2C7;
  --toggle-checkbox-border-color: #9CB2C7;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx[aria-disabled=true] {
  --toggle-checkbox-toggle-fill: #EFF2F6;
  --toggle-checkbox-icon-background: #EFF2F6;
}
.index__ToggleCheckbox--nI29y.index__Shape-switch--l2uNx.index__Middle--cxwkB .index__Slider--jdq9I {
  transform: translateX(8px);
}

.index__Icon--Ta5e4 {
  width: 14px;
  height: 14px;
}
.index__Layout--qLRWt {
}

.index__Header--jiyY_ {
  padding: 0 40px 40px 40px;
}

.index__Results--LkVDj {
  border-top: 1px solid #BECDDA;
  border-bottom: 1px solid #BECDDA;
}
.field__StandardPadding--Q6eKw {
  padding: 11px 15px;
}
.index__Placeholder--KsPTR {
  background: #EFF2F6;
  border: solid 1px #9CB2C7;
  color: #9CB2C7;
  border-radius: 4px;
}
.MovableInkField__AttachedFields--_XxCj {
  position: relative;
  padding-left: 20px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.MovableInkField__AttachedFields--_XxCj:after {
  border-left: 1px solid #9CB2C7;
  border-bottom: 1px solid #9CB2C7;
  border-bottom-left-radius: 6px;
  width: 10px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.MovableInkField__ExtraLabel--NjGlu {
  color: #3E586F;
}
@charset "UTF-8";
/*
 * FieldVisibilityWrapper
 *
 * Two visual states:
 *   .Empty  — slim "Add visibility condition" button sits above the field
 *             with no border treatment around the field itself.
 *   .Active — bordered frame around the field with a coloured header strip
 *             that summarises the wrapping condition and exposes edit/remove
 *             affordances. The frame intentionally uses the same info-blue
 *             palette as MergeTagVisibilityBadge so the two visual languages
 *             read as related.
 */
.FieldVisibilityWrapper__Empty--pSRjs {
  display: flex;
  flex-direction: column;
  /*
   * Horizontal padding (25px L/R) matches the wrapped `.FieldArea`'s
   * `padding: 15px 25px` so the button aligns with the field's label/input
   * column. Without this the button sits 25px to the left, reading as
   * detached from the field.
   *
   * Vertical padding sits OUTSIDE the FieldArea's own 15px top/bottom
   * padding — we don't want the affordance to eat into the perceived
   * spacing of the field below it. 4px above and below gives the button
   * its own slim breathing room without compressing the field stack.
   */
  padding: 4px 25px;
}

.FieldVisibilityWrapper__AddButton--F2X1F {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px dashed var(--color-border-info, #c2d9f2);
  font-size: 11px;
  color: var(--color-text-info, #1a73e8);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  /*
   * Keep the affordance subtle in the at-rest state — it appears above
   * every field in templates with merge tags, so a default-prominent
   * treatment clutters the editor. Hover/focus reveal the full colour.
   */
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
}

.FieldVisibilityWrapper__Empty--pSRjs:hover .FieldVisibilityWrapper__AddButton--F2X1F,
.FieldVisibilityWrapper__AddButton--F2X1F:hover,
.FieldVisibilityWrapper__AddButton--F2X1F:focus-visible {
  opacity: 1;
  background: var(--color-surface-info, #e8f0fe);
}

.FieldVisibilityWrapper__AddIcon--iuQmh {
  display: inline-flex;
  width: 12px;
  height: 12px;
}

.FieldVisibilityWrapper__AddIcon--iuQmh svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.FieldVisibilityWrapper__AddText--RJGX5 {
  font-weight: 500;
}

/* ---------------------------------------------------------------- Active */
.FieldVisibilityWrapper__Active--xTu9P {
  border-radius: 6px;
  overflow: hidden;
  /* Frame intentionally has no border/background of its own — the
     `.Header` strip above the wrapped field is sufficient signal that a
     visibility condition is attached. Keeps the field itself visually
     identical to a regular (unwrapped) field. */
}

/* Preview-disabled wrap: dimmed body, struck-through label. Signals to
   the editor that the wrap exists in the saved draft but is being
   suppressed for THIS preview only. The downstream render still
   includes the wrap as configured. */
.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC {
  background: var(--color-surface-muted, #f3f4f6);
  box-shadow: inset 3px 0 0 var(--color-text-muted, #9ca3af);
  border-color: var(--color-border-muted, #d1d5db);
}

.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__Header--AQUEj {
  background: var(--color-surface-muted-strong, #e5e7eb);
  border-bottom-color: var(--color-border-muted, #d1d5db);
  color: var(--color-text-muted, #6b7280);
}

.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__HeaderExpr--uWVZB {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-text-muted, #6b7280);
  text-decoration: line-through;
}

.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__HeaderAction--dohis {
  color: var(--color-text-muted, #6b7280);
}

.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__Body--TUKVZ,
.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__BodyFlush--izd_O {
  opacity: 0.5;
  filter: grayscale(0.4);
}

.FieldVisibilityWrapper__Header--AQUEj {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: var(--color-surface-info, #e8f0fe);
  border-bottom: 1px solid var(--color-border-info, #c2d9f2);
  font-size: 11px;
  color: var(--color-text-info, #1a73e8);
  white-space: nowrap;
  overflow: hidden;
}

.FieldVisibilityWrapper__HeaderIcon--IybAS {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.FieldVisibilityWrapper__HeaderIcon--IybAS svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.FieldVisibilityWrapper__HeaderLabel--sRa4P {
  font-weight: 500;
  flex: 0 0 auto;
}

.FieldVisibilityWrapper__HeaderExpr--uWVZB {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(26, 115, 232, 0.08);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--color-text-info, #1a73e8);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.FieldVisibilityWrapper__HeaderActions--UULFY {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.FieldVisibilityWrapper__HeaderAction--dohis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--color-text-info, #1a73e8);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}

.FieldVisibilityWrapper__HeaderAction--dohis:hover {
  opacity: 1;
  background: rgba(26, 115, 232, 0.12);
}

.FieldVisibilityWrapper__HeaderAction--dohis svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/*
 * Branch-radio control sits in the same row as the icon-button actions
 * but needs to show the current branch label (If / Elif 1 / … / Else /
 * None), so it can't share the 20×20 icon-button sizing — that hides
 * the label and leaves only a tiny v-arrow. Style it as a compact
 * pill-shaped <select> matching the header's blue palette so the
 * branched-preview state is visible at a glance.
 */
.FieldVisibilityWrapper__BranchRadio--h_q0O {
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid var(--color-border-info, #c2d9f2);
  background: rgba(26, 115, 232, 0.08);
  color: var(--color-text-info, #1a73e8);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: background 0.15s;
}

.FieldVisibilityWrapper__BranchRadio--h_q0O:hover {
  background: rgba(26, 115, 232, 0.16);
}

.FieldVisibilityWrapper__BranchRadio--h_q0O:focus-visible {
  border-color: var(--color-text-info, #1a73e8);
}

.FieldVisibilityWrapper__Active--xTu9P.FieldVisibilityWrapper__PreviewDisabled--Ej5pC .FieldVisibilityWrapper__BranchRadio--h_q0O {
  color: var(--color-text-muted, #6b7280);
  border-color: var(--color-border-muted, #d1d5db);
  background: rgba(107, 114, 128, 0.12);
}

/*
 * "Context → <branch>" hint shown next to the branch radio. Cosmetic
 * read-out of which branch the current Preview context selects (the
 * client-side mirror of the renderer's evaluation) — distinct from the
 * blue radio so it reads as derived state, not an interactive control.
 * Green palette signals "this is what's live given your context".
 */
.FieldVisibilityWrapper__ActiveBranch--isBap {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--color-border-success, #b7e0c2);
  background: rgba(34, 153, 84, 0.1);
  color: var(--color-text-success, #1e7e44);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}

.FieldVisibilityWrapper__Body--TUKVZ {
  padding: 6px 8px 8px;
  background: var(--color-surface, #fff);
}

/* Flush variant: zero padding for cases where the wrapped child already
   has its own padding (e.g. `.FieldArea` in the real editor). */
.FieldVisibilityWrapper__BodyFlush--izd_O {
  padding: 0;
  background: var(--color-surface, #fff);
}
.background__White--Ujtbo {
  background-color: var(--dokio-background-color);
}

.background__Silver--b6niq {
  background-color: var(--dokio-background-color);
}

.background__CoolGrey--GLl1M {
  background-color: var(--dokio-background-color);
}

.background__Hover85--U3cwT {
  compose: onHover85 from "./onBackground.css";
  background-color: var(--dokio-background-color);
}
.ExpandableModule__ExpandableModule--lCen0 {
  --dokio-line-height: 20px;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
  min-width: auto;
  cursor: pointer;
}
.ExpandableModule__ExpandableModule--lCen0.ExpandableModule__Expanded--nlnhM > * > * > .ExpandableModule__ExpandButton--X96xe {
  transform: rotate(180deg);
}

.ExpandableModule__Expanded--nlnhM {
}

.ExpandableModule__Title--mHDpK {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  gap: 10px;
}

.ExpandableModule__TitleLeft--oUjdK {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ExpandableModule__TitleLeft--oUjdK legend {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ExpandableModule__TitleButtons--Zub8P {
  display: flex;
  align-items: center;
  gap: 5px;
}

/*
 * Wrapper for the merge-tag visibility chip / inline-add affordances so
 * they sit in the button cluster exactly like the duplicate/delete
 * `<div>`s: a flex box that vertically centers its child, with no inline
 * baseline leading that would otherwise nudge the icon a couple of px low.
 */
.ExpandableModule__TitleButton--UpS_H {
  display: flex;
  align-items: center;
}

.ExpandableModule__Child--sHXsC {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  position: static;
  cursor: auto;
}

.ExpandableModule__DragHandle--Q38Nr {
  align-self: flex-end;
}

.ExpandableModule__ExpandButton--X96xe {
  transition: transform 200ms ease-in-out;
}
/*
 * Active-state visibility-condition chip. Mirrors the inline merge-tag
 * chip used inside text fields (`MergeTagInput.css` `.merge-tag-chip`):
 * same sky-blue palette, 4px radius and 500 weight, so a field-level
 * visibility condition reads as "the same kind of thing" as a merge tag
 * embedded in a value.
 *
 * Sits inline in the field's TitleArea next to the field name (in the
 * same slot as the empty-state `FieldVisibilityInlineAdd` icon).
 */
.FieldVisibilityChip__Chip--dVkFy {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  max-width: 100%;
  margin-left: 8px;
  padding: 0 2px 0 6px;
  border: 1px solid #BAE3F7;
  border-radius: 4px;
  background: #EDF7FD;
  color: #106793;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  user-select: none;
}

/*
 * Toolbar variant: rendered in a module row's right-hand button cluster
 * alongside `InlineIconButton` icons, which carry a 2px optical nudge
 * (translateY = icon-size * 0.1 at the row's 20px icon size). Match it so
 * the chip lines up with the duplicate/delete icons.
 */
.FieldVisibilityChip__Chip--dVkFy.FieldVisibilityChip__Toolbar--ln8sw {
  transform: translateY(2px);
  /*
   * The toolbar row lets the chip grow to its content width, so a long
   * expression (e.g. a deep merge-tag path) overflows the module instead
   * of truncating. Cap the chip and let `.Label`'s ellipsis take over.
   */
  max-width: 260px;
}

/* Icon + label: the click target that re-opens the builder in edit mode. */
.FieldVisibilityChip__Main--vWkRq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.FieldVisibilityChip__Icon--pl4Bw {
  display: inline-flex;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.FieldVisibilityChip__Icon--pl4Bw svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.FieldVisibilityChip__Label--ijPue {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Active state: the current Preview context selects this wrap's `if`
 * branch (the host field's own content). Recolour the whole chip to the
 * green "live" palette so it reads identically to the elif/else
 * `.BranchChipActive` chips rendered below it (BranchModulesBodies.css).
 */
.FieldVisibilityChip__Chip--dVkFy.FieldVisibilityChip__Active--eneAY {
  border-color: #30C071;
  background: rgba(80, 211, 139, 0.16);
  color: #1e7e44;
}

.FieldVisibilityChip__Chip--dVkFy.FieldVisibilityChip__Active--eneAY .FieldVisibilityChip__Remove--xSD1W:hover,
.FieldVisibilityChip__Chip--dVkFy.FieldVisibilityChip__Active--eneAY .FieldVisibilityChip__Remove--xSD1W:focus-visible {
  background: rgba(48, 192, 113, 0.22);
}

/*
 * "ACTIVE" pill inside the chip. Matches `.BranchChipActiveBadge` so the
 * host `if` chip and the elif/else chips read as the same token.
 */
.FieldVisibilityChip__ActiveBadge--l7bPS {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(48, 192, 113, 0.22);
  color: #1e7e44;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.FieldVisibilityChip__Remove--xSD1W {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}

.FieldVisibilityChip__Remove--xSD1W:hover,
.FieldVisibilityChip__Remove--xSD1W:focus-visible {
  opacity: 1;
  background: #BAE3F7;
}

.FieldVisibilityChip__Remove--xSD1W svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
@charset "UTF-8";
/*
 * Empty-state "add visibility condition" affordance: the merge-tag
 * builder icon, rendered inline next to the field name inside the
 * field's TitleArea.
 *
 * Uses the same sky-blue merge-tag palette as the active-state
 * `FieldVisibilityChip` (and the text-field merge-tag chips) so the
 * empty → active transition reads as one concept.
 */
.FieldVisibilityInlineAdd__Button--bPAmd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: #106793;
  cursor: pointer;
  transition: background 0.15s;
}

.FieldVisibilityInlineAdd__Button--bPAmd:hover,
.FieldVisibilityInlineAdd__Button--bPAmd:focus-visible {
  background: #EDF7FD;
}

.FieldVisibilityInlineAdd__Button--bPAmd svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/*
 * Toolbar variant: rendered in a module row's right-hand button cluster
 * alongside `InlineIconButton` duplicate/delete icons. Mirror that
 * component's metrics exactly so all the icons line up and share the same
 * hover treatment: a square box sized to the row's line-height, an 0.8×
 * glyph, the `$color_silver` hover fill, and the `* 0.1` optical nudge.
 */
/*
 * Toolbar variant is rendered via <InlineIconButton> (see
 * FieldVisibilityInlineAdd.tsx) so it shares the duplicate/delete icons'
 * exact box, optical nudge, and hover. No bespoke styling needed here.
 */
.ModulePanel__ModulePanel--_2OQp {
  --dokio-line-height: 20px;
  position: absolute;
  inset: 0;
  z-index: 100;
  /* When portalled into the viewer sidebar (see ModulePanelHost) the host is
     the whole .SidebarWrapper grid: variation picker / content / footer
     buttons. Naming the content row confines this absolutely positioned child
     to that row's rect instead of the wrapper's padding box, so the drawer no
     longer covers the Export / Update preset buttons in the footer. Ignored
     when the panel is not a grid child (the in-place fallback). */
  grid-area: SidebarContentContainer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Slide in from the left on mount. Snappier than $transition_movement;
     keep in sync with SLIDE_DURATION_MS in ModulePanel.tsx. */
  animation: ModulePanel__SlideIn--O9SjK 150ms ease-in-out;
}

/* Slide back out to the left. The component defers unmounting until this
   transition finishes (SLIDE_DURATION_MS in ModulePanel.tsx). */
.ModulePanel__Closing--TYqtF {
  transform: translateX(-100%);
  transition: transform 150ms ease-in-out;
}

@keyframes ModulePanel__SlideIn--O9SjK {
  from {
    transform: translateX(-100%);
  }
}
.ModulePanel__Header--EPW6M {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  /* Same height as the module list rows; flex centering keeps the trail
     vertically centred. Horizontal padding matches the fields' left padding
     (FieldArea uses $spacing_mediumLarge) so the first crumb lines up with
     the field controls below. */
  min-height: 46px;
  padding: 0 25px;
  border-bottom: 1px solid #9CB2C7;
}

/* The module being edited: the end of the trail, and the panel's title.
   Shrinks only once the crumbs before it have given up all the room they
   can, so the current module keeps its full title whenever it fits. */
.ModulePanel__Title--oK5Ks {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

/* An ancestor level: the root list, or a module panel still open underneath
   this one. Gives up its width long before the current title does, but never
   collapses entirely - an ellipsised stub still says a level is there and
   stays clickable. */
.ModulePanel__Crumb--MWU3Z {
  flex: 0 999999 auto;
  min-width: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* button reset */
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ModulePanel__Crumb--MWU3Z:hover {
  text-decoration: underline;
}

/* The root crumb is a list icon, not a word. The list it goes back to has
   no title of its own worth spending sidebar width on, and unlike a label it
   cannot ellipsise, so the way out of the panels stays whole however deep
   the trail gets and however long the module titles are. */
.ModulePanel__RootCrumb--Zktkb {
  flex: none;
  /* The 40px floor is there to keep an ellipsised title readable; the icon
     is a fixed 24 and would otherwise be padded out to it. */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The hover chip is wider than the glyph, so the negative margin puts the
     glyph itself - not the chip - on the header's padding edge, in line with
     the field controls below. */
  width: 24px;
  height: 24px;
  margin-left: -4px;
  border-radius: 3px;
  /* Underlining an icon does nothing; hover reads as a chip instead, the
     same one the app's other inline icon buttons use. */
}
.ModulePanel__RootCrumb--Zktkb svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.ModulePanel__RootCrumb--Zktkb:hover {
  text-decoration: none;
  background-color: var(--dokio-hover-background);
}

/* Chevron between levels, matching the shared Breadcrumbs component. */
.ModulePanel__Separator--hYE8E {
  flex: none;
  width: 0.75em;
  height: 0.75em;
}
.ModulePanel__Separator--hYE8E path {
  fill: currentColor;
  opacity: 50%;
}

.ModulePanel__Body--e4TNk {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ModulePanelHost__ModulePanelHost--QPxXK {
  position: relative;
}
/* Positioned so a ModulePanel rendered without a ModulePanelHost still
   overlays the module list rather than escaping the layout. */
.index__ExpandableModules--CUi5U {
  position: relative;
}
@charset "UTF-8";
/*
 * Per-branch module-body editors for a branched merge-tag visibility
 * wrap. Rendered under the host field, visually nested + tied to the
 * wrap's blue palette so the branches read as belonging to the field's
 * `if` above them.
 */
.BranchModulesBodies__Branches--wRYzx {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 12px 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--color-border-info, #c2d9f2);
}

.BranchModulesBodies__Branch--W5pUC {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * The per-branch modules editor (an `EditorField` → `ModulesField`)
 * shouldn't carry the field's left/right padding when nested under a
 * branch chip — it already sits inside the `.Branches` rail. The padding
 * lives on the `.FieldArea` (the single div child of the global `.Field`
 * wrapper), so zero it there to pull the branch's module boxes flush so
 * their left edge aligns with the branch chip above them.
 *
 * The `> :global(.Field) > div` combinator deliberately targets ONLY the
 * branch body's OUTER field area — nested fields (e.g. a `Row` modules
 * field inside a `Table` module) sit deeper in the tree and keep their
 * normal indentation, preserving the expected visual nesting.
 */
.BranchModulesBodies__Branch--W5pUC > .Field {
  padding-left: 0;
  padding-right: 0;
}

.BranchModulesBodies__Branch--W5pUC > .Field > div {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Branch heading chip. Mirrors `FieldVisibilityChip` / the inline
 * merge-tag chip (`MergeTagInput.css` `.merge-tag-chip`): sky-blue
 * palette, medium radius, 500 weight — so each elif/else branch reads
 * as the same kind of token as the field's `if` condition above.
 */
.BranchModulesBodies__BranchChip--Qk_bW {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid #BAE3F7;
  border-radius: 4px;
  background: #EDF7FD;
  color: #106793;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  user-select: none;
}

/*
 * The branch the current Preview context selects. Switches the chip from
 * the neutral sky-blue token to a green "live" palette so it reads as
 * "this is the branch your context lands on" — the cosmetic mirror of the
 * renderer's evaluation. Purely a read-out; it doesn't change which branch
 * previews.
 */
.BranchModulesBodies__BranchChipActive--GSBcQ {
  border-color: #30C071;
  background: rgba(80, 211, 139, 0.16);
  color: #1e7e44;
}

.BranchModulesBodies__BranchChipActiveBadge--aOqr7 {
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(48, 192, 113, 0.22);
  color: #1e7e44;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.BranchModulesBodies__BranchChipIcon--hDdFW {
  display: inline-flex;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.BranchModulesBodies__BranchChipIcon--hDdFW svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.BranchModulesBodies__BranchChipKeyword--Bxlzp {
  flex: 0 0 auto;
  font-weight: 600;
}

.BranchModulesBodies__BranchChipCondition--Aa7CN {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Per-branch remove button. Mirrors `FieldVisibilityChip`'s `.Remove`
 * so the elif/else chips read and behave like the host's `if` chip:
 * clicking the × deletes that one branch (and its modules).
 */
.BranchModulesBodies__BranchChipRemove--s2iye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}

.BranchModulesBodies__BranchChipRemove--s2iye:hover,
.BranchModulesBodies__BranchChipRemove--s2iye:focus-visible {
  opacity: 1;
  background: #BAE3F7;
}

.BranchModulesBodies__BranchChipRemove--s2iye svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
.index__ModalLayout--JgIuk {
  display: grid;
  height: 80vh;
  max-height: 700px;
  background-color: #EFF2F6;
  grid-template-rows: max-content max-content 1fr max-content;
  grid-template-areas: "header" "search" "results" "ModalFooter";
}
.index__ModalLayout--JgIuk > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Search--T0PR7 {
  grid-area: search;
  margin-bottom: 20px;
}

.index__Results--I898e {
  grid-area: results;
  border-top: 1px solid #BECDDA;
  border-bottom: 1px solid #BECDDA;
  overflow: auto;
}
.index__Results--I898e > ul {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Module previews */
.index__Layout--vU2bq {
}

.index__InfoBar--CpPtW {
  overflow-y: hidden;
  display: grid;
  grid-template-rows: max-content max-content 1fr;
  grid-template-areas: "header" "search" "results";
}

.index__PreviewHeader--D354z {
  grid-area: header;
  padding-bottom: 1rem;
  padding: 0 40px;
}

.index__PreviewSearch--dKrVt {
  grid-area: search;
  border-bottom: 1px solid #BECDDA;
  padding-bottom: 20px;
}

.index__PreviewSearchInput--PKedC {
  padding: 0 40px;
}

.index__PreviewResults--sCgow {
  grid-area: results;
  overflow: auto;
}
.index__PreviewResults--sCgow > ul {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}

.index__Preview--RIRa9 {
}

.index__Image--KjL1B,
.index__ErrorImage--CEu4n {
  max-width: min(100%, 700px);
  max-height: min(100%, 700px);
  box-shadow: 0px 2px 4px 0px rgba(28, 39, 49, 0.3);
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Theme-Light--rnELd .index__Option--Ycdj4:hover {
  background-color: #EFF2F6;
}
.index__Theme-Light--rnELd .index__Option--is-selected--VM0GC {
  background-color: #D1ECFA;
}
.index__Theme-Light--rnELd .index__Option--is-selected--VM0GC:hover {
  background-color: #D1ECFA;
}

.index__Theme-Dark--q6Hnm .index__Option--Ycdj4:hover {
  background-color: #106793;
}
.index__Theme-Dark--q6Hnm .index__Option--is-selected--VM0GC {
  background-color: #9FD8F4;
  color: #3E586F;
}
.index__Theme-Dark--q6Hnm .index__Option--is-selected--VM0GC:hover {
  background-color: #9FD8F4;
  color: #3E586F;
}

.index__Options--GQQUc {
  overflow: auto;
  height: 100%;
}

.index__Option--Ycdj4 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  user-select: none;
  cursor: pointer;
  border: 1px solid #9CB2C7;
  border-top: none;
  background-color: #FFFFFF;
  display: block;
  overflow: auto;
  max-height: 200px;
  list-style: none;
  padding: 12px 15px;
}

.index__Option--Ycdj4:first-of-type {
  border-top: 1px solid #9CB2C7;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index__Option--Ycdj4:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.ModulesField__UndoMessage--FHaHE {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #3E586F;
}

.ModulesField__UndoButton--Fp6Qt {
  padding: 0;
  border: none;
  background: none;
  color: #496783;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  transition: color 100ms ease-in-out;
}
.ModulesField__UndoButton--Fp6Qt:hover {
  color: #1C2731;
}

.ModulesField__DismissButton--c20Nu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #3E586F;
  transition: color 100ms ease-in-out;
}
.ModulesField__DismissButton--c20Nu svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.ModulesField__DismissButton--c20Nu:hover {
  color: #1C2731;
}
.ConditionalField__ConditionalBackground--Ty8pW {
  background: #E5EAEF;
}
@charset "UTF-8";
.EditorFieldInner__Divider--_oe8b {
  width: 100%;
  border-top: 2px solid #9CB2C7;
}
.EditorFieldInner__Divider--_oe8b.EditorFieldInner__WithText--qGRtG {
  margin-bottom: 10px;
}

.EditorFieldInner__TitleArea--zhRxo {
  position: relative;
  margin-bottom: 6px;
  color: #3E586F;
  min-height: 20px;
}

.EditorFieldInner__RightToggle--cTYe_ {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.EditorFieldInner__Title--rdI3E {
  display: inline-block;
  /* Centre the field name against the visibility chip / add icon that sit
     beside it — those are `vertical-align: middle`, so the title must be
     too, otherwise its text baseline sits low against the chip. */
  vertical-align: middle;
}

.EditorFieldInner__Instructions--nfEro {
}

/* Keep title/instructions clear of the absolutely-positioned toggle */
.EditorFieldInner__TitleArea--zhRxo:has(> .EditorFieldInner__RightToggle--cTYe_) {
  padding-right: 44px;
}

/* Reimplement as a react component */
.EditorFieldInner__Information--UU1nW {
  display: inline-block;
  position: relative;
  left: 10px;
  top: 3px;
  cursor: pointer;
  width: 16px;
}
.EditorFieldInner__Information--UU1nW .EditorFieldInner__InformationIcon--YwP1Y {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.EditorFieldInner__Information--UU1nW .EditorFieldInner__InformationIcon--YwP1Y svg {
  fill: currentColor;
}

.EditorFieldInner__FieldArea--_L7m5 {
  --varied-toggle-offset: 14px;
  --varied-toggle-opacity: 0;
  transition: background-color 0.2s;
}
.EditorFieldInner__FieldArea--_L7m5:not(.EditorFieldInner__Type-divider--Hg2Fv):not(.EditorFieldInner__Type-conditional--P6N5D):hover {
  background: #DEE6ED;
}
.EditorFieldInner__FieldArea--_L7m5:not(.EditorFieldInner__Type-divider--Hg2Fv):not(.EditorFieldInner__Type-conditional--P6N5D):focus-within {
  background: #CED9E3;
}
.EditorFieldInner__FieldArea--_L7m5:not(.EditorFieldInner__Type-conditional--P6N5D) {
  padding: 15px 25px;
  padding-right: var(--field-padding-right, 15px);
}
.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__Type-conditional--P6N5D > .EditorFieldInner__TitleArea--zhRxo > .EditorFieldInner__RightToggle--cTYe_ {
  top: var(--field-padding-right, 15px);
  right: var(--field-padding-right, 15px);
}

.EditorFieldInner__FieldArea--_L7m5:hover,
.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__IsVaried--tjUQI {
  --varied-toggle-opacity: 1;
}

.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__Type-richtext--YMk_A:not(.EditorFieldInner__IsVaried--tjUQI) {
  --varied-toggle-offset: 180px;
}

.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__Type-textarea--fFqjz:not(.EditorFieldInner__IsVaried--tjUQI) {
  --varied-toggle-offset: 90px;
}

.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__Type-checkbox--gFxbr:not(.EditorFieldInner__IsVaried--tjUQI) {
  --varied-toggle-offset: 3px;
}

.EditorFieldInner__FieldArea--_L7m5.EditorFieldInner__Type-checkbox--gFxbr.EditorFieldInner__CanVary--Pglfh .EditorFieldInner__Control--aFzD3 {
  padding-left: 20px;
}

.EditorFieldInner__VariedToggle--y4KKx {
  position: relative;
  top: 0;
  width: 20px;
  /* all this weird positioning is because we can't use position: relative
     anywhere outside this, because dropdowns will be clipped;
     so we can't easily position: absolute here. */
  margin-left: calc(-100px + 80px * var(--varied-toggle-opacity));
  margin-bottom: -20px;
  left: 11px;
  top: var(--varied-toggle-offset);
  z-index: 10;
  transition: opacity 100ms ease-in-out;
  opacity: var(--varied-toggle-opacity);
}
.index__Panel--IsTlB {
  border: 1px solid #9CB2C7;
  border-radius: 4px;
}
.index__Panel--IsTlB.index__Expanded--p9e7W > .index__Title--F04uw > .index__ExpandButton--SoDKO {
  transform: rotate(180deg);
}

.index__Title--F04uw {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  gap: 10px;
  cursor: pointer;
}

.index__ExpandButton--SoDKO {
  transition: transform 200ms ease-in-out;
}

.index__DebugPanel--uFYpE {
  padding: 10px;
}
.index__Toggle--PkBF4 {
  padding: 15px 40px;
  padding-right: var(--field-padding-right, 15px);
  display: flex;
  justify-content: space-between;
  background-color: #DEE6ED;
  margin-bottom: 20px;
}

.index__Title--UqRrH {
  color: #3E586F;
}
@charset "UTF-8";
/*
 * Global "Context" editor. The trigger and the in-modal controls use the
 * app's design-system components (Button, Select, TextInput,
 * TextAreaInput, InlineIconButton) so the modal matches the rest of the
 * editor; this stylesheet only handles the toolbar strip and the modal's
 * row layout.
 */
/*
 * Toolbar anchored at the top of the sidebar. In the viewer the fields
 * panel portals it into `.PreviewContextContainer`, its own grid row above
 * the scrolling content — so it stays put while the author scrolls, and
 * module panels (which cover the content row) open below it.
 * `position: sticky` is the fallback for panels mounted without that row
 * (Storybook, tests), where the bar sits inside the scrolling
 * `.SidebarContentContainer` and has to stick itself. Opaque background +
 * bottom border + small shadow so field content reads as passing
 * underneath it. The z-index clears the per-field `.VariedToggle`
 * (z-index 10) so a toggle near the top can't poke above the bar.
 */
.index__Bar--ZWKxj {
  position: sticky;
  top: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 25px;
  border-bottom: 1px solid #DEE6ED;
  background: #FFFFFF;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
}

/*
 * The bar stays mounted when the template hasn't enabled the merge tag
 * builder (its committed override still drives the renderer) and hides
 * itself with the `hidden` attribute. `display: flex` above would
 * otherwise win over the UA's `[hidden] { display: none }` on specificity
 * and leave an empty bar anchored at the top of every sidebar.
 */
.index__Bar--ZWKxj[hidden] {
  display: none;
}

.index__BarLabel--cPQvf {
  color: #5C81A3;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Modal layout ------------------------------------------------------- */
/*
 * Grid layout so the header and search share the top row (header on the
 * left, search on the right at half width), mirroring
 * `CreatePresetModal`'s `"header search"` row. The body and footer span
 * the full width beneath. `ModalHeader`/`ModalFooter` are assigned their
 * grid areas explicitly below. The `> div` rule supplies the horizontal
 * padding for every section, since `ModalHeader`/`ModalFooter` carry zero
 * horizontal padding by design and rely on the layout wrapper to inset
 * them.
 */
.index__ModalLayout--OTBoi {
  display: grid;
  /* Drive the layout to a stable tall size so the `1fr` body row fills
     consistently (no collapse to just the loading spinner, then jump to
     full size when the rows resolve), while the `max-height` cap keeps the
     whole modal — footer included — inside the viewport on short screens.
     The body row carries `min-height: 0` so it absorbs the difference and
     scrolls rather than overflowing the cap. */
  height: 80vh;
  height: 80dvh;
  max-height: 90vh;
  max-height: 90dvh;
  /* The `paste` row holds the JSON import panel. It's only rendered while
     that panel is open (or has a result to report), and an empty
     `max-content` row collapses to zero height, so the closed state lays
     out exactly as before. */
  grid-template-rows: max-content max-content 1fr max-content;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "header  search" "paste   paste" "body    body" "footer  footer";
}

.index__ModalLayout--OTBoi > div {
  padding-left: 25px;
  padding-right: 25px;
}

/* Place the design-system header/footer into their grid areas. They
   target `> div` by tag below since they render as plain wrappers. */
.index__ModalLayout--OTBoi > :first-child {
  grid-area: header;
}

.index__ModalLayout--OTBoi > :last-child {
  grid-area: footer;
}

/* `min-height` (not a fixed `height`) so the body keeps a stable size
   while the inferred context loads and after the rows render — otherwise
   it collapses to just the spinner, then jumps to full size when the
   fetch resolves. Using `min-height` rather than `height: 60vh` lets the
   `1fr` grid row shrink the body when the modal's `max-height: 90vh` cap
   would otherwise be exceeded on short viewports, keeping the footer and
   last rows inside the modal instead of clipped by `ModalContainer`'s
   `overflow: hidden`. `min-height: 0` lets the row itself shrink below the
   content's intrinsic height so `overflow-y: auto` actually scrolls. */
.index__Body--rWA6e {
  grid-area: body;
  /* `min-height: 0` lets this grid item shrink below its content's
     intrinsic height so `overflow-y: auto` scrolls instead of pushing the
     footer out the bottom of the (90vh-capped) modal. */
  min-height: 0;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Search sits in the right half of the top row, vertically centred
   against the header. Top padding matches CreatePresetModal so it lines
   up with the heading. The "Show all template tags" checkbox sits to the
   left of the search box on the same row; `flex-shrink: 0` on it keeps the
   search input as the element that gives up width when space is tight. */
.index__Search--nCosa {
  grid-area: search;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
}

.index__Search--nCosa > :first-child {
  flex-shrink: 0;
}

.index__Search--nCosa > :last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Pasted-JSON import ------------------------------------------------- */
/*
 * The JSON import panel, above the row list rather than inside it: the
 * body scrolls, and a paste box that scrolled away from the Apply button
 * while the author was reading which rows changed was worse than a fixed
 * strip. Sits on the tinted background so the block reads as a tool
 * acting ON the list below rather than as another row in it.
 */
.index__Paste--IKkRe {
  grid-area: paste;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #DEE6ED;
  background: #EFF2F6;
}

.index__PasteLabel--gGreV {
  color: #5C81A3;
}

/* Inline code samples in the label (the JSON shape and the tag it fills). */
.index__PasteLabel--gGreV code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #3E586F;
  overflow-wrap: anywhere;
}

.index__PasteActions--_c4u8 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.index__PasteError--CXK36 {
  color: #FF794F;
}

.index__PasteSummary--tnJjq {
  color: #5C81A3;
}

/* Shown when no tags match the current filter/search. Mirrors the loading
   message's centred, muted treatment; stacks the message above an optional
   "Show all template tags" escape hatch. */
.index__Empty--F_UOl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: #5C81A3;
  text-align: center;
}

/* Shown while the inferred context is being fetched, so the rows don't
   flash type-default values that then snap to the inferred ones. Matches
   the RML-source modal's loading message (Viewer.css `.RmlSourceMessage`).
   Fills the fixed-height body and centres the spinner so the loading
   state reads as intentional rather than stranded at the top. */
.index__Loading--sXyTY {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: #5C81A3;
}

.index__Group--EWwhz {
  margin-bottom: 10px;
}

.index__GroupTitle--KHYUv {
  margin-bottom: 6px;
  color: #5C81A3;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.index__Row--RsyoZ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #EFF2F6;
}

.index__RowInfo--K_0Hl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.index__RowTitle--G_yn8 {
  color: #3E586F;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.index__RowPath--viAik {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #5C81A3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.index__RowType--dcArX {
  font-size: 10px;
  color: #9CB2C7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.index__RowControl--SaK6x {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 360px;
}

/* Let the app input/select fill the control column. */
.index__RowControl--SaK6x > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Native date / datetime-local input, styled to sit level with the app
   inputs in the other rows. */
.index__DateControl--b5oup {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #EFF2F6;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  background: white;
}

.index__ArrayControl--FpkBg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.index__ArrayError--PiYf5 {
  color: #FF794F;
  font-size: 10px;
}
@charset "UTF-8";
/*
 * "Component params" section pinned at the top of the fields panel when
 * authoring a component preset. Mirrors GlobalContextEditor's sticky bar
 * treatment so scrolled field content reads as passing underneath.
 */
.index__Panel--tnW6x {
  /*
   * Declares the background role so the row's InlineIconButton resolves
   * --dokio-hover-background from a token rather than its built-in
   * fallback. Same treatment as InputToolbar.
   */
  position: sticky;
  top: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 25px;
  border-bottom: 1px solid #DEE6ED;
  background: #FFFFFF;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
}

/*
 * The whole header is the collapse toggle. Reset the UA button chrome so
 * it keeps reading as the label row it replaced.
 */
.index__Header--uumES {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.index__HeaderArrow--iLoFN {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
}

.index__HeaderArrow--iLoFN svg {
  width: 10px;
  height: 10px;
}

/*
 * Sticky + unbounded height is what let a five-param list push the body
 * fields off-screen with no way to scroll to them. Cap the list at a
 * third of the viewport and let it scroll inside itself; the fields
 * below stay reachable however many params exist.
 */
.index__Body--N7xIc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 33vh;
  overflow-y: auto;
  /*
   * `overflow-y: auto` computes overflow-x to auto too, so an input's
   * focus ring would otherwise clip / trip a horizontal scrollbar. Give
   * it a couple of pixels of room and pull the box back out so rows stay
   * flush with the header.
   */
  padding: 2px;
  margin: -2px;
}

.index__Title--URbHf {
  color: #5C81A3;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.index__Hint--vLPWO {
  margin: 0;
  color: #5C81A3;
  font-size: 11px;
  white-space: nowrap;
}

.index__Empty--jzXCr {
  margin: 0;
  color: #5C81A3;
  font-size: 12px;
}

.index__Row--S6cCd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #DEE6ED;
  border-radius: 4px;
}

.index__RowTop--zpvLt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.index__RowTop--zpvLt > :first-child {
  flex: 1 1 auto;
}

/* The X icon button never squashes — the name field absorbs the slack. */
.index__RowTop--zpvLt > :last-child {
  flex: 0 0 auto;
}

.index__Slug--ul2Uw {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #5C81A3;
}

.index__DupWarning--MAEPc {
  color: #FF794F;
  font-family: inherit;
}

.index__Actions--EnFIK {
  display: flex;
}
.index__Field--a_IF0 {
  width: 20vw;
  display: flex;
}

.index__TitleContainer--iBqnp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9CB2C7;
}

.index__TitleContainer--iBqnp:hover {
  color: #EFF2F6;
}

.index__TitleContainer--iBqnp.index__Editing--vTdV8 {
  display: none;
}

.index__Title--lV6m0 {
  padding-top: 7px;
  padding-bottom: 7px;
  max-width: 20vw;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index__EditIcon--cEon3 {
  margin-left: 10px;
  width: 24px;
  height: 24px;
}

.index__EditIcon--cEon3 svg {
  fill: currentColor;
}
.index__RenderErrorBanner--YbhFr {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #FF794F;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.4;
}

.index__icon--oQrje {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

.index__body--LcETK {
  flex: 1 1 auto;
  min-width: 0;
}

.index__message--rlMFv {
  font-weight: bold;
}

.index__detail--QD5My {
  margin: 5px 0 0;
  padding: 5px;
  max-height: 120px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.index__dismiss--EaJ8f {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #FFFFFF;
}
.index__dismiss--EaJ8f svg {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}
.BeaconContainer {
  z-index: 9999999 !important;
}

.index__ModalLayout--y1FRj {
  display: grid;
  height: 80vh;
  max-height: 700px;
  background-color: #EFF2F6;
  grid-template-rows: max-content 1fr max-content;
  grid-template-areas: "header" "options" "buttons";
}
.index__ModalLayout--y1FRj > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Options--TQvTa {
  grid-area: options;
  overflow: auto;
}

.index__Option--UB4if {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #9CB2C7;
}

.index__Option--UB4if:first-of-type {
  border-top: 1px solid #9CB2C7;
}

.index__Option--UB4if:hover {
  background-color: #DEE6ED;
}

.index__Option--UB4if:hover:before,
.index__Option--UB4if:hover:after {
  background-color: #DEE6ED;
  position: absolute;
  top: 0;
  height: 100%;
  width: 8px;
  content: "";
}

.index__Option--UB4if:hover:before {
  left: -8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.index__Option--UB4if:hover:after {
  right: -8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.index__OptionIcon--l73pH path {
  fill: #9CB2C7;
}

.index__OptionTextContainer--VXma3 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 580px;
}

.index__OptionHeading--wj6h_ {
  color: #1C2731;
}

.index__OptionSubheading--xwWzY {
  color: #3E586F;
}

.index__OptionChevron--Pg5Gb {
  height: 24px;
  fill: #9CB2C7;
}

.index__OptionChevron--Pg5Gb > svg {
  height: 100%;
}

.index__Information--ESp99 {
  margin-top: 40px;
  color: #3E586F;
  padding-left: 76px;
  padding-right: 76px;
}

.index__Information--ESp99 a {
  color: #3E586F;
  text-decoration: underline !important;
}

.index__Buttons--nnnNz {
  grid-area: buttons;
  justify-self: left;
  padding-top: 40px;
  padding-bottom: 40px;
}

.index__Truncate--fcutK {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Notification__NotificationContainer--fNv1e {
  color: #3E586F;
  border-radius: 5px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content max-content;
  grid-template-areas: "Title Time Clear" "Description Description Description";
  column-gap: 10px;
}

.Notification__NotificationContainer--fNv1e.Notification__NoClear--pfAIV {
  grid-template-columns: 1fr max-content;
  grid-template-areas: "Title Time" "Description Description";
}

.Notification__NotificationContainer--fNv1e:hover {
  background-color: #EFF2F6;
}

.Notification__NotificationContainer--fNv1e a {
  color: #1B9DDE;
}

.Notification__Title--qEEFT {
  grid-area: Title;
  color: #1C2731;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Notification__Time--wpKwl {
  grid-area: Time;
  line-height: 20px;
  color: #9CB2C7;
  white-space: nowrap;
  text-align: right;
}

.Notification__Clear--c_0F0 {
  grid-area: Clear;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  min-width: 15px;
  max-width: 15px;
  max-height: 15px;
  border-radius: 50%;
  background-color: #1B9DDE;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 8px;
  line-height: 8px;
  margin-top: 3px;
}

.Notification__Description--Le5HL {
  grid-area: Description;
}
.NotificationsContainer__NotificationsContainer--FEOmI {
  display: flex;
  position: relative;
}

/* Same colour as the other sidebar icons (.Link svg in navigation_bar.scss).
   Scoped to the bell so the old UI's tick and error icons keep their own fill. */
.NotificationsContainer__NotificationsContainer__icon--vKRTP {
  fill: var(--nav-icon-color);
}

.NotificationsContainer__NotificationsContainer__button--mEFXL {
  position: relative;
  padding: 0;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  anchor-name: --notifications-container;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.NotificationsContainer__NotificationsDivider--xf7Ob {
  display: none;
}

.NotificationsContainer__NotificationsContainer__popover--UG0VB {
  width: 425px;
}

body[data-old-ui] .NotificationsContainer__NotificationsContainer__popover--UG0VB {
  --notifications-padding: 19px;
  --notifications-arrow-height: 14px;
  position: absolute;
  position-anchor: --notifications-container;
  position-area: bottom;
  z-index: 0;
  margin-top: var(--notifications-padding);
  padding: 14px;
  border-radius: 5px;
  background-color: #FFFFFF;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0px 2px 8px 0px rgba(28, 39, 49, 0.15);
}
body[data-old-ui] .NotificationsContainer__NotificationsContainer__popover--UG0VB:before {
  background: inherit;
  content: "";
  position: fixed;
  z-index: -1;
  width: var(--notifications-arrow-height);
  left: calc(anchor(--notifications-container center) - var(--notifications-arrow-height) / 2);
  top: calc(anchor(--notifications-container bottom) - var(--notifications-arrow-height) + 1px);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  margin: inherit;
  height: var(--notifications-arrow-height);
}
body[data-old-ui] .NotificationsContainer__NotificationsDivider--xf7Ob {
  display: block;
}

.NotificationsContainer__NotificationsContainer__section_divider--_L6nE {
  width: 100%;
  padding-top: 6px;
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid #9CB2C7;
}

.NotificationsContainer__NotificationsContainer__section_header--I6MtK {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.NotificationsContainer__NotificationsContainer__section_header_name--zwvce {
  color: #1C2731;
}

.NotificationsContainer__NotificationsContainer__section_header_clear--tb3E_ button {
  color: #1B9DDE;
  font-size: 12px;
  line-height: 12px;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

@keyframes NotificationsContainer__loader--mwblO {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.NotificationsContainer__NotificationsContainer__loader--Est_q,
.NotificationsContainer__NotificationsContainer__loader--Est_q:after {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.NotificationsContainer__NotificationsContainer__loader--Est_q {
  border-left: 3px solid #1B9DDE;
  transform: translateZ(0);
}

.NotificationsContainer__NotificationsContainer__loader--Est_q.NotificationsContainer__loading--BSzIT {
  border-top: 3px solid #BECDDA;
  border-right: 3px solid #BECDDA;
  border-bottom: 3px solid #BECDDA;
  animation: NotificationsContainer__loader--mwblO 1.1s infinite linear;
}

.NotificationsContainer__NotificationsContainer__loader--Est_q.NotificationsContainer__complete--HFBg7 {
  border-top: 3px solid #1B9DDE;
  border-right: 3px solid #1B9DDE;
  border-bottom: 3px solid #1B9DDE;
}

.NotificationsContainer__NotificationsContainer__loader--Est_q.NotificationsContainer__complete--HFBg7 svg {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
}

.NotificationsContainer__NotificationsContainer__loader_text--eW4n4 {
  position: absolute;
  /* Matches the approvals count (.NavCount in navigation_bar.scss). */
  top: 2px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--notifications-count-color);
  color: #FFFFFF;
  border-radius: 10px;
  /* A button doesn't inherit the page font. */
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty while loading; a bare dot would look like a count. */
.NotificationsContainer__NotificationsContainer__loader_text--eW4n4:empty {
  display: none;
}

body[data-old-ui] .NotificationsContainer__NotificationsContainer__loader_text--eW4n4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: unset;
  color: unset;
  font-family: inherit;
}

.NotificationsContainer__NotificationsDivider--xf7Ob {
  background-color: rgba(28, 39, 49, 0.7);
  width: 1px;
  height: 30px;
  margin-right: 20px;
  margin-left: 20px;
}
.Image__Image--sYJaJ {
  width: 100%;
  height: 100%;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
}
.Thumbnail__Thumbnail--wbm8H {
  margin-bottom: 30px;
  cursor: pointer;
  width: 120px;
}
.Thumbnail__Thumbnail--wbm8H:last-of-type {
  margin-bottom: 0;
}
.Thumbnail__Thumbnail--wbm8H .Thumbnail__ThumbContainer--hY1Jl {
  text-align: center;
}
.Thumbnail__Thumbnail--wbm8H .Thumbnail__ThumbContainer--hY1Jl .Thumbnail__Thumb--btIh0 {
  display: inline-block;
}
.Thumbnail__Thumbnail--wbm8H .Thumbnail__Caption--CcGTS {
  color: #3E586F;
  padding-top: 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-align: center;
}
.Thumbnail__Thumbnail--wbm8H.Thumbnail__Active--VS8lE .Thumbnail__Caption--CcGTS {
  color: #1C2731;
}
.Thumbnail__Thumbnail--wbm8H.Thumbnail__Active--VS8lE .Thumbnail__ThumbImage--H1VyF {
  outline: 2px solid #1C2731;
}
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

.ThumbnailsContainer__ThumbnailsContainer--Wdbm4 {
  box-sizing: border-box;
  position: absolute;
  height: calc(100% - 87px);
  background-color: #EFF2F6;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-left: 13px;
  padding-right: 12px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  width: 145px;
  -webkit-box-shadow: inset 5px 0px 10px -10px #1C2731;
  -moz-box-shadow: inset 5px 0px 10px -10px #1C2731;
  box-shadow: inset 5px 0px 10px -10px #1C2731;
}
.ThumbnailsContainer__ThumbnailsContainer--Wdbm4::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* Chrome/Safari/Webkit */
}
.index__Container--Ptjid {
  display: flex;
  justify-content: center;
}

.index__InnerContainer--T1vKK {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  width: 620px;
}

.index__NameContainer--VkzSF {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: #3E586F;
}

.index__NameContainer--VkzSF:hover .index__EditIcon--ZbaSe {
  opacity: 1;
}

.index__Name--vmGS1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 1;
  overflow: hidden;
  font-weight: bold;
}

.index__EditIcon--ZbaSe {
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  width: 20px;
  height: 20px;
}

.index__Details--d3pDu {
  color: #9CB2C7;
  padding-top: 5px;
}

.index__Menu--vVgjU {
  width: 24px;
}
.ImagesContainer__ImagesContainer--iSxrf {
  position: relative;
  overflow: auto;
  --multi-page-sidebar-width: 145px;
  --preview-transition: var(--preview-transition-time)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* https://matthewlein.com/tools/ceaser -- easeOutQuad */
  --preview-scale: 0.5;
  --preview-border-width: 2px;
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__HasVariations--_W5eJ .ImagesContainer__VariationContainer--_vFol {
  width: calc(var(--variation-width) + 40px + var(--preview-border-width));
  padding: 20px;
  border: 1px dashed #BECDDA;
  border-radius: 4px;
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__HasVariations--_W5eJ:not(.ImagesContainer__Single--yZGwP) .ImagesContainer__VariationContainer--_vFol {
  height: calc(var(--variation-height) + 40px + var(--preview-border-width));
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Animated--Yx_pO {
  --preview-transition-time: 0.3s;
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Single--yZGwP {
  --preview-scale: 1;
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Single--yZGwP:not(.ImagesContainer__HasVariations--_W5eJ) .ImagesContainer__ContentContainer--_CPTJ {
  height: calc(var(--content-height) + 80px);
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Single--yZGwP .ImagesContainer__ContentContainer--_CPTJ {
  height: calc(var(--content-height) + 120px);
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Single--yZGwP .ImagesContainer__ContentContainer--_CPTJ .ImagesContainer__VariationContainer--_vFol .ImagesContainer__PreviewContainer--WWhPQ {
  cursor: initial;
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Multipage--GXAhq {
  left: var(--multi-page-sidebar-width);
  width: calc(100% - var(--multi-page-sidebar-width));
}
.ImagesContainer__ImagesContainer--iSxrf.ImagesContainer__Single--yZGwP .ImagesContainer__VariationContainer--_vFol:not(.ImagesContainer__Selected--v2FGR) {
  opacity: 0;
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__ContentContainer--_CPTJ {
  position: relative;
  overflow: hidden;
  width: calc(var(--content-width) + 200px);
  min-width: 100%;
  height: calc(var(--content-height) + 120px);
  min-height: 100%;
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__VariationContainer--_vFol {
  position: absolute;
  transform: translate(var(--variation-x-offset), var(--variation-y-offset));
  transition: opacity var(--preview-transition), transform var(--preview-transition), width var(--preview-transition-time) cubic-bezier(0.215, 0.61, 0.355, 1); /* https://matthewlein.com/tools/ceaser -- easeOutCubic, matches the scaling more closely; */
  width: calc(var(--variation-width) + var(--preview-border-width));
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__VariationContainer--_vFol .ImagesContainer__PreviewContainer--WWhPQ {
  transition: transform var(--preview-transition);
  transform: scale(var(--preview-scale));
  transform-origin: 0 0;
  cursor: zoom-in;
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__VariationContainer--_vFol .ImagesContainer__PreviewContainer--WWhPQ .ImagesContainer__ImageContainer--jJLY3 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  box-shadow: 0px 2px 4px 0px rgba(35, 37, 39, 0.3);
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__VariationContainer--_vFol .ImagesContainer__PreviewContainer--WWhPQ .ImagesContainer__ImageContainer--jJLY3:last-of-type {
  margin-bottom: 0;
}
.ImagesContainer__ImagesContainer--iSxrf .ImagesContainer__VariationHeader--LeArj {
  margin-bottom: 20px;
}
.HighlightChangeBeacon__HighlightChangeBeacon--sW6_2 {
  opacity: 1;
  position: absolute;
  border-radius: 50%;
  background-color: #1B9DDE;
  left: -30px;
  height: 9px;
  top: 0;
  width: 9px;
  margin-top: 5px;
  z-index: 21;
  transition-property: opacity, top;
  transition-duration: 150ms;
  transition-timing-function: linear, ease-in-out;
}
.HighlightChangeBeacon__HighlightChangeBeacon--sW6_2:before {
  content: "";
  position: absolute;
  top: 4px;
  height: 1px;
  width: 25px;
  left: 4px;
  background-color: #1B9DDE;
}
.SubjectContainer__SubjectContainer--vAsTe {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #DEE6ED;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* Grid so the subject and preheader values line up under each other even
   though their labels are different widths. */
.SubjectContainer__SubjectInnerContainer--UXwuz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
  width: 620px;
  overflow: hidden;
}

.SubjectContainer__SubjectRow--e5vMw {
  display: contents;
}

.SubjectContainer__SubjectTitle--Mprht {
  color: #1C2731;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.SubjectContainer__SubjectHeading--dqT0U {
  color: #3E586F;
}
.IframeContainer__IframeContainer--D7515 {
  position: relative;
  height: calc(var(--iframe-height));
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #9CB2C7;
}
.IframeContainer__IframeContainer--D7515 iframe {
  border: 0;
  width: var(--preview-width);
  min-height: 36px;
}
.HtmlContainer__HtmlContainer--Yg_xl {
  position: relative;
  overflow: auto;
  --preview-real-width: calc(var(--preview-width) * var(--preview-scale));
  --preview-offset: calc(var(--preview-real-width) + 100px);
  --preview-scale: 0.5;
  --preview-border-width: 2px;
  --preview-transition: var(--preview-transition-time)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* https://matthewlein.com/tools/ceaser -- easeOutQuad */
}
.HtmlContainer__HtmlContainer--Yg_xl.HtmlContainer__HasVariations--H0qOh .HtmlContainer__VariationContainer--p1UFQ {
  width: calc(var(--preview-real-width) + 40px + var(--preview-border-width));
  padding: 20px;
  border: 1px dashed #BECDDA;
  border-radius: 4px;
}
.HtmlContainer__HtmlContainer--Yg_xl.HtmlContainer__Single--XdMow {
  overflow-x: hidden;
  --preview-scale: 1;
}
.HtmlContainer__HtmlContainer--Yg_xl.HtmlContainer__Single--XdMow .HtmlContainer__ClickShade--UtxDl {
  display: none;
}
.HtmlContainer__HtmlContainer--Yg_xl.HtmlContainer__Animated--2Y06G {
  --preview-transition-time: 0.3s;
}
.HtmlContainer__HtmlContainer--Yg_xl .HtmlContainer__VariationContainer--p1UFQ {
  position: absolute;
  width: calc(var(--preview-real-width) + var(--preview-border-width));
  height: calc((var(--preview-height) - var(--preview-header-height)) * var(--preview-scale) + var(--preview-header-height) + 40px);
  transition: opacity var(--preview-transition), transform var(--preview-transition);
  transform: translateX(calc(var(--preview-base) + var(--preview-offset) * (var(--preview-index) - var(--preview-selected-index, 0))));
}
.HtmlContainer__HtmlContainer--Yg_xl.HtmlContainer__Single--XdMow .HtmlContainer__HtmlWrapper--BuAaa:not(.HtmlContainer__Selected--VYjDN) {
  opacity: 0;
}
.HtmlContainer__HtmlContainer--Yg_xl .HtmlContainer__ContentContainer--QNCdZ {
  position: relative;
  width: var(--content-width);
  height: calc(var(--content-height) + 120px);
  padding-top: 40px;
}
.HtmlContainer__HtmlContainer--Yg_xl .HtmlContainer__PreviewContainer--MUBdx {
  position: relative;
  width: calc(var(--preview-width) + var(--preview-border-width));
  transition: transform var(--preview-transition);
  transform-origin: 0 0;
  transform: scale(var(--preview-scale));
}
.HtmlContainer__HtmlContainer--Yg_xl .HtmlContainer__PreviewContainer--MUBdx .HtmlContainer__ClickShade--UtxDl {
  position: absolute;
  cursor: zoom-in;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.HtmlContainer__HtmlContainer--Yg_xl .HtmlContainer__VariationHeader--Kqd5n {
  margin-bottom: 20px;
}
.WebHtmlContainer__HtmlContainer--Mmjuh {
  position: relative;
  overflow: auto;
  --preview-real-width: calc(var(--preview-width) * var(--preview-scale));
  --preview-offset: calc(var(--preview-real-width) + 100px);
  --preview-scale: 0.5;
  --preview-border-width: 2px;
  --preview-transition: var(--preview-transition-time)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* https://matthewlein.com/tools/ceaser -- easeOutQuad */
}
.WebHtmlContainer__HtmlContainer--Mmjuh.WebHtmlContainer__HasVariations--sD5wh .WebHtmlContainer__VariationContainer--Ved38 {
  width: calc(var(--preview-real-width) + 40px + var(--preview-border-width));
  padding: 20px;
  border: 1px dashed #BECDDA;
  border-radius: 4px;
}
.WebHtmlContainer__HtmlContainer--Mmjuh.WebHtmlContainer__Single--YkgI7 {
  overflow-x: auto;
  --preview-scale: 1;
}
.WebHtmlContainer__HtmlContainer--Mmjuh.WebHtmlContainer__Single--YkgI7 .WebHtmlContainer__ClickShade--BM3Gg {
  display: none;
}
.WebHtmlContainer__HtmlContainer--Mmjuh.WebHtmlContainer__Animated--J0fDY {
  --preview-transition-time: 0.3s;
}
.WebHtmlContainer__HtmlContainer--Mmjuh .WebHtmlContainer__VariationContainer--Ved38 {
  position: absolute;
  width: calc(var(--preview-real-width) + var(--preview-border-width));
  height: calc((var(--preview-height) - var(--preview-header-height)) * var(--preview-scale) + var(--preview-header-height) + 40px);
  transition: opacity var(--preview-transition), transform var(--preview-transition);
  transform: translateX(calc(var(--preview-base) + var(--preview-offset) * (var(--preview-index) - var(--preview-selected-index, 0))));
}
.WebHtmlContainer__HtmlContainer--Mmjuh.WebHtmlContainer__Single--YkgI7 .WebHtmlContainer__HtmlWrapper--aV4Iy:not(.WebHtmlContainer__Selected--VKlao) {
  opacity: 0;
}
.WebHtmlContainer__HtmlContainer--Mmjuh .WebHtmlContainer__ContentContainer--XENBk {
  position: relative;
  width: var(--content-width);
  height: calc(var(--content-height) + 120px);
  padding-top: 40px;
}
.WebHtmlContainer__HtmlContainer--Mmjuh .WebHtmlContainer__PreviewContainer--S1z1c {
  position: relative;
  width: calc(var(--preview-width) + var(--preview-border-width));
  transition: transform var(--preview-transition);
  transform-origin: 0 0;
  transform: scale(var(--preview-scale));
}
.WebHtmlContainer__HtmlContainer--Mmjuh .WebHtmlContainer__PreviewContainer--S1z1c .WebHtmlContainer__ClickShade--BM3Gg {
  position: absolute;
  cursor: zoom-in;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.WebHtmlContainer__HtmlContainer--Mmjuh .WebHtmlContainer__VariationHeader--dAadV {
  margin-bottom: 20px;
}
.IframeContainer__IframeContainer--Y0txn {
  position: relative;
  width: calc(var(--iframe-width));
  height: calc(var(--iframe-height));
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #9CB2C7;
}
.IframeContainer__IframeContainer--Y0txn iframe {
  border: 0;
  width: calc(var(--iframe-width));
  height: calc(var(--iframe-height));
  display: block;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX {
  position: relative;
  overflow: auto;
  --multi-page-sidebar-width: 145px;
  --preview-transition: var(--preview-transition-time)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* https://matthewlein.com/tools/ceaser -- easeOutQuad */
  --preview-scale: 0.5;
  --preview-border-width: 2px;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__HasVariations--Lq24F .DynamicHtmlContainer__VariationContainer--IPxYf {
  width: calc(var(--variation-width) + 40px + var(--preview-border-width));
  padding: 20px;
  border: 1px dashed #BECDDA;
  border-radius: 4px;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__HasVariations--Lq24F:not(.DynamicHtmlContainer__Single--BDd78) .DynamicHtmlContainer__VariationContainer--IPxYf {
  height: calc(var(--variation-height) + 40px + var(--preview-border-width));
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Animated--HClgk {
  --preview-transition-time: 0.3s;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78 {
  --preview-scale: 1;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78:not(.DynamicHtmlContainer__HasVariations--Lq24F) .DynamicHtmlContainer__ContentContainer--Lhr1T {
  height: calc(var(--content-height) + 80px);
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78 .DynamicHtmlContainer__ContentContainer--Lhr1T {
  height: calc(var(--content-height) + 120px);
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78 .DynamicHtmlContainer__ContentContainer--Lhr1T .DynamicHtmlContainer__VariationContainer--IPxYf .DynamicHtmlContainer__PreviewContainer--YuS45 {
  cursor: initial;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78 .DynamicHtmlContainer__ContentContainer--Lhr1T .DynamicHtmlContainer__VariationContainer--IPxYf .DynamicHtmlContainer__PreviewContainer--YuS45 .DynamicHtmlContainer__ClickShade--QS9ji {
  display: none;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Multipage--c2B1Q {
  left: var(--multi-page-sidebar-width);
  width: calc(100% - var(--multi-page-sidebar-width));
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX.DynamicHtmlContainer__Single--BDd78 .DynamicHtmlContainer__VariationContainer--IPxYf:not(.DynamicHtmlContainer__Selected--fxzCn) {
  opacity: 0;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX .DynamicHtmlContainer__ContentContainer--Lhr1T {
  position: relative;
  overflow: hidden;
  width: calc(var(--content-width) + 200px);
  min-width: 100%;
  height: calc(var(--content-height) + 120px);
  min-height: 100%;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX .DynamicHtmlContainer__VariationContainer--IPxYf {
  position: absolute;
  transform: translate(var(--variation-x-offset), var(--variation-y-offset));
  transition: opacity var(--preview-transition), transform var(--preview-transition), width var(--preview-transition-time) cubic-bezier(0.215, 0.61, 0.355, 1); /* https://matthewlein.com/tools/ceaser -- easeOutCubic, matches the scaling more closely; */
  width: calc(var(--variation-width) + var(--preview-border-width));
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX .DynamicHtmlContainer__VariationContainer--IPxYf .DynamicHtmlContainer__PreviewContainer--YuS45 {
  transition: transform var(--preview-transition);
  transform: scale(var(--preview-scale));
  transform-origin: 0 0;
  cursor: zoom-in;
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX .DynamicHtmlContainer__VariationContainer--IPxYf .DynamicHtmlContainer__PreviewContainer--YuS45 .DynamicHtmlContainer__ClickShade--QS9ji {
  position: absolute;
  cursor: zoom-in;
  top: 0;
  left: 0;
  width: calc(var(--iframe-width));
  height: calc(var(--iframe-height));
}
.DynamicHtmlContainer__DynamicHtmlContainer--u2uSX .DynamicHtmlContainer__VariationHeader--cj0e3 {
  margin-bottom: 20px;
}
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

.ZoomDropdown__ZoomDisplayText--xvyFt {
  min-width: 50px;
  max-width: 150px;
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding: 5px;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
}
.ZoomDropdown__ZoomDisplayText--xvyFt:hover {
  background-color: rgba(156, 178, 199, 0.6);
}
.ZoomControl__ZoomControl--kvbab {
  display: flex;
}
.PageControl__PageControl--bHASd {
  position: absolute;
  left: 20px;
}

.PageControl__PageCounter--ql6ho {
  color: #3E586F;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.ZoomSlider__ZoomSlider--xlO5c {
  width: 150px;
  padding-top: 20px;
}

.ZoomSlider__ZoomSliderText--Z94v2 {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: #5C81A3;
  margin-top: 2px;
}
.index__VideoSlider--LZI8S {
  width: 300px;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Duration--yPv5e {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__VideoControls--dTSta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.index__PlayButton--cY0zm {
  color: #1B9DDE;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  border: 0;
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  margin-right: 20px;
  margin-top: -3px;
}

.index__PauseButton--DSva3 {
  color: #1B9DDE;
  font-size: 22px;
  line-height: 27px;
  letter-spacing: -0.02em;
  font-weight: 400;
  border: 0;
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  margin-right: 20px;
}

.index__Disabled--BtOrh {
  color: #9CB2C7;
}

.index__TimeContainer--gdLv0 {
  width: 80px;
  margin-left: 20px;
}
.index__Preview--XINZb {
  position: relative;
  width: 100%;
  height: 100%;
}

.index__Iframe--AW0yb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@charset "UTF-8";
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.Viewer__Viewer--bHK4j {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 87px;
}

.Viewer__ControlsContainer--Rbqrd {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-top: solid 1px #9CB2C7;
  /* Only the video viewer opts into this. PageControl is absolutely
     positioned inside this same container for the paged/pdf viewers, so
     establishing a containing block unconditionally would re-base it. */
}
.Viewer__ControlsContainer--Rbqrd.Viewer__WithThumbs--x_UgC {
  padding-left: 145px;
}
.Viewer__ControlsContainer--Rbqrd.Viewer__WithViewModeTabs--AXjus {
  position: relative;
}

/* Pulled out of the flex flow so the playback/zoom controls stay centred in
   the viewer regardless of how wide the tabs are. */
.Viewer__ControlsContainer--Rbqrd .Viewer__ViewModeTabs--ztst2 {
  position: absolute;
  left: 40px;
}

/* Backdrop for the rendered plate. The plate is a transparent overlay meant to
   sit on footage, so its text is frequently pure white — against the viewer's
   usual white it is invisible. The palette only offers near-white or
   near-black, so this uses a mid-tone chequerboard: it keeps both light and
   dark plate content legible and shows which regions are actually transparent.
   Scrolls rather than scales, since the plate renders at full template size. */
.Viewer__PlateFrame--eWvew {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: #8d949c;
  background-image: linear-gradient(45deg, #7c848d 25%, transparent 25%), linear-gradient(-45deg, #7c848d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #7c848d 75%), linear-gradient(-45deg, transparent 75%, #7c848d 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.Viewer__PlateFrame--eWvew iframe {
  border: 0;
  display: block;
}

.Viewer__ControlsContainer--Rbqrd .Viewer__ViewSource--yw2lo label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #5C81A3;
  margin-left: 20px; /* Studio doesn't run a version of Chromium that understands "gap" */
}
.Viewer__ControlsContainer--Rbqrd .Viewer__ViewSource--yw2lo label input {
  vertical-align: bottom;
}

.Viewer__PreviewGrid--sOFct {
  height: 100%;
  padding: 10px 40px;
  overflow-x: auto;
}

/* PDF preview surface — overlays the PDF.js iframe with our own controls
 * (e.g. the "RML source" toggle) anchored relative to the viewer. pdf.js
 * renders its own toolbar/zoom bar inside the iframe, so the viewer fills
 * the full height rather than reserving the app's control row. */
.Viewer__PdfPreviewWrapper--Uwk8K {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Floating action button that hosts the RML source toggle, anchored to
 * the bottom-right of the PDF preview. The PDF.js toolbar lives at the
 * top of the iframe, so bottom-right is the calmest spot to put our
 * own affordance without colliding with it.
 *
 * Styled as a circular FAB-like control: small, opaque, drop-shadowed
 * so it reads against either the PDF page or the silver gutter. */
.Viewer__SourceToggle--OipKE {
  position: absolute;
  /* Lands inside PDF.js's bottom toolbar (which is 86px tall in our
   * customised viewer.html — see public/pdfviewer/web/viewer.css's
   * `--toolbar-container-height`). The 40px FAB sits vertically
   * centred in that strip (`(86-40)/2 = 23px`) and pinned to the
   * right edge with a conventional gutter. */
  bottom: 23px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #FFFFFF;
  border: 1px solid #9CB2C7;
  box-shadow: 1px 2px 4px 1px rgba(28, 39, 49, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease;
}

.Viewer__SourceToggle--OipKE:hover {
  background-color: #EFF2F6;
}

.Viewer__SourceToggleActive--zRcU2,
.Viewer__SourceToggleActive--zRcU2:hover {
  background-color: #1B9DDE;
  border-color: #1B9DDE;
}

.Viewer__SourceToggleActive--zRcU2 svg {
  fill: #FFFFFF;
}

/* Flex layout for the RML source modal: pinned header above a
 * scrollable code area. ModalHeader's own CSS only ships vertical
 * padding, so we wrap it in `.RmlSourceHeader` to add the horizontal
 * inset the rest of the modal body uses. */
.Viewer__RmlSourceModalLayout--kfVUV {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.Viewer__RmlSourceHeader--wQ19P {
  flex-shrink: 0;
  padding: 0 40px;
}

/* Outer body wrapper between header and code. Owns the gap around the
 * code box and the visual divider below the header. */
.Viewer__RmlSourceBody--ad7VN {
  flex: 1;
  min-height: 0;
  padding: 20px 40px;
  border-top: solid 1px #9CB2C7;
  display: flex;
  flex-direction: column;
}

/* Bordered card around the code. This element is the actual scroll
 * surface (not the outer body) so its border + rounded corners stay
 * pinned to the visible edges while only the inner <pre> scrolls —
 * keeps the top edge of the code area visible at all scroll positions
 * instead of letting it slide out under the modal chrome. */
.Viewer__RmlSourceCodeBox--orGR7 {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-color: #FFFFFF;
  border: 1px solid #9CB2C7;
  /* Square the top so the box sits flush under the tab strip; rounded
   * top corners leave a visual gap between the active-tab indicator
   * and the code area. Keep the bottom rounded for the modal-body
   * card treatment. */
  border-radius: 0 0 4px 4px;
}

.Viewer__RmlSourceMessage--q8QNL {
  color: #5C81A3;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header row holding the tab bar and, pushed to the far end, the
 * export/preview assembly switch. Sits flush with the header bottom so
 * it visually replaces the old single-pane divider. */
.Viewer__RmlSourceControls--iMABW {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 5px;
}

/* Tab bar switching between the RML pane, the placeholder-context JSON
 * pane, and the extra-assets table. */
.Viewer__RmlSourceTabs--gJ_Vn {
  display: flex;
  gap: 5px;
}

.Viewer__RmlSourceTab--xEr9N {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 5px 10px;
  color: #5C81A3;
  cursor: pointer;
  font-weight: 500;
}
.Viewer__RmlSourceTab--xEr9N:hover:not(:disabled) {
  color: #1C2731;
}
.Viewer__RmlSourceTab--xEr9N:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.Viewer__RmlSourceTabActive--A_7kn,
.Viewer__RmlSourceTabActive--A_7kn:hover {
  color: #1B9DDE;
  border-bottom-color: #1B9DDE;
}

/* Export/Preview switch for the assembly every tab renders. Pushed to
 * the far end of the header row and styled as a pill group rather than
 * more underlined tabs, so it reads as scoping the panes instead of
 * being a fourth one. */
.Viewer__RmlSourceModes--AkDec {
  display: flex;
  margin-left: auto;
  margin-bottom: 5px;
  gap: 1px;
  padding: 1px;
  border-radius: 4px;
  background-color: #EFF2F6;
}

.Viewer__RmlSourceMode--h310a {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  color: #5C81A3;
  cursor: pointer;
  font-weight: 500;
}
.Viewer__RmlSourceMode--h310a:hover {
  color: #1C2731;
}

.Viewer__RmlSourceModeActive--Q7_SX,
.Viewer__RmlSourceModeActive--Q7_SX:hover {
  background-color: #FFFFFF;
  color: #1C2731;
}

/* Extra-assets pane: a simple two-column table inside the same
 * bordered surface treatment as the code pane. We use a scrollable
 * div rather than slotting the table into the .RmlSourceCodeBox so
 * the table can size to its content without the syntax-highlighter's
 * <pre> margins fighting us. */
.Viewer__RmlSourceAssetsList--wex3r {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-color: #FFFFFF;
  border: 1px solid #9CB2C7;
  /* See .RmlSourceCodeBox — square top to meet the tab strip flush. */
  border-radius: 0 0 4px 4px;
  padding: 10px;
}

.Viewer__RmlSourceAssetsTable--VqIf2 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.Viewer__RmlSourceAssetsTable--VqIf2 th,
.Viewer__RmlSourceAssetsTable--VqIf2 td {
  text-align: left;
  padding: 5px 10px;
  border-bottom: 1px solid #9CB2C7;
  vertical-align: top;
}
.Viewer__RmlSourceAssetsTable--VqIf2 th {
  color: #5C81A3;
  font-weight: 600;
  position: sticky;
  top: 0;
  background-color: #FFFFFF;
}
.Viewer__RmlSourceAssetsTable--VqIf2 code {
  font-family: monospace;
  word-break: break-all;
}
.index__VariationName--ra_5p {
  display: none;
}

.index__Variation--ATQ70 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index__Toolbar--bmnxp {
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.index__BulkActions--S01AW {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 1;
}
:root {
  --filter-border-color: #9CB2C7;
}

.Filter__filterContainer--wgmem {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  display: flex;
  border: 1px solid var(--filter-border-color);
  border-radius: 4px;
  width: 100%;
  margin-bottom: 10px;
}

.Filter__filterRow--YvJ6M {
  display: flex;
  gap: 15px;
  align-items: center;
}

.Filter__filterInputs--tlClL {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: calc(100% - 51px);
}

.Filter__filterField--NRwMZ {
  width: calc(30% - 10px);
  min-width: calc(30% - 10px);
  max-width: calc(30% - 10px);
}

.Filter__filterOperator--bwAVx {
  width: calc(30% - 10px);
  min-width: calc(30% - 10px);
  max-width: calc(30% - 10px);
}

.Filter__filterValue--yMujE {
  width: 40%;
  max-width: 40%;
  min-width: 40%;
}

.Filter__filterTitle--MhL1M {
  color: #3E586F;
  font-weight: bold;
}

.Filter__removeButton--dhY3V {
  position: absolute;
  right: -25px;
  padding: 0;
  color: #3E586F;
}

.Filter__removeButton--dhY3V:hover {
  opacity: 0.8;
}

.Filter__newFilterButton--cBVsV {
  float: right;
  color: #3E586F;
  cursor: pointer;
}

.Filter__newFilterButton--cBVsV:hover {
  opacity: 0.8;
}
.MultiSelect__Theme-Light--j5Zm5 {
  color: #3E586F;
  --select-background: #FFFFFF;
  --select-background-focused: #EFF2F6;
  --select-background-selected: #D1ECFA;
}
.MultiSelect__Theme-Light--j5Zm5[aria-disabled=true], .MultiSelect__Theme-Light--j5Zm5[aria-readonly=true] {
  --select-background: #EFF2F6;
}

.MultiSelect__Theme-Dark--GP3pG {
  color: #FFFFFF;
  --select-background-focused: #106793;
  --select-background-selected: #9FD8F4;
  --select-color-selected: #3E586F;
}

.MultiSelect__Select--bEePT {
  position: relative;
  --select-cursor: pointer;
}
.MultiSelect__Select--bEePT[aria-readonly=true] {
  --select-cursor: default;
}
.MultiSelect__Select--bEePT[aria-disabled=true] {
  --select-cursor: not-allowed;
}

.MultiSelect__Select--is-open--DkmM3.MultiSelect__bottom-start--xjnWJ .MultiSelect__SelectInputDisplay--XJd2n, .MultiSelect__Select--is-open--DkmM3.MultiSelect__bottom-end--KjW7Z .MultiSelect__SelectInputDisplay--XJd2n {
  border-radius: 4px 4px 0 0;
}
.MultiSelect__Select--is-open--DkmM3.MultiSelect__top-start--PutCm .MultiSelect__SelectInputDisplay--XJd2n {
  border-radius: 0 0 4px 4px;
}

.MultiSelect__SelectOption--is-focused--qe9gT {
  background-color: var(--select-background-focused);
}

/* the pointer highlights here rather than through the active index, which the
   list scrolls to -- see focusItemOnHover in MultiSelect.tsx */
.MultiSelect__SelectOption--xFuje:hover {
  background-color: var(--select-background-focused);
}

.MultiSelect__SelectInputContainer--ib4FA {
  position: relative;
}

.MultiSelect__SelectInputDisplay--XJd2n {
  border: 1px solid #9CB2C7;
  background-clip: padding-box;
  background-color: var(--select-background);
  width: 100%;
  display: inline-block;
  border-radius: 4px;
  padding: 11px 15px;
  padding-right: 55px;
  cursor: var(--select-cursor);
}

.MultiSelect__SelectInputDisplay--is-disabled--Av9vH {
  color: #9CB2C7;
}

.MultiSelect__SelectInputArrowContainer--iTPhx {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  cursor: var(--select-cursor);
}

.MultiSelect__SelectDropdown--vXoll {
  background-color: var(--select-background);
  background-clip: padding-box;
  border-style: solid;
  border-color: #9CB2C7;
  right: 0;
  left: 0;
  z-index: 10000;
}
.MultiSelect__SelectDropdown--vXoll.MultiSelect__top-start--PutCm {
  border-width: 1px 1px 0 1px;
  border-radius: 4px 4px 0 0;
}
.MultiSelect__SelectDropdown--vXoll.MultiSelect__bottom-start--xjnWJ, .MultiSelect__SelectDropdown--vXoll.MultiSelect__bottom-end--KjW7Z {
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 4px 4px;
}
.MultiSelect__SelectDropdown--vXoll ul {
  overflow: auto;
  height: min-content;
  max-height: 30vh;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.MultiSelect__SelectOption--xFuje {
  border-bottom: 1px solid #9CB2C7;
  cursor: pointer;
  padding: 12px 15px;
}

.MultiSelect__SelectOption--xFuje:last-of-type {
  border-bottom: none;
}

.MultiSelect__SelectOptionDisplay--l4pon {
  color: #3E586F;
  cursor: pointer;
  padding: 12px 15px;
  text-align: center;
}

.MultiSelect__InputPlaceholder--Xzqa3 {
  color: #5C81A3;
}

.MultiSelect__SelectOptionForText--fRODL {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.MultiSelect__SelectOptionMore--oZ0qp {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Multi-select Styles --- */
.MultiSelect__SelectInputDisplayMultiple--CVWKH {
  padding: 6px 10px;
  padding-right: 55px;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.MultiSelect__SelectOption--xFuje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #9CB2C7;
  cursor: pointer;
  padding: 12px 15px;
}

.MultiSelect__SelectOption--xFuje:last-of-type {
  border-bottom: none;
}

.MultiSelect__SelectOptionCheckbox--vt8UR {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9CB2C7;
  border-radius: 3px;
  flex-shrink: 0;
}
.MultiSelect__SelectOptionCheckbox--vt8UR path {
  fill: #FFFFFF;
}

.MultiSelect__SelectOption--is-selected--RjrDc .MultiSelect__SelectOptionCheckbox--vt8UR {
  background-color: #3E586F;
  border-color: #3E586F;
  color: #FFFFFF;
}

.MultiSelect__SelectMultiDisplayLabel--RBSDo {
  display: flex;
  max-width: 100%;
  width: 100%;
}

/* in the closed control the label and its ", +n more" read as one phrase, so
   the name takes only the room it needs -- unlike a dropdown row, where it
   stretches to push the checkbox to the far edge */
.MultiSelect__SelectMultiDisplayLabel--RBSDo .MultiSelect__SelectOptionForText--fRODL {
  flex: 0 1 auto;
}

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

/* --- Compact Styles --- */
/*
 * The default field scale is a good deal taller than the search field an admin
 * list's filter bar sits it next to. Compact matches that field: 15px/20px type
 * in a 36px box. The doubled class beats the BodyLarge `.Select` composes.
 */
.MultiSelect__Select--is-compact--u7WWV.MultiSelect__Select--bEePT {
  font-size: 15px;
  line-height: 20px;
}

.MultiSelect__Select--is-compact--u7WWV .MultiSelect__SelectInputDisplayMultiple--CVWKH {
  padding: 7px 12px;
  padding-right: 40px;
  min-height: 36px;
  gap: 4px;
}

.MultiSelect__Select--is-compact--u7WWV .MultiSelect__SelectInputArrowContainer--iTPhx {
  right: 12px;
}

.MultiSelect__Select--is-compact--u7WWV .MultiSelect__SelectDropdown--vXoll {
  font-size: 15px;
  line-height: 20px;
}

.MultiSelect__Select--is-compact--u7WWV .MultiSelect__SelectOption--xFuje,
.MultiSelect__Select--is-compact--u7WWV .MultiSelect__SelectOptionDisplay--l4pon {
  padding: 7px 12px;
}

/* sits hard against the checkbox rather than centred by the row's space-between */
.MultiSelect__MultiSelectClearAll--eehD1 {
  margin-left: auto;
}
.index__ContactFilterablePicker--rbDiM {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
:root {
  --color-charcoal: #1C2731;
  --color-navy: #2D3F50;
  --color-slate: #3E586F;
  --color-grey: #9CB2C7;
  --color-silver: #EFF2F6;
  --color-white: #FFFFFF;
  --color-sky_blue: #1B9DDE;
  --color-sky_blue_high: #9FD8F4;
  --color-steel_grey: #5C81A3;
  --color-misty_grey: #BECDDA;
  --color-cool_grey: #DEE6ED;
  --color-green: #50D38B;
  --color-yellow: #FFC040;
  --color-red: #FF794F;
  --color-pale_blue: #D1ECFA;
  --color-winter_grey: #7C9AB6;
  --color-mountain_grey: #496783;
  --color-sky_blue_low: #168ECA;
  --color-sky_blue_xlow: #106793;
  --color-charcoal_04: rgba(from var(--color-charcoal), 0.04);
  --color-charcoal_25: rgba(var(--color-charcoal), 0.25);
  --color-hover_20: #253341;
  --color-hover_30: #374D62;
  --color-hover_45: #537493;
  --color-hover_55: #6C8EAC;
  --color-hover_65: #8DA7BF;
  --color-hover_75: #ADC0D1;
  --color-hover_85: #CED9E3;
  --color-green_high: #78DDAA;
  --color-green_low: #30C071;
  --color-yellow_high: #FFD275;
  --color-yellow_x_high: #FFE6B3;
  --color-yellow_low: #FFB00F;
  --color-red_high: #FF9E80;
  --color-red_x_high: #FFC5B3;
  --color-red_low: #FF501A;
  --color-white_30: rgba(var(--color-white), 0.3);
}

:root {
  --spacing-double_large: 80px;
  --spacing-larger: 60px;
  --spacing-large: 40px;
  --spacing-medium_large: 25px;
  --spacing-medium: 20px;
  --spacing-medium_small: 15px;
  --spacing-normal: 10px;
  --spacing-small: 5px;
  --spacing-fine: 1px;
  --spacing-none: 0;
}

:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Text--I8dBO {
  color: #3E586F;
  margin-bottom: var(--spacing-medium);
  max-width: 502px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.index__Text--I8dBO[_extended] {
  max-width: 675px;
}
.index__Text--I8dBO[_full] {
  max-width: 100%;
}
.index__Text--I8dBO[_align=center] {
  text-align: center;
}
.index__Text--I8dBO a {
  color: #1B9DDE;
}
.index__Text--I8dBO a:hover {
  text-decoration: underline !important;
}
.index__Text--I8dBO strong {
  font-weight: 600;
}
.index__Text--I8dBO p,
.index__Text--I8dBO ul,
.index__Text--I8dBO ol {
  margin-bottom: var(--spacing-normal);
}
.index__Text--I8dBO ul {
  list-style-position: outside;
  list-style-type: disc;
}
.index__Text--I8dBO ol {
  list-style-position: outside;
  list-style-type: decimal;
}
.index__Text--I8dBO dl[_stacked] dt {
  width: auto;
  float: none;
}
.index__Text--I8dBO dl[_stacked] dd {
  margin-left: 0;
}
.index__Text--I8dBO dl dt {
  color: #3E586F;
  margin-bottom: var(--spacing-small);
  float: left;
  width: 140px;
}
.index__Text--I8dBO dl dd {
  margin-bottom: var(--spacing-small);
  margin-left: 150px;
}
.index__Text--I8dBO .index___list--ZqzTT {
  display: block;
  margin-bottom: var(--spacing-medium);
}
.index__Text--I8dBO .index___list--ZqzTT span {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  padding-right: 10px;
}

.index__stage--Vo5RY {
  margin-bottom: 30px;
}

.index__title--DlILT {
  color: #3E586F;
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.index__approverCount--Rckj5,
.index__remove--kDs4K {
  position: relative;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  color: #3E586F;
  margin-bottom: 10px;
  display: inline-block;
}

.index__actions--s5I2l {
  display: grid;
  flex-wrap: wrap;
  width: 460px;
  grid-template-rows: 1fr 1fr;
  margin-top: 30px;
}

.index__actions--s5I2l button {
  text-align: right;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #FFFFFF;
  cursor: pointer;
  outline: none;
  border: none;
  display: block;
  background: #7C9AB6;
  width: 150px;
  height: 36px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  justify-content: center;
}

.index__removeContainer--nLZsw {
  display: inline-block;
  margin-left: 5px;
}

.index__remove--kDs4K {
  margin-left: 5px;
  text-decoration: underline;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}
.index__Layout--zq4C0 {
}

.index__InfoBar--hanEV {
}

.index__Preview--aSoft {
}
.index__TemplatePreviewList--hdzr6 {
  display: grid;
  /* Tracks stretch past their 220px minimum so a full row of tiles fills the
     content column instead of leaving slack on the right. auto-fill (not
     auto-fit) keeps empty tracks, so a partial row of items stays at the
     normal tile width instead of stretching to fill the row. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.index__Truncate--SpOuV {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index__GridList--xhJtA {
  display: grid;
  /* Tracks stretch past their 220px minimum so a full row of tiles fills the
     content column instead of leaving slack on the right. auto-fill (not
     auto-fit) keeps empty tracks, so a partial row of items stays at the
     normal tile width instead of stretching to fill the row. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.index__Truncate--PjbC4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index__ModalLayout--Yf1D7 {
  display: grid;
  height: 100%;
  width: 100%;
  background-color: #EFF2F6;
  grid-template-rows: max-content max-content 1fr max-content;
  grid-template-areas: "header  search" "filters filters" "results results" "ModalFooter ModalFooter";
}
.index__ModalLayout--Yf1D7 > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Search--Tr1wr {
  grid-area: search;
  padding-top: 40px;
}

.index__Filters--k_niS {
  grid-area: filters;
  margin-bottom: 20px;
}

.index__SubFilters--FBnba {
  margin-top: 20px;
}

.index__Results--xGIqJ {
  grid-area: results;
  border-top: 1px solid #BECDDA;
  border-bottom: 1px solid #BECDDA;
  overflow: auto;
}

.index__NoResults--e3El7 {
  color: #3E586F;
  margin-top: 40px;
}

.index__TemplateTiles--CEdUw {
  margin-top: 40px;
  margin-bottom: 40px;
  display: grid;
  gap: var(--spacing-medium, 20px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  justify-content: space-between;
}

.index__CreateMessage--S6Wfs {
  color: #3E586F;
}

.index__Truncate--t9OfM {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__AccordionContainer--ED7xc {
  border-top: 1px solid #9CB2C7;
  border-bottom: 1px solid #9CB2C7;
}

.index__AccordionItem--d_WJy + .index__AccordionItem--d_WJy {
  border-top: 1px solid #9CB2C7;
}

.index__AccordionItemButton--YdOD6 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #3E586F;
  cursor: pointer;
  padding: 10px;
}

.index__AccordionItemContent--M13jI {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.index__AccordionItemPanel--n6F17 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  padding-left: 10px;
  padding-right: 10px;
}

.index__AccordionItemState--Ud_f5 {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-left: 22px;
}

.index__AccordionItemArrow--MnCAV {
  transition: transform 0.3s;
  fill: #3E586F;
  overflow: visible;
}

.index__AccordionItemButton--YdOD6[aria-expanded=true] .index__AccordionItemArrow--MnCAV {
  transform: rotate(-180deg);
}

[hidden] {
  display: none;
}
.index__CheckboxSelectorPanel--ekOpr {
  padding: 10px;
  padding-top: 0;
}

.index__CheckboxSelectorInputContainer--_3wof {
  margin-top: 10px;
  font-size: 10px;
  line-height: 10px;
}

.index__CheckboxSelectorInputContainer--_3wof:first-of-type {
  margin-top: 0;
}
.index__Layout--j2xiL {
}

.index__InfoBar--LL4Jx {
}

.index__Preview--CClxO {
}

.index__Title--pDLbJ {
  background-color: #DEE6ED;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .index__Title--pDLbJ {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.index__Iframe--JV3kK {
  width: 100%;
  height: calc(100vh - 180px) !important;
  background-color: #FFFFFF;
}
.index__Label--4tfaC {
  color: #3E586F;
}

.index__Instructions--QNI0R {
  color: #3E586F;
}
.index__AddField--_B8n0 {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 5px;
  justify-content: flex-end;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #1B9DDE;
  cursor: pointer;
}

.index__StencilField--QmJnC {
  position: relative;
  padding: 10px 10px 10px 40px;
}

.index__NameTooltip--yLkCo {
  position: absolute;
  right: 20px;
  top: 5px;
}

.index__Instructions--Ge5dC {
  padding-top: 5px;
  padding-bottom: 5px;
}
:root {
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 600;
}

.index__Info--J914T {
  display: inline-block;
  position: relative;
  left: 10px;
  top: 3px;
  cursor: pointer;
  width: 16px;
}

.index__Info--J914T > .index__icon--HtyRE {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(components/IconFlat/ActionInfo.58edd923f301836810eb.svg);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.index__tooltip--AdGva {
  background-color: #3E586F;
  display: none;
  position: fixed;
  border-radius: 6px;
  box-shadow: 1px 3px 8px 1px rgba(28, 39, 49, 0.25);
  width: 200px;
  max-height: 300px;
  overflow: auto;
  padding: 15px;
  margin-top: -25px;
  margin-left: 25px;
  z-index: 10000;
}

.index__tooltip--AdGva > .index__text--TKr86 {
  color: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: pre;
}

.index__tooltip--AdGva a.index__link--m7Pj7 {
  display: block;
  color: #9CB2C7;
  margin-top: 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.index__tooltip--AdGva:after {
  left: -20px;
  top: 23px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.index__tooltip--AdGva:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #3E586F;
  border-width: 10px;
  margin-top: -10px;
}

.index__Theme-Dark--dAk6M .index__tooltip--AdGva {
  background-color: #EFF2F6;
}

.index__Theme-Dark--dAk6M .index__tooltip--AdGva:after {
  border-right-color: #EFF2F6;
}

.index__Theme-Dark--dAk6M .index__text--TKr86 {
  color: #3E586F;
}
.index__AnnouncementsCarousel--xn6My {
  /* Matches $content_width (app/assets/public/main/attributes/sizing.scss), so
     the carousel fills the content column on the dashboard and still overflows
     the narrower .Column it sits in on the edit form. */
  --carousel-width: 1024px;
  /* The box was 940x200 before the content column widened. The height is
     derived so that ratio holds: images are object-fit: cover, so pinning the
     height while the width grew would crop ~9% off the top and bottom of every
     crop taken under the old width. Mirrored by ASPECT_* in index.tsx, which
     the cropper locks to. */
  --carousel-aspect: 4.7;
  --carousel-height: calc(var(--carousel-width) / var(--carousel-aspect));
  display: grid;
  justify-content: space-around;
}

.index__Carousel--DyMJF {
  position: relative;
  width: var(--carousel-width);
  height: var(--carousel-height);
  display: grid;
  background-color: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  grid-template-rows: var(--carousel-height) 50px;
  user-select: none;
}
.index__Carousel--DyMJF.index__full--u6R1V, .index__Carousel--DyMJF.index__no_image--IbZv6 {
  grid-template-columns: 1fr;
}
.index__Carousel--DyMJF.index__half--uBXJu {
  grid-template-columns: 1fr 1fr;
}
.index__Carousel--DyMJF img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index__CarouselText--OYKfS {
  color: #3E586F;
  overflow: hidden;
  margin: 20px;
}

.index__CarouselImage--Vw2tN {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.index__CarouselDots--ezKA0 {
  display: flex;
  gap: 5px;
  align-items: center;
}
.index__CarouselDots--ezKA0 circle {
  fill: white;
  stroke: #5C81A3;
  cursor: pointer;
  transition: fill 100ms ease-in-out, stroke 100ms ease-in-out;
}
.index__CarouselDots--ezKA0 circle.index__DotActive--KC1Pe {
  fill: #5C81A3;
}
.index__CarouselDots--ezKA0 circle:hover {
  fill: #3E586F;
}
.index__CarouselDots--ezKA0 circle.index__DotActive--KC1Pe:hover {
  fill: #3E586F;
  stroke: #5C81A3;
}

.index__PrevButton--qHkWm,
.index__NextButton--PqqZx {
  display: flex;
  cursor: pointer;
  height: 100%;
  width: 22px;
}
.index__PrevButton--qHkWm svg,
.index__NextButton--PqqZx svg {
  transition: fill 100ms ease-in-out;
  fill: #5C81A3;
}
.index__PrevButton--qHkWm svg:hover,
.index__NextButton--PqqZx svg:hover {
  fill: #3E586F;
}

.index__PrevButton--qHkWm {
  left: 10px;
}

.index__NextButton--PqqZx {
  right: 10px;
}

.index__AnnouncementKebab--Mc6H2 {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.index__Carousel--DyMJF:hover .index__AnnouncementKebab--Mc6H2 {
  opacity: 1;
}

.index__Navigation--auwjH {
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: var(--carousel-width);
  user-select: none;
}
/* In the new UI the buttons sit directly under the form, as the Rails
   shared/confirm_bar partial does. A bar fixed to the bottom of the window
   would also cover the sidebar's notifications and profile buttons. */
.index__ConfirmBar--qj2fQ {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

body[data-old-ui] .index__ConfirmBar--qj2fQ {
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  height: var(--confirm-bar-height);
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 0;
}
@charset "UTF-8";
.index__Quicklinks--Euvfj {
  position: relative;
  width: 100%;
  /* Tracks $content_width (app/assets/public/main/attributes/sizing.scss) so
     the grid lines up with the rest of the dashboard column. */
  margin: 0 auto;
  min-height: 100px;
}

.index__QuicklinksGrid--c8KBm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.index__QuicklinkItemWrapper--xKqxn {
  position: relative;
}

.index__QuicklinkKebab--ToFms {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.index__QuicklinkItemWrapper--xKqxn:hover .index__QuicklinkKebab--ToFms {
  opacity: 1;
}

.index__QuicklinkItem--U9kT_ {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  /* Fills its 1fr grid track. This was a hardcoded 300px, which was exactly
     (940 - 2 gaps) / 3 — so it silently stopped filling the track the moment
     the content column changed width. */
  width: 100%;
  height: 119px; /* Adjust to match image height */
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  color: #1C2731;
  transition: background-color 0.2s ease;
  padding: 10px;
  box-sizing: border-box;
}

.index__QuicklinkItem--U9kT_:hover {
  opacity: 0.8;
}

.index__QuicklinkImage--QfssB {
  width: 99px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.index__QuicklinkImage--QfssB img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index__QuicklinkLetter--VSYVn {
  font-size: 48px;
  color: #1C2731;
}

.index__QuicklinkText--FfNbb {
  text-align: left;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Keeps line breaks typed in the editor but collapses runs of spaces.
     Admins used to pad lines with spaces to force a break at the old fixed
     card width; on wider cards those spaces showed as gaps mid-line. */
  white-space: pre-line;
  /* Takes whatever the card has left beside the 99px image, rather than a
     hardcoded 170px derived from the old 300px card. */
  min-width: 0;
  word-wrap: break-word;
  font-size: 16px;
  line-height: 1.2;
}

.index__QuicklinkSkeleton--fp58U {
  /* Matches the loaded card, so there is no width pop when it resolves. */
  width: 100%;
  height: 119px;
  background: #e0e0e0;
  border-radius: 8px;
  animation: index__pulse--BLT8P 1.5s ease-in-out infinite;
}

@keyframes index__pulse--BLT8P {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@charset "UTF-8";
.index__TilesGrid--FKTDV {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  /* grid-template-columns comes from Tiles/index.tsx, per column count. */
  /* Fallbacks only. Tiles/index.tsx sets both per column count so the tile keeps
     the aspect ratio existing crops were taken against — see tileHeightRatio(). */
  --tile-height-ratio: calc(250 / 460);
  --limited-image-ratio: calc(290 / 940);
}

.index__TileItemWrapper--WXIu_ {
  position: relative;
  /* A tile's width follows the page, so its height and the limited image pane
     are worked out from that width (cqw is 1% of this box) rather than pinned
     in pixels. That holds the ratio existing crops were taken against at any
     browser width. Both stay plain lengths, so percentage heights inside the
     tile resolve against them in every engine. */
  container-type: inline-size;
  --tile-height: calc(100cqw * var(--tile-height-ratio));
  --limited-image-width: calc(100cqw * var(--limited-image-ratio));
}

.index__TileKebab--BIVJU {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.index__TileItemWrapper--WXIu_:hover .index__TileKebab--BIVJU {
  opacity: 1;
}

.index__TileItem--JK_Dg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* A definite height, not just min/max: the image pane's height: 100%
     resolves to auto against a min/max-only box, and the pane then takes the
     image's own height, trimming it or leaving bands above and below. */
  height: var(--tile-height);
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #1C2731;
  font-size: 18px;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
}

.index__TileItem--JK_Dg.index__TextOnly--AgHY0 {
  padding: 20px;
}

.index__TileItem--JK_Dg:hover {
  opacity: 0.8;
}

.index__FullImage--c2QWn {
  padding: 0;
}

.index__FullImage--c2QWn .index__TileImage--ePvRb {
  border-radius: 8px;
  margin-bottom: 0;
}

.index__SideBySide--CQSpt {
  flex-direction: row-reverse;
}

.index__SideBySide--CQSpt .index__TileImage--ePvRb {
  width: 50%;
  height: 100%;
  margin-bottom: 0;
}

.index__SideBySide--CQSpt .index__TileContent--wsD2r {
  width: 50%;
  align-items: flex-start;
  padding: 20px;
}

.index__SideBySide--CQSpt .index__TileText--Knn1V {
  text-align: left;
}

.index__SideBySide--CQSpt .index__TileMessage--sKgYk {
  text-align: left;
}

.index__LimitedImage--T7uAy .index__TileImage--ePvRb {
  flex: 0 0 var(--limited-image-width);
}

.index__LimitedImage--T7uAy .index__TileContent--wsD2r {
  flex: 1;
}

.index__TileMessage--sKgYk {
  overflow: hidden;
  max-height: 210px;
}

.index__TileImage--ePvRb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 8px;
}

.index__TileImage--ePvRb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.index__TileContent--wsD2r {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-height: var(--tile-height);
  overflow: hidden;
}

.index__TileText--Knn1V.index__TileText--Knn1V p,
.index__TileText--Knn1V.index__TileText--Knn1V ol,
.index__TileText--Knn1V.index__TileText--Knn1V ul,
.index__TileText--Knn1V.index__TileText--Knn1V li,
.index__TileText--Knn1V.index__TileText--Knn1V span,
.index__TileText--Knn1V.index__TileText--Knn1V strong,
.index__TileText--Knn1V.index__TileText--Knn1V em,
.index__TileText--Knn1V.index__TileText--Knn1V h1,
.index__TileText--Knn1V.index__TileText--Knn1V h2,
.index__TileText--Knn1V.index__TileText--Knn1V h3,
.index__TileText--Knn1V.index__TileText--Knn1V h4,
.index__TileText--Knn1V.index__TileText--Knn1V h5,
.index__TileText--Knn1V.index__TileText--Knn1V h6 {
  line-height: 1.2 !important;
}

.index__TileButtonText--Bm4rl {
  display: block;
  overflow: hidden;
  max-height: 2.4em;
  line-height: 1.2;
}

.index__TileSkeleton--zoccX {
  min-height: var(--tile-height);
  max-height: var(--tile-height);
  background: #e0e0e0;
  border-radius: 8px;
  animation: index__pulse--mIoaC 1.5s ease-in-out infinite;
}

@keyframes index__pulse--mIoaC {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.EditStatsTilesModal__ModalLayout--Z0YFi > div {
  padding-left: 40px;
  padding-right: 40px;
}

.EditStatsTilesModal__Content--HqB5E {
  padding-top: 5px;
  padding-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.EditStatsTilesModal__Row--YE8pM {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
}

.EditStatsTilesModal__PeriodRow--QfnWH {
  padding: 5px 40px 20px;
}

.EditStatsTilesModal__Instructions--Cdb1h {
  color: #3E586F;
  padding: 0 40px 5px;
}

.EditStatsTilesModal__Label--zWtqw {
  color: #3E586F;
  flex: 1;
}

.EditStatsTilesModal__OrderBadge--I8xfo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1B9DDE;
  color: #FFFFFF;
  font-weight: 600;
  flex-shrink: 0;
}
.index__Grid--nvMdw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  width: 100%;
}

.index__Tile--OzAt3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 1px rgba(28, 39, 49, 0.1);
  text-align: center;
}

.index__Value--oWhrq {
  color: #3E586F;
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.index__Label--LHU9e {
  color: #9CB2C7;
  flex-shrink: 0;
  /* Reserve two lines so single- and two-line labels stay bottom-aligned.
     All defined stat labels wrap to at most two lines at the narrowest tile. */
  min-height: calc(2 * var(--dokio-line-height));
}

.index__Header--SrnZg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 5px;
}

.index__PeriodLabel--Pta0s {
  color: #9CB2C7;
  flex-shrink: 0;
  height: 1.3em;
  margin-top: 4px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index__EditLink--cvSMV {
  background: none;
  border: none;
  padding: 0;
  color: #1B9DDE;
  line-height: 23px;
  cursor: pointer;
}
.index__EditLink--cvSMV:hover {
  text-decoration: underline;
}
.index__ModalLayout--V8cBU > div {
  padding-left: 40px;
  padding-right: 40px;
}

.index__Content--vj7Bh {
  padding-top: 20px;
  padding-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.index__Row--eoNma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #9CB2C7;
  border-radius: 4px;
}

.index__RowLeft--gp1Jt {
  display: flex;
  align-items: center;
  gap: 12px;
}

.index__Label--ToA1o {
  color: #3E586F;
}

.index__DragHandle--F5cuL {
  cursor: grab;
  display: flex;
  align-items: center;
}
.index__DashboardActions--lxgdj {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.index__EditLink--j6SUs {
  background: none;
  border: none;
  padding: 0;
  color: #1B9DDE;
  line-height: 23px;
  cursor: pointer;
}
.index__EditLink--j6SUs:hover {
  text-decoration: underline;
}
.index__BrandFontsEditor--vJk4D {
  width: 100%;
}

.index__Row--HeL8U {
  display: flex;
  align-items: center;
  gap: 10px;
}

.index__NameField--Tdj8V {
  flex: 1 1 40%;
  min-width: 0;
}

.index__UploadField--ekzv6 {
  flex: 1 1 60%;
  min-width: 0;
}

.index__Remove--zohQa {
  flex: 0 0 auto;
}

.index__Empty--rbMOu {
  color: var(--color-text-subtle, #6b7280);
  margin: 0;
}

.index__Add--rGaoU {
  display: flex;
}
.index__BrandColoursEditor--skte0 {
  width: 100%;
}

.index__Row--v6wCW {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.index__NameField--ugmQE {
  flex: 1 1 35%;
  min-width: 0;
}

.index__SwatchField--Gm68Y {
  flex: 0 0 48px;
}

.index__Swatch--q5rX7 {
  display: block;
  width: 48px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.index__Swatch--q5rX7::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.index__Swatch--q5rX7::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.index__Swatch--q5rX7::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.index__HexField--M9WSS {
  flex: 0 0 130px;
  min-width: 0;
}

.index__CmykField--C96ik {
  flex: 0 0 170px;
  min-width: 0;
}

.index__Remove--OteP1 {
  flex: 0 0 auto;
}

/* Full-width so the message drops onto its own line below the inputs
   rather than squeezing them. */
.index__RowError--w7lif {
  flex: 1 1 100%;
  margin: 0;
  color: var(--color-text-error, #b91c1c);
}

.index__Empty--MifJA {
  color: var(--color-text-subtle, #6b7280);
  margin: 0;
}

.index__Hint--sshkl {
  color: var(--color-text-subtle, #6b7280);
  margin: 0;
}

.index__Add--v9gUl {
  display: flex;
}
.index__FilterMultiSelect--CDK9I {
  /* fills whatever the filter bar gives it, and never more -- a long pick (or
     the select-all summary) truncates rather than stretching the row */
  width: 100%;
  max-width: 100%;
}