:root {
    --gin-color-title: #222330;
    --gin-color-text: #222330;
    --gin-color-text-light: #545560;
    --gin-color-focus: rgba(0, 125, 250, .6);
    --gin-color-focus-border: rgba(0, 0, 0, .2);
    --gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);
    --gin-color-disabled: #8d8d8d;
    --gin-color-disabled-bg: #eaeaea;
    --gin-color-disabled-border: #c2c2c2;
    --gin-color-warning: #d8b234;
    --gin-color-warning-light: #efcf64;
    --gin-bg-warning: #605328;
    --gin-bg-warning-light: rgba(226, 151, 0, .08);
    --gin-color-danger: #cc3d3d;
    --gin-color-danger-lightest: #fdd9d9;
    --gin-color-danger-light: #f39b9d;
    --gin-bg-danger: #583333;
    --gin-bg-danger-light: rgba(222, 117, 96, .1);
    --gin-color-green: #058260;
    --gin-color-green-light: #32cea4;
    --gin-color-green-lightest: #adebdb;
    --gin-bg-green: #145242;
    --gin-bg-green-light: rgba(72, 171, 123, .1);
    --gin-color-info: #082538;
    --gin-color-info-light: #589ac5;
    --gin-bg-info: #122b3c;
    --gin-color-contextual: var(--gin-color-text);
    --gin-color-contextual-text: #eee;
    --gin-bg-input: #fff;
    --gin-bg-layer: #fff;
    --gin-bg-layer2: #edeff5;
    --gin-bg-layer3: #fff;
    --gin-bg-layer4: #e2e5ec;
    --gin-bg-secondary: var(--gin-bg-layer);
    --gin-bg-header: #eeeff3;
    --gin-pattern: var(--gin-border-color);
    --gin-pattern-fallback: var(--gin-bg-layer2);
    --gin-pattern-square: .5rem;
    --gin-font: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --gin-font-size-xxs: .75rem;
    --gin-font-size-xs: small;
    --gin-font-size-s: .875rem;
    --gin-font-size: 1rem;
    --gin-font-size-m: var(--gin-font-size);
    --gin-font-size-l: 1.125rem;
    --gin-font-size-xl: 1.25rem;
    --gin-font-size-h3: 1.5rem;
    --gin-font-size-h2: 1.75rem;
    --gin-font-size-h1: 1.6rem;
    --gin-font-size-quote: 1.1em;
    --gin-font-weight-normal: 400;
    --gin-font-weight-semibold: 525;
    --gin-font-weight-bold: 575;
    --gin-font-weight-heavy: 625;
    --gin-spacing-xxs: .25rem;
    --gin-spacing-xs: .5rem;
    --gin-spacing-s: .75rem;
    --gin-spacing-m: 1rem;
    --gin-spacing-l: 1.5rem;
    --gin-spacing-xl: 2rem;
    --gin-spacing-xxl: 3rem;
    --gin-spacing-xxxl: 4rem;
    --gin-icon-color: #414247;
    --gin-icon-size-close: 20px;
    --gin-icon-size-toolbar-secondary: 17px;
    --gin-icon-size-toolbar: 17px;
    --gin-icon-size-sidebar-toggle: 21px;
    --gin-border-xxs: .125rem;
    --gin-border-xs: .25rem;
    --gin-border-s: .375rem;
    --gin-border-m: .5rem;
    --gin-border-l: .75rem;
    --gin-border-xl: 1rem;
    --gin-border-color: #d4d4d8;
    --gin-border-color-secondary: rgba(0, 0, 0, .08);
    --gin-border-color-layer: rgba(0, 0, 0, .08);
    --gin-border-color-layer2: #d4d4d8;
    --gin-border-color-table: rgba(0, 0, 0, .1);
    --gin-border-color-table-header: rgba(0, 0, 0, .2);
    --gin-border-color-form-element: #8e929c;
    --size-summary-border-radius: calc(var(--gin-border-m) - 1px);
    --gin-easing: cubic-bezier(.19, 1, .22, 1);
    --gin-transition: .15s var(--gin-easing);
    --gin-transition-fast: .3s var(--gin-easing);
    --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
    --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%), 0 20px 24px rgb(20 45 82 / 12%);
    --gin-height-sticky: 60px;
    --gin-toolbar-width-collapsed: 66px;
    --gin-toolbar-width: 256px;
    --gin-toolbar-bg-level2: #edeff5;
    --gin-toolbar-bg-level3: rgba(44, 45, 47, .05);
    --gin-sidebar-width: 320px;
    --gin-sidebar-offset: var(--gin-sidebar-width);
    --gin-switch: #26a769;
    --gin-shadow-button: #00000033;
    --gin-color-button-text: #fff;
    --gin-offset-x: var(--gin-toolbar-x-offset);
    --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
    --gin-link-decoration-style: dotted;
    --gin-max-line-length: 80ch;
    --input-line-height: var(--gin-spacing-l);
    --input-padding-horizontal: var(--gin-spacing-s);
    --input-padding-vertical: var(--gin-spacing-xs);
    --jui-dialog-z-index: 1260;
}

@media (min-width: 61em) {
  :root {
    --gin-font-size-h1: 1.8125rem;
    --gin-font-size-quote: 1.2em;
  }
}

@media (min-width: 90em) {
  :root {
    --gin-font-size-h1: 2.125rem;
  }
}

@media (min-width: 61em) {
  :root {
    --gin-icon-size-toolbar: 20px;
  }
}

@media (min-width: 80em) {
  :root {
    --gin-sidebar-width: 360px;
  }
}

[data-gin-layout-density=small] {
  --gin-spacing-density-xxs: .15625rem;
  --gin-spacing-density-xs: .3125rem;
  --gin-spacing-density-s: .46875rem;
  --gin-spacing-density-m: .625rem;
  --gin-spacing-density-l: .9375rem;
  --gin-spacing-density-xl: 1.25rem;
  --gin-spacing-density-xxl: 1.875rem;
  --gin-spacing-density-xxxl: 2.5rem;
}

[data-gin-layout-density=medium] {
  --gin-spacing-density-xxs: .1875rem;
  --gin-spacing-density-xs: .375rem;
  --gin-spacing-density-s: .5625rem;
  --gin-spacing-density-m: .75rem;
  --gin-spacing-density-l: 1.125rem;
  --gin-spacing-density-xl: 1.5rem;
  --gin-spacing-density-xxl: 2.25rem;
  --gin-spacing-density-xxxl: 3rem;
}

:root {
  --gin-spacing-density-xxs: .25rem;
  --gin-spacing-density-xs: .5rem;
  --gin-spacing-density-s: .75rem;
  --gin-spacing-density-m: 1rem;
  --gin-spacing-density-l: 1.5rem;
  --gin-spacing-density-xl: 2rem;
  --gin-spacing-density-xxl: 3rem;
  --gin-spacing-density-xxxl: 4rem;
}

.gin--dark-mode {
  --gin-color-title: #fff;
  --gin-color-text: #d2d3d3;
  --gin-color-text-light: #9e9fa0;
  --gin-shadow-button: rgba(#111, .9);
  --gin-color-button-text: #111;
  --gin-color-focus: rgb(81, 168, 255);
  --gin-color-focus-border: rgba(0, 0, 0, .8);
  --gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);
  --gin-color-disabled: #646464;
  --gin-color-disabled-border: #646464;
  --gin-color-disabled-bg: #47474c;
  --gin-color-warning: #dec15f;
  --gin-bg-warning-light: rgba(222, 193, 95, .1);
  --gin-color-danger: #ce6060;
  --gin-color-danger-lightest: #483439;
  --gin-color-green: #32cea4;
  --gin-color-info: #559bca;
  --gin-bg-input: var(--gin-bg-layer2);
  --gin-bg-app: #1b1b1d;
  --gin-bg-layer: #2a2a2d;
  --gin-bg-layer2: #3b3b3f;
  --gin-bg-layer3: #47474c;
  --gin-bg-layer4: #19191b;
  --gin-bg-secondary: var(--gin-bg-app);
  --gin-bg-unpublished: var(--gin-bg-warning-light);
  --gin-color-contextual: var(--gin-bg-layer3);
  --gin-border-color: #43454a;
  --gin-border-color-secondary: rgba(255, 255, 255, .075);
  --gin-border-color-layer: rgba(0, 0, 0, .05);
  --gin-border-color-layer2: #76777b;
  --gin-border-color-table: #43454a;
  --gin-border-color-table-header: rgba(255, 255, 255, .12);
  --gin-border-color-form-element: var(--gin-border-color-layer2);
  --gin-bg-header: #1b1b1d;
  --gin-switch: var(--gin-color-primary);
  --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%);
  --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%), 0 20px 24px rgb(0 0 0 / 12%);
  --gin-icon-color: #888;
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern: var(--gin-border-color);
}

.ui-dialog {
    padding: 0;
}

.ui-widget.ui-widget-content {
    border: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none;
}

[data-gin-accent] {
    --gin-color-primary: rgb(var(--gin-color-primary-rgb));
    --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
    --gin-bg-app: rgb(var(--gin-bg-app-rgb));
    --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
    --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
    --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
    --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .45);
  }
  
  .gin--dark-mode[data-gin-accent],
  .gin--dark-mode [data-gin-accent] {
    --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
    --gin-bg-app-rgb: 27, 27, 29;
  }
  
  [data-gin-accent=blue] {
    --gin-color-primary-rgb: 5, 80, 230;
    --gin-color-primary-light-rgb: 205, 220, 250;
    --gin-color-primary-hover: #0444c4;
    --gin-color-primary-active: #043cad;
    --gin-bg-app-rgb: 248, 250, 254;
    --gin-bg-header: #e1eafc;
    --gin-color-sticky-rgb: 235, 241, 253;
  }
  
  [data-gin-accent=light_blue] {
    --gin-color-primary-rgb: 50, 117, 224;
    --gin-color-primary-light-rgb: 214, 227, 249;
    --gin-color-primary-hover: #2b63be;
    --gin-color-primary-active: #2658a8;
    --gin-bg-app-rgb: 249, 251, 254;
    --gin-bg-header: #e6eefb;
    --gin-color-sticky-rgb: 239, 244, 253;
  }
  
  [data-gin-accent=dark_purple] {
    --gin-color-primary-rgb: 67, 0, 191;
    --gin-color-primary-light-rgb: 217, 204, 242;
    --gin-color-primary-hover: #3900a2;
    --gin-color-primary-active: #32008f;
    --gin-bg-app-rgb: 249, 247, 253;
    --gin-bg-header: #e8e0f7;
    --gin-color-sticky-rgb: 240, 235, 250;
    --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
    --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .25);
    --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .4);
    --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
  }
  
  [data-gin-accent=purple] {
    --gin-color-primary-rgb: 91, 0, 255;
    --gin-color-primary-light-rgb: 222, 204, 255;
    --gin-color-primary-hover: #4d00d9;
    --gin-color-primary-active: #4400bf;
    --gin-bg-app-rgb: 250, 247, 255;
    --gin-bg-header: #ebe0ff;
    --gin-color-sticky-rgb: 242, 235, 255;
    --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
    --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .25);
    --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .4);
    --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
  }
  
  [data-gin-accent=teal] {
    --gin-color-primary-rgb: 16, 133, 127;
    --gin-color-primary-light-rgb: 207, 231, 229;
    --gin-color-primary-hover: #0e716c;
    --gin-color-primary-active: #0c645f;
    --gin-bg-app-rgb: 248, 251, 251;
    --gin-bg-header: #e2f0f0;
    --gin-color-sticky-rgb: 236, 245, 245;
  }
  
  [data-gin-accent=green] {
    --gin-color-primary-rgb: 0, 135, 95;
    --gin-color-primary-light-rgb: 204, 231, 223;
    --gin-color-primary-hover: #007351;
    --gin-color-primary-active: #006547;
    --gin-bg-app-rgb: 247, 251, 250;
    --gin-bg-header: #e0f1ec;
    --gin-color-sticky-rgb: 235, 245, 242;
  }
  
  [data-gin-accent=red] {
    --gin-color-primary-rgb: 216, 0, 47;
    --gin-color-primary-light-rgb: 247, 204, 213;
    --gin-color-primary-hover: #b80028;
    --gin-color-primary-active: #a20023;
    --gin-bg-app-rgb: 254, 247, 249;
    --gin-bg-header: #fae0e6;
    --gin-color-sticky-rgb: 252, 235, 238;
  }
  
  [data-gin-accent=orange] {
    --gin-color-primary-rgb: 239, 92, 32;
    --gin-color-primary-light-rgb: 252, 222, 210;
    --gin-color-primary-hover: #cb4e1b;
    --gin-color-primary-active: #b34518;
    --gin-bg-app-rgb: 255, 250, 248;
    --gin-bg-header: #fdebe4;
    --gin-color-sticky-rgb: 254, 242, 237;
  }
  
  [data-gin-accent=yellow] {
    --gin-color-primary-rgb: 197, 137, 0;
    --gin-color-primary-light-rgb: 243, 231, 204;
    --gin-color-primary-hover: #a77400;
    --gin-color-primary-active: #946700;
    --gin-bg-app-rgb: 253, 251, 247;
    --gin-bg-header: #f8f1e0;
    --gin-color-sticky-rgb: 250, 246, 235;
  }
  
  [data-gin-accent=pink] {
    --gin-color-primary-rgb: 226, 49, 119;
    --gin-color-primary-light-rgb: 249, 214, 228;
    --gin-color-primary-hover: #c02a65;
    --gin-color-primary-active: #aa2559;
    --gin-bg-app-rgb: 254, 249, 251;
    --gin-bg-header: #fce6ef;
    --gin-color-sticky-rgb: 253, 239, 244;
  }
  
  [data-gin-accent=neutral] {
    --gin-color-primary-rgb: 17, 17, 17;
    --gin-color-primary-light-rgb: 207, 207, 207;
    --gin-color-primary-hover: #0e0e0e;
    --gin-color-primary-active: #0d0d0d;
    --gin-bg-app-rgb: 248, 248, 248;
    --gin-bg-header: #e2e2e2;
    --gin-color-sticky-rgb: 236, 236, 236;
  }
  
  [data-gin-accent=custom] {
    --gin-color-primary-rgb: 17, 17, 17;
    --gin-color-primary-light-rgb: 207, 207, 207;
    --gin-color-primary-hover: #0e0e0e;
    --gin-color-primary-active: #0d0d0d;
    --gin-bg-app-rgb: 248, 248, 248;
    --gin-bg-header: #e2e2e2;
    --gin-color-sticky-rgb: 236, 236, 236;
  }
  
  .gin--dark-mode[data-gin-accent=blue],
  .gin--dark-mode [data-gin-accent=blue] {
    --gin-color-primary-rgb: 144, 174, 239;
    --gin-color-primary-light-rgb: 62, 68, 84;
    --gin-color-primary-hover: #9bb6f1;
    --gin-color-primary-active: #a1baf1;
    --gin-bg-header: #373b45;
  }
  
  .gin--dark-mode[data-gin-accent=claro_blue],
  .gin--dark-mode [data-gin-accent=claro_blue] {
    --gin-color-primary-rgb: 115, 145, 216;
    --gin-color-primary-light-rgb: 57, 63, 79;
    --gin-color-primary-hover: #819cdc;
    --gin-color-primary-active: #88a2de;
    --gin-bg-header: #333742;
  }
  
  .gin--dark-mode[data-gin-accent=light_blue],
  .gin--dark-mode [data-gin-accent=light_blue] {
    --gin-color-primary-rgb: 130, 191, 232;
    --gin-color-primary-light-rgb: 60, 72, 82;
    --gin-color-primary-hover: #8fc5ea;
    --gin-color-primary-active: #95c9eb;
    --gin-bg-header: #353d44;
  }
  
  .gin--dark-mode[data-gin-accent=dark_purple],
  .gin--dark-mode [data-gin-accent=dark_purple] {
    --gin-color-primary-rgb: 173, 143, 232;
    --gin-color-primary-light-rgb: 68, 62, 82;
    --gin-color-primary-hover: #b59aea;
    --gin-color-primary-active: #b9a0eb;
    --gin-bg-header: #3a3744;
  }
  
  .gin--dark-mode[data-gin-accent=purple],
  .gin--dark-mode [data-gin-accent=purple] {
    --gin-color-primary-rgb: 219, 165, 239;
    --gin-color-primary-light-rgb: 77, 67, 84;
    --gin-color-primary-hover: #dfaef1;
    --gin-color-primary-active: #e0b3f1;
    --gin-bg-header: #403945;
  }
  
  .gin--dark-mode[data-gin-accent=teal],
  .gin--dark-mode [data-gin-accent=teal] {
    --gin-color-primary-rgb: 0, 234, 208;
    --gin-color-primary-light-rgb: 34, 80, 78;
    --gin-color-primary-hover: #1aecd5;
    --gin-color-primary-active: #26edd7;
    --gin-bg-header: #254241;
  }
  
  .gin--dark-mode[data-gin-accent=green],
  .gin--dark-mode [data-gin-accent=green] {
    --gin-color-primary-rgb: 107, 212, 161;
    --gin-color-primary-light-rgb: 55, 76, 68;
    --gin-color-primary-hover: #7ad8aa;
    --gin-color-primary-active: #81daaf;
    --gin-bg-header: #323f3c;
  }
  
  .gin--dark-mode[data-gin-accent=red],
  .gin--dark-mode [data-gin-accent=red] {
    --gin-color-primary-rgb: 236, 137, 137;
    --gin-color-primary-light-rgb: 81, 61, 63;
    --gin-color-primary-hover: #ee9595;
    --gin-color-primary-active: #ef9b9b;
    --gin-bg-header: #423639;
  }
  
  .gin--dark-mode[data-gin-accent=orange],
  .gin--dark-mode [data-gin-accent=orange] {
    --gin-color-primary-rgb: 247, 149, 118;
    --gin-color-primary-light-rgb: 83, 63, 60;
    --gin-color-primary-hover: #f8a084;
    --gin-color-primary-active: #f8a58b;
    --gin-bg-header: #443736;
  }
  
  .gin--dark-mode[data-gin-accent=yellow],
  .gin--dark-mode [data-gin-accent=yellow] {
    --gin-color-primary-rgb: 241, 201, 112;
    --gin-color-primary-light-rgb: 82, 74, 58;
    --gin-color-primary-hover: #f2ce7e;
    --gin-color-primary-active: #f3d185;
    --gin-bg-header: #433e35;
  }
  
  .gin--dark-mode[data-gin-accent=pink],
  .gin--dark-mode [data-gin-accent=pink] {
    --gin-color-primary-rgb: 231, 157, 163;
    --gin-color-primary-light-rgb: 80, 65, 69;
    --gin-color-primary-hover: #e9a7ac;
    --gin-color-primary-active: #ebacb1;
    --gin-bg-header: #42383c;
  }
  
  .gin--dark-mode[data-gin-accent=neutral],
  .gin--dark-mode [data-gin-accent=neutral] {
    --gin-color-primary-rgb: 255, 255, 255;
    --gin-color-primary-light-rgb: 85, 85, 87;
    --gin-color-primary-hover: white;
    --gin-color-primary-active: white;
    --gin-bg-header: #454547;
  }
  
  .gin--dark-mode[data-gin-accent=custom],
  .gin--dark-mode [data-gin-accent=custom] {
    --gin-color-primary-rgb: 255, 255, 255;
    --gin-color-primary-light-rgb: 85, 85, 87;
    --gin-color-primary-hover: white;
    --gin-color-primary-active: white;
    --gin-bg-header: #454547;
  }
  
  .gin--high-contrast-mode {
    --gin-bg-app: #d9dbde;
    --gin-color-text: rgba(0, 0, 0, .8);
    --gin-color-text-light: rgba(0, 0, 0, .8);
    --gin-icon-color: rgba(0, 0, 0, .8);
    --gin-color-focus: rgba(0, 0, 0, .8);
    --gin-border-color: rgba(0, 0, 0, .8);
    --gin-border-color-secondary: rgba(0, 0, 0, .6);
    --gin-border-color-layer: rgba(0, 0, 0, .6);
    --gin-border-color-layer2: rgba(0, 0, 0, .8);
    --gin-border-color-table: rgba(0, 0, 0, .8);
    --gin-border-color-table-header: rgba(0, 0, 0, .8);
    --gin-border-color-form-element: rgba(0, 0, 0, .8);
  }
  
  .gin--dark-mode .gin--high-contrast-mode {
    --gin-bg-app: #000;
    --gin-color-text: rgba(255, 255, 255, .8);
    --gin-color-text-light: rgba(255, 255, 255, .8);
    --gin-icon-color: rgba(255, 255, 255, .8);
    --gin-color-focus: rgba(255, 255, 255, .8);
    --gin-border-color: rgba(255, 255, 255, .8);
    --gin-border-color-secondary: rgba(255, 255, 255, .6);
    --gin-border-color-layer: rgba(255, 255, 255, .6);
    --gin-border-color-layer2: rgba(255, 255, 255, .8);
    --gin-border-color-table: rgba(255, 255, 255, .8);
    --gin-border-color-table-header: rgba(255, 255, 255, .8);
    --gin-border-color-form-element: rgba(255, 255, 255, .8);
  }
  
  [data-gin-focus=green] {
    --gin-color-focus: rgba(8, 163, 144, .6);
  }
  
  [data-gin-focus=claro] {
    --gin-color-focus: rgba(38, 167, 105, .6);
  }
  
  [data-gin-focus=orange] {
    --gin-color-focus: rgba(236, 124, 87, .6);
  }
  
  [data-gin-focus=dark] {
    --gin-color-focus: var(--gin-color-focus-neutral-rgb);
  }
  
  [data-gin-focus=accent] {
    --gin-color-focus: rgba(var(--gin-color-primary-rgb), .6);
  }