:root {
  --metrics--sizing--height-m: 32px;
  --color--border--input: var(--primitives--monochrome-85);
  --color--surface--primary: var(--primitives--monochrome-100);
  --color--text--primary: var(--primitives--monochrome-0);
  --color--text--tertiary: var(--primitives--monochrome-75);
  --metrics--sizing--button-width: 152px;
  --metrics--spacing--m: 16px;
  --metrics--radius--s: 4px;
  --color--button-surface--l-primary: var(--primitives--brand);
  --color--button-surface--l-tertiary: var(--primitives--monochrome-97);
  --color--text--highlight: var(--primitives--brand);
  --button--hover-brand: var(--primitives--brand-alpha-5);
  --button--click-brand: var(--primitives--brand-alpha-10);
  --button--hover-light: var(--primitives--black-alpha-5);
  --button--click-strong: var(--primitives--black-alpha-20);
  --color--misc--background: var(--primitives--monochrome-97);
  --primitives--typography--body: "Roboto Flex", sans-serif;
  --color--misc--shadow: #0000001a;
  --metrics--sizing--rows: 40px;
  --metrics--spacing--s: 8px;
  --color--surface--accent-opaque: var(--primitives--monochrome-97);
  --metrics--sizing--bars: 64px;
  --color--border--divider-light: var(--primitives--monochrome-97);
  --color--text--secondary: var(--primitives--monochrome-50);
  --icons: "FA Pro 6.6 Sharp Solid", sans-serif;
  --color--icon--secondary: var(--primitives--monochrome-65);
  --primitives--monochrome-0: #000;
  --button--click-light: var(--primitives--black-alpha-10);
  --metrics--sizing--s: 32px;
  --primitives--monochrome-100: white;
  --primitives--brand: #1979ce;
  --primitives--monochrome-50: gray;
  --primitives--monochrome-65: #a6a6a6;
  --primitives--monochrome-75: #bfbfbf;
  --primitives--monochrome-85: #d9d9d9;
  --primitives--monochrome-97: #f7f7f7;
  --primitives--black-alpha-5: #0000000d;
  --primitives--black-alpha-10: #0000001a;
  --primitives--black-alpha-20: #0003;
  --primitives--brand-alpha-5: #1979ce0d;
  --primitives--brand-alpha-10: #1979ce1a;
  --color--icon--primary: var(--primitives--monochrome-50);
  --color--text--invert: var(--primitives--monochrome-100);
  --metrics--spacing--none: 0px;
  --metrics--spacing--l: 24px;
  --button--hover-strong: var(--primitives--black-alpha-10);
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.input_text {
  height: var(--metrics--sizing--height-m);
  border: 1px solid var(--color--border--input);
  background-color: var(--color--surface--primary);
  border-radius: 4px;
  margin-bottom: 0;
  font-size: 12px;
  display: flex;
}

.input_text:active {
  color: #e50505;
}

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

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

.button-m {
  width: var(--metrics--sizing--button-width);
  height: var(--metrics--sizing--height-m);
  min-width: var(--metrics--sizing--button-width);
  padding: 6px var(--metrics--spacing--m);
  grid-column-gap: 10px;
  border-radius: var(--metrics--radius--s);
  background-color: var(--color--button-surface--l-primary);
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  max-width: 256px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
}

.button-m.tertiary {
  background-color: var(--color--button-surface--l-tertiary);
  color: var(--color--text--highlight);
  width: 50%;
  max-width: none;
}

.button-m.tertiary:hover {
  background-image: linear-gradient(to bottom, var(--button--hover-brand), var(--button--hover-brand));
}

.button-m.tertiary:active {
  background-image: linear-gradient(to bottom, var(--button--click-brand), var(--button--click-brand));
}

.button-m.primary {
  width: 50%;
  max-width: none;
}

.button-m.primary:hover {
  background-image: linear-gradient(to bottom, var(--button--hover-light), var(--button--hover-light));
}

.button-m.primary:active {
  background-image: linear-gradient(to bottom, var(--button--click-strong), var(--button--click-strong));
}

.body {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--color--misc--background);
  font-family: var(--primitives--typography--body);
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
}

.modal-window-container {
  border-radius: var(--metrics--radius--s);
  background-color: var(--color--surface--primary);
  box-shadow: 12px 12px 48px 0 var(--color--misc--shadow);
  flex-flow: column;
  justify-content: flex-start;
  align-self: auto;
  align-items: stretch;
  width: 376px;
  display: flex;
}

.window-top-bar {
  height: var(--metrics--sizing--rows);
  padding-right: var(--metrics--spacing--s);
  padding-left: var(--metrics--spacing--m);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--color--surface--accent-opaque);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.window-title {
  z-index: auto;
  object-fit: fill;
  width: 100%;
  font-weight: 600;
  position: static;
  left: auto;
}

.lower-button-bar {
  height: var(--metrics--sizing--bars);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  aspect-ratio: auto;
  border-top: 1px solid var(--color--border--divider-light);
  object-fit: fill;
  border-radius: 1px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: static;
  inset: auto 0% 0% auto;
}

.form {
  margin-top: var(--metrics--spacing--m);
  padding-right: var(--metrics--spacing--m);
  padding-left: var(--metrics--spacing--m);
  grid-column-gap: var(--metrics--spacing--m);
  grid-row-gap: var(--metrics--spacing--m);
  flex-flow: column;
  display: flex;
}

.label {
  color: var(--color--text--secondary);
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
}

.input-item-container {
  grid-column-gap: var(--metrics--spacing--m);
  grid-row-gap: var(--metrics--spacing--m);
  justify-content: center;
  align-items: flex-end;
}

.button-s {
  border-radius: var(--metrics--radius--s);
  font-family: var(--icons);
  color: var(--color--icon--secondary);
  text-align: center;
  -webkit-text-stroke-color: var(--primitives--monochrome-0);
  background-color: #fff0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  display: flex;
}

.button-s:hover {
  background-image: linear-gradient(to bottom, var(--button--hover-light), var(--button--hover-light));
}

.button-s:active {
  background-image: linear-gradient(to bottom, var(--button--click-light), var(--button--click-light));
}

.input-container {
  padding-right: var(--metrics--spacing--s);
  align-items: center;
  display: flex;
}

.input-container.input_text {
  padding-right: var(--metrics--spacing--s);
  padding-left: var(--metrics--spacing--s);
}

.fa-icon-1x {
  margin-right: 0;
  margin-left: var(--metrics--spacing--s);
  font-family: var(--icons);
  color: var(--color--icon--secondary);
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
}

.input_wrapped {
  border-radius: var(--metrics--radius--s);
  border: 0 solid #000;
  height: auto;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 0;
  padding: 1px 0;
  font-size: 12px;
}

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

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

.color-preview {
  margin-right: var(--metrics--spacing--s);
  background-color: #ed9227;
  border-radius: 3px;
  width: 16px;
  min-width: 16px;
  height: 16px;
}

.dropdown-toggle-2 {
  height: var(--metrics--sizing--height-m);
  padding: 0px var(--metrics--spacing--s);
  border: 1px solid var(--color--border--input);
  border-radius: var(--metrics--radius--s);
  background-color: var(--color--surface--primary);
  align-items: center;
  width: auto;
  display: flex;
}

.dropdown-toggle-2:active {
  background-color: var(--color--surface--primary);
}

.dropdown-toggle-2.w--open {
  font-size: 12px;
}

.dropdown-option {
  color: var(--color--text--secondary);
  width: 100%;
  font-size: 12px;
}

.dropdown {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.label-with-input {
  min-width: 104px;
}

.dropdown-link {
  height: var(--metrics--sizing--s);
  background-color: var(--color--surface--primary);
  color: var(--color--text--secondary);
  align-items: center;
  margin: 0 4px;
  padding: 0 8px;
  font-size: 12px;
  display: flex;
}

.dropdown-link:hover {
  height: var(--metrics--sizing--height-m);
  padding: 0px var(--metrics--spacing--s);
  border-radius: var(--metrics--radius--s);
  background-image: linear-gradient(to bottom, var(--button--hover-light), var(--button--hover-light));
  align-items: center;
  margin: 0 4px;
  font-size: 12px;
  display: flex;
}

.dropdown-list {
  background-color: var(--primitives--monochrome-100);
}

.dropdown-list.w--open {
  border-radius: var(--metrics--radius--s);
  background-color: var(--color--surface--primary);
  box-shadow: 4px 8px 16px 0 var(--color--misc--shadow);
  padding-top: 4px;
  padding-bottom: 4px;
}

@media screen and (max-width: 991px) {
  .color-preview {
    border-radius: var(--metrics--radius--s);
    background-color: #ff9d00;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
  }
}


@font-face {
  font-family: 'Roboto Flex';
  src: url('../images/') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FA Pro 6.6 Sharp Solid';
  src: url('../fonts/fa-sharp-solid-900.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FA Brands 6.6 Sharp Solid';
  src: url('../fonts/fa-brands-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kisters HMT Icons';
  src: url('../fonts/custom-icons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}