[x-cloak] { display: none !important; }

/* Reset Button styles */
button {
    display: inline-flex;
    border: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
    background: transparent;
    font-family: sans-serif;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

h1 {
  color: var(--Neutral-Solid-80, var(--Neutral-Solid-80, #0A0A0A));
  font-family: Inter;
  font-size: 27px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.567px;
}

h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  color: #030712;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.07px;
}

table {
  font-family: Inter;
  font-size: 14px;
}

td {
  padding-right: 20px;
}

/* Config Container */
.ui-config-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.ui-config-container > *:not(:last-child) {
  margin-bottom: 12px;
}

/* Page container */
.ui-page-container {
  padding: 24px;
}

/* Input */
.ui-input > label, label.ui-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #7E7F7F;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.ui-input > label > span, label.ui-input > span {
  margin-bottom: 8px;
}

.ui-input > label > input,
.ui-input > label > select,
label.ui-input > input,
label.ui-input > select,
.ui-textarea {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #E9EBEB;
  background: #FFF;
  backdrop-filter: blur(2px);
  color: #0A0A0A;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.07px;
  caret-color: #008852;
  outline: none;
}

.ui-input > label > select, label.ui-input > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgZmlsbD0iI0YzRjVGNSIvPgo8cGF0aCBkPSJNNi41IDguMjUwMDRMMTAgMTEuNzVMMTMuNSA4LjI1IiBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS13aWR0aD0iMS4yIi8+Cjwvc3ZnPgo=');
  background-repeat: no-repeat;
  background-position: center right 8px;
}

.ui-input > label > input:hover,
label.ui-input > input:hover,
.ui-input > label > select:hover,
label.ui-input > select:hover,
.ui-textarea:hover
{
  border: 1px solid #CCCECE;
}

.ui-input > label > input:focus,
label.ui-input > input:focus,
.ui-input > label > select:focus,
label.ui-input > select:focus,
.ui-textarea:focus
{
  border: 1px solid #008852;;
  box-shadow: 0px 0px 0px 2px rgba(22, 153, 88, 0.12);
}

.ui-textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

/* Checkbox */
.ui-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-checkbox > input {
  font: inherit;
  appearance: none;
  background-color: #fff;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #E9EBEB;
  width: 20px;
  height: 20px;
  color: #169958;
  flex-shrink: 0;
}
.ui-checkbox > input:focus {
  color: #169958
}
.ui-checkbox > input:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.ui-checkbox > label {
  color: #030712;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.07px;
}
.ui-checkbox > label > small {
  color: #9CA3AF;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  margin-left: 8px;
}

.ui-helper {
  position: relative;
  padding-left: 20px;
  color: #6B7280;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  min-height: 20px;
}

.ui-info {
  position: relative;
  border-radius: 6px;
  border: 1px solid #F3F4F6;
  padding-left: 32px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #6B7280;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.ui-helper::before, .ui-info::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAxNiA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjEwIiByPSI2IiBzdHJva2U9IiM2QjcyODAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDcuNjk5OTVDOC40MTQyMSA3LjY5OTk1IDguNzUgNy4zNjQxNiA4Ljc1IDYuOTQ5OTVDOC43NSA2LjUzNTc0IDguNDE0MjEgNi4xOTk5NSA4IDYuMTk5OTVDNy41ODU3OSA2LjE5OTk1IDcuMjUgNi41MzU3NCA3LjI1IDYuOTQ5OTVDNy4yNSA3LjM2NDE2IDcuNTg1NzkgNy42OTk5NSA4IDcuNjk5OTVaTTcuNSAxMy4yTDcuNSAxMy43SDguNVYxMy4yTDguNSA5LjE5OTk1TDguNSA4LjY5OTk1SDcuNUw3LjUgOS4xOTk5NUw3LjUgMTMuMloiIGZpbGw9IiM2QjcyODAiLz4KPC9zdmc+Cg==");
  position: absolute;
}
.ui-info::before {
  top: 8px;
  left: 8px;
}
.ui-helper::before {
  top: 0;
  left: 0;
}

/* Save Button */
.ui-save-button {
  position: relative;
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  background: #169958;
  color: var(--white-100, var(--white-100, #FFF));
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* Secondary Button */
.ui-secondary-button {
  position: relative;
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  background: #F3F4F6;
  color: #0A0A0A;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* Default button */
.ui-button {
  position: relative;
  display: inline-flex;
  padding: 4px 8px;
  align-self: center;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  background: white;
  color: #0A0A0A;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.07px;
}
.ui-button:hover {
  border: 1px solid #CCCECE;
}
.ui-button:active {
  border: 1px solid #A5A7A7;
}

.ui-button-small {
  font-size: 12px;
  border-radius: 4px;
  line-height: 16px;
}

/* Danger button */
.ui-danger-button {
  position: relative;
  display: inline-flex;
  padding: 4px 8px;
  align-self: center;
  border-radius: 6px;
  background: #EC4E46;
  color: var(--white-100, var(--white-100, #FFF));
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.07px;
}

.ui-save-button:hover, .ui-danger-button:hover  {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.16);
}

.ui-save-button:active, .ui-danger-button:active {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.32);
}

.ui-button:disabled, .ui-button[disabled], .ui-save-button:disabled, .ui-save-button[disabled], .ui-danger-button:disabled, .ui-danger-button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

ul {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

/* Tags */
ul.ui-tags {
  display: flex;
  gap: 8px;
}
ul.ui-tags > li {
  display: inline-flex;
  padding: 2px 5px 2px 6px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  border: 1px solid rgba(63, 194, 117, 0.30);
  background: rgba(63, 194, 117, 0.10);
  color: #35A362;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss02' on;
  font-family: Inter;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.039px;
}

/* Image picker */
.ui-image-picker {
  height: 48px;
  display: flex;
  padding: 4px 12px 4px 4px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}
.ui-image-picker > img {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.ui-image-picker > span {
  flex: 1;
  color: #0A0A0A;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.07px;
}
.ui-image-picker > button:disabled,
.ui-image-picker > button[disabled]{
  opacity: 0.3;
  cursor: not-allowed;
}

body {
  margin: 0;
}

p {
  color: #030712;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.07px;
  margin-block-start: 0;
  margin-block-end: 0;
}

pre {
  margin: 0;
  display: flex;
  padding: 12px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #F3F4F6;
  background: #F9FAFB;
  backdrop-filter: blur(2px);
  color: #17191C;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss02' on;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  overflow: scroll;
}

code {
  display: inline;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  color: #6B7280;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'ss02' on;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

/* Helpers */
.mt-4 {
  margin-top: 16px;
}

.space-y-2 > *:not(:last-child) {
  margin-bottom: 8px;
}

.space-y-4 > *:not(:last-child) {
  margin-bottom: 16px;
}

.ui-separator {
  border-bottom: 1px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    rgba(229, 231, 235, 1),
    rgba(229, 231, 235, 1) 3px,
    transparent 3px,
    transparent 7px
  );
  border-image-slice: 1;
}

.ui-logo-placeholder {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1px dashed #E5E7EB;
  background: #F9FAFB;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjI0ODUgMy4yNDg3NUMzLjA3ODY4IDMuNDE4NTggMi45NDk5NSAzLjcxMzkzIDIuOTQ5OTUgNC4yMzAyVjExLjc5MDJDMi45NDk5NSAxMi4yODc2IDMuMDY5NDYgMTIuNTggMy4yMzAwOSAxMi43NTI2TDguMzk2MDQgNy41NzcwM0w4LjM5NjEgNy41NzY5OEM4LjYwNzg3IDcuMzY0NzYgOC44NTk0MSA3LjE5NjQgOS4xMzYzMyA3LjA4MTUyQzkuNDEzMjcgNi45NjY2NCA5LjcxMDE1IDYuOTA3NSAxMC4wMSA2LjkwNzVDMTAuMzA5OCA2LjkwNzUgMTAuNjA2NyA2Ljk2NjY0IDEwLjg4MzYgNy4wODE1MkMxMS4xNjA2IDcuMTk2NDEgMTEuNDEyMSA3LjM2NDc5IDExLjYyMzkgNy41NzcwM0wxMy4wNyA5LjAyMzA3VjQuMjMwMkMxMy4wNyAzLjcxMzkzIDEyLjk0MTIgMy40MTg1OCAxMi43NzE0IDMuMjQ4NzVDMTIuNjAxNiAzLjA3ODkyIDEyLjMwNjIgMi45NTAyIDExLjc5IDIuOTUwMkg0LjIyOTk1QzMuNzEzNjkgMi45NTAyIDMuNDE4MzMgMy4wNzg5MiAzLjI0ODUgMy4yNDg3NVpNMTEuNzkgMTMuMDcwMkg0LjMyNTk0TDkuMTAzODYgOC4yODM0M0w5LjEwMzkxIDguMjgzMzhDOS4yMjI4IDguMTY0MjMgOS4zNjQwMyA4LjA2OTcgOS41MTk1MSA4LjAwNTJDOS42NzQ5OCA3Ljk0MDcgOS44NDE2NSA3LjkwNzUgMTAuMDEgNy45MDc1QzEwLjE3ODMgNy45MDc1IDEwLjM0NSA3Ljk0MDcgMTAuNTAwNCA4LjAwNTJDMTAuNjU1OSA4LjA2OTcgMTAuNzk3MSA4LjE2NDIzIDEwLjkxNiA4LjI4MzM4TDEwLjkxNjQgOC4yODM3NkwxMy4wNyAxMC40MzczVjExLjc5MDJDMTMuMDcgMTIuMzA2NSAxMi45NDEyIDEyLjYwMTggMTIuNzcxNCAxMi43NzE2QzEyLjYwMTYgMTIuOTQxNSAxMi4zMDYyIDEzLjA3MDIgMTEuNzkgMTMuMDcwMlpNMTQuMDcgMTEuNzkwMlYxMC4yMzUxVjEwLjIyNTNWNC4yMzAyQzE0LjA3IDMuNTU5NzkgMTMuOTAyIDIuOTY1MTUgMTMuNDc4NSAyLjU0MTY0QzEzLjA1NSAyLjExODE0IDEyLjQ2MDQgMS45NTAyIDExLjc5IDEuOTUwMkg0LjIyOTk1QzMuNTU5NTUgMS45NTAyIDIuOTY0OSAyLjExODE0IDIuNTQxNCAyLjU0MTY0QzIuMTE3ODkgMi45NjUxNSAxLjk0OTk1IDMuNTU5NzkgMS45NDk5NSA0LjIzMDJWMTEuNzkwMkMxLjk0OTk1IDEyLjQ2MDYgMi4xMTc4OSAxMy4wNTUyIDIuNTQxNCAxMy40Nzg3QzIuOTY0OSAxMy45MDIzIDMuNTU5NTUgMTQuMDcwMiA0LjIyOTk1IDE0LjA3MDJIMTEuNzlDMTIuNDYwNCAxNC4wNzAyIDEzLjA1NSAxMy45MDIzIDEzLjQ3ODUgMTMuNDc4N0MxMy45MDIgMTMuMDU1MiAxNC4wNyAxMi40NjA2IDE0LjA3IDExLjc5MDJaTTQuNzcxNTIgNS42NjY3N0M0Ljk4MDYzIDUuNDU3NjcgNS4yNjQyMyA1LjM0MDE5IDUuNTU5OTUgNS4zNDAxOUM1Ljg1NTY2IDUuMzQwMTkgNi4xMzkyNyA1LjQ1NzY3IDYuMzQ4MzcgNS42NjY3N0M2LjU1NzQ3IDUuODc1ODcgNi42NzQ5NSA2LjE1OTQ4IDYuNjc0OTUgNi40NTUxOUM2LjY3NDk1IDYuNzUwOTEgNi41NTc0NyA3LjAzNDUyIDYuMzQ4MzcgNy4yNDM2MkM2LjEzOTI3IDcuNDUyNzIgNS44NTU2NiA3LjU3MDE5IDUuNTU5OTUgNy41NzAxOUM1LjI2NDIzIDcuNTcwMTkgNC45ODA2MyA3LjQ1MjcyIDQuNzcxNTIgNy4yNDM2MkM0LjU2MjQyIDcuMDM0NTIgNC40NDQ5NSA2Ljc1MDkxIDQuNDQ0OTUgNi40NTUxOUM0LjQ0NDk1IDYuMTU5NDggNC41NjI0MiA1Ljg3NTg3IDQuNzcxNTIgNS42NjY3N1oiIGZpbGw9IiMwMzA3MTIiLz4KPC9zdmc+Cg==");
  background-repeat:no-repeat;
  background-position: center center;
}

.ui-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}