@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700;900&display=swap");
:root {
  --colour-success-1000: #00452E;
  --colour-success-900: #006443;
  --colour-success-800: #008357;
  --colour-success-700: #00A16C;
  --colour-success-600: #00C080;
  --colour-success-500: #29CA94;
  --colour-success-400: #52D4A9;
  --colour-success-300: #7ADEBD;
  --colour-success-200: #A3E8D1;
  --colour-success-100: #CCF2E6;
  --colour-success-75: #D6F5EB;
  --colour-success-50: #E0F7F0;
  --colour-success-25: #EBFAF5;
  --colour-success-10: #F5FCFA;
  --colour-attention-1000: #5C4517;
  --colour-attention-900: #856421;
  --colour-attention-800: #AD832C;
  --colour-attention-700: #D6A136;
  --colour-attention-600: #FFC040;
  --colour-attention-500: #FFCA5F;
  --colour-attention-400: #FFD47D;
  --colour-attention-300: #FFDE9C;
  --colour-attention-200: #FFE8BA;
  --colour-attention-100: #FFF2D9;
  --colour-attention-75: #FFF5E0;
  --colour-attention-50: #FFF7E8;
  --colour-attention-25: #FFFAF0;
  --colour-attention-10: #FFFCF7;
  --colour-warning-1000: #5C2E17;
  --colour-warning-900: #854321;
  --colour-warning-800: #AD572C;
  --colour-warning-700: #D66C36;
  --colour-warning-600: #FF8040;
  --colour-warning-500: #FF945F;
  --colour-warning-400: #FFA97D;
  --colour-warning-300: #FFBD9C;
  --colour-warning-200: #FFD1BA;
  --colour-warning-100: #FFE6D9;
  --colour-warning-75: #FFEBE0;
  --colour-warning-50: #FFF0EB;
  --colour-warning-25: #FFF5F0;
  --colour-warning-10: #FFFAF7;
  --colour-danger-1000: #5C1723;
  --colour-danger-900: #852132;
  --colour-danger-800: #AD2C41;
  --colour-danger-700: #D63651;
  --colour-danger-600: #FF4060;
  --colour-danger-500: #FF5F79;
  --colour-danger-400: #FF7D93;
  --colour-danger-300: #FF9CAC;
  --colour-danger-200: #FFBAC6;
  --colour-danger-100: #FFD9DF;
  --colour-danger-75: #FFE0E6;
  --colour-danger-50: #FFE8EC;
  --colour-danger-25: #FFF0F2;
  --colour-danger-10: #FFF7F9;
  --colour-dolphin-1000: #173E5C;
  --colour-dolphin-900: #214385;
  --colour-dolphin-800: #2C57AD;
  --colour-dolphin-700: #366CD6;
  --colour-dolphin-600: #4080FF;
  --colour-dolphin-500: #5F94FF;
  --colour-dolphin-400: #7DA9FF;
  --colour-dolphin-300: #9CBDFF;
  --colour-dolphin-200: #BAD1FF;
  --colour-dolphin-100: #D9E6FF;
  --colour-dolphin-75: #E0EBFF;
  --colour-dolphin-50: #E8F0FF;
  --colour-dolphin-25: #F0F5FF;
  --colour-dolphin-10: #F7FAFF;
  --colour-feedback-1000: #23175C;
  --colour-feedback-900: #322185;
  --colour-feedback-800: #412CAD;
  --colour-feedback-700: #5136D6;
  --colour-feedback-600: #6040FF;
  --colour-feedback-500: #795FFF;
  --colour-feedback-400: #937DFF;
  --colour-feedback-300: #AC9CFF;
  --colour-feedback-200: #C6BAFF;
  --colour-feedback-100: #DFD9FF;
  --colour-feedback-75: #E6E0FF;
  --colour-feedback-50: #ECE8FF;
  --colour-feedback-25: #F2F0FF;
  --colour-feedback-10: #F9F7FF;
  --colour-survey-1000: #113F4B;
  --colour-survey-900: #195C6C;
  --colour-survey-800: #21788D;
  --colour-survey-700: #2894AF;
  --colour-survey-600: #30B0D0;
  --colour-survey-500: #51BDD8;
  --colour-survey-400: #72C9DF;
  --colour-survey-300: #93D6E7;
  --colour-survey-200: #B4E3EE;
  --colour-survey-100: #D6EFF6;
  --colour-survey-75: #DEF2F7;
  --colour-survey-50: #E6F6F9;
  --colour-survey-25: #EEF9FB;
  --colour-survey-10: #F7FCFD;
  --colour-primary-1000: var(--colour-feedback-1000);
  --colour-primary-900: var(--colour-feedback-900);
  --colour-primary-800: var(--colour-feedback-800);
  --colour-primary-700: var(--colour-feedback-700);
  --colour-primary-600: var(--colour-feedback-600);
  --colour-primary-500: var(--colour-feedback-500);
  --colour-primary-400: var(--colour-feedback-400);
  --colour-primary-300: var(--colour-feedback-300);
  --colour-primary-200: var(--colour-feedback-200);
  --colour-primary-100: var(--colour-feedback-100);
  --colour-primary-75: var(--colour-feedback-75);
  --colour-primary-50: var(--colour-feedback-50);
  --colour-primary-25: var(--colour-feedback-25);
  --colour-primary-10: var(--colour-feedback-10);
  --colour-primary: var(--colour-primary-600);
  --colour-neutral-1000: #232E3A;
  --colour-neutral-900: #324353;
  --colour-neutral-800: #41576D;
  --colour-neutral-700: #516C86;
  --colour-neutral-600: #6080A0;
  --colour-neutral-500: #7994AF;
  --colour-neutral-400: #93A9BE;
  --colour-neutral-300: #ACBDCE;
  --colour-neutral-200: #C6D1DD;
  --colour-neutral-100: #DFE6EC;
  --colour-neutral-75: #E6EBF0;
  --colour-neutral-50: #ECF0F4;
  --colour-neutral-25: #F2F5F7;
  --colour-neutral-10: #F9FAFB;
  --colour-code-bg: #324353;
  --colour-neutral-100-dark-invert: var(--colour-neutral-100);
  --colour-neutral-200-dark-invert: var(--colour-neutral-200);
  --colour-neutral-300-dark-invert: var(--colour-neutral-300);
  --colour-neutral-400-dark-invert: var(--colour-neutral-400);
  --colour-neutral-500-dark-invert: var(--colour-neutral-500);
  --colour-neutral-600-dark-invert: var(--colour-neutral-600);
  --colour-neutral-700-dark-invert: var(--colour-neutral-700);
  --colour-neutral-800-dark-invert: var(--colour-neutral-800);
  --colour-neutral-900-dark-invert: var(--colour-neutral-900);
  --colour-neutral-1000-dark-invert: var(--colour-neutral-1000);
  --colour-primary-100-dark-invert: var(--colour-primary-100);
  --colour-primary-200-dark-invert: var(--colour-primary-200);
  --colour-primary-300-dark-invert: var(--colour-primary-300);
  --colour-primary-400-dark-invert: var(--colour-primary-400);
  --colour-primary-500-dark-invert: var(--colour-primary-500);
  --colour-primary-600-dark-invert: var(--colour-primary-600);
  --colour-primary-700-dark-invert: var(--colour-primary-700);
  --colour-primary-800-dark-invert: var(--colour-primary-800);
  --colour-primary-900-dark-invert: var(--colour-primary-900);
  --colour-primary-1000-dark-invert: var(--colour-primary-1000);
  --colour-primary-dark-invert: var(--colour-primary);
  --colour-danger-dark-invert: var(--colour-danger);
  --colour-primary-dark-invert-neutral-100: var(--colour-primary);
  --colour-primary-dark-invert-neutral-200: var(--colour-primary);
  --colour-primary-dark-invert-neutral-300: var(--colour-primary);
  --colour-primary-dark-invert-neutral-400: var(--colour-primary);
  --colour-primary-dark-invert-neutral-500: var(--colour-primary);
  --colour-primary-dark-invert-neutral-600: var(--colour-primary);
  --colour-primary-dark-invert-neutral-700: var(--colour-primary);
  --colour-primary-dark-invert-neutral-800: var(--colour-primary);
  --colour-primary-dark-invert-neutral-900: var(--colour-primary);
  --colour-primary-dark-invert-neutral-1000: var(--colour-primary);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #F0F3F9;
  --colour-system-line: var(--colour-neutral-75);
  --colour-system-surface: #FFFFFF;
  --colour-system-surface-rgb: 255, 255, 255;
  --colour-system-surface-1: #FFFFFF;
  --colour-system-surface-2: var(--colour-neutral-10);
  --colour-system-surface-3: var(--colour-neutral-25);
  --colour-system-text-muted: var(--colour-neutral-400);
  --colour-system-text-inverse: #FFFFFF;
  --colour-system-overlay: rgba(96, 128, 160, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.2);
  --colour-system-box-bg-dark-only: transparent;
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-75);
  --colour-menu-active-bg-hover: var(--colour-neutral-50);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-4: 0 0 16px var(--colour-neutral-75);
  --shadow-sidebar: -4px 0 16px var(--colour-neutral-100);
  --shadow-box-solid-hover-light-only: 0px 4px 10px var(--colour-neutral-75);
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(172, 189, 206)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-1000);
  --colour-internal-border: var(--colour-neutral-1000);
  --colour-internal-text: var(--colour-system-text-inverse);
  --colour-internal-launcher: var(--colour-neutral-300);
  --colour-status-success-bg: var(--colour-success-50);
  --colour-status-success-bg-hover: var(--colour-success-100);
  --colour-status-attention-bg: var(--colour-attention-50);
  --colour-status-attention-bg-hover: var(--colour-attention-100);
  --colour-portal-pinned-bg: var(--colour-attention-10);
  --colour-portal-voted-bg: var(--colour-neutral-25);
  --colour-mask-dark: #000000;
  --colour-badge-primary-invert-bg: var(--colour-primary-25);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-25);
  --colour-badge-warning-invert-bg: var(--colour-warning-25);
  --colour-badge-danger-invert-bg: var(--colour-danger-25);
  --colour-badge-primary-invert-text: var(--colour-primary-600);
  --colour-badge-secondary-invert-text: var(--colour-neutral-600);
  --colour-badge-success-invert-text: var(--colour-success-600);
  --colour-badge-warning-invert-text: var(--colour-warning-600);
  --colour-badge-danger-invert-text: var(--colour-danger-600);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-50);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-system-surface);
  --colour-banner-warning-bg: var(--colour-warning-25);
  --colour-banner-warning-border: var(--colour-warning-50);
  --colour-banner-danger-bg: var(--colour-danger-25);
  --colour-banner-danger-border: var(--colour-danger-50);
  --colour-banner-success-bg: var(--colour-success-25);
  --colour-banner-success-border: var(--colour-success-50);
  --colour-banner-info-bg: var(--colour-dolphin-25);
  --colour-banner-info-border: var(--colour-dolphin-50);
  --colour-notification-attention-bg: var(--colour-system-surface);
  --colour-notification-attention-border: var(--colour-attention-600);
  --gradient-shiny-bg: linear-gradient(90deg, #FFF0F2, #F2F0FF);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-notification-attention-highlight: var(--colour-attention-600);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-system-surface);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-primary-600);
  --colour-input-border-focus: var(--colour-primary-200);
  --colour-checkbox-text: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-600);
  --colour-checkbox-bg-hover: var(--colour-primary-700);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-1000);
  --colour-button-secondary-bg-hover: var(--colour-neutral-900);
  --colour-button-secondary-bg-active: var(--colour-neutral-1000);
  --colour-button-secondary-text: var(--colour-system-text-inverse);
  --colour-button-tertiary-bg: var(--colour-system-surface);
  --colour-button-tertiary-border-hover: var(--colour-primary-600);
  --colour-button-bg-disabled: var(--colour-neutral-50);
  --colour-button-text-disabled: var(--colour-neutral-400);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-300) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-system-text);
  --colour-widget-nav-text-active: var(--widget-button-bg);
  --colour-widget-footer-shadow: 0 0 8px var(--colour-neutral-50);
  --colour-widget-preview-nav-text-active: var(--widget-preview-button-bg);
  --colour-widget-preview-nav-gradient: linear-gradient(180deg, var(--colour-system-surface) 0%, var(--colour-neutral-10) 60%, var(--colour-neutral-50) 100%);
  --colour-code-text: #FFFFFF;
  --colour-neutral: var(--colour-neutral-600);
  --colour-success: var(--colour-success-600);
  --colour-danger: var(--colour-danger-600);
  --colour-attention: var(--colour-attention-600);
  --colour-warning: var(--colour-warning-600);
}

:root[data-theme=dolphin] {
  --colour-primary-1000: var(--colour-dolphin-1000);
  --colour-primary-900: var(--colour-dolphin-900);
  --colour-primary-800: var(--colour-dolphin-800);
  --colour-primary-700: var(--colour-dolphin-700);
  --colour-primary-600: var(--colour-dolphin-600);
  --colour-primary-500: var(--colour-dolphin-500);
  --colour-primary-400: var(--colour-dolphin-400);
  --colour-primary-300: var(--colour-dolphin-300);
  --colour-primary-200: var(--colour-dolphin-200);
  --colour-primary-100: var(--colour-dolphin-100);
  --colour-primary-75: var(--colour-dolphin-75);
  --colour-primary-50: var(--colour-dolphin-50);
  --colour-primary-25: var(--colour-dolphin-25);
  --colour-primary-10: var(--colour-dolphin-10);
}

:root[data-theme=survey] {
  --colour-primary-1000: var(--colour-survey-1000);
  --colour-primary-900: var(--colour-survey-900);
  --colour-primary-800: var(--colour-survey-800);
  --colour-primary-700: var(--colour-survey-700);
  --colour-primary-600: var(--colour-survey-600);
  --colour-primary-500: var(--colour-survey-500);
  --colour-primary-400: var(--colour-survey-400);
  --colour-primary-300: var(--colour-survey-300);
  --colour-primary-200: var(--colour-survey-200);
  --colour-primary-100: var(--colour-survey-100);
  --colour-primary-75: var(--colour-survey-75);
  --colour-primary-50: var(--colour-survey-50);
  --colour-primary-25: var(--colour-survey-25);
  --colour-primary-10: var(--colour-survey-10);
}

/* Colour */
/* Font */
/* Layout */
/* Box */
/* box-shadow */
/* Button */
/* Typography */
/* Form */
/* Gradient */
/* Widget */
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--colour-neutral-100) transparent;
}
*:hover, button.danger.active, button.info.active, button.success.active {
  scrollbar-color: var(--colour-neutral-200) transparent;
}
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--colour-neutral-100);
}
*:hover::-webkit-scrollbar-thumb, button.danger.active::-webkit-scrollbar-thumb, button.info.active::-webkit-scrollbar-thumb, button.success.active::-webkit-scrollbar-thumb {
  background: var(--colour-neutral-200);
}

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

.touch *::-webkit-scrollbar {
  display: none;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: "Inter", sans-serif;
  background-color: var(--colour-system-body);
  color: var(--colour-system-text);
  transition: background-color 0.1s;
}
body.dark {
  background-color: var(--colour-system-body);
  color: var(--colour-system-text);
}
body.modal-open {
  overflow: hidden;
}
body.ui-dragging {
  overflow: hidden;
}
body[page=portal] {
  background-color: var(--colour-system-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) {
    color-scheme: dark;
    --colour-primary: var(--colour-primary-400);
    --colour-neutral-1000: #F3F6FA;
    --colour-neutral-900: #E3E9F0;
    --colour-neutral-800: #D3DCE6;
    --colour-neutral-700: #C3CEDB;
    --colour-neutral-600: #AFC0D1;
    --colour-neutral-500: #9BAEC1;
    --colour-neutral-400: #879CAF;
    --colour-neutral-300: #6E849A;
    --colour-neutral-200: #556A80;
    --colour-neutral-100: #3F5266;
    --colour-neutral-75: #344457;
    --colour-neutral-50: #2A384A;
    --colour-neutral-25: #202C3B;
    --colour-neutral-10: #161F2B;
    --colour-code-bg: #202C3B;
    --colour-neutral-100-dark-invert: var(--colour-system-text);
    --colour-neutral-200-dark-invert: var(--colour-system-text);
    --colour-neutral-300-dark-invert: var(--colour-system-text);
    --colour-neutral-400-dark-invert: var(--colour-system-text);
    --colour-neutral-500-dark-invert: var(--colour-system-text);
    --colour-neutral-600-dark-invert: var(--colour-system-text);
    --colour-neutral-700-dark-invert: var(--colour-system-text);
    --colour-neutral-800-dark-invert: var(--colour-system-text);
    --colour-neutral-900-dark-invert: var(--colour-system-text);
    --colour-neutral-1000-dark-invert: var(--colour-system-text);
    --colour-primary-100-dark-invert: var(--colour-system-text);
    --colour-primary-200-dark-invert: var(--colour-system-text);
    --colour-primary-300-dark-invert: var(--colour-system-text);
    --colour-primary-400-dark-invert: var(--colour-system-text);
    --colour-primary-500-dark-invert: var(--colour-system-text);
    --colour-primary-600-dark-invert: var(--colour-system-text);
    --colour-primary-700-dark-invert: var(--colour-system-text);
    --colour-primary-800-dark-invert: var(--colour-system-text);
    --colour-primary-900-dark-invert: var(--colour-system-text);
    --colour-primary-1000-dark-invert: var(--colour-system-text);
    --colour-primary-dark-invert: var(--colour-system-text);
    --colour-danger-dark-invert: var(--colour-system-text);
    --colour-primary-dark-invert-neutral-100: var(--colour-neutral-100);
    --colour-primary-dark-invert-neutral-200: var(--colour-neutral-200);
    --colour-primary-dark-invert-neutral-300: var(--colour-neutral-300);
    --colour-primary-dark-invert-neutral-400: var(--colour-neutral-400);
    --colour-primary-dark-invert-neutral-500: var(--colour-neutral-500);
    --colour-primary-dark-invert-neutral-600: var(--colour-neutral-600);
    --colour-primary-dark-invert-neutral-700: var(--colour-neutral-700);
    --colour-primary-dark-invert-neutral-800: var(--colour-neutral-800);
    --colour-primary-dark-invert-neutral-900: var(--colour-neutral-900);
    --colour-primary-dark-invert-neutral-1000: var(--colour-neutral-1000);
    --colour-system-text: var(--colour-neutral-1000);
    --colour-system-text-placeholder: var(--colour-neutral-400);
    --colour-system-body: #0E1116;
    --colour-system-line: var(--colour-neutral-25);
    --colour-system-surface: #151B22;
    --colour-system-surface-rgb: 21, 27, 34;
    --colour-system-surface-1: var(--colour-neutral-10);
    --colour-system-surface-2: #1C2330;
    --colour-system-surface-3: #232C3B;
    --colour-system-text-muted: var(--colour-neutral-500);
    --colour-system-text-inverse: #0E1116;
    --colour-system-overlay: rgba(0, 0, 0, 0.7);
    --colour-system-shadow-soft: rgba(0, 0, 0, 0.4);
    --colour-system-box-bg-dark-only: var(--colour-neutral-10);
    --colour-on-accent: #FFFFFF;
    --colour-menu-active-bg: var(--colour-neutral-10);
    --colour-menu-active-bg-hover: var(--colour-neutral-25);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.7);
    --shadow-4: 0 0 0 1px var(--colour-neutral-25);
    --shadow-sidebar: -1px 0 0 0 var(--colour-neutral-25);
    --shadow-box-solid-hover-light-only: none;
    --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(135, 156, 175)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
    --colour-internal-surface: var(--colour-neutral-100);
    --colour-internal-border: var(--colour-neutral-75);
    --colour-internal-text: var(--colour-system-text);
    --colour-internal-launcher: var(--colour-neutral-400);
    --colour-status-success-bg: var(--colour-success-900);
    --colour-status-success-bg-hover: var(--colour-success-800);
    --colour-status-attention-bg: var(--colour-attention-900);
    --colour-status-attention-bg-hover: var(--colour-attention-800);
    --colour-portal-pinned-bg: var(--colour-system-surface-3);
    --colour-portal-voted-bg: var(--colour-neutral-10);
    --colour-mask-dark: var(--colour-system-body);
    --colour-badge-primary-invert-bg: var(--colour-primary-800);
    --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
    --colour-badge-success-invert-bg: var(--colour-success-800);
    --colour-badge-warning-invert-bg: var(--colour-warning-800);
    --colour-badge-danger-invert-bg: var(--colour-danger-800);
    --colour-badge-primary-invert-text: var(--colour-system-text);
    --colour-badge-secondary-invert-text: var(--colour-system-text);
    --colour-badge-success-invert-text: var(--colour-system-text);
    --colour-badge-warning-invert-text: var(--colour-system-text);
    --colour-badge-danger-invert-text: var(--colour-system-text);
    --colour-badge-group-tertiary-bg: var(--colour-neutral-10);
    --colour-badge-group-tertiary-highlight-bg: var(--colour-neutral-25);
    --colour-banner-warning-bg: var(--colour-warning-800);
    --colour-banner-warning-border: var(--colour-warning-700);
    --colour-banner-danger-bg: var(--colour-danger-800);
    --colour-banner-danger-border: var(--colour-danger-700);
    --colour-banner-success-bg: var(--colour-success-800);
    --colour-banner-success-border: var(--colour-success-700);
    --colour-banner-info-bg: var(--colour-dolphin-800);
    --colour-banner-info-border: var(--colour-dolphin-700);
    --colour-notification-attention-bg: var(--colour-neutral-25);
    --colour-notification-attention-border: var(--colour-neutral-100);
    --colour-notification-attention-highlight: var(--colour-neutral-100);
    --gradient-shiny-bg: linear-gradient(90deg, #E8D8DB, #DBD8E8);
    --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
    --colour-tooltip-bg: var(--colour-neutral-1000);
    --colour-tooltip-text: var(--colour-system-text-inverse);
    --colour-input-bg: var(--colour-neutral-10);
    --colour-input-bg-disabled: var(--colour-neutral-100);
    --colour-input-text-disabled: var(--colour-neutral-400);
    --colour-input-border: var(--colour-neutral-100);
    --colour-input-border-hover: var(--colour-neutral-400);
    --colour-input-border-focus: transparent;
    --colour-checkbox-color: #FFFFFF;
    --colour-checkbox-bg: var(--colour-primary-800);
    --colour-checkbox-bg-hover: var(--colour-primary-900);
    --colour-button-primary-text: #FFFFFF;
    --colour-button-secondary-bg: var(--colour-neutral-100);
    --colour-button-secondary-bg-hover: var(--colour-neutral-50);
    --colour-button-secondary-bg-active: var(--colour-neutral-200);
    --colour-button-secondary-text: var(--colour-system-text);
    --colour-button-tertiary-bg: var(--colour-neutral-10);
    --colour-button-tertiary-border-hover: var(--colour-neutral-600);
    --colour-button-bg-disabled: var(--colour-neutral-10);
    --colour-button-text-disabled: var(--colour-neutral-100);
    --colour-loader-placeholder-bg: linear-gradient(to right, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 54%) 50% 50%;
    --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-100) 0.5px, var(--colour-system-surface) 0.5px);
    --colour-widget-nav-text: var(--colour-neutral-700);
    --colour-widget-nav-text-active: var(--colour-on-accent);
    --colour-widget-footer-shadow: none;
    --colour-widget-preview-nav-text-active: var(--colour-on-accent);
    --colour-widget-preview-nav-gradient: none;
  }
}
:root[data-colour-scheme=light] {
  color-scheme: light;
  --colour-primary: var(--colour-primary-600);
  --colour-neutral-1000: #232E3A;
  --colour-neutral-900: #324353;
  --colour-neutral-800: #41576D;
  --colour-neutral-700: #516C86;
  --colour-neutral-600: #6080A0;
  --colour-neutral-500: #7994AF;
  --colour-neutral-400: #93A9BE;
  --colour-neutral-300: #ACBDCE;
  --colour-neutral-200: #C6D1DD;
  --colour-neutral-100: #DFE6EC;
  --colour-neutral-75: #E6EBF0;
  --colour-neutral-50: #ECF0F4;
  --colour-neutral-25: #F2F5F7;
  --colour-neutral-10: #F9FAFB;
  --colour-code-bg: #324353;
  --colour-neutral-100-dark-invert: var(--colour-neutral-100);
  --colour-neutral-200-dark-invert: var(--colour-neutral-200);
  --colour-neutral-300-dark-invert: var(--colour-neutral-300);
  --colour-neutral-400-dark-invert: var(--colour-neutral-400);
  --colour-neutral-500-dark-invert: var(--colour-neutral-500);
  --colour-neutral-600-dark-invert: var(--colour-neutral-600);
  --colour-neutral-700-dark-invert: var(--colour-neutral-700);
  --colour-neutral-800-dark-invert: var(--colour-neutral-800);
  --colour-neutral-900-dark-invert: var(--colour-neutral-900);
  --colour-neutral-1000-dark-invert: var(--colour-neutral-1000);
  --colour-primary-100-dark-invert: var(--colour-primary-100);
  --colour-primary-200-dark-invert: var(--colour-primary-200);
  --colour-primary-300-dark-invert: var(--colour-primary-300);
  --colour-primary-400-dark-invert: var(--colour-primary-400);
  --colour-primary-500-dark-invert: var(--colour-primary-500);
  --colour-primary-600-dark-invert: var(--colour-primary-600);
  --colour-primary-700-dark-invert: var(--colour-primary-700);
  --colour-primary-800-dark-invert: var(--colour-primary-800);
  --colour-primary-900-dark-invert: var(--colour-primary-900);
  --colour-primary-1000-dark-invert: var(--colour-primary-1000);
  --colour-primary-dark-invert: var(--colour-primary);
  --colour-danger-dark-invert: var(--colour-danger);
  --colour-primary-dark-invert-neutral-100: var(--colour-primary);
  --colour-primary-dark-invert-neutral-200: var(--colour-primary);
  --colour-primary-dark-invert-neutral-300: var(--colour-primary);
  --colour-primary-dark-invert-neutral-400: var(--colour-primary);
  --colour-primary-dark-invert-neutral-500: var(--colour-primary);
  --colour-primary-dark-invert-neutral-600: var(--colour-primary);
  --colour-primary-dark-invert-neutral-700: var(--colour-primary);
  --colour-primary-dark-invert-neutral-800: var(--colour-primary);
  --colour-primary-dark-invert-neutral-900: var(--colour-primary);
  --colour-primary-dark-invert-neutral-1000: var(--colour-primary);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #F0F3F9;
  --colour-system-line: var(--colour-neutral-75);
  --colour-system-surface: #FFFFFF;
  --colour-system-surface-rgb: 255, 255, 255;
  --colour-system-surface-1: #FFFFFF;
  --colour-system-surface-2: var(--colour-neutral-10);
  --colour-system-surface-3: var(--colour-neutral-25);
  --colour-system-text-muted: var(--colour-neutral-400);
  --colour-system-text-inverse: #FFFFFF;
  --colour-system-overlay: rgba(96, 128, 160, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.2);
  --colour-system-box-bg-dark-only: transparent;
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-75);
  --colour-menu-active-bg-hover: var(--colour-neutral-50);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-4: 0 0 16px var(--colour-neutral-75);
  --shadow-sidebar: -4px 0 16px var(--colour-neutral-100);
  --shadow-box-solid-hover-light-only: 0px 4px 10px var(--colour-neutral-75);
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(172, 189, 206)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-1000);
  --colour-internal-border: var(--colour-neutral-1000);
  --colour-internal-text: var(--colour-system-text-inverse);
  --colour-internal-launcher: var(--colour-neutral-300);
  --colour-status-success-bg: var(--colour-success-50);
  --colour-status-success-bg-hover: var(--colour-success-100);
  --colour-status-attention-bg: var(--colour-attention-50);
  --colour-status-attention-bg-hover: var(--colour-attention-100);
  --colour-portal-pinned-bg: var(--colour-attention-10);
  --colour-portal-voted-bg: var(--colour-neutral-25);
  --colour-mask-dark: #000000;
  --colour-badge-primary-invert-bg: var(--colour-primary-25);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-25);
  --colour-badge-warning-invert-bg: var(--colour-warning-25);
  --colour-badge-danger-invert-bg: var(--colour-danger-25);
  --colour-badge-primary-invert-text: var(--colour-primary-600);
  --colour-badge-secondary-invert-text: var(--colour-neutral-600);
  --colour-badge-success-invert-text: var(--colour-success-600);
  --colour-badge-warning-invert-text: var(--colour-warning-600);
  --colour-badge-danger-invert-text: var(--colour-danger-600);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-50);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-system-surface);
  --colour-banner-warning-bg: var(--colour-warning-25);
  --colour-banner-warning-border: var(--colour-warning-50);
  --colour-banner-danger-bg: var(--colour-danger-25);
  --colour-banner-danger-border: var(--colour-danger-50);
  --colour-banner-success-bg: var(--colour-success-25);
  --colour-banner-success-border: var(--colour-success-50);
  --colour-banner-info-bg: var(--colour-dolphin-25);
  --colour-banner-info-border: var(--colour-dolphin-50);
  --colour-notification-attention-bg: var(--colour-system-surface);
  --colour-notification-attention-border: var(--colour-attention-600);
  --gradient-shiny-bg: linear-gradient(90deg, #FFF0F2, #F2F0FF);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-notification-attention-highlight: var(--colour-attention-600);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-system-surface);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-primary-600);
  --colour-input-border-focus: var(--colour-primary-200);
  --colour-checkbox-text: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-600);
  --colour-checkbox-bg-hover: var(--colour-primary-700);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-1000);
  --colour-button-secondary-bg-hover: var(--colour-neutral-900);
  --colour-button-secondary-bg-active: var(--colour-neutral-1000);
  --colour-button-secondary-text: var(--colour-system-text-inverse);
  --colour-button-tertiary-bg: var(--colour-system-surface);
  --colour-button-tertiary-border-hover: var(--colour-primary-600);
  --colour-button-bg-disabled: var(--colour-neutral-50);
  --colour-button-text-disabled: var(--colour-neutral-400);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-300) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-system-text);
  --colour-widget-nav-text-active: var(--widget-button-bg);
  --colour-widget-footer-shadow: 0 0 8px var(--colour-neutral-50);
  --colour-widget-preview-nav-text-active: var(--widget-preview-button-bg);
  --colour-widget-preview-nav-gradient: linear-gradient(180deg, var(--colour-system-surface) 0%, var(--colour-neutral-10) 60%, var(--colour-neutral-50) 100%);
}

:root[data-colour-scheme=dark] {
  color-scheme: dark;
  --colour-primary: var(--colour-primary-400);
  --colour-neutral-1000: #F3F6FA;
  --colour-neutral-900: #E3E9F0;
  --colour-neutral-800: #D3DCE6;
  --colour-neutral-700: #C3CEDB;
  --colour-neutral-600: #AFC0D1;
  --colour-neutral-500: #9BAEC1;
  --colour-neutral-400: #879CAF;
  --colour-neutral-300: #6E849A;
  --colour-neutral-200: #556A80;
  --colour-neutral-100: #3F5266;
  --colour-neutral-75: #344457;
  --colour-neutral-50: #2A384A;
  --colour-neutral-25: #202C3B;
  --colour-neutral-10: #161F2B;
  --colour-code-bg: #202C3B;
  --colour-neutral-100-dark-invert: var(--colour-system-text);
  --colour-neutral-200-dark-invert: var(--colour-system-text);
  --colour-neutral-300-dark-invert: var(--colour-system-text);
  --colour-neutral-400-dark-invert: var(--colour-system-text);
  --colour-neutral-500-dark-invert: var(--colour-system-text);
  --colour-neutral-600-dark-invert: var(--colour-system-text);
  --colour-neutral-700-dark-invert: var(--colour-system-text);
  --colour-neutral-800-dark-invert: var(--colour-system-text);
  --colour-neutral-900-dark-invert: var(--colour-system-text);
  --colour-neutral-1000-dark-invert: var(--colour-system-text);
  --colour-primary-100-dark-invert: var(--colour-system-text);
  --colour-primary-200-dark-invert: var(--colour-system-text);
  --colour-primary-300-dark-invert: var(--colour-system-text);
  --colour-primary-400-dark-invert: var(--colour-system-text);
  --colour-primary-500-dark-invert: var(--colour-system-text);
  --colour-primary-600-dark-invert: var(--colour-system-text);
  --colour-primary-700-dark-invert: var(--colour-system-text);
  --colour-primary-800-dark-invert: var(--colour-system-text);
  --colour-primary-900-dark-invert: var(--colour-system-text);
  --colour-primary-1000-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert: var(--colour-system-text);
  --colour-danger-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert-neutral-100: var(--colour-neutral-100);
  --colour-primary-dark-invert-neutral-200: var(--colour-neutral-200);
  --colour-primary-dark-invert-neutral-300: var(--colour-neutral-300);
  --colour-primary-dark-invert-neutral-400: var(--colour-neutral-400);
  --colour-primary-dark-invert-neutral-500: var(--colour-neutral-500);
  --colour-primary-dark-invert-neutral-600: var(--colour-neutral-600);
  --colour-primary-dark-invert-neutral-700: var(--colour-neutral-700);
  --colour-primary-dark-invert-neutral-800: var(--colour-neutral-800);
  --colour-primary-dark-invert-neutral-900: var(--colour-neutral-900);
  --colour-primary-dark-invert-neutral-1000: var(--colour-neutral-1000);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #0E1116;
  --colour-system-line: var(--colour-neutral-25);
  --colour-system-surface: #151B22;
  --colour-system-surface-rgb: 21, 27, 34;
  --colour-system-surface-1: var(--colour-neutral-10);
  --colour-system-surface-2: #1C2330;
  --colour-system-surface-3: #232C3B;
  --colour-system-text-muted: var(--colour-neutral-500);
  --colour-system-text-inverse: #0E1116;
  --colour-system-overlay: rgba(0, 0, 0, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.4);
  --colour-system-box-bg-dark-only: var(--colour-neutral-10);
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-10);
  --colour-menu-active-bg-hover: var(--colour-neutral-25);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.7);
  --shadow-4: 0 0 0 1px var(--colour-neutral-25);
  --shadow-sidebar: -1px 0 0 0 var(--colour-neutral-25);
  --shadow-box-solid-hover-light-only: none;
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(135, 156, 175)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-100);
  --colour-internal-border: var(--colour-neutral-75);
  --colour-internal-text: var(--colour-system-text);
  --colour-internal-launcher: var(--colour-neutral-400);
  --colour-status-success-bg: var(--colour-success-900);
  --colour-status-success-bg-hover: var(--colour-success-800);
  --colour-status-attention-bg: var(--colour-attention-900);
  --colour-status-attention-bg-hover: var(--colour-attention-800);
  --colour-portal-pinned-bg: var(--colour-system-surface-3);
  --colour-portal-voted-bg: var(--colour-neutral-10);
  --colour-mask-dark: var(--colour-system-body);
  --colour-badge-primary-invert-bg: var(--colour-primary-800);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-800);
  --colour-badge-warning-invert-bg: var(--colour-warning-800);
  --colour-badge-danger-invert-bg: var(--colour-danger-800);
  --colour-badge-primary-invert-text: var(--colour-system-text);
  --colour-badge-secondary-invert-text: var(--colour-system-text);
  --colour-badge-success-invert-text: var(--colour-system-text);
  --colour-badge-warning-invert-text: var(--colour-system-text);
  --colour-badge-danger-invert-text: var(--colour-system-text);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-10);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-neutral-25);
  --colour-banner-warning-bg: var(--colour-warning-800);
  --colour-banner-warning-border: var(--colour-warning-700);
  --colour-banner-danger-bg: var(--colour-danger-800);
  --colour-banner-danger-border: var(--colour-danger-700);
  --colour-banner-success-bg: var(--colour-success-800);
  --colour-banner-success-border: var(--colour-success-700);
  --colour-banner-info-bg: var(--colour-dolphin-800);
  --colour-banner-info-border: var(--colour-dolphin-700);
  --colour-notification-attention-bg: var(--colour-neutral-25);
  --colour-notification-attention-border: var(--colour-neutral-100);
  --colour-notification-attention-highlight: var(--colour-neutral-100);
  --gradient-shiny-bg: linear-gradient(90deg, #E8D8DB, #DBD8E8);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-neutral-10);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-neutral-400);
  --colour-input-border-focus: transparent;
  --colour-checkbox-color: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-800);
  --colour-checkbox-bg-hover: var(--colour-primary-900);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-100);
  --colour-button-secondary-bg-hover: var(--colour-neutral-50);
  --colour-button-secondary-bg-active: var(--colour-neutral-200);
  --colour-button-secondary-text: var(--colour-system-text);
  --colour-button-tertiary-bg: var(--colour-neutral-10);
  --colour-button-tertiary-border-hover: var(--colour-neutral-600);
  --colour-button-bg-disabled: var(--colour-neutral-10);
  --colour-button-text-disabled: var(--colour-neutral-100);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-100) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-neutral-700);
  --colour-widget-nav-text-active: var(--colour-on-accent);
  --colour-widget-footer-shadow: none;
  --colour-widget-preview-nav-text-active: var(--colour-on-accent);
  --colour-widget-preview-nav-gradient: none;
}

body *[data-colour-scheme=light] {
  color-scheme: light;
  --colour-primary: var(--colour-primary-600);
  --colour-neutral-1000: #232E3A;
  --colour-neutral-900: #324353;
  --colour-neutral-800: #41576D;
  --colour-neutral-700: #516C86;
  --colour-neutral-600: #6080A0;
  --colour-neutral-500: #7994AF;
  --colour-neutral-400: #93A9BE;
  --colour-neutral-300: #ACBDCE;
  --colour-neutral-200: #C6D1DD;
  --colour-neutral-100: #DFE6EC;
  --colour-neutral-75: #E6EBF0;
  --colour-neutral-50: #ECF0F4;
  --colour-neutral-25: #F2F5F7;
  --colour-neutral-10: #F9FAFB;
  --colour-code-bg: #324353;
  --colour-neutral-100-dark-invert: var(--colour-neutral-100);
  --colour-neutral-200-dark-invert: var(--colour-neutral-200);
  --colour-neutral-300-dark-invert: var(--colour-neutral-300);
  --colour-neutral-400-dark-invert: var(--colour-neutral-400);
  --colour-neutral-500-dark-invert: var(--colour-neutral-500);
  --colour-neutral-600-dark-invert: var(--colour-neutral-600);
  --colour-neutral-700-dark-invert: var(--colour-neutral-700);
  --colour-neutral-800-dark-invert: var(--colour-neutral-800);
  --colour-neutral-900-dark-invert: var(--colour-neutral-900);
  --colour-neutral-1000-dark-invert: var(--colour-neutral-1000);
  --colour-primary-100-dark-invert: var(--colour-primary-100);
  --colour-primary-200-dark-invert: var(--colour-primary-200);
  --colour-primary-300-dark-invert: var(--colour-primary-300);
  --colour-primary-400-dark-invert: var(--colour-primary-400);
  --colour-primary-500-dark-invert: var(--colour-primary-500);
  --colour-primary-600-dark-invert: var(--colour-primary-600);
  --colour-primary-700-dark-invert: var(--colour-primary-700);
  --colour-primary-800-dark-invert: var(--colour-primary-800);
  --colour-primary-900-dark-invert: var(--colour-primary-900);
  --colour-primary-1000-dark-invert: var(--colour-primary-1000);
  --colour-primary-dark-invert: var(--colour-primary);
  --colour-danger-dark-invert: var(--colour-danger);
  --colour-primary-dark-invert-neutral-100: var(--colour-primary);
  --colour-primary-dark-invert-neutral-200: var(--colour-primary);
  --colour-primary-dark-invert-neutral-300: var(--colour-primary);
  --colour-primary-dark-invert-neutral-400: var(--colour-primary);
  --colour-primary-dark-invert-neutral-500: var(--colour-primary);
  --colour-primary-dark-invert-neutral-600: var(--colour-primary);
  --colour-primary-dark-invert-neutral-700: var(--colour-primary);
  --colour-primary-dark-invert-neutral-800: var(--colour-primary);
  --colour-primary-dark-invert-neutral-900: var(--colour-primary);
  --colour-primary-dark-invert-neutral-1000: var(--colour-primary);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #F0F3F9;
  --colour-system-line: var(--colour-neutral-75);
  --colour-system-surface: #FFFFFF;
  --colour-system-surface-rgb: 255, 255, 255;
  --colour-system-surface-1: #FFFFFF;
  --colour-system-surface-2: var(--colour-neutral-10);
  --colour-system-surface-3: var(--colour-neutral-25);
  --colour-system-text-muted: var(--colour-neutral-400);
  --colour-system-text-inverse: #FFFFFF;
  --colour-system-overlay: rgba(96, 128, 160, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.2);
  --colour-system-box-bg-dark-only: transparent;
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-75);
  --colour-menu-active-bg-hover: var(--colour-neutral-50);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-4: 0 0 16px var(--colour-neutral-75);
  --shadow-sidebar: -4px 0 16px var(--colour-neutral-100);
  --shadow-box-solid-hover-light-only: 0px 4px 10px var(--colour-neutral-75);
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(172, 189, 206)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-1000);
  --colour-internal-border: var(--colour-neutral-1000);
  --colour-internal-text: var(--colour-system-text-inverse);
  --colour-internal-launcher: var(--colour-neutral-300);
  --colour-status-success-bg: var(--colour-success-50);
  --colour-status-success-bg-hover: var(--colour-success-100);
  --colour-status-attention-bg: var(--colour-attention-50);
  --colour-status-attention-bg-hover: var(--colour-attention-100);
  --colour-portal-pinned-bg: var(--colour-attention-10);
  --colour-portal-voted-bg: var(--colour-neutral-25);
  --colour-mask-dark: #000000;
  --colour-badge-primary-invert-bg: var(--colour-primary-25);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-25);
  --colour-badge-warning-invert-bg: var(--colour-warning-25);
  --colour-badge-danger-invert-bg: var(--colour-danger-25);
  --colour-badge-primary-invert-text: var(--colour-primary-600);
  --colour-badge-secondary-invert-text: var(--colour-neutral-600);
  --colour-badge-success-invert-text: var(--colour-success-600);
  --colour-badge-warning-invert-text: var(--colour-warning-600);
  --colour-badge-danger-invert-text: var(--colour-danger-600);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-50);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-system-surface);
  --colour-banner-warning-bg: var(--colour-warning-25);
  --colour-banner-warning-border: var(--colour-warning-50);
  --colour-banner-danger-bg: var(--colour-danger-25);
  --colour-banner-danger-border: var(--colour-danger-50);
  --colour-banner-success-bg: var(--colour-success-25);
  --colour-banner-success-border: var(--colour-success-50);
  --colour-banner-info-bg: var(--colour-dolphin-25);
  --colour-banner-info-border: var(--colour-dolphin-50);
  --colour-notification-attention-bg: var(--colour-system-surface);
  --colour-notification-attention-border: var(--colour-attention-600);
  --gradient-shiny-bg: linear-gradient(90deg, #FFF0F2, #F2F0FF);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-notification-attention-highlight: var(--colour-attention-600);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-system-surface);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-primary-600);
  --colour-input-border-focus: var(--colour-primary-200);
  --colour-checkbox-text: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-600);
  --colour-checkbox-bg-hover: var(--colour-primary-700);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-1000);
  --colour-button-secondary-bg-hover: var(--colour-neutral-900);
  --colour-button-secondary-bg-active: var(--colour-neutral-1000);
  --colour-button-secondary-text: var(--colour-system-text-inverse);
  --colour-button-tertiary-bg: var(--colour-system-surface);
  --colour-button-tertiary-border-hover: var(--colour-primary-600);
  --colour-button-bg-disabled: var(--colour-neutral-50);
  --colour-button-text-disabled: var(--colour-neutral-400);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-300) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-system-text);
  --colour-widget-nav-text-active: var(--widget-button-bg);
  --colour-widget-footer-shadow: 0 0 8px var(--colour-neutral-50);
  --colour-widget-preview-nav-text-active: var(--widget-preview-button-bg);
  --colour-widget-preview-nav-gradient: linear-gradient(180deg, var(--colour-system-surface) 0%, var(--colour-neutral-10) 60%, var(--colour-neutral-50) 100%);
}

body *[data-colour-scheme=dark] {
  color-scheme: dark;
  --colour-primary: var(--colour-primary-400);
  --colour-neutral-1000: #F3F6FA;
  --colour-neutral-900: #E3E9F0;
  --colour-neutral-800: #D3DCE6;
  --colour-neutral-700: #C3CEDB;
  --colour-neutral-600: #AFC0D1;
  --colour-neutral-500: #9BAEC1;
  --colour-neutral-400: #879CAF;
  --colour-neutral-300: #6E849A;
  --colour-neutral-200: #556A80;
  --colour-neutral-100: #3F5266;
  --colour-neutral-75: #344457;
  --colour-neutral-50: #2A384A;
  --colour-neutral-25: #202C3B;
  --colour-neutral-10: #161F2B;
  --colour-code-bg: #202C3B;
  --colour-neutral-100-dark-invert: var(--colour-system-text);
  --colour-neutral-200-dark-invert: var(--colour-system-text);
  --colour-neutral-300-dark-invert: var(--colour-system-text);
  --colour-neutral-400-dark-invert: var(--colour-system-text);
  --colour-neutral-500-dark-invert: var(--colour-system-text);
  --colour-neutral-600-dark-invert: var(--colour-system-text);
  --colour-neutral-700-dark-invert: var(--colour-system-text);
  --colour-neutral-800-dark-invert: var(--colour-system-text);
  --colour-neutral-900-dark-invert: var(--colour-system-text);
  --colour-neutral-1000-dark-invert: var(--colour-system-text);
  --colour-primary-100-dark-invert: var(--colour-system-text);
  --colour-primary-200-dark-invert: var(--colour-system-text);
  --colour-primary-300-dark-invert: var(--colour-system-text);
  --colour-primary-400-dark-invert: var(--colour-system-text);
  --colour-primary-500-dark-invert: var(--colour-system-text);
  --colour-primary-600-dark-invert: var(--colour-system-text);
  --colour-primary-700-dark-invert: var(--colour-system-text);
  --colour-primary-800-dark-invert: var(--colour-system-text);
  --colour-primary-900-dark-invert: var(--colour-system-text);
  --colour-primary-1000-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert: var(--colour-system-text);
  --colour-danger-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert-neutral-100: var(--colour-neutral-100);
  --colour-primary-dark-invert-neutral-200: var(--colour-neutral-200);
  --colour-primary-dark-invert-neutral-300: var(--colour-neutral-300);
  --colour-primary-dark-invert-neutral-400: var(--colour-neutral-400);
  --colour-primary-dark-invert-neutral-500: var(--colour-neutral-500);
  --colour-primary-dark-invert-neutral-600: var(--colour-neutral-600);
  --colour-primary-dark-invert-neutral-700: var(--colour-neutral-700);
  --colour-primary-dark-invert-neutral-800: var(--colour-neutral-800);
  --colour-primary-dark-invert-neutral-900: var(--colour-neutral-900);
  --colour-primary-dark-invert-neutral-1000: var(--colour-neutral-1000);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #0E1116;
  --colour-system-line: var(--colour-neutral-25);
  --colour-system-surface: #151B22;
  --colour-system-surface-rgb: 21, 27, 34;
  --colour-system-surface-1: var(--colour-neutral-10);
  --colour-system-surface-2: #1C2330;
  --colour-system-surface-3: #232C3B;
  --colour-system-text-muted: var(--colour-neutral-500);
  --colour-system-text-inverse: #0E1116;
  --colour-system-overlay: rgba(0, 0, 0, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.4);
  --colour-system-box-bg-dark-only: var(--colour-neutral-10);
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-10);
  --colour-menu-active-bg-hover: var(--colour-neutral-25);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.7);
  --shadow-4: 0 0 0 1px var(--colour-neutral-25);
  --shadow-sidebar: -1px 0 0 0 var(--colour-neutral-25);
  --shadow-box-solid-hover-light-only: none;
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(135, 156, 175)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-100);
  --colour-internal-border: var(--colour-neutral-75);
  --colour-internal-text: var(--colour-system-text);
  --colour-internal-launcher: var(--colour-neutral-400);
  --colour-status-success-bg: var(--colour-success-900);
  --colour-status-success-bg-hover: var(--colour-success-800);
  --colour-status-attention-bg: var(--colour-attention-900);
  --colour-status-attention-bg-hover: var(--colour-attention-800);
  --colour-portal-pinned-bg: var(--colour-system-surface-3);
  --colour-portal-voted-bg: var(--colour-neutral-10);
  --colour-mask-dark: var(--colour-system-body);
  --colour-badge-primary-invert-bg: var(--colour-primary-800);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-800);
  --colour-badge-warning-invert-bg: var(--colour-warning-800);
  --colour-badge-danger-invert-bg: var(--colour-danger-800);
  --colour-badge-primary-invert-text: var(--colour-system-text);
  --colour-badge-secondary-invert-text: var(--colour-system-text);
  --colour-badge-success-invert-text: var(--colour-system-text);
  --colour-badge-warning-invert-text: var(--colour-system-text);
  --colour-badge-danger-invert-text: var(--colour-system-text);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-10);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-neutral-25);
  --colour-banner-warning-bg: var(--colour-warning-800);
  --colour-banner-warning-border: var(--colour-warning-700);
  --colour-banner-danger-bg: var(--colour-danger-800);
  --colour-banner-danger-border: var(--colour-danger-700);
  --colour-banner-success-bg: var(--colour-success-800);
  --colour-banner-success-border: var(--colour-success-700);
  --colour-banner-info-bg: var(--colour-dolphin-800);
  --colour-banner-info-border: var(--colour-dolphin-700);
  --colour-notification-attention-bg: var(--colour-neutral-25);
  --colour-notification-attention-border: var(--colour-neutral-100);
  --colour-notification-attention-highlight: var(--colour-neutral-100);
  --gradient-shiny-bg: linear-gradient(90deg, #E8D8DB, #DBD8E8);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-neutral-10);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-neutral-400);
  --colour-input-border-focus: transparent;
  --colour-checkbox-color: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-800);
  --colour-checkbox-bg-hover: var(--colour-primary-900);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-100);
  --colour-button-secondary-bg-hover: var(--colour-neutral-50);
  --colour-button-secondary-bg-active: var(--colour-neutral-200);
  --colour-button-secondary-text: var(--colour-system-text);
  --colour-button-tertiary-bg: var(--colour-neutral-10);
  --colour-button-tertiary-border-hover: var(--colour-neutral-600);
  --colour-button-bg-disabled: var(--colour-neutral-10);
  --colour-button-text-disabled: var(--colour-neutral-100);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-100) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-neutral-700);
  --colour-widget-nav-text-active: var(--colour-on-accent);
  --colour-widget-footer-shadow: none;
  --colour-widget-preview-nav-text-active: var(--colour-on-accent);
  --colour-widget-preview-nav-gradient: none;
}

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 128px;
  transform: translate(-50%, -50%);
  color: var(--colour-system-text-muted);
  pointer-events: none;
}
@media screen and (min-width: 1440px) {
  .menu-large-closed .page-loader {
    margin-left: 36px;
  }
}
@media screen and (max-width: 1440px) {
  .page-loader {
    margin-left: 36px;
  }
}
@media (max-width: 800px) {
  .page-loader {
    margin-left: 0;
  }
}

#app {
  position: relative;
  height: 100%;
}
[page=viewer] #app, [page=portal] #app {
  overflow: hidden;
}
.user-select-none #app {
  user-select: none;
}

#app section {
  overflow: auto;
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 256px;
  padding: 48px 48px 48px 48px;
  background-color: var(--colour-system-surface);
  transition: all 0.1s linear;
}
@media (min-width: 800px) {
  .menu-large-closed #app section {
    left: 72px;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  #app section {
    left: 72px;
  }
}
@media (max-width: 800px) {
  #app section {
    left: 0;
    padding: 16px;
  }
}
#app section.topless {
  padding-top: 0;
}
@media (max-width: 800px) {
  #app section.topless {
    padding-top: 0;
  }
}
#app section.topless .fullscroll-body {
  padding-top: 0;
}
@media (max-width: 800px) {
  #app section.topless .fullscroll-body {
    padding-top: 0;
  }
}
#app section.bottomless {
  padding-bottom: 0;
}
@media (max-width: 800px) {
  #app section.bottomless {
    padding-bottom: 0;
  }
}
#app section.bottomless .fullscroll-body {
  padding-bottom: 0;
}
@media (max-width: 800px) {
  #app section.bottomless {
    padding-bottom: 0;
  }
}
#app section.fullscroll {
  overflow: visible;
}
#app section .center-settings {
  max-width: 600px;
  margin: auto;
}
.modal-fullscreen-open #app section {
  filter: none;
}
#app section > .breadcrumb {
  margin-bottom: 24px;
  color: var(--colour-neutral);
}
#app section > .breadcrumb > a,
#app section > .breadcrumb > span {
  position: relative;
  margin-right: 24px;
  color: var(--colour-neutral);
  text-decoration: none;
}
#app section > .breadcrumb > a:after,
#app section > .breadcrumb > span:after {
  position: absolute;
  left: 100%;
  margin: 3px 0 0 8px;
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f105";
}
#app section > .breadcrumb > a:last-child:after,
#app section > .breadcrumb > span:last-child:after {
  display: none;
}
#app section main {
  position: relative;
  display: block;
  width: 1380px;
  max-width: 100%;
  margin: auto;
}
#app section main.left {
  margin-left: 0;
}
#app section main.medium {
  width: 800px;
}
#app section main.large {
  width: 1024px;
}
#app section main.xlarge {
  width: 1120px;
}
#app section main.xxlarge {
  width: 1680px;
}
#app section main.fluid {
  width: auto;
}
#app section .fullscroll-body {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px 48px 48px 48px;
}
@media (max-width: 800px) {
  #app section .fullscroll-body {
    padding: 16px;
  }
}

.aside-grid-small {
  display: grid;
  grid-template-columns: auto 280px;
  grid-gap: 48px;
}
@media (max-width: 800px) {
  .aside-grid-small {
    display: block;
    grid-template-columns: auto;
  }
}

.aside-grid-medium {
  display: grid;
  grid-template-columns: calc(100% - 384px) 320px;
  grid-gap: 64px;
}
@media (max-width: 800px) {
  .aside-grid-medium {
    display: block;
    grid-template-columns: auto;
  }
}

form.top-search {
  position: relative;
  margin: 0 0 20px 0;
  padding-right: 200px;
}
form.top-search:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f002";
  position: absolute;
  top: 16px;
  left: 0;
  color: var(--colour-neutral);
  font-size: 18px;
}
form.top-search input {
  padding-left: 30px;
  border-bottom-color: transparent;
}
form.top-search input:focus {
  border-bottom-color: transparent;
}
form.top-search .cta {
  position: absolute;
  top: 0;
  right: 0;
}

form.side-search {
  position: relative;
  margin-bottom: 10px;
  transform: translateY(-10px);
}
form.side-search button {
  position: absolute;
  top: 13px;
  left: 0;
  color: var(--colour-neutral);
  font-size: 20px;
  cursor: pointer;
}
form.side-search button:hover, form.side-search button.danger.active, form.side-search button.info.active, form.side-search button.success.active {
  color: var(--colour-primary);
}
form.side-search input {
  padding-left: 30px;
  border-bottom-color: transparent;
}
form.side-search input:focus {
  border-bottom-color: var(--colour-primary);
}

.fullscroll-action-bar {
  position: fixed;
  z-index: 200;
  top: 56px;
  right: 0;
  left: 256px;
  box-shadow: 0 1px 0 0 var(--colour-system-line);
  transition: all 0.1s linear;
}
@media (min-width: 800px) {
  .menu-large-closed .fullscroll-action-bar {
    left: 72px;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .fullscroll-action-bar {
    left: 72px;
  }
}
@media (max-width: 800px) {
  .fullscroll-action-bar {
    left: 0;
  }
}
.fullscroll-action-bar > div {
  height: 56px;
}
.fullscroll-action-bar > div.flip .region-group-action {
  display: block;
}
.fullscroll-action-bar > div .region-search,
.fullscroll-action-bar > div .region-group-action {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
.fullscroll-action-bar > div .region-search {
  display: flex;
  align-items: center;
  justify-content: start;
}
@media screen and (max-width: 1440px) {
  .fullscroll-action-bar > div .region-search .search {
    width: 52px;
  }
  .fullscroll-action-bar > div .region-search .search:focus-within {
    width: 200px;
  }
  .fullscroll-action-bar > div .region-search .search:focus-within + div {
    width: calc(100% - 200px);
  }
  .fullscroll-action-bar > div .region-search .search:not(:focus-within) .quick-search input::placeholder {
    color: transparent;
  }
  .fullscroll-action-bar > div .region-search .search + div {
    width: calc(100% - 52px);
  }
}
.fullscroll-action-bar > div .region-group-action {
  display: none;
  animation: fadeIn 0.16s linear;
}
.fullscroll-action-bar > div .region-group-action .item-counter {
  position: absolute;
  top: 16px;
  left: 20px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 800px) {
  .fullscroll-action-bar > div .region-group-action .item-counter {
    display: none;
  }
}
.fullscroll-action-bar > div .region-group-action .item-counter .clear-selection {
  float: left;
  margin-right: 8px;
}
.fullscroll-action-bar > div .region-group-action .group-buttons {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullscroll-action-bar > div .region-group-action .group-buttons > button {
  margin: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fullscroll-action-bar > div .search {
  position: relative;
  width: 380px;
  user-select: none;
  transition: all 0.1s;
}
.fullscroll-action-bar > div .search:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f002";
  position: absolute;
  left: 20px;
  top: 0;
  height: 32px;
  line-height: 32px;
  color: var(--colour-neutral-300);
  font-size: 16px;
  pointer-events: none;
}
.fullscroll-action-bar > div .search:focus-within:before {
  color: var(--colour-primary);
}
.fullscroll-action-bar > div .search .quick-search {
  display: flex;
  justify-content: space-between;
}
.fullscroll-action-bar > div .search .quick-search > input {
  height: 32px;
  padding-left: 52px;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 15px;
}
.fullscroll-action-bar > div .search .quick-search .quick-search-clear {
  display: none;
  width: 24px;
  cursor: pointer;
}
.fullscroll-action-bar > div .search + div {
  width: calc(100% - 380px);
}
@media screen and (max-width: 1440px) {
  .fullscroll-action-bar > div .search {
    width: 52px;
  }
  .fullscroll-action-bar > div .search:focus-within {
    width: 200px;
  }
  .fullscroll-action-bar > div .search:focus-within + div {
    width: calc(100% - 200px);
  }
  .fullscroll-action-bar > div .search:not(:focus-within) .quick-search input {
    cursor: pointer;
  }
  .fullscroll-action-bar > div .search:not(:focus-within) .quick-search input::placeholder {
    color: transparent;
  }
  .fullscroll-action-bar > div .search + div {
    width: calc(100% - 52px);
  }
}

/* Layout */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

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

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

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

.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: start;
}

.flex-start-top {
  display: flex;
  align-items: center;
  justify-content: start;
  align-items: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: end;
}

.flex-end-top {
  display: flex;
  align-items: center;
  justify-content: end;
  align-items: flex-start;
}

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

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

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

.flex-wrap {
  flex-wrap: wrap;
}

.v-align-top {
  vertical-align: top;
}

.v-align-middle {
  vertical-align: middle;
}

.v-align-bottom {
  vertical-align: bottom;
}

.v-align-sub {
  vertical-align: sub;
}

.clearfix:after {
  clear: both;
  content: "";
  display: block;
}

.hidden {
  display: none;
}

.inline-block {
  display: inline-block;
}

.divider {
  height: 10px;
}
.divider:after {
  clear: both;
  content: "";
  display: block;
}

.divider-large {
  height: 20px;
}
.divider-large:after {
  clear: both;
  content: "";
  display: block;
}

.position-relative {
  position: relative;
}

.inline-copy {
  position: absolute;
  right: 8px;
  bottom: 8px;
  cursor: pointer;
}

/* Spacing */
.margin-0 {
  margin: 0px !important;
}

.margin-top-0 {
  margin-top: 0px !important;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-left-0 {
  margin-left: 0px !important;
}

.margin-right-0 {
  margin-right: 0px !important;
}

.padding-0 {
  padding: 0px !important;
}

.padding-top-0 {
  padding-top: 0px !important;
}

.padding-bottom-0 {
  padding-bottom: 0px !important;
}

.padding-left-0 {
  padding-left: 0px !important;
}

.padding-right-0 {
  padding-right: 0px !important;
}

.divider-0 {
  height: 0px !important;
}

.margin-1 {
  margin: 1px !important;
}

.margin-top-1 {
  margin-top: 1px !important;
}

.margin-bottom-1 {
  margin-bottom: 1px !important;
}

.margin-left-1 {
  margin-left: 1px !important;
}

.margin-right-1 {
  margin-right: 1px !important;
}

.padding-1 {
  padding: 1px !important;
}

.padding-top-1 {
  padding-top: 1px !important;
}

.padding-bottom-1 {
  padding-bottom: 1px !important;
}

.padding-left-1 {
  padding-left: 1px !important;
}

.padding-right-1 {
  padding-right: 1px !important;
}

.divider-1 {
  height: 1px !important;
}

.margin-2 {
  margin: 2px !important;
}

.margin-top-2 {
  margin-top: 2px !important;
}

.margin-bottom-2 {
  margin-bottom: 2px !important;
}

.margin-left-2 {
  margin-left: 2px !important;
}

.margin-right-2 {
  margin-right: 2px !important;
}

.padding-2 {
  padding: 2px !important;
}

.padding-top-2 {
  padding-top: 2px !important;
}

.padding-bottom-2 {
  padding-bottom: 2px !important;
}

.padding-left-2 {
  padding-left: 2px !important;
}

.padding-right-2 {
  padding-right: 2px !important;
}

.divider-2 {
  height: 2px !important;
}

.margin-3 {
  margin: 3px !important;
}

.margin-top-3 {
  margin-top: 3px !important;
}

.margin-bottom-3 {
  margin-bottom: 3px !important;
}

.margin-left-3 {
  margin-left: 3px !important;
}

.margin-right-3 {
  margin-right: 3px !important;
}

.padding-3 {
  padding: 3px !important;
}

.padding-top-3 {
  padding-top: 3px !important;
}

.padding-bottom-3 {
  padding-bottom: 3px !important;
}

.padding-left-3 {
  padding-left: 3px !important;
}

.padding-right-3 {
  padding-right: 3px !important;
}

.divider-3 {
  height: 3px !important;
}

.margin-4 {
  margin: 4px !important;
}

.margin-top-4 {
  margin-top: 4px !important;
}

.margin-bottom-4 {
  margin-bottom: 4px !important;
}

.margin-left-4 {
  margin-left: 4px !important;
}

.margin-right-4 {
  margin-right: 4px !important;
}

.padding-4 {
  padding: 4px !important;
}

.padding-top-4 {
  padding-top: 4px !important;
}

.padding-bottom-4 {
  padding-bottom: 4px !important;
}

.padding-left-4 {
  padding-left: 4px !important;
}

.padding-right-4 {
  padding-right: 4px !important;
}

.divider-4 {
  height: 4px !important;
}

.margin-5 {
  margin: 5px !important;
}

.margin-top-5 {
  margin-top: 5px !important;
}

.margin-bottom-5 {
  margin-bottom: 5px !important;
}

.margin-left-5 {
  margin-left: 5px !important;
}

.margin-right-5 {
  margin-right: 5px !important;
}

.padding-5 {
  padding: 5px !important;
}

.padding-top-5 {
  padding-top: 5px !important;
}

.padding-bottom-5 {
  padding-bottom: 5px !important;
}

.padding-left-5 {
  padding-left: 5px !important;
}

.padding-right-5 {
  padding-right: 5px !important;
}

.divider-5 {
  height: 5px !important;
}

.margin-6 {
  margin: 6px !important;
}

.margin-top-6 {
  margin-top: 6px !important;
}

.margin-bottom-6 {
  margin-bottom: 6px !important;
}

.margin-left-6 {
  margin-left: 6px !important;
}

.margin-right-6 {
  margin-right: 6px !important;
}

.padding-6 {
  padding: 6px !important;
}

.padding-top-6 {
  padding-top: 6px !important;
}

.padding-bottom-6 {
  padding-bottom: 6px !important;
}

.padding-left-6 {
  padding-left: 6px !important;
}

.padding-right-6 {
  padding-right: 6px !important;
}

.divider-6 {
  height: 6px !important;
}

.margin-7 {
  margin: 7px !important;
}

.margin-top-7 {
  margin-top: 7px !important;
}

.margin-bottom-7 {
  margin-bottom: 7px !important;
}

.margin-left-7 {
  margin-left: 7px !important;
}

.margin-right-7 {
  margin-right: 7px !important;
}

.padding-7 {
  padding: 7px !important;
}

.padding-top-7 {
  padding-top: 7px !important;
}

.padding-bottom-7 {
  padding-bottom: 7px !important;
}

.padding-left-7 {
  padding-left: 7px !important;
}

.padding-right-7 {
  padding-right: 7px !important;
}

.divider-7 {
  height: 7px !important;
}

.margin-8 {
  margin: 8px !important;
}

.margin-top-8 {
  margin-top: 8px !important;
}

.margin-bottom-8 {
  margin-bottom: 8px !important;
}

.margin-left-8 {
  margin-left: 8px !important;
}

.margin-right-8 {
  margin-right: 8px !important;
}

.padding-8 {
  padding: 8px !important;
}

.padding-top-8 {
  padding-top: 8px !important;
}

.padding-bottom-8 {
  padding-bottom: 8px !important;
}

.padding-left-8 {
  padding-left: 8px !important;
}

.padding-right-8 {
  padding-right: 8px !important;
}

.divider-8 {
  height: 8px !important;
}

.margin-9 {
  margin: 9px !important;
}

.margin-top-9 {
  margin-top: 9px !important;
}

.margin-bottom-9 {
  margin-bottom: 9px !important;
}

.margin-left-9 {
  margin-left: 9px !important;
}

.margin-right-9 {
  margin-right: 9px !important;
}

.padding-9 {
  padding: 9px !important;
}

.padding-top-9 {
  padding-top: 9px !important;
}

.padding-bottom-9 {
  padding-bottom: 9px !important;
}

.padding-left-9 {
  padding-left: 9px !important;
}

.padding-right-9 {
  padding-right: 9px !important;
}

.divider-9 {
  height: 9px !important;
}

.margin-10 {
  margin: 10px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-left-10 {
  margin-left: 10px !important;
}

.margin-right-10 {
  margin-right: 10px !important;
}

.padding-10 {
  padding: 10px !important;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-bottom-10 {
  padding-bottom: 10px !important;
}

.padding-left-10 {
  padding-left: 10px !important;
}

.padding-right-10 {
  padding-right: 10px !important;
}

.divider-10 {
  height: 10px !important;
}

.margin-11 {
  margin: 11px !important;
}

.margin-top-11 {
  margin-top: 11px !important;
}

.margin-bottom-11 {
  margin-bottom: 11px !important;
}

.margin-left-11 {
  margin-left: 11px !important;
}

.margin-right-11 {
  margin-right: 11px !important;
}

.padding-11 {
  padding: 11px !important;
}

.padding-top-11 {
  padding-top: 11px !important;
}

.padding-bottom-11 {
  padding-bottom: 11px !important;
}

.padding-left-11 {
  padding-left: 11px !important;
}

.padding-right-11 {
  padding-right: 11px !important;
}

.divider-11 {
  height: 11px !important;
}

.margin-12 {
  margin: 12px !important;
}

.margin-top-12 {
  margin-top: 12px !important;
}

.margin-bottom-12 {
  margin-bottom: 12px !important;
}

.margin-left-12 {
  margin-left: 12px !important;
}

.margin-right-12 {
  margin-right: 12px !important;
}

.padding-12 {
  padding: 12px !important;
}

.padding-top-12 {
  padding-top: 12px !important;
}

.padding-bottom-12 {
  padding-bottom: 12px !important;
}

.padding-left-12 {
  padding-left: 12px !important;
}

.padding-right-12 {
  padding-right: 12px !important;
}

.divider-12 {
  height: 12px !important;
}

.margin-13 {
  margin: 13px !important;
}

.margin-top-13 {
  margin-top: 13px !important;
}

.margin-bottom-13 {
  margin-bottom: 13px !important;
}

.margin-left-13 {
  margin-left: 13px !important;
}

.margin-right-13 {
  margin-right: 13px !important;
}

.padding-13 {
  padding: 13px !important;
}

.padding-top-13 {
  padding-top: 13px !important;
}

.padding-bottom-13 {
  padding-bottom: 13px !important;
}

.padding-left-13 {
  padding-left: 13px !important;
}

.padding-right-13 {
  padding-right: 13px !important;
}

.divider-13 {
  height: 13px !important;
}

.margin-14 {
  margin: 14px !important;
}

.margin-top-14 {
  margin-top: 14px !important;
}

.margin-bottom-14 {
  margin-bottom: 14px !important;
}

.margin-left-14 {
  margin-left: 14px !important;
}

.margin-right-14 {
  margin-right: 14px !important;
}

.padding-14 {
  padding: 14px !important;
}

.padding-top-14 {
  padding-top: 14px !important;
}

.padding-bottom-14 {
  padding-bottom: 14px !important;
}

.padding-left-14 {
  padding-left: 14px !important;
}

.padding-right-14 {
  padding-right: 14px !important;
}

.divider-14 {
  height: 14px !important;
}

.margin-15 {
  margin: 15px !important;
}

.margin-top-15 {
  margin-top: 15px !important;
}

.margin-bottom-15 {
  margin-bottom: 15px !important;
}

.margin-left-15 {
  margin-left: 15px !important;
}

.margin-right-15 {
  margin-right: 15px !important;
}

.padding-15 {
  padding: 15px !important;
}

.padding-top-15 {
  padding-top: 15px !important;
}

.padding-bottom-15 {
  padding-bottom: 15px !important;
}

.padding-left-15 {
  padding-left: 15px !important;
}

.padding-right-15 {
  padding-right: 15px !important;
}

.divider-15 {
  height: 15px !important;
}

.margin-16 {
  margin: 16px !important;
}

.margin-top-16 {
  margin-top: 16px !important;
}

.margin-bottom-16 {
  margin-bottom: 16px !important;
}

.margin-left-16 {
  margin-left: 16px !important;
}

.margin-right-16 {
  margin-right: 16px !important;
}

.padding-16 {
  padding: 16px !important;
}

.padding-top-16 {
  padding-top: 16px !important;
}

.padding-bottom-16 {
  padding-bottom: 16px !important;
}

.padding-left-16 {
  padding-left: 16px !important;
}

.padding-right-16 {
  padding-right: 16px !important;
}

.divider-16 {
  height: 16px !important;
}

.margin-17 {
  margin: 17px !important;
}

.margin-top-17 {
  margin-top: 17px !important;
}

.margin-bottom-17 {
  margin-bottom: 17px !important;
}

.margin-left-17 {
  margin-left: 17px !important;
}

.margin-right-17 {
  margin-right: 17px !important;
}

.padding-17 {
  padding: 17px !important;
}

.padding-top-17 {
  padding-top: 17px !important;
}

.padding-bottom-17 {
  padding-bottom: 17px !important;
}

.padding-left-17 {
  padding-left: 17px !important;
}

.padding-right-17 {
  padding-right: 17px !important;
}

.divider-17 {
  height: 17px !important;
}

.margin-18 {
  margin: 18px !important;
}

.margin-top-18 {
  margin-top: 18px !important;
}

.margin-bottom-18 {
  margin-bottom: 18px !important;
}

.margin-left-18 {
  margin-left: 18px !important;
}

.margin-right-18 {
  margin-right: 18px !important;
}

.padding-18 {
  padding: 18px !important;
}

.padding-top-18 {
  padding-top: 18px !important;
}

.padding-bottom-18 {
  padding-bottom: 18px !important;
}

.padding-left-18 {
  padding-left: 18px !important;
}

.padding-right-18 {
  padding-right: 18px !important;
}

.divider-18 {
  height: 18px !important;
}

.margin-19 {
  margin: 19px !important;
}

.margin-top-19 {
  margin-top: 19px !important;
}

.margin-bottom-19 {
  margin-bottom: 19px !important;
}

.margin-left-19 {
  margin-left: 19px !important;
}

.margin-right-19 {
  margin-right: 19px !important;
}

.padding-19 {
  padding: 19px !important;
}

.padding-top-19 {
  padding-top: 19px !important;
}

.padding-bottom-19 {
  padding-bottom: 19px !important;
}

.padding-left-19 {
  padding-left: 19px !important;
}

.padding-right-19 {
  padding-right: 19px !important;
}

.divider-19 {
  height: 19px !important;
}

.margin-20 {
  margin: 20px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-left-20 {
  margin-left: 20px !important;
}

.margin-right-20 {
  margin-right: 20px !important;
}

.padding-20 {
  padding: 20px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-left-20 {
  padding-left: 20px !important;
}

.padding-right-20 {
  padding-right: 20px !important;
}

.divider-20 {
  height: 20px !important;
}

.margin-21 {
  margin: 21px !important;
}

.margin-top-21 {
  margin-top: 21px !important;
}

.margin-bottom-21 {
  margin-bottom: 21px !important;
}

.margin-left-21 {
  margin-left: 21px !important;
}

.margin-right-21 {
  margin-right: 21px !important;
}

.padding-21 {
  padding: 21px !important;
}

.padding-top-21 {
  padding-top: 21px !important;
}

.padding-bottom-21 {
  padding-bottom: 21px !important;
}

.padding-left-21 {
  padding-left: 21px !important;
}

.padding-right-21 {
  padding-right: 21px !important;
}

.divider-21 {
  height: 21px !important;
}

.margin-22 {
  margin: 22px !important;
}

.margin-top-22 {
  margin-top: 22px !important;
}

.margin-bottom-22 {
  margin-bottom: 22px !important;
}

.margin-left-22 {
  margin-left: 22px !important;
}

.margin-right-22 {
  margin-right: 22px !important;
}

.padding-22 {
  padding: 22px !important;
}

.padding-top-22 {
  padding-top: 22px !important;
}

.padding-bottom-22 {
  padding-bottom: 22px !important;
}

.padding-left-22 {
  padding-left: 22px !important;
}

.padding-right-22 {
  padding-right: 22px !important;
}

.divider-22 {
  height: 22px !important;
}

.margin-23 {
  margin: 23px !important;
}

.margin-top-23 {
  margin-top: 23px !important;
}

.margin-bottom-23 {
  margin-bottom: 23px !important;
}

.margin-left-23 {
  margin-left: 23px !important;
}

.margin-right-23 {
  margin-right: 23px !important;
}

.padding-23 {
  padding: 23px !important;
}

.padding-top-23 {
  padding-top: 23px !important;
}

.padding-bottom-23 {
  padding-bottom: 23px !important;
}

.padding-left-23 {
  padding-left: 23px !important;
}

.padding-right-23 {
  padding-right: 23px !important;
}

.divider-23 {
  height: 23px !important;
}

.margin-24 {
  margin: 24px !important;
}

.margin-top-24 {
  margin-top: 24px !important;
}

.margin-bottom-24 {
  margin-bottom: 24px !important;
}

.margin-left-24 {
  margin-left: 24px !important;
}

.margin-right-24 {
  margin-right: 24px !important;
}

.padding-24 {
  padding: 24px !important;
}

.padding-top-24 {
  padding-top: 24px !important;
}

.padding-bottom-24 {
  padding-bottom: 24px !important;
}

.padding-left-24 {
  padding-left: 24px !important;
}

.padding-right-24 {
  padding-right: 24px !important;
}

.divider-24 {
  height: 24px !important;
}

.margin-25 {
  margin: 25px !important;
}

.margin-top-25 {
  margin-top: 25px !important;
}

.margin-bottom-25 {
  margin-bottom: 25px !important;
}

.margin-left-25 {
  margin-left: 25px !important;
}

.margin-right-25 {
  margin-right: 25px !important;
}

.padding-25 {
  padding: 25px !important;
}

.padding-top-25 {
  padding-top: 25px !important;
}

.padding-bottom-25 {
  padding-bottom: 25px !important;
}

.padding-left-25 {
  padding-left: 25px !important;
}

.padding-right-25 {
  padding-right: 25px !important;
}

.divider-25 {
  height: 25px !important;
}

.margin-26 {
  margin: 26px !important;
}

.margin-top-26 {
  margin-top: 26px !important;
}

.margin-bottom-26 {
  margin-bottom: 26px !important;
}

.margin-left-26 {
  margin-left: 26px !important;
}

.margin-right-26 {
  margin-right: 26px !important;
}

.padding-26 {
  padding: 26px !important;
}

.padding-top-26 {
  padding-top: 26px !important;
}

.padding-bottom-26 {
  padding-bottom: 26px !important;
}

.padding-left-26 {
  padding-left: 26px !important;
}

.padding-right-26 {
  padding-right: 26px !important;
}

.divider-26 {
  height: 26px !important;
}

.margin-27 {
  margin: 27px !important;
}

.margin-top-27 {
  margin-top: 27px !important;
}

.margin-bottom-27 {
  margin-bottom: 27px !important;
}

.margin-left-27 {
  margin-left: 27px !important;
}

.margin-right-27 {
  margin-right: 27px !important;
}

.padding-27 {
  padding: 27px !important;
}

.padding-top-27 {
  padding-top: 27px !important;
}

.padding-bottom-27 {
  padding-bottom: 27px !important;
}

.padding-left-27 {
  padding-left: 27px !important;
}

.padding-right-27 {
  padding-right: 27px !important;
}

.divider-27 {
  height: 27px !important;
}

.margin-28 {
  margin: 28px !important;
}

.margin-top-28 {
  margin-top: 28px !important;
}

.margin-bottom-28 {
  margin-bottom: 28px !important;
}

.margin-left-28 {
  margin-left: 28px !important;
}

.margin-right-28 {
  margin-right: 28px !important;
}

.padding-28 {
  padding: 28px !important;
}

.padding-top-28 {
  padding-top: 28px !important;
}

.padding-bottom-28 {
  padding-bottom: 28px !important;
}

.padding-left-28 {
  padding-left: 28px !important;
}

.padding-right-28 {
  padding-right: 28px !important;
}

.divider-28 {
  height: 28px !important;
}

.margin-29 {
  margin: 29px !important;
}

.margin-top-29 {
  margin-top: 29px !important;
}

.margin-bottom-29 {
  margin-bottom: 29px !important;
}

.margin-left-29 {
  margin-left: 29px !important;
}

.margin-right-29 {
  margin-right: 29px !important;
}

.padding-29 {
  padding: 29px !important;
}

.padding-top-29 {
  padding-top: 29px !important;
}

.padding-bottom-29 {
  padding-bottom: 29px !important;
}

.padding-left-29 {
  padding-left: 29px !important;
}

.padding-right-29 {
  padding-right: 29px !important;
}

.divider-29 {
  height: 29px !important;
}

.margin-30 {
  margin: 30px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-left-30 {
  margin-left: 30px !important;
}

.margin-right-30 {
  margin-right: 30px !important;
}

.padding-30 {
  padding: 30px !important;
}

.padding-top-30 {
  padding-top: 30px !important;
}

.padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-left-30 {
  padding-left: 30px !important;
}

.padding-right-30 {
  padding-right: 30px !important;
}

.divider-30 {
  height: 30px !important;
}

.margin-31 {
  margin: 31px !important;
}

.margin-top-31 {
  margin-top: 31px !important;
}

.margin-bottom-31 {
  margin-bottom: 31px !important;
}

.margin-left-31 {
  margin-left: 31px !important;
}

.margin-right-31 {
  margin-right: 31px !important;
}

.padding-31 {
  padding: 31px !important;
}

.padding-top-31 {
  padding-top: 31px !important;
}

.padding-bottom-31 {
  padding-bottom: 31px !important;
}

.padding-left-31 {
  padding-left: 31px !important;
}

.padding-right-31 {
  padding-right: 31px !important;
}

.divider-31 {
  height: 31px !important;
}

.margin-32 {
  margin: 32px !important;
}

.margin-top-32 {
  margin-top: 32px !important;
}

.margin-bottom-32 {
  margin-bottom: 32px !important;
}

.margin-left-32 {
  margin-left: 32px !important;
}

.margin-right-32 {
  margin-right: 32px !important;
}

.padding-32 {
  padding: 32px !important;
}

.padding-top-32 {
  padding-top: 32px !important;
}

.padding-bottom-32 {
  padding-bottom: 32px !important;
}

.padding-left-32 {
  padding-left: 32px !important;
}

.padding-right-32 {
  padding-right: 32px !important;
}

.divider-32 {
  height: 32px !important;
}

.margin-33 {
  margin: 33px !important;
}

.margin-top-33 {
  margin-top: 33px !important;
}

.margin-bottom-33 {
  margin-bottom: 33px !important;
}

.margin-left-33 {
  margin-left: 33px !important;
}

.margin-right-33 {
  margin-right: 33px !important;
}

.padding-33 {
  padding: 33px !important;
}

.padding-top-33 {
  padding-top: 33px !important;
}

.padding-bottom-33 {
  padding-bottom: 33px !important;
}

.padding-left-33 {
  padding-left: 33px !important;
}

.padding-right-33 {
  padding-right: 33px !important;
}

.divider-33 {
  height: 33px !important;
}

.margin-34 {
  margin: 34px !important;
}

.margin-top-34 {
  margin-top: 34px !important;
}

.margin-bottom-34 {
  margin-bottom: 34px !important;
}

.margin-left-34 {
  margin-left: 34px !important;
}

.margin-right-34 {
  margin-right: 34px !important;
}

.padding-34 {
  padding: 34px !important;
}

.padding-top-34 {
  padding-top: 34px !important;
}

.padding-bottom-34 {
  padding-bottom: 34px !important;
}

.padding-left-34 {
  padding-left: 34px !important;
}

.padding-right-34 {
  padding-right: 34px !important;
}

.divider-34 {
  height: 34px !important;
}

.margin-35 {
  margin: 35px !important;
}

.margin-top-35 {
  margin-top: 35px !important;
}

.margin-bottom-35 {
  margin-bottom: 35px !important;
}

.margin-left-35 {
  margin-left: 35px !important;
}

.margin-right-35 {
  margin-right: 35px !important;
}

.padding-35 {
  padding: 35px !important;
}

.padding-top-35 {
  padding-top: 35px !important;
}

.padding-bottom-35 {
  padding-bottom: 35px !important;
}

.padding-left-35 {
  padding-left: 35px !important;
}

.padding-right-35 {
  padding-right: 35px !important;
}

.divider-35 {
  height: 35px !important;
}

.margin-36 {
  margin: 36px !important;
}

.margin-top-36 {
  margin-top: 36px !important;
}

.margin-bottom-36 {
  margin-bottom: 36px !important;
}

.margin-left-36 {
  margin-left: 36px !important;
}

.margin-right-36 {
  margin-right: 36px !important;
}

.padding-36 {
  padding: 36px !important;
}

.padding-top-36 {
  padding-top: 36px !important;
}

.padding-bottom-36 {
  padding-bottom: 36px !important;
}

.padding-left-36 {
  padding-left: 36px !important;
}

.padding-right-36 {
  padding-right: 36px !important;
}

.divider-36 {
  height: 36px !important;
}

.margin-37 {
  margin: 37px !important;
}

.margin-top-37 {
  margin-top: 37px !important;
}

.margin-bottom-37 {
  margin-bottom: 37px !important;
}

.margin-left-37 {
  margin-left: 37px !important;
}

.margin-right-37 {
  margin-right: 37px !important;
}

.padding-37 {
  padding: 37px !important;
}

.padding-top-37 {
  padding-top: 37px !important;
}

.padding-bottom-37 {
  padding-bottom: 37px !important;
}

.padding-left-37 {
  padding-left: 37px !important;
}

.padding-right-37 {
  padding-right: 37px !important;
}

.divider-37 {
  height: 37px !important;
}

.margin-38 {
  margin: 38px !important;
}

.margin-top-38 {
  margin-top: 38px !important;
}

.margin-bottom-38 {
  margin-bottom: 38px !important;
}

.margin-left-38 {
  margin-left: 38px !important;
}

.margin-right-38 {
  margin-right: 38px !important;
}

.padding-38 {
  padding: 38px !important;
}

.padding-top-38 {
  padding-top: 38px !important;
}

.padding-bottom-38 {
  padding-bottom: 38px !important;
}

.padding-left-38 {
  padding-left: 38px !important;
}

.padding-right-38 {
  padding-right: 38px !important;
}

.divider-38 {
  height: 38px !important;
}

.margin-39 {
  margin: 39px !important;
}

.margin-top-39 {
  margin-top: 39px !important;
}

.margin-bottom-39 {
  margin-bottom: 39px !important;
}

.margin-left-39 {
  margin-left: 39px !important;
}

.margin-right-39 {
  margin-right: 39px !important;
}

.padding-39 {
  padding: 39px !important;
}

.padding-top-39 {
  padding-top: 39px !important;
}

.padding-bottom-39 {
  padding-bottom: 39px !important;
}

.padding-left-39 {
  padding-left: 39px !important;
}

.padding-right-39 {
  padding-right: 39px !important;
}

.divider-39 {
  height: 39px !important;
}

.margin-40 {
  margin: 40px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-left-40 {
  margin-left: 40px !important;
}

.margin-right-40 {
  margin-right: 40px !important;
}

.padding-40 {
  padding: 40px !important;
}

.padding-top-40 {
  padding-top: 40px !important;
}

.padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-left-40 {
  padding-left: 40px !important;
}

.padding-right-40 {
  padding-right: 40px !important;
}

.divider-40 {
  height: 40px !important;
}

.margin-41 {
  margin: 41px !important;
}

.margin-top-41 {
  margin-top: 41px !important;
}

.margin-bottom-41 {
  margin-bottom: 41px !important;
}

.margin-left-41 {
  margin-left: 41px !important;
}

.margin-right-41 {
  margin-right: 41px !important;
}

.padding-41 {
  padding: 41px !important;
}

.padding-top-41 {
  padding-top: 41px !important;
}

.padding-bottom-41 {
  padding-bottom: 41px !important;
}

.padding-left-41 {
  padding-left: 41px !important;
}

.padding-right-41 {
  padding-right: 41px !important;
}

.divider-41 {
  height: 41px !important;
}

.margin-42 {
  margin: 42px !important;
}

.margin-top-42 {
  margin-top: 42px !important;
}

.margin-bottom-42 {
  margin-bottom: 42px !important;
}

.margin-left-42 {
  margin-left: 42px !important;
}

.margin-right-42 {
  margin-right: 42px !important;
}

.padding-42 {
  padding: 42px !important;
}

.padding-top-42 {
  padding-top: 42px !important;
}

.padding-bottom-42 {
  padding-bottom: 42px !important;
}

.padding-left-42 {
  padding-left: 42px !important;
}

.padding-right-42 {
  padding-right: 42px !important;
}

.divider-42 {
  height: 42px !important;
}

.margin-43 {
  margin: 43px !important;
}

.margin-top-43 {
  margin-top: 43px !important;
}

.margin-bottom-43 {
  margin-bottom: 43px !important;
}

.margin-left-43 {
  margin-left: 43px !important;
}

.margin-right-43 {
  margin-right: 43px !important;
}

.padding-43 {
  padding: 43px !important;
}

.padding-top-43 {
  padding-top: 43px !important;
}

.padding-bottom-43 {
  padding-bottom: 43px !important;
}

.padding-left-43 {
  padding-left: 43px !important;
}

.padding-right-43 {
  padding-right: 43px !important;
}

.divider-43 {
  height: 43px !important;
}

.margin-44 {
  margin: 44px !important;
}

.margin-top-44 {
  margin-top: 44px !important;
}

.margin-bottom-44 {
  margin-bottom: 44px !important;
}

.margin-left-44 {
  margin-left: 44px !important;
}

.margin-right-44 {
  margin-right: 44px !important;
}

.padding-44 {
  padding: 44px !important;
}

.padding-top-44 {
  padding-top: 44px !important;
}

.padding-bottom-44 {
  padding-bottom: 44px !important;
}

.padding-left-44 {
  padding-left: 44px !important;
}

.padding-right-44 {
  padding-right: 44px !important;
}

.divider-44 {
  height: 44px !important;
}

.margin-45 {
  margin: 45px !important;
}

.margin-top-45 {
  margin-top: 45px !important;
}

.margin-bottom-45 {
  margin-bottom: 45px !important;
}

.margin-left-45 {
  margin-left: 45px !important;
}

.margin-right-45 {
  margin-right: 45px !important;
}

.padding-45 {
  padding: 45px !important;
}

.padding-top-45 {
  padding-top: 45px !important;
}

.padding-bottom-45 {
  padding-bottom: 45px !important;
}

.padding-left-45 {
  padding-left: 45px !important;
}

.padding-right-45 {
  padding-right: 45px !important;
}

.divider-45 {
  height: 45px !important;
}

.margin-46 {
  margin: 46px !important;
}

.margin-top-46 {
  margin-top: 46px !important;
}

.margin-bottom-46 {
  margin-bottom: 46px !important;
}

.margin-left-46 {
  margin-left: 46px !important;
}

.margin-right-46 {
  margin-right: 46px !important;
}

.padding-46 {
  padding: 46px !important;
}

.padding-top-46 {
  padding-top: 46px !important;
}

.padding-bottom-46 {
  padding-bottom: 46px !important;
}

.padding-left-46 {
  padding-left: 46px !important;
}

.padding-right-46 {
  padding-right: 46px !important;
}

.divider-46 {
  height: 46px !important;
}

.margin-47 {
  margin: 47px !important;
}

.margin-top-47 {
  margin-top: 47px !important;
}

.margin-bottom-47 {
  margin-bottom: 47px !important;
}

.margin-left-47 {
  margin-left: 47px !important;
}

.margin-right-47 {
  margin-right: 47px !important;
}

.padding-47 {
  padding: 47px !important;
}

.padding-top-47 {
  padding-top: 47px !important;
}

.padding-bottom-47 {
  padding-bottom: 47px !important;
}

.padding-left-47 {
  padding-left: 47px !important;
}

.padding-right-47 {
  padding-right: 47px !important;
}

.divider-47 {
  height: 47px !important;
}

.margin-48 {
  margin: 48px !important;
}

.margin-top-48 {
  margin-top: 48px !important;
}

.margin-bottom-48 {
  margin-bottom: 48px !important;
}

.margin-left-48 {
  margin-left: 48px !important;
}

.margin-right-48 {
  margin-right: 48px !important;
}

.padding-48 {
  padding: 48px !important;
}

.padding-top-48 {
  padding-top: 48px !important;
}

.padding-bottom-48 {
  padding-bottom: 48px !important;
}

.padding-left-48 {
  padding-left: 48px !important;
}

.padding-right-48 {
  padding-right: 48px !important;
}

.divider-48 {
  height: 48px !important;
}

.margin-49 {
  margin: 49px !important;
}

.margin-top-49 {
  margin-top: 49px !important;
}

.margin-bottom-49 {
  margin-bottom: 49px !important;
}

.margin-left-49 {
  margin-left: 49px !important;
}

.margin-right-49 {
  margin-right: 49px !important;
}

.padding-49 {
  padding: 49px !important;
}

.padding-top-49 {
  padding-top: 49px !important;
}

.padding-bottom-49 {
  padding-bottom: 49px !important;
}

.padding-left-49 {
  padding-left: 49px !important;
}

.padding-right-49 {
  padding-right: 49px !important;
}

.divider-49 {
  height: 49px !important;
}

.margin-50 {
  margin: 50px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-left-50 {
  margin-left: 50px !important;
}

.margin-right-50 {
  margin-right: 50px !important;
}

.padding-50 {
  padding: 50px !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-left-50 {
  padding-left: 50px !important;
}

.padding-right-50 {
  padding-right: 50px !important;
}

.divider-50 {
  height: 50px !important;
}

.margin-51 {
  margin: 51px !important;
}

.margin-top-51 {
  margin-top: 51px !important;
}

.margin-bottom-51 {
  margin-bottom: 51px !important;
}

.margin-left-51 {
  margin-left: 51px !important;
}

.margin-right-51 {
  margin-right: 51px !important;
}

.padding-51 {
  padding: 51px !important;
}

.padding-top-51 {
  padding-top: 51px !important;
}

.padding-bottom-51 {
  padding-bottom: 51px !important;
}

.padding-left-51 {
  padding-left: 51px !important;
}

.padding-right-51 {
  padding-right: 51px !important;
}

.divider-51 {
  height: 51px !important;
}

.margin-52 {
  margin: 52px !important;
}

.margin-top-52 {
  margin-top: 52px !important;
}

.margin-bottom-52 {
  margin-bottom: 52px !important;
}

.margin-left-52 {
  margin-left: 52px !important;
}

.margin-right-52 {
  margin-right: 52px !important;
}

.padding-52 {
  padding: 52px !important;
}

.padding-top-52 {
  padding-top: 52px !important;
}

.padding-bottom-52 {
  padding-bottom: 52px !important;
}

.padding-left-52 {
  padding-left: 52px !important;
}

.padding-right-52 {
  padding-right: 52px !important;
}

.divider-52 {
  height: 52px !important;
}

.margin-53 {
  margin: 53px !important;
}

.margin-top-53 {
  margin-top: 53px !important;
}

.margin-bottom-53 {
  margin-bottom: 53px !important;
}

.margin-left-53 {
  margin-left: 53px !important;
}

.margin-right-53 {
  margin-right: 53px !important;
}

.padding-53 {
  padding: 53px !important;
}

.padding-top-53 {
  padding-top: 53px !important;
}

.padding-bottom-53 {
  padding-bottom: 53px !important;
}

.padding-left-53 {
  padding-left: 53px !important;
}

.padding-right-53 {
  padding-right: 53px !important;
}

.divider-53 {
  height: 53px !important;
}

.margin-54 {
  margin: 54px !important;
}

.margin-top-54 {
  margin-top: 54px !important;
}

.margin-bottom-54 {
  margin-bottom: 54px !important;
}

.margin-left-54 {
  margin-left: 54px !important;
}

.margin-right-54 {
  margin-right: 54px !important;
}

.padding-54 {
  padding: 54px !important;
}

.padding-top-54 {
  padding-top: 54px !important;
}

.padding-bottom-54 {
  padding-bottom: 54px !important;
}

.padding-left-54 {
  padding-left: 54px !important;
}

.padding-right-54 {
  padding-right: 54px !important;
}

.divider-54 {
  height: 54px !important;
}

.margin-55 {
  margin: 55px !important;
}

.margin-top-55 {
  margin-top: 55px !important;
}

.margin-bottom-55 {
  margin-bottom: 55px !important;
}

.margin-left-55 {
  margin-left: 55px !important;
}

.margin-right-55 {
  margin-right: 55px !important;
}

.padding-55 {
  padding: 55px !important;
}

.padding-top-55 {
  padding-top: 55px !important;
}

.padding-bottom-55 {
  padding-bottom: 55px !important;
}

.padding-left-55 {
  padding-left: 55px !important;
}

.padding-right-55 {
  padding-right: 55px !important;
}

.divider-55 {
  height: 55px !important;
}

.margin-56 {
  margin: 56px !important;
}

.margin-top-56 {
  margin-top: 56px !important;
}

.margin-bottom-56 {
  margin-bottom: 56px !important;
}

.margin-left-56 {
  margin-left: 56px !important;
}

.margin-right-56 {
  margin-right: 56px !important;
}

.padding-56 {
  padding: 56px !important;
}

.padding-top-56 {
  padding-top: 56px !important;
}

.padding-bottom-56 {
  padding-bottom: 56px !important;
}

.padding-left-56 {
  padding-left: 56px !important;
}

.padding-right-56 {
  padding-right: 56px !important;
}

.divider-56 {
  height: 56px !important;
}

.margin-57 {
  margin: 57px !important;
}

.margin-top-57 {
  margin-top: 57px !important;
}

.margin-bottom-57 {
  margin-bottom: 57px !important;
}

.margin-left-57 {
  margin-left: 57px !important;
}

.margin-right-57 {
  margin-right: 57px !important;
}

.padding-57 {
  padding: 57px !important;
}

.padding-top-57 {
  padding-top: 57px !important;
}

.padding-bottom-57 {
  padding-bottom: 57px !important;
}

.padding-left-57 {
  padding-left: 57px !important;
}

.padding-right-57 {
  padding-right: 57px !important;
}

.divider-57 {
  height: 57px !important;
}

.margin-58 {
  margin: 58px !important;
}

.margin-top-58 {
  margin-top: 58px !important;
}

.margin-bottom-58 {
  margin-bottom: 58px !important;
}

.margin-left-58 {
  margin-left: 58px !important;
}

.margin-right-58 {
  margin-right: 58px !important;
}

.padding-58 {
  padding: 58px !important;
}

.padding-top-58 {
  padding-top: 58px !important;
}

.padding-bottom-58 {
  padding-bottom: 58px !important;
}

.padding-left-58 {
  padding-left: 58px !important;
}

.padding-right-58 {
  padding-right: 58px !important;
}

.divider-58 {
  height: 58px !important;
}

.margin-59 {
  margin: 59px !important;
}

.margin-top-59 {
  margin-top: 59px !important;
}

.margin-bottom-59 {
  margin-bottom: 59px !important;
}

.margin-left-59 {
  margin-left: 59px !important;
}

.margin-right-59 {
  margin-right: 59px !important;
}

.padding-59 {
  padding: 59px !important;
}

.padding-top-59 {
  padding-top: 59px !important;
}

.padding-bottom-59 {
  padding-bottom: 59px !important;
}

.padding-left-59 {
  padding-left: 59px !important;
}

.padding-right-59 {
  padding-right: 59px !important;
}

.divider-59 {
  height: 59px !important;
}

.margin-60 {
  margin: 60px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-left-60 {
  margin-left: 60px !important;
}

.margin-right-60 {
  margin-right: 60px !important;
}

.padding-60 {
  padding: 60px !important;
}

.padding-top-60 {
  padding-top: 60px !important;
}

.padding-bottom-60 {
  padding-bottom: 60px !important;
}

.padding-left-60 {
  padding-left: 60px !important;
}

.padding-right-60 {
  padding-right: 60px !important;
}

.divider-60 {
  height: 60px !important;
}

.margin-61 {
  margin: 61px !important;
}

.margin-top-61 {
  margin-top: 61px !important;
}

.margin-bottom-61 {
  margin-bottom: 61px !important;
}

.margin-left-61 {
  margin-left: 61px !important;
}

.margin-right-61 {
  margin-right: 61px !important;
}

.padding-61 {
  padding: 61px !important;
}

.padding-top-61 {
  padding-top: 61px !important;
}

.padding-bottom-61 {
  padding-bottom: 61px !important;
}

.padding-left-61 {
  padding-left: 61px !important;
}

.padding-right-61 {
  padding-right: 61px !important;
}

.divider-61 {
  height: 61px !important;
}

.margin-62 {
  margin: 62px !important;
}

.margin-top-62 {
  margin-top: 62px !important;
}

.margin-bottom-62 {
  margin-bottom: 62px !important;
}

.margin-left-62 {
  margin-left: 62px !important;
}

.margin-right-62 {
  margin-right: 62px !important;
}

.padding-62 {
  padding: 62px !important;
}

.padding-top-62 {
  padding-top: 62px !important;
}

.padding-bottom-62 {
  padding-bottom: 62px !important;
}

.padding-left-62 {
  padding-left: 62px !important;
}

.padding-right-62 {
  padding-right: 62px !important;
}

.divider-62 {
  height: 62px !important;
}

.margin-63 {
  margin: 63px !important;
}

.margin-top-63 {
  margin-top: 63px !important;
}

.margin-bottom-63 {
  margin-bottom: 63px !important;
}

.margin-left-63 {
  margin-left: 63px !important;
}

.margin-right-63 {
  margin-right: 63px !important;
}

.padding-63 {
  padding: 63px !important;
}

.padding-top-63 {
  padding-top: 63px !important;
}

.padding-bottom-63 {
  padding-bottom: 63px !important;
}

.padding-left-63 {
  padding-left: 63px !important;
}

.padding-right-63 {
  padding-right: 63px !important;
}

.divider-63 {
  height: 63px !important;
}

.margin-64 {
  margin: 64px !important;
}

.margin-top-64 {
  margin-top: 64px !important;
}

.margin-bottom-64 {
  margin-bottom: 64px !important;
}

.margin-left-64 {
  margin-left: 64px !important;
}

.margin-right-64 {
  margin-right: 64px !important;
}

.padding-64 {
  padding: 64px !important;
}

.padding-top-64 {
  padding-top: 64px !important;
}

.padding-bottom-64 {
  padding-bottom: 64px !important;
}

.padding-left-64 {
  padding-left: 64px !important;
}

.padding-right-64 {
  padding-right: 64px !important;
}

.divider-64 {
  height: 64px !important;
}

.margin-65 {
  margin: 65px !important;
}

.margin-top-65 {
  margin-top: 65px !important;
}

.margin-bottom-65 {
  margin-bottom: 65px !important;
}

.margin-left-65 {
  margin-left: 65px !important;
}

.margin-right-65 {
  margin-right: 65px !important;
}

.padding-65 {
  padding: 65px !important;
}

.padding-top-65 {
  padding-top: 65px !important;
}

.padding-bottom-65 {
  padding-bottom: 65px !important;
}

.padding-left-65 {
  padding-left: 65px !important;
}

.padding-right-65 {
  padding-right: 65px !important;
}

.divider-65 {
  height: 65px !important;
}

.margin-66 {
  margin: 66px !important;
}

.margin-top-66 {
  margin-top: 66px !important;
}

.margin-bottom-66 {
  margin-bottom: 66px !important;
}

.margin-left-66 {
  margin-left: 66px !important;
}

.margin-right-66 {
  margin-right: 66px !important;
}

.padding-66 {
  padding: 66px !important;
}

.padding-top-66 {
  padding-top: 66px !important;
}

.padding-bottom-66 {
  padding-bottom: 66px !important;
}

.padding-left-66 {
  padding-left: 66px !important;
}

.padding-right-66 {
  padding-right: 66px !important;
}

.divider-66 {
  height: 66px !important;
}

.margin-67 {
  margin: 67px !important;
}

.margin-top-67 {
  margin-top: 67px !important;
}

.margin-bottom-67 {
  margin-bottom: 67px !important;
}

.margin-left-67 {
  margin-left: 67px !important;
}

.margin-right-67 {
  margin-right: 67px !important;
}

.padding-67 {
  padding: 67px !important;
}

.padding-top-67 {
  padding-top: 67px !important;
}

.padding-bottom-67 {
  padding-bottom: 67px !important;
}

.padding-left-67 {
  padding-left: 67px !important;
}

.padding-right-67 {
  padding-right: 67px !important;
}

.divider-67 {
  height: 67px !important;
}

.margin-68 {
  margin: 68px !important;
}

.margin-top-68 {
  margin-top: 68px !important;
}

.margin-bottom-68 {
  margin-bottom: 68px !important;
}

.margin-left-68 {
  margin-left: 68px !important;
}

.margin-right-68 {
  margin-right: 68px !important;
}

.padding-68 {
  padding: 68px !important;
}

.padding-top-68 {
  padding-top: 68px !important;
}

.padding-bottom-68 {
  padding-bottom: 68px !important;
}

.padding-left-68 {
  padding-left: 68px !important;
}

.padding-right-68 {
  padding-right: 68px !important;
}

.divider-68 {
  height: 68px !important;
}

.margin-69 {
  margin: 69px !important;
}

.margin-top-69 {
  margin-top: 69px !important;
}

.margin-bottom-69 {
  margin-bottom: 69px !important;
}

.margin-left-69 {
  margin-left: 69px !important;
}

.margin-right-69 {
  margin-right: 69px !important;
}

.padding-69 {
  padding: 69px !important;
}

.padding-top-69 {
  padding-top: 69px !important;
}

.padding-bottom-69 {
  padding-bottom: 69px !important;
}

.padding-left-69 {
  padding-left: 69px !important;
}

.padding-right-69 {
  padding-right: 69px !important;
}

.divider-69 {
  height: 69px !important;
}

.margin-70 {
  margin: 70px !important;
}

.margin-top-70 {
  margin-top: 70px !important;
}

.margin-bottom-70 {
  margin-bottom: 70px !important;
}

.margin-left-70 {
  margin-left: 70px !important;
}

.margin-right-70 {
  margin-right: 70px !important;
}

.padding-70 {
  padding: 70px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-bottom-70 {
  padding-bottom: 70px !important;
}

.padding-left-70 {
  padding-left: 70px !important;
}

.padding-right-70 {
  padding-right: 70px !important;
}

.divider-70 {
  height: 70px !important;
}

.margin-71 {
  margin: 71px !important;
}

.margin-top-71 {
  margin-top: 71px !important;
}

.margin-bottom-71 {
  margin-bottom: 71px !important;
}

.margin-left-71 {
  margin-left: 71px !important;
}

.margin-right-71 {
  margin-right: 71px !important;
}

.padding-71 {
  padding: 71px !important;
}

.padding-top-71 {
  padding-top: 71px !important;
}

.padding-bottom-71 {
  padding-bottom: 71px !important;
}

.padding-left-71 {
  padding-left: 71px !important;
}

.padding-right-71 {
  padding-right: 71px !important;
}

.divider-71 {
  height: 71px !important;
}

.margin-72 {
  margin: 72px !important;
}

.margin-top-72 {
  margin-top: 72px !important;
}

.margin-bottom-72 {
  margin-bottom: 72px !important;
}

.margin-left-72 {
  margin-left: 72px !important;
}

.margin-right-72 {
  margin-right: 72px !important;
}

.padding-72 {
  padding: 72px !important;
}

.padding-top-72 {
  padding-top: 72px !important;
}

.padding-bottom-72 {
  padding-bottom: 72px !important;
}

.padding-left-72 {
  padding-left: 72px !important;
}

.padding-right-72 {
  padding-right: 72px !important;
}

.divider-72 {
  height: 72px !important;
}

.margin-73 {
  margin: 73px !important;
}

.margin-top-73 {
  margin-top: 73px !important;
}

.margin-bottom-73 {
  margin-bottom: 73px !important;
}

.margin-left-73 {
  margin-left: 73px !important;
}

.margin-right-73 {
  margin-right: 73px !important;
}

.padding-73 {
  padding: 73px !important;
}

.padding-top-73 {
  padding-top: 73px !important;
}

.padding-bottom-73 {
  padding-bottom: 73px !important;
}

.padding-left-73 {
  padding-left: 73px !important;
}

.padding-right-73 {
  padding-right: 73px !important;
}

.divider-73 {
  height: 73px !important;
}

.margin-74 {
  margin: 74px !important;
}

.margin-top-74 {
  margin-top: 74px !important;
}

.margin-bottom-74 {
  margin-bottom: 74px !important;
}

.margin-left-74 {
  margin-left: 74px !important;
}

.margin-right-74 {
  margin-right: 74px !important;
}

.padding-74 {
  padding: 74px !important;
}

.padding-top-74 {
  padding-top: 74px !important;
}

.padding-bottom-74 {
  padding-bottom: 74px !important;
}

.padding-left-74 {
  padding-left: 74px !important;
}

.padding-right-74 {
  padding-right: 74px !important;
}

.divider-74 {
  height: 74px !important;
}

.margin-75 {
  margin: 75px !important;
}

.margin-top-75 {
  margin-top: 75px !important;
}

.margin-bottom-75 {
  margin-bottom: 75px !important;
}

.margin-left-75 {
  margin-left: 75px !important;
}

.margin-right-75 {
  margin-right: 75px !important;
}

.padding-75 {
  padding: 75px !important;
}

.padding-top-75 {
  padding-top: 75px !important;
}

.padding-bottom-75 {
  padding-bottom: 75px !important;
}

.padding-left-75 {
  padding-left: 75px !important;
}

.padding-right-75 {
  padding-right: 75px !important;
}

.divider-75 {
  height: 75px !important;
}

.margin-76 {
  margin: 76px !important;
}

.margin-top-76 {
  margin-top: 76px !important;
}

.margin-bottom-76 {
  margin-bottom: 76px !important;
}

.margin-left-76 {
  margin-left: 76px !important;
}

.margin-right-76 {
  margin-right: 76px !important;
}

.padding-76 {
  padding: 76px !important;
}

.padding-top-76 {
  padding-top: 76px !important;
}

.padding-bottom-76 {
  padding-bottom: 76px !important;
}

.padding-left-76 {
  padding-left: 76px !important;
}

.padding-right-76 {
  padding-right: 76px !important;
}

.divider-76 {
  height: 76px !important;
}

.margin-77 {
  margin: 77px !important;
}

.margin-top-77 {
  margin-top: 77px !important;
}

.margin-bottom-77 {
  margin-bottom: 77px !important;
}

.margin-left-77 {
  margin-left: 77px !important;
}

.margin-right-77 {
  margin-right: 77px !important;
}

.padding-77 {
  padding: 77px !important;
}

.padding-top-77 {
  padding-top: 77px !important;
}

.padding-bottom-77 {
  padding-bottom: 77px !important;
}

.padding-left-77 {
  padding-left: 77px !important;
}

.padding-right-77 {
  padding-right: 77px !important;
}

.divider-77 {
  height: 77px !important;
}

.margin-78 {
  margin: 78px !important;
}

.margin-top-78 {
  margin-top: 78px !important;
}

.margin-bottom-78 {
  margin-bottom: 78px !important;
}

.margin-left-78 {
  margin-left: 78px !important;
}

.margin-right-78 {
  margin-right: 78px !important;
}

.padding-78 {
  padding: 78px !important;
}

.padding-top-78 {
  padding-top: 78px !important;
}

.padding-bottom-78 {
  padding-bottom: 78px !important;
}

.padding-left-78 {
  padding-left: 78px !important;
}

.padding-right-78 {
  padding-right: 78px !important;
}

.divider-78 {
  height: 78px !important;
}

.margin-79 {
  margin: 79px !important;
}

.margin-top-79 {
  margin-top: 79px !important;
}

.margin-bottom-79 {
  margin-bottom: 79px !important;
}

.margin-left-79 {
  margin-left: 79px !important;
}

.margin-right-79 {
  margin-right: 79px !important;
}

.padding-79 {
  padding: 79px !important;
}

.padding-top-79 {
  padding-top: 79px !important;
}

.padding-bottom-79 {
  padding-bottom: 79px !important;
}

.padding-left-79 {
  padding-left: 79px !important;
}

.padding-right-79 {
  padding-right: 79px !important;
}

.divider-79 {
  height: 79px !important;
}

.margin-80 {
  margin: 80px !important;
}

.margin-top-80 {
  margin-top: 80px !important;
}

.margin-bottom-80 {
  margin-bottom: 80px !important;
}

.margin-left-80 {
  margin-left: 80px !important;
}

.margin-right-80 {
  margin-right: 80px !important;
}

.padding-80 {
  padding: 80px !important;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-left-80 {
  padding-left: 80px !important;
}

.padding-right-80 {
  padding-right: 80px !important;
}

.divider-80 {
  height: 80px !important;
}

.margin-81 {
  margin: 81px !important;
}

.margin-top-81 {
  margin-top: 81px !important;
}

.margin-bottom-81 {
  margin-bottom: 81px !important;
}

.margin-left-81 {
  margin-left: 81px !important;
}

.margin-right-81 {
  margin-right: 81px !important;
}

.padding-81 {
  padding: 81px !important;
}

.padding-top-81 {
  padding-top: 81px !important;
}

.padding-bottom-81 {
  padding-bottom: 81px !important;
}

.padding-left-81 {
  padding-left: 81px !important;
}

.padding-right-81 {
  padding-right: 81px !important;
}

.divider-81 {
  height: 81px !important;
}

.margin-82 {
  margin: 82px !important;
}

.margin-top-82 {
  margin-top: 82px !important;
}

.margin-bottom-82 {
  margin-bottom: 82px !important;
}

.margin-left-82 {
  margin-left: 82px !important;
}

.margin-right-82 {
  margin-right: 82px !important;
}

.padding-82 {
  padding: 82px !important;
}

.padding-top-82 {
  padding-top: 82px !important;
}

.padding-bottom-82 {
  padding-bottom: 82px !important;
}

.padding-left-82 {
  padding-left: 82px !important;
}

.padding-right-82 {
  padding-right: 82px !important;
}

.divider-82 {
  height: 82px !important;
}

.margin-83 {
  margin: 83px !important;
}

.margin-top-83 {
  margin-top: 83px !important;
}

.margin-bottom-83 {
  margin-bottom: 83px !important;
}

.margin-left-83 {
  margin-left: 83px !important;
}

.margin-right-83 {
  margin-right: 83px !important;
}

.padding-83 {
  padding: 83px !important;
}

.padding-top-83 {
  padding-top: 83px !important;
}

.padding-bottom-83 {
  padding-bottom: 83px !important;
}

.padding-left-83 {
  padding-left: 83px !important;
}

.padding-right-83 {
  padding-right: 83px !important;
}

.divider-83 {
  height: 83px !important;
}

.margin-84 {
  margin: 84px !important;
}

.margin-top-84 {
  margin-top: 84px !important;
}

.margin-bottom-84 {
  margin-bottom: 84px !important;
}

.margin-left-84 {
  margin-left: 84px !important;
}

.margin-right-84 {
  margin-right: 84px !important;
}

.padding-84 {
  padding: 84px !important;
}

.padding-top-84 {
  padding-top: 84px !important;
}

.padding-bottom-84 {
  padding-bottom: 84px !important;
}

.padding-left-84 {
  padding-left: 84px !important;
}

.padding-right-84 {
  padding-right: 84px !important;
}

.divider-84 {
  height: 84px !important;
}

.margin-85 {
  margin: 85px !important;
}

.margin-top-85 {
  margin-top: 85px !important;
}

.margin-bottom-85 {
  margin-bottom: 85px !important;
}

.margin-left-85 {
  margin-left: 85px !important;
}

.margin-right-85 {
  margin-right: 85px !important;
}

.padding-85 {
  padding: 85px !important;
}

.padding-top-85 {
  padding-top: 85px !important;
}

.padding-bottom-85 {
  padding-bottom: 85px !important;
}

.padding-left-85 {
  padding-left: 85px !important;
}

.padding-right-85 {
  padding-right: 85px !important;
}

.divider-85 {
  height: 85px !important;
}

.margin-86 {
  margin: 86px !important;
}

.margin-top-86 {
  margin-top: 86px !important;
}

.margin-bottom-86 {
  margin-bottom: 86px !important;
}

.margin-left-86 {
  margin-left: 86px !important;
}

.margin-right-86 {
  margin-right: 86px !important;
}

.padding-86 {
  padding: 86px !important;
}

.padding-top-86 {
  padding-top: 86px !important;
}

.padding-bottom-86 {
  padding-bottom: 86px !important;
}

.padding-left-86 {
  padding-left: 86px !important;
}

.padding-right-86 {
  padding-right: 86px !important;
}

.divider-86 {
  height: 86px !important;
}

.margin-87 {
  margin: 87px !important;
}

.margin-top-87 {
  margin-top: 87px !important;
}

.margin-bottom-87 {
  margin-bottom: 87px !important;
}

.margin-left-87 {
  margin-left: 87px !important;
}

.margin-right-87 {
  margin-right: 87px !important;
}

.padding-87 {
  padding: 87px !important;
}

.padding-top-87 {
  padding-top: 87px !important;
}

.padding-bottom-87 {
  padding-bottom: 87px !important;
}

.padding-left-87 {
  padding-left: 87px !important;
}

.padding-right-87 {
  padding-right: 87px !important;
}

.divider-87 {
  height: 87px !important;
}

.margin-88 {
  margin: 88px !important;
}

.margin-top-88 {
  margin-top: 88px !important;
}

.margin-bottom-88 {
  margin-bottom: 88px !important;
}

.margin-left-88 {
  margin-left: 88px !important;
}

.margin-right-88 {
  margin-right: 88px !important;
}

.padding-88 {
  padding: 88px !important;
}

.padding-top-88 {
  padding-top: 88px !important;
}

.padding-bottom-88 {
  padding-bottom: 88px !important;
}

.padding-left-88 {
  padding-left: 88px !important;
}

.padding-right-88 {
  padding-right: 88px !important;
}

.divider-88 {
  height: 88px !important;
}

.margin-89 {
  margin: 89px !important;
}

.margin-top-89 {
  margin-top: 89px !important;
}

.margin-bottom-89 {
  margin-bottom: 89px !important;
}

.margin-left-89 {
  margin-left: 89px !important;
}

.margin-right-89 {
  margin-right: 89px !important;
}

.padding-89 {
  padding: 89px !important;
}

.padding-top-89 {
  padding-top: 89px !important;
}

.padding-bottom-89 {
  padding-bottom: 89px !important;
}

.padding-left-89 {
  padding-left: 89px !important;
}

.padding-right-89 {
  padding-right: 89px !important;
}

.divider-89 {
  height: 89px !important;
}

.margin-90 {
  margin: 90px !important;
}

.margin-top-90 {
  margin-top: 90px !important;
}

.margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-left-90 {
  margin-left: 90px !important;
}

.margin-right-90 {
  margin-right: 90px !important;
}

.padding-90 {
  padding: 90px !important;
}

.padding-top-90 {
  padding-top: 90px !important;
}

.padding-bottom-90 {
  padding-bottom: 90px !important;
}

.padding-left-90 {
  padding-left: 90px !important;
}

.padding-right-90 {
  padding-right: 90px !important;
}

.divider-90 {
  height: 90px !important;
}

.margin-91 {
  margin: 91px !important;
}

.margin-top-91 {
  margin-top: 91px !important;
}

.margin-bottom-91 {
  margin-bottom: 91px !important;
}

.margin-left-91 {
  margin-left: 91px !important;
}

.margin-right-91 {
  margin-right: 91px !important;
}

.padding-91 {
  padding: 91px !important;
}

.padding-top-91 {
  padding-top: 91px !important;
}

.padding-bottom-91 {
  padding-bottom: 91px !important;
}

.padding-left-91 {
  padding-left: 91px !important;
}

.padding-right-91 {
  padding-right: 91px !important;
}

.divider-91 {
  height: 91px !important;
}

.margin-92 {
  margin: 92px !important;
}

.margin-top-92 {
  margin-top: 92px !important;
}

.margin-bottom-92 {
  margin-bottom: 92px !important;
}

.margin-left-92 {
  margin-left: 92px !important;
}

.margin-right-92 {
  margin-right: 92px !important;
}

.padding-92 {
  padding: 92px !important;
}

.padding-top-92 {
  padding-top: 92px !important;
}

.padding-bottom-92 {
  padding-bottom: 92px !important;
}

.padding-left-92 {
  padding-left: 92px !important;
}

.padding-right-92 {
  padding-right: 92px !important;
}

.divider-92 {
  height: 92px !important;
}

.margin-93 {
  margin: 93px !important;
}

.margin-top-93 {
  margin-top: 93px !important;
}

.margin-bottom-93 {
  margin-bottom: 93px !important;
}

.margin-left-93 {
  margin-left: 93px !important;
}

.margin-right-93 {
  margin-right: 93px !important;
}

.padding-93 {
  padding: 93px !important;
}

.padding-top-93 {
  padding-top: 93px !important;
}

.padding-bottom-93 {
  padding-bottom: 93px !important;
}

.padding-left-93 {
  padding-left: 93px !important;
}

.padding-right-93 {
  padding-right: 93px !important;
}

.divider-93 {
  height: 93px !important;
}

.margin-94 {
  margin: 94px !important;
}

.margin-top-94 {
  margin-top: 94px !important;
}

.margin-bottom-94 {
  margin-bottom: 94px !important;
}

.margin-left-94 {
  margin-left: 94px !important;
}

.margin-right-94 {
  margin-right: 94px !important;
}

.padding-94 {
  padding: 94px !important;
}

.padding-top-94 {
  padding-top: 94px !important;
}

.padding-bottom-94 {
  padding-bottom: 94px !important;
}

.padding-left-94 {
  padding-left: 94px !important;
}

.padding-right-94 {
  padding-right: 94px !important;
}

.divider-94 {
  height: 94px !important;
}

.margin-95 {
  margin: 95px !important;
}

.margin-top-95 {
  margin-top: 95px !important;
}

.margin-bottom-95 {
  margin-bottom: 95px !important;
}

.margin-left-95 {
  margin-left: 95px !important;
}

.margin-right-95 {
  margin-right: 95px !important;
}

.padding-95 {
  padding: 95px !important;
}

.padding-top-95 {
  padding-top: 95px !important;
}

.padding-bottom-95 {
  padding-bottom: 95px !important;
}

.padding-left-95 {
  padding-left: 95px !important;
}

.padding-right-95 {
  padding-right: 95px !important;
}

.divider-95 {
  height: 95px !important;
}

.margin-96 {
  margin: 96px !important;
}

.margin-top-96 {
  margin-top: 96px !important;
}

.margin-bottom-96 {
  margin-bottom: 96px !important;
}

.margin-left-96 {
  margin-left: 96px !important;
}

.margin-right-96 {
  margin-right: 96px !important;
}

.padding-96 {
  padding: 96px !important;
}

.padding-top-96 {
  padding-top: 96px !important;
}

.padding-bottom-96 {
  padding-bottom: 96px !important;
}

.padding-left-96 {
  padding-left: 96px !important;
}

.padding-right-96 {
  padding-right: 96px !important;
}

.divider-96 {
  height: 96px !important;
}

.margin-97 {
  margin: 97px !important;
}

.margin-top-97 {
  margin-top: 97px !important;
}

.margin-bottom-97 {
  margin-bottom: 97px !important;
}

.margin-left-97 {
  margin-left: 97px !important;
}

.margin-right-97 {
  margin-right: 97px !important;
}

.padding-97 {
  padding: 97px !important;
}

.padding-top-97 {
  padding-top: 97px !important;
}

.padding-bottom-97 {
  padding-bottom: 97px !important;
}

.padding-left-97 {
  padding-left: 97px !important;
}

.padding-right-97 {
  padding-right: 97px !important;
}

.divider-97 {
  height: 97px !important;
}

.margin-98 {
  margin: 98px !important;
}

.margin-top-98 {
  margin-top: 98px !important;
}

.margin-bottom-98 {
  margin-bottom: 98px !important;
}

.margin-left-98 {
  margin-left: 98px !important;
}

.margin-right-98 {
  margin-right: 98px !important;
}

.padding-98 {
  padding: 98px !important;
}

.padding-top-98 {
  padding-top: 98px !important;
}

.padding-bottom-98 {
  padding-bottom: 98px !important;
}

.padding-left-98 {
  padding-left: 98px !important;
}

.padding-right-98 {
  padding-right: 98px !important;
}

.divider-98 {
  height: 98px !important;
}

.margin-99 {
  margin: 99px !important;
}

.margin-top-99 {
  margin-top: 99px !important;
}

.margin-bottom-99 {
  margin-bottom: 99px !important;
}

.margin-left-99 {
  margin-left: 99px !important;
}

.margin-right-99 {
  margin-right: 99px !important;
}

.padding-99 {
  padding: 99px !important;
}

.padding-top-99 {
  padding-top: 99px !important;
}

.padding-bottom-99 {
  padding-bottom: 99px !important;
}

.padding-left-99 {
  padding-left: 99px !important;
}

.padding-right-99 {
  padding-right: 99px !important;
}

.divider-99 {
  height: 99px !important;
}

.margin-100 {
  margin: 100px !important;
}

.margin-top-100 {
  margin-top: 100px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

.margin-left-100 {
  margin-left: 100px !important;
}

.margin-right-100 {
  margin-right: 100px !important;
}

.padding-100 {
  padding: 100px !important;
}

.padding-top-100 {
  padding-top: 100px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.padding-left-100 {
  padding-left: 100px !important;
}

.padding-right-100 {
  padding-right: 100px !important;
}

.divider-100 {
  height: 100px !important;
}

.margin-101 {
  margin: 101px !important;
}

.margin-top-101 {
  margin-top: 101px !important;
}

.margin-bottom-101 {
  margin-bottom: 101px !important;
}

.margin-left-101 {
  margin-left: 101px !important;
}

.margin-right-101 {
  margin-right: 101px !important;
}

.padding-101 {
  padding: 101px !important;
}

.padding-top-101 {
  padding-top: 101px !important;
}

.padding-bottom-101 {
  padding-bottom: 101px !important;
}

.padding-left-101 {
  padding-left: 101px !important;
}

.padding-right-101 {
  padding-right: 101px !important;
}

.divider-101 {
  height: 101px !important;
}

.margin-102 {
  margin: 102px !important;
}

.margin-top-102 {
  margin-top: 102px !important;
}

.margin-bottom-102 {
  margin-bottom: 102px !important;
}

.margin-left-102 {
  margin-left: 102px !important;
}

.margin-right-102 {
  margin-right: 102px !important;
}

.padding-102 {
  padding: 102px !important;
}

.padding-top-102 {
  padding-top: 102px !important;
}

.padding-bottom-102 {
  padding-bottom: 102px !important;
}

.padding-left-102 {
  padding-left: 102px !important;
}

.padding-right-102 {
  padding-right: 102px !important;
}

.divider-102 {
  height: 102px !important;
}

.margin-103 {
  margin: 103px !important;
}

.margin-top-103 {
  margin-top: 103px !important;
}

.margin-bottom-103 {
  margin-bottom: 103px !important;
}

.margin-left-103 {
  margin-left: 103px !important;
}

.margin-right-103 {
  margin-right: 103px !important;
}

.padding-103 {
  padding: 103px !important;
}

.padding-top-103 {
  padding-top: 103px !important;
}

.padding-bottom-103 {
  padding-bottom: 103px !important;
}

.padding-left-103 {
  padding-left: 103px !important;
}

.padding-right-103 {
  padding-right: 103px !important;
}

.divider-103 {
  height: 103px !important;
}

.margin-104 {
  margin: 104px !important;
}

.margin-top-104 {
  margin-top: 104px !important;
}

.margin-bottom-104 {
  margin-bottom: 104px !important;
}

.margin-left-104 {
  margin-left: 104px !important;
}

.margin-right-104 {
  margin-right: 104px !important;
}

.padding-104 {
  padding: 104px !important;
}

.padding-top-104 {
  padding-top: 104px !important;
}

.padding-bottom-104 {
  padding-bottom: 104px !important;
}

.padding-left-104 {
  padding-left: 104px !important;
}

.padding-right-104 {
  padding-right: 104px !important;
}

.divider-104 {
  height: 104px !important;
}

.margin-105 {
  margin: 105px !important;
}

.margin-top-105 {
  margin-top: 105px !important;
}

.margin-bottom-105 {
  margin-bottom: 105px !important;
}

.margin-left-105 {
  margin-left: 105px !important;
}

.margin-right-105 {
  margin-right: 105px !important;
}

.padding-105 {
  padding: 105px !important;
}

.padding-top-105 {
  padding-top: 105px !important;
}

.padding-bottom-105 {
  padding-bottom: 105px !important;
}

.padding-left-105 {
  padding-left: 105px !important;
}

.padding-right-105 {
  padding-right: 105px !important;
}

.divider-105 {
  height: 105px !important;
}

.margin-106 {
  margin: 106px !important;
}

.margin-top-106 {
  margin-top: 106px !important;
}

.margin-bottom-106 {
  margin-bottom: 106px !important;
}

.margin-left-106 {
  margin-left: 106px !important;
}

.margin-right-106 {
  margin-right: 106px !important;
}

.padding-106 {
  padding: 106px !important;
}

.padding-top-106 {
  padding-top: 106px !important;
}

.padding-bottom-106 {
  padding-bottom: 106px !important;
}

.padding-left-106 {
  padding-left: 106px !important;
}

.padding-right-106 {
  padding-right: 106px !important;
}

.divider-106 {
  height: 106px !important;
}

.margin-107 {
  margin: 107px !important;
}

.margin-top-107 {
  margin-top: 107px !important;
}

.margin-bottom-107 {
  margin-bottom: 107px !important;
}

.margin-left-107 {
  margin-left: 107px !important;
}

.margin-right-107 {
  margin-right: 107px !important;
}

.padding-107 {
  padding: 107px !important;
}

.padding-top-107 {
  padding-top: 107px !important;
}

.padding-bottom-107 {
  padding-bottom: 107px !important;
}

.padding-left-107 {
  padding-left: 107px !important;
}

.padding-right-107 {
  padding-right: 107px !important;
}

.divider-107 {
  height: 107px !important;
}

.margin-108 {
  margin: 108px !important;
}

.margin-top-108 {
  margin-top: 108px !important;
}

.margin-bottom-108 {
  margin-bottom: 108px !important;
}

.margin-left-108 {
  margin-left: 108px !important;
}

.margin-right-108 {
  margin-right: 108px !important;
}

.padding-108 {
  padding: 108px !important;
}

.padding-top-108 {
  padding-top: 108px !important;
}

.padding-bottom-108 {
  padding-bottom: 108px !important;
}

.padding-left-108 {
  padding-left: 108px !important;
}

.padding-right-108 {
  padding-right: 108px !important;
}

.divider-108 {
  height: 108px !important;
}

.margin-109 {
  margin: 109px !important;
}

.margin-top-109 {
  margin-top: 109px !important;
}

.margin-bottom-109 {
  margin-bottom: 109px !important;
}

.margin-left-109 {
  margin-left: 109px !important;
}

.margin-right-109 {
  margin-right: 109px !important;
}

.padding-109 {
  padding: 109px !important;
}

.padding-top-109 {
  padding-top: 109px !important;
}

.padding-bottom-109 {
  padding-bottom: 109px !important;
}

.padding-left-109 {
  padding-left: 109px !important;
}

.padding-right-109 {
  padding-right: 109px !important;
}

.divider-109 {
  height: 109px !important;
}

.margin-110 {
  margin: 110px !important;
}

.margin-top-110 {
  margin-top: 110px !important;
}

.margin-bottom-110 {
  margin-bottom: 110px !important;
}

.margin-left-110 {
  margin-left: 110px !important;
}

.margin-right-110 {
  margin-right: 110px !important;
}

.padding-110 {
  padding: 110px !important;
}

.padding-top-110 {
  padding-top: 110px !important;
}

.padding-bottom-110 {
  padding-bottom: 110px !important;
}

.padding-left-110 {
  padding-left: 110px !important;
}

.padding-right-110 {
  padding-right: 110px !important;
}

.divider-110 {
  height: 110px !important;
}

.margin-111 {
  margin: 111px !important;
}

.margin-top-111 {
  margin-top: 111px !important;
}

.margin-bottom-111 {
  margin-bottom: 111px !important;
}

.margin-left-111 {
  margin-left: 111px !important;
}

.margin-right-111 {
  margin-right: 111px !important;
}

.padding-111 {
  padding: 111px !important;
}

.padding-top-111 {
  padding-top: 111px !important;
}

.padding-bottom-111 {
  padding-bottom: 111px !important;
}

.padding-left-111 {
  padding-left: 111px !important;
}

.padding-right-111 {
  padding-right: 111px !important;
}

.divider-111 {
  height: 111px !important;
}

.margin-112 {
  margin: 112px !important;
}

.margin-top-112 {
  margin-top: 112px !important;
}

.margin-bottom-112 {
  margin-bottom: 112px !important;
}

.margin-left-112 {
  margin-left: 112px !important;
}

.margin-right-112 {
  margin-right: 112px !important;
}

.padding-112 {
  padding: 112px !important;
}

.padding-top-112 {
  padding-top: 112px !important;
}

.padding-bottom-112 {
  padding-bottom: 112px !important;
}

.padding-left-112 {
  padding-left: 112px !important;
}

.padding-right-112 {
  padding-right: 112px !important;
}

.divider-112 {
  height: 112px !important;
}

.margin-113 {
  margin: 113px !important;
}

.margin-top-113 {
  margin-top: 113px !important;
}

.margin-bottom-113 {
  margin-bottom: 113px !important;
}

.margin-left-113 {
  margin-left: 113px !important;
}

.margin-right-113 {
  margin-right: 113px !important;
}

.padding-113 {
  padding: 113px !important;
}

.padding-top-113 {
  padding-top: 113px !important;
}

.padding-bottom-113 {
  padding-bottom: 113px !important;
}

.padding-left-113 {
  padding-left: 113px !important;
}

.padding-right-113 {
  padding-right: 113px !important;
}

.divider-113 {
  height: 113px !important;
}

.margin-114 {
  margin: 114px !important;
}

.margin-top-114 {
  margin-top: 114px !important;
}

.margin-bottom-114 {
  margin-bottom: 114px !important;
}

.margin-left-114 {
  margin-left: 114px !important;
}

.margin-right-114 {
  margin-right: 114px !important;
}

.padding-114 {
  padding: 114px !important;
}

.padding-top-114 {
  padding-top: 114px !important;
}

.padding-bottom-114 {
  padding-bottom: 114px !important;
}

.padding-left-114 {
  padding-left: 114px !important;
}

.padding-right-114 {
  padding-right: 114px !important;
}

.divider-114 {
  height: 114px !important;
}

.margin-115 {
  margin: 115px !important;
}

.margin-top-115 {
  margin-top: 115px !important;
}

.margin-bottom-115 {
  margin-bottom: 115px !important;
}

.margin-left-115 {
  margin-left: 115px !important;
}

.margin-right-115 {
  margin-right: 115px !important;
}

.padding-115 {
  padding: 115px !important;
}

.padding-top-115 {
  padding-top: 115px !important;
}

.padding-bottom-115 {
  padding-bottom: 115px !important;
}

.padding-left-115 {
  padding-left: 115px !important;
}

.padding-right-115 {
  padding-right: 115px !important;
}

.divider-115 {
  height: 115px !important;
}

.margin-116 {
  margin: 116px !important;
}

.margin-top-116 {
  margin-top: 116px !important;
}

.margin-bottom-116 {
  margin-bottom: 116px !important;
}

.margin-left-116 {
  margin-left: 116px !important;
}

.margin-right-116 {
  margin-right: 116px !important;
}

.padding-116 {
  padding: 116px !important;
}

.padding-top-116 {
  padding-top: 116px !important;
}

.padding-bottom-116 {
  padding-bottom: 116px !important;
}

.padding-left-116 {
  padding-left: 116px !important;
}

.padding-right-116 {
  padding-right: 116px !important;
}

.divider-116 {
  height: 116px !important;
}

.margin-117 {
  margin: 117px !important;
}

.margin-top-117 {
  margin-top: 117px !important;
}

.margin-bottom-117 {
  margin-bottom: 117px !important;
}

.margin-left-117 {
  margin-left: 117px !important;
}

.margin-right-117 {
  margin-right: 117px !important;
}

.padding-117 {
  padding: 117px !important;
}

.padding-top-117 {
  padding-top: 117px !important;
}

.padding-bottom-117 {
  padding-bottom: 117px !important;
}

.padding-left-117 {
  padding-left: 117px !important;
}

.padding-right-117 {
  padding-right: 117px !important;
}

.divider-117 {
  height: 117px !important;
}

.margin-118 {
  margin: 118px !important;
}

.margin-top-118 {
  margin-top: 118px !important;
}

.margin-bottom-118 {
  margin-bottom: 118px !important;
}

.margin-left-118 {
  margin-left: 118px !important;
}

.margin-right-118 {
  margin-right: 118px !important;
}

.padding-118 {
  padding: 118px !important;
}

.padding-top-118 {
  padding-top: 118px !important;
}

.padding-bottom-118 {
  padding-bottom: 118px !important;
}

.padding-left-118 {
  padding-left: 118px !important;
}

.padding-right-118 {
  padding-right: 118px !important;
}

.divider-118 {
  height: 118px !important;
}

.margin-119 {
  margin: 119px !important;
}

.margin-top-119 {
  margin-top: 119px !important;
}

.margin-bottom-119 {
  margin-bottom: 119px !important;
}

.margin-left-119 {
  margin-left: 119px !important;
}

.margin-right-119 {
  margin-right: 119px !important;
}

.padding-119 {
  padding: 119px !important;
}

.padding-top-119 {
  padding-top: 119px !important;
}

.padding-bottom-119 {
  padding-bottom: 119px !important;
}

.padding-left-119 {
  padding-left: 119px !important;
}

.padding-right-119 {
  padding-right: 119px !important;
}

.divider-119 {
  height: 119px !important;
}

.margin-120 {
  margin: 120px !important;
}

.margin-top-120 {
  margin-top: 120px !important;
}

.margin-bottom-120 {
  margin-bottom: 120px !important;
}

.margin-left-120 {
  margin-left: 120px !important;
}

.margin-right-120 {
  margin-right: 120px !important;
}

.padding-120 {
  padding: 120px !important;
}

.padding-top-120 {
  padding-top: 120px !important;
}

.padding-bottom-120 {
  padding-bottom: 120px !important;
}

.padding-left-120 {
  padding-left: 120px !important;
}

.padding-right-120 {
  padding-right: 120px !important;
}

.divider-120 {
  height: 120px !important;
}

.margin-121 {
  margin: 121px !important;
}

.margin-top-121 {
  margin-top: 121px !important;
}

.margin-bottom-121 {
  margin-bottom: 121px !important;
}

.margin-left-121 {
  margin-left: 121px !important;
}

.margin-right-121 {
  margin-right: 121px !important;
}

.padding-121 {
  padding: 121px !important;
}

.padding-top-121 {
  padding-top: 121px !important;
}

.padding-bottom-121 {
  padding-bottom: 121px !important;
}

.padding-left-121 {
  padding-left: 121px !important;
}

.padding-right-121 {
  padding-right: 121px !important;
}

.divider-121 {
  height: 121px !important;
}

.margin-122 {
  margin: 122px !important;
}

.margin-top-122 {
  margin-top: 122px !important;
}

.margin-bottom-122 {
  margin-bottom: 122px !important;
}

.margin-left-122 {
  margin-left: 122px !important;
}

.margin-right-122 {
  margin-right: 122px !important;
}

.padding-122 {
  padding: 122px !important;
}

.padding-top-122 {
  padding-top: 122px !important;
}

.padding-bottom-122 {
  padding-bottom: 122px !important;
}

.padding-left-122 {
  padding-left: 122px !important;
}

.padding-right-122 {
  padding-right: 122px !important;
}

.divider-122 {
  height: 122px !important;
}

.margin-123 {
  margin: 123px !important;
}

.margin-top-123 {
  margin-top: 123px !important;
}

.margin-bottom-123 {
  margin-bottom: 123px !important;
}

.margin-left-123 {
  margin-left: 123px !important;
}

.margin-right-123 {
  margin-right: 123px !important;
}

.padding-123 {
  padding: 123px !important;
}

.padding-top-123 {
  padding-top: 123px !important;
}

.padding-bottom-123 {
  padding-bottom: 123px !important;
}

.padding-left-123 {
  padding-left: 123px !important;
}

.padding-right-123 {
  padding-right: 123px !important;
}

.divider-123 {
  height: 123px !important;
}

.margin-124 {
  margin: 124px !important;
}

.margin-top-124 {
  margin-top: 124px !important;
}

.margin-bottom-124 {
  margin-bottom: 124px !important;
}

.margin-left-124 {
  margin-left: 124px !important;
}

.margin-right-124 {
  margin-right: 124px !important;
}

.padding-124 {
  padding: 124px !important;
}

.padding-top-124 {
  padding-top: 124px !important;
}

.padding-bottom-124 {
  padding-bottom: 124px !important;
}

.padding-left-124 {
  padding-left: 124px !important;
}

.padding-right-124 {
  padding-right: 124px !important;
}

.divider-124 {
  height: 124px !important;
}

.margin-125 {
  margin: 125px !important;
}

.margin-top-125 {
  margin-top: 125px !important;
}

.margin-bottom-125 {
  margin-bottom: 125px !important;
}

.margin-left-125 {
  margin-left: 125px !important;
}

.margin-right-125 {
  margin-right: 125px !important;
}

.padding-125 {
  padding: 125px !important;
}

.padding-top-125 {
  padding-top: 125px !important;
}

.padding-bottom-125 {
  padding-bottom: 125px !important;
}

.padding-left-125 {
  padding-left: 125px !important;
}

.padding-right-125 {
  padding-right: 125px !important;
}

.divider-125 {
  height: 125px !important;
}

.margin-126 {
  margin: 126px !important;
}

.margin-top-126 {
  margin-top: 126px !important;
}

.margin-bottom-126 {
  margin-bottom: 126px !important;
}

.margin-left-126 {
  margin-left: 126px !important;
}

.margin-right-126 {
  margin-right: 126px !important;
}

.padding-126 {
  padding: 126px !important;
}

.padding-top-126 {
  padding-top: 126px !important;
}

.padding-bottom-126 {
  padding-bottom: 126px !important;
}

.padding-left-126 {
  padding-left: 126px !important;
}

.padding-right-126 {
  padding-right: 126px !important;
}

.divider-126 {
  height: 126px !important;
}

.margin-127 {
  margin: 127px !important;
}

.margin-top-127 {
  margin-top: 127px !important;
}

.margin-bottom-127 {
  margin-bottom: 127px !important;
}

.margin-left-127 {
  margin-left: 127px !important;
}

.margin-right-127 {
  margin-right: 127px !important;
}

.padding-127 {
  padding: 127px !important;
}

.padding-top-127 {
  padding-top: 127px !important;
}

.padding-bottom-127 {
  padding-bottom: 127px !important;
}

.padding-left-127 {
  padding-left: 127px !important;
}

.padding-right-127 {
  padding-right: 127px !important;
}

.divider-127 {
  height: 127px !important;
}

.margin-128 {
  margin: 128px !important;
}

.margin-top-128 {
  margin-top: 128px !important;
}

.margin-bottom-128 {
  margin-bottom: 128px !important;
}

.margin-left-128 {
  margin-left: 128px !important;
}

.margin-right-128 {
  margin-right: 128px !important;
}

.padding-128 {
  padding: 128px !important;
}

.padding-top-128 {
  padding-top: 128px !important;
}

.padding-bottom-128 {
  padding-bottom: 128px !important;
}

.padding-left-128 {
  padding-left: 128px !important;
}

.padding-right-128 {
  padding-right: 128px !important;
}

.divider-128 {
  height: 128px !important;
}

.margin-129 {
  margin: 129px !important;
}

.margin-top-129 {
  margin-top: 129px !important;
}

.margin-bottom-129 {
  margin-bottom: 129px !important;
}

.margin-left-129 {
  margin-left: 129px !important;
}

.margin-right-129 {
  margin-right: 129px !important;
}

.padding-129 {
  padding: 129px !important;
}

.padding-top-129 {
  padding-top: 129px !important;
}

.padding-bottom-129 {
  padding-bottom: 129px !important;
}

.padding-left-129 {
  padding-left: 129px !important;
}

.padding-right-129 {
  padding-right: 129px !important;
}

.divider-129 {
  height: 129px !important;
}

.margin-130 {
  margin: 130px !important;
}

.margin-top-130 {
  margin-top: 130px !important;
}

.margin-bottom-130 {
  margin-bottom: 130px !important;
}

.margin-left-130 {
  margin-left: 130px !important;
}

.margin-right-130 {
  margin-right: 130px !important;
}

.padding-130 {
  padding: 130px !important;
}

.padding-top-130 {
  padding-top: 130px !important;
}

.padding-bottom-130 {
  padding-bottom: 130px !important;
}

.padding-left-130 {
  padding-left: 130px !important;
}

.padding-right-130 {
  padding-right: 130px !important;
}

.divider-130 {
  height: 130px !important;
}

.margin-131 {
  margin: 131px !important;
}

.margin-top-131 {
  margin-top: 131px !important;
}

.margin-bottom-131 {
  margin-bottom: 131px !important;
}

.margin-left-131 {
  margin-left: 131px !important;
}

.margin-right-131 {
  margin-right: 131px !important;
}

.padding-131 {
  padding: 131px !important;
}

.padding-top-131 {
  padding-top: 131px !important;
}

.padding-bottom-131 {
  padding-bottom: 131px !important;
}

.padding-left-131 {
  padding-left: 131px !important;
}

.padding-right-131 {
  padding-right: 131px !important;
}

.divider-131 {
  height: 131px !important;
}

.margin-132 {
  margin: 132px !important;
}

.margin-top-132 {
  margin-top: 132px !important;
}

.margin-bottom-132 {
  margin-bottom: 132px !important;
}

.margin-left-132 {
  margin-left: 132px !important;
}

.margin-right-132 {
  margin-right: 132px !important;
}

.padding-132 {
  padding: 132px !important;
}

.padding-top-132 {
  padding-top: 132px !important;
}

.padding-bottom-132 {
  padding-bottom: 132px !important;
}

.padding-left-132 {
  padding-left: 132px !important;
}

.padding-right-132 {
  padding-right: 132px !important;
}

.divider-132 {
  height: 132px !important;
}

.margin-133 {
  margin: 133px !important;
}

.margin-top-133 {
  margin-top: 133px !important;
}

.margin-bottom-133 {
  margin-bottom: 133px !important;
}

.margin-left-133 {
  margin-left: 133px !important;
}

.margin-right-133 {
  margin-right: 133px !important;
}

.padding-133 {
  padding: 133px !important;
}

.padding-top-133 {
  padding-top: 133px !important;
}

.padding-bottom-133 {
  padding-bottom: 133px !important;
}

.padding-left-133 {
  padding-left: 133px !important;
}

.padding-right-133 {
  padding-right: 133px !important;
}

.divider-133 {
  height: 133px !important;
}

.margin-134 {
  margin: 134px !important;
}

.margin-top-134 {
  margin-top: 134px !important;
}

.margin-bottom-134 {
  margin-bottom: 134px !important;
}

.margin-left-134 {
  margin-left: 134px !important;
}

.margin-right-134 {
  margin-right: 134px !important;
}

.padding-134 {
  padding: 134px !important;
}

.padding-top-134 {
  padding-top: 134px !important;
}

.padding-bottom-134 {
  padding-bottom: 134px !important;
}

.padding-left-134 {
  padding-left: 134px !important;
}

.padding-right-134 {
  padding-right: 134px !important;
}

.divider-134 {
  height: 134px !important;
}

.margin-135 {
  margin: 135px !important;
}

.margin-top-135 {
  margin-top: 135px !important;
}

.margin-bottom-135 {
  margin-bottom: 135px !important;
}

.margin-left-135 {
  margin-left: 135px !important;
}

.margin-right-135 {
  margin-right: 135px !important;
}

.padding-135 {
  padding: 135px !important;
}

.padding-top-135 {
  padding-top: 135px !important;
}

.padding-bottom-135 {
  padding-bottom: 135px !important;
}

.padding-left-135 {
  padding-left: 135px !important;
}

.padding-right-135 {
  padding-right: 135px !important;
}

.divider-135 {
  height: 135px !important;
}

.margin-136 {
  margin: 136px !important;
}

.margin-top-136 {
  margin-top: 136px !important;
}

.margin-bottom-136 {
  margin-bottom: 136px !important;
}

.margin-left-136 {
  margin-left: 136px !important;
}

.margin-right-136 {
  margin-right: 136px !important;
}

.padding-136 {
  padding: 136px !important;
}

.padding-top-136 {
  padding-top: 136px !important;
}

.padding-bottom-136 {
  padding-bottom: 136px !important;
}

.padding-left-136 {
  padding-left: 136px !important;
}

.padding-right-136 {
  padding-right: 136px !important;
}

.divider-136 {
  height: 136px !important;
}

.margin-137 {
  margin: 137px !important;
}

.margin-top-137 {
  margin-top: 137px !important;
}

.margin-bottom-137 {
  margin-bottom: 137px !important;
}

.margin-left-137 {
  margin-left: 137px !important;
}

.margin-right-137 {
  margin-right: 137px !important;
}

.padding-137 {
  padding: 137px !important;
}

.padding-top-137 {
  padding-top: 137px !important;
}

.padding-bottom-137 {
  padding-bottom: 137px !important;
}

.padding-left-137 {
  padding-left: 137px !important;
}

.padding-right-137 {
  padding-right: 137px !important;
}

.divider-137 {
  height: 137px !important;
}

.margin-138 {
  margin: 138px !important;
}

.margin-top-138 {
  margin-top: 138px !important;
}

.margin-bottom-138 {
  margin-bottom: 138px !important;
}

.margin-left-138 {
  margin-left: 138px !important;
}

.margin-right-138 {
  margin-right: 138px !important;
}

.padding-138 {
  padding: 138px !important;
}

.padding-top-138 {
  padding-top: 138px !important;
}

.padding-bottom-138 {
  padding-bottom: 138px !important;
}

.padding-left-138 {
  padding-left: 138px !important;
}

.padding-right-138 {
  padding-right: 138px !important;
}

.divider-138 {
  height: 138px !important;
}

.margin-139 {
  margin: 139px !important;
}

.margin-top-139 {
  margin-top: 139px !important;
}

.margin-bottom-139 {
  margin-bottom: 139px !important;
}

.margin-left-139 {
  margin-left: 139px !important;
}

.margin-right-139 {
  margin-right: 139px !important;
}

.padding-139 {
  padding: 139px !important;
}

.padding-top-139 {
  padding-top: 139px !important;
}

.padding-bottom-139 {
  padding-bottom: 139px !important;
}

.padding-left-139 {
  padding-left: 139px !important;
}

.padding-right-139 {
  padding-right: 139px !important;
}

.divider-139 {
  height: 139px !important;
}

.margin-140 {
  margin: 140px !important;
}

.margin-top-140 {
  margin-top: 140px !important;
}

.margin-bottom-140 {
  margin-bottom: 140px !important;
}

.margin-left-140 {
  margin-left: 140px !important;
}

.margin-right-140 {
  margin-right: 140px !important;
}

.padding-140 {
  padding: 140px !important;
}

.padding-top-140 {
  padding-top: 140px !important;
}

.padding-bottom-140 {
  padding-bottom: 140px !important;
}

.padding-left-140 {
  padding-left: 140px !important;
}

.padding-right-140 {
  padding-right: 140px !important;
}

.divider-140 {
  height: 140px !important;
}

.margin-141 {
  margin: 141px !important;
}

.margin-top-141 {
  margin-top: 141px !important;
}

.margin-bottom-141 {
  margin-bottom: 141px !important;
}

.margin-left-141 {
  margin-left: 141px !important;
}

.margin-right-141 {
  margin-right: 141px !important;
}

.padding-141 {
  padding: 141px !important;
}

.padding-top-141 {
  padding-top: 141px !important;
}

.padding-bottom-141 {
  padding-bottom: 141px !important;
}

.padding-left-141 {
  padding-left: 141px !important;
}

.padding-right-141 {
  padding-right: 141px !important;
}

.divider-141 {
  height: 141px !important;
}

.margin-142 {
  margin: 142px !important;
}

.margin-top-142 {
  margin-top: 142px !important;
}

.margin-bottom-142 {
  margin-bottom: 142px !important;
}

.margin-left-142 {
  margin-left: 142px !important;
}

.margin-right-142 {
  margin-right: 142px !important;
}

.padding-142 {
  padding: 142px !important;
}

.padding-top-142 {
  padding-top: 142px !important;
}

.padding-bottom-142 {
  padding-bottom: 142px !important;
}

.padding-left-142 {
  padding-left: 142px !important;
}

.padding-right-142 {
  padding-right: 142px !important;
}

.divider-142 {
  height: 142px !important;
}

.margin-143 {
  margin: 143px !important;
}

.margin-top-143 {
  margin-top: 143px !important;
}

.margin-bottom-143 {
  margin-bottom: 143px !important;
}

.margin-left-143 {
  margin-left: 143px !important;
}

.margin-right-143 {
  margin-right: 143px !important;
}

.padding-143 {
  padding: 143px !important;
}

.padding-top-143 {
  padding-top: 143px !important;
}

.padding-bottom-143 {
  padding-bottom: 143px !important;
}

.padding-left-143 {
  padding-left: 143px !important;
}

.padding-right-143 {
  padding-right: 143px !important;
}

.divider-143 {
  height: 143px !important;
}

.margin-144 {
  margin: 144px !important;
}

.margin-top-144 {
  margin-top: 144px !important;
}

.margin-bottom-144 {
  margin-bottom: 144px !important;
}

.margin-left-144 {
  margin-left: 144px !important;
}

.margin-right-144 {
  margin-right: 144px !important;
}

.padding-144 {
  padding: 144px !important;
}

.padding-top-144 {
  padding-top: 144px !important;
}

.padding-bottom-144 {
  padding-bottom: 144px !important;
}

.padding-left-144 {
  padding-left: 144px !important;
}

.padding-right-144 {
  padding-right: 144px !important;
}

.divider-144 {
  height: 144px !important;
}

.margin-145 {
  margin: 145px !important;
}

.margin-top-145 {
  margin-top: 145px !important;
}

.margin-bottom-145 {
  margin-bottom: 145px !important;
}

.margin-left-145 {
  margin-left: 145px !important;
}

.margin-right-145 {
  margin-right: 145px !important;
}

.padding-145 {
  padding: 145px !important;
}

.padding-top-145 {
  padding-top: 145px !important;
}

.padding-bottom-145 {
  padding-bottom: 145px !important;
}

.padding-left-145 {
  padding-left: 145px !important;
}

.padding-right-145 {
  padding-right: 145px !important;
}

.divider-145 {
  height: 145px !important;
}

.margin-146 {
  margin: 146px !important;
}

.margin-top-146 {
  margin-top: 146px !important;
}

.margin-bottom-146 {
  margin-bottom: 146px !important;
}

.margin-left-146 {
  margin-left: 146px !important;
}

.margin-right-146 {
  margin-right: 146px !important;
}

.padding-146 {
  padding: 146px !important;
}

.padding-top-146 {
  padding-top: 146px !important;
}

.padding-bottom-146 {
  padding-bottom: 146px !important;
}

.padding-left-146 {
  padding-left: 146px !important;
}

.padding-right-146 {
  padding-right: 146px !important;
}

.divider-146 {
  height: 146px !important;
}

.margin-147 {
  margin: 147px !important;
}

.margin-top-147 {
  margin-top: 147px !important;
}

.margin-bottom-147 {
  margin-bottom: 147px !important;
}

.margin-left-147 {
  margin-left: 147px !important;
}

.margin-right-147 {
  margin-right: 147px !important;
}

.padding-147 {
  padding: 147px !important;
}

.padding-top-147 {
  padding-top: 147px !important;
}

.padding-bottom-147 {
  padding-bottom: 147px !important;
}

.padding-left-147 {
  padding-left: 147px !important;
}

.padding-right-147 {
  padding-right: 147px !important;
}

.divider-147 {
  height: 147px !important;
}

.margin-148 {
  margin: 148px !important;
}

.margin-top-148 {
  margin-top: 148px !important;
}

.margin-bottom-148 {
  margin-bottom: 148px !important;
}

.margin-left-148 {
  margin-left: 148px !important;
}

.margin-right-148 {
  margin-right: 148px !important;
}

.padding-148 {
  padding: 148px !important;
}

.padding-top-148 {
  padding-top: 148px !important;
}

.padding-bottom-148 {
  padding-bottom: 148px !important;
}

.padding-left-148 {
  padding-left: 148px !important;
}

.padding-right-148 {
  padding-right: 148px !important;
}

.divider-148 {
  height: 148px !important;
}

.margin-149 {
  margin: 149px !important;
}

.margin-top-149 {
  margin-top: 149px !important;
}

.margin-bottom-149 {
  margin-bottom: 149px !important;
}

.margin-left-149 {
  margin-left: 149px !important;
}

.margin-right-149 {
  margin-right: 149px !important;
}

.padding-149 {
  padding: 149px !important;
}

.padding-top-149 {
  padding-top: 149px !important;
}

.padding-bottom-149 {
  padding-bottom: 149px !important;
}

.padding-left-149 {
  padding-left: 149px !important;
}

.padding-right-149 {
  padding-right: 149px !important;
}

.divider-149 {
  height: 149px !important;
}

.margin-150 {
  margin: 150px !important;
}

.margin-top-150 {
  margin-top: 150px !important;
}

.margin-bottom-150 {
  margin-bottom: 150px !important;
}

.margin-left-150 {
  margin-left: 150px !important;
}

.margin-right-150 {
  margin-right: 150px !important;
}

.padding-150 {
  padding: 150px !important;
}

.padding-top-150 {
  padding-top: 150px !important;
}

.padding-bottom-150 {
  padding-bottom: 150px !important;
}

.padding-left-150 {
  padding-left: 150px !important;
}

.padding-right-150 {
  padding-right: 150px !important;
}

.divider-150 {
  height: 150px !important;
}

@media (max-width: 800px) {
  .margin-0-phone {
    margin: 0px !important;
  }
  .margin-top-0-phone {
    margin-top: 0px !important;
  }
  .margin-bottom-0-phone {
    margin-bottom: 0px !important;
  }
  .margin-left-0-phone {
    margin-left: 0px !important;
  }
  .margin-right-0-phone {
    margin-right: 0px !important;
  }
  .padding-0-phone {
    padding: 0px !important;
  }
  .padding-top-0-phone {
    padding-top: 0px !important;
  }
  .padding-bottom-0-phone {
    padding-bottom: 0px !important;
  }
  .padding-left-0-phone {
    padding-left: 0px !important;
  }
  .padding-right-0-phone {
    padding-right: 0px !important;
  }
  .divider-0-phone {
    height: 0px !important;
  }
  .margin-1-phone {
    margin: 1px !important;
  }
  .margin-top-1-phone {
    margin-top: 1px !important;
  }
  .margin-bottom-1-phone {
    margin-bottom: 1px !important;
  }
  .margin-left-1-phone {
    margin-left: 1px !important;
  }
  .margin-right-1-phone {
    margin-right: 1px !important;
  }
  .padding-1-phone {
    padding: 1px !important;
  }
  .padding-top-1-phone {
    padding-top: 1px !important;
  }
  .padding-bottom-1-phone {
    padding-bottom: 1px !important;
  }
  .padding-left-1-phone {
    padding-left: 1px !important;
  }
  .padding-right-1-phone {
    padding-right: 1px !important;
  }
  .divider-1-phone {
    height: 1px !important;
  }
  .margin-2-phone {
    margin: 2px !important;
  }
  .margin-top-2-phone {
    margin-top: 2px !important;
  }
  .margin-bottom-2-phone {
    margin-bottom: 2px !important;
  }
  .margin-left-2-phone {
    margin-left: 2px !important;
  }
  .margin-right-2-phone {
    margin-right: 2px !important;
  }
  .padding-2-phone {
    padding: 2px !important;
  }
  .padding-top-2-phone {
    padding-top: 2px !important;
  }
  .padding-bottom-2-phone {
    padding-bottom: 2px !important;
  }
  .padding-left-2-phone {
    padding-left: 2px !important;
  }
  .padding-right-2-phone {
    padding-right: 2px !important;
  }
  .divider-2-phone {
    height: 2px !important;
  }
  .margin-3-phone {
    margin: 3px !important;
  }
  .margin-top-3-phone {
    margin-top: 3px !important;
  }
  .margin-bottom-3-phone {
    margin-bottom: 3px !important;
  }
  .margin-left-3-phone {
    margin-left: 3px !important;
  }
  .margin-right-3-phone {
    margin-right: 3px !important;
  }
  .padding-3-phone {
    padding: 3px !important;
  }
  .padding-top-3-phone {
    padding-top: 3px !important;
  }
  .padding-bottom-3-phone {
    padding-bottom: 3px !important;
  }
  .padding-left-3-phone {
    padding-left: 3px !important;
  }
  .padding-right-3-phone {
    padding-right: 3px !important;
  }
  .divider-3-phone {
    height: 3px !important;
  }
  .margin-4-phone {
    margin: 4px !important;
  }
  .margin-top-4-phone {
    margin-top: 4px !important;
  }
  .margin-bottom-4-phone {
    margin-bottom: 4px !important;
  }
  .margin-left-4-phone {
    margin-left: 4px !important;
  }
  .margin-right-4-phone {
    margin-right: 4px !important;
  }
  .padding-4-phone {
    padding: 4px !important;
  }
  .padding-top-4-phone {
    padding-top: 4px !important;
  }
  .padding-bottom-4-phone {
    padding-bottom: 4px !important;
  }
  .padding-left-4-phone {
    padding-left: 4px !important;
  }
  .padding-right-4-phone {
    padding-right: 4px !important;
  }
  .divider-4-phone {
    height: 4px !important;
  }
  .margin-5-phone {
    margin: 5px !important;
  }
  .margin-top-5-phone {
    margin-top: 5px !important;
  }
  .margin-bottom-5-phone {
    margin-bottom: 5px !important;
  }
  .margin-left-5-phone {
    margin-left: 5px !important;
  }
  .margin-right-5-phone {
    margin-right: 5px !important;
  }
  .padding-5-phone {
    padding: 5px !important;
  }
  .padding-top-5-phone {
    padding-top: 5px !important;
  }
  .padding-bottom-5-phone {
    padding-bottom: 5px !important;
  }
  .padding-left-5-phone {
    padding-left: 5px !important;
  }
  .padding-right-5-phone {
    padding-right: 5px !important;
  }
  .divider-5-phone {
    height: 5px !important;
  }
  .margin-6-phone {
    margin: 6px !important;
  }
  .margin-top-6-phone {
    margin-top: 6px !important;
  }
  .margin-bottom-6-phone {
    margin-bottom: 6px !important;
  }
  .margin-left-6-phone {
    margin-left: 6px !important;
  }
  .margin-right-6-phone {
    margin-right: 6px !important;
  }
  .padding-6-phone {
    padding: 6px !important;
  }
  .padding-top-6-phone {
    padding-top: 6px !important;
  }
  .padding-bottom-6-phone {
    padding-bottom: 6px !important;
  }
  .padding-left-6-phone {
    padding-left: 6px !important;
  }
  .padding-right-6-phone {
    padding-right: 6px !important;
  }
  .divider-6-phone {
    height: 6px !important;
  }
  .margin-7-phone {
    margin: 7px !important;
  }
  .margin-top-7-phone {
    margin-top: 7px !important;
  }
  .margin-bottom-7-phone {
    margin-bottom: 7px !important;
  }
  .margin-left-7-phone {
    margin-left: 7px !important;
  }
  .margin-right-7-phone {
    margin-right: 7px !important;
  }
  .padding-7-phone {
    padding: 7px !important;
  }
  .padding-top-7-phone {
    padding-top: 7px !important;
  }
  .padding-bottom-7-phone {
    padding-bottom: 7px !important;
  }
  .padding-left-7-phone {
    padding-left: 7px !important;
  }
  .padding-right-7-phone {
    padding-right: 7px !important;
  }
  .divider-7-phone {
    height: 7px !important;
  }
  .margin-8-phone {
    margin: 8px !important;
  }
  .margin-top-8-phone {
    margin-top: 8px !important;
  }
  .margin-bottom-8-phone {
    margin-bottom: 8px !important;
  }
  .margin-left-8-phone {
    margin-left: 8px !important;
  }
  .margin-right-8-phone {
    margin-right: 8px !important;
  }
  .padding-8-phone {
    padding: 8px !important;
  }
  .padding-top-8-phone {
    padding-top: 8px !important;
  }
  .padding-bottom-8-phone {
    padding-bottom: 8px !important;
  }
  .padding-left-8-phone {
    padding-left: 8px !important;
  }
  .padding-right-8-phone {
    padding-right: 8px !important;
  }
  .divider-8-phone {
    height: 8px !important;
  }
  .margin-9-phone {
    margin: 9px !important;
  }
  .margin-top-9-phone {
    margin-top: 9px !important;
  }
  .margin-bottom-9-phone {
    margin-bottom: 9px !important;
  }
  .margin-left-9-phone {
    margin-left: 9px !important;
  }
  .margin-right-9-phone {
    margin-right: 9px !important;
  }
  .padding-9-phone {
    padding: 9px !important;
  }
  .padding-top-9-phone {
    padding-top: 9px !important;
  }
  .padding-bottom-9-phone {
    padding-bottom: 9px !important;
  }
  .padding-left-9-phone {
    padding-left: 9px !important;
  }
  .padding-right-9-phone {
    padding-right: 9px !important;
  }
  .divider-9-phone {
    height: 9px !important;
  }
  .margin-10-phone {
    margin: 10px !important;
  }
  .margin-top-10-phone {
    margin-top: 10px !important;
  }
  .margin-bottom-10-phone {
    margin-bottom: 10px !important;
  }
  .margin-left-10-phone {
    margin-left: 10px !important;
  }
  .margin-right-10-phone {
    margin-right: 10px !important;
  }
  .padding-10-phone {
    padding: 10px !important;
  }
  .padding-top-10-phone {
    padding-top: 10px !important;
  }
  .padding-bottom-10-phone {
    padding-bottom: 10px !important;
  }
  .padding-left-10-phone {
    padding-left: 10px !important;
  }
  .padding-right-10-phone {
    padding-right: 10px !important;
  }
  .divider-10-phone {
    height: 10px !important;
  }
  .margin-11-phone {
    margin: 11px !important;
  }
  .margin-top-11-phone {
    margin-top: 11px !important;
  }
  .margin-bottom-11-phone {
    margin-bottom: 11px !important;
  }
  .margin-left-11-phone {
    margin-left: 11px !important;
  }
  .margin-right-11-phone {
    margin-right: 11px !important;
  }
  .padding-11-phone {
    padding: 11px !important;
  }
  .padding-top-11-phone {
    padding-top: 11px !important;
  }
  .padding-bottom-11-phone {
    padding-bottom: 11px !important;
  }
  .padding-left-11-phone {
    padding-left: 11px !important;
  }
  .padding-right-11-phone {
    padding-right: 11px !important;
  }
  .divider-11-phone {
    height: 11px !important;
  }
  .margin-12-phone {
    margin: 12px !important;
  }
  .margin-top-12-phone {
    margin-top: 12px !important;
  }
  .margin-bottom-12-phone {
    margin-bottom: 12px !important;
  }
  .margin-left-12-phone {
    margin-left: 12px !important;
  }
  .margin-right-12-phone {
    margin-right: 12px !important;
  }
  .padding-12-phone {
    padding: 12px !important;
  }
  .padding-top-12-phone {
    padding-top: 12px !important;
  }
  .padding-bottom-12-phone {
    padding-bottom: 12px !important;
  }
  .padding-left-12-phone {
    padding-left: 12px !important;
  }
  .padding-right-12-phone {
    padding-right: 12px !important;
  }
  .divider-12-phone {
    height: 12px !important;
  }
  .margin-13-phone {
    margin: 13px !important;
  }
  .margin-top-13-phone {
    margin-top: 13px !important;
  }
  .margin-bottom-13-phone {
    margin-bottom: 13px !important;
  }
  .margin-left-13-phone {
    margin-left: 13px !important;
  }
  .margin-right-13-phone {
    margin-right: 13px !important;
  }
  .padding-13-phone {
    padding: 13px !important;
  }
  .padding-top-13-phone {
    padding-top: 13px !important;
  }
  .padding-bottom-13-phone {
    padding-bottom: 13px !important;
  }
  .padding-left-13-phone {
    padding-left: 13px !important;
  }
  .padding-right-13-phone {
    padding-right: 13px !important;
  }
  .divider-13-phone {
    height: 13px !important;
  }
  .margin-14-phone {
    margin: 14px !important;
  }
  .margin-top-14-phone {
    margin-top: 14px !important;
  }
  .margin-bottom-14-phone {
    margin-bottom: 14px !important;
  }
  .margin-left-14-phone {
    margin-left: 14px !important;
  }
  .margin-right-14-phone {
    margin-right: 14px !important;
  }
  .padding-14-phone {
    padding: 14px !important;
  }
  .padding-top-14-phone {
    padding-top: 14px !important;
  }
  .padding-bottom-14-phone {
    padding-bottom: 14px !important;
  }
  .padding-left-14-phone {
    padding-left: 14px !important;
  }
  .padding-right-14-phone {
    padding-right: 14px !important;
  }
  .divider-14-phone {
    height: 14px !important;
  }
  .margin-15-phone {
    margin: 15px !important;
  }
  .margin-top-15-phone {
    margin-top: 15px !important;
  }
  .margin-bottom-15-phone {
    margin-bottom: 15px !important;
  }
  .margin-left-15-phone {
    margin-left: 15px !important;
  }
  .margin-right-15-phone {
    margin-right: 15px !important;
  }
  .padding-15-phone {
    padding: 15px !important;
  }
  .padding-top-15-phone {
    padding-top: 15px !important;
  }
  .padding-bottom-15-phone {
    padding-bottom: 15px !important;
  }
  .padding-left-15-phone {
    padding-left: 15px !important;
  }
  .padding-right-15-phone {
    padding-right: 15px !important;
  }
  .divider-15-phone {
    height: 15px !important;
  }
  .margin-16-phone {
    margin: 16px !important;
  }
  .margin-top-16-phone {
    margin-top: 16px !important;
  }
  .margin-bottom-16-phone {
    margin-bottom: 16px !important;
  }
  .margin-left-16-phone {
    margin-left: 16px !important;
  }
  .margin-right-16-phone {
    margin-right: 16px !important;
  }
  .padding-16-phone {
    padding: 16px !important;
  }
  .padding-top-16-phone {
    padding-top: 16px !important;
  }
  .padding-bottom-16-phone {
    padding-bottom: 16px !important;
  }
  .padding-left-16-phone {
    padding-left: 16px !important;
  }
  .padding-right-16-phone {
    padding-right: 16px !important;
  }
  .divider-16-phone {
    height: 16px !important;
  }
  .margin-17-phone {
    margin: 17px !important;
  }
  .margin-top-17-phone {
    margin-top: 17px !important;
  }
  .margin-bottom-17-phone {
    margin-bottom: 17px !important;
  }
  .margin-left-17-phone {
    margin-left: 17px !important;
  }
  .margin-right-17-phone {
    margin-right: 17px !important;
  }
  .padding-17-phone {
    padding: 17px !important;
  }
  .padding-top-17-phone {
    padding-top: 17px !important;
  }
  .padding-bottom-17-phone {
    padding-bottom: 17px !important;
  }
  .padding-left-17-phone {
    padding-left: 17px !important;
  }
  .padding-right-17-phone {
    padding-right: 17px !important;
  }
  .divider-17-phone {
    height: 17px !important;
  }
  .margin-18-phone {
    margin: 18px !important;
  }
  .margin-top-18-phone {
    margin-top: 18px !important;
  }
  .margin-bottom-18-phone {
    margin-bottom: 18px !important;
  }
  .margin-left-18-phone {
    margin-left: 18px !important;
  }
  .margin-right-18-phone {
    margin-right: 18px !important;
  }
  .padding-18-phone {
    padding: 18px !important;
  }
  .padding-top-18-phone {
    padding-top: 18px !important;
  }
  .padding-bottom-18-phone {
    padding-bottom: 18px !important;
  }
  .padding-left-18-phone {
    padding-left: 18px !important;
  }
  .padding-right-18-phone {
    padding-right: 18px !important;
  }
  .divider-18-phone {
    height: 18px !important;
  }
  .margin-19-phone {
    margin: 19px !important;
  }
  .margin-top-19-phone {
    margin-top: 19px !important;
  }
  .margin-bottom-19-phone {
    margin-bottom: 19px !important;
  }
  .margin-left-19-phone {
    margin-left: 19px !important;
  }
  .margin-right-19-phone {
    margin-right: 19px !important;
  }
  .padding-19-phone {
    padding: 19px !important;
  }
  .padding-top-19-phone {
    padding-top: 19px !important;
  }
  .padding-bottom-19-phone {
    padding-bottom: 19px !important;
  }
  .padding-left-19-phone {
    padding-left: 19px !important;
  }
  .padding-right-19-phone {
    padding-right: 19px !important;
  }
  .divider-19-phone {
    height: 19px !important;
  }
  .margin-20-phone {
    margin: 20px !important;
  }
  .margin-top-20-phone {
    margin-top: 20px !important;
  }
  .margin-bottom-20-phone {
    margin-bottom: 20px !important;
  }
  .margin-left-20-phone {
    margin-left: 20px !important;
  }
  .margin-right-20-phone {
    margin-right: 20px !important;
  }
  .padding-20-phone {
    padding: 20px !important;
  }
  .padding-top-20-phone {
    padding-top: 20px !important;
  }
  .padding-bottom-20-phone {
    padding-bottom: 20px !important;
  }
  .padding-left-20-phone {
    padding-left: 20px !important;
  }
  .padding-right-20-phone {
    padding-right: 20px !important;
  }
  .divider-20-phone {
    height: 20px !important;
  }
  .margin-21-phone {
    margin: 21px !important;
  }
  .margin-top-21-phone {
    margin-top: 21px !important;
  }
  .margin-bottom-21-phone {
    margin-bottom: 21px !important;
  }
  .margin-left-21-phone {
    margin-left: 21px !important;
  }
  .margin-right-21-phone {
    margin-right: 21px !important;
  }
  .padding-21-phone {
    padding: 21px !important;
  }
  .padding-top-21-phone {
    padding-top: 21px !important;
  }
  .padding-bottom-21-phone {
    padding-bottom: 21px !important;
  }
  .padding-left-21-phone {
    padding-left: 21px !important;
  }
  .padding-right-21-phone {
    padding-right: 21px !important;
  }
  .divider-21-phone {
    height: 21px !important;
  }
  .margin-22-phone {
    margin: 22px !important;
  }
  .margin-top-22-phone {
    margin-top: 22px !important;
  }
  .margin-bottom-22-phone {
    margin-bottom: 22px !important;
  }
  .margin-left-22-phone {
    margin-left: 22px !important;
  }
  .margin-right-22-phone {
    margin-right: 22px !important;
  }
  .padding-22-phone {
    padding: 22px !important;
  }
  .padding-top-22-phone {
    padding-top: 22px !important;
  }
  .padding-bottom-22-phone {
    padding-bottom: 22px !important;
  }
  .padding-left-22-phone {
    padding-left: 22px !important;
  }
  .padding-right-22-phone {
    padding-right: 22px !important;
  }
  .divider-22-phone {
    height: 22px !important;
  }
  .margin-23-phone {
    margin: 23px !important;
  }
  .margin-top-23-phone {
    margin-top: 23px !important;
  }
  .margin-bottom-23-phone {
    margin-bottom: 23px !important;
  }
  .margin-left-23-phone {
    margin-left: 23px !important;
  }
  .margin-right-23-phone {
    margin-right: 23px !important;
  }
  .padding-23-phone {
    padding: 23px !important;
  }
  .padding-top-23-phone {
    padding-top: 23px !important;
  }
  .padding-bottom-23-phone {
    padding-bottom: 23px !important;
  }
  .padding-left-23-phone {
    padding-left: 23px !important;
  }
  .padding-right-23-phone {
    padding-right: 23px !important;
  }
  .divider-23-phone {
    height: 23px !important;
  }
  .margin-24-phone {
    margin: 24px !important;
  }
  .margin-top-24-phone {
    margin-top: 24px !important;
  }
  .margin-bottom-24-phone {
    margin-bottom: 24px !important;
  }
  .margin-left-24-phone {
    margin-left: 24px !important;
  }
  .margin-right-24-phone {
    margin-right: 24px !important;
  }
  .padding-24-phone {
    padding: 24px !important;
  }
  .padding-top-24-phone {
    padding-top: 24px !important;
  }
  .padding-bottom-24-phone {
    padding-bottom: 24px !important;
  }
  .padding-left-24-phone {
    padding-left: 24px !important;
  }
  .padding-right-24-phone {
    padding-right: 24px !important;
  }
  .divider-24-phone {
    height: 24px !important;
  }
  .margin-25-phone {
    margin: 25px !important;
  }
  .margin-top-25-phone {
    margin-top: 25px !important;
  }
  .margin-bottom-25-phone {
    margin-bottom: 25px !important;
  }
  .margin-left-25-phone {
    margin-left: 25px !important;
  }
  .margin-right-25-phone {
    margin-right: 25px !important;
  }
  .padding-25-phone {
    padding: 25px !important;
  }
  .padding-top-25-phone {
    padding-top: 25px !important;
  }
  .padding-bottom-25-phone {
    padding-bottom: 25px !important;
  }
  .padding-left-25-phone {
    padding-left: 25px !important;
  }
  .padding-right-25-phone {
    padding-right: 25px !important;
  }
  .divider-25-phone {
    height: 25px !important;
  }
  .margin-26-phone {
    margin: 26px !important;
  }
  .margin-top-26-phone {
    margin-top: 26px !important;
  }
  .margin-bottom-26-phone {
    margin-bottom: 26px !important;
  }
  .margin-left-26-phone {
    margin-left: 26px !important;
  }
  .margin-right-26-phone {
    margin-right: 26px !important;
  }
  .padding-26-phone {
    padding: 26px !important;
  }
  .padding-top-26-phone {
    padding-top: 26px !important;
  }
  .padding-bottom-26-phone {
    padding-bottom: 26px !important;
  }
  .padding-left-26-phone {
    padding-left: 26px !important;
  }
  .padding-right-26-phone {
    padding-right: 26px !important;
  }
  .divider-26-phone {
    height: 26px !important;
  }
  .margin-27-phone {
    margin: 27px !important;
  }
  .margin-top-27-phone {
    margin-top: 27px !important;
  }
  .margin-bottom-27-phone {
    margin-bottom: 27px !important;
  }
  .margin-left-27-phone {
    margin-left: 27px !important;
  }
  .margin-right-27-phone {
    margin-right: 27px !important;
  }
  .padding-27-phone {
    padding: 27px !important;
  }
  .padding-top-27-phone {
    padding-top: 27px !important;
  }
  .padding-bottom-27-phone {
    padding-bottom: 27px !important;
  }
  .padding-left-27-phone {
    padding-left: 27px !important;
  }
  .padding-right-27-phone {
    padding-right: 27px !important;
  }
  .divider-27-phone {
    height: 27px !important;
  }
  .margin-28-phone {
    margin: 28px !important;
  }
  .margin-top-28-phone {
    margin-top: 28px !important;
  }
  .margin-bottom-28-phone {
    margin-bottom: 28px !important;
  }
  .margin-left-28-phone {
    margin-left: 28px !important;
  }
  .margin-right-28-phone {
    margin-right: 28px !important;
  }
  .padding-28-phone {
    padding: 28px !important;
  }
  .padding-top-28-phone {
    padding-top: 28px !important;
  }
  .padding-bottom-28-phone {
    padding-bottom: 28px !important;
  }
  .padding-left-28-phone {
    padding-left: 28px !important;
  }
  .padding-right-28-phone {
    padding-right: 28px !important;
  }
  .divider-28-phone {
    height: 28px !important;
  }
  .margin-29-phone {
    margin: 29px !important;
  }
  .margin-top-29-phone {
    margin-top: 29px !important;
  }
  .margin-bottom-29-phone {
    margin-bottom: 29px !important;
  }
  .margin-left-29-phone {
    margin-left: 29px !important;
  }
  .margin-right-29-phone {
    margin-right: 29px !important;
  }
  .padding-29-phone {
    padding: 29px !important;
  }
  .padding-top-29-phone {
    padding-top: 29px !important;
  }
  .padding-bottom-29-phone {
    padding-bottom: 29px !important;
  }
  .padding-left-29-phone {
    padding-left: 29px !important;
  }
  .padding-right-29-phone {
    padding-right: 29px !important;
  }
  .divider-29-phone {
    height: 29px !important;
  }
  .margin-30-phone {
    margin: 30px !important;
  }
  .margin-top-30-phone {
    margin-top: 30px !important;
  }
  .margin-bottom-30-phone {
    margin-bottom: 30px !important;
  }
  .margin-left-30-phone {
    margin-left: 30px !important;
  }
  .margin-right-30-phone {
    margin-right: 30px !important;
  }
  .padding-30-phone {
    padding: 30px !important;
  }
  .padding-top-30-phone {
    padding-top: 30px !important;
  }
  .padding-bottom-30-phone {
    padding-bottom: 30px !important;
  }
  .padding-left-30-phone {
    padding-left: 30px !important;
  }
  .padding-right-30-phone {
    padding-right: 30px !important;
  }
  .divider-30-phone {
    height: 30px !important;
  }
  .margin-31-phone {
    margin: 31px !important;
  }
  .margin-top-31-phone {
    margin-top: 31px !important;
  }
  .margin-bottom-31-phone {
    margin-bottom: 31px !important;
  }
  .margin-left-31-phone {
    margin-left: 31px !important;
  }
  .margin-right-31-phone {
    margin-right: 31px !important;
  }
  .padding-31-phone {
    padding: 31px !important;
  }
  .padding-top-31-phone {
    padding-top: 31px !important;
  }
  .padding-bottom-31-phone {
    padding-bottom: 31px !important;
  }
  .padding-left-31-phone {
    padding-left: 31px !important;
  }
  .padding-right-31-phone {
    padding-right: 31px !important;
  }
  .divider-31-phone {
    height: 31px !important;
  }
  .margin-32-phone {
    margin: 32px !important;
  }
  .margin-top-32-phone {
    margin-top: 32px !important;
  }
  .margin-bottom-32-phone {
    margin-bottom: 32px !important;
  }
  .margin-left-32-phone {
    margin-left: 32px !important;
  }
  .margin-right-32-phone {
    margin-right: 32px !important;
  }
  .padding-32-phone {
    padding: 32px !important;
  }
  .padding-top-32-phone {
    padding-top: 32px !important;
  }
  .padding-bottom-32-phone {
    padding-bottom: 32px !important;
  }
  .padding-left-32-phone {
    padding-left: 32px !important;
  }
  .padding-right-32-phone {
    padding-right: 32px !important;
  }
  .divider-32-phone {
    height: 32px !important;
  }
  .margin-33-phone {
    margin: 33px !important;
  }
  .margin-top-33-phone {
    margin-top: 33px !important;
  }
  .margin-bottom-33-phone {
    margin-bottom: 33px !important;
  }
  .margin-left-33-phone {
    margin-left: 33px !important;
  }
  .margin-right-33-phone {
    margin-right: 33px !important;
  }
  .padding-33-phone {
    padding: 33px !important;
  }
  .padding-top-33-phone {
    padding-top: 33px !important;
  }
  .padding-bottom-33-phone {
    padding-bottom: 33px !important;
  }
  .padding-left-33-phone {
    padding-left: 33px !important;
  }
  .padding-right-33-phone {
    padding-right: 33px !important;
  }
  .divider-33-phone {
    height: 33px !important;
  }
  .margin-34-phone {
    margin: 34px !important;
  }
  .margin-top-34-phone {
    margin-top: 34px !important;
  }
  .margin-bottom-34-phone {
    margin-bottom: 34px !important;
  }
  .margin-left-34-phone {
    margin-left: 34px !important;
  }
  .margin-right-34-phone {
    margin-right: 34px !important;
  }
  .padding-34-phone {
    padding: 34px !important;
  }
  .padding-top-34-phone {
    padding-top: 34px !important;
  }
  .padding-bottom-34-phone {
    padding-bottom: 34px !important;
  }
  .padding-left-34-phone {
    padding-left: 34px !important;
  }
  .padding-right-34-phone {
    padding-right: 34px !important;
  }
  .divider-34-phone {
    height: 34px !important;
  }
  .margin-35-phone {
    margin: 35px !important;
  }
  .margin-top-35-phone {
    margin-top: 35px !important;
  }
  .margin-bottom-35-phone {
    margin-bottom: 35px !important;
  }
  .margin-left-35-phone {
    margin-left: 35px !important;
  }
  .margin-right-35-phone {
    margin-right: 35px !important;
  }
  .padding-35-phone {
    padding: 35px !important;
  }
  .padding-top-35-phone {
    padding-top: 35px !important;
  }
  .padding-bottom-35-phone {
    padding-bottom: 35px !important;
  }
  .padding-left-35-phone {
    padding-left: 35px !important;
  }
  .padding-right-35-phone {
    padding-right: 35px !important;
  }
  .divider-35-phone {
    height: 35px !important;
  }
  .margin-36-phone {
    margin: 36px !important;
  }
  .margin-top-36-phone {
    margin-top: 36px !important;
  }
  .margin-bottom-36-phone {
    margin-bottom: 36px !important;
  }
  .margin-left-36-phone {
    margin-left: 36px !important;
  }
  .margin-right-36-phone {
    margin-right: 36px !important;
  }
  .padding-36-phone {
    padding: 36px !important;
  }
  .padding-top-36-phone {
    padding-top: 36px !important;
  }
  .padding-bottom-36-phone {
    padding-bottom: 36px !important;
  }
  .padding-left-36-phone {
    padding-left: 36px !important;
  }
  .padding-right-36-phone {
    padding-right: 36px !important;
  }
  .divider-36-phone {
    height: 36px !important;
  }
  .margin-37-phone {
    margin: 37px !important;
  }
  .margin-top-37-phone {
    margin-top: 37px !important;
  }
  .margin-bottom-37-phone {
    margin-bottom: 37px !important;
  }
  .margin-left-37-phone {
    margin-left: 37px !important;
  }
  .margin-right-37-phone {
    margin-right: 37px !important;
  }
  .padding-37-phone {
    padding: 37px !important;
  }
  .padding-top-37-phone {
    padding-top: 37px !important;
  }
  .padding-bottom-37-phone {
    padding-bottom: 37px !important;
  }
  .padding-left-37-phone {
    padding-left: 37px !important;
  }
  .padding-right-37-phone {
    padding-right: 37px !important;
  }
  .divider-37-phone {
    height: 37px !important;
  }
  .margin-38-phone {
    margin: 38px !important;
  }
  .margin-top-38-phone {
    margin-top: 38px !important;
  }
  .margin-bottom-38-phone {
    margin-bottom: 38px !important;
  }
  .margin-left-38-phone {
    margin-left: 38px !important;
  }
  .margin-right-38-phone {
    margin-right: 38px !important;
  }
  .padding-38-phone {
    padding: 38px !important;
  }
  .padding-top-38-phone {
    padding-top: 38px !important;
  }
  .padding-bottom-38-phone {
    padding-bottom: 38px !important;
  }
  .padding-left-38-phone {
    padding-left: 38px !important;
  }
  .padding-right-38-phone {
    padding-right: 38px !important;
  }
  .divider-38-phone {
    height: 38px !important;
  }
  .margin-39-phone {
    margin: 39px !important;
  }
  .margin-top-39-phone {
    margin-top: 39px !important;
  }
  .margin-bottom-39-phone {
    margin-bottom: 39px !important;
  }
  .margin-left-39-phone {
    margin-left: 39px !important;
  }
  .margin-right-39-phone {
    margin-right: 39px !important;
  }
  .padding-39-phone {
    padding: 39px !important;
  }
  .padding-top-39-phone {
    padding-top: 39px !important;
  }
  .padding-bottom-39-phone {
    padding-bottom: 39px !important;
  }
  .padding-left-39-phone {
    padding-left: 39px !important;
  }
  .padding-right-39-phone {
    padding-right: 39px !important;
  }
  .divider-39-phone {
    height: 39px !important;
  }
  .margin-40-phone {
    margin: 40px !important;
  }
  .margin-top-40-phone {
    margin-top: 40px !important;
  }
  .margin-bottom-40-phone {
    margin-bottom: 40px !important;
  }
  .margin-left-40-phone {
    margin-left: 40px !important;
  }
  .margin-right-40-phone {
    margin-right: 40px !important;
  }
  .padding-40-phone {
    padding: 40px !important;
  }
  .padding-top-40-phone {
    padding-top: 40px !important;
  }
  .padding-bottom-40-phone {
    padding-bottom: 40px !important;
  }
  .padding-left-40-phone {
    padding-left: 40px !important;
  }
  .padding-right-40-phone {
    padding-right: 40px !important;
  }
  .divider-40-phone {
    height: 40px !important;
  }
  .margin-41-phone {
    margin: 41px !important;
  }
  .margin-top-41-phone {
    margin-top: 41px !important;
  }
  .margin-bottom-41-phone {
    margin-bottom: 41px !important;
  }
  .margin-left-41-phone {
    margin-left: 41px !important;
  }
  .margin-right-41-phone {
    margin-right: 41px !important;
  }
  .padding-41-phone {
    padding: 41px !important;
  }
  .padding-top-41-phone {
    padding-top: 41px !important;
  }
  .padding-bottom-41-phone {
    padding-bottom: 41px !important;
  }
  .padding-left-41-phone {
    padding-left: 41px !important;
  }
  .padding-right-41-phone {
    padding-right: 41px !important;
  }
  .divider-41-phone {
    height: 41px !important;
  }
  .margin-42-phone {
    margin: 42px !important;
  }
  .margin-top-42-phone {
    margin-top: 42px !important;
  }
  .margin-bottom-42-phone {
    margin-bottom: 42px !important;
  }
  .margin-left-42-phone {
    margin-left: 42px !important;
  }
  .margin-right-42-phone {
    margin-right: 42px !important;
  }
  .padding-42-phone {
    padding: 42px !important;
  }
  .padding-top-42-phone {
    padding-top: 42px !important;
  }
  .padding-bottom-42-phone {
    padding-bottom: 42px !important;
  }
  .padding-left-42-phone {
    padding-left: 42px !important;
  }
  .padding-right-42-phone {
    padding-right: 42px !important;
  }
  .divider-42-phone {
    height: 42px !important;
  }
  .margin-43-phone {
    margin: 43px !important;
  }
  .margin-top-43-phone {
    margin-top: 43px !important;
  }
  .margin-bottom-43-phone {
    margin-bottom: 43px !important;
  }
  .margin-left-43-phone {
    margin-left: 43px !important;
  }
  .margin-right-43-phone {
    margin-right: 43px !important;
  }
  .padding-43-phone {
    padding: 43px !important;
  }
  .padding-top-43-phone {
    padding-top: 43px !important;
  }
  .padding-bottom-43-phone {
    padding-bottom: 43px !important;
  }
  .padding-left-43-phone {
    padding-left: 43px !important;
  }
  .padding-right-43-phone {
    padding-right: 43px !important;
  }
  .divider-43-phone {
    height: 43px !important;
  }
  .margin-44-phone {
    margin: 44px !important;
  }
  .margin-top-44-phone {
    margin-top: 44px !important;
  }
  .margin-bottom-44-phone {
    margin-bottom: 44px !important;
  }
  .margin-left-44-phone {
    margin-left: 44px !important;
  }
  .margin-right-44-phone {
    margin-right: 44px !important;
  }
  .padding-44-phone {
    padding: 44px !important;
  }
  .padding-top-44-phone {
    padding-top: 44px !important;
  }
  .padding-bottom-44-phone {
    padding-bottom: 44px !important;
  }
  .padding-left-44-phone {
    padding-left: 44px !important;
  }
  .padding-right-44-phone {
    padding-right: 44px !important;
  }
  .divider-44-phone {
    height: 44px !important;
  }
  .margin-45-phone {
    margin: 45px !important;
  }
  .margin-top-45-phone {
    margin-top: 45px !important;
  }
  .margin-bottom-45-phone {
    margin-bottom: 45px !important;
  }
  .margin-left-45-phone {
    margin-left: 45px !important;
  }
  .margin-right-45-phone {
    margin-right: 45px !important;
  }
  .padding-45-phone {
    padding: 45px !important;
  }
  .padding-top-45-phone {
    padding-top: 45px !important;
  }
  .padding-bottom-45-phone {
    padding-bottom: 45px !important;
  }
  .padding-left-45-phone {
    padding-left: 45px !important;
  }
  .padding-right-45-phone {
    padding-right: 45px !important;
  }
  .divider-45-phone {
    height: 45px !important;
  }
  .margin-46-phone {
    margin: 46px !important;
  }
  .margin-top-46-phone {
    margin-top: 46px !important;
  }
  .margin-bottom-46-phone {
    margin-bottom: 46px !important;
  }
  .margin-left-46-phone {
    margin-left: 46px !important;
  }
  .margin-right-46-phone {
    margin-right: 46px !important;
  }
  .padding-46-phone {
    padding: 46px !important;
  }
  .padding-top-46-phone {
    padding-top: 46px !important;
  }
  .padding-bottom-46-phone {
    padding-bottom: 46px !important;
  }
  .padding-left-46-phone {
    padding-left: 46px !important;
  }
  .padding-right-46-phone {
    padding-right: 46px !important;
  }
  .divider-46-phone {
    height: 46px !important;
  }
  .margin-47-phone {
    margin: 47px !important;
  }
  .margin-top-47-phone {
    margin-top: 47px !important;
  }
  .margin-bottom-47-phone {
    margin-bottom: 47px !important;
  }
  .margin-left-47-phone {
    margin-left: 47px !important;
  }
  .margin-right-47-phone {
    margin-right: 47px !important;
  }
  .padding-47-phone {
    padding: 47px !important;
  }
  .padding-top-47-phone {
    padding-top: 47px !important;
  }
  .padding-bottom-47-phone {
    padding-bottom: 47px !important;
  }
  .padding-left-47-phone {
    padding-left: 47px !important;
  }
  .padding-right-47-phone {
    padding-right: 47px !important;
  }
  .divider-47-phone {
    height: 47px !important;
  }
  .margin-48-phone {
    margin: 48px !important;
  }
  .margin-top-48-phone {
    margin-top: 48px !important;
  }
  .margin-bottom-48-phone {
    margin-bottom: 48px !important;
  }
  .margin-left-48-phone {
    margin-left: 48px !important;
  }
  .margin-right-48-phone {
    margin-right: 48px !important;
  }
  .padding-48-phone {
    padding: 48px !important;
  }
  .padding-top-48-phone {
    padding-top: 48px !important;
  }
  .padding-bottom-48-phone {
    padding-bottom: 48px !important;
  }
  .padding-left-48-phone {
    padding-left: 48px !important;
  }
  .padding-right-48-phone {
    padding-right: 48px !important;
  }
  .divider-48-phone {
    height: 48px !important;
  }
  .margin-49-phone {
    margin: 49px !important;
  }
  .margin-top-49-phone {
    margin-top: 49px !important;
  }
  .margin-bottom-49-phone {
    margin-bottom: 49px !important;
  }
  .margin-left-49-phone {
    margin-left: 49px !important;
  }
  .margin-right-49-phone {
    margin-right: 49px !important;
  }
  .padding-49-phone {
    padding: 49px !important;
  }
  .padding-top-49-phone {
    padding-top: 49px !important;
  }
  .padding-bottom-49-phone {
    padding-bottom: 49px !important;
  }
  .padding-left-49-phone {
    padding-left: 49px !important;
  }
  .padding-right-49-phone {
    padding-right: 49px !important;
  }
  .divider-49-phone {
    height: 49px !important;
  }
  .margin-50-phone {
    margin: 50px !important;
  }
  .margin-top-50-phone {
    margin-top: 50px !important;
  }
  .margin-bottom-50-phone {
    margin-bottom: 50px !important;
  }
  .margin-left-50-phone {
    margin-left: 50px !important;
  }
  .margin-right-50-phone {
    margin-right: 50px !important;
  }
  .padding-50-phone {
    padding: 50px !important;
  }
  .padding-top-50-phone {
    padding-top: 50px !important;
  }
  .padding-bottom-50-phone {
    padding-bottom: 50px !important;
  }
  .padding-left-50-phone {
    padding-left: 50px !important;
  }
  .padding-right-50-phone {
    padding-right: 50px !important;
  }
  .divider-50-phone {
    height: 50px !important;
  }
  .margin-51-phone {
    margin: 51px !important;
  }
  .margin-top-51-phone {
    margin-top: 51px !important;
  }
  .margin-bottom-51-phone {
    margin-bottom: 51px !important;
  }
  .margin-left-51-phone {
    margin-left: 51px !important;
  }
  .margin-right-51-phone {
    margin-right: 51px !important;
  }
  .padding-51-phone {
    padding: 51px !important;
  }
  .padding-top-51-phone {
    padding-top: 51px !important;
  }
  .padding-bottom-51-phone {
    padding-bottom: 51px !important;
  }
  .padding-left-51-phone {
    padding-left: 51px !important;
  }
  .padding-right-51-phone {
    padding-right: 51px !important;
  }
  .divider-51-phone {
    height: 51px !important;
  }
  .margin-52-phone {
    margin: 52px !important;
  }
  .margin-top-52-phone {
    margin-top: 52px !important;
  }
  .margin-bottom-52-phone {
    margin-bottom: 52px !important;
  }
  .margin-left-52-phone {
    margin-left: 52px !important;
  }
  .margin-right-52-phone {
    margin-right: 52px !important;
  }
  .padding-52-phone {
    padding: 52px !important;
  }
  .padding-top-52-phone {
    padding-top: 52px !important;
  }
  .padding-bottom-52-phone {
    padding-bottom: 52px !important;
  }
  .padding-left-52-phone {
    padding-left: 52px !important;
  }
  .padding-right-52-phone {
    padding-right: 52px !important;
  }
  .divider-52-phone {
    height: 52px !important;
  }
  .margin-53-phone {
    margin: 53px !important;
  }
  .margin-top-53-phone {
    margin-top: 53px !important;
  }
  .margin-bottom-53-phone {
    margin-bottom: 53px !important;
  }
  .margin-left-53-phone {
    margin-left: 53px !important;
  }
  .margin-right-53-phone {
    margin-right: 53px !important;
  }
  .padding-53-phone {
    padding: 53px !important;
  }
  .padding-top-53-phone {
    padding-top: 53px !important;
  }
  .padding-bottom-53-phone {
    padding-bottom: 53px !important;
  }
  .padding-left-53-phone {
    padding-left: 53px !important;
  }
  .padding-right-53-phone {
    padding-right: 53px !important;
  }
  .divider-53-phone {
    height: 53px !important;
  }
  .margin-54-phone {
    margin: 54px !important;
  }
  .margin-top-54-phone {
    margin-top: 54px !important;
  }
  .margin-bottom-54-phone {
    margin-bottom: 54px !important;
  }
  .margin-left-54-phone {
    margin-left: 54px !important;
  }
  .margin-right-54-phone {
    margin-right: 54px !important;
  }
  .padding-54-phone {
    padding: 54px !important;
  }
  .padding-top-54-phone {
    padding-top: 54px !important;
  }
  .padding-bottom-54-phone {
    padding-bottom: 54px !important;
  }
  .padding-left-54-phone {
    padding-left: 54px !important;
  }
  .padding-right-54-phone {
    padding-right: 54px !important;
  }
  .divider-54-phone {
    height: 54px !important;
  }
  .margin-55-phone {
    margin: 55px !important;
  }
  .margin-top-55-phone {
    margin-top: 55px !important;
  }
  .margin-bottom-55-phone {
    margin-bottom: 55px !important;
  }
  .margin-left-55-phone {
    margin-left: 55px !important;
  }
  .margin-right-55-phone {
    margin-right: 55px !important;
  }
  .padding-55-phone {
    padding: 55px !important;
  }
  .padding-top-55-phone {
    padding-top: 55px !important;
  }
  .padding-bottom-55-phone {
    padding-bottom: 55px !important;
  }
  .padding-left-55-phone {
    padding-left: 55px !important;
  }
  .padding-right-55-phone {
    padding-right: 55px !important;
  }
  .divider-55-phone {
    height: 55px !important;
  }
  .margin-56-phone {
    margin: 56px !important;
  }
  .margin-top-56-phone {
    margin-top: 56px !important;
  }
  .margin-bottom-56-phone {
    margin-bottom: 56px !important;
  }
  .margin-left-56-phone {
    margin-left: 56px !important;
  }
  .margin-right-56-phone {
    margin-right: 56px !important;
  }
  .padding-56-phone {
    padding: 56px !important;
  }
  .padding-top-56-phone {
    padding-top: 56px !important;
  }
  .padding-bottom-56-phone {
    padding-bottom: 56px !important;
  }
  .padding-left-56-phone {
    padding-left: 56px !important;
  }
  .padding-right-56-phone {
    padding-right: 56px !important;
  }
  .divider-56-phone {
    height: 56px !important;
  }
  .margin-57-phone {
    margin: 57px !important;
  }
  .margin-top-57-phone {
    margin-top: 57px !important;
  }
  .margin-bottom-57-phone {
    margin-bottom: 57px !important;
  }
  .margin-left-57-phone {
    margin-left: 57px !important;
  }
  .margin-right-57-phone {
    margin-right: 57px !important;
  }
  .padding-57-phone {
    padding: 57px !important;
  }
  .padding-top-57-phone {
    padding-top: 57px !important;
  }
  .padding-bottom-57-phone {
    padding-bottom: 57px !important;
  }
  .padding-left-57-phone {
    padding-left: 57px !important;
  }
  .padding-right-57-phone {
    padding-right: 57px !important;
  }
  .divider-57-phone {
    height: 57px !important;
  }
  .margin-58-phone {
    margin: 58px !important;
  }
  .margin-top-58-phone {
    margin-top: 58px !important;
  }
  .margin-bottom-58-phone {
    margin-bottom: 58px !important;
  }
  .margin-left-58-phone {
    margin-left: 58px !important;
  }
  .margin-right-58-phone {
    margin-right: 58px !important;
  }
  .padding-58-phone {
    padding: 58px !important;
  }
  .padding-top-58-phone {
    padding-top: 58px !important;
  }
  .padding-bottom-58-phone {
    padding-bottom: 58px !important;
  }
  .padding-left-58-phone {
    padding-left: 58px !important;
  }
  .padding-right-58-phone {
    padding-right: 58px !important;
  }
  .divider-58-phone {
    height: 58px !important;
  }
  .margin-59-phone {
    margin: 59px !important;
  }
  .margin-top-59-phone {
    margin-top: 59px !important;
  }
  .margin-bottom-59-phone {
    margin-bottom: 59px !important;
  }
  .margin-left-59-phone {
    margin-left: 59px !important;
  }
  .margin-right-59-phone {
    margin-right: 59px !important;
  }
  .padding-59-phone {
    padding: 59px !important;
  }
  .padding-top-59-phone {
    padding-top: 59px !important;
  }
  .padding-bottom-59-phone {
    padding-bottom: 59px !important;
  }
  .padding-left-59-phone {
    padding-left: 59px !important;
  }
  .padding-right-59-phone {
    padding-right: 59px !important;
  }
  .divider-59-phone {
    height: 59px !important;
  }
  .margin-60-phone {
    margin: 60px !important;
  }
  .margin-top-60-phone {
    margin-top: 60px !important;
  }
  .margin-bottom-60-phone {
    margin-bottom: 60px !important;
  }
  .margin-left-60-phone {
    margin-left: 60px !important;
  }
  .margin-right-60-phone {
    margin-right: 60px !important;
  }
  .padding-60-phone {
    padding: 60px !important;
  }
  .padding-top-60-phone {
    padding-top: 60px !important;
  }
  .padding-bottom-60-phone {
    padding-bottom: 60px !important;
  }
  .padding-left-60-phone {
    padding-left: 60px !important;
  }
  .padding-right-60-phone {
    padding-right: 60px !important;
  }
  .divider-60-phone {
    height: 60px !important;
  }
  .margin-61-phone {
    margin: 61px !important;
  }
  .margin-top-61-phone {
    margin-top: 61px !important;
  }
  .margin-bottom-61-phone {
    margin-bottom: 61px !important;
  }
  .margin-left-61-phone {
    margin-left: 61px !important;
  }
  .margin-right-61-phone {
    margin-right: 61px !important;
  }
  .padding-61-phone {
    padding: 61px !important;
  }
  .padding-top-61-phone {
    padding-top: 61px !important;
  }
  .padding-bottom-61-phone {
    padding-bottom: 61px !important;
  }
  .padding-left-61-phone {
    padding-left: 61px !important;
  }
  .padding-right-61-phone {
    padding-right: 61px !important;
  }
  .divider-61-phone {
    height: 61px !important;
  }
  .margin-62-phone {
    margin: 62px !important;
  }
  .margin-top-62-phone {
    margin-top: 62px !important;
  }
  .margin-bottom-62-phone {
    margin-bottom: 62px !important;
  }
  .margin-left-62-phone {
    margin-left: 62px !important;
  }
  .margin-right-62-phone {
    margin-right: 62px !important;
  }
  .padding-62-phone {
    padding: 62px !important;
  }
  .padding-top-62-phone {
    padding-top: 62px !important;
  }
  .padding-bottom-62-phone {
    padding-bottom: 62px !important;
  }
  .padding-left-62-phone {
    padding-left: 62px !important;
  }
  .padding-right-62-phone {
    padding-right: 62px !important;
  }
  .divider-62-phone {
    height: 62px !important;
  }
  .margin-63-phone {
    margin: 63px !important;
  }
  .margin-top-63-phone {
    margin-top: 63px !important;
  }
  .margin-bottom-63-phone {
    margin-bottom: 63px !important;
  }
  .margin-left-63-phone {
    margin-left: 63px !important;
  }
  .margin-right-63-phone {
    margin-right: 63px !important;
  }
  .padding-63-phone {
    padding: 63px !important;
  }
  .padding-top-63-phone {
    padding-top: 63px !important;
  }
  .padding-bottom-63-phone {
    padding-bottom: 63px !important;
  }
  .padding-left-63-phone {
    padding-left: 63px !important;
  }
  .padding-right-63-phone {
    padding-right: 63px !important;
  }
  .divider-63-phone {
    height: 63px !important;
  }
  .margin-64-phone {
    margin: 64px !important;
  }
  .margin-top-64-phone {
    margin-top: 64px !important;
  }
  .margin-bottom-64-phone {
    margin-bottom: 64px !important;
  }
  .margin-left-64-phone {
    margin-left: 64px !important;
  }
  .margin-right-64-phone {
    margin-right: 64px !important;
  }
  .padding-64-phone {
    padding: 64px !important;
  }
  .padding-top-64-phone {
    padding-top: 64px !important;
  }
  .padding-bottom-64-phone {
    padding-bottom: 64px !important;
  }
  .padding-left-64-phone {
    padding-left: 64px !important;
  }
  .padding-right-64-phone {
    padding-right: 64px !important;
  }
  .divider-64-phone {
    height: 64px !important;
  }
  .margin-65-phone {
    margin: 65px !important;
  }
  .margin-top-65-phone {
    margin-top: 65px !important;
  }
  .margin-bottom-65-phone {
    margin-bottom: 65px !important;
  }
  .margin-left-65-phone {
    margin-left: 65px !important;
  }
  .margin-right-65-phone {
    margin-right: 65px !important;
  }
  .padding-65-phone {
    padding: 65px !important;
  }
  .padding-top-65-phone {
    padding-top: 65px !important;
  }
  .padding-bottom-65-phone {
    padding-bottom: 65px !important;
  }
  .padding-left-65-phone {
    padding-left: 65px !important;
  }
  .padding-right-65-phone {
    padding-right: 65px !important;
  }
  .divider-65-phone {
    height: 65px !important;
  }
  .margin-66-phone {
    margin: 66px !important;
  }
  .margin-top-66-phone {
    margin-top: 66px !important;
  }
  .margin-bottom-66-phone {
    margin-bottom: 66px !important;
  }
  .margin-left-66-phone {
    margin-left: 66px !important;
  }
  .margin-right-66-phone {
    margin-right: 66px !important;
  }
  .padding-66-phone {
    padding: 66px !important;
  }
  .padding-top-66-phone {
    padding-top: 66px !important;
  }
  .padding-bottom-66-phone {
    padding-bottom: 66px !important;
  }
  .padding-left-66-phone {
    padding-left: 66px !important;
  }
  .padding-right-66-phone {
    padding-right: 66px !important;
  }
  .divider-66-phone {
    height: 66px !important;
  }
  .margin-67-phone {
    margin: 67px !important;
  }
  .margin-top-67-phone {
    margin-top: 67px !important;
  }
  .margin-bottom-67-phone {
    margin-bottom: 67px !important;
  }
  .margin-left-67-phone {
    margin-left: 67px !important;
  }
  .margin-right-67-phone {
    margin-right: 67px !important;
  }
  .padding-67-phone {
    padding: 67px !important;
  }
  .padding-top-67-phone {
    padding-top: 67px !important;
  }
  .padding-bottom-67-phone {
    padding-bottom: 67px !important;
  }
  .padding-left-67-phone {
    padding-left: 67px !important;
  }
  .padding-right-67-phone {
    padding-right: 67px !important;
  }
  .divider-67-phone {
    height: 67px !important;
  }
  .margin-68-phone {
    margin: 68px !important;
  }
  .margin-top-68-phone {
    margin-top: 68px !important;
  }
  .margin-bottom-68-phone {
    margin-bottom: 68px !important;
  }
  .margin-left-68-phone {
    margin-left: 68px !important;
  }
  .margin-right-68-phone {
    margin-right: 68px !important;
  }
  .padding-68-phone {
    padding: 68px !important;
  }
  .padding-top-68-phone {
    padding-top: 68px !important;
  }
  .padding-bottom-68-phone {
    padding-bottom: 68px !important;
  }
  .padding-left-68-phone {
    padding-left: 68px !important;
  }
  .padding-right-68-phone {
    padding-right: 68px !important;
  }
  .divider-68-phone {
    height: 68px !important;
  }
  .margin-69-phone {
    margin: 69px !important;
  }
  .margin-top-69-phone {
    margin-top: 69px !important;
  }
  .margin-bottom-69-phone {
    margin-bottom: 69px !important;
  }
  .margin-left-69-phone {
    margin-left: 69px !important;
  }
  .margin-right-69-phone {
    margin-right: 69px !important;
  }
  .padding-69-phone {
    padding: 69px !important;
  }
  .padding-top-69-phone {
    padding-top: 69px !important;
  }
  .padding-bottom-69-phone {
    padding-bottom: 69px !important;
  }
  .padding-left-69-phone {
    padding-left: 69px !important;
  }
  .padding-right-69-phone {
    padding-right: 69px !important;
  }
  .divider-69-phone {
    height: 69px !important;
  }
  .margin-70-phone {
    margin: 70px !important;
  }
  .margin-top-70-phone {
    margin-top: 70px !important;
  }
  .margin-bottom-70-phone {
    margin-bottom: 70px !important;
  }
  .margin-left-70-phone {
    margin-left: 70px !important;
  }
  .margin-right-70-phone {
    margin-right: 70px !important;
  }
  .padding-70-phone {
    padding: 70px !important;
  }
  .padding-top-70-phone {
    padding-top: 70px !important;
  }
  .padding-bottom-70-phone {
    padding-bottom: 70px !important;
  }
  .padding-left-70-phone {
    padding-left: 70px !important;
  }
  .padding-right-70-phone {
    padding-right: 70px !important;
  }
  .divider-70-phone {
    height: 70px !important;
  }
  .margin-71-phone {
    margin: 71px !important;
  }
  .margin-top-71-phone {
    margin-top: 71px !important;
  }
  .margin-bottom-71-phone {
    margin-bottom: 71px !important;
  }
  .margin-left-71-phone {
    margin-left: 71px !important;
  }
  .margin-right-71-phone {
    margin-right: 71px !important;
  }
  .padding-71-phone {
    padding: 71px !important;
  }
  .padding-top-71-phone {
    padding-top: 71px !important;
  }
  .padding-bottom-71-phone {
    padding-bottom: 71px !important;
  }
  .padding-left-71-phone {
    padding-left: 71px !important;
  }
  .padding-right-71-phone {
    padding-right: 71px !important;
  }
  .divider-71-phone {
    height: 71px !important;
  }
  .margin-72-phone {
    margin: 72px !important;
  }
  .margin-top-72-phone {
    margin-top: 72px !important;
  }
  .margin-bottom-72-phone {
    margin-bottom: 72px !important;
  }
  .margin-left-72-phone {
    margin-left: 72px !important;
  }
  .margin-right-72-phone {
    margin-right: 72px !important;
  }
  .padding-72-phone {
    padding: 72px !important;
  }
  .padding-top-72-phone {
    padding-top: 72px !important;
  }
  .padding-bottom-72-phone {
    padding-bottom: 72px !important;
  }
  .padding-left-72-phone {
    padding-left: 72px !important;
  }
  .padding-right-72-phone {
    padding-right: 72px !important;
  }
  .divider-72-phone {
    height: 72px !important;
  }
  .margin-73-phone {
    margin: 73px !important;
  }
  .margin-top-73-phone {
    margin-top: 73px !important;
  }
  .margin-bottom-73-phone {
    margin-bottom: 73px !important;
  }
  .margin-left-73-phone {
    margin-left: 73px !important;
  }
  .margin-right-73-phone {
    margin-right: 73px !important;
  }
  .padding-73-phone {
    padding: 73px !important;
  }
  .padding-top-73-phone {
    padding-top: 73px !important;
  }
  .padding-bottom-73-phone {
    padding-bottom: 73px !important;
  }
  .padding-left-73-phone {
    padding-left: 73px !important;
  }
  .padding-right-73-phone {
    padding-right: 73px !important;
  }
  .divider-73-phone {
    height: 73px !important;
  }
  .margin-74-phone {
    margin: 74px !important;
  }
  .margin-top-74-phone {
    margin-top: 74px !important;
  }
  .margin-bottom-74-phone {
    margin-bottom: 74px !important;
  }
  .margin-left-74-phone {
    margin-left: 74px !important;
  }
  .margin-right-74-phone {
    margin-right: 74px !important;
  }
  .padding-74-phone {
    padding: 74px !important;
  }
  .padding-top-74-phone {
    padding-top: 74px !important;
  }
  .padding-bottom-74-phone {
    padding-bottom: 74px !important;
  }
  .padding-left-74-phone {
    padding-left: 74px !important;
  }
  .padding-right-74-phone {
    padding-right: 74px !important;
  }
  .divider-74-phone {
    height: 74px !important;
  }
  .margin-75-phone {
    margin: 75px !important;
  }
  .margin-top-75-phone {
    margin-top: 75px !important;
  }
  .margin-bottom-75-phone {
    margin-bottom: 75px !important;
  }
  .margin-left-75-phone {
    margin-left: 75px !important;
  }
  .margin-right-75-phone {
    margin-right: 75px !important;
  }
  .padding-75-phone {
    padding: 75px !important;
  }
  .padding-top-75-phone {
    padding-top: 75px !important;
  }
  .padding-bottom-75-phone {
    padding-bottom: 75px !important;
  }
  .padding-left-75-phone {
    padding-left: 75px !important;
  }
  .padding-right-75-phone {
    padding-right: 75px !important;
  }
  .divider-75-phone {
    height: 75px !important;
  }
  .margin-76-phone {
    margin: 76px !important;
  }
  .margin-top-76-phone {
    margin-top: 76px !important;
  }
  .margin-bottom-76-phone {
    margin-bottom: 76px !important;
  }
  .margin-left-76-phone {
    margin-left: 76px !important;
  }
  .margin-right-76-phone {
    margin-right: 76px !important;
  }
  .padding-76-phone {
    padding: 76px !important;
  }
  .padding-top-76-phone {
    padding-top: 76px !important;
  }
  .padding-bottom-76-phone {
    padding-bottom: 76px !important;
  }
  .padding-left-76-phone {
    padding-left: 76px !important;
  }
  .padding-right-76-phone {
    padding-right: 76px !important;
  }
  .divider-76-phone {
    height: 76px !important;
  }
  .margin-77-phone {
    margin: 77px !important;
  }
  .margin-top-77-phone {
    margin-top: 77px !important;
  }
  .margin-bottom-77-phone {
    margin-bottom: 77px !important;
  }
  .margin-left-77-phone {
    margin-left: 77px !important;
  }
  .margin-right-77-phone {
    margin-right: 77px !important;
  }
  .padding-77-phone {
    padding: 77px !important;
  }
  .padding-top-77-phone {
    padding-top: 77px !important;
  }
  .padding-bottom-77-phone {
    padding-bottom: 77px !important;
  }
  .padding-left-77-phone {
    padding-left: 77px !important;
  }
  .padding-right-77-phone {
    padding-right: 77px !important;
  }
  .divider-77-phone {
    height: 77px !important;
  }
  .margin-78-phone {
    margin: 78px !important;
  }
  .margin-top-78-phone {
    margin-top: 78px !important;
  }
  .margin-bottom-78-phone {
    margin-bottom: 78px !important;
  }
  .margin-left-78-phone {
    margin-left: 78px !important;
  }
  .margin-right-78-phone {
    margin-right: 78px !important;
  }
  .padding-78-phone {
    padding: 78px !important;
  }
  .padding-top-78-phone {
    padding-top: 78px !important;
  }
  .padding-bottom-78-phone {
    padding-bottom: 78px !important;
  }
  .padding-left-78-phone {
    padding-left: 78px !important;
  }
  .padding-right-78-phone {
    padding-right: 78px !important;
  }
  .divider-78-phone {
    height: 78px !important;
  }
  .margin-79-phone {
    margin: 79px !important;
  }
  .margin-top-79-phone {
    margin-top: 79px !important;
  }
  .margin-bottom-79-phone {
    margin-bottom: 79px !important;
  }
  .margin-left-79-phone {
    margin-left: 79px !important;
  }
  .margin-right-79-phone {
    margin-right: 79px !important;
  }
  .padding-79-phone {
    padding: 79px !important;
  }
  .padding-top-79-phone {
    padding-top: 79px !important;
  }
  .padding-bottom-79-phone {
    padding-bottom: 79px !important;
  }
  .padding-left-79-phone {
    padding-left: 79px !important;
  }
  .padding-right-79-phone {
    padding-right: 79px !important;
  }
  .divider-79-phone {
    height: 79px !important;
  }
  .margin-80-phone {
    margin: 80px !important;
  }
  .margin-top-80-phone {
    margin-top: 80px !important;
  }
  .margin-bottom-80-phone {
    margin-bottom: 80px !important;
  }
  .margin-left-80-phone {
    margin-left: 80px !important;
  }
  .margin-right-80-phone {
    margin-right: 80px !important;
  }
  .padding-80-phone {
    padding: 80px !important;
  }
  .padding-top-80-phone {
    padding-top: 80px !important;
  }
  .padding-bottom-80-phone {
    padding-bottom: 80px !important;
  }
  .padding-left-80-phone {
    padding-left: 80px !important;
  }
  .padding-right-80-phone {
    padding-right: 80px !important;
  }
  .divider-80-phone {
    height: 80px !important;
  }
  .margin-81-phone {
    margin: 81px !important;
  }
  .margin-top-81-phone {
    margin-top: 81px !important;
  }
  .margin-bottom-81-phone {
    margin-bottom: 81px !important;
  }
  .margin-left-81-phone {
    margin-left: 81px !important;
  }
  .margin-right-81-phone {
    margin-right: 81px !important;
  }
  .padding-81-phone {
    padding: 81px !important;
  }
  .padding-top-81-phone {
    padding-top: 81px !important;
  }
  .padding-bottom-81-phone {
    padding-bottom: 81px !important;
  }
  .padding-left-81-phone {
    padding-left: 81px !important;
  }
  .padding-right-81-phone {
    padding-right: 81px !important;
  }
  .divider-81-phone {
    height: 81px !important;
  }
  .margin-82-phone {
    margin: 82px !important;
  }
  .margin-top-82-phone {
    margin-top: 82px !important;
  }
  .margin-bottom-82-phone {
    margin-bottom: 82px !important;
  }
  .margin-left-82-phone {
    margin-left: 82px !important;
  }
  .margin-right-82-phone {
    margin-right: 82px !important;
  }
  .padding-82-phone {
    padding: 82px !important;
  }
  .padding-top-82-phone {
    padding-top: 82px !important;
  }
  .padding-bottom-82-phone {
    padding-bottom: 82px !important;
  }
  .padding-left-82-phone {
    padding-left: 82px !important;
  }
  .padding-right-82-phone {
    padding-right: 82px !important;
  }
  .divider-82-phone {
    height: 82px !important;
  }
  .margin-83-phone {
    margin: 83px !important;
  }
  .margin-top-83-phone {
    margin-top: 83px !important;
  }
  .margin-bottom-83-phone {
    margin-bottom: 83px !important;
  }
  .margin-left-83-phone {
    margin-left: 83px !important;
  }
  .margin-right-83-phone {
    margin-right: 83px !important;
  }
  .padding-83-phone {
    padding: 83px !important;
  }
  .padding-top-83-phone {
    padding-top: 83px !important;
  }
  .padding-bottom-83-phone {
    padding-bottom: 83px !important;
  }
  .padding-left-83-phone {
    padding-left: 83px !important;
  }
  .padding-right-83-phone {
    padding-right: 83px !important;
  }
  .divider-83-phone {
    height: 83px !important;
  }
  .margin-84-phone {
    margin: 84px !important;
  }
  .margin-top-84-phone {
    margin-top: 84px !important;
  }
  .margin-bottom-84-phone {
    margin-bottom: 84px !important;
  }
  .margin-left-84-phone {
    margin-left: 84px !important;
  }
  .margin-right-84-phone {
    margin-right: 84px !important;
  }
  .padding-84-phone {
    padding: 84px !important;
  }
  .padding-top-84-phone {
    padding-top: 84px !important;
  }
  .padding-bottom-84-phone {
    padding-bottom: 84px !important;
  }
  .padding-left-84-phone {
    padding-left: 84px !important;
  }
  .padding-right-84-phone {
    padding-right: 84px !important;
  }
  .divider-84-phone {
    height: 84px !important;
  }
  .margin-85-phone {
    margin: 85px !important;
  }
  .margin-top-85-phone {
    margin-top: 85px !important;
  }
  .margin-bottom-85-phone {
    margin-bottom: 85px !important;
  }
  .margin-left-85-phone {
    margin-left: 85px !important;
  }
  .margin-right-85-phone {
    margin-right: 85px !important;
  }
  .padding-85-phone {
    padding: 85px !important;
  }
  .padding-top-85-phone {
    padding-top: 85px !important;
  }
  .padding-bottom-85-phone {
    padding-bottom: 85px !important;
  }
  .padding-left-85-phone {
    padding-left: 85px !important;
  }
  .padding-right-85-phone {
    padding-right: 85px !important;
  }
  .divider-85-phone {
    height: 85px !important;
  }
  .margin-86-phone {
    margin: 86px !important;
  }
  .margin-top-86-phone {
    margin-top: 86px !important;
  }
  .margin-bottom-86-phone {
    margin-bottom: 86px !important;
  }
  .margin-left-86-phone {
    margin-left: 86px !important;
  }
  .margin-right-86-phone {
    margin-right: 86px !important;
  }
  .padding-86-phone {
    padding: 86px !important;
  }
  .padding-top-86-phone {
    padding-top: 86px !important;
  }
  .padding-bottom-86-phone {
    padding-bottom: 86px !important;
  }
  .padding-left-86-phone {
    padding-left: 86px !important;
  }
  .padding-right-86-phone {
    padding-right: 86px !important;
  }
  .divider-86-phone {
    height: 86px !important;
  }
  .margin-87-phone {
    margin: 87px !important;
  }
  .margin-top-87-phone {
    margin-top: 87px !important;
  }
  .margin-bottom-87-phone {
    margin-bottom: 87px !important;
  }
  .margin-left-87-phone {
    margin-left: 87px !important;
  }
  .margin-right-87-phone {
    margin-right: 87px !important;
  }
  .padding-87-phone {
    padding: 87px !important;
  }
  .padding-top-87-phone {
    padding-top: 87px !important;
  }
  .padding-bottom-87-phone {
    padding-bottom: 87px !important;
  }
  .padding-left-87-phone {
    padding-left: 87px !important;
  }
  .padding-right-87-phone {
    padding-right: 87px !important;
  }
  .divider-87-phone {
    height: 87px !important;
  }
  .margin-88-phone {
    margin: 88px !important;
  }
  .margin-top-88-phone {
    margin-top: 88px !important;
  }
  .margin-bottom-88-phone {
    margin-bottom: 88px !important;
  }
  .margin-left-88-phone {
    margin-left: 88px !important;
  }
  .margin-right-88-phone {
    margin-right: 88px !important;
  }
  .padding-88-phone {
    padding: 88px !important;
  }
  .padding-top-88-phone {
    padding-top: 88px !important;
  }
  .padding-bottom-88-phone {
    padding-bottom: 88px !important;
  }
  .padding-left-88-phone {
    padding-left: 88px !important;
  }
  .padding-right-88-phone {
    padding-right: 88px !important;
  }
  .divider-88-phone {
    height: 88px !important;
  }
  .margin-89-phone {
    margin: 89px !important;
  }
  .margin-top-89-phone {
    margin-top: 89px !important;
  }
  .margin-bottom-89-phone {
    margin-bottom: 89px !important;
  }
  .margin-left-89-phone {
    margin-left: 89px !important;
  }
  .margin-right-89-phone {
    margin-right: 89px !important;
  }
  .padding-89-phone {
    padding: 89px !important;
  }
  .padding-top-89-phone {
    padding-top: 89px !important;
  }
  .padding-bottom-89-phone {
    padding-bottom: 89px !important;
  }
  .padding-left-89-phone {
    padding-left: 89px !important;
  }
  .padding-right-89-phone {
    padding-right: 89px !important;
  }
  .divider-89-phone {
    height: 89px !important;
  }
  .margin-90-phone {
    margin: 90px !important;
  }
  .margin-top-90-phone {
    margin-top: 90px !important;
  }
  .margin-bottom-90-phone {
    margin-bottom: 90px !important;
  }
  .margin-left-90-phone {
    margin-left: 90px !important;
  }
  .margin-right-90-phone {
    margin-right: 90px !important;
  }
  .padding-90-phone {
    padding: 90px !important;
  }
  .padding-top-90-phone {
    padding-top: 90px !important;
  }
  .padding-bottom-90-phone {
    padding-bottom: 90px !important;
  }
  .padding-left-90-phone {
    padding-left: 90px !important;
  }
  .padding-right-90-phone {
    padding-right: 90px !important;
  }
  .divider-90-phone {
    height: 90px !important;
  }
  .margin-91-phone {
    margin: 91px !important;
  }
  .margin-top-91-phone {
    margin-top: 91px !important;
  }
  .margin-bottom-91-phone {
    margin-bottom: 91px !important;
  }
  .margin-left-91-phone {
    margin-left: 91px !important;
  }
  .margin-right-91-phone {
    margin-right: 91px !important;
  }
  .padding-91-phone {
    padding: 91px !important;
  }
  .padding-top-91-phone {
    padding-top: 91px !important;
  }
  .padding-bottom-91-phone {
    padding-bottom: 91px !important;
  }
  .padding-left-91-phone {
    padding-left: 91px !important;
  }
  .padding-right-91-phone {
    padding-right: 91px !important;
  }
  .divider-91-phone {
    height: 91px !important;
  }
  .margin-92-phone {
    margin: 92px !important;
  }
  .margin-top-92-phone {
    margin-top: 92px !important;
  }
  .margin-bottom-92-phone {
    margin-bottom: 92px !important;
  }
  .margin-left-92-phone {
    margin-left: 92px !important;
  }
  .margin-right-92-phone {
    margin-right: 92px !important;
  }
  .padding-92-phone {
    padding: 92px !important;
  }
  .padding-top-92-phone {
    padding-top: 92px !important;
  }
  .padding-bottom-92-phone {
    padding-bottom: 92px !important;
  }
  .padding-left-92-phone {
    padding-left: 92px !important;
  }
  .padding-right-92-phone {
    padding-right: 92px !important;
  }
  .divider-92-phone {
    height: 92px !important;
  }
  .margin-93-phone {
    margin: 93px !important;
  }
  .margin-top-93-phone {
    margin-top: 93px !important;
  }
  .margin-bottom-93-phone {
    margin-bottom: 93px !important;
  }
  .margin-left-93-phone {
    margin-left: 93px !important;
  }
  .margin-right-93-phone {
    margin-right: 93px !important;
  }
  .padding-93-phone {
    padding: 93px !important;
  }
  .padding-top-93-phone {
    padding-top: 93px !important;
  }
  .padding-bottom-93-phone {
    padding-bottom: 93px !important;
  }
  .padding-left-93-phone {
    padding-left: 93px !important;
  }
  .padding-right-93-phone {
    padding-right: 93px !important;
  }
  .divider-93-phone {
    height: 93px !important;
  }
  .margin-94-phone {
    margin: 94px !important;
  }
  .margin-top-94-phone {
    margin-top: 94px !important;
  }
  .margin-bottom-94-phone {
    margin-bottom: 94px !important;
  }
  .margin-left-94-phone {
    margin-left: 94px !important;
  }
  .margin-right-94-phone {
    margin-right: 94px !important;
  }
  .padding-94-phone {
    padding: 94px !important;
  }
  .padding-top-94-phone {
    padding-top: 94px !important;
  }
  .padding-bottom-94-phone {
    padding-bottom: 94px !important;
  }
  .padding-left-94-phone {
    padding-left: 94px !important;
  }
  .padding-right-94-phone {
    padding-right: 94px !important;
  }
  .divider-94-phone {
    height: 94px !important;
  }
  .margin-95-phone {
    margin: 95px !important;
  }
  .margin-top-95-phone {
    margin-top: 95px !important;
  }
  .margin-bottom-95-phone {
    margin-bottom: 95px !important;
  }
  .margin-left-95-phone {
    margin-left: 95px !important;
  }
  .margin-right-95-phone {
    margin-right: 95px !important;
  }
  .padding-95-phone {
    padding: 95px !important;
  }
  .padding-top-95-phone {
    padding-top: 95px !important;
  }
  .padding-bottom-95-phone {
    padding-bottom: 95px !important;
  }
  .padding-left-95-phone {
    padding-left: 95px !important;
  }
  .padding-right-95-phone {
    padding-right: 95px !important;
  }
  .divider-95-phone {
    height: 95px !important;
  }
  .margin-96-phone {
    margin: 96px !important;
  }
  .margin-top-96-phone {
    margin-top: 96px !important;
  }
  .margin-bottom-96-phone {
    margin-bottom: 96px !important;
  }
  .margin-left-96-phone {
    margin-left: 96px !important;
  }
  .margin-right-96-phone {
    margin-right: 96px !important;
  }
  .padding-96-phone {
    padding: 96px !important;
  }
  .padding-top-96-phone {
    padding-top: 96px !important;
  }
  .padding-bottom-96-phone {
    padding-bottom: 96px !important;
  }
  .padding-left-96-phone {
    padding-left: 96px !important;
  }
  .padding-right-96-phone {
    padding-right: 96px !important;
  }
  .divider-96-phone {
    height: 96px !important;
  }
  .margin-97-phone {
    margin: 97px !important;
  }
  .margin-top-97-phone {
    margin-top: 97px !important;
  }
  .margin-bottom-97-phone {
    margin-bottom: 97px !important;
  }
  .margin-left-97-phone {
    margin-left: 97px !important;
  }
  .margin-right-97-phone {
    margin-right: 97px !important;
  }
  .padding-97-phone {
    padding: 97px !important;
  }
  .padding-top-97-phone {
    padding-top: 97px !important;
  }
  .padding-bottom-97-phone {
    padding-bottom: 97px !important;
  }
  .padding-left-97-phone {
    padding-left: 97px !important;
  }
  .padding-right-97-phone {
    padding-right: 97px !important;
  }
  .divider-97-phone {
    height: 97px !important;
  }
  .margin-98-phone {
    margin: 98px !important;
  }
  .margin-top-98-phone {
    margin-top: 98px !important;
  }
  .margin-bottom-98-phone {
    margin-bottom: 98px !important;
  }
  .margin-left-98-phone {
    margin-left: 98px !important;
  }
  .margin-right-98-phone {
    margin-right: 98px !important;
  }
  .padding-98-phone {
    padding: 98px !important;
  }
  .padding-top-98-phone {
    padding-top: 98px !important;
  }
  .padding-bottom-98-phone {
    padding-bottom: 98px !important;
  }
  .padding-left-98-phone {
    padding-left: 98px !important;
  }
  .padding-right-98-phone {
    padding-right: 98px !important;
  }
  .divider-98-phone {
    height: 98px !important;
  }
  .margin-99-phone {
    margin: 99px !important;
  }
  .margin-top-99-phone {
    margin-top: 99px !important;
  }
  .margin-bottom-99-phone {
    margin-bottom: 99px !important;
  }
  .margin-left-99-phone {
    margin-left: 99px !important;
  }
  .margin-right-99-phone {
    margin-right: 99px !important;
  }
  .padding-99-phone {
    padding: 99px !important;
  }
  .padding-top-99-phone {
    padding-top: 99px !important;
  }
  .padding-bottom-99-phone {
    padding-bottom: 99px !important;
  }
  .padding-left-99-phone {
    padding-left: 99px !important;
  }
  .padding-right-99-phone {
    padding-right: 99px !important;
  }
  .divider-99-phone {
    height: 99px !important;
  }
  .margin-100-phone {
    margin: 100px !important;
  }
  .margin-top-100-phone {
    margin-top: 100px !important;
  }
  .margin-bottom-100-phone {
    margin-bottom: 100px !important;
  }
  .margin-left-100-phone {
    margin-left: 100px !important;
  }
  .margin-right-100-phone {
    margin-right: 100px !important;
  }
  .padding-100-phone {
    padding: 100px !important;
  }
  .padding-top-100-phone {
    padding-top: 100px !important;
  }
  .padding-bottom-100-phone {
    padding-bottom: 100px !important;
  }
  .padding-left-100-phone {
    padding-left: 100px !important;
  }
  .padding-right-100-phone {
    padding-right: 100px !important;
  }
  .divider-100-phone {
    height: 100px !important;
  }
  .margin-101-phone {
    margin: 101px !important;
  }
  .margin-top-101-phone {
    margin-top: 101px !important;
  }
  .margin-bottom-101-phone {
    margin-bottom: 101px !important;
  }
  .margin-left-101-phone {
    margin-left: 101px !important;
  }
  .margin-right-101-phone {
    margin-right: 101px !important;
  }
  .padding-101-phone {
    padding: 101px !important;
  }
  .padding-top-101-phone {
    padding-top: 101px !important;
  }
  .padding-bottom-101-phone {
    padding-bottom: 101px !important;
  }
  .padding-left-101-phone {
    padding-left: 101px !important;
  }
  .padding-right-101-phone {
    padding-right: 101px !important;
  }
  .divider-101-phone {
    height: 101px !important;
  }
  .margin-102-phone {
    margin: 102px !important;
  }
  .margin-top-102-phone {
    margin-top: 102px !important;
  }
  .margin-bottom-102-phone {
    margin-bottom: 102px !important;
  }
  .margin-left-102-phone {
    margin-left: 102px !important;
  }
  .margin-right-102-phone {
    margin-right: 102px !important;
  }
  .padding-102-phone {
    padding: 102px !important;
  }
  .padding-top-102-phone {
    padding-top: 102px !important;
  }
  .padding-bottom-102-phone {
    padding-bottom: 102px !important;
  }
  .padding-left-102-phone {
    padding-left: 102px !important;
  }
  .padding-right-102-phone {
    padding-right: 102px !important;
  }
  .divider-102-phone {
    height: 102px !important;
  }
  .margin-103-phone {
    margin: 103px !important;
  }
  .margin-top-103-phone {
    margin-top: 103px !important;
  }
  .margin-bottom-103-phone {
    margin-bottom: 103px !important;
  }
  .margin-left-103-phone {
    margin-left: 103px !important;
  }
  .margin-right-103-phone {
    margin-right: 103px !important;
  }
  .padding-103-phone {
    padding: 103px !important;
  }
  .padding-top-103-phone {
    padding-top: 103px !important;
  }
  .padding-bottom-103-phone {
    padding-bottom: 103px !important;
  }
  .padding-left-103-phone {
    padding-left: 103px !important;
  }
  .padding-right-103-phone {
    padding-right: 103px !important;
  }
  .divider-103-phone {
    height: 103px !important;
  }
  .margin-104-phone {
    margin: 104px !important;
  }
  .margin-top-104-phone {
    margin-top: 104px !important;
  }
  .margin-bottom-104-phone {
    margin-bottom: 104px !important;
  }
  .margin-left-104-phone {
    margin-left: 104px !important;
  }
  .margin-right-104-phone {
    margin-right: 104px !important;
  }
  .padding-104-phone {
    padding: 104px !important;
  }
  .padding-top-104-phone {
    padding-top: 104px !important;
  }
  .padding-bottom-104-phone {
    padding-bottom: 104px !important;
  }
  .padding-left-104-phone {
    padding-left: 104px !important;
  }
  .padding-right-104-phone {
    padding-right: 104px !important;
  }
  .divider-104-phone {
    height: 104px !important;
  }
  .margin-105-phone {
    margin: 105px !important;
  }
  .margin-top-105-phone {
    margin-top: 105px !important;
  }
  .margin-bottom-105-phone {
    margin-bottom: 105px !important;
  }
  .margin-left-105-phone {
    margin-left: 105px !important;
  }
  .margin-right-105-phone {
    margin-right: 105px !important;
  }
  .padding-105-phone {
    padding: 105px !important;
  }
  .padding-top-105-phone {
    padding-top: 105px !important;
  }
  .padding-bottom-105-phone {
    padding-bottom: 105px !important;
  }
  .padding-left-105-phone {
    padding-left: 105px !important;
  }
  .padding-right-105-phone {
    padding-right: 105px !important;
  }
  .divider-105-phone {
    height: 105px !important;
  }
  .margin-106-phone {
    margin: 106px !important;
  }
  .margin-top-106-phone {
    margin-top: 106px !important;
  }
  .margin-bottom-106-phone {
    margin-bottom: 106px !important;
  }
  .margin-left-106-phone {
    margin-left: 106px !important;
  }
  .margin-right-106-phone {
    margin-right: 106px !important;
  }
  .padding-106-phone {
    padding: 106px !important;
  }
  .padding-top-106-phone {
    padding-top: 106px !important;
  }
  .padding-bottom-106-phone {
    padding-bottom: 106px !important;
  }
  .padding-left-106-phone {
    padding-left: 106px !important;
  }
  .padding-right-106-phone {
    padding-right: 106px !important;
  }
  .divider-106-phone {
    height: 106px !important;
  }
  .margin-107-phone {
    margin: 107px !important;
  }
  .margin-top-107-phone {
    margin-top: 107px !important;
  }
  .margin-bottom-107-phone {
    margin-bottom: 107px !important;
  }
  .margin-left-107-phone {
    margin-left: 107px !important;
  }
  .margin-right-107-phone {
    margin-right: 107px !important;
  }
  .padding-107-phone {
    padding: 107px !important;
  }
  .padding-top-107-phone {
    padding-top: 107px !important;
  }
  .padding-bottom-107-phone {
    padding-bottom: 107px !important;
  }
  .padding-left-107-phone {
    padding-left: 107px !important;
  }
  .padding-right-107-phone {
    padding-right: 107px !important;
  }
  .divider-107-phone {
    height: 107px !important;
  }
  .margin-108-phone {
    margin: 108px !important;
  }
  .margin-top-108-phone {
    margin-top: 108px !important;
  }
  .margin-bottom-108-phone {
    margin-bottom: 108px !important;
  }
  .margin-left-108-phone {
    margin-left: 108px !important;
  }
  .margin-right-108-phone {
    margin-right: 108px !important;
  }
  .padding-108-phone {
    padding: 108px !important;
  }
  .padding-top-108-phone {
    padding-top: 108px !important;
  }
  .padding-bottom-108-phone {
    padding-bottom: 108px !important;
  }
  .padding-left-108-phone {
    padding-left: 108px !important;
  }
  .padding-right-108-phone {
    padding-right: 108px !important;
  }
  .divider-108-phone {
    height: 108px !important;
  }
  .margin-109-phone {
    margin: 109px !important;
  }
  .margin-top-109-phone {
    margin-top: 109px !important;
  }
  .margin-bottom-109-phone {
    margin-bottom: 109px !important;
  }
  .margin-left-109-phone {
    margin-left: 109px !important;
  }
  .margin-right-109-phone {
    margin-right: 109px !important;
  }
  .padding-109-phone {
    padding: 109px !important;
  }
  .padding-top-109-phone {
    padding-top: 109px !important;
  }
  .padding-bottom-109-phone {
    padding-bottom: 109px !important;
  }
  .padding-left-109-phone {
    padding-left: 109px !important;
  }
  .padding-right-109-phone {
    padding-right: 109px !important;
  }
  .divider-109-phone {
    height: 109px !important;
  }
  .margin-110-phone {
    margin: 110px !important;
  }
  .margin-top-110-phone {
    margin-top: 110px !important;
  }
  .margin-bottom-110-phone {
    margin-bottom: 110px !important;
  }
  .margin-left-110-phone {
    margin-left: 110px !important;
  }
  .margin-right-110-phone {
    margin-right: 110px !important;
  }
  .padding-110-phone {
    padding: 110px !important;
  }
  .padding-top-110-phone {
    padding-top: 110px !important;
  }
  .padding-bottom-110-phone {
    padding-bottom: 110px !important;
  }
  .padding-left-110-phone {
    padding-left: 110px !important;
  }
  .padding-right-110-phone {
    padding-right: 110px !important;
  }
  .divider-110-phone {
    height: 110px !important;
  }
  .margin-111-phone {
    margin: 111px !important;
  }
  .margin-top-111-phone {
    margin-top: 111px !important;
  }
  .margin-bottom-111-phone {
    margin-bottom: 111px !important;
  }
  .margin-left-111-phone {
    margin-left: 111px !important;
  }
  .margin-right-111-phone {
    margin-right: 111px !important;
  }
  .padding-111-phone {
    padding: 111px !important;
  }
  .padding-top-111-phone {
    padding-top: 111px !important;
  }
  .padding-bottom-111-phone {
    padding-bottom: 111px !important;
  }
  .padding-left-111-phone {
    padding-left: 111px !important;
  }
  .padding-right-111-phone {
    padding-right: 111px !important;
  }
  .divider-111-phone {
    height: 111px !important;
  }
  .margin-112-phone {
    margin: 112px !important;
  }
  .margin-top-112-phone {
    margin-top: 112px !important;
  }
  .margin-bottom-112-phone {
    margin-bottom: 112px !important;
  }
  .margin-left-112-phone {
    margin-left: 112px !important;
  }
  .margin-right-112-phone {
    margin-right: 112px !important;
  }
  .padding-112-phone {
    padding: 112px !important;
  }
  .padding-top-112-phone {
    padding-top: 112px !important;
  }
  .padding-bottom-112-phone {
    padding-bottom: 112px !important;
  }
  .padding-left-112-phone {
    padding-left: 112px !important;
  }
  .padding-right-112-phone {
    padding-right: 112px !important;
  }
  .divider-112-phone {
    height: 112px !important;
  }
  .margin-113-phone {
    margin: 113px !important;
  }
  .margin-top-113-phone {
    margin-top: 113px !important;
  }
  .margin-bottom-113-phone {
    margin-bottom: 113px !important;
  }
  .margin-left-113-phone {
    margin-left: 113px !important;
  }
  .margin-right-113-phone {
    margin-right: 113px !important;
  }
  .padding-113-phone {
    padding: 113px !important;
  }
  .padding-top-113-phone {
    padding-top: 113px !important;
  }
  .padding-bottom-113-phone {
    padding-bottom: 113px !important;
  }
  .padding-left-113-phone {
    padding-left: 113px !important;
  }
  .padding-right-113-phone {
    padding-right: 113px !important;
  }
  .divider-113-phone {
    height: 113px !important;
  }
  .margin-114-phone {
    margin: 114px !important;
  }
  .margin-top-114-phone {
    margin-top: 114px !important;
  }
  .margin-bottom-114-phone {
    margin-bottom: 114px !important;
  }
  .margin-left-114-phone {
    margin-left: 114px !important;
  }
  .margin-right-114-phone {
    margin-right: 114px !important;
  }
  .padding-114-phone {
    padding: 114px !important;
  }
  .padding-top-114-phone {
    padding-top: 114px !important;
  }
  .padding-bottom-114-phone {
    padding-bottom: 114px !important;
  }
  .padding-left-114-phone {
    padding-left: 114px !important;
  }
  .padding-right-114-phone {
    padding-right: 114px !important;
  }
  .divider-114-phone {
    height: 114px !important;
  }
  .margin-115-phone {
    margin: 115px !important;
  }
  .margin-top-115-phone {
    margin-top: 115px !important;
  }
  .margin-bottom-115-phone {
    margin-bottom: 115px !important;
  }
  .margin-left-115-phone {
    margin-left: 115px !important;
  }
  .margin-right-115-phone {
    margin-right: 115px !important;
  }
  .padding-115-phone {
    padding: 115px !important;
  }
  .padding-top-115-phone {
    padding-top: 115px !important;
  }
  .padding-bottom-115-phone {
    padding-bottom: 115px !important;
  }
  .padding-left-115-phone {
    padding-left: 115px !important;
  }
  .padding-right-115-phone {
    padding-right: 115px !important;
  }
  .divider-115-phone {
    height: 115px !important;
  }
  .margin-116-phone {
    margin: 116px !important;
  }
  .margin-top-116-phone {
    margin-top: 116px !important;
  }
  .margin-bottom-116-phone {
    margin-bottom: 116px !important;
  }
  .margin-left-116-phone {
    margin-left: 116px !important;
  }
  .margin-right-116-phone {
    margin-right: 116px !important;
  }
  .padding-116-phone {
    padding: 116px !important;
  }
  .padding-top-116-phone {
    padding-top: 116px !important;
  }
  .padding-bottom-116-phone {
    padding-bottom: 116px !important;
  }
  .padding-left-116-phone {
    padding-left: 116px !important;
  }
  .padding-right-116-phone {
    padding-right: 116px !important;
  }
  .divider-116-phone {
    height: 116px !important;
  }
  .margin-117-phone {
    margin: 117px !important;
  }
  .margin-top-117-phone {
    margin-top: 117px !important;
  }
  .margin-bottom-117-phone {
    margin-bottom: 117px !important;
  }
  .margin-left-117-phone {
    margin-left: 117px !important;
  }
  .margin-right-117-phone {
    margin-right: 117px !important;
  }
  .padding-117-phone {
    padding: 117px !important;
  }
  .padding-top-117-phone {
    padding-top: 117px !important;
  }
  .padding-bottom-117-phone {
    padding-bottom: 117px !important;
  }
  .padding-left-117-phone {
    padding-left: 117px !important;
  }
  .padding-right-117-phone {
    padding-right: 117px !important;
  }
  .divider-117-phone {
    height: 117px !important;
  }
  .margin-118-phone {
    margin: 118px !important;
  }
  .margin-top-118-phone {
    margin-top: 118px !important;
  }
  .margin-bottom-118-phone {
    margin-bottom: 118px !important;
  }
  .margin-left-118-phone {
    margin-left: 118px !important;
  }
  .margin-right-118-phone {
    margin-right: 118px !important;
  }
  .padding-118-phone {
    padding: 118px !important;
  }
  .padding-top-118-phone {
    padding-top: 118px !important;
  }
  .padding-bottom-118-phone {
    padding-bottom: 118px !important;
  }
  .padding-left-118-phone {
    padding-left: 118px !important;
  }
  .padding-right-118-phone {
    padding-right: 118px !important;
  }
  .divider-118-phone {
    height: 118px !important;
  }
  .margin-119-phone {
    margin: 119px !important;
  }
  .margin-top-119-phone {
    margin-top: 119px !important;
  }
  .margin-bottom-119-phone {
    margin-bottom: 119px !important;
  }
  .margin-left-119-phone {
    margin-left: 119px !important;
  }
  .margin-right-119-phone {
    margin-right: 119px !important;
  }
  .padding-119-phone {
    padding: 119px !important;
  }
  .padding-top-119-phone {
    padding-top: 119px !important;
  }
  .padding-bottom-119-phone {
    padding-bottom: 119px !important;
  }
  .padding-left-119-phone {
    padding-left: 119px !important;
  }
  .padding-right-119-phone {
    padding-right: 119px !important;
  }
  .divider-119-phone {
    height: 119px !important;
  }
  .margin-120-phone {
    margin: 120px !important;
  }
  .margin-top-120-phone {
    margin-top: 120px !important;
  }
  .margin-bottom-120-phone {
    margin-bottom: 120px !important;
  }
  .margin-left-120-phone {
    margin-left: 120px !important;
  }
  .margin-right-120-phone {
    margin-right: 120px !important;
  }
  .padding-120-phone {
    padding: 120px !important;
  }
  .padding-top-120-phone {
    padding-top: 120px !important;
  }
  .padding-bottom-120-phone {
    padding-bottom: 120px !important;
  }
  .padding-left-120-phone {
    padding-left: 120px !important;
  }
  .padding-right-120-phone {
    padding-right: 120px !important;
  }
  .divider-120-phone {
    height: 120px !important;
  }
  .margin-121-phone {
    margin: 121px !important;
  }
  .margin-top-121-phone {
    margin-top: 121px !important;
  }
  .margin-bottom-121-phone {
    margin-bottom: 121px !important;
  }
  .margin-left-121-phone {
    margin-left: 121px !important;
  }
  .margin-right-121-phone {
    margin-right: 121px !important;
  }
  .padding-121-phone {
    padding: 121px !important;
  }
  .padding-top-121-phone {
    padding-top: 121px !important;
  }
  .padding-bottom-121-phone {
    padding-bottom: 121px !important;
  }
  .padding-left-121-phone {
    padding-left: 121px !important;
  }
  .padding-right-121-phone {
    padding-right: 121px !important;
  }
  .divider-121-phone {
    height: 121px !important;
  }
  .margin-122-phone {
    margin: 122px !important;
  }
  .margin-top-122-phone {
    margin-top: 122px !important;
  }
  .margin-bottom-122-phone {
    margin-bottom: 122px !important;
  }
  .margin-left-122-phone {
    margin-left: 122px !important;
  }
  .margin-right-122-phone {
    margin-right: 122px !important;
  }
  .padding-122-phone {
    padding: 122px !important;
  }
  .padding-top-122-phone {
    padding-top: 122px !important;
  }
  .padding-bottom-122-phone {
    padding-bottom: 122px !important;
  }
  .padding-left-122-phone {
    padding-left: 122px !important;
  }
  .padding-right-122-phone {
    padding-right: 122px !important;
  }
  .divider-122-phone {
    height: 122px !important;
  }
  .margin-123-phone {
    margin: 123px !important;
  }
  .margin-top-123-phone {
    margin-top: 123px !important;
  }
  .margin-bottom-123-phone {
    margin-bottom: 123px !important;
  }
  .margin-left-123-phone {
    margin-left: 123px !important;
  }
  .margin-right-123-phone {
    margin-right: 123px !important;
  }
  .padding-123-phone {
    padding: 123px !important;
  }
  .padding-top-123-phone {
    padding-top: 123px !important;
  }
  .padding-bottom-123-phone {
    padding-bottom: 123px !important;
  }
  .padding-left-123-phone {
    padding-left: 123px !important;
  }
  .padding-right-123-phone {
    padding-right: 123px !important;
  }
  .divider-123-phone {
    height: 123px !important;
  }
  .margin-124-phone {
    margin: 124px !important;
  }
  .margin-top-124-phone {
    margin-top: 124px !important;
  }
  .margin-bottom-124-phone {
    margin-bottom: 124px !important;
  }
  .margin-left-124-phone {
    margin-left: 124px !important;
  }
  .margin-right-124-phone {
    margin-right: 124px !important;
  }
  .padding-124-phone {
    padding: 124px !important;
  }
  .padding-top-124-phone {
    padding-top: 124px !important;
  }
  .padding-bottom-124-phone {
    padding-bottom: 124px !important;
  }
  .padding-left-124-phone {
    padding-left: 124px !important;
  }
  .padding-right-124-phone {
    padding-right: 124px !important;
  }
  .divider-124-phone {
    height: 124px !important;
  }
  .margin-125-phone {
    margin: 125px !important;
  }
  .margin-top-125-phone {
    margin-top: 125px !important;
  }
  .margin-bottom-125-phone {
    margin-bottom: 125px !important;
  }
  .margin-left-125-phone {
    margin-left: 125px !important;
  }
  .margin-right-125-phone {
    margin-right: 125px !important;
  }
  .padding-125-phone {
    padding: 125px !important;
  }
  .padding-top-125-phone {
    padding-top: 125px !important;
  }
  .padding-bottom-125-phone {
    padding-bottom: 125px !important;
  }
  .padding-left-125-phone {
    padding-left: 125px !important;
  }
  .padding-right-125-phone {
    padding-right: 125px !important;
  }
  .divider-125-phone {
    height: 125px !important;
  }
  .margin-126-phone {
    margin: 126px !important;
  }
  .margin-top-126-phone {
    margin-top: 126px !important;
  }
  .margin-bottom-126-phone {
    margin-bottom: 126px !important;
  }
  .margin-left-126-phone {
    margin-left: 126px !important;
  }
  .margin-right-126-phone {
    margin-right: 126px !important;
  }
  .padding-126-phone {
    padding: 126px !important;
  }
  .padding-top-126-phone {
    padding-top: 126px !important;
  }
  .padding-bottom-126-phone {
    padding-bottom: 126px !important;
  }
  .padding-left-126-phone {
    padding-left: 126px !important;
  }
  .padding-right-126-phone {
    padding-right: 126px !important;
  }
  .divider-126-phone {
    height: 126px !important;
  }
  .margin-127-phone {
    margin: 127px !important;
  }
  .margin-top-127-phone {
    margin-top: 127px !important;
  }
  .margin-bottom-127-phone {
    margin-bottom: 127px !important;
  }
  .margin-left-127-phone {
    margin-left: 127px !important;
  }
  .margin-right-127-phone {
    margin-right: 127px !important;
  }
  .padding-127-phone {
    padding: 127px !important;
  }
  .padding-top-127-phone {
    padding-top: 127px !important;
  }
  .padding-bottom-127-phone {
    padding-bottom: 127px !important;
  }
  .padding-left-127-phone {
    padding-left: 127px !important;
  }
  .padding-right-127-phone {
    padding-right: 127px !important;
  }
  .divider-127-phone {
    height: 127px !important;
  }
  .margin-128-phone {
    margin: 128px !important;
  }
  .margin-top-128-phone {
    margin-top: 128px !important;
  }
  .margin-bottom-128-phone {
    margin-bottom: 128px !important;
  }
  .margin-left-128-phone {
    margin-left: 128px !important;
  }
  .margin-right-128-phone {
    margin-right: 128px !important;
  }
  .padding-128-phone {
    padding: 128px !important;
  }
  .padding-top-128-phone {
    padding-top: 128px !important;
  }
  .padding-bottom-128-phone {
    padding-bottom: 128px !important;
  }
  .padding-left-128-phone {
    padding-left: 128px !important;
  }
  .padding-right-128-phone {
    padding-right: 128px !important;
  }
  .divider-128-phone {
    height: 128px !important;
  }
  .margin-129-phone {
    margin: 129px !important;
  }
  .margin-top-129-phone {
    margin-top: 129px !important;
  }
  .margin-bottom-129-phone {
    margin-bottom: 129px !important;
  }
  .margin-left-129-phone {
    margin-left: 129px !important;
  }
  .margin-right-129-phone {
    margin-right: 129px !important;
  }
  .padding-129-phone {
    padding: 129px !important;
  }
  .padding-top-129-phone {
    padding-top: 129px !important;
  }
  .padding-bottom-129-phone {
    padding-bottom: 129px !important;
  }
  .padding-left-129-phone {
    padding-left: 129px !important;
  }
  .padding-right-129-phone {
    padding-right: 129px !important;
  }
  .divider-129-phone {
    height: 129px !important;
  }
  .margin-130-phone {
    margin: 130px !important;
  }
  .margin-top-130-phone {
    margin-top: 130px !important;
  }
  .margin-bottom-130-phone {
    margin-bottom: 130px !important;
  }
  .margin-left-130-phone {
    margin-left: 130px !important;
  }
  .margin-right-130-phone {
    margin-right: 130px !important;
  }
  .padding-130-phone {
    padding: 130px !important;
  }
  .padding-top-130-phone {
    padding-top: 130px !important;
  }
  .padding-bottom-130-phone {
    padding-bottom: 130px !important;
  }
  .padding-left-130-phone {
    padding-left: 130px !important;
  }
  .padding-right-130-phone {
    padding-right: 130px !important;
  }
  .divider-130-phone {
    height: 130px !important;
  }
  .margin-131-phone {
    margin: 131px !important;
  }
  .margin-top-131-phone {
    margin-top: 131px !important;
  }
  .margin-bottom-131-phone {
    margin-bottom: 131px !important;
  }
  .margin-left-131-phone {
    margin-left: 131px !important;
  }
  .margin-right-131-phone {
    margin-right: 131px !important;
  }
  .padding-131-phone {
    padding: 131px !important;
  }
  .padding-top-131-phone {
    padding-top: 131px !important;
  }
  .padding-bottom-131-phone {
    padding-bottom: 131px !important;
  }
  .padding-left-131-phone {
    padding-left: 131px !important;
  }
  .padding-right-131-phone {
    padding-right: 131px !important;
  }
  .divider-131-phone {
    height: 131px !important;
  }
  .margin-132-phone {
    margin: 132px !important;
  }
  .margin-top-132-phone {
    margin-top: 132px !important;
  }
  .margin-bottom-132-phone {
    margin-bottom: 132px !important;
  }
  .margin-left-132-phone {
    margin-left: 132px !important;
  }
  .margin-right-132-phone {
    margin-right: 132px !important;
  }
  .padding-132-phone {
    padding: 132px !important;
  }
  .padding-top-132-phone {
    padding-top: 132px !important;
  }
  .padding-bottom-132-phone {
    padding-bottom: 132px !important;
  }
  .padding-left-132-phone {
    padding-left: 132px !important;
  }
  .padding-right-132-phone {
    padding-right: 132px !important;
  }
  .divider-132-phone {
    height: 132px !important;
  }
  .margin-133-phone {
    margin: 133px !important;
  }
  .margin-top-133-phone {
    margin-top: 133px !important;
  }
  .margin-bottom-133-phone {
    margin-bottom: 133px !important;
  }
  .margin-left-133-phone {
    margin-left: 133px !important;
  }
  .margin-right-133-phone {
    margin-right: 133px !important;
  }
  .padding-133-phone {
    padding: 133px !important;
  }
  .padding-top-133-phone {
    padding-top: 133px !important;
  }
  .padding-bottom-133-phone {
    padding-bottom: 133px !important;
  }
  .padding-left-133-phone {
    padding-left: 133px !important;
  }
  .padding-right-133-phone {
    padding-right: 133px !important;
  }
  .divider-133-phone {
    height: 133px !important;
  }
  .margin-134-phone {
    margin: 134px !important;
  }
  .margin-top-134-phone {
    margin-top: 134px !important;
  }
  .margin-bottom-134-phone {
    margin-bottom: 134px !important;
  }
  .margin-left-134-phone {
    margin-left: 134px !important;
  }
  .margin-right-134-phone {
    margin-right: 134px !important;
  }
  .padding-134-phone {
    padding: 134px !important;
  }
  .padding-top-134-phone {
    padding-top: 134px !important;
  }
  .padding-bottom-134-phone {
    padding-bottom: 134px !important;
  }
  .padding-left-134-phone {
    padding-left: 134px !important;
  }
  .padding-right-134-phone {
    padding-right: 134px !important;
  }
  .divider-134-phone {
    height: 134px !important;
  }
  .margin-135-phone {
    margin: 135px !important;
  }
  .margin-top-135-phone {
    margin-top: 135px !important;
  }
  .margin-bottom-135-phone {
    margin-bottom: 135px !important;
  }
  .margin-left-135-phone {
    margin-left: 135px !important;
  }
  .margin-right-135-phone {
    margin-right: 135px !important;
  }
  .padding-135-phone {
    padding: 135px !important;
  }
  .padding-top-135-phone {
    padding-top: 135px !important;
  }
  .padding-bottom-135-phone {
    padding-bottom: 135px !important;
  }
  .padding-left-135-phone {
    padding-left: 135px !important;
  }
  .padding-right-135-phone {
    padding-right: 135px !important;
  }
  .divider-135-phone {
    height: 135px !important;
  }
  .margin-136-phone {
    margin: 136px !important;
  }
  .margin-top-136-phone {
    margin-top: 136px !important;
  }
  .margin-bottom-136-phone {
    margin-bottom: 136px !important;
  }
  .margin-left-136-phone {
    margin-left: 136px !important;
  }
  .margin-right-136-phone {
    margin-right: 136px !important;
  }
  .padding-136-phone {
    padding: 136px !important;
  }
  .padding-top-136-phone {
    padding-top: 136px !important;
  }
  .padding-bottom-136-phone {
    padding-bottom: 136px !important;
  }
  .padding-left-136-phone {
    padding-left: 136px !important;
  }
  .padding-right-136-phone {
    padding-right: 136px !important;
  }
  .divider-136-phone {
    height: 136px !important;
  }
  .margin-137-phone {
    margin: 137px !important;
  }
  .margin-top-137-phone {
    margin-top: 137px !important;
  }
  .margin-bottom-137-phone {
    margin-bottom: 137px !important;
  }
  .margin-left-137-phone {
    margin-left: 137px !important;
  }
  .margin-right-137-phone {
    margin-right: 137px !important;
  }
  .padding-137-phone {
    padding: 137px !important;
  }
  .padding-top-137-phone {
    padding-top: 137px !important;
  }
  .padding-bottom-137-phone {
    padding-bottom: 137px !important;
  }
  .padding-left-137-phone {
    padding-left: 137px !important;
  }
  .padding-right-137-phone {
    padding-right: 137px !important;
  }
  .divider-137-phone {
    height: 137px !important;
  }
  .margin-138-phone {
    margin: 138px !important;
  }
  .margin-top-138-phone {
    margin-top: 138px !important;
  }
  .margin-bottom-138-phone {
    margin-bottom: 138px !important;
  }
  .margin-left-138-phone {
    margin-left: 138px !important;
  }
  .margin-right-138-phone {
    margin-right: 138px !important;
  }
  .padding-138-phone {
    padding: 138px !important;
  }
  .padding-top-138-phone {
    padding-top: 138px !important;
  }
  .padding-bottom-138-phone {
    padding-bottom: 138px !important;
  }
  .padding-left-138-phone {
    padding-left: 138px !important;
  }
  .padding-right-138-phone {
    padding-right: 138px !important;
  }
  .divider-138-phone {
    height: 138px !important;
  }
  .margin-139-phone {
    margin: 139px !important;
  }
  .margin-top-139-phone {
    margin-top: 139px !important;
  }
  .margin-bottom-139-phone {
    margin-bottom: 139px !important;
  }
  .margin-left-139-phone {
    margin-left: 139px !important;
  }
  .margin-right-139-phone {
    margin-right: 139px !important;
  }
  .padding-139-phone {
    padding: 139px !important;
  }
  .padding-top-139-phone {
    padding-top: 139px !important;
  }
  .padding-bottom-139-phone {
    padding-bottom: 139px !important;
  }
  .padding-left-139-phone {
    padding-left: 139px !important;
  }
  .padding-right-139-phone {
    padding-right: 139px !important;
  }
  .divider-139-phone {
    height: 139px !important;
  }
  .margin-140-phone {
    margin: 140px !important;
  }
  .margin-top-140-phone {
    margin-top: 140px !important;
  }
  .margin-bottom-140-phone {
    margin-bottom: 140px !important;
  }
  .margin-left-140-phone {
    margin-left: 140px !important;
  }
  .margin-right-140-phone {
    margin-right: 140px !important;
  }
  .padding-140-phone {
    padding: 140px !important;
  }
  .padding-top-140-phone {
    padding-top: 140px !important;
  }
  .padding-bottom-140-phone {
    padding-bottom: 140px !important;
  }
  .padding-left-140-phone {
    padding-left: 140px !important;
  }
  .padding-right-140-phone {
    padding-right: 140px !important;
  }
  .divider-140-phone {
    height: 140px !important;
  }
  .margin-141-phone {
    margin: 141px !important;
  }
  .margin-top-141-phone {
    margin-top: 141px !important;
  }
  .margin-bottom-141-phone {
    margin-bottom: 141px !important;
  }
  .margin-left-141-phone {
    margin-left: 141px !important;
  }
  .margin-right-141-phone {
    margin-right: 141px !important;
  }
  .padding-141-phone {
    padding: 141px !important;
  }
  .padding-top-141-phone {
    padding-top: 141px !important;
  }
  .padding-bottom-141-phone {
    padding-bottom: 141px !important;
  }
  .padding-left-141-phone {
    padding-left: 141px !important;
  }
  .padding-right-141-phone {
    padding-right: 141px !important;
  }
  .divider-141-phone {
    height: 141px !important;
  }
  .margin-142-phone {
    margin: 142px !important;
  }
  .margin-top-142-phone {
    margin-top: 142px !important;
  }
  .margin-bottom-142-phone {
    margin-bottom: 142px !important;
  }
  .margin-left-142-phone {
    margin-left: 142px !important;
  }
  .margin-right-142-phone {
    margin-right: 142px !important;
  }
  .padding-142-phone {
    padding: 142px !important;
  }
  .padding-top-142-phone {
    padding-top: 142px !important;
  }
  .padding-bottom-142-phone {
    padding-bottom: 142px !important;
  }
  .padding-left-142-phone {
    padding-left: 142px !important;
  }
  .padding-right-142-phone {
    padding-right: 142px !important;
  }
  .divider-142-phone {
    height: 142px !important;
  }
  .margin-143-phone {
    margin: 143px !important;
  }
  .margin-top-143-phone {
    margin-top: 143px !important;
  }
  .margin-bottom-143-phone {
    margin-bottom: 143px !important;
  }
  .margin-left-143-phone {
    margin-left: 143px !important;
  }
  .margin-right-143-phone {
    margin-right: 143px !important;
  }
  .padding-143-phone {
    padding: 143px !important;
  }
  .padding-top-143-phone {
    padding-top: 143px !important;
  }
  .padding-bottom-143-phone {
    padding-bottom: 143px !important;
  }
  .padding-left-143-phone {
    padding-left: 143px !important;
  }
  .padding-right-143-phone {
    padding-right: 143px !important;
  }
  .divider-143-phone {
    height: 143px !important;
  }
  .margin-144-phone {
    margin: 144px !important;
  }
  .margin-top-144-phone {
    margin-top: 144px !important;
  }
  .margin-bottom-144-phone {
    margin-bottom: 144px !important;
  }
  .margin-left-144-phone {
    margin-left: 144px !important;
  }
  .margin-right-144-phone {
    margin-right: 144px !important;
  }
  .padding-144-phone {
    padding: 144px !important;
  }
  .padding-top-144-phone {
    padding-top: 144px !important;
  }
  .padding-bottom-144-phone {
    padding-bottom: 144px !important;
  }
  .padding-left-144-phone {
    padding-left: 144px !important;
  }
  .padding-right-144-phone {
    padding-right: 144px !important;
  }
  .divider-144-phone {
    height: 144px !important;
  }
  .margin-145-phone {
    margin: 145px !important;
  }
  .margin-top-145-phone {
    margin-top: 145px !important;
  }
  .margin-bottom-145-phone {
    margin-bottom: 145px !important;
  }
  .margin-left-145-phone {
    margin-left: 145px !important;
  }
  .margin-right-145-phone {
    margin-right: 145px !important;
  }
  .padding-145-phone {
    padding: 145px !important;
  }
  .padding-top-145-phone {
    padding-top: 145px !important;
  }
  .padding-bottom-145-phone {
    padding-bottom: 145px !important;
  }
  .padding-left-145-phone {
    padding-left: 145px !important;
  }
  .padding-right-145-phone {
    padding-right: 145px !important;
  }
  .divider-145-phone {
    height: 145px !important;
  }
  .margin-146-phone {
    margin: 146px !important;
  }
  .margin-top-146-phone {
    margin-top: 146px !important;
  }
  .margin-bottom-146-phone {
    margin-bottom: 146px !important;
  }
  .margin-left-146-phone {
    margin-left: 146px !important;
  }
  .margin-right-146-phone {
    margin-right: 146px !important;
  }
  .padding-146-phone {
    padding: 146px !important;
  }
  .padding-top-146-phone {
    padding-top: 146px !important;
  }
  .padding-bottom-146-phone {
    padding-bottom: 146px !important;
  }
  .padding-left-146-phone {
    padding-left: 146px !important;
  }
  .padding-right-146-phone {
    padding-right: 146px !important;
  }
  .divider-146-phone {
    height: 146px !important;
  }
  .margin-147-phone {
    margin: 147px !important;
  }
  .margin-top-147-phone {
    margin-top: 147px !important;
  }
  .margin-bottom-147-phone {
    margin-bottom: 147px !important;
  }
  .margin-left-147-phone {
    margin-left: 147px !important;
  }
  .margin-right-147-phone {
    margin-right: 147px !important;
  }
  .padding-147-phone {
    padding: 147px !important;
  }
  .padding-top-147-phone {
    padding-top: 147px !important;
  }
  .padding-bottom-147-phone {
    padding-bottom: 147px !important;
  }
  .padding-left-147-phone {
    padding-left: 147px !important;
  }
  .padding-right-147-phone {
    padding-right: 147px !important;
  }
  .divider-147-phone {
    height: 147px !important;
  }
  .margin-148-phone {
    margin: 148px !important;
  }
  .margin-top-148-phone {
    margin-top: 148px !important;
  }
  .margin-bottom-148-phone {
    margin-bottom: 148px !important;
  }
  .margin-left-148-phone {
    margin-left: 148px !important;
  }
  .margin-right-148-phone {
    margin-right: 148px !important;
  }
  .padding-148-phone {
    padding: 148px !important;
  }
  .padding-top-148-phone {
    padding-top: 148px !important;
  }
  .padding-bottom-148-phone {
    padding-bottom: 148px !important;
  }
  .padding-left-148-phone {
    padding-left: 148px !important;
  }
  .padding-right-148-phone {
    padding-right: 148px !important;
  }
  .divider-148-phone {
    height: 148px !important;
  }
  .margin-149-phone {
    margin: 149px !important;
  }
  .margin-top-149-phone {
    margin-top: 149px !important;
  }
  .margin-bottom-149-phone {
    margin-bottom: 149px !important;
  }
  .margin-left-149-phone {
    margin-left: 149px !important;
  }
  .margin-right-149-phone {
    margin-right: 149px !important;
  }
  .padding-149-phone {
    padding: 149px !important;
  }
  .padding-top-149-phone {
    padding-top: 149px !important;
  }
  .padding-bottom-149-phone {
    padding-bottom: 149px !important;
  }
  .padding-left-149-phone {
    padding-left: 149px !important;
  }
  .padding-right-149-phone {
    padding-right: 149px !important;
  }
  .divider-149-phone {
    height: 149px !important;
  }
  .margin-150-phone {
    margin: 150px !important;
  }
  .margin-top-150-phone {
    margin-top: 150px !important;
  }
  .margin-bottom-150-phone {
    margin-bottom: 150px !important;
  }
  .margin-left-150-phone {
    margin-left: 150px !important;
  }
  .margin-right-150-phone {
    margin-right: 150px !important;
  }
  .padding-150-phone {
    padding: 150px !important;
  }
  .padding-top-150-phone {
    padding-top: 150px !important;
  }
  .padding-bottom-150-phone {
    padding-bottom: 150px !important;
  }
  .padding-left-150-phone {
    padding-left: 150px !important;
  }
  .padding-right-150-phone {
    padding-right: 150px !important;
  }
  .divider-150-phone {
    height: 150px !important;
  }
}
/* Mobile */
@media (max-width: 800px) {
  .phone-hidden {
    display: none !important;
  }
}

.phone-only {
  display: none;
}
@media (max-width: 800px) {
  .phone-only {
    display: block !important;
  }
}

@media (max-width: 1200px) {
  .tablet-hidden {
    display: none !important;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
}

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

/* Flex column gap */
.column-gap-0 {
  column-gap: 0px;
}

.column-gap-1 {
  column-gap: 1px;
}

.column-gap-2 {
  column-gap: 2px;
}

.column-gap-3 {
  column-gap: 3px;
}

.column-gap-4 {
  column-gap: 4px;
}

.column-gap-5 {
  column-gap: 5px;
}

.column-gap-6 {
  column-gap: 6px;
}

.column-gap-7 {
  column-gap: 7px;
}

.column-gap-8 {
  column-gap: 8px;
}

.column-gap-9 {
  column-gap: 9px;
}

.column-gap-10 {
  column-gap: 10px;
}

.column-gap-11 {
  column-gap: 11px;
}

.column-gap-12 {
  column-gap: 12px;
}

.column-gap-13 {
  column-gap: 13px;
}

.column-gap-14 {
  column-gap: 14px;
}

.column-gap-15 {
  column-gap: 15px;
}

.column-gap-16 {
  column-gap: 16px;
}

.column-gap-17 {
  column-gap: 17px;
}

.column-gap-18 {
  column-gap: 18px;
}

.column-gap-19 {
  column-gap: 19px;
}

.column-gap-20 {
  column-gap: 20px;
}

.column-gap-21 {
  column-gap: 21px;
}

.column-gap-22 {
  column-gap: 22px;
}

.column-gap-23 {
  column-gap: 23px;
}

.column-gap-24 {
  column-gap: 24px;
}

.column-gap-25 {
  column-gap: 25px;
}

.column-gap-26 {
  column-gap: 26px;
}

.column-gap-27 {
  column-gap: 27px;
}

.column-gap-28 {
  column-gap: 28px;
}

.column-gap-29 {
  column-gap: 29px;
}

.column-gap-30 {
  column-gap: 30px;
}

.column-gap-31 {
  column-gap: 31px;
}

.column-gap-32 {
  column-gap: 32px;
}

.column-gap-33 {
  column-gap: 33px;
}

.column-gap-34 {
  column-gap: 34px;
}

.column-gap-35 {
  column-gap: 35px;
}

.column-gap-36 {
  column-gap: 36px;
}

.column-gap-37 {
  column-gap: 37px;
}

.column-gap-38 {
  column-gap: 38px;
}

.column-gap-39 {
  column-gap: 39px;
}

.column-gap-40 {
  column-gap: 40px;
}

.column-gap-41 {
  column-gap: 41px;
}

.column-gap-42 {
  column-gap: 42px;
}

.column-gap-43 {
  column-gap: 43px;
}

.column-gap-44 {
  column-gap: 44px;
}

.column-gap-45 {
  column-gap: 45px;
}

.column-gap-46 {
  column-gap: 46px;
}

.column-gap-47 {
  column-gap: 47px;
}

.column-gap-48 {
  column-gap: 48px;
}

.column-gap-49 {
  column-gap: 49px;
}

.column-gap-50 {
  column-gap: 50px;
}

.column-gap-51 {
  column-gap: 51px;
}

.column-gap-52 {
  column-gap: 52px;
}

.column-gap-53 {
  column-gap: 53px;
}

.column-gap-54 {
  column-gap: 54px;
}

.column-gap-55 {
  column-gap: 55px;
}

.column-gap-56 {
  column-gap: 56px;
}

.column-gap-57 {
  column-gap: 57px;
}

.column-gap-58 {
  column-gap: 58px;
}

.column-gap-59 {
  column-gap: 59px;
}

.column-gap-60 {
  column-gap: 60px;
}

.column-gap-61 {
  column-gap: 61px;
}

.column-gap-62 {
  column-gap: 62px;
}

.column-gap-63 {
  column-gap: 63px;
}

.column-gap-64 {
  column-gap: 64px;
}

.column-gap-65 {
  column-gap: 65px;
}

.column-gap-66 {
  column-gap: 66px;
}

.column-gap-67 {
  column-gap: 67px;
}

.column-gap-68 {
  column-gap: 68px;
}

.column-gap-69 {
  column-gap: 69px;
}

.column-gap-70 {
  column-gap: 70px;
}

.column-gap-71 {
  column-gap: 71px;
}

.column-gap-72 {
  column-gap: 72px;
}

.column-gap-73 {
  column-gap: 73px;
}

.column-gap-74 {
  column-gap: 74px;
}

.column-gap-75 {
  column-gap: 75px;
}

.column-gap-76 {
  column-gap: 76px;
}

.column-gap-77 {
  column-gap: 77px;
}

.column-gap-78 {
  column-gap: 78px;
}

.column-gap-79 {
  column-gap: 79px;
}

.column-gap-80 {
  column-gap: 80px;
}

.column-gap-81 {
  column-gap: 81px;
}

.column-gap-82 {
  column-gap: 82px;
}

.column-gap-83 {
  column-gap: 83px;
}

.column-gap-84 {
  column-gap: 84px;
}

.column-gap-85 {
  column-gap: 85px;
}

.column-gap-86 {
  column-gap: 86px;
}

.column-gap-87 {
  column-gap: 87px;
}

.column-gap-88 {
  column-gap: 88px;
}

.column-gap-89 {
  column-gap: 89px;
}

.column-gap-90 {
  column-gap: 90px;
}

.column-gap-91 {
  column-gap: 91px;
}

.column-gap-92 {
  column-gap: 92px;
}

.column-gap-93 {
  column-gap: 93px;
}

.column-gap-94 {
  column-gap: 94px;
}

.column-gap-95 {
  column-gap: 95px;
}

.column-gap-96 {
  column-gap: 96px;
}

.column-gap-97 {
  column-gap: 97px;
}

.column-gap-98 {
  column-gap: 98px;
}

.column-gap-99 {
  column-gap: 99px;
}

.column-gap-100 {
  column-gap: 100px;
}

/* Gap */
.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 1px;
}

.gap-2 {
  gap: 2px;
}

.gap-3 {
  gap: 3px;
}

.gap-4 {
  gap: 4px;
}

.gap-5 {
  gap: 5px;
}

.gap-6 {
  gap: 6px;
}

.gap-7 {
  gap: 7px;
}

.gap-8 {
  gap: 8px;
}

.gap-9 {
  gap: 9px;
}

.gap-10 {
  gap: 10px;
}

.gap-11 {
  gap: 11px;
}

.gap-12 {
  gap: 12px;
}

.gap-13 {
  gap: 13px;
}

.gap-14 {
  gap: 14px;
}

.gap-15 {
  gap: 15px;
}

.gap-16 {
  gap: 16px;
}

.gap-17 {
  gap: 17px;
}

.gap-18 {
  gap: 18px;
}

.gap-19 {
  gap: 19px;
}

.gap-20 {
  gap: 20px;
}

.gap-21 {
  gap: 21px;
}

.gap-22 {
  gap: 22px;
}

.gap-23 {
  gap: 23px;
}

.gap-24 {
  gap: 24px;
}

.gap-25 {
  gap: 25px;
}

.gap-26 {
  gap: 26px;
}

.gap-27 {
  gap: 27px;
}

.gap-28 {
  gap: 28px;
}

.gap-29 {
  gap: 29px;
}

.gap-30 {
  gap: 30px;
}

.gap-31 {
  gap: 31px;
}

.gap-32 {
  gap: 32px;
}

.gap-33 {
  gap: 33px;
}

.gap-34 {
  gap: 34px;
}

.gap-35 {
  gap: 35px;
}

.gap-36 {
  gap: 36px;
}

.gap-37 {
  gap: 37px;
}

.gap-38 {
  gap: 38px;
}

.gap-39 {
  gap: 39px;
}

.gap-40 {
  gap: 40px;
}

.gap-41 {
  gap: 41px;
}

.gap-42 {
  gap: 42px;
}

.gap-43 {
  gap: 43px;
}

.gap-44 {
  gap: 44px;
}

.gap-45 {
  gap: 45px;
}

.gap-46 {
  gap: 46px;
}

.gap-47 {
  gap: 47px;
}

.gap-48 {
  gap: 48px;
}

.gap-49 {
  gap: 49px;
}

.gap-50 {
  gap: 50px;
}

.gap-51 {
  gap: 51px;
}

.gap-52 {
  gap: 52px;
}

.gap-53 {
  gap: 53px;
}

.gap-54 {
  gap: 54px;
}

.gap-55 {
  gap: 55px;
}

.gap-56 {
  gap: 56px;
}

.gap-57 {
  gap: 57px;
}

.gap-58 {
  gap: 58px;
}

.gap-59 {
  gap: 59px;
}

.gap-60 {
  gap: 60px;
}

.gap-61 {
  gap: 61px;
}

.gap-62 {
  gap: 62px;
}

.gap-63 {
  gap: 63px;
}

.gap-64 {
  gap: 64px;
}

.gap-65 {
  gap: 65px;
}

.gap-66 {
  gap: 66px;
}

.gap-67 {
  gap: 67px;
}

.gap-68 {
  gap: 68px;
}

.gap-69 {
  gap: 69px;
}

.gap-70 {
  gap: 70px;
}

.gap-71 {
  gap: 71px;
}

.gap-72 {
  gap: 72px;
}

.gap-73 {
  gap: 73px;
}

.gap-74 {
  gap: 74px;
}

.gap-75 {
  gap: 75px;
}

.gap-76 {
  gap: 76px;
}

.gap-77 {
  gap: 77px;
}

.gap-78 {
  gap: 78px;
}

.gap-79 {
  gap: 79px;
}

.gap-80 {
  gap: 80px;
}

.gap-81 {
  gap: 81px;
}

.gap-82 {
  gap: 82px;
}

.gap-83 {
  gap: 83px;
}

.gap-84 {
  gap: 84px;
}

.gap-85 {
  gap: 85px;
}

.gap-86 {
  gap: 86px;
}

.gap-87 {
  gap: 87px;
}

.gap-88 {
  gap: 88px;
}

.gap-89 {
  gap: 89px;
}

.gap-90 {
  gap: 90px;
}

.gap-91 {
  gap: 91px;
}

.gap-92 {
  gap: 92px;
}

.gap-93 {
  gap: 93px;
}

.gap-94 {
  gap: 94px;
}

.gap-95 {
  gap: 95px;
}

.gap-96 {
  gap: 96px;
}

.gap-97 {
  gap: 97px;
}

.gap-98 {
  gap: 98px;
}

.gap-99 {
  gap: 99px;
}

.gap-100 {
  gap: 100px;
}

/* Grid */
.grid-gap-0 {
  display: grid;
  grid-gap: 0px;
}

.grid-gap-1 {
  display: grid;
  grid-gap: 1px;
}

.grid-gap-2 {
  display: grid;
  grid-gap: 2px;
}

.grid-gap-3 {
  display: grid;
  grid-gap: 3px;
}

.grid-gap-4 {
  display: grid;
  grid-gap: 4px;
}

.grid-gap-5 {
  display: grid;
  grid-gap: 5px;
}

.grid-gap-6 {
  display: grid;
  grid-gap: 6px;
}

.grid-gap-7 {
  display: grid;
  grid-gap: 7px;
}

.grid-gap-8 {
  display: grid;
  grid-gap: 8px;
}

.grid-gap-9 {
  display: grid;
  grid-gap: 9px;
}

.grid-gap-10 {
  display: grid;
  grid-gap: 10px;
}

.grid-gap-11 {
  display: grid;
  grid-gap: 11px;
}

.grid-gap-12 {
  display: grid;
  grid-gap: 12px;
}

.grid-gap-13 {
  display: grid;
  grid-gap: 13px;
}

.grid-gap-14 {
  display: grid;
  grid-gap: 14px;
}

.grid-gap-15 {
  display: grid;
  grid-gap: 15px;
}

.grid-gap-16 {
  display: grid;
  grid-gap: 16px;
}

.grid-gap-17 {
  display: grid;
  grid-gap: 17px;
}

.grid-gap-18 {
  display: grid;
  grid-gap: 18px;
}

.grid-gap-19 {
  display: grid;
  grid-gap: 19px;
}

.grid-gap-20 {
  display: grid;
  grid-gap: 20px;
}

.grid-gap-21 {
  display: grid;
  grid-gap: 21px;
}

.grid-gap-22 {
  display: grid;
  grid-gap: 22px;
}

.grid-gap-23 {
  display: grid;
  grid-gap: 23px;
}

.grid-gap-24 {
  display: grid;
  grid-gap: 24px;
}

.grid-gap-25 {
  display: grid;
  grid-gap: 25px;
}

.grid-gap-26 {
  display: grid;
  grid-gap: 26px;
}

.grid-gap-27 {
  display: grid;
  grid-gap: 27px;
}

.grid-gap-28 {
  display: grid;
  grid-gap: 28px;
}

.grid-gap-29 {
  display: grid;
  grid-gap: 29px;
}

.grid-gap-30 {
  display: grid;
  grid-gap: 30px;
}

.grid-gap-31 {
  display: grid;
  grid-gap: 31px;
}

.grid-gap-32 {
  display: grid;
  grid-gap: 32px;
}

.grid-gap-33 {
  display: grid;
  grid-gap: 33px;
}

.grid-gap-34 {
  display: grid;
  grid-gap: 34px;
}

.grid-gap-35 {
  display: grid;
  grid-gap: 35px;
}

.grid-gap-36 {
  display: grid;
  grid-gap: 36px;
}

.grid-gap-37 {
  display: grid;
  grid-gap: 37px;
}

.grid-gap-38 {
  display: grid;
  grid-gap: 38px;
}

.grid-gap-39 {
  display: grid;
  grid-gap: 39px;
}

.grid-gap-40 {
  display: grid;
  grid-gap: 40px;
}

.grid-gap-41 {
  display: grid;
  grid-gap: 41px;
}

.grid-gap-42 {
  display: grid;
  grid-gap: 42px;
}

.grid-gap-43 {
  display: grid;
  grid-gap: 43px;
}

.grid-gap-44 {
  display: grid;
  grid-gap: 44px;
}

.grid-gap-45 {
  display: grid;
  grid-gap: 45px;
}

.grid-gap-46 {
  display: grid;
  grid-gap: 46px;
}

.grid-gap-47 {
  display: grid;
  grid-gap: 47px;
}

.grid-gap-48 {
  display: grid;
  grid-gap: 48px;
}

.grid-gap-49 {
  display: grid;
  grid-gap: 49px;
}

.grid-gap-50 {
  display: grid;
  grid-gap: 50px;
}

.grid-gap-51 {
  display: grid;
  grid-gap: 51px;
}

.grid-gap-52 {
  display: grid;
  grid-gap: 52px;
}

.grid-gap-53 {
  display: grid;
  grid-gap: 53px;
}

.grid-gap-54 {
  display: grid;
  grid-gap: 54px;
}

.grid-gap-55 {
  display: grid;
  grid-gap: 55px;
}

.grid-gap-56 {
  display: grid;
  grid-gap: 56px;
}

.grid-gap-57 {
  display: grid;
  grid-gap: 57px;
}

.grid-gap-58 {
  display: grid;
  grid-gap: 58px;
}

.grid-gap-59 {
  display: grid;
  grid-gap: 59px;
}

.grid-gap-60 {
  display: grid;
  grid-gap: 60px;
}

.grid-gap-61 {
  display: grid;
  grid-gap: 61px;
}

.grid-gap-62 {
  display: grid;
  grid-gap: 62px;
}

.grid-gap-63 {
  display: grid;
  grid-gap: 63px;
}

.grid-gap-64 {
  display: grid;
  grid-gap: 64px;
}

.grid-gap-65 {
  display: grid;
  grid-gap: 65px;
}

.grid-gap-66 {
  display: grid;
  grid-gap: 66px;
}

.grid-gap-67 {
  display: grid;
  grid-gap: 67px;
}

.grid-gap-68 {
  display: grid;
  grid-gap: 68px;
}

.grid-gap-69 {
  display: grid;
  grid-gap: 69px;
}

.grid-gap-70 {
  display: grid;
  grid-gap: 70px;
}

.grid-gap-71 {
  display: grid;
  grid-gap: 71px;
}

.grid-gap-72 {
  display: grid;
  grid-gap: 72px;
}

.grid-gap-73 {
  display: grid;
  grid-gap: 73px;
}

.grid-gap-74 {
  display: grid;
  grid-gap: 74px;
}

.grid-gap-75 {
  display: grid;
  grid-gap: 75px;
}

.grid-gap-76 {
  display: grid;
  grid-gap: 76px;
}

.grid-gap-77 {
  display: grid;
  grid-gap: 77px;
}

.grid-gap-78 {
  display: grid;
  grid-gap: 78px;
}

.grid-gap-79 {
  display: grid;
  grid-gap: 79px;
}

.grid-gap-80 {
  display: grid;
  grid-gap: 80px;
}

.grid-gap-81 {
  display: grid;
  grid-gap: 81px;
}

.grid-gap-82 {
  display: grid;
  grid-gap: 82px;
}

.grid-gap-83 {
  display: grid;
  grid-gap: 83px;
}

.grid-gap-84 {
  display: grid;
  grid-gap: 84px;
}

.grid-gap-85 {
  display: grid;
  grid-gap: 85px;
}

.grid-gap-86 {
  display: grid;
  grid-gap: 86px;
}

.grid-gap-87 {
  display: grid;
  grid-gap: 87px;
}

.grid-gap-88 {
  display: grid;
  grid-gap: 88px;
}

.grid-gap-89 {
  display: grid;
  grid-gap: 89px;
}

.grid-gap-90 {
  display: grid;
  grid-gap: 90px;
}

.grid-gap-91 {
  display: grid;
  grid-gap: 91px;
}

.grid-gap-92 {
  display: grid;
  grid-gap: 92px;
}

.grid-gap-93 {
  display: grid;
  grid-gap: 93px;
}

.grid-gap-94 {
  display: grid;
  grid-gap: 94px;
}

.grid-gap-95 {
  display: grid;
  grid-gap: 95px;
}

.grid-gap-96 {
  display: grid;
  grid-gap: 96px;
}

.grid-gap-97 {
  display: grid;
  grid-gap: 97px;
}

.grid-gap-98 {
  display: grid;
  grid-gap: 98px;
}

.grid-gap-99 {
  display: grid;
  grid-gap: 99px;
}

.grid-gap-100 {
  display: grid;
  grid-gap: 100px;
}

.grid-gap-0-mobile {
  display: grid;
  grid-gap: 0px;
}

.grid-gap-1-mobile {
  display: grid;
  grid-gap: 1px;
}

.grid-gap-2-mobile {
  display: grid;
  grid-gap: 2px;
}

.grid-gap-3-mobile {
  display: grid;
  grid-gap: 3px;
}

.grid-gap-4-mobile {
  display: grid;
  grid-gap: 4px;
}

.grid-gap-5-mobile {
  display: grid;
  grid-gap: 5px;
}

.grid-gap-6-mobile {
  display: grid;
  grid-gap: 6px;
}

.grid-gap-7-mobile {
  display: grid;
  grid-gap: 7px;
}

.grid-gap-8-mobile {
  display: grid;
  grid-gap: 8px;
}

.grid-gap-9-mobile {
  display: grid;
  grid-gap: 9px;
}

.grid-gap-10-mobile {
  display: grid;
  grid-gap: 10px;
}

.grid-gap-11-mobile {
  display: grid;
  grid-gap: 11px;
}

.grid-gap-12-mobile {
  display: grid;
  grid-gap: 12px;
}

.grid-gap-13-mobile {
  display: grid;
  grid-gap: 13px;
}

.grid-gap-14-mobile {
  display: grid;
  grid-gap: 14px;
}

.grid-gap-15-mobile {
  display: grid;
  grid-gap: 15px;
}

.grid-gap-16-mobile {
  display: grid;
  grid-gap: 16px;
}

.grid-gap-17-mobile {
  display: grid;
  grid-gap: 17px;
}

.grid-gap-18-mobile {
  display: grid;
  grid-gap: 18px;
}

.grid-gap-19-mobile {
  display: grid;
  grid-gap: 19px;
}

.grid-gap-20-mobile {
  display: grid;
  grid-gap: 20px;
}

.grid-gap-21-mobile {
  display: grid;
  grid-gap: 21px;
}

.grid-gap-22-mobile {
  display: grid;
  grid-gap: 22px;
}

.grid-gap-23-mobile {
  display: grid;
  grid-gap: 23px;
}

.grid-gap-24-mobile {
  display: grid;
  grid-gap: 24px;
}

.grid-gap-25-mobile {
  display: grid;
  grid-gap: 25px;
}

.grid-gap-26-mobile {
  display: grid;
  grid-gap: 26px;
}

.grid-gap-27-mobile {
  display: grid;
  grid-gap: 27px;
}

.grid-gap-28-mobile {
  display: grid;
  grid-gap: 28px;
}

.grid-gap-29-mobile {
  display: grid;
  grid-gap: 29px;
}

.grid-gap-30-mobile {
  display: grid;
  grid-gap: 30px;
}

.grid-gap-31-mobile {
  display: grid;
  grid-gap: 31px;
}

.grid-gap-32-mobile {
  display: grid;
  grid-gap: 32px;
}

.grid-gap-33-mobile {
  display: grid;
  grid-gap: 33px;
}

.grid-gap-34-mobile {
  display: grid;
  grid-gap: 34px;
}

.grid-gap-35-mobile {
  display: grid;
  grid-gap: 35px;
}

.grid-gap-36-mobile {
  display: grid;
  grid-gap: 36px;
}

.grid-gap-37-mobile {
  display: grid;
  grid-gap: 37px;
}

.grid-gap-38-mobile {
  display: grid;
  grid-gap: 38px;
}

.grid-gap-39-mobile {
  display: grid;
  grid-gap: 39px;
}

.grid-gap-40-mobile {
  display: grid;
  grid-gap: 40px;
}

.grid-gap-41-mobile {
  display: grid;
  grid-gap: 41px;
}

.grid-gap-42-mobile {
  display: grid;
  grid-gap: 42px;
}

.grid-gap-43-mobile {
  display: grid;
  grid-gap: 43px;
}

.grid-gap-44-mobile {
  display: grid;
  grid-gap: 44px;
}

.grid-gap-45-mobile {
  display: grid;
  grid-gap: 45px;
}

.grid-gap-46-mobile {
  display: grid;
  grid-gap: 46px;
}

.grid-gap-47-mobile {
  display: grid;
  grid-gap: 47px;
}

.grid-gap-48-mobile {
  display: grid;
  grid-gap: 48px;
}

.grid-gap-49-mobile {
  display: grid;
  grid-gap: 49px;
}

.grid-gap-50-mobile {
  display: grid;
  grid-gap: 50px;
}

.grid-gap-51-mobile {
  display: grid;
  grid-gap: 51px;
}

.grid-gap-52-mobile {
  display: grid;
  grid-gap: 52px;
}

.grid-gap-53-mobile {
  display: grid;
  grid-gap: 53px;
}

.grid-gap-54-mobile {
  display: grid;
  grid-gap: 54px;
}

.grid-gap-55-mobile {
  display: grid;
  grid-gap: 55px;
}

.grid-gap-56-mobile {
  display: grid;
  grid-gap: 56px;
}

.grid-gap-57-mobile {
  display: grid;
  grid-gap: 57px;
}

.grid-gap-58-mobile {
  display: grid;
  grid-gap: 58px;
}

.grid-gap-59-mobile {
  display: grid;
  grid-gap: 59px;
}

.grid-gap-60-mobile {
  display: grid;
  grid-gap: 60px;
}

.grid-gap-61-mobile {
  display: grid;
  grid-gap: 61px;
}

.grid-gap-62-mobile {
  display: grid;
  grid-gap: 62px;
}

.grid-gap-63-mobile {
  display: grid;
  grid-gap: 63px;
}

.grid-gap-64-mobile {
  display: grid;
  grid-gap: 64px;
}

.grid-gap-65-mobile {
  display: grid;
  grid-gap: 65px;
}

.grid-gap-66-mobile {
  display: grid;
  grid-gap: 66px;
}

.grid-gap-67-mobile {
  display: grid;
  grid-gap: 67px;
}

.grid-gap-68-mobile {
  display: grid;
  grid-gap: 68px;
}

.grid-gap-69-mobile {
  display: grid;
  grid-gap: 69px;
}

.grid-gap-70-mobile {
  display: grid;
  grid-gap: 70px;
}

.grid-gap-71-mobile {
  display: grid;
  grid-gap: 71px;
}

.grid-gap-72-mobile {
  display: grid;
  grid-gap: 72px;
}

.grid-gap-73-mobile {
  display: grid;
  grid-gap: 73px;
}

.grid-gap-74-mobile {
  display: grid;
  grid-gap: 74px;
}

.grid-gap-75-mobile {
  display: grid;
  grid-gap: 75px;
}

.grid-gap-76-mobile {
  display: grid;
  grid-gap: 76px;
}

.grid-gap-77-mobile {
  display: grid;
  grid-gap: 77px;
}

.grid-gap-78-mobile {
  display: grid;
  grid-gap: 78px;
}

.grid-gap-79-mobile {
  display: grid;
  grid-gap: 79px;
}

.grid-gap-80-mobile {
  display: grid;
  grid-gap: 80px;
}

.grid-gap-81-mobile {
  display: grid;
  grid-gap: 81px;
}

.grid-gap-82-mobile {
  display: grid;
  grid-gap: 82px;
}

.grid-gap-83-mobile {
  display: grid;
  grid-gap: 83px;
}

.grid-gap-84-mobile {
  display: grid;
  grid-gap: 84px;
}

.grid-gap-85-mobile {
  display: grid;
  grid-gap: 85px;
}

.grid-gap-86-mobile {
  display: grid;
  grid-gap: 86px;
}

.grid-gap-87-mobile {
  display: grid;
  grid-gap: 87px;
}

.grid-gap-88-mobile {
  display: grid;
  grid-gap: 88px;
}

.grid-gap-89-mobile {
  display: grid;
  grid-gap: 89px;
}

.grid-gap-90-mobile {
  display: grid;
  grid-gap: 90px;
}

.grid-gap-91-mobile {
  display: grid;
  grid-gap: 91px;
}

.grid-gap-92-mobile {
  display: grid;
  grid-gap: 92px;
}

.grid-gap-93-mobile {
  display: grid;
  grid-gap: 93px;
}

.grid-gap-94-mobile {
  display: grid;
  grid-gap: 94px;
}

.grid-gap-95-mobile {
  display: grid;
  grid-gap: 95px;
}

.grid-gap-96-mobile {
  display: grid;
  grid-gap: 96px;
}

.grid-gap-97-mobile {
  display: grid;
  grid-gap: 97px;
}

.grid-gap-98-mobile {
  display: grid;
  grid-gap: 98px;
}

.grid-gap-99-mobile {
  display: grid;
  grid-gap: 99px;
}

.grid-gap-100-mobile {
  display: grid;
  grid-gap: 100px;
}

#grid, .grid-12, .grid-11, .grid-10, .grid-9, .grid-8, .grid-7, .grid-6, .grid-5, .grid-4, .grid-3, .grid-2, .grid-1 {
  float: left;
  min-height: 1px;
}

.grid-1 {
  width: 8.333333%;
}

.grid-2 {
  width: 16.666667%;
}

.grid-3 {
  width: 25%;
}

.grid-4 {
  width: 33.333333%;
}

.grid-5 {
  width: 41.666667%;
}

.grid-6 {
  width: 50%;
}

.grid-7 {
  width: 58.333333%;
}

.grid-8 {
  width: 66.666667%;
}

.grid-9 {
  width: 75%;
}

.grid-10 {
  width: 83.333333%;
}

.grid-11 {
  width: 91.666667%;
}

.grid-12 {
  width: 100%;
}

.grid-row {
  margin-bottom: 5px;
}

@media (max-width: 800px) {
  .grid-1:not(.grid-fixed), .grid-2:not(.grid-fixed), .grid-3:not(.grid-fixed), .grid-4:not(.grid-fixed), .grid-5:not(.grid-fixed), .grid-6:not(.grid-fixed), .grid-7:not(.grid-fixed), .grid-8:not(.grid-fixed), .grid-9:not(.grid-fixed), .grid-10:not(.grid-fixed), .grid-11:not(.grid-fixed), .grid-12:not(.grid-fixed) {
    float: none;
    width: auto;
  }
  .grid-1-mobile {
    width: 8.333333%;
  }
  .grid-2-mobile {
    width: 16.666667%;
  }
  .grid-3-mobile {
    width: 25%;
  }
  .grid-4-mobile {
    width: 33.333333%;
  }
  .grid-5-mobile {
    width: 41.666667%;
  }
  .grid-6-mobile {
    width: 50%;
  }
  .grid-7-mobile {
    width: 58.333333%;
  }
  .grid-8-mobile {
    width: 66.666667%;
  }
  .grid-9-mobile {
    width: 75%;
  }
  .grid-10-mobile {
    width: 83.333333%;
  }
  .grid-11-mobile {
    width: 91.666667%;
  }
  .grid-12-mobile {
    width: 100%;
  }
}
.grid-4-8 {
  display: grid;
  grid-template-columns: 4fr 8fr;
}

.grid-8-4 {
  display: grid;
  grid-template-columns: 8fr 4fr;
}

.grid-5-7 {
  display: grid;
  grid-template-columns: 5fr 7fr;
}

.grid-7-5 {
  display: grid;
  grid-template-columns: 7fr 5fr;
}

.grid-2-10 {
  display: grid;
  grid-template-columns: 2fr 10fr;
}

.grid-10-2 {
  display: grid;
  grid-template-columns: 10fr 2fr;
}

.grid-3-9 {
  display: grid;
  grid-template-columns: 3fr 9fr;
}

.grid-9-3 {
  display: grid;
  grid-template-columns: 9fr 3fr;
}

.grid-6-6 {
  display: grid;
  grid-template-columns: 6fr 6fr;
}

.grid-4-4-4 {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
}

.grid-6-3-3 {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
}

.grid-3-6-3 {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
}

.grid-2-8-2 {
  display: grid;
  grid-template-columns: 2fr 8fr 2fr;
}

.grid-3-3-3-3 {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 3fr;
}

.grid-5-5-2 {
  display: grid;
  grid-template-columns: 5fr 5fr 2fr;
}

.grid-6-4-2 {
  display: grid;
  grid-template-columns: 6fr 4fr 2fr;
}

.grid-7-3-2 {
  display: grid;
  grid-template-columns: 7fr 3fr 2fr;
}

@media (max-width: 800px) {
  .grid-12-mobile {
    display: grid;
    grid-template-columns: 100%;
  }
}

@media (max-width: 800px) {
  .grid-6-6-mobile {
    display: grid;
    grid-template-columns: 50% 50%;
  }
}

@media (max-width: 800px) {
  .grid-none-mobile {
    display: block;
    grid-template-columns: none;
  }
}

div.table {
  position: relative;
}
div.table > div {
  margin-right: 42px;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-x: scroll;
  background-image: linear-gradient(to right, var(--colour-system-surface), var(--colour-system-surface)), linear-gradient(to right, var(--colour-system-surface), var(--colour-system-surface)), linear-gradient(to right, rgba(0, 0, 0, 0.06), var(--colour-system-surface)), linear-gradient(to left, rgba(0, 0, 0, 0.06), var(--colour-system-surface));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
[data-browser=safari] div.table > div {
  background: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--colour-neutral);
  padding: 16px 8px;
  border-bottom: 1px solid var(--colour-system-line);
  white-space: nowrap;
}
table th.neutral {
  background-color: var(--colour-neutral-10);
}
table td {
  white-space: nowrap;
  padding: 16px 8px;
  border-bottom: 1px solid var(--colour-system-line);
}

table.medium th, table.medium td {
  padding: 15px 40px;
}
table.medium tr:last-child td {
  border-bottom: none;
}

table.sticky td:last-child,
table.sticky th:last-child {
  position: absolute;
  right: 0;
  width: 42px;
  border-bottom: none;
  text-align: right;
}
table.sticky td:last-child .button-dropdown i.fa-ellipsis-v,
table.sticky th:last-child .button-dropdown i.fa-ellipsis-v {
  font-size: 24px;
}
table.sticky td {
  height: 48px;
}
table.sticky tr:hover td:last-child {
  background-color: transparent;
}

table.sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--colour-system-surface);
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
table.sticky-header thead th {
  border-bottom: none;
}

body, input, table, button {
  font-size: 14px;
  font-family: "Inter", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 400;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

h2 {
  margin-bottom: 20px;
  font-size: 20px;
}

h3, h4, h5 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
h3.widget-title, h4.widget-title, h5.widget-title {
  padding-bottom: 12px;
}

h5 {
  font-size: 15px;
  font-weight: 600;
}

stong, b {
  font-weight: 700;
}

.font-weight-black {
  font-weight: 900 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-semibold {
  font-weight: 600 !important;
}

.font-weight-regular {
  font-weight: 400 !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.line-height-20 {
  line-height: 20px;
}

.line-height-150 {
  line-height: 150% !important;
}

.line-height-200 {
  line-height: 200% !important;
}

.line-height-reset {
  line-height: normal !important;
}

.white-space-normal {
  white-space: normal;
}

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

a {
  color: var(--colour-system-text);
}

a.primary {
  color: var(--colour-primary);
  text-decoration: none;
}
a.primary[data-theme=feedback] {
  color: var(--colour-feedback);
}
a.primary[data-theme=survey] {
  color: var(--colour-survey);
}

a.primary-dark-invert {
  color: var(--colour-primary-dark-invert);
  text-decoration: none;
}
a.primary-dark-invert[data-theme=feedback] {
  color: var(--colour-feedback);
}
a.primary-dark-invert[data-theme=survey] {
  color: var(--colour-survey);
}

:root[data-colour-scheme=dark] a.underline-dark-only {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) a.underline-dark-only {
    text-decoration: underline;
  }
}

a.white {
  color: #FFFFFF;
}

a.underline {
  text-decoration: underline;
}
a.underline:hover {
  text-decoration: none;
}

a.shiny {
  margin-left: 12px;
  background: var(--gradient-shiny-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

a.no-underline {
  text-decoration: none;
}

a.hover-underline:hover {
  text-decoration: underline;
}

a.disabled-btn {
  cursor: not-allowed;
  opacity: 0.4;
}

.row-hover {
  cursor: pointer;
}
.row-hover:hover, button.row-hover.danger.active, button.row-hover.info.active, button.row-hover.success.active {
  background-color: rgba(0, 0, 0, 0.02);
}

.form-label {
  margin-bottom: 6px;
  color: var(--colour-neutral);
  font-size: 12px;
  text-transform: uppercase;
}

span.form-field-inline {
  display: inline-block;
  line-height: 50px;
  font-size: 16px;
}

input[type=text].form-field-inline {
  max-width: 100%;
  margin-left: 6px;
  margin-right: 6px;
  font-weight: 600;
}

code {
  font-family: "Source Code Pro", monospace;
}

pre {
  overflow: auto;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-code-bg);
  color: var(--colour-code-text);
  font-family: "Source Code Pro", monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
pre.medium {
  font-size: 16px;
  font-weight: 600;
}
pre .green {
  color: var(--colour-dolphin-400);
}
pre .blue {
  color: var(--colour-survey-400);
}
pre .purple {
  color: var(--colour-warning-400);
}
pre .red {
  color: var(--colour-danger-400);
}
pre .grey {
  color: var(--colour-neutral);
}

.code-selector, .code-selector-medium {
  color: var(--colour-primary-dark-invert);
  font-family: "Source Code Pro", monospace;
  font-size: 13px;
  line-height: 22px;
  font-weight: 600;
}

.code-selector-medium {
  font-size: 12px;
}

p {
  line-height: 20px;
  margin: 15px 0;
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
p.large {
  font-size: 16px;
  line-height: 180%;
}

.text-xsmall {
  font-size: 11px;
}

.text-small {
  font-size: 12px;
}

.text-medium {
  font-size: 13px;
}

.text-default {
  font-size: 14px;
}

.text-medium-large {
  font-size: 15px;
}

.text-regular {
  font-size: 16px;
}

.text-large {
  font-size: 22px;
}

.text-xlarge {
  font-size: 24px;
}

.text-code {
  font-family: "Source Code Pro", monospace;
}

img {
  max-width: 100%;
  max-height: 100%;
  border: none;
}

.icon-svg svg {
  max-width: 100%;
  max-height: 100%;
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 40px 0;
  border: none;
  background-color: var(--colour-system-line);
}
hr.large {
  margin: 60px 0;
}
hr.medium {
  margin: 28px 0;
}
hr.small {
  margin: 20px 0;
}
hr.xsmall {
  margin: 0;
}

div.hr {
  position: relative;
  height: 80px;
  line-height: 80px;
  margin: auto;
  text-align: center;
  white-space: nowrap;
}
div.hr.small {
  height: 40px;
  line-height: 40px;
}
div.hr.medium {
  height: 60px;
  line-height: 60px;
}
div.hr:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  margin: auto;
  background-color: var(--colour-neutral-100);
}
div.hr > span {
  position: absolute;
  left: 50%;
  margin: auto;
  padding: 0 12px;
  background-color: var(--colour-system-surface);
  transform: translateX(-50%);
  user-select: none;
}
div.hr > span.box-bg-dark-only {
  background-color: var(--colour-system-box-bg-dark-only);
}
div.hr.hr-toggle {
  cursor: pointer;
}
div.hr.hr-toggle > span:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f107";
  margin-left: 4px;
  color: var(--colour-neutral);
}
div.hr.hr-toggle.collapsed > span:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f106";
}
div.hr.hr-toggle:hover > span {
  color: var(--colour-primary-dark-invert);
}
div.hr.hr-toggle:hover > span:after {
  color: var(--colour-primary-dark-invert);
}

.blur-text {
  filter: blur(4px);
}
.blur-text:hover, button.blur-text.danger.active, button.blur-text.info.active, button.blur-text.success.active {
  filter: none;
}

.help-text {
  font-size: 10px;
  color: var(--colour-neutral);
}

.code-text {
  font-family: "Source Code Pro", monospace;
}

.code-highlight {
  padding: 4px 6px;
  background-color: var(--colour-neutral-25);
  border-radius: 4px;
  font-family: "Source Code Pro", monospace;
  font-weight: 600;
}

.strike {
  text-decoration: line-through;
}

.cap {
  text-transform: capitalize;
}

.lower {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.text-transform-none {
  text-transform: none;
}

.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-inline {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

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

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

.json-highlight-number {
  color: var(--colour-warning-600);
}

.json-highlight-key {
  color: var(--colour-neutral-1000);
}

.json-highlight-string {
  color: var(--colour-dolphin-600);
}

.json-highlight-boolean {
  color: var(--colour-danger-600);
}

.json-highlight-null {
  color: var(--colour-attention-800);
}

.success,
a.success:hover {
  color: var(--colour-success);
}

.info,
a.info {
  color: var(--colour-neutral);
}

a.info:hover {
  color: var(--colour-system-text);
}

.warning,
a.warning:hover {
  color: var(--colour-warning);
}

.danger,
a.danger:hover {
  color: #FF4060;
}

.placeholder-text {
  color: var(--colour-system-text-placeholder);
}

.no-pointer-events {
  pointer-events: none;
}

.no-user-select {
  user-select: none;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.text-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.text-android {
  color: #9FC037;
}

.text-windows {
  color: #00A8E7;
}

.text-shiny {
  background: var(--gradient-shiny-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-primary-hover:hover, button.text-primary-hover.danger.active, button.text-primary-hover.info.active, button.text-primary-hover.success.active,
.text-primary {
  color: var(--colour-primary);
}

.text-primary-dark-invert {
  color: var(--colour-primary-dark-invert);
}

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

.text-danger-hover:hover, button.text-danger-hover.danger.active, button.text-danger-hover.info.active, button.text-danger-hover.success.active,
.text-danger {
  color: var(--colour-danger-700);
}

.text-danger-dark-invert {
  color: var(--colour-danger-dark-invert);
}

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

.text-attention {
  color: var(--colour-attention);
}

.text-dolphin {
  color: var(--colour-dolphin-600);
}

.text-survey {
  color: var(--colour-survey-600);
}

.text-info {
  color: var(--colour-neutral);
}

.text-info-light {
  color: rgba(96, 128, 160, 0.6);
}

.text-icon {
  color: var(--colour-neutral-300);
}

.text-main {
  color: var(--colour-system-text) !important;
}

.text-feedback {
  color: var(--colour-feedback-600);
}

.text-survey {
  color: var(--colour-survey-600);
}

.dashed-underline-warning {
  border-bottom: 1px dashed var(--colour-warning);
}

.figure {
  font-weight: 600;
  font-size: 30px;
}
@media (max-width: 800px) {
  .figure {
    font-size: 24px;
  }
}

button + a.cancel {
  margin-left: 10px;
}

.blur-0 {
  filter: blur(0px);
}

.blur-1 {
  filter: blur(1px);
}

.blur-2 {
  filter: blur(2px);
}

.blur-3 {
  filter: blur(3px);
}

.blur-4 {
  filter: blur(4px);
}

.blur-5 {
  filter: blur(5px);
}

.blur-6 {
  filter: blur(6px);
}

.blur-7 {
  filter: blur(7px);
}

.blur-8 {
  filter: blur(8px);
}

.blur-9 {
  filter: blur(9px);
}

.blur-10 {
  filter: blur(10px);
}

.badge-danger, .badge-danger-invert, .badge-warning, .badge-warning-invert, .badge-success, .badge-success-invert, .badge-secondary, .badge-secondary-invert, .badge-primary, .badge-primary-invert {
  position: relative;
  display: inline-block;
  min-width: 35px;
  padding: 4px 10px;
  line-height: 14px;
  font-size: 12px;
  border-radius: 8px;
  text-align: center;
}
.badge-danger:not(.selectable), .badge-danger-invert:not(.selectable), .badge-warning:not(.selectable), .badge-warning-invert:not(.selectable), .badge-success:not(.selectable), .badge-success-invert:not(.selectable), .badge-secondary:not(.selectable), .badge-secondary-invert:not(.selectable), .badge-primary:not(.selectable), .badge-primary-invert:not(.selectable) {
  cursor: default;
}
.badge-danger a, .badge-danger-invert a, .badge-warning a, .badge-warning-invert a, .badge-success a, .badge-success-invert a, .badge-secondary a, .badge-secondary-invert a, .badge-primary a, .badge-primary-invert a {
  display: block;
  text-decoration: none;
}
.badge-danger a:hover, .badge-danger-invert a:hover, .badge-warning a:hover, .badge-warning-invert a:hover, .badge-success a:hover, .badge-success-invert a:hover, .badge-secondary a:hover, .badge-secondary-invert a:hover, .badge-primary a:hover, .badge-primary-invert a:hover {
  text-decoration: underline;
}
.badge-danger .btn, .badge-danger-invert .btn, .badge-warning .btn, .badge-warning-invert .btn, .badge-success .btn, .badge-success-invert .btn, .badge-secondary .btn, .badge-secondary-invert .btn, .badge-primary .btn, .badge-primary-invert .btn,
.badge-danger button,
.badge-danger-invert button,
.badge-warning button,
.badge-warning-invert button,
.badge-success button,
.badge-success-invert button,
.badge-secondary button,
.badge-secondary-invert button,
.badge-primary button,
.badge-primary-invert button {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  cursor: pointer;
  font-size: 10px;
  color: var(--colour-on-accent);
}
.badge-danger .btn:hover, .badge-danger-invert .btn:hover, .badge-warning .btn:hover, .badge-warning-invert .btn:hover, .badge-success .btn:hover, .badge-success-invert .btn:hover, .badge-secondary .btn:hover, .badge-secondary-invert .btn:hover, .badge-primary .btn:hover, .badge-primary-invert .btn:hover,
.badge-danger button:hover,
.badge-danger button.danger.active,
.badge-danger button.info.active,
.badge-danger button.success.active,
.badge-danger-invert button:hover,
.badge-danger-invert button.danger.active,
.badge-danger-invert button.info.active,
.badge-danger-invert button.success.active,
.badge-warning button:hover,
.badge-warning button.danger.active,
.badge-warning button.info.active,
.badge-warning button.success.active,
.badge-warning-invert button:hover,
.badge-warning-invert button.danger.active,
.badge-warning-invert button.info.active,
.badge-warning-invert button.success.active,
.badge-success button:hover,
.badge-success button.danger.active,
.badge-success button.info.active,
.badge-success button.success.active,
.badge-success-invert button:hover,
.badge-success-invert button.danger.active,
.badge-success-invert button.info.active,
.badge-success-invert button.success.active,
.badge-secondary button:hover,
.badge-secondary button.danger.active,
.badge-secondary button.info.active,
.badge-secondary button.success.active,
.badge-secondary-invert button:hover,
.badge-secondary-invert button.danger.active,
.badge-secondary-invert button.info.active,
.badge-secondary-invert button.success.active,
.badge-primary button:hover,
.badge-primary button.danger.active,
.badge-primary button.info.active,
.badge-primary button.success.active,
.badge-primary-invert button:hover,
.badge-primary-invert button.danger.active,
.badge-primary-invert button.info.active,
.badge-primary-invert button.success.active {
  color: var(--colour-on-accent);
}
.badge-danger .btn, .badge-danger-invert .btn, .badge-warning .btn, .badge-warning-invert .btn, .badge-success .btn, .badge-success-invert .btn, .badge-secondary .btn, .badge-secondary-invert .btn, .badge-primary .btn, .badge-primary-invert .btn {
  line-height: 20px;
}

.badge-fluid {
  min-width: 0;
}

.badge-primary, .badge-primary-invert {
  border-radius: 4px;
  background-color: var(--colour-primary);
  color: var(--colour-on-accent);
}
.badge-primary a, .badge-primary-invert a,
.badge-primary a:hover {
  color: var(--colour-on-accent);
}

.badge-secondary, .badge-secondary-invert {
  border-radius: 4px;
  background-color: var(--colour-neutral-900);
  color: var(--colour-on-accent);
}
.badge-secondary a, .badge-secondary-invert a,
.badge-secondary a:hover {
  color: var(--colour-on-accent);
}

.badge-success, .badge-success-invert {
  border-radius: 4px;
  background-color: var(--colour-success);
  color: var(--colour-on-accent);
}
.badge-success a, .badge-success-invert a,
.badge-success a:hover {
  color: var(--colour-on-accent);
}

.badge-warning, .badge-warning-invert {
  border-radius: 4px;
  background-color: var(--colour-warning-600);
  color: var(--colour-on-accent);
}
.badge-warning a, .badge-warning-invert a,
.badge-warning a:hover {
  color: var(--colour-on-accent);
}

.badge-danger, .badge-danger-invert {
  border-radius: 4px;
  background-color: var(--colour-danger-600);
  color: var(--colour-on-accent);
}
.badge-danger a, .badge-danger-invert a,
.badge-danger a:hover {
  color: var(--colour-on-accent);
}

.badge-primary-invert {
  color: var(--colour-badge-primary-invert-text);
  background-color: var(--colour-badge-primary-invert-bg);
}
.badge-primary-invert:hover, button.badge-primary-invert.danger.active, button.badge-primary-invert.info.active, button.badge-primary-invert.success.active {
  color: var(--colour-badge-primary-invert-text);
}
.badge-primary-invert .btn,
.badge-primary-invert button {
  color: var(--colour-badge-primary-invert-text);
}
.badge-primary-invert .btn:hover,
.badge-primary-invert button:hover,
.badge-primary-invert button.danger.active,
.badge-primary-invert button.info.active,
.badge-primary-invert button.success.active {
  color: var(--colour-badge-primary-invert-text);
}

.badge-secondary-invert {
  color: var(--colour-badge-secondary-invert-text);
  background-color: var(--colour-badge-secondary-invert-bg);
}
.badge-secondary-invert:hover, button.badge-secondary-invert.danger.active, button.badge-secondary-invert.info.active, button.badge-secondary-invert.success.active {
  color: var(--colour-badge-secondary-invert-text);
}
.badge-secondary-invert .btn,
.badge-secondary-invert button {
  color: var(--colour-badge-secondary-invert-text);
}
.badge-secondary-invert .btn:hover,
.badge-secondary-invert button:hover,
.badge-secondary-invert button.danger.active,
.badge-secondary-invert button.info.active,
.badge-secondary-invert button.success.active {
  color: var(--colour-badge-secondary-invert-text);
}

.badge-success-invert {
  color: var(--colour-badge-success-invert-text);
  background-color: var(--colour-badge-success-invert-bg);
}
.badge-success-invert:hover, button.badge-success-invert.danger.active, button.badge-success-invert.info.active, button.badge-success-invert.success.active {
  color: var(--colour-badge-success-invert-text);
}
.badge-success-invert .btn,
.badge-success-invert button {
  color: var(--colour-badge-success-invert-text);
}
.badge-success-invert .btn:hover,
.badge-success-invert button:hover,
.badge-success-invert button.danger.active,
.badge-success-invert button.info.active,
.badge-success-invert button.success.active {
  color: var(--colour-badge-success-invert-text);
}

.badge-warning-invert {
  color: var(--colour-badge-warning-invert-text);
  background-color: var(--colour-badge-warning-invert-bg);
}
.badge-warning-invert:hover, button.badge-warning-invert.danger.active, button.badge-warning-invert.info.active, button.badge-warning-invert.success.active {
  color: var(--colour-badge-warning-invert-text);
}
.badge-warning-invert .btn,
.badge-warning-invert button {
  color: var(--colour-badge-warning-invert-text);
}
.badge-warning-invert .btn:hover,
.badge-warning-invert button:hover,
.badge-warning-invert button.danger.active,
.badge-warning-invert button.info.active,
.badge-warning-invert button.success.active {
  color: var(--colour-badge-warning-invert-text);
}

.badge-danger-invert {
  color: var(--colour-badge-danger-invert-text);
  background-color: var(--colour-badge-danger-invert-bg);
}
.badge-danger-invert:hover, button.badge-danger-invert.danger.active, button.badge-danger-invert.info.active, button.badge-danger-invert.success.active {
  color: var(--colour-badge-danger-invert-text);
}
.badge-danger-invert .btn,
.badge-danger-invert button {
  color: var(--colour-badge-danger-invert-text);
}
.badge-danger-invert .btn:hover,
.badge-danger-invert button:hover,
.badge-danger-invert button.danger.active,
.badge-danger-invert button.info.active,
.badge-danger-invert button.success.active {
  color: var(--colour-badge-danger-invert-text);
}

.badge-round {
  border-radius: 16px;
}

.badge-large {
  padding: 8px 16px;
  font-size: 13px;
}

.badge-small {
  padding: 3px 8px;
  line-height: 12px;
  font-size: 10px;
}
.badge-small button {
  padding: 0;
  width: 16px;
  height: 16px;
}
.badge-small.badge-btn {
  padding-right: 20px;
}

.badge-id {
  display: inline-flex;
  align-items: center;
  height: 16px;
  line-height: 16px;
  color: var(--colour-neutral);
  font-size: 13px;
  text-decoration: none;
  font-weight: 400;
}
.badge-id:before {
  content: "ID";
  float: left;
  height: 16px;
  padding: 0 4px;
  color: var(--colour-on-accent);
  background-color: var(--colour-neutral-300);
  margin-right: 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.badge-btn {
  padding-right: 24px;
}

.badge-group-tertiary {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 8px;
  border-radius: 20px;
  background-color: var(--colour-badge-group-tertiary-bg);
}
.badge-group-tertiary > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 28px;
  padding: 0 16px;
  border-radius: 20px;
  color: var(--colour-neutral-500);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.badge-group-tertiary > span.min {
  min-width: 112px;
}
.badge-group-tertiary > span.active {
  color: var(--colour-system-text);
  background-color: var(--colour-badge-group-tertiary-highlight-bg);
  box-shadow: var(--shadow-1);
  cursor: default;
}
.badge-group-tertiary.badge-group-tertiary-small > span {
  min-width: 48px;
}

.notification-attention {
  overflow: hidden;
  position: relative;
  padding: 20px 20px 20px 60px;
  border: 1px solid var(--colour-notification-attention-border);
  background-color: var(--colour-notification-attention-bg);
  border-radius: 8px;
}
.notification-attention > .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  padding-top: 20px;
  background-color: var(--colour-notification-attention-highlight);
  text-align: center;
  color: var(--colour-on-accent);
}

.alert-danger, .alert-warning, .alert-success, .alert-primary {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 8px;
  color: #FFFFFF;
}

.alert-primary {
  background-color: var(--colour-primary);
}

.alert-success {
  background-color: var(--colour-success);
}

.alert-warning {
  background-color: var(--colour-warning);
}

.alert-danger {
  background-color: var(--colour-danger);
}

.alert-top {
  position: absolute;
  z-index: 2010;
  width: 50%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 800px) {
  .alert-top {
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
  }
}

.alert-center {
  position: absolute;
  z-index: 2010;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media (max-width: 800px) {
  .alert-center {
    left: 20px;
    right: 20px;
    width: auto;
    transform: translateY(-50%);
  }
}

.banner-shiny {
  min-height: 56px;
  padding: 16px 24px;
  line-height: 150%;
  border-radius: 8px;
  background: var(--gradient-shiny-bg);
  color: #232E3A;
  font-weight: 500;
}

.banner-info, .banner-success, .banner-danger, .banner-warning {
  position: relative;
  line-height: 24px;
  padding: 8px 16px 8px 36px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.banner-info:before, .banner-success:before, .banner-danger:before, .banner-warning:before {
  position: absolute;
  top: 8px;
  left: 16px;
  height: 24px;
  line-height: 24px;
}

.banner-warning {
  background-color: var(--colour-banner-warning-bg);
  border-color: var(--colour-banner-warning-border);
}
.banner-warning:before {
  color: var(--colour-warning);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f071";
}

.banner-danger {
  background-color: var(--colour-banner-danger-bg);
  border-color: var(--colour-banner-danger-border);
}
.banner-danger:before {
  color: var(--colour-danger);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06a";
}

.banner-success {
  background-color: var(--colour-banner-success-bg);
  border-color: var(--colour-banner-success-border);
}
.banner-success:before {
  color: var(--colour-success);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
}

.banner-info {
  background-color: var(--colour-banner-info-bg);
  border-color: var(--colour-banner-info-border);
}
.banner-info:before {
  color: var(--colour-dolphin-600);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06a";
}

.banner-large {
  padding: 14px 16px 14px 36px;
}
.banner-large:before {
  top: 14px;
}

.tablet-only {
  display: none;
}
@media (max-width: 1200px) {
  .tablet-only {
    display: block;
  }
}
@media (max-width: 800px) {
  .tablet-only {
    display: none;
  }
}

@media (max-width: 800px) {
  .mobile-hidden {
    display: none !important;
  }
}

.region-page-message {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  position: fixed;
  z-index: 2000;
  left: 24px;
  bottom: 24px;
  max-width: calc(100% - 48px);
}

.success-message, .error-message {
  position: relative;
  align-self: flex-start;
  min-width: 300px;
  line-height: 24px;
  padding: 16px 80px 16px 48px;
  border-radius: 5px;
  background-color: var(--colour-system-surface);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  animation: translateUp 0.16s;
  transition: all 0.16s;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.success-message.closed, .closed.error-message {
  opacity: 0;
  transform: translateX(-50%);
}
.success-message.has-action, .has-action.error-message {
  padding-right: 160px;
}
.success-message > i, .error-message > i {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: var(--colour-success);
  text-align: center;
}
.success-message > a, .error-message > a {
  position: absolute;
  right: 16px;
  top: 16px;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
  color: var(--colour-neutral-300);
}
.success-message > a:hover, .error-message > a:hover {
  color: var(--colour-neutral);
}
.success-message > button.tertiary, .error-message > button.tertiary {
  position: absolute;
  right: 48px;
  top: 12px;
}
.success-message .secondary-message, .error-message .secondary-message {
  color: var(--colour-neutral);
}

.error-message > i {
  color: #FF4060;
}

.rounded-corner {
  border-radius: 8px;
}

.rounded-corner-small {
  border-radius: 4px;
}

.rounded-corner-large {
  border-radius: 16px;
}

.box, .card, .box-large, .box-medium, .box-small-large, .box-small-medium, .box-small {
  position: relative;
  padding: 40px;
  margin: 0 0 20px 0;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.box:last-child, .card:last-child, .box-large:last-child, .box-medium:last-child, .box-small-large:last-child, .box-small-medium:last-child, .box-small:last-child {
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .box, .card, .box-large, .box-medium, .box-small-large, .box-small-medium, .box-small {
    padding: 20px;
  }
}

.box-nomargin {
  margin: 0;
}

.box-nopadding {
  padding: 0;
}

.box-small {
  padding: 10px;
}

.box-small-medium {
  padding: 16px;
}

.box-small-large {
  padding: 24px;
}

.box-medium {
  padding: 32px;
}
@media (max-width: 800px) {
  .box-medium {
    padding: 20px;
  }
}

.box-large {
  padding: 60px;
}
@media (max-width: 800px) {
  .box-large {
    padding: 20px;
  }
}

.box-bg-dark-only {
  background-color: var(--colour-system-box-bg-dark-only);
}

.box-border {
  border: 1px solid var(--colour-system-line);
}

.box-primary {
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
}

.box-neutral {
  padding: 16px;
  border-radius: 8px;
  background: var(--colour-neutral-25);
}

.box-neutral-light {
  padding: 16px;
  border-radius: 8px;
  background: var(--colour-neutral-10);
}

.box-url-share, .box-url-share-small {
  position: relative;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 24px 56px 24px 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-neutral-10);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.box-url-share:after, .box-url-share-small:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0c5";
  position: absolute;
  right: 24px;
  pointer-events: none;
  color: var(--colour-neutral-300);
}

.box-url-share-small {
  padding: 16px 40px 16px 16px;
  font-size: 14px;
}
.box-url-share-small:after {
  right: 16px;
  font-size: 14px;
}

.box-square {
  padding: 20px 0;
  background-color: var(--colour-system-surface-2);
  border: 1px solid var(--colour-system-line);
  border-right: none;
}
.box-square:first-child {
  border-radius: 8px 0 0 8px;
}
.box-square:last-child {
  border-right: 1px solid var(--colour-system-line);
  border-radius: 0 8px 8px 0;
}

.box-widget, .box-widget-medium {
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
}
.box-widget > div:first-child, .box-widget-medium > div:first-child {
  padding: 40px;
}
@media (max-width: 800px) {
  .box-widget > div:first-child, .box-widget-medium > div:first-child {
    padding: 20px;
  }
}
.box-widget > div:last-child, .box-widget-medium > div:last-child {
  padding: 30px;
  border-top: 1px solid var(--colour-system-line);
}
@media (max-width: 800px) {
  .box-widget > div:last-child, .box-widget-medium > div:last-child {
    padding: 20px;
  }
}

.box-widget-medium > div:first-child {
  padding: 52px;
}
@media (max-width: 800px) {
  .box-widget-medium > div:first-child {
    padding: 20px;
  }
}

.box-setting {
  position: relative;
  padding: 20px 20px 20px 50px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  cursor: pointer;
}
.box-setting:not(.box-setting-disabled):hover, button.box-setting.danger.active:not(.box-setting-disabled), button.box-setting.info.active:not(.box-setting-disabled), button.box-setting.success.active:not(.box-setting-disabled) {
  border-color: var(--colour-input-border-hover);
}
.box-setting.active {
  border-color: var(--colour-primary-dark-invert);
  cursor: default;
}
.box-setting.active > i {
  color: var(--colour-primary-dark-invert);
}
.box-setting > i {
  position: absolute;
  top: 22px;
  left: 20px;
}

.box-setting-disabled {
  cursor: not-allowed;
  border-color: var(--colour-system-line);
}
.box-setting-disabled .desc {
  opacity: 0.5;
}

.on-hover .hover-show {
  display: none;
}
.on-hover:hover .hover-show, button.on-hover.danger.active .hover-show, button.on-hover.info.active .hover-show, button.on-hover.success.active .hover-show {
  display: initial;
}

.scrolling {
  overflow: auto;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
.scrolling::-webkit-scrollbar {
  width: 4px;
  background-color: var(--colour-system-surface-2);
}
.scrolling::-webkit-scrollbar-thumb {
  background: var(--colour-neutral-300);
  border-radius: 8px;
}

.scrolling-h {
  overflow: auto;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
.scrolling-h::-webkit-scrollbar {
  height: 4px;
  background-color: var(--colour-system-surface-2);
}
.scrolling-h::-webkit-scrollbar-thumb {
  background: var(--colour-neutral-300);
  border-radius: 8px;
}

.meteor-shiny, .meteor-warning, .meteor-danger, .meteor-success, .meteor-secondary, .meteor-primary {
  overflow: hidden;
  height: 8px;
  margin-top: 4px;
  border-radius: 8px;
  background-color: var(--colour-neutral-75);
}
.meteor-shiny div, .meteor-warning div, .meteor-danger div, .meteor-success div, .meteor-secondary div, .meteor-primary div {
  height: 100%;
  animation: width 0.6s linear;
}
.meteor-shiny div span, .meteor-warning div span, .meteor-danger div span, .meteor-success div span, .meteor-secondary div span, .meteor-primary div span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 8px;
  transition: width 0.1s linear;
}

.meteor-primary span {
  background-color: var(--colour-primary);
}

.meteor-secondary span {
  background-color: var(--colour-neutral-1000);
}

.meteor-success span {
  background-color: var(--colour-success);
}

.meteor-danger span {
  background-color: #FF4060;
}

.meteor-warning span {
  background-color: var(--colour-warning);
}

.meteor-shiny span {
  background: linear-gradient(45deg, var(--colour-feedback-600), var(--colour-survey-600));
}

.browser-window, .browser-window-light {
  position: relative;
  overflow: hidden;
  margin: 10px;
  padding: 18px 0 0 0;
  border-radius: 6px;
  background-color: var(--colour-neutral-800);
  box-shadow: var(--shadow-1);
}
.browser-window:before, .browser-window-light:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 6px;
  left: 6px;
  background-color: #FF554E;
  box-shadow: 10px 0 #FFB429, 20px 0 #24C238;
  border-radius: 50%;
}
.browser-window img, .browser-window-light img {
  display: block;
}

.browser-window-light {
  background-color: var(--colour-neutral-10);
  box-shadow: 0 0 0 1px var(--colour-neutral-25);
}

.bg-solid {
  background-color: var(--colour-neutral-10);
}

.border-solid {
  border: 1px solid var(--colour-neutral-100);
  border-radius: 8px;
}

.gradient-line-top {
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: radial-gradient(var(--colour-system-line), var(--colour-system-surface));
}

.gradient-line-bottom {
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-image: radial-gradient(var(--colour-system-line), var(--colour-system-surface));
}

.solid-line-top {
  border-top: 1px solid var(--colour-neutral-100);
}

.solid-line-bottom {
  border-bottom: 1px solid var(--colour-neutral-100);
}

.gradient-line-left {
  position: relative;
}
.gradient-line-left:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--colour-system-line);
}

.money {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.money .symbol {
  position: absolute;
  right: 100%;
  top: 6px;
  font-size: 14px;
  color: var(--colour-system-text);
}
.money .number {
  font-size: 30px;
  color: var(--colour-system-text);
}
.money.money-small .number {
  font-size: 24px;
}
.money.money-large .symbol {
  font-size: 18px;
  font-weight: 500;
}
.money.money-large .number {
  font-size: 38px;
}

.cursor-copy {
  cursor: copy;
}

/* XHR loading status */
#xhr-loading-status {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 56px;
  margin: auto;
}
#xhr-loading-status:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 2px;
  background-color: var(--colour-primary);
  animation: width 5s ease-in-out infinite;
}
#xhr-loading-status img {
  display: block;
  height: 24px;
}
#xhr-loading-status .logo {
  display: block;
  width: 140px;
  height: 24px;
  background: url("/image/logo.svg") no-repeat center center;
}
:root[data-colour-scheme=dark] #xhr-loading-status .logo {
  background-image: url("/image/logo_white.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) #xhr-loading-status .logo {
    background-image: url("/image/logo_white.svg");
  }
}

.hidden-empty:empty {
  display: none;
}

.search-result-empty {
  display: none;
  position: relative;
  margin: auto;
  padding: 100px 48px;
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}
.search-result-empty.search-result-empty-large {
  padding: 140px 50px;
}
.search-result-empty.active {
  display: block;
}
@media (max-width: 800px) {
  .search-result-empty {
    height: auto;
    margin: 40px 0 0 0;
    padding: 50px 20px;
  }
}
.search-result-empty .icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: auto auto 32px auto;
  border-radius: 50%;
  background-color: var(--colour-neutral-100);
  font-size: 34px;
  color: var(--colour-neutral-600);
}

.video-explainer {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  border-radius: 16px;
  cursor: pointer;
}
.video-explainer.video-explainer-outline {
  border: 2px solid var(--colour-primary);
}
.video-explainer:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-neutral);
  opacity: 0.1;
}
.video-explainer:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f144";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: auto;
  font-size: 80px;
  color: var(--colour-primary);
  text-align: center;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  transition: all 0.1s;
}
.video-explainer:hover:after, button.video-explainer.danger.active:after, button.video-explainer.info.active:after, button.video-explainer.success.active:after {
  color: var(--colour-primary-700);
}
.video-explainer video {
  display: block;
  max-width: 100%;
  background-color: var(--colour-neutral-1000);
  pointer-events: none;
}
.video-explainer video[poster] {
  background-color: var(--colour-system-surface);
}
.video-explainer.video-explainer-small:after {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 48px;
}

.rating-details > div {
  float: left;
  margin-right: 4px;
}
.rating-details > div svg {
  display: block;
  width: 18px;
  height: 18px;
}
.rating-details > div.thumb-up svg {
  transform: translateY(-1px);
}
.rating-details > div.thumb-down svg {
  transform: translateY(1px);
}
.rating-details > div.number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--colour-system-line);
  border-radius: 4px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.rating-details > div.number.active {
  border-color: var(--colour-primary);
  background-color: var(--colour-primary-25);
  color: var(--colour-primary);
}
.rating-details > span {
  float: left;
  line-height: 18px;
}
.rating-details > div.inactive svg .bg {
  fill: var(--colour-neutral-100);
}
.rating-details > div.inactive svg .shape {
  fill: var(--colour-neutral-200);
}
.rating-details > div.inactive svg .star,
.rating-details > div.inactive svg .heart,
.rating-details > div.inactive svg .thumb {
  fill: var(--colour-neutral-100);
}

.rating-details-small > div {
  height: 16px;
}
.rating-details-small > div svg {
  width: 14px;
  height: 14px;
}
.rating-details-small > span {
  line-height: 16px;
}

.hidden-date-picker {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1px !important;
  height: 1px !important;
}

.theme-img, .theme-img-block {
  display: inline;
}
:root[data-colour-scheme=light] .theme-img .theme-img-dark, :root[data-colour-scheme=light] .theme-img-block .theme-img-dark {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .theme-img .theme-img-dark, :root:not([data-colour-scheme]) .theme-img-block .theme-img-dark {
    display: none;
  }
}
:root[data-colour-scheme=dark] .theme-img .theme-img-light, :root[data-colour-scheme=dark] .theme-img-block .theme-img-light {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .theme-img .theme-img-light, :root:not([data-colour-scheme]) .theme-img-block .theme-img-light {
    display: none;
  }
}

.theme-img-block {
  display: block;
}
.theme-img-block img {
  display: block;
}

input[type=checkbox],
input[type=radio] {
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -1;
}

input[type=checkbox] + label,
input[type=radio] + label {
  position: relative;
  display: inline-block;
  height: 16px;
  line-height: 16px;
  margin-right: 10px;
  padding-left: 24px;
  cursor: pointer;
  color: var(--colour-system-text);
  transition: all 0.2s;
  user-select: none;
}
input[type=checkbox] + label.full,
input[type=radio] + label.full {
  display: block;
  margin-right: 0;
}

input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

input[type=checkbox] + label:before,
input[type=radio] + label:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 16px;
  width: 16px;
  margin: auto;
  border: 1px solid var(--colour-neutral-200);
  transition: all 0.1s;
}

input[type=radio] + label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  transition: all 0.1s;
}

input[type=checkbox] + label:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--colour-checkbox-text);
  clip: rect(0px, 0px, 16px, 0px);
  font-size: 10px;
  transition: all 0.3s;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f00c";
}

input[type=checkbox].checkbox-round + label:after {
  font-size: 8px;
  clip: auto;
  transition: all 0.1s;
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f00c";
}

input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before {
  border-color: var(--colour-checkbox-bg);
  background-color: var(--colour-checkbox-bg);
}

input[type=checkbox]:not(:disabled) + label:hover:before,
input[type=radio]:not(:disabled) + label:hover:before {
  border-color: var(--colour-neutral-300);
}

input[type=checkbox]:checked:not(:disabled) + label:hover:before,
input[type=radio]:checked:not(:disabled) + label:hover:before {
  background-color: var(--colour-checkbox-bg-hover);
  border-color: var(--colour-checkbox-bg-hover);
}

input[type=checkbox]:not(:disabled):not(:checked).checkbox-round + label:hover:after {
  color: var(--colour-neutral);
}

input[type=checkbox]:checked + label:after {
  clip: rect(0px, 16px, 16px, 0px);
}

input[type=radio]:checked + label:after {
  top: 6px;
  left: 6px;
  width: 4px;
  height: 4px;
  background-color: var(--colour-checkbox-text);
}

input[type=checkbox] + label:before {
  border-radius: 2px;
}

input[type=radio] + label:before {
  border-radius: 50%;
}

input[type=checkbox].checkbox-round + label:before {
  border-radius: 50%;
}

input[type=checkbox].compact + label,
input[type=radio].compact + label {
  height: 14px;
  line-height: 14px;
  padding-left: 20px;
  font-size: 12px;
}

input[type=checkbox].compact + label:before,
input[type=radio].compact + label:before {
  height: 14px;
  width: 14px;
}

input[type=radio].compact + label:after {
  width: 10px;
  height: 10px;
}

input[type=checkbox].compact + label:after {
  width: 14px;
  height: 14px;
  line-height: 16px;
  clip: rect(0px, 0px, 14px, 0px);
  font-size: 7px;
}

input[type=checkbox].compact:checked + label:after {
  clip: rect(0px, 14px, 14px, 0px);
}

input[type=radio].compact:checked + label:after {
  top: 5px;
  left: 5px;
  width: 4px;
  height: 4px;
}

input.checkbox-badge[type=checkbox] + label {
  height: 32px;
  line-height: 30px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  transition: none;
}

input.checkbox-badge[type=checkbox] + label:before {
  display: none;
}

input.checkbox-badge[type=checkbox]:checked + label {
  padding-left: 24px;
  border-color: rgba(96, 64, 255, 0.8);
}

input.checkbox-badge[type=checkbox]:not(:disabled) + label:hover {
  border-color: rgba(96, 64, 255, 0.8);
}

input.checkbox-badge[type=checkbox]:checked:not(:disabled) + label:before {
  display: block;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
  left: 8px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  border: none;
  color: rgba(96, 128, 160, 0.4);
  font-size: 10px;
  color: var(--colour-primary);
  background-color: transparent;
}

input.checkbox-badge + label:after {
  display: none;
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=time],
input[type=month],
select,
textarea {
  width: 100%;
  height: 50px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--colour-input-border);
  border-radius: 0;
  background: none;
  outline: none;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--colour-system-text);
  transition: all 0.1s;
}
input[type=email]:invalid,
input[type=number]:invalid,
input[type=password]:invalid,
input[type=search]:invalid,
input[type=tel]:invalid,
input[type=text]:invalid,
input[type=url]:invalid,
input[type=color]:invalid,
input[type=date]:invalid,
input[type=datetime]:invalid,
input[type=datetime-local]:invalid,
input[type=time]:invalid,
input[type=month]:invalid,
select:invalid,
textarea:invalid {
  box-shadow: none;
}
input[type=email]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=text]:disabled,
input[type=url]:disabled,
input[type=color]:disabled,
input[type=date]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=time]:disabled,
input[type=month]:disabled,
select:disabled,
textarea:disabled {
  color: var(--colour-system-text-placeholder);
  cursor: not-allowed;
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=time]:focus,
input[type=month]:focus,
select:focus,
textarea:focus {
  border-color: var(--colour-input-border-hover);
}
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
input[type=url]::placeholder,
input[type=color]::placeholder,
input[type=date]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=time]::placeholder,
input[type=month]::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--colour-system-text-placeholder);
}
input[type=email].invalid,
input[type=number].invalid,
input[type=password].invalid,
input[type=search].invalid,
input[type=tel].invalid,
input[type=text].invalid,
input[type=url].invalid,
input[type=color].invalid,
input[type=date].invalid,
input[type=datetime].invalid,
input[type=datetime-local].invalid,
input[type=time].invalid,
input[type=month].invalid,
select.invalid,
textarea.invalid {
  border-bottom-color: #FF4060;
}
input[type=email].invalid::selection,
input[type=number].invalid::selection,
input[type=password].invalid::selection,
input[type=search].invalid::selection,
input[type=tel].invalid::selection,
input[type=text].invalid::selection,
input[type=url].invalid::selection,
input[type=color].invalid::selection,
input[type=date].invalid::selection,
input[type=datetime].invalid::selection,
input[type=datetime-local].invalid::selection,
input[type=time].invalid::selection,
input[type=month].invalid::selection,
select.invalid::selection,
textarea.invalid::selection {
  color: var(--colour-system-text-inverse);
  background: #FF4060;
}
input[type=email].compact,
input[type=number].compact,
input[type=password].compact,
input[type=search].compact,
input[type=tel].compact,
input[type=text].compact,
input[type=url].compact,
input[type=color].compact,
input[type=date].compact,
input[type=datetime].compact,
input[type=datetime-local].compact,
input[type=time].compact,
input[type=month].compact,
select.compact,
textarea.compact {
  font-size: 14px;
  height: 32px;
}
input[type=email].medium,
input[type=number].medium,
input[type=password].medium,
input[type=search].medium,
input[type=tel].medium,
input[type=text].medium,
input[type=url].medium,
input[type=color].medium,
input[type=date].medium,
input[type=datetime].medium,
input[type=datetime-local].medium,
input[type=time].medium,
input[type=month].medium,
select.medium,
textarea.medium {
  font-size: 14px;
  height: 40px;
}
input[type=email].solid,
input[type=number].solid,
input[type=password].solid,
input[type=search].solid,
input[type=tel].solid,
input[type=text].solid,
input[type=url].solid,
input[type=color].solid,
input[type=date].solid,
input[type=datetime].solid,
input[type=datetime-local].solid,
input[type=time].solid,
input[type=month].solid,
select.solid,
textarea.solid {
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
input[type=email].solid:focus, input[type=email].solid:hover:not(:disabled),
input[type=number].solid:focus,
input[type=number].solid:hover:not(:disabled),
input[type=password].solid:focus,
input[type=password].solid:hover:not(:disabled),
input[type=search].solid:focus,
input[type=search].solid:hover:not(:disabled),
input[type=tel].solid:focus,
input[type=tel].solid:hover:not(:disabled),
input[type=text].solid:focus,
input[type=text].solid:hover:not(:disabled),
input[type=url].solid:focus,
input[type=url].solid:hover:not(:disabled),
input[type=color].solid:focus,
input[type=color].solid:hover:not(:disabled),
input[type=date].solid:focus,
input[type=date].solid:hover:not(:disabled),
input[type=datetime].solid:focus,
input[type=datetime].solid:hover:not(:disabled),
input[type=datetime-local].solid:focus,
input[type=datetime-local].solid:hover:not(:disabled),
input[type=time].solid:focus,
input[type=time].solid:hover:not(:disabled),
input[type=month].solid:focus,
input[type=month].solid:hover:not(:disabled),
select.solid:focus,
select.solid:hover:not(:disabled),
textarea.solid:focus,
textarea.solid:hover:not(:disabled) {
  border-color: var(--colour-input-border-hover);
}
input[type=email].solid:focus,
input[type=number].solid:focus,
input[type=password].solid:focus,
input[type=search].solid:focus,
input[type=tel].solid:focus,
input[type=text].solid:focus,
input[type=url].solid:focus,
input[type=color].solid:focus,
input[type=date].solid:focus,
input[type=datetime].solid:focus,
input[type=datetime-local].solid:focus,
input[type=time].solid:focus,
input[type=month].solid:focus,
select.solid:focus,
textarea.solid:focus {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
input[type=email].solid:disabled,
input[type=number].solid:disabled,
input[type=password].solid:disabled,
input[type=search].solid:disabled,
input[type=tel].solid:disabled,
input[type=text].solid:disabled,
input[type=url].solid:disabled,
input[type=color].solid:disabled,
input[type=date].solid:disabled,
input[type=datetime].solid:disabled,
input[type=datetime-local].solid:disabled,
input[type=time].solid:disabled,
input[type=month].solid:disabled,
select.solid:disabled,
textarea.solid:disabled {
  background-color: var(--colour-input-bg-disabled);
  color: var(--colour-input-text-disabled);
  border-color: transparent;
}

div.solid-field {
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  transition: all 0.1s;
}
div.solid-field:hover, div.solid-field:focus-within {
  border-color: var(--colour-input-border-hover);
}
div.solid-field:focus-within {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
div.solid-field textarea {
  border: none;
  border-radius: 8px;
}

input[type=range] {
  height: 38px;
  margin: 0;
  -moz-apperance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
}
input[type=range].full {
  width: 100%;
}
input[type=range].small {
  height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 8px;
  background-color: var(--colour-neutral-100);
  box-sizing: border-box;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--colour-system-surface);
  cursor: pointer;
  border: 6px solid var(--colour-primary-dark-invert);
  transition: all 0.1s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-thumb {
  border-color: var(--colour-primary-700-dark-invert);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 8px;
  background-color: var(--colour-neutral-100);
  box-sizing: border-box;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--colour-system-surface);
  cursor: pointer;
  border: 6px solid var(--colour-primary-dark-invert);
  transition: all 0.1s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
  border-color: var(--colour-primary-700-dark-invert);
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 8px;
  background-color: var(--colour-neutral-100);
  box-sizing: border-box;
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  height: 18px;
  width: 18px;
  margin-top: -6px;
  border: none;
  border-radius: 50%;
  background: var(--colour-system-surface);
  cursor: pointer;
  border: 6px solid var(--colour-primary-dark-invert);
  transition: all 0.1s;
  box-sizing: border-box;
  -webkit-appearance: none;
  margin-top: 0;
}
input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper {
  background: none;
  border: none;
}
input[type=range]:disabled::-webkit-slider-runnable-track {
  cursor: not-allowed;
}
input[type=range]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled:focus::-webkit-slider-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled::-moz-range-track {
  cursor: not-allowed;
}
input[type=range]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled:focus::-moz-range-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled::-ms-track {
  cursor: not-allowed;
}
input[type=range]:disabled::-ms-thumb {
  cursor: not-allowed;
}
input[type=range]:disabled::-ms-fill-lower, input[type=range]:disabled::-ms-fill-upper {
  cursor: not-allowed;
}

input[type=range].dark::-webkit-slider-runnable-track {
  height: 4px;
}
input[type=range].dark::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
  margin-top: -5px;
  background-color: var(--colour-neutral-1000);
  border-color: var(--colour-neutral-1000);
}
input[type=range].dark:focus::-webkit-slider-thumb {
  box-shadow: none;
}
input[type=range].dark::-moz-range-track {
  height: 4px;
}
input[type=range].dark::-moz-range-thumb {
  height: 14px;
  width: 14px;
  margin-top: -5px;
  background-color: var(--colour-neutral-1000);
  border-color: var(--colour-neutral-1000);
}
input[type=range].dark:focus::-moz-range-thumb {
  box-shadow: none;
}
input[type=range].dark::-ms-track {
  height: 4px;
}
input[type=range].dark::-ms-thumb {
  height: 14px;
  width: 14px;
  margin-top: -5px;
  background-color: var(--colour-neutral-1000);
  border-color: var(--colour-neutral-1000);
}

input[type=file] {
  height: 50px;
}
input[type=file].compact {
  font-size: 14px;
  height: 32px;
}
input[type=file].medium {
  font-size: 14px;
  height: 40px;
}

input[type=text].colour {
  text-transform: uppercase;
}

select {
  -moz-apperance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-caret-icon);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}
select.nounderline {
  border-bottom: none;
}
select.solid {
  padding-right: 30px;
  background-position: calc(100% - 10px) 50%;
}

select[multiple],
textarea {
  height: auto;
  padding: 10px;
  border: 1px solid var(--colour-input-border);
  resize: none;
}
select[multiple].resize-v,
textarea.resize-v {
  resize: vertical;
  transition: none;
}
select[multiple].resize-h,
textarea.resize-h {
  resize: horizontal;
  transition: none;
}

textarea {
  -moz-apperance: none;
  -webkit-appearance: none;
  appearance: none;
}
textarea.compact {
  height: auto;
}
textarea.full {
  display: block;
}

textarea + .text-inline-help {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
textarea + .text-inline-help > div {
  display: none;
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  width: 360px;
  padding: 12px;
  margin-top: 2px;
  line-height: 150%;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: fadeIn 0.1s;
}
textarea + .text-inline-help i {
  cursor: pointer;
  color: var(--colour-neutral-600);
}
textarea + .text-inline-help i:hover {
  color: var(--colour-neutral);
}
textarea + .text-inline-help i:hover + div {
  display: block;
}

input.colour {
  padding-left: 30px;
}

.maxlength-help {
  margin-top: 4px;
  text-align: right;
  color: var(--colour-neutral);
  font-size: 13px;
  white-space: nowrap;
}

.colour-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -35px;
  border: 1px solid var(--colour-system-line);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.1s;
}

input.colour.compact + .colour-indicator {
  margin-top: -26px;
}

input.colour.solid {
  padding-left: 36px;
}

input.colour.solid + .colour-indicator {
  margin-top: -35px;
  margin-left: 12px;
}

input.colour.solid.compact + .colour-indicator {
  width: 16px;
  height: 16px;
  margin-top: -24px;
}

input.colour.solid.medium + .colour-indicator {
  margin-top: -30px;
}

.search-input,
.search-input-medium,
.search-input-small {
  position: relative;
  height: 50px;
}
.search-input > button,
.search-input-medium > button,
.search-input-small > button {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 50px;
  font-size: 20px;
  color: var(--colour-neutral);
  text-align: left;
  pointer-events: none;
}
.search-input > input,
.search-input-medium > input,
.search-input-small > input {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  padding-left: 30px;
  border-bottom-color: transparent;
}
.search-input > input:focus,
.search-input-medium > input:focus,
.search-input-small > input:focus {
  cursor: text;
}
.search-input > input:focus + button,
.search-input-medium > input:focus + button,
.search-input-small > input:focus + button {
  color: var(--colour-primary-dark-invert);
}
.search-input.search-input-solid > button,
.search-input-medium.search-input-solid > button,
.search-input-small.search-input-solid > button {
  height: 48px;
}
.search-input.search-input-solid > input,
.search-input-medium.search-input-solid > input,
.search-input-small.search-input-solid > input {
  height: 48px;
  padding-left: 42px;
}

.search-input-medium {
  height: 40px;
}
.search-input-medium > button {
  width: 24px;
  height: 40px;
  font-size: 16px;
}
.search-input-medium > input {
  height: 40px;
  padding-left: 24px;
  font-size: 14px;
}
.search-input-medium.search-input-solid > button {
  height: 38px;
}
.search-input-medium.search-input-solid > input {
  height: 38px;
  padding-left: 36px;
}

.search-input-small {
  height: 32px;
}
.search-input-small > button {
  width: 20px;
  height: 32px;
  font-size: 14px;
}
.search-input-small > input {
  height: 32px;
  padding-left: 20px;
  font-size: 14px;
  cursor: text;
}
.search-input-small.search-input-solid > button {
  height: 30px;
}
.search-input-small.search-input-solid > input {
  height: 30px;
  padding-left: 32px;
}

.search-input-solid {
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  transition: all 0.1s;
}
.search-input-solid:focus-within {
  border-color: var(--colour-input-border-hover);
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.search-input-solid > button {
  left: 12px;
}
.search-input-solid > input {
  border: none;
}

.copy-input,
.copy-input-medium,
.copy-input-large {
  position: relative;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
}
.copy-input:focus-within,
.copy-input-medium:focus-within,
.copy-input-large:focus-within {
  border-color: var(--colour-primary);
}
.copy-input > div,
.copy-input-medium > div,
.copy-input-large > div {
  margin: 0 90px 0 0;
}
.copy-input > div input,
.copy-input-medium > div input,
.copy-input-large > div input {
  height: 44px;
  padding: 0 10px;
  border: none;
}
.copy-input button.medium,
.copy-input-medium button.medium,
.copy-input-large button.medium {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 90px;
  border-radius: 8px;
}
@media (max-width: 800px) {
  .copy-input button.medium,
  .copy-input-medium button.medium,
  .copy-input-large button.medium {
    width: 74px;
  }
}

.copy-input-medium > div {
  margin: 0 40px 0 0;
}
.copy-input-medium button.medium {
  top: 0;
  right: 0;
}

.copy-input-large .protocol {
  position: absolute;
  left: 0;
  width: 68px;
  height: 44px;
  line-height: 44px;
  padding-left: 12px;
  color: var(--colour-neutral);
  font-size: 16px;
}
.copy-input-large > div {
  margin: 0 140px 0 68px;
}
.copy-input-large > div input {
  padding-left: 0;
}
.copy-input-large button.medium {
  width: 140px;
}

.number-input {
  position: relative;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  transition: all 0.1s;
}
.number-input:hover, button.number-input.danger.active, button.number-input.info.active, button.number-input.success.active, .number-input:focus-within {
  border-color: var(--colour-input-border-hover);
}
.number-input:focus-within {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.number-input input {
  width: calc(100% - 64px);
  height: 32px;
  padding: 0 10px;
  border: none;
  font-size: 14px;
}
.number-input button {
  position: absolute;
  top: 0;
  right: 32px;
  width: 32px;
  height: 32px;
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral);
  border-left: 1px solid var(--colour-input-border);
  cursor: pointer;
}
.number-input button:last-child {
  right: 0;
  border-radius: 0 8px 8px 0;
}
.number-input button:disabled, .number-input button.disabled {
  color: var(--colour-neutral-300);
  cursor: not-allowed;
}
.number-input button:disabled:hover, .number-input button.danger.active:disabled, .number-input button.info.active:disabled, .number-input button.success.active:disabled, .number-input button.disabled:hover, .number-input button.disabled.danger.active, .number-input button.disabled.info.active, .number-input button.disabled.success.active {
  background-color: var(--colour-neutral-50);
}

.dropdown-input, .dropdown-input-medium {
  position: relative;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  transition: all 0.1s;
}
.dropdown-input:hover, button.dropdown-input.danger.active, button.dropdown-input.info.active, button.dropdown-input.success.active, .dropdown-input-medium:hover, button.dropdown-input-medium.danger.active, button.dropdown-input-medium.info.active, button.dropdown-input-medium.success.active, .dropdown-input:focus-within, .dropdown-input-medium:focus-within {
  border-color: var(--colour-input-border-hover);
}
.dropdown-input:focus-within, .dropdown-input-medium:focus-within {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.dropdown-input input, .dropdown-input-medium input {
  width: calc(100% - 32px);
  height: 32px;
  padding: 0 10px;
  border: none;
  font-size: 14px;
}
.dropdown-input .button-dropdown, .dropdown-input-medium .button-dropdown {
  position: absolute;
  top: 0;
  right: 0;
}
.dropdown-input .button-dropdown > button, .dropdown-input-medium .button-dropdown > button {
  width: 32px;
  height: 32px;
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral);
  border-left: 1px solid var(--colour-input-border);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
}
.dropdown-input .button-dropdown > button:disabled, .dropdown-input-medium .button-dropdown > button:disabled, .dropdown-input .button-dropdown > button.disabled, .dropdown-input-medium .button-dropdown > button.disabled {
  color: var(--colour-neutral-300);
  cursor: not-allowed;
}
.dropdown-input .button-dropdown > button:disabled:hover, .dropdown-input .button-dropdown > button.danger.active:disabled, .dropdown-input .button-dropdown > button.info.active:disabled, .dropdown-input .button-dropdown > button.success.active:disabled, .dropdown-input-medium .button-dropdown > button:disabled:hover, .dropdown-input-medium .button-dropdown > button.danger.active:disabled, .dropdown-input-medium .button-dropdown > button.info.active:disabled, .dropdown-input-medium .button-dropdown > button.success.active:disabled, .dropdown-input .button-dropdown > button.disabled:hover, .dropdown-input .button-dropdown > button.disabled.danger.active, .dropdown-input .button-dropdown > button.disabled.info.active, .dropdown-input .button-dropdown > button.disabled.success.active, .dropdown-input-medium .button-dropdown > button.disabled:hover, .dropdown-input-medium .button-dropdown > button.disabled.danger.active, .dropdown-input-medium .button-dropdown > button.disabled.info.active, .dropdown-input-medium .button-dropdown > button.disabled.success.active {
  background-color: var(--colour-neutral-50);
}

.dropdown-input-medium input {
  height: 40px;
}
.dropdown-input-medium .button-dropdown > button {
  width: 40px;
  height: 40px;
}

.comment-inline-edit {
  position: relative;
  padding: 0 0 48px 0;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
.comment-inline-edit:focus-within {
  border-color: var(--colour-primary);
}
.comment-inline-edit .comment {
  overflow: auto;
  height: 200px;
  padding: 12px;
  outline: none;
}
.comment-inline-edit .comment .at-name {
  padding: 0 2px;
  color: var(--colour-primary);
  border-radius: 2px;
}
.comment-inline-edit .emoji-launcher {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  text-align: center;
  color: var(--colour-neutral);
  font-size: 15px;
  cursor: pointer;
}
.comment-inline-edit .emoji-launcher:hover, .comment-inline-edit button.emoji-launcher.danger.active, .comment-inline-edit button.emoji-launcher.info.active, .comment-inline-edit button.emoji-launcher.success.active {
  color: var(--colour-primary);
  background-color: var(--colour-neutral-10);
}
.comment-inline-edit .emoji-selector {
  left: 8px;
  top: 100%;
  margin-top: -4px;
  animation: dropdown 0.2s;
}

.input-domain, .input-domain-small {
  position: relative;
  display: grid;
  grid-template-columns: 66px auto;
  height: 40px;
  line-height: 38px;
  border: 1px solid var(--colour-input-border);
  background-color: var(--colour-input-bg);
  border-radius: 8px;
  transition: all 0.1s;
}
.input-domain:focus-within, .input-domain-small:focus-within {
  border-color: var(--colour-input-border-hover);
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.input-domain:before, .input-domain-small:before {
  content: "https://";
  width: 66px;
  height: 100%;
  padding: 0 0 0 12px;
  border-radius: 8px 0 0 8px;
  color: var(--colour-neutral);
  font-size: 14px;
}
.input-domain > input, .input-domain-small > input {
  height: 100%;
  padding: 0 12px 0 0;
  border: none;
  font-size: 14px;
}
.input-domain .status-check, .input-domain-small .status-check {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  border-radius: 8px;
  text-align: center;
  background-color: var(--colour-system-surface);
}
.input-domain.disabled, .disabled.input-domain-small {
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral-400);
  border-color: transparent;
}

.input-domain-small {
  height: 32px;
  line-height: 30px;
}
.input-domain-small:before,
.input-domain-small > input {
  font-size: 13px;
}
.input-domain-small .status-check {
  width: 32px;
}

.input-subdomain {
  position: relative;
  height: 40px;
  line-height: 38px;
  padding: 0 12px;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  transition: all 0.1s;
}
.input-subdomain:hover, button.input-subdomain.danger.active, button.input-subdomain.info.active, button.input-subdomain.success.active, .input-subdomain:focus-within {
  border-color: var(--colour-input-border-hover);
}
.input-subdomain:focus-within {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.input-subdomain > div {
  display: flex;
}
.input-subdomain .url-validation {
  position: absolute;
  left: 12px;
  font-size: 12px;
}
.input-subdomain .subdomain {
  width: 100%;
  margin-left: 20px;
}
.input-subdomain .subdomain input {
  display: block;
  width: 100%;
  height: 38px;
  border: none;
  color: var(--colour-system-text);
  text-align: right;
  font-size: 14px;
  font-weight: 500;
}
.input-subdomain .host-name {
  color: var(--colour-neutral);
  pointer-events: none;
}
.input-subdomain > button {
  position: absolute;
  top: 4px;
  right: 4px;
}

.input-icon, .input-icon-small {
  position: relative;
  height: 40px;
  line-height: 38px;
}
.input-icon > svg, .input-icon-small > svg,
.input-icon > img,
.input-icon-small > img,
.input-icon > .icon,
.input-icon-small > .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 24px;
  top: 8px;
  left: 8px;
  text-align: center;
}
.input-icon > input, .input-icon-small > input {
  height: 100%;
  padding: 0 12px 0 40px;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.1s;
}
.input-icon > input:focus, .input-icon-small > input:focus {
  border-color: var(--colour-input-border-hover);
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.input-icon > input:disabled, .input-icon-small > input:disabled {
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral-400);
  border-color: transparent;
}

.input-icon-small {
  height: 32px;
  line-height: 30px;
}
.input-icon-small > svg,
.input-icon-small > img {
  width: 16px;
  height: 16px;
  top: 8px;
  left: 8px;
}
.input-icon-small > input {
  padding: 0 12px 0 32px;
}

.code-input {
  display: grid;
  grid-column-gap: 10px;
}
.code-input input {
  border: 2px solid var(--colour-neutral-200);
  border-radius: 8px;
  background-color: var(--colour-input-bg);
  padding: 0;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.code-input input:focus {
  border-color: var(--colour-input-border-hover);
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
.code-input.code-input-6 {
  grid-template-columns: repeat(6, 1fr);
}
.code-input.code-input-6 input {
  height: 60px;
  font-size: 24px;
}
.code-input.code-input-6-small input {
  height: 40px;
  font-size: 18px;
}
.code-input.code-input-6-large input {
  height: 80px;
  font-size: 42px;
}
@media (max-width: 800px) {
  .code-input.code-input-6-large input {
    height: 40px;
    font-size: 32px;
  }
}

button {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: none;
  user-select: none;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button.primary, button.secondary, button.tertiary, button.tertiary-text, button.shiny, button.success, button.warning, button.info, button.danger, button.white, button.text, button.text-invert, button.text-link, button.text-info, button.text-action {
  position: relative;
  height: 45px;
  padding: 0 24px;
  min-width: 100px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--colour-system-text-inverse);
  border: 1px solid transparent;
  transition: all 0.2s;
}
button.primary.full, button.secondary.full, button.tertiary.full, button.tertiary-text.full, button.shiny.full, button.success.full, button.warning.full, button.info.full, button.danger.full, button.white.full, button.text.full, button.text-invert.full, button.text-link.full, button.text-info.full, button.text-action.full {
  width: 100%;
  margin-top: 10px;
}
button.primary.full:first-child, button.secondary.full:first-child, button.tertiary.full:first-child, button.tertiary-text.full:first-child, button.shiny.full:first-child, button.success.full:first-child, button.warning.full:first-child, button.info.full:first-child, button.danger.full:first-child, button.white.full:first-child, button.text.full:first-child, button.text-invert.full:first-child, button.text-link.full:first-child, button.text-info.full:first-child, button.text-action.full:first-child {
  margin-top: 0;
}
button.primary.loading, button.secondary.loading, button.tertiary.loading, button.tertiary-text.loading, button.shiny.loading, button.success.loading, button.warning.loading, button.info.loading, button.danger.loading, button.white.loading, button.text.loading, button.text-invert.loading, button.text-link.loading, button.text-info.loading, button.text-action.loading {
  color: transparent;
}
button.primary.loading img, button.secondary.loading img, button.tertiary.loading img, button.tertiary-text.loading img, button.shiny.loading img, button.success.loading img, button.warning.loading img, button.info.loading img, button.danger.loading img, button.white.loading img, button.text.loading img, button.text-invert.loading img, button.text-link.loading img, button.text-info.loading img, button.text-action.loading img {
  opacity: 0;
}
button.primary.loading:before, button.primary.loading:after, button.secondary.loading:before, button.secondary.loading:after, button.tertiary.loading:before, button.tertiary.loading:after, button.tertiary-text.loading:before, button.tertiary-text.loading:after, button.shiny.loading:before, button.shiny.loading:after, button.success.loading:before, button.success.loading:after, button.warning.loading:before, button.warning.loading:after, button.info.loading:before, button.info.loading:after, button.danger.loading:before, button.danger.loading:after, button.white.loading:before, button.white.loading:after, button.text.loading:before, button.text.loading:after, button.text-invert.loading:before, button.text-invert.loading:after, button.text-link.loading:before, button.text-link.loading:after, button.text-info.loading:before, button.text-info.loading:after, button.text-action.loading:before, button.text-action.loading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}
button.primary.loading.secondary:before, button.primary.loading.secondary:after, button.secondary.loading.secondary:before, button.secondary.loading.secondary:after, button.tertiary.loading.secondary:before, button.tertiary.loading.secondary:after, button.tertiary-text.loading.secondary:before, button.tertiary-text.loading.secondary:after, button.shiny.loading.secondary:before, button.shiny.loading.secondary:after, button.success.loading.secondary:before, button.success.loading.secondary:after, button.warning.loading.secondary:before, button.warning.loading.secondary:after, button.info.loading.secondary:before, button.info.loading.secondary:after, button.danger.loading.secondary:before, button.danger.loading.secondary:after, button.white.loading.secondary:before, button.white.loading.secondary:after, button.text.loading.secondary:before, button.text.loading.secondary:after, button.text-invert.loading.secondary:before, button.text-invert.loading.secondary:after, button.text-link.loading.secondary:before, button.text-link.loading.secondary:after, button.text-info.loading.secondary:before, button.text-info.loading.secondary:after, button.text-action.loading.secondary:before, button.text-action.loading.secondary:after {
  border: 2px solid var(--colour-system-text-inverse);
  border-bottom-color: transparent;
}
button.primary.loading.tertiary:before, button.primary.loading.tertiary:after, button.secondary.loading.tertiary:before, button.secondary.loading.tertiary:after, button.tertiary.loading.tertiary:before, button.tertiary.loading.tertiary:after, button.tertiary-text.loading.tertiary:before, button.tertiary-text.loading.tertiary:after, button.shiny.loading.tertiary:before, button.shiny.loading.tertiary:after, button.success.loading.tertiary:before, button.success.loading.tertiary:after, button.warning.loading.tertiary:before, button.warning.loading.tertiary:after, button.info.loading.tertiary:before, button.info.loading.tertiary:after, button.danger.loading.tertiary:before, button.danger.loading.tertiary:after, button.white.loading.tertiary:before, button.white.loading.tertiary:after, button.text.loading.tertiary:before, button.text.loading.tertiary:after, button.text-invert.loading.tertiary:before, button.text-invert.loading.tertiary:after, button.text-link.loading.tertiary:before, button.text-link.loading.tertiary:after, button.text-info.loading.tertiary:before, button.text-info.loading.tertiary:after, button.text-action.loading.tertiary:before, button.text-action.loading.tertiary:after {
  border: 2px solid var(--colour-neutral);
  border-bottom-color: transparent;
}
button.primary.loading.tertiary-text:before, button.primary.loading.tertiary-text:after, button.secondary.loading.tertiary-text:before, button.secondary.loading.tertiary-text:after, button.tertiary.loading.tertiary-text:before, button.tertiary.loading.tertiary-text:after, button.tertiary-text.loading.tertiary-text:before, button.tertiary-text.loading.tertiary-text:after, button.shiny.loading.tertiary-text:before, button.shiny.loading.tertiary-text:after, button.success.loading.tertiary-text:before, button.success.loading.tertiary-text:after, button.warning.loading.tertiary-text:before, button.warning.loading.tertiary-text:after, button.info.loading.tertiary-text:before, button.info.loading.tertiary-text:after, button.danger.loading.tertiary-text:before, button.danger.loading.tertiary-text:after, button.white.loading.tertiary-text:before, button.white.loading.tertiary-text:after, button.text.loading.tertiary-text:before, button.text.loading.tertiary-text:after, button.text-invert.loading.tertiary-text:before, button.text-invert.loading.tertiary-text:after, button.text-link.loading.tertiary-text:before, button.text-link.loading.tertiary-text:after, button.text-info.loading.tertiary-text:before, button.text-info.loading.tertiary-text:after, button.text-action.loading.tertiary-text:before, button.text-action.loading.tertiary-text:after {
  border: 2px solid var(--colour-system-text);
  border-bottom-color: transparent;
}
button.primary.loading.primary-invert:before, button.primary.loading.primary-invert:after, button.secondary.loading.primary-invert:before, button.secondary.loading.primary-invert:after, button.tertiary.loading.primary-invert:before, button.tertiary.loading.primary-invert:after, button.tertiary-text.loading.primary-invert:before, button.tertiary-text.loading.primary-invert:after, button.shiny.loading.primary-invert:before, button.shiny.loading.primary-invert:after, button.success.loading.primary-invert:before, button.success.loading.primary-invert:after, button.warning.loading.primary-invert:before, button.warning.loading.primary-invert:after, button.info.loading.primary-invert:before, button.info.loading.primary-invert:after, button.danger.loading.primary-invert:before, button.danger.loading.primary-invert:after, button.white.loading.primary-invert:before, button.white.loading.primary-invert:after, button.text.loading.primary-invert:before, button.text.loading.primary-invert:after, button.text-invert.loading.primary-invert:before, button.text-invert.loading.primary-invert:after, button.text-link.loading.primary-invert:before, button.text-link.loading.primary-invert:after, button.text-info.loading.primary-invert:before, button.text-info.loading.primary-invert:after, button.text-action.loading.primary-invert:before, button.text-action.loading.primary-invert:after {
  border: 2px solid rgba(96, 64, 255, 0.36);
  border-bottom-color: transparent;
}
button.primary.loading.white-invert:before, button.primary.loading.white-invert:after, button.secondary.loading.white-invert:before, button.secondary.loading.white-invert:after, button.tertiary.loading.white-invert:before, button.tertiary.loading.white-invert:after, button.tertiary-text.loading.white-invert:before, button.tertiary-text.loading.white-invert:after, button.shiny.loading.white-invert:before, button.shiny.loading.white-invert:after, button.success.loading.white-invert:before, button.success.loading.white-invert:after, button.warning.loading.white-invert:before, button.warning.loading.white-invert:after, button.info.loading.white-invert:before, button.info.loading.white-invert:after, button.danger.loading.white-invert:before, button.danger.loading.white-invert:after, button.white.loading.white-invert:before, button.white.loading.white-invert:after, button.text.loading.white-invert:before, button.text.loading.white-invert:after, button.text-invert.loading.white-invert:before, button.text-invert.loading.white-invert:after, button.text-link.loading.white-invert:before, button.text-link.loading.white-invert:after, button.text-info.loading.white-invert:before, button.text-info.loading.white-invert:after, button.text-action.loading.white-invert:before, button.text-action.loading.white-invert:after {
  border: 2px solid rgba(96, 64, 255, 0.36);
  border-bottom-color: transparent;
}
button.primary.loading.text:before, button.primary.loading.text:after, button.secondary.loading.text:before, button.secondary.loading.text:after, button.tertiary.loading.text:before, button.tertiary.loading.text:after, button.tertiary-text.loading.text:before, button.tertiary-text.loading.text:after, button.shiny.loading.text:before, button.shiny.loading.text:after, button.success.loading.text:before, button.success.loading.text:after, button.warning.loading.text:before, button.warning.loading.text:after, button.info.loading.text:before, button.info.loading.text:after, button.danger.loading.text:before, button.danger.loading.text:after, button.white.loading.text:before, button.white.loading.text:after, button.text.loading.text:before, button.text.loading.text:after, button.text-invert.loading.text:before, button.text-invert.loading.text:after, button.text-link.loading.text:before, button.text-link.loading.text:after, button.text-info.loading.text:before, button.text-info.loading.text:after, button.text-action.loading.text:before, button.text-action.loading.text:after {
  border: 2px solid var(--colour-system-text);
  border-bottom-color: transparent;
}
button.primary.loading.text-info:before, button.primary.loading.text-info:after, button.secondary.loading.text-info:before, button.secondary.loading.text-info:after, button.tertiary.loading.text-info:before, button.tertiary.loading.text-info:after, button.tertiary-text.loading.text-info:before, button.tertiary-text.loading.text-info:after, button.shiny.loading.text-info:before, button.shiny.loading.text-info:after, button.success.loading.text-info:before, button.success.loading.text-info:after, button.warning.loading.text-info:before, button.warning.loading.text-info:after, button.info.loading.text-info:before, button.info.loading.text-info:after, button.danger.loading.text-info:before, button.danger.loading.text-info:after, button.white.loading.text-info:before, button.white.loading.text-info:after, button.text.loading.text-info:before, button.text.loading.text-info:after, button.text-invert.loading.text-info:before, button.text-invert.loading.text-info:after, button.text-link.loading.text-info:before, button.text-link.loading.text-info:after, button.text-info.loading.text-info:before, button.text-info.loading.text-info:after, button.text-action.loading.text-info:before, button.text-action.loading.text-info:after {
  border: 2px solid var(--colour-neutral);
  border-bottom-color: transparent;
}
button.primary.loading.small:before, button.primary.loading.small:after, button.secondary.loading.small:before, button.secondary.loading.small:after, button.tertiary.loading.small:before, button.tertiary.loading.small:after, button.tertiary-text.loading.small:before, button.tertiary-text.loading.small:after, button.shiny.loading.small:before, button.shiny.loading.small:after, button.success.loading.small:before, button.success.loading.small:after, button.warning.loading.small:before, button.warning.loading.small:after, button.info.loading.small:before, button.info.loading.small:after, button.danger.loading.small:before, button.danger.loading.small:after, button.white.loading.small:before, button.white.loading.small:after, button.text.loading.small:before, button.text.loading.small:after, button.text-invert.loading.small:before, button.text-invert.loading.small:after, button.text-link.loading.small:before, button.text-link.loading.small:after, button.text-info.loading.small:before, button.text-info.loading.small:after, button.text-action.loading.small:before, button.text-action.loading.small:after {
  width: 15px;
  height: 15px;
}
button.primary.disabled, button.primary.disabled:hover, button.primary:disabled, button.primary:disabled:hover, button.secondary.disabled, button.secondary.disabled:hover, button.secondary:disabled, button.secondary:disabled:hover, button.tertiary.disabled, button.tertiary.disabled:hover, button.tertiary:disabled, button.tertiary:disabled:hover, button.tertiary-text.disabled, button.tertiary-text.disabled:hover, button.tertiary-text:disabled, button.tertiary-text:disabled:hover, button.shiny.disabled, button.shiny.disabled:hover, button.shiny:disabled, button.shiny:disabled:hover, button.success.disabled, button.success.disabled:hover, button.success:disabled, button.success:disabled:hover, button.warning.disabled, button.warning.disabled:hover, button.warning:disabled, button.warning:disabled:hover, button.info.disabled, button.info.disabled:hover, button.info:disabled, button.info:disabled:hover, button.danger.disabled, button.danger.disabled:hover, button.danger:disabled, button.danger:disabled:hover, button.white.disabled, button.white.disabled:hover, button.white:disabled, button.white:disabled:hover, button.text.disabled, button.text.disabled:hover, button.text:disabled, button.text:disabled:hover, button.text-invert.disabled, button.text-invert.disabled:hover, button.text-invert:disabled, button.text-invert:disabled:hover, button.text-link.disabled, button.text-link.disabled:hover, button.text-link:disabled, button.text-link:disabled:hover, button.text-info.disabled, button.text-info.disabled:hover, button.text-info:disabled, button.text-info:disabled:hover, button.text-action.disabled, button.text-action.disabled:hover, button.text-action:disabled, button.text-action:disabled:hover {
  cursor: not-allowed;
  box-shadow: none;
}
button.primary.disabled:not(.loading):not(.text):not(.text-info), button.primary.disabled:not(.loading):not(.text):not(.text-info):hover, button.primary:disabled:not(.loading):not(.text):not(.text-info), button.primary:disabled:not(.loading):not(.text):not(.text-info):hover, button.secondary.disabled:not(.loading):not(.text):not(.text-info), button.secondary.disabled:not(.loading):not(.text):not(.text-info):hover, button.secondary:disabled:not(.loading):not(.text):not(.text-info), button.secondary:disabled:not(.loading):not(.text):not(.text-info):hover, button.tertiary.disabled:not(.loading):not(.text):not(.text-info), button.tertiary.disabled:not(.loading):not(.text):not(.text-info):hover, button.tertiary:disabled:not(.loading):not(.text):not(.text-info), button.tertiary:disabled:not(.loading):not(.text):not(.text-info):hover, button.tertiary-text.disabled:not(.loading):not(.text):not(.text-info), button.tertiary-text.disabled:not(.loading):not(.text):not(.text-info):hover, button.tertiary-text:disabled:not(.loading):not(.text):not(.text-info), button.tertiary-text:disabled:not(.loading):not(.text):not(.text-info):hover, button.shiny.disabled:not(.loading):not(.text):not(.text-info), button.shiny.disabled:not(.loading):not(.text):not(.text-info):hover, button.shiny:disabled:not(.loading):not(.text):not(.text-info), button.shiny:disabled:not(.loading):not(.text):not(.text-info):hover, button.success.disabled:not(.loading):not(.text):not(.text-info), button.success.disabled:not(.loading):not(.text):not(.text-info):hover, button.success:disabled:not(.loading):not(.text):not(.text-info), button.success:disabled:not(.loading):not(.text):not(.text-info):hover, button.warning.disabled:not(.loading):not(.text):not(.text-info), button.warning.disabled:not(.loading):not(.text):not(.text-info):hover, button.warning:disabled:not(.loading):not(.text):not(.text-info), button.warning:disabled:not(.loading):not(.text):not(.text-info):hover, button.info.disabled:not(.loading):not(.text):not(.text-info), button.info.disabled:not(.loading):not(.text):not(.text-info):hover, button.info:disabled:not(.loading):not(.text):not(.text-info), button.info:disabled:not(.loading):not(.text):not(.text-info):hover, button.danger.disabled:not(.loading):not(.text):not(.text-info), button.danger.disabled:not(.loading):not(.text):not(.text-info):hover, button.danger:disabled:not(.loading):not(.text):not(.text-info), button.danger:disabled:not(.loading):not(.text):not(.text-info):hover, button.white.disabled:not(.loading):not(.text):not(.text-info), button.white.disabled:not(.loading):not(.text):not(.text-info):hover, button.white:disabled:not(.loading):not(.text):not(.text-info), button.white:disabled:not(.loading):not(.text):not(.text-info):hover, button.text.disabled:not(.loading):not(.text):not(.text-info), button.text.disabled:not(.loading):not(.text):not(.text-info):hover, button.text:disabled:not(.loading):not(.text):not(.text-info), button.text:disabled:not(.loading):not(.text):not(.text-info):hover, button.text-invert.disabled:not(.loading):not(.text):not(.text-info), button.text-invert.disabled:not(.loading):not(.text):not(.text-info):hover, button.text-invert:disabled:not(.loading):not(.text):not(.text-info), button.text-invert:disabled:not(.loading):not(.text):not(.text-info):hover, button.text-link.disabled:not(.loading):not(.text):not(.text-info), button.text-link.disabled:not(.loading):not(.text):not(.text-info):hover, button.text-link:disabled:not(.loading):not(.text):not(.text-info), button.text-link:disabled:not(.loading):not(.text):not(.text-info):hover, button.text-info.disabled:not(.loading):not(.text):not(.text-info), button.text-info.disabled:not(.loading):not(.text):not(.text-info):hover, button.text-info:disabled:not(.loading):not(.text):not(.text-info), button.text-info:disabled:not(.loading):not(.text):not(.text-info):hover, button.text-action.disabled:not(.loading):not(.text):not(.text-info), button.text-action.disabled:not(.loading):not(.text):not(.text-info):hover, button.text-action:disabled:not(.loading):not(.text):not(.text-info), button.text-action:disabled:not(.loading):not(.text):not(.text-info):hover {
  background-color: var(--colour-button-bg-disabled);
  color: var(--colour-button-text-disabled);
}
button.primary {
  background-color: var(--colour-primary-600);
  color: var(--colour-button-primary-text);
}
button.primary:hover:not(:disabled), button.primary.danger.active:not(:disabled), button.primary.info.active:not(:disabled), button.primary.success.active:not(:disabled) {
  background-color: var(--colour-primary-700);
}
button.primary:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-primary-200);
}
button.primary:active:not(:disabled) {
  background-color: var(--colour-primary-800);
}
button.primary[data-theme=feedback] {
  background-color: var(--colour-feedback-600);
}
button.primary[data-theme=feedback]:hover:not(:disabled), button.primary[data-theme=feedback].danger.active:not(:disabled), button.primary[data-theme=feedback].info.active:not(:disabled), button.primary[data-theme=feedback].success.active:not(:disabled) {
  background-color: var(--colour-feedback-700);
}
button.primary[data-theme=feedback]:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-feedback-200);
}
button.primary[data-theme=feedback]:active:not(:disabled) {
  background-color: var(--colour-feedback-800);
}
button.primary[data-theme=survey] {
  background-color: var(--colour-survey-600);
}
button.primary[data-theme=survey]:hover:not(:disabled), button.primary[data-theme=survey].danger.active:not(:disabled), button.primary[data-theme=survey].info.active:not(:disabled), button.primary[data-theme=survey].success.active:not(:disabled) {
  background-color: var(--colour-survey-700);
}
button.primary[data-theme=survey]:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-survey-200);
}
button.primary[data-theme=survey]:active:not(:disabled) {
  background-color: var(--colour-survey-800);
}
button.secondary {
  background-color: var(--colour-button-secondary-bg);
  color: var(--colour-button-secondary-text);
}
button.secondary:hover:not(:disabled), button.secondary.danger.active:not(:disabled), button.secondary.info.active:not(:disabled), button.secondary.success.active:not(:disabled) {
  background-color: var(--colour-button-secondary-bg-hover);
}
button.secondary:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
button.secondary:active:not(:disabled) {
  background-color: var(--colour-button-secondary-bg-active);
}
button.tertiary {
  background-color: var(--colour-button-tertiary-bg);
  color: var(--colour-neutral-600);
  border-color: var(--colour-neutral-100);
}
button.tertiary:hover:not(:disabled):not(.nohover), button.tertiary.danger.active:not(:disabled):not(.nohover), button.tertiary.info.active:not(:disabled):not(.nohover), button.tertiary.success.active:not(:disabled):not(.nohover) {
  border-color: var(--colour-button-tertiary-border-hover);
}
button.tertiary:focus:not(:disabled):not(.nohover) {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
  border-color: var(--colour-button-tertiary-border-hover);
}
button.tertiary:active:not(:disabled):not(.nohover) {
  border-color: var(--colour-button-tertiary-border-hover);
}
button.warning {
  background-color: var(--colour-warning-600);
}
button.warning:hover:not(:disabled), button.warning.danger.active:not(:disabled), button.warning.info.active:not(:disabled), button.warning.success.active:not(:disabled) {
  background-color: var(--colour-warning-700);
}
button.warning:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-warning-200);
}
button.warning:active:not(:disabled) {
  background-color: var(--colour-warning-800);
}
button.tertiary-text {
  background-color: var(--colour-system-surface);
  color: var(--colour-system-text);
  border-color: var(--colour-neutral-100);
}
button.tertiary-text:hover:not(:disabled), button.tertiary-text.danger.active:not(:disabled), button.tertiary-text.info.active:not(:disabled), button.tertiary-text.success.active:not(:disabled) {
  background-color: var(--colour-neutral-10);
  border-color: var(--colour-input-border-hover);
}
button.tertiary-text:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-primary-200);
  border-color: var(--colour-input-border-hover);
}
button.tertiary-text:active:not(:disabled) {
  background-color: var(--colour-neutral-10);
  border-color: var(--colour-input-border-hover);
}
button.shiny {
  background: var(--gradient-shiny-bg);
  color: var(--colour-neutral-600);
  border-color: transparent;
}
button.shiny > span {
  display: block;
  background: var(--gradient-shiny-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  pointer-events: none;
}
button.shiny:focus:not(:disabled) {
  box-shadow: 0 0 0 4px var(--colour-primary-200);
  border-color: var(--colour-primary-600);
}
button.shiny:active:not(:disabled) {
  background-color: var(--colour-neutral-10);
  border-color: var(--colour-primary-600);
}
button.primary-invert {
  background-color: transparent;
  color: var(--colour-primary-dark-invert);
  box-shadow: none;
}
:root[data-colour-scheme=light] button.primary-invert {
  border: 1px solid var(--colour-primary-200);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) button.primary-invert {
    border: 1px solid var(--colour-primary-200);
  }
}
:root[data-colour-scheme=dark] button.primary-invert {
  border: 1px solid var(--colour-neutral-100);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) button.primary-invert {
    border: 1px solid var(--colour-neutral-100);
  }
}
button.primary-invert:hover:not(:disabled), button.primary-invert.danger.active:not(:disabled), button.primary-invert.info.active:not(:disabled), button.primary-invert.success.active:not(:disabled) {
  background-color: transparent;
}
:root[data-colour-scheme=light] button.primary-invert:hover:not(:disabled), :root[data-colour-scheme=light] button.primary-invert.danger.active:not(:disabled), :root[data-colour-scheme=light] button.primary-invert.info.active:not(:disabled), :root[data-colour-scheme=light] button.primary-invert.success.active:not(:disabled) {
  border-color: var(--colour-primary-600);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) button.primary-invert:hover:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.danger.active:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.info.active:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.success.active:not(:disabled) {
    border-color: var(--colour-primary-600);
  }
}
:root[data-colour-scheme=dark] button.primary-invert:hover:not(:disabled), :root[data-colour-scheme=dark] button.primary-invert.danger.active:not(:disabled), :root[data-colour-scheme=dark] button.primary-invert.info.active:not(:disabled), :root[data-colour-scheme=dark] button.primary-invert.success.active:not(:disabled) {
  border-color: var(--colour-neutral-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) button.primary-invert:hover:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.danger.active:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.info.active:not(:disabled), :root:not([data-colour-scheme]) button.primary-invert.success.active:not(:disabled) {
    border-color: var(--colour-neutral-600);
  }
}
button.success {
  background-color: var(--colour-success);
  box-shadow: 0 2px 6px rgba(0, 192, 128, 0.2);
}
button.success:hover:not(:disabled), button.success.active:not(:disabled) {
  background-color: #00744d;
}
button.success[readonly]:hover, button.success[readonly].active {
  background-color: var(--colour-success);
  cursor: default;
}
button.info {
  background-color: var(--colour-neutral);
  box-shadow: 0 2px 6px rgba(96, 128, 160, 0.2);
}
button.info:hover:not(:disabled), button.info.active:not(:disabled) {
  background-color: #435a70;
}
button.info[readonly]:hover, button.info[readonly].active {
  background-color: var(--colour-neutral);
  cursor: default;
}
button.info-invert-dotted {
  border-style: dashed;
}
button.danger {
  background-color: #FF4060;
  box-shadow: 0 2px 6px rgba(255, 64, 96, 0.2);
}
button.danger:hover:not(:disabled), button.danger.active:not(:disabled) {
  background-color: #f30029;
}
button.danger[readonly]:hover, button.danger[readonly].active {
  background-color: #FF4060;
  cursor: default;
}
button.white {
  color: var(--colour-system-text);
  background-color: var(--colour-system-surface);
}
button.white:hover:not(:disabled), button.white.success.active:not(:disabled), button.white.info.active:not(:disabled), button.white.danger.active:not(:disabled) {
  color: var(--colour-primary);
}
button.text-primary-small {
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-primary-dark-invert);
  cursor: pointer;
}
button.text-primary-small:hover:not(:disabled), button.text-primary-small.success.active:not(:disabled), button.text-primary-small.info.active:not(:disabled), button.text-primary-small.danger.active:not(:disabled) {
  color: var(--colour-primary-700-dark-invert);
}
button.text-primary-small:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button.text-primary-small > i {
  width: 32px;
}
button.text-info-small {
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-neutral);
  cursor: pointer;
}
button.text-info-small:hover:not(:disabled), button.text-info-small.success.active:not(:disabled), button.text-info-small.info.active:not(:disabled), button.text-info-small.danger.active:not(:disabled) {
  color: var(--colour-neutral-700);
}
button.text-info-small:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button.text-info-small > i {
  width: 32px;
}
button.text {
  color: var(--colour-system-text);
  box-shadow: none;
}
button.text:active {
  color: var(--colour-system-text);
  box-shadow: none;
}
button.text:hover:not(:disabled), button.text.success.active:not(:disabled), button.text.info.active:not(:disabled), button.text.danger.active:not(:disabled) {
  color: var(--colour-primary);
}
button.text-invert {
  color: var(--colour-system-text);
  box-shadow: none;
}
button.text-invert:active {
  color: var(--colour-system-text);
  box-shadow: none;
}
button.text-invert:hover:not(:disabled), button.text-invert.success.active:not(:disabled), button.text-invert.info.active:not(:disabled), button.text-invert.danger.active:not(:disabled) {
  background-color: rgba(96, 128, 160, 0.05);
}
button.text-link {
  color: var(--colour-primary-dark-invert);
  box-shadow: none;
}
:root[data-colour-scheme=dark] button.text-link {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) button.text-link {
    text-decoration: underline;
  }
}
button.text-link:active {
  color: var(--colour-primary-dark-invert);
  box-shadow: none;
}
button.text-link:hover:not(:disabled), button.text-link.success.active:not(:disabled), button.text-link.info.active:not(:disabled), button.text-link.danger.active:not(:disabled) {
  color: var(--colour-primary-dark-invert);
  text-decoration: underline;
}
:root[data-colour-scheme=dark] button.text-link:hover:not(:disabled), :root[data-colour-scheme=dark] button.text-link.success.active:not(:disabled), :root[data-colour-scheme=dark] button.text-link.info.active:not(:disabled), :root[data-colour-scheme=dark] button.text-link.danger.active:not(:disabled) {
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) button.text-link:hover:not(:disabled), :root:not([data-colour-scheme]) button.text-link.success.active:not(:disabled), :root:not([data-colour-scheme]) button.text-link.info.active:not(:disabled), :root:not([data-colour-scheme]) button.text-link.danger.active:not(:disabled) {
    text-decoration: underline;
  }
}
button.text-info {
  color: var(--colour-neutral);
  box-shadow: none;
}
button.text-info:active {
  color: var(--colour-primary);
  box-shadow: none;
  opacity: 1;
}
button.text-info:hover:not(:disabled), button.text-info.success.active:not(:disabled), button.text-info.info.active:not(:disabled), button.text-info.danger.active:not(:disabled) {
  color: var(--colour-input-border-hover);
}
button.text-action {
  background-color: var(--colour-system-surface-2);
  color: var(--colour-neutral);
}
button.text-action:hover:not(:disabled), button.text-action.success.active:not(:disabled), button.text-action.info.active:not(:disabled), button.text-action.danger.active:not(:disabled) {
  color: var(--colour-primary);
}
button.text-badge {
  background-color: var(--colour-neutral-50);
  border-radius: 4px;
  color: var(--colour-system-text);
}
button.text-badge:hover, button.text-badge.success.active, button.text-badge.info.active, button.text-badge.danger.active, button.text-badge:active {
  color: var(--colour-primary);
}
button.text-badge.tiny, button.text-badge.small, button.text-badge.medium {
  border-radius: 4px;
}
button.medium {
  min-width: 0;
  height: 40px;
  padding: 0 20px 1px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}
button.small-medium {
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
button.small {
  min-width: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
button.tiny {
  min-width: 0;
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
button.min {
  min-width: 80px;
}
button.solid-white {
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  border: 1px solid var(--colour-input-border);
  cursor: pointer;
}
button.solid-white:hover, button.solid-white.success.active, button.solid-white.info.active, button.solid-white.danger.active {
  border-color: var(--colour-input-border-hover);
}
button.solid-white.selected {
  border-color: var(--colour-input-border-hover);
}
button.round {
  width: 45px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
}
button.round.medium {
  width: 40px;
}
button.round.small {
  width: 32px;
}
button.round.tiny {
  width: 24px;
}
button.square {
  border-radius: 8px;
}
button.fluid {
  width: 100%;
}

button.inline-add {
  padding: 3px 6px;
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
}
button.inline-add:hover, button.inline-add.success.active, button.inline-add.info.active, button.inline-add.danger.active {
  background-color: var(--colour-primary-700);
}

button.solid {
  position: relative;
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  color: var(--colour-system-text);
  cursor: pointer;
}
button.solid > i {
  color: var(--colour-neutral);
}
button.solid:hover, button.solid.success.active, button.solid.info.active, button.solid.danger.active {
  border-color: var(--colour-primary);
}
button.solid:hover > i, button.solid.success.active > i, button.solid.info.active > i, button.solid.danger.active > i {
  color: var(--colour-primary);
}

button.status-btn,
button.status-dropdown {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 32px;
  padding: 0 16px 0 16px;
  border-radius: 20px;
  color: var(--colour-system-text);
  text-align: left;
  font-size: 13px;
  transition: all 0.1s;
}
button.status-btn:before,
button.status-dropdown:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  pointer-events: none;
}
button.status-btn.status-btn-success, button.status-btn.status-dropdown-success,
button.status-dropdown.status-btn-success,
button.status-dropdown.status-dropdown-success {
  background-color: var(--colour-status-success-bg);
}
button.status-btn.status-btn-success:before, button.status-btn.status-dropdown-success:before,
button.status-dropdown.status-btn-success:before,
button.status-dropdown.status-dropdown-success:before {
  background-color: var(--colour-success);
}
button.status-btn.status-btn-attention, button.status-btn.status-dropdown-attention,
button.status-dropdown.status-btn-attention,
button.status-dropdown.status-dropdown-attention {
  background-color: var(--colour-status-attention-bg);
}
button.status-btn.status-btn-attention:before, button.status-btn.status-dropdown-attention:before,
button.status-dropdown.status-btn-attention:before,
button.status-dropdown.status-dropdown-attention:before {
  background-color: var(--colour-attention);
}
button.status-btn.status-btn-text,
button.status-dropdown.status-btn-text {
  padding: 0;
}
button.status-btn.status-btn-text:before,
button.status-dropdown.status-btn-text:before {
  background-color: var(--colour-neutral-300);
}
button.status-btn.status-dropdown-success:hover, button.status-btn.status-dropdown-success.success.active, button.status-btn.status-dropdown-success.info.active, button.status-btn.status-dropdown-success.danger.active,
button.status-dropdown.status-dropdown-success:hover,
button.status-dropdown.status-dropdown-success.success.active,
button.status-dropdown.status-dropdown-success.info.active,
button.status-dropdown.status-dropdown-success.danger.active {
  background-color: var(--colour-status-success-bg-hover);
}
button.status-btn.status-dropdown-attention:hover, button.status-btn.status-dropdown-attention.success.active, button.status-btn.status-dropdown-attention.info.active, button.status-btn.status-dropdown-attention.danger.active,
button.status-dropdown.status-dropdown-attention:hover,
button.status-dropdown.status-dropdown-attention.success.active,
button.status-dropdown.status-dropdown-attention.info.active,
button.status-dropdown.status-dropdown-attention.danger.active {
  background-color: var(--colour-status-attention-bg-hover);
}
button.status-btn[data-size=small],
button.status-dropdown[data-size=small] {
  height: 24px;
  padding: 0 12px;
}
button.status-btn[data-size=small]:before,
button.status-dropdown[data-size=small]:before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  font-size: 12px;
}

button.status-dropdown {
  cursor: pointer;
}
button.status-dropdown:after {
  content: "";
  height: 32px;
  width: 12px;
  margin-left: 8px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(172, 189, 206)"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  background-position: 100% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}

button.dropdown-select {
  position: relative;
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 32px 0 10px;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-neutral-100);
  border-radius: 8px;
  color: var(--colour-system-text);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.1s;
}
button.dropdown-select.dropdown-select-width-auto {
  width: auto;
}
button.dropdown-select.dropdown-select-small {
  min-height: 24px;
  padding: 0 26px 0 8px;
}
button.dropdown-select.dropdown-select-secondary {
  background-color: var(--colour-neutral-1000);
  border-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
}
button.dropdown-select.dropdown-select-secondary:hover, button.dropdown-select.dropdown-select-secondary.success.active, button.dropdown-select.dropdown-select-secondary.info.active, button.dropdown-select.dropdown-select-secondary.danger.active {
  background-color: var(--colour-neutral-1000);
  border-color: var(--colour-neutral-1000);
}
button.dropdown-select.dropdown-select-invert {
  border-color: transparent;
  color: var(--colour-neutral);
  background-color: var(--colour-neutral-25);
}
button.dropdown-select.dropdown-select-text {
  border-color: transparent;
  color: var(--colour-neutral);
  background-color: transparent;
}
button.dropdown-select.dropdown-select-text-invert {
  border-color: transparent;
  color: var(--colour-neutral);
  background-color: transparent;
}
button.dropdown-select.dropdown-select-multiple {
  padding-top: 4px;
  padding-bottom: 4px;
}
button.dropdown-select:not(.dropdown-select-multiple) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
button.dropdown-select.dropdown-select-medium {
  min-height: 40px;
  font-size: 14px;
}
button.dropdown-select.dropdown-select-round {
  border-radius: 20px;
}
button.dropdown-select.dropdown-select-heading {
  padding-left: 0;
  font-weight: 600;
  border: none;
  box-shadow: none;
  font-size: 18px;
}
button.dropdown-select.dropdown-select-heading:hover, button.dropdown-select.dropdown-select-heading.success.active, button.dropdown-select.dropdown-select-heading.info.active, button.dropdown-select.dropdown-select-heading.danger.active {
  background-color: transparent;
}
button.dropdown-select.dropdown-select-heading:focus {
  box-shadow: none;
}
button.dropdown-select:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  width: 12px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(172, 189, 206)"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  background-position: 100% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}
button.dropdown-select:focus:not(:disabled):not(.dropdown-select-text-invert):not(.dropdown-select-secondary), button.dropdown-select:hover:not(:disabled):not(.dropdown-select-text-invert):not(.dropdown-select-secondary), button.dropdown-select.success.active:not(:disabled):not(.dropdown-select-text-invert):not(.dropdown-select-secondary), button.dropdown-select.info.active:not(:disabled):not(.dropdown-select-text-invert):not(.dropdown-select-secondary), button.dropdown-select.danger.active:not(:disabled):not(.dropdown-select-text-invert):not(.dropdown-select-secondary) {
  border-color: var(--colour-input-border-hover);
  background-color: var(--colour-neutral-10);
}
button.dropdown-select:focus:not(.dropdown-select-text-invert):not(.dropdown-select-secondary) {
  box-shadow: 0 0 0 4px var(--colour-input-border-focus);
}
button.dropdown-select:disabled:not(.dropdown-select-text-invert):not(.dropdown-select-secondary) {
  background-color: var(--colour-input-bg-disabled);
}
button.dropdown-select:disabled {
  color: var(--colour-input-text-disabled);
  cursor: not-allowed;
}
button.dropdown-select:disabled:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(198, 209, 221)"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}
button.dropdown-select .placeholder-text {
  color: var(--colour-system-text-placeholder);
}
button.dropdown-select .icon-img {
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
}
button.dropdown-select .icon-img.icon-img-round {
  border-radius: 50%;
}
button.dropdown-select .badge-btn .icon-img {
  width: 14px;
  height: 14px;
}

button.ellipsis {
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  font-size: 18px;
  cursor: pointer;
}
button.ellipsis:hover, button.ellipsis.success.active, button.ellipsis.info.active, button.ellipsis.danger.active {
  color: var(--colour-neutral-600-dark-invert);
}

button.btn-close, button.btn-close-tiny {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  font-size: 18px;
  color: var(--colour-neutral-300);
  cursor: pointer;
}
button.btn-close:hover, button.btn-close-tiny:hover, button.btn-close.success.active, button.success.active.btn-close-tiny, button.btn-close.info.active, button.info.active.btn-close-tiny, button.btn-close.danger.active, button.danger.active.btn-close-tiny {
  color: var(--colour-neutral);
}

button.btn-close-tiny {
  width: 24px;
  height: 24px;
  font-size: 14px;
}

.button-group {
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}
.button-group button {
  float: left;
  border-radius: 0;
}
.button-group button:first-child {
  border-radius: 8px 0 0 8px;
}
.button-group button:last-child {
  border-radius: 0 8px 8px 0;
}
.button-group button.active {
  box-shadow: 2px 0px 2px var(--colour-system-shadow-soft) inset, -2px 0px 2px var(--colour-system-shadow-soft) inset;
  cursor: default;
}
.button-group button.active.text {
  background-color: var(--colour-system-surface-2);
  box-shadow: none;
}
.button-group button.text:first-child, .button-group button.text:last-child {
  border-radius: 8px;
}

button.switch-off, button.switch-on {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.1s;
}
button.switch-off:focus:not(:disabled):not(.disabled), button.switch-on:focus:not(:disabled):not(.disabled) {
  box-shadow: 0 0 0 4px var(--colour-success-200);
}
button[theme=primary].switch-off:focus:not(:disabled):not(.disabled), button[theme=primary].switch-on:focus:not(:disabled):not(.disabled) {
  box-shadow: 0 0 0 4px var(--colour-primary-200);
}
button.small.switch-off, button.small.switch-on {
  width: 35px;
  height: 20px;
}
button.small.switch-off:before, button.small.switch-on:before {
  width: 16px;
  height: 16px;
  line-height: 18px;
}
button.tiny.switch-off, button.tiny.switch-on {
  width: 28px;
  height: 16px;
}
button.tiny.switch-off:before, button.tiny.switch-on:before {
  width: 12px;
  height: 12px;
  line-height: 14px;
}
button.disabled.switch-off, button.disabled.switch-on, button.switch-off:disabled, button.switch-on:disabled {
  opacity: 0.2;
}
button.switch-off:before, button.switch-on:before {
  content: "";
  position: absolute;
  top: 2px;
  width: 26px;
  height: 26px;
  line-height: 28px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: var(--shadow-1);
  transition: right 0.1s linear;
}
button.disabled.switch-off, button.disabled.switch-on, button.switch-off:disabled, button.switch-on:disabled {
  cursor: not-allowed;
}

button.switch-on {
  background-color: var(--colour-success);
}
button.switch-on[theme=primary] {
  background-color: var(--colour-primary);
}
button.switch-on:before {
  right: 2px;
}

button.switch-off {
  background-color: var(--colour-neutral-300);
}
button.switch-off.switch-always-on {
  background-color: var(--colour-success);
}
button.switch-off.switch-always-on[theme=primary] {
  background-color: var(--colour-primary);
}
button.switch-off:before {
  right: 22px;
}
button.switch-off.small:before {
  right: 17px;
}
button.switch-off.tiny:before {
  right: 14px;
}

button.account-plan-upgrade {
  margin-top: 100px;
}

button.ellipsis-v {
  position: relative;
  width: 24px;
  height: 24px;
}
button.ellipsis-v:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 3px;
  height: 3px;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--colour-neutral), 0 10px 0 var(--colour-neutral), 0 16px 0 var(--colour-neutral);
}
button.ellipsis-v:hover:after, button.ellipsis-v.success.active:after, button.ellipsis-v.info.active:after, button.ellipsis-v.danger.active:after {
  box-shadow: 0 4px 0 var(--colour-primary), 0 10px 0 var(--colour-primary), 0 16px 0 var(--colour-primary);
}
button.ellipsis-v.ellipsis-v-light:after {
  box-shadow: 0 4px 0 var(--colour-system-text-inverse), 0 10px 0 var(--colour-system-text-inverse), 0 16px 0 var(--colour-system-text-inverse);
}

.button-dropdown {
  display: inline-block;
  position: relative;
}
.button-dropdown.button-dropdown-full {
  display: block;
}
.button-dropdown.button-dropdown-full > div {
  width: 100%;
}
.button-dropdown.button-dropdown-full:not([data-append]) > div {
  max-width: none;
}
.button-dropdown.button-dropdown-full[data-trim=false] > div {
  min-width: 100%;
  width: auto;
}
.button-dropdown > button {
  cursor: pointer;
}
.button-dropdown > button * {
  pointer-events: none;
}
.button-dropdown > button.text {
  padding-left: 0;
  padding-right: 0;
}
.button-dropdown > button .badge-secondary,
.button-dropdown > button .badge-secondary-invert,
.button-dropdown > button .badge-primary-invert {
  margin: 2px 4px 2px 0;
}
.button-dropdown[data-pointer=true] > button button {
  pointer-events: initial;
}
.button-dropdown .dropdown-search {
  padding: 10px;
  border-bottom: 1px solid var(--colour-system-line);
}
.button-dropdown .dropdown-search input {
  border: none;
}

.button-dropdown > div {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  right: 0;
  min-width: 150px;
  max-width: 300px;
  margin: 10px 0 20px 0;
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}
.button-dropdown > div > div:not(.dropdown-search):not(.borderless) {
  padding: 8px;
  border-top: 1px solid var(--colour-neutral-100);
  white-space: nowrap;
}
.button-dropdown > div > div:not(.dropdown-search):not(.borderless).has-placeholder {
  padding-left: 38px;
}

.button-dropdown[data-append] > div {
  position: fixed;
}

.button-dropdown-small > div {
  min-width: 100px;
  max-width: 150px;
}

.button-dropdown-large > div {
  min-width: 200px;
}

.button-dropdown-xlarge > div {
  min-width: 300px;
}

.button-dropdown-auto > div {
  min-width: auto;
  max-width: none;
}

.button-dropdown-left > div {
  transform-origin: 0 0;
  left: 0;
  right: auto;
}

.button-dropdown-top-left > div {
  top: 0;
  left: 100%;
  right: auto;
  margin: 0;
  animation: dropdown-right 0.2s;
}

.button-dropdown-up > div {
  top: auto;
  bottom: 100%;
  margin: 0 0 10px 0;
  transform-origin: 100% 100%;
  animation: dropdown-up 0.2s;
}

.button-dropdown-up[data-append] > div {
  margin: -10px 0 0 0;
}

ul.dropdown {
  position: relative;
  display: block;
  max-height: 310px;
  overflow: auto;
  margin: 0;
  padding: 8px 4px;
  list-style: none;
  font-size: 13px;
  font-weight: 400;
  user-select: none;
}
ul.dropdown.dropdown-search-empty {
  height: 48px;
}
ul.dropdown.dropdown-search-empty:after {
  content: attr(data-empty);
  display: block;
  padding: 0 20px;
  margin-top: 8px;
  color: var(--colour-system-text-placeholder);
}
ul.dropdown.dropdown-short {
  max-height: 200px;
}
ul.dropdown.dropdown-medium {
  max-height: 400px;
}
ul.dropdown.dropdown-long {
  max-height: 500px;
}
ul.dropdown:last-child, ul.dropdown.last-child {
  padding-bottom: 8px;
}
ul.dropdown > li {
  position: relative;
  text-align: left;
  padding: 8px 32px 8px 20px;
  line-height: normal;
  border-radius: 4px;
  cursor: pointer;
  color: var(--colour-system-text);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul.dropdown > li.notrim {
  overflow: visible;
  white-space: nowrap;
  text-overflow: unset;
}
ul.dropdown > li:hover:not(.nohover):not(.plain):not(.disabled):not(.separator):not(.dropdown-title), ul.dropdown > li.active {
  background-color: var(--colour-neutral-25);
}
ul.dropdown > li:hover:not(.nohover):not(.plain):not(.disabled):not(.separator):not(.dropdown-title) .action-buttons, ul.dropdown > li.active .action-buttons {
  opacity: 1;
}
ul.dropdown > li.active {
  cursor: default;
}
ul.dropdown > li.active-pointer {
  cursor: pointer;
}
ul.dropdown > li.separator {
  overflow: visible;
  height: 1px;
  padding: 0;
  margin: 8px 0;
  background-color: var(--colour-system-line);
  cursor: default;
}
ul.dropdown > li.separator:before, ul.dropdown > li.separator:after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 1px;
  background-color: var(--colour-system-line);
}
ul.dropdown > li.separator:before {
  right: 100%;
}
ul.dropdown > li.separator:after {
  left: 100%;
}
ul.dropdown > li.disabled {
  cursor: not-allowed;
  color: var(--colour-system-text-placeholder);
}
ul.dropdown > li.disabled .desc-text {
  color: var(--colour-system-text-placeholder);
}
ul.dropdown > li.disabled > span,
ul.dropdown > li.disabled > i {
  opacity: 0.3;
}
ul.dropdown > li.danger {
  color: var(--colour-danger);
}
ul.dropdown > li.danger.disabled {
  color: var(--colour-system-text-placeholder);
}
ul.dropdown > li.plain {
  cursor: default;
  padding-top: 0;
  padding-bottom: 0;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--colour-neutral);
}
ul.dropdown > li.dropdown-title {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 20px;
  color: var(--colour-neutral);
  font-size: 12px;
  cursor: default;
  pointer-events: none;
}
ul.dropdown > li.dropdown-action {
  padding-right: 68px;
}
ul.dropdown > li[data-notification=true]:before {
  content: "";
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--colour-danger);
  pointer-events: none;
}
ul.dropdown > li .action-buttons {
  position: absolute;
  top: 50%;
  right: 12px;
  opacity: 0;
  margin-top: -12px;
}
ul.dropdown > li .action-buttons > button {
  width: 24px;
  height: 24px;
  color: var(--colour-system-text-inverse);
  cursor: pointer;
  border-radius: 8px;
  font-size: 12px;
  color: var(--colour-neutral);
}
ul.dropdown > li .action-buttons > button:hover, ul.dropdown > li .action-buttons > button.success.active, ul.dropdown > li .action-buttons > button.info.active, ul.dropdown > li .action-buttons > button.danger.active {
  color: var(--colour-primary);
}
ul.dropdown > li .action-buttons > button.text-danger:hover, ul.dropdown > li .action-buttons > button.text-danger.success.active, ul.dropdown > li .action-buttons > button.text-danger.info.active, ul.dropdown > li .action-buttons > button.text-danger.danger.active {
  color: var(--colour-danger);
}
ul.dropdown > li > i:not(.ignore) {
  width: 20px;
  color: var(--colour-primary);
}
ul.dropdown > li > i.info {
  color: var(--colour-neutral);
}
ul.dropdown > li > i.text-icon {
  color: var(--colour-neutral-300);
}
ul.dropdown > li > i.danger {
  color: var(--colour-primary);
}
ul.dropdown > li > .icon-placeholder {
  display: inline-block;
  width: 20px;
}
ul.dropdown > li .icon-img {
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
}
ul.dropdown > li .icon-img.icon-img-round {
  border-radius: 50%;
}
ul.dropdown > li > .user-img {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
ul.dropdown > li .desc-text {
  margin-top: 4px;
  color: var(--colour-neutral);
  white-space: normal;
}

ul.dropdown-select > li:not(.dropdown-title):not(.system) {
  padding-left: 42px;
}
ul.dropdown-select > li:not(.dropdown-title):not(.system).selected:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f00c";
  position: absolute;
  top: 10px;
  left: 20px;
  width: 20px;
  color: var(--colour-primary-600-dark-invert);
}
ul.dropdown-select > li.dropdown-title {
  margin-left: 22px;
}
ul.dropdown-select[data-theme=feedback] > li:not(.dropdown-title):not(.system).selected:before {
  color: var(--colour-feedback-600);
}
ul.dropdown-select[data-theme=survey] > li:not(.dropdown-title):not(.system).selected:before {
  color: var(--colour-feedback-survey);
}

ul.dropdown-user .user-24 {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}
ul.dropdown-user li {
  line-height: 24px;
}

.dropdown-box {
  display: none;
  position: absolute;
  z-index: 200;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}

.dropdown-box-up {
  display: none;
  position: absolute;
  z-index: 200;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown-up 0.2s;
}

.dropdown-box-right {
  display: none;
  position: absolute;
  z-index: 200;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown-right 0.2s;
}

.dropdown-search-empty-action {
  display: none;
}

.card {
  padding: 0;
  float: left;
  width: 380px;
  margin: 0 40px 40px 0;
}
@media (max-width: 800px) {
  .card {
    width: auto;
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.card .thumbnail {
  padding: 40px 40px 0 40px;
  text-align: center;
}
.card .thumbnail button.test {
  position: absolute;
  top: 20px;
  right: 20px;
}
.card .content {
  position: relative;
  padding: 30px 40px 40px 40px;
}
.card > .badge {
  position: absolute;
  right: 16px;
  top: 16px;
}
.card .action {
  position: relative;
  margin-right: 0;
  padding: 20px;
}
.card .action:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

.modal-fullscreen .card {
  background-color: rgba(96, 128, 160, 0.05);
}

.loader {
  position: relative;
}
.loader:before, .loader:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: auto;
  border: 2px solid rgba(96, 128, 160, 0.5);
  border-radius: 50%;
}
.loader:after {
  border-left-color: rgba(255, 255, 255, 0.8);
  animation: rotate 0.8s linear infinite;
}
.loader.loader-white:before {
  width: 72px;
  height: 72px;
}

.loader-small:before, .loader-small:after {
  width: 20px;
  height: 20px;
}
.loader-small.loader-white:before {
  width: 40px;
  height: 40px;
}
.loader-small.loader-white:after {
  border-width: 2px;
}

.loader-xsmall:before, .loader-xsmall:after {
  width: 16px;
  height: 16px;
}
.loader-xsmall.loader-white:before {
  width: 32px;
  height: 32px;
}
.loader-xsmall.loader-white:after {
  border-width: 2px;
}

.loader-medium:before, .loader-medium:after {
  width: 56px;
  height: 56px;
}

.loader-large:before, .loader-large:after {
  border-width: 4px;
  width: 80px;
  height: 80px;
}

.loader-primary:before {
  display: none;
}
.loader-primary:after {
  border-color: var(--colour-primary);
  border-left-color: transparent;
}

.loader-white:before {
  border: none;
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.loader-white:after {
  border-color: var(--colour-primary);
  border-left-color: #FFFFFF;
  border-width: 4px;
}

.loader-placeholder-large, .loader-placeholder-regular, .loader-placeholder-medium, .loader-placeholder-small, .loader-placeholder {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
}
.loader-placeholder-large:before, .loader-placeholder-regular:before, .loader-placeholder-medium:before, .loader-placeholder-small:before, .loader-placeholder:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  width: 500%;
  margin-left: -250%;
  background: var(--colour-loader-placeholder-bg);
  animation: placeholderAnimation 0.8s linear infinite;
  pointer-events: none;
}

.loader-placeholder {
  height: 18px;
}

.loader-placeholder-small {
  height: 14px;
}

.loader-placeholder-medium {
  height: 32px;
}

.loader-placeholder-regular {
  height: 40px;
}

.loader-placeholder-large {
  height: 73px;
}

@keyframes placeholderAnimation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }
  100% {
    transform: translate3d(30%, 0, 0);
  }
}
.progress-loader {
  display: none;
  position: absolute;
  z-index: 100;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--colour-primary);
  border-radius: 0 8px 8px 0;
  transition: all 0.8s linear;
  animation: fadeIn 0.1s linear;
}

form:not(.form-fluid) > div,
form:not(.form-fluid) div.row {
  position: relative;
  margin-bottom: 30px;
}
form:not(.form-fluid) > div > span,
form:not(.form-fluid) div.row > span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
}
form:not(.form-fluid) > div > span.helper,
form:not(.form-fluid) div.row > span.helper {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: all 0.2s;
  color: var(--colour-neutral);
}
form:not(.form-fluid) > div > span.helper.placeholder,
form:not(.form-fluid) div.row > span.helper.placeholder {
  top: 33px;
  font-size: 14px;
  color: var(--colour-neutral);
}
form:not(.form-fluid) > div > span.helper.placeholder.compact,
form:not(.form-fluid) div.row > span.helper.placeholder.compact {
  top: 24px;
}
form:not(.form-fluid) > div > span.helper.helper-textarea.placeholder,
form:not(.form-fluid) div.row > span.helper.helper-textarea.placeholder {
  margin-left: 10px;
}
form:not(.form-fluid) > div > span.helper.focus,
form:not(.form-fluid) div.row > span.helper.focus {
  color: var(--colour-primary-dark-invert);
}
form:not(.form-fluid) > div > span + input[type=email],
form:not(.form-fluid) > div > span + input[type=number],
form:not(.form-fluid) > div > span + input[type=password],
form:not(.form-fluid) > div > span + input[type=search],
form:not(.form-fluid) > div > span + input[type=tel],
form:not(.form-fluid) > div > span + input[type=text],
form:not(.form-fluid) > div > span + input[type=url],
form:not(.form-fluid) > div > span + input[type=color],
form:not(.form-fluid) > div > span + input[type=date],
form:not(.form-fluid) > div > span + input[type=datetime],
form:not(.form-fluid) > div > span + input[type=month],
form:not(.form-fluid) > div > span + select,
form:not(.form-fluid) > div > span + textarea,
form:not(.form-fluid) div.row > span + input[type=email],
form:not(.form-fluid) div.row > span + input[type=number],
form:not(.form-fluid) div.row > span + input[type=password],
form:not(.form-fluid) div.row > span + input[type=search],
form:not(.form-fluid) div.row > span + input[type=tel],
form:not(.form-fluid) div.row > span + input[type=text],
form:not(.form-fluid) div.row > span + input[type=url],
form:not(.form-fluid) div.row > span + input[type=color],
form:not(.form-fluid) div.row > span + input[type=date],
form:not(.form-fluid) div.row > span + input[type=datetime],
form:not(.form-fluid) div.row > span + input[type=month],
form:not(.form-fluid) div.row > span + select,
form:not(.form-fluid) div.row > span + textarea {
  margin-top: 20px;
}
form:not(.form-fluid) > div > a.inline,
form:not(.form-fluid) div.row > a.inline {
  position: absolute;
  right: 0;
  bottom: 20px;
  color: var(--colour-system-text);
}
form:not(.form-fluid) > div > button.inline,
form:not(.form-fluid) div.row > button.inline {
  position: absolute;
  right: 0;
  bottom: 10px;
}
form:not(.form-fluid) > div:last-child {
  margin-bottom: 0;
}

form:not(.form-fluid).compact > div,
form:not(.form-fluid).compact div.row {
  margin-bottom: 20px;
}
form:not(.form-fluid).compact > div > span.helper.placeholder,
form:not(.form-fluid).compact div.row > span.helper.placeholder {
  top: 23px;
  font-size: 14px;
}

.form-fluid .row {
  margin-bottom: 20px;
}
.form-fluid .row:last-child {
  margin-bottom: 0;
}
.form-fluid .row-medium {
  margin-bottom: 32px;
}
.form-fluid .row-medium:last-child {
  margin-bottom: 0;
}
.form-fluid .row-50 {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: 20px;
}
.form-fluid .row-50 > div:first-child {
  padding-right: 5px;
}
.form-fluid .row-50 > div:last-child {
  padding-left: 5px;
}
.form-fluid .row-33 {
  display: grid;
  grid-template-columns: 33.33% 33.34% 33.33%;
  margin-bottom: 20px;
}
.form-fluid .row-33 > div:first-child {
  padding-right: 5px;
}
.form-fluid .row-33 > div:last-child {
  padding-left: 5px;
}
.form-fluid .field-label {
  height: 18px;
  line-height: 18px;
  margin-bottom: 8px;
  font-weight: 500;
}
.form-fluid .field-label .fa-asterisk {
  font-size: 6px;
  vertical-align: middle;
  color: var(--colour-neutral);
}
.form-fluid textarea {
  display: block;
}

.option-child-tree {
  position: relative;
  margin: 8px 0 0 24px;
}
.option-child-tree:before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 10px;
  height: 10px;
  border-left: 1px dotted rgba(96, 128, 160, 0.4);
  border-bottom: 1px dotted rgba(96, 128, 160, 0.4);
}

.multiple-input {
  display: grid;
  grid-template-columns: 32px auto;
}
.multiple-input > div:first-child > button {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.multiple-input > div:first-child > button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.multiple-input:not(:last-child) {
  margin-bottom: 8px;
}

.animate-fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fadeOut {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate-rotate {
  animation-name: rotate;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate-zoomFadeIn {
  animation-name: zoomFadeIn;
}

@keyframes zoomFadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-loading {
  animation-name: loading;
}

@keyframes loading {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.animate-scale {
  animation-name: scale;
}

@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.animate-width {
  animation-name: width;
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.animate-translateDown {
  animation-name: translateDown;
}

@keyframes translateDown {
  from {
    opacity: 0;
    transform: translateY(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-translateUp {
  animation-name: translateUp;
}

@keyframes translateUp {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-modalOpen {
  animation-name: modalOpen;
}

@keyframes modalOpen {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
.animate-menuFlash {
  animation-name: menuFlash;
}

@keyframes menuFlash {
  0% {
    background-color: transparent;
  }
  20% {
    background-color: rgba(255, 255, 255, 0.1);
  }
  40% {
    background-color: transparent;
  }
  60% {
    background-color: rgba(255, 255, 255, 0.1);
  }
  80% {
    background-color: transparent;
  }
  100% {
    background-color: rgba(255, 255, 255, 0.1);
  }
}
@keyframes pin {
  50% {
    transform: scale(4);
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dropdown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdown-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdown-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes zoomInOut {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes uploadIcon {
  0% {
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(4px);
  }
}
@keyframes opacityTransformRest {
  100% {
    opacity: 1;
    transform: none;
  }
}
.ub-checkmark-svg, .ub-checkmark-outro {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  stroke-width: 2;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px var(--colour-success);
  animation: ub-checkmark-svg-fill 0.4s ease-in-out 0.4s forwards, ub-checkmark-svg-scale 0.3s ease-in-out 0.9s both;
}

.ub-checkmark-svg__circle, .ub-checkmark-outro__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--colour-success);
  fill: none;
  animation: ub-checkmark-svg-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.ub-checkmark-svg__check, .ub-checkmark-outro__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: ub-checkmark-svg-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.ub-checkmark-outro {
  animation: ub-checkmark-outro-fill 0.4s ease-in-out 0.4s forwards, ub-checkmark-svg-scale 0.3s ease-in-out 0.9s both;
}

@keyframes ub-checkmark-svg-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ub-checkmark-svg-scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes ub-checkmark-svg-fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px var(--colour-success);
  }
}
@keyframes ub-checkmark-outro-fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px var(--colour-success);
  }
}
@keyframes outro-icon-2 {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes newFeedbackPulse {
  0% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(96, 64, 255, 0.8);
  }
  50% {
    transform: scale3d(1.02, 1.02, 1.02);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(96, 64, 255, 0.8);
  }
  100% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  }
}
.assignee {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e6ec;
  background-repeat: no-repeat;
  background-size: cover;
  color: rgba(96, 128, 160, 0.6);
  text-align: center;
  font-weight: 700;
}

.assignee-small {
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.assignee-medium {
  width: 32px;
  height: 32px;
  line-height: 32px;
}

img.user {
  margin: 4px 24px 0 0;
  border-radius: 50%;
  box-shadow: 0 0 0px 1px var(--colour-system-line);
}

img.user-64, img.user-48, img.user-36, img.user-32, img.user-24, img.user-16 {
  border-radius: 50%;
  box-shadow: 0 0 0px 1px var(--colour-system-line);
}

img.user-16 {
  width: 16px;
  height: 16px;
}

img.user-24 {
  width: 24px;
  height: 24px;
}

img.user-32 {
  width: 32px;
  height: 32px;
}

img.user-36 {
  width: 36px;
  height: 36px;
}

img.user-48 {
  width: 48px;
  height: 48px;
}

img.user-64 {
  width: 64px;
  height: 64px;
}

div.user-img-64, div.user-img-48, div.user-img-32, div.user-img-24, div.user-img-20 {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  box-shadow: 0 0 0px 1px var(--colour-system-line);
}

div.user-img-20 {
  width: 20px;
  height: 20px;
}

div.user-img-24 {
  width: 24px;
  height: 24px;
}

div.user-img-32 {
  width: 32px;
  height: 32px;
}

div.user-img-48 {
  width: 48px;
  height: 48px;
}

div.user-img-64 {
  width: 64px;
  height: 64px;
}

div.user-24, div.user-32 {
  border: 1px solid var(--colour-system-line);
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral);
  font-size: 14px;
  cursor: default;
  user-select: none;
}

div.user-32 {
  width: 32px;
  height: 32px;
  line-height: 30px;
}

div.user-24 {
  width: 24px;
  height: 24px;
  line-height: 22px;
}

div.user-24-primary {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  font-size: 14px;
  cursor: default;
  user-select: none;
}

div.user-32-primary {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  font-size: 14px;
  cursor: default;
  user-select: none;
}

.user-image-upload {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  line-height: 24px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  color: var(--colour-system-text);
  text-align: center;
  font-size: 12px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.user-image-upload:hover, button.user-image-upload.success.active, button.user-image-upload.info.active, button.user-image-upload.danger.active {
  color: var(--colour-primary);
}

.user-image-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-1);
  color: var(--colour-system-text);
  font-size: 10px;
  z-index: 20;
}
.user-image-remove:hover, button.user-image-remove.success.active, button.user-image-remove.info.active, button.user-image-remove.danger.active {
  color: var(--colour-primary);
}

.user-profile-avatar {
  position: relative;
}
.user-profile-avatar > div {
  cursor: pointer;
  background-size: cover;
}
.user-profile-avatar > div:hover .user-image-upload {
  display: block;
}

.profile-settings-card-row .profile-settings-card {
  border: 1px solid var(--colour-system-line);
  border-radius: 12px;
  padding: 12px;
  background-color: var(--colour-system-surface);
}
.profile-settings-card-row .field-label {
  margin: 0;
}
.profile-settings-card-row button.small.primary {
  flex-shrink: 0;
}

.user-ui-theme-selector {
  cursor: pointer;
}
.user-ui-theme-selector img {
  height: 56px;
  border-radius: 8px;
}
.user-ui-theme-selector div {
  padding: 4px 8px;
}
.user-ui-theme-selector.selected img {
  box-shadow: 0 0 0px 1px var(--colour-input-border-hover), 0 0 0 4px var(--colour-input-border-focus);
}

.user-solid {
  background-color: var(--colour-system-surface);
}

.user-row {
  display: grid;
  grid-template-columns: 32px auto 100px;
  padding: 18px 36px;
}
@media (max-width: 800px) {
  .user-row {
    padding: 18px;
  }
}
.user-row .detail {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
}
.user-row .detail .name {
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.user-row .detail .name > span {
  margin-left: 5px;
}
.user-row .detail .last-login {
  margin-top: 4px;
  font-size: 13px;
  color: var(--colour-neutral);
}
.user-row .stats-container {
  display: flex;
  align-items: center;
  justify-content: end;
}
@media (max-width: 800px) {
  .user-row .stats-container {
    display: none;
  }
}
.user-row .stats-container a.stats {
  cursor: pointer;
}

span.project,
img.project {
  display: block;
  border: 2px solid var(--colour-system-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}

span.project {
  text-transform: uppercase;
  text-align: center;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary-600);
  font-size: 20px;
}

.project-settings-menu {
  padding: 32px 32px 0 32px;
}
.project-settings-menu .tab .tab-menu {
  margin-bottom: 0;
}

.project-settings-inner, .project-settings-inner-xlarge, .project-settings-inner-large {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 395px);
  padding: 24px 32px 32px 32px;
}
@media (max-width: 800px) {
  .project-settings-inner, .project-settings-inner-xlarge, .project-settings-inner-large {
    height: calc(100vh - 260px);
  }
}

.project-settings-inner-large {
  height: calc(100vh - 270px);
}
@media (max-width: 800px) {
  .project-settings-inner-large {
    height: calc(100vh - 155px);
  }
}

.project-settings-inner-xlarge {
  height: calc(100vh - 230px);
}
@media (max-width: 800px) {
  .project-settings-inner-xlarge {
    height: calc(100vh - 95px);
  }
}

.project-settings-save {
  padding: 32px;
  text-align: right;
  border-top: 1px solid var(--colour-system-line);
}

.project-logo-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 64px;
  height: 64px;
  text-align: center;
}
@media (max-width: 800px) {
  .project-logo-edit {
    margin: auto auto 12px auto;
  }
}
.project-logo-edit .logo-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  text-align: center;
  font-size: 10px;
  box-shadow: var(--shadow-1);
}
.project-logo-edit .letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--colour-primary-25);
  color: var(--colour-primary);
  font-size: 28px;
  font-weight: 500;
  border-radius: 8px;
}
.project-logo-edit img {
  display: block;
  border-radius: 8px;
}
.project-logo-edit a {
  position: absolute;
  top: 100%;
  left: 50%;
  right: 0;
  width: 120px;
  margin: 8px 0 0 -60px;
  color: var(--colour-primary-dark-invert);
  white-space: nowrap;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
}

.project-name-inline-edit {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 15px;
  font-weight: 500;
}
.project-name-inline-edit .project-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 24px;
  line-height: 24px;
  min-width: 100px;
  max-width: 300px;
  padding: 0 4px;
  margin-left: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.1s all;
}
.project-name-inline-edit .project-name:hover, .project-name-inline-edit button.project-name.success.active, .project-name-inline-edit button.project-name.info.active, .project-name-inline-edit button.project-name.danger.active {
  background-color: var(--colour-neutral-25);
}
.project-name-inline-edit .project-name:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--colour-primary), 0 0 0 4px var(--colour-primary-200);
  text-overflow: unset;
}

.project-logo-icon,
.project-logo-icon-tiny,
.project-logo-icon-small,
.project-logo-icon-large {
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.project-logo-icon-tiny {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}

.project-logo-icon-small {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.project-logo-icon-large {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
}

.project-type-icon,
.project-type-icon-tiny,
.project-type-icon-small,
.project-type-icon-large {
  width: 24px;
  height: 24px;
}
.project-type-icon:before,
.project-type-icon-tiny:before,
.project-type-icon-small:before,
.project-type-icon-large:before {
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  line-height: 24px;
  border-radius: 4px;
  color: var(--colour-on-accent);
  text-align: center;
  font-size: 13px;
}
.project-type-icon[data-val=feedback]:before,
.project-type-icon-tiny[data-val=feedback]:before,
.project-type-icon-small[data-val=feedback]:before,
.project-type-icon-large[data-val=feedback]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b4";
  background-color: var(--colour-feedback-600);
}
.project-type-icon[data-val=survey]:before,
.project-type-icon-tiny[data-val=survey]:before,
.project-type-icon-small[data-val=survey]:before,
.project-type-icon-large[data-val=survey]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f200";
  background-color: var(--colour-survey-600);
}

.project-type-icon-tiny {
  width: 14px;
  height: 14px;
}
.project-type-icon-tiny:before {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  line-height: 14px;
  font-size: 8px;
}

.project-type-icon-small {
  width: 20px;
  height: 20px;
}
.project-type-icon-small:before {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  line-height: 20px;
  font-size: 12px;
}

.project-type-icon-large {
  width: 32px;
  height: 32px;
}
.project-type-icon-large:before {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  line-height: 32px;
  font-size: 16px;
  border-radius: 8px;
}

.box-integration.connected:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--colour-success);
}
.box-integration.disabled:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--colour-warning);
}
.box-integration.testing .action {
  display: none;
}
.box-integration.testing:after {
  position: absolute;
  top: 26px;
  right: 30px;
  color: var(--colour-neutral);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f2f1";
  animation: rotate linear 2s infinite;
}
.box-integration .thumbnail {
  position: absolute;
  top: 0;
  left: 32px;
  bottom: 0;
  width: 36px;
  height: 36px;
  margin: auto;
}
.box-integration .thumbnail img {
  width: 100%;
  height: 100%;
}
@media (max-width: 800px) {
  .box-integration .thumbnail {
    left: 24px;
    width: 32px;
    height: 32px;
  }
}
.box-integration .content {
  margin: 0 32px 0 64px;
}
.box-integration .content h3 {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}
.box-integration .content h3 .badge-small {
  margin-left: 8px;
  font-weight: 600;
}
@media (max-width: 800px) {
  .box-integration .content {
    margin-left: 52px;
  }
}
.box-integration .action {
  position: absolute;
  top: 20px;
  right: 24px;
}
.box-integration .action > button {
  vertical-align: middle;
}

.widget-code {
  position: relative;
  max-width: 660px;
  margin: auto;
}
.widget-code .install-method {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 12px;
}
@media (max-width: 800px) {
  .widget-code .install-method {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 12px;
  }
}
.widget-code .user-selection > div {
  padding: 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  cursor: pointer;
}
.widget-code .user-selection > div.selected {
  border-color: var(--colour-primary-dark-invert);
  box-shadow: 0 0 0 1px var(--colour-primary-dark-invert);
  color: var(--colour-system-text);
  cursor: default;
}
.widget-code .user-selection > div:hover {
  border-color: var(--colour-primary-dark-invert);
}
.widget-code button.verify-installation {
  position: fixed;
  z-index: 100;
  top: 14px;
  right: 64px;
}
.widget-code > div {
  position: relative;
}
.widget-code .widget-install-method {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  cursor: pointer;
  transition: all 0.1s;
  margin-bottom: 16px;
}
.widget-code .widget-install-method img {
  display: block;
  height: 24px;
  margin: 0 12px 0 0;
}
.widget-code .widget-install-method span {
  font-weight: 500;
}
.widget-code .widget-install-method:hover, .widget-code button.widget-install-method.success.active, .widget-code button.widget-install-method.info.active, .widget-code button.widget-install-method.danger.active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-box-solid-hover-light-only);
}
:root[data-colour-scheme=dark] .widget-code .widget-install-method:hover, :root[data-colour-scheme=dark] .widget-code button.widget-install-method.success.active, :root[data-colour-scheme=dark] .widget-code button.widget-install-method.info.active, :root[data-colour-scheme=dark] .widget-code button.widget-install-method.danger.active {
  border-color: var(--colour-neutral-1000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .widget-code .widget-install-method:hover, :root:not([data-colour-scheme]) .widget-code button.widget-install-method.success.active, :root:not([data-colour-scheme]) .widget-code button.widget-install-method.info.active, :root:not([data-colour-scheme]) .widget-code button.widget-install-method.danger.active {
    border-color: var(--colour-neutral-1000);
  }
}
.widget-code .widget-install-method.active {
  border-color: var(--colour-primary);
  cursor: default;
}
.widget-code .widget-install-method[data-val=more] {
  border: none;
}
.widget-code .widget-install-method[data-val=more]:hover, .widget-code button.widget-install-method[data-val=more].success.active, .widget-code button.widget-install-method[data-val=more].info.active, .widget-code button.widget-install-method[data-val=more].danger.active {
  transform: none;
  box-shadow: none;
}
.widget-code .inline-copy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-code .inline-copy > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border-radius: 4px;
  text-decoration: none;
}
:root[data-colour-scheme=light] .widget-code .inline-copy > a {
  background-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .widget-code .inline-copy > a {
    background-color: var(--colour-neutral-1000);
    color: var(--colour-system-text-inverse);
  }
}
:root[data-colour-scheme=dark] .widget-code .inline-copy > a {
  background-color: var(--colour-neutral-10);
  color: var(--colour-system-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .widget-code .inline-copy > a {
    background-color: var(--colour-neutral-10);
    color: var(--colour-system-text);
  }
}
.widget-code .access-token {
  font-weight: 600;
  color: var(--colour-survey-400);
}
.widget-code .dropdown-project-select {
  position: absolute;
  z-index: 10;
  top: 8px;
  right: 8px;
}
.widget-code pre {
  scrollbar-width: none;
}

.modal-try-extension {
  width: 380px;
  padding: 24px 0 0 0;
  margin: auto;
  text-align: center;
  font-size: 15px;
}
.modal-try-extension button {
  width: 220px;
  margin-top: 12px;
}

.code-install-verify-domains {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 400px);
}

.browser-extension-container {
  position: relative;
}
.browser-extension-container button.code-copy {
  position: absolute;
  right: 12px;
  bottom: 13px;
}

.browser-extension-icons {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
  grid-column-gap: 12px;
}
@media (max-width: 800px) {
  .browser-extension-icons {
    display: block;
  }
}
.browser-extension-icons a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
  transition: all 0.1s;
}
@media (max-width: 800px) {
  .browser-extension-icons a {
    margin-bottom: 12px;
  }
  .browser-extension-icons a:last-child {
    margin-bottom: 0;
  }
}
.browser-extension-icons a.current {
  color: var(--colour-system-text);
}
.browser-extension-icons a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-box-solid-hover-light-only);
}
:root[data-colour-scheme=dark] .browser-extension-icons a:hover {
  border-color: var(--colour-neutral-1000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .browser-extension-icons a:hover {
    border-color: var(--colour-neutral-1000);
  }
}
.browser-extension-icons a img {
  height: 32px;
  margin-right: 8px;
}
.browser-extension-icons a .your-browser {
  color: var(--colour-neutral);
  font-size: 12px;
}

.account-upgrade-plan-select .account-plan-main {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 40px 95px 40px;
  background-color: var(--colour-system-surface);
}
@media screen and (max-width: 1025px) {
  .account-upgrade-plan-select .account-plan-main {
    padding: 30px 20px 95px 20px;
  }
}
.account-upgrade-plan-select .account-plan-container {
  width: 1520px;
  max-width: 100%;
  margin: auto;
}
.account-upgrade-plan-select .account-upgrade-continue {
  width: 240px;
}
.account-upgrade-plan-select .account-plan-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 32px;
}
@media screen and (max-width: 1025px) {
  .account-upgrade-plan-select .account-plan-grid-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan-grid-container {
    display: block;
  }
}
.account-upgrade-plan-select .account-plan-grid-container-small {
  grid-template-columns: 1fr 1fr 1fr;
}
.account-upgrade-plan-select .account-plan {
  overflow: hidden;
  position: relative;
  padding: 36px 48px;
  cursor: pointer;
  background-color: var(--colour-system-box-bg-dark-only);
  box-shadow: 0 0 0 1px var(--colour-system-line);
  border-radius: 16px;
  transition: all 0.1s;
}
.account-upgrade-plan-select .account-plan.account-plan-2024, .account-upgrade-plan-select .account-plan.account-plan-2025 {
  cursor: default;
}
.account-upgrade-plan-select .account-plan.account-plan-2025 {
  padding: 36px 32px;
}
@media screen and (max-width: 1025px) {
  .account-upgrade-plan-select .account-plan {
    padding: 24px 32px;
    font-size: 12px;
  }
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan {
    margin: 20px auto;
    font-size: 14px;
  }
}
.account-upgrade-plan-select .account-plan.account-plan-disabled:not(.account-plan-selected) {
  opacity: 0;
  pointer-events: none;
}
.account-upgrade-plan-select .account-plan .title {
  position: relative;
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
}
.account-upgrade-plan-select .account-plan .price {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 16px;
  line-height: 40px;
}
.account-upgrade-plan-select .account-plan .price .dollar {
  font-size: 38px;
  font-weight: 700;
}
.account-upgrade-plan-select .account-plan .price .number {
  margin: 0 4px 0 0;
  font-size: 38px;
  font-weight: 700;
  color: var(--colour-system-text);
}
@media screen and (max-width: 1025px) {
  .account-upgrade-plan-select .account-plan .price .number {
    font-size: 32px;
  }
}
.account-upgrade-plan-select .account-plan .discount {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  transform: rotate(45deg);
  font-weight: 700;
  color: var(--colour-success);
}
.account-upgrade-plan-select .account-plan .limit {
  margin-bottom: 10px;
}
.account-upgrade-plan-select .account-plan .limit.limit-main {
  font-size: 18px;
}
.account-upgrade-plan-select .account-plan .feature-main {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--colour-system-line);
}
.account-upgrade-plan-select .account-plan .feature-main .user-extra-cost {
  margin-left: 8px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.account-upgrade-plan-select .account-plan .feature-main .divider {
  height: 0;
  margin: 12px 0;
}
.account-upgrade-plan-select .account-plan .feature-main > div {
  height: 30px;
  line-height: 30px;
  position: relative;
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan .feature-main > div.sub {
  height: auto;
  line-height: normal;
  font-size: 13px;
  color: var(--colour-neutral);
}
.account-upgrade-plan-select .account-plan .feature-main > div .project-num > button {
  overflow: hidden;
  position: relative;
  width: 130px;
  padding: 6px 34px 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.account-upgrade-plan-select .account-plan .feature-main > div .project-num > button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  line-height: 28px;
  text-align: center;
  color: var(--colour-neutral);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f107";
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan .feature-main > div .project-num > button:hover, .account-upgrade-plan-select .account-plan .feature-main > div .project-num > button.success.active, .account-upgrade-plan-select .account-plan .feature-main > div .project-num > button.info.active, .account-upgrade-plan-select .account-plan .feature-main > div .project-num > button.danger.active {
  box-shadow: 0 0 0 1px var(--colour-primary);
}
.account-upgrade-plan-select .account-plan .feature-main > div .project-num > div {
  min-width: 0;
  left: 0;
}
.account-upgrade-plan-select .account-plan .feature-limit {
  margin-top: 24px;
  min-height: 120px;
}
.account-upgrade-plan-select .account-plan .feature-limit.feature-limit-short {
  min-height: 60px;
}
.account-upgrade-plan-select .account-plan .feature-limit > div {
  margin-bottom: 12px;
}
.account-upgrade-plan-select .account-plan .feature-limit .user-limit,
.account-upgrade-plan-select .account-plan .feature-limit .response-limit,
.account-upgrade-plan-select .account-plan .feature-limit .session-limit {
  display: inline-block;
  min-width: 28px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.account-upgrade-plan-select .account-plan .feature-limit .button-dropdown {
  margin: 0 auto;
}
.account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select {
  width: auto;
  border: none;
  padding-left: 0;
}
.account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select:hover, .account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select.success.active, .account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select.info.active, .account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select.danger.active, .account-upgrade-plan-select .account-plan .feature-limit .button-dropdown button.dropdown-select:focus {
  box-shadow: none;
  background-color: transparent;
}
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-add,
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-delete {
  width: 20px;
  height: 32px;
  color: var(--colour-neutral-300);
  cursor: pointer;
}
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-add:first-child,
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-delete:first-child {
  margin-left: 8px;
}
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-add:disabled,
.account-upgrade-plan-select .account-plan .feature-limit .user-limit-delete:disabled {
  color: var(--colour-neutral-100);
  cursor: default;
}
.account-upgrade-plan-select .account-plan .feature-select {
  margin: 24px auto;
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan .empty-placeholder {
    display: none;
  }
}
.account-upgrade-plan-select .account-plan .feature-key {
  padding-left: 6px;
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan .feature-key {
    display: none;
  }
}
.account-upgrade-plan-select .account-plan .feature-key ul {
  list-style: none;
  min-height: 300px;
  margin: 12px 0 0 0;
  padding: 0;
}
.account-upgrade-plan-select .account-plan .feature-key ul.short {
  min-height: auto;
}
.account-upgrade-plan-select .account-plan .feature-key ul.short li {
  color: var(--colour-system-text);
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan .feature-key ul.short {
  min-height: 80px;
}
.account-upgrade-plan-select .account-plan .feature-key ul.long {
  min-height: 300px;
}
.account-upgrade-plan-select .account-plan .feature-key ul li {
  position: relative;
  line-height: 26px;
  padding-left: 20px;
  color: var(--colour-neutral);
}
.account-upgrade-plan-select .account-plan .feature-key ul li:not(.empty):before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f058";
  position: absolute;
  left: 0;
  color: var(--colour-neutral-300);
}
.account-upgrade-plan-select .account-plan .feature-key ul li .badge-small {
  transform: translateY(-1px);
}
.account-upgrade-plan-select .account-plan .feature-compare {
  cursor: pointer;
  color: var(--colour-neutral);
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan .feature-compare:hover, .account-upgrade-plan-select .account-plan button.feature-compare.success.active, .account-upgrade-plan-select .account-plan button.feature-compare.info.active, .account-upgrade-plan-select .account-plan button.feature-compare.danger.active {
  color: var(--colour-primary-dark-invert);
}
.account-upgrade-plan-select .account-plan .feature-all {
  padding: 0 0 4px 0;
  font-weight: 600;
  text-align: center;
}
.account-upgrade-plan-select .account-plan .feature-include {
  margin-top: 16px;
  padding: 0 0 4px 16px;
  font-weight: 700;
}
.account-upgrade-plan-select .account-plan .feature {
  position: relative;
  min-height: 28px;
  line-height: 28px;
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan .feature.feature-item {
  padding-left: 28px;
  font-size: 13px;
}
.account-upgrade-plan-select .account-plan .feature.feature-item:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--colour-primary);
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan .feature-empty {
    display: none;
  }
}
.account-upgrade-plan-select .account-plan .button {
  margin-top: 20px;
}
.account-upgrade-plan-select .account-plan .checkmark {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.4);
  animation: zoomIn 0.1s;
}
.account-upgrade-plan-select .account-plan .checkmark svg {
  display: block;
  width: 12px;
  height: 12px;
  margin: 6px;
  fill: var(--colour-system-text-inverse);
}
.account-upgrade-plan-select .account-plan-selected {
  box-shadow: 0 0 0 1px var(--colour-primary-dark-invert), 0 0 0 6px var(--colour-primary-50);
}
.account-upgrade-plan-select .account-plan-selected .checkmark {
  display: block;
  background-color: var(--colour-primary-dark-invert);
}
.account-upgrade-plan-select .account-plan-selected:not(.account-plan-disabled):hover, .account-upgrade-plan-select button.account-plan-selected.success.active:not(.account-plan-disabled), .account-upgrade-plan-select button.account-plan-selected.info.active:not(.account-plan-disabled), .account-upgrade-plan-select button.account-plan-selected.danger.active:not(.account-plan-disabled) {
  box-shadow: 0 0 0 1px var(--colour-primary-dark-invert), 0 0 0 6px var(--colour-primary-50);
}
.account-upgrade-plan-select .account-plan-selected:not(.account-plan-disabled):hover .checkmark, .account-upgrade-plan-select button.account-plan-selected.success.active:not(.account-plan-disabled) .checkmark, .account-upgrade-plan-select button.account-plan-selected.info.active:not(.account-plan-disabled) .checkmark, .account-upgrade-plan-select button.account-plan-selected.danger.active:not(.account-plan-disabled) .checkmark {
  display: block;
  background-color: var(--colour-primary-dark-invert);
}
.account-upgrade-plan-select .account-plan-recommended:before {
  content: "Popular";
  width: 200px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  z-index: 20;
  text-align: center;
  top: 0;
  left: 0;
  font-size: 11px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary);
  font-weight: 500;
  transform: rotate(-45deg) translate(-64px, -47px);
}
.account-upgrade-plan-select .account-plan-myplan:before {
  content: "My Plan";
  width: 200px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  z-index: 20;
  text-align: center;
  top: 0;
  left: 0;
  font-size: 11px;
  color: var(--colour-system-text-inverse);
  background: linear-gradient(45deg, var(--colour-feedback-600) 0%, var(--colour-survey-600) 100%);
  font-weight: 500;
  transform: rotate(-45deg) translate(-64px, -47px);
}
:root[data-colour-scheme=dark] .account-upgrade-plan-select .account-plan-myplan:before {
  background: var(--colour-neutral-1000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .account-upgrade-plan-select .account-plan-myplan:before {
    background: var(--colour-neutral-1000);
  }
}
.account-upgrade-plan-select .account-plan-add-on {
  padding: 30px;
  cursor: pointer;
}
@media screen and (max-width: 1025px) {
  .account-upgrade-plan-select .account-plan-add-on {
    padding: 15px;
    font-size: 12px;
  }
}
.account-upgrade-plan-select .account-plan-add-on .add-on-icon {
  float: left;
  font-size: 24px;
  color: var(--colour-primary);
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan-add-on .add-on-icon {
    display: none;
  }
}
.account-upgrade-plan-select .account-plan-add-on .add-on-desc {
  margin: 0 0 0 48px;
  color: var(--colour-neutral);
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan-add-on .add-on-desc {
    margin: 0;
  }
}
.account-upgrade-plan-select .account-plan-add-on .add-on-title {
  margin: 4px 0 8px 0;
  font-weight: 700;
  color: var(--colour-system-text);
}
@media screen and (max-width: 720px) {
  .account-upgrade-plan-select .account-plan-add-on .add-on-title {
    margin-top: 0;
  }
}
.account-upgrade-plan-select .account-plan-add-on .selection {
  float: right;
  font-weight: 500;
}
.account-upgrade-plan-select .account-plan-add-on .selection input[type=checkbox] + label {
  color: var(--colour-system-text);
}
.account-upgrade-plan-select .account-plan-container-custom {
  width: 1400px;
}
.account-upgrade-plan-select .account-plan-container-custom .account-plan-grid-container {
  grid-template-columns: 20% 20% 20% 20% 20%;
}
.account-upgrade-plan-select .account-plan-container-custom .account-plan-grid-container-small {
  grid-template-columns: 25% 25% 25% 25%;
}

.account-upgrade-payment {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px;
}
@media screen and (max-width: 720px) {
  .account-upgrade-payment {
    padding: 20px;
  }
}
.account-upgrade-payment .go-back {
  position: fixed;
  top: 0;
  left: 24px;
  z-index: 100;
  line-height: 60px;
  color: var(--colour-neutral);
  font-weight: 500;
  text-decoration: none;
}
@media (max-width: 800px) {
  .account-upgrade-payment .go-back {
    display: none;
  }
}
.account-upgrade-payment .go-back:hover, .account-upgrade-payment button.go-back.success.active, .account-upgrade-payment button.go-back.info.active, .account-upgrade-payment button.go-back.danger.active {
  color: var(--colour-primary-dark-invert);
}
.account-upgrade-payment .account-payment-main {
  position: relative;
  width: 1000px;
  max-width: 100%;
  margin: auto;
}
.account-upgrade-payment .account-payment-main > div:first-child {
  width: 40%;
  float: right;
}
@media (max-width: 800px) {
  .account-upgrade-payment .account-payment-main > div:first-child {
    width: auto;
    float: none;
  }
}
.account-upgrade-payment .account-payment-main > div:last-child {
  width: 60%;
}
@media (max-width: 800px) {
  .account-upgrade-payment .account-payment-main > div:last-child {
    width: auto;
    margin-top: 12px;
  }
}
.account-upgrade-payment .account-payment-main-free > div,
.account-upgrade-payment .account-payment-main-free > div:first-child,
.account-upgrade-payment .account-payment-main-free > div:last-child {
  width: 60%;
  float: none;
  margin: auto;
}
.account-upgrade-payment .account-payment-main-free .account-upgrade-summary {
  margin-left: 0;
}
.account-upgrade-payment .account-upgrade-payment-form .cc-icons {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 20px;
  color: rgba(96, 128, 160, 0.6);
  pointer-events: none;
}
@media screen and (max-width: 720px) {
  .account-upgrade-payment .account-upgrade-payment-form .cc-icons {
    display: none;
  }
}
.account-upgrade-payment .account-upgrade-payment-form .cc-icons i.active {
  color: var(--colour-primary);
}
.account-upgrade-payment .account-upgrade-payment-form .account-payment-submit i {
  font-size: 20px;
}
.account-upgrade-payment .account-upgrade-options .plan-input {
  display: grid;
  grid-template-columns: 45% 55%;
  margin: 16px 0;
}
.account-upgrade-payment .account-upgrade-options .plan-input > span {
  line-height: 32px;
}
.account-upgrade-payment .account-upgrade-summary {
  margin-left: 24px;
}
@media (max-width: 800px) {
  .account-upgrade-payment .account-upgrade-summary {
    margin-left: 0;
  }
}
.account-upgrade-payment .account-upgrade-summary .price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.account-upgrade-payment .account-upgrade-summary .price-item > span:last-child {
  font-weight: 500;
}
.account-upgrade-payment .account-upgrade-summary .price-item .project-num {
  float: none;
  font-size: 12px;
}
.account-upgrade-payment .account-upgrade-summary .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.account-upgrade-payment .account-upgrade-summary .price-promo-code {
  text-transform: uppercase;
  font-size: 12px;
  text-align: right;
}
.account-upgrade-payment .feature-loss {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  line-height: 150%;
}
.account-upgrade-payment .feature-loss li {
  position: relative;
  padding: 0 0 0 18px;
}
.account-upgrade-payment .feature-loss li:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f00d";
  position: absolute;
  left: 0;
  color: var(--colour-neutral-300);
}

.account-submit-bar {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 0;
  border-top: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  text-align: center;
}
.account-submit-bar .account-change-plan {
  width: 220px;
}
.account-submit-bar .account-change-plan i {
  font-size: 20px;
}

.account-plan-billing-cycle-selection {
  margin-bottom: 32px;
  text-align: center;
}

.billing-cycle-selection {
  position: relative;
}
.billing-cycle-selection .yearly-discount {
  position: absolute;
  left: 100%;
  margin-left: 4px;
  font-size: 12px;
  color: var(--colour-neutral-100);
  font-weight: 700;
}
.billing-cycle-selection span.active .yearly-discount {
  color: var(--colour-dolphin-600);
}

.workflow-edit-dialog .container-wrapper {
  position: relative;
  padding-left: 32px;
}
.workflow-edit-dialog .container-wrapper .container {
  width: 448px;
}
.workflow-edit-dialog .container {
  position: relative;
  display: flex;
  align-items: center;
  width: 480px;
  margin-bottom: 12px;
}
.workflow-edit-dialog .container .content {
  position: relative;
  flex: 1 1 auto;
  border: 1px solid var(--colour-neutral-100);
  border-radius: 8px;
}
.workflow-edit-dialog .container .content > input[type=text] {
  padding-left: 12px;
  border: none;
}
.workflow-edit-dialog .container .content:focus-within {
  border-color: var(--colour-input-border-hover);
}
.workflow-edit-dialog .container.removed {
  display: none;
}
.workflow-edit-dialog .container .colour-edit {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
.workflow-edit-dialog .container .colour-edit .colour-indicator {
  margin-top: 0;
  width: 16px;
  height: 16px;
}
.workflow-edit-dialog .container .colour-edit input {
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  padding: 0;
  margin-top: 4px;
  pointer-events: none;
}
.workflow-edit-dialog .container .remove {
  position: absolute;
  top: 0;
  left: -32px;
  color: var(--colour-neutral-300);
}
.workflow-edit-dialog .container-disabled {
  margin: 4px 0 24px 0;
  background-color: transparent;
}
.workflow-edit-dialog .container-disabled:last-child {
  margin-bottom: 0;
}
.workflow-edit-dialog .container-disabled .drag-handle {
  display: none;
}
.workflow-edit-dialog .workflow-add {
  margin: 12px 0 24px 0;
}
.workflow-edit-dialog .drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100%;
  height: 32px;
  width: 20px;
  color: var(--colour-neutral-300);
  cursor: move;
}
.workflow-edit-dialog .drag-handle:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e411";
}
.workflow-edit-dialog .drag-placeholder .drag-handle {
  opacity: 0;
}
.workflow-edit-dialog .drag-placeholder .content {
  border: 1px solid var(--colour-primary);
  background-color: rgba(96, 128, 160, 0.04);
}
.workflow-edit-dialog .drag-placeholder .content > * {
  opacity: 0;
}
.workflow-edit-dialog .sortable-dragging {
  border: none;
}
.workflow-edit-dialog .sortable-dragging .remove,
.workflow-edit-dialog .sortable-dragging .colour-edit {
  display: none;
}
.workflow-edit-dialog .buttons {
  text-align: right;
}

.feedback-share-dialog {
  padding: 10px;
}
.feedback-share-dialog .fa-copy {
  cursor: pointer;
}
.feedback-share-dialog .fa-thumbs-up {
  font-size: 20px;
}
.feedback-share-dialog .tab-content > div {
  position: relative;
}
.feedback-share-dialog .more-options-launcher {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--colour-neutral);
  cursor: pointer;
}
.feedback-share-dialog .more-options-launcher:hover, .feedback-share-dialog button.more-options-launcher.success.active, .feedback-share-dialog button.more-options-launcher.info.active, .feedback-share-dialog button.more-options-launcher.danger.active {
  color: var(--colour-primary);
}
.feedback-share-dialog .more-options {
  display: none;
}
.feedback-share-dialog .share-method-divider {
  max-width: 400px;
  margin: 16px auto auto auto;
}
.feedback-share-dialog .copy-success {
  display: none;
  color: var(--colour-success);
  font-weight: 500;
  animation: fadeIn 0.2s;
}
.feedback-share-dialog .approver-scroller {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 450px;
  margin: 8px 0 12px 0;
}
.feedback-share-dialog .approver-scroller.approver-scroller-large {
  min-height: 160px;
}
.feedback-share-dialog .approver-row {
  position: relative;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid rgba(96, 128, 160, 0.3);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.1s;
}
.feedback-share-dialog .approver-row:last-child {
  margin-bottom: 0;
}
.feedback-share-dialog .approver-row:hover:not(.disabled), .feedback-share-dialog button.approver-row.success.active:not(.disabled), .feedback-share-dialog button.approver-row.info.active:not(.disabled), .feedback-share-dialog button.approver-row.danger.active:not(.disabled) {
  border-color: var(--colour-primary);
}
.feedback-share-dialog .approver-row.selected {
  border-color: var(--colour-primary);
}
.feedback-share-dialog .approver-row.selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f00c";
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--colour-primary);
  font-size: 14px;
}
.feedback-share-dialog .approver-row.selected .notify-approver {
  display: block;
}
.feedback-share-dialog .approver-row.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.feedback-share-dialog .approver-row > img {
  float: left;
  margin: 0 8px 0 28px;
}
.feedback-share-dialog .approver-row > div .name {
  font-weight: 500;
}
.feedback-share-dialog .approver-row > div .name .badge-small {
  float: right;
  margin-left: 4px;
}
.feedback-share-dialog .approver-row > div .email {
  font-size: 12px;
  color: var(--colour-neutral);
}
.feedback-share-dialog .approver-row .notify-approver {
  display: none;
  margin: 4px 0 0 68px;
}
.feedback-share-dialog .approver-row .notify-approver label {
  font-size: 12px;
}
.feedback-share-dialog .coming-soon {
  padding: 20px 0;
  text-align: center;
}
.feedback-share-dialog .coming-soon h3 {
  font-weight: 600;
}
.feedback-share-dialog .coming-soon i {
  margin-top: 12px;
  font-size: 62px;
  color: rgba(96, 128, 160, 0.4);
}

.error-dialog {
  padding: 30px 0;
  text-align: center;
}
.error-dialog .icon {
  width: 52px;
  height: 52px;
  line-height: 52px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.2);
  color: var(--colour-neutral);
  font-size: 18px;
}
.error-dialog h3 {
  margin: 22px 0;
  font-size: 22px;
  font-weight: 600;
}
.error-dialog button {
  margin-top: 22px;
}

.feature-unlock-dialog {
  text-align: center;
}
.feature-unlock-dialog > iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: none;
  border-radius: 16px 16px 0 0;
  background-color: #000000;
}
.feature-unlock-dialog > div {
  padding: 32px;
}
.feature-unlock-dialog p {
  font-weight: 500;
}

.api-token-copy > div {
  position: relative;
}
.api-token-copy > div .copy-token {
  position: absolute;
  top: 13px;
  right: 12px;
}
.api-token-copy .copy-success {
  color: var(--colour-success);
  opacity: 0;
}

.expired-account-dialog {
  position: relative;
  height: 500px;
  border-radius: 16px;
  background-image: url("/image/expired_account.jpg");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.expired-account-dialog .desc {
  margin: auto;
  padding: 80px 32px 0 32px;
  text-align: center;
}

.modal-integration-innerscroll {
  padding: 30px 30px 0 30px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 350px);
}

.modal-integration-innerscroll-footer {
  padding: 30px;
  text-align: right;
}

.jp-card.jp-card-identified {
  box-shadow: none !important;
}

.jp-card .jp-card-front .jp-card-lower .jp-card-number {
  font-size: 20px !important;
}

.jp-card .jp-card-front .jp-card-lower .jp-card-name {
  font-size: 16px !important;
}

.workflow-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--colour-primary);
  border: 1px solid rgba(96, 64, 255, 0.4);
  background-color: rgba(96, 64, 255, 0.04);
  cursor: default;
}

.workflow-option-colour,
.priority-status-low,
.priority-status-neutral,
.priority-status-high,
.priority-status-urgent,
.priority-status-primary {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
}

.workflow-option-colour {
  background-color: var(--colour-neutral);
}

.priority-status-low {
  background-color: var(--colour-neutral);
}

.priority-status-neutral {
  background-color: var(--colour-primary);
}

.priority-status-high {
  background-color: var(--colour-warning);
}

.priority-status-urgent {
  background-color: #FF4060;
}

.priority-status-primary {
  background-color: var(--colour-primary);
}

.priority-text-urgent {
  color: #FF4060;
}

.priority-text-high {
  color: var(--colour-warning);
}

.priority-text-neutral {
  color: var(--colour-neutral);
}

.priority-text-low {
  color: #c0cdd9;
}

.priority-flag-icon i {
  margin-right: 4px;
  font-size: 10px;
}

.img-upload-progress {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #EEEEEE;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.02);
}
.img-upload-progress .upload-success {
  float: right;
}
.img-upload-progress .img-preview {
  float: left;
  width: 40px;
  height: 20px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.img-upload-progress .img-preview-error {
  height: 32px;
  line-height: 32px;
  background-color: #EEEEEE;
  text-align: center;
  color: #DDDDDD;
}
.img-upload-progress .file-preview {
  margin-right: 4px;
  color: var(--colour-primary);
}

.userback-block-sample {
  width: 200px;
  height: 32px;
  line-height: 32px;
  margin-top: 8px;
  border-radius: 4px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line) inset;
  background: repeating-linear-gradient(-45deg, var(--colour-system-line), var(--colour-system-line) 2px, var(--colour-system-surface) 2px, var(--colour-system-surface) 10px);
}

.userback-ignore-sample {
  width: 200px;
  height: 32px;
  line-height: 32px;
  margin-top: 8px;
  border-radius: 4px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line) inset;
  text-align: center;
}
.userback-ignore-sample:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f05e";
}

.userback-mask-sample {
  width: 200px;
  height: 32px;
  line-height: 32px;
  margin-top: 8px;
  padding-left: 12px;
  border-radius: 4px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line) inset;
}
.userback-mask-sample:before {
  content: "************************";
}

.modal-survey-coming {
  text-align: center;
}
.modal-survey-coming .hero {
  height: 350px;
  margin: 24px 0;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background: url("/image/survey_hero.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.modal-onboarding-welcome {
  padding: 48px 0;
  text-align: center;
}
.modal-onboarding-welcome .welcome-heading {
  padding: 0 48px;
}
.modal-onboarding-welcome p {
  padding: 0 16px;
  line-height: 150%;
}
.modal-onboarding-welcome img {
  display: block;
  margin: 32px 0;
}

.intercom-tour-frame {
  border-radius: 12px !important;
}

.intercom-namespace [data-testid=positioner-mask] {
  border-radius: 4px !important;
  box-shadow: 0 0 0 4000px rgba(96, 128, 160, 0.7) !important;
}
.intercom-namespace [data-testid=arrow-wrapper] {
  display: none !important;
  opacity: 0 !important;
}

.overlay, .mask, .mask-dark, .mask-light {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: var(--colour-system-overlay);
  animation: fadeIn 0.2s;
}
.overlay.fullscreen, .fullscreen.mask, .fullscreen.mask-dark, .fullscreen.mask-light {
  background-color: transparent;
}
.overlay.close, .close.mask, .close.mask-dark, .close.mask-light {
  opacity: 0;
  transition: all 0.2s;
}
.overlay.overlay-sidebar, .overlay-sidebar.mask, .overlay-sidebar.mask-dark, .overlay-sidebar.mask-light {
  overflow: hidden;
}
@media (max-width: 800px) {
  .overlay.overlay-sidebar, .overlay-sidebar.mask, .overlay-sidebar.mask-dark, .overlay-sidebar.mask-light {
    animation: none;
  }
}
.modal-blur .overlay, .modal-blur .mask, .modal-blur .mask-dark, .modal-blur .mask-light {
  backdrop-filter: blur(4px);
}

.mask, .mask-dark, .mask-light {
  z-index: 40;
  overflow: hidden;
  position: absolute;
  text-align: center;
}
.mask span, .mask-dark span, .mask-light span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 30px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.5);
  transform: translateX(-50%);
}

.mask-light {
  background-color: rgba(var(--colour-system-surface-rgb), 0.5);
}

.mask-dark {
  background-color: var(--colour-mask-dark);
}

.modal {
  position: relative;
  margin: 64px auto;
  width: 600px;
  max-width: calc(100% - 48px);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  animation: zoomIn 0.2s;
}
@media (max-width: 800px) {
  .modal {
    margin: 24px auto;
    animation: fadeIn 0.2s;
  }
}
.modal.close {
  opacity: 0;
  transition: all 0.2s;
  transform: scale(0.5);
}
.modal > .modal-button-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 16px;
}
.modal > .modal-title {
  padding: 0 40px 0 30px;
  line-height: 68px;
  background-color: var(--colour-system-surface);
  border-bottom: 1px solid var(--colour-system-line);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  font-weight: 700;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modal > .modal-title > img {
  height: 24px;
  vertical-align: middle;
}
.modal > .modal-content {
  position: relative;
  padding: 30px;
  background-color: var(--colour-system-surface);
}
.modal > .modal-content > iframe {
  display: block;
  width: 100%;
  border: none;
}
.modal > .modal-button {
  padding: 0 30px 30px 30px;
  text-align: right;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: var(--colour-system-surface);
}
.modal > .modal-button > .modal-checkbox {
  float: left;
  height: 45px;
  line-height: 45px;
}
.modal > .modal-button a {
  margin-top: 10px;
  margin-right: 20px;
}
@media (max-width: 800px) {
  .modal > .modal-button a {
    margin-top: 0;
    margin-bottom: 10px;
  }
}
.modal .modal-nav {
  display: grid;
  grid-template-columns: 220px auto;
}
.modal .modal-nav-menu {
  padding: 32px 12px;
}
.modal .modal-nav-menu .header {
  margin-bottom: 22px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}
.modal .modal-nav-menu > a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
  border-radius: 8px;
}
.modal .modal-nav-menu > a:hover, .modal .modal-nav-menu > a.active {
  color: var(--colour-primary);
  background-color: rgba(96, 64, 255, 0.04);
}
.modal .modal-nav-menu > a .icon {
  margin-right: 8px;
}
.modal .modal-nav-main {
  position: relative;
  overflow: auto;
  height: calc(100vh - 200px);
  padding: 32px;
  border-left: 1px solid var(--colour-system-line);
}
.modal .modal-nav-main .sticky-top {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 110px;
  padding: 32px;
}
.modal .modal-nav-main .sticky-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
  border-top: 1px solid var(--colour-system-line);
  text-align: right;
}

.modal-inner-scroll .modal-content {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100px;
  max-height: calc(100vh - 380px);
  padding-bottom: 0;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
.modal-inner-scroll .modal-button {
  padding-top: 30px;
}

.modal-inner-scroll-nobutton .modal-content {
  max-height: calc(100vh - 280px);
}

.modal-fullscreen {
  margin: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  animation: fadeIn 0.2s;
  background-color: var(--colour-system-surface);
}
.modal-fullscreen.close {
  transform: none;
}
.modal-fullscreen > .modal-button-close {
  top: 14px;
  right: 14px;
  z-index: 10;
}
.modal-fullscreen > .modal-title {
  line-height: 60px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  text-transform: none;
  font-size: 15px;
}
.modal-fullscreen > .modal-content {
  overflow: auto;
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px;
}

.modal-nopadding .modal-content {
  padding: 0;
}
.modal-nopadding .modal-content .video-iframe {
  display: block;
  width: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.modal-notitle > .modal-content {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.modal-title .integration-full-logo {
  display: block;
  padding-top: 16px;
}
.modal-title .integration-full-logo img {
  height: 32px;
}

.modal-nobutton > .modal-content {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.modal-nobutton > .modal-content .mask-light {
  border-radius: 0 0 16px 16px;
}

.modal-close-outside > button {
  top: -36px;
  right: -36px;
}
.modal-close-outside > button:before, .modal-close-outside > button:after {
  background-color: var(--colour-system-text-inverse);
  opacity: 0.6;
}
.modal-close-outside > button:hover, .modal-close-outside > button.success.active, .modal-close-outside > button.info.active, .modal-close-outside > button.danger.active, .modal-close-outside > button:active {
  background-color: transparent;
}
.modal-close-outside > button:hover:before, .modal-close-outside > button.success.active:before, .modal-close-outside > button.info.active:before, .modal-close-outside > button.danger.active:before, .modal-close-outside > button:hover:after, .modal-close-outside > button.success.active:after, .modal-close-outside > button.info.active:after, .modal-close-outside > button.danger.active:after, .modal-close-outside > button:active:before, .modal-close-outside > button:active:after {
  opacity: 1;
}

.modal.info-bg .modal-content {
  padding: 40px;
  background-color: var(--colour-system-body);
}

.modal-edgeless > .modal-title {
  display: none;
}
.modal-edgeless > .modal-content {
  top: 100px;
}

.modal-center-form .modal-content > div {
  max-width: 352px;
  margin: 48px auto;
}

@media (max-width: 800px) {
  .mobile-fullsize {
    height: 100%;
    width: auto !important;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mobile-fullsize > .modal-content {
    overflow: auto;
    height: 100%;
    border-radius: 0;
  }
}

.modal-scroll-iframe {
  border-radius: 0 0 16px 16px;
}

.modal-feedback-email-source {
  height: calc(100vh - 260px);
}
.modal-feedback-email-source iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 16px 16px;
}

.video-player-modal {
  display: block;
  position: absolute;
  max-width: 100%;
  max-height: 70vh;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  outline: none;
  background-color: var(--colour-neutral-1000);
}

.video-player-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 32px;
  line-height: 32px;
  color: var(--colour-system-text-inverse);
  font-size: 32px;
  cursor: pointer;
}

.jira-webhook-table {
  max-height: 300px;
  overflow-y: auto;
}
.jira-webhook-table .btn-delete {
  cursor: pointer;
  padding: 2px 6px;
}
.jira-webhook-table .jira-webhook-empty,
.jira-webhook-table .jira-webhook-loading {
  display: none;
  padding: 12px;
  text-align: center;
  color: var(--colour-neutral);
}

.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 80px;
  max-height: calc(100vh - 100px);
  height: 300px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(50%);
  animation: opacityTransformRest 0.16s linear forwards;
}
.bottombar .bottombar-body {
  overflow: auto;
  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.bottombar .bottombar-body .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  display: block;
  width: 100%;
  height: 5px;
  cursor: row-resize;
}
.bottombar .bottombar-content {
  height: 100%;
}
.bottombar .bottombar-close {
  position: absolute;
  z-index: 50;
  top: 8px;
  right: 12px;
}

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 600px;
  max-width: 100%;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateX(50%);
  animation: opacityTransformRest 0.16s linear forwards;
}
@media (max-width: 800px) {
  .sidebar {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    opacity: 1;
    border-radius: 0;
    animation: none;
    transform: none;
  }
}
.sidebar .sidebar-actions {
  position: fixed;
  z-index: 1100;
  top: 18px;
  right: 56px;
}
.sidebar .sidebar-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 16px;
}
.sidebar .sidebar-title {
  padding: 0 92px 0 30px;
  line-height: 68px;
  font-weight: 700;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sidebar .sidebar-content {
  overflow: auto;
  position: absolute;
  top: 68px;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 30px 30px 0 30px;
  border-top: 1px solid var(--colour-system-line);
  border-radius: 0 0 16px 16px;
  background-color: var(--colour-system-surface);
}
.sidebar .sidebar-content:after {
  content: "";
  height: 30px;
  display: block;
}
.sidebar .sidebar-content > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 16px 16px;
}
.sidebar .sidebar-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
  padding: 0 30px;
  border-top: 1px solid var(--colour-neutral-75);
  border-radius: 0 0 16px 16px;
  background-color: var(--colour-system-surface);
}
.sidebar .sidebar-bottom.sidebar-bottom-between {
  justify-content: space-between;
}
.sidebar .sidebar-bottom.animated {
  transform: none;
}
.sidebar .sidebar-bottom:not(.animated) {
  transform: translateX(50%);
  opacity: 0;
  animation: opacityTransformRest 0.16s linear forwards;
}
@media (max-width: 800px) {
  .sidebar .sidebar-bottom {
    width: auto !important;
    left: 0;
    right: 0;
    opacity: 1;
    animation: none;
  }
}

.sidebar-sticky-bottom .sidebar-content {
  bottom: 110px;
}
.sidebar-sticky-bottom .sidebar-content:after {
  display: none;
}

.sidebar-notitle .sidebar-title,
.sidebar-notitle .sidebar-close {
  display: none;
}
.sidebar-notitle .sidebar-content {
  top: 0;
  border-top: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.sidebar-nopadding .sidebar-content {
  overflow: visible;
  padding: 0;
}
.sidebar-nopadding .sidebar-content:after {
  display: none;
}

.tab .tab-menu {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.tab .tab-menu:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--colour-system-line);
}
.tab .tab-menu > a {
  position: relative;
  display: inline-block;
  height: 32px;
  margin-right: 20px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
  outline: none;
}
.tab .tab-menu > a:last-child {
  margin-right: 0;
}
.tab .tab-menu > a:hover:not(.disabled) {
  color: var(--colour-system-text);
}
.tab .tab-menu > a.active, .tab .tab-menu > a.active:hover {
  cursor: default;
  color: var(--colour-system-text);
}
.tab .tab-menu > a.active:after, .tab .tab-menu > a.active:hover:after {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--colour-primary-dark-invert);
}
.tab .tab-menu > a.disabled {
  cursor: default;
}
.tab .tab-menu > button {
  position: absolute;
  top: 10px;
  right: 0;
}
@media (max-width: 800px) {
  .tab .tab-menu > button {
    display: none;
  }
}
.tab .tab-content > div {
  display: none;
}
.tab .tab-content > div.active {
  display: block;
}
.tab[data-theme=feedback] .tab-menu > a.active:after, .tab[data-theme=feedback] .tab-menu > a.active:hover:after {
  background-color: var(--colour-feedback-600);
}
.tab[data-theme=survey] .tab-menu > a.active:after, .tab[data-theme=survey] .tab-menu > a.active:hover:after {
  background-color: var(--colour-survey-600);
}

.tab-vertical .tab-menu:after {
  display: none;
}
.tab-vertical .tab-menu > a {
  display: block;
  margin-right: 0;
  padding: 0;
  margin-bottom: 14px;
  border-bottom: none;
  white-space: normal;
}
.tab-vertical .tab-menu > a:last-child {
  margin-bottom: 0;
}
.tab-vertical .tab-menu > a.disabled {
  pointer-events: none;
}
@media (max-width: 800px) {
  .tab-vertical .tab-menu > a {
    display: inline-block;
    padding-bottom: 10px;
    margin-right: 10px;
    margin-bottom: 0;
  }
  .tab-vertical .tab-menu > a:last-child {
    margin-right: 0;
  }
}

.tooltip-ui {
  position: absolute;
  z-index: 1100;
  top: 0;
  left: 0;
  margin-top: -16px;
  background-color: var(--colour-tooltip-bg);
  color: var(--colour-tooltip-text);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}
.tooltip-ui.multiple-lines {
  max-width: 300px;
  white-space: normal;
}

.tooltip-ui-down {
  margin-top: 16px;
}
.tooltip-ui-down:after {
  top: auto;
  bottom: 100%;
  border: 8px solid transparent;
  border-bottom-color: var(--colour-neutral-1000);
}

.tooltip-ui-right {
  margin-top: 0;
  margin-left: 10px;
}
.tooltip-ui-right:after {
  top: 50%;
  left: auto;
  right: 100%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-color: var(--colour-neutral-1000);
}

.feature-tooltip {
  position: absolute;
  z-index: 100;
  width: 275px;
  padding: 16px 20px;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  border-radius: 5px;
  filter: drop-shadow(0px 0px 10px var(--colour-system-shadow-soft));
  animation: fadeIn 0.2s linear 0.2s forwards;
  opacity: 0;
  font-size: 13px;
  font-weight: 500;
}
.feature-tooltip .title {
  margin-bottom: 5px;
  font-weight: 700;
}
.feature-tooltip .skip {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(var(--colour-system-surface-rgb), 0.8);
}
.feature-tooltip .ok,
.feature-tooltip .next {
  display: inline-block;
  margin-top: 15px;
  color: rgba(var(--colour-system-surface-rgb), 0.8);
}
.feature-tooltip:after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}
.feature-tooltip .dot {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--colour-primary);
}
.feature-tooltip .dot:before, .feature-tooltip .dot:after {
  z-index: 9;
  content: "";
  position: absolute;
  background-color: var(--colour-primary);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0.2;
  animation: pin 2s ease-in 1s infinite;
}
.feature-tooltip .dot:after {
  opacity: 0.3;
  animation: pin 2s ease-in 1.5s infinite;
}
.feature-tooltip[data-direction=right] {
  margin-left: -18px;
}
.feature-tooltip[data-direction=right]:after {
  left: 100%;
  top: 50%;
  margin-top: -6px;
  border-left-color: var(--colour-primary);
}
.feature-tooltip[data-direction=right] .dot {
  top: 50%;
  left: 100%;
  margin: -5px 0 0 14px;
}
.feature-tooltip[data-direction=left] {
  margin-left: 18px;
}
.feature-tooltip[data-direction=left]:after {
  right: 100%;
  top: 50%;
  margin-top: -6px;
  border-right-color: var(--colour-primary);
}
.feature-tooltip[data-direction=left] .dot {
  top: 50%;
  right: 100%;
  margin: -5px 14px 0 0;
}
.feature-tooltip[data-direction=top], .feature-tooltip[data-direction=top_left] {
  margin-top: 18px;
}
.feature-tooltip[data-direction=top]:after, .feature-tooltip[data-direction=top_left]:after {
  left: 50%;
  bottom: 100%;
  margin-left: -6px;
  border-bottom-color: var(--colour-primary);
}
.feature-tooltip[data-direction=top] .dot, .feature-tooltip[data-direction=top_left] .dot {
  left: 50%;
  bottom: 100%;
  margin: 0 0 14px -5px;
}

.colour-picker {
  position: absolute;
  z-index: 2000;
  width: 208px;
  padding: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.colour-picker[data-direction=down] {
  margin-top: 8px;
}
.colour-picker[data-direction=up] {
  margin-top: -8px;
}
.colour-picker > div {
  float: left;
  width: 24px;
  height: 24px;
  border: 4px solid #FFFFFF;
  background-color: #EEEEEE;
  border-radius: 50%;
  cursor: pointer;
}

header {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 256px;
  height: 56px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 -1px 0 0 var(--colour-system-line) inset;
  transition: all 0.1s linear;
}
@media (min-width: 800px) {
  .menu-large-closed header {
    left: 72px;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  header {
    left: 72px;
  }
}
@media (max-width: 800px) {
  header {
    left: 0;
  }
}
header.home nav {
  display: none;
}
header.home .settings-menu {
  display: none;
}
header .header-home > .logo,
header .header-home > .header-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  height: 56px;
  width: 56px;
  box-shadow: 1px 0 0 0 var(--colour-system-line);
  text-decoration: none;
}
header .header-home > .logo:hover, header .header-home > button.logo.success.active, header .header-home > button.logo.info.active, header .header-home > button.logo.danger.active,
header .header-home > .header-menu:hover,
header .header-home > button.header-menu.success.active,
header .header-home > button.header-menu.info.active,
header .header-home > button.header-menu.danger.active {
  color: var(--colour-neutral-400);
}
header .header-home > .logo svg,
header .header-home > .header-menu svg {
  display: block;
  width: auto;
  height: 20px;
}
header .header-home > .logo ul.dropdown,
header .header-home > .header-menu ul.dropdown {
  max-height: none;
}
header .header-home > .header-menu {
  cursor: pointer;
}
@media (max-width: 800px) {
  header .header-home > .header-menu {
    display: none;
  }
}
header .header-home > .header-menu > button {
  width: 100%;
  height: 100%;
  color: var(--colour-neutral-300);
  font-size: 20px;
}
header .header-home > .header-menu li:not(.dropdown-title) {
  padding: 0;
}
header .header-home > .header-menu li:not(.dropdown-title) > a {
  display: block;
  padding: 8px 20px;
  text-decoration: none;
}
header .menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  margin: 12px 0 12px 16px;
  color: var(--colour-neutral-300);
  cursor: pointer;
}
header .menu-toggle:hover, header button.menu-toggle.success.active, header button.menu-toggle.info.active, header button.menu-toggle.danger.active {
  color: var(--colour-neutral-600);
}
@media screen and (min-width: 1440px) {
  .menu-large-closed header .menu-toggle {
    display: block;
  }
}
@media screen and (max-width: 1440px) {
  header .menu-toggle {
    display: none;
  }
}
@media (max-width: 800px) {
  header .menu-toggle {
    display: block;
    font-size: 18px;
  }
}
header .page-location {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-left: 24px;
}
@media screen and (min-width: 1440px) {
  .menu-large-closed header .page-location {
    margin-left: 16px;
  }
}
@media (max-width: 800px) {
  header .page-location {
    display: none;
  }
}
header .page-location > a,
header .page-location > span {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 56px;
  margin-right: 12px;
  text-decoration: none;
  font-weight: 500;
}
header .page-location > a:not(:last-child):after,
header .page-location > span:not(:last-child):after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f105";
  margin-left: 12px;
  color: var(--colour-neutral-300);
  cursor: default;
}
header .page-location > a > a,
header .page-location > span > a {
  margin-left: 8px;
  color: var(--colour-neutral-300);
}
header .page-location > span {
  cursor: default;
}
header .page-location .project-selector {
  position: relative;
  cursor: pointer;
  user-select: none;
}
header .page-location .project-selector .text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}
header .page-location .project-dropdown {
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: -20px;
  width: 300px;
  min-height: 200px;
  max-height: 360px;
  margin-top: 8px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
  cursor: default;
  user-select: none;
}
header .page-location .project-dropdown.no-results:before {
  content: "No projects found";
  position: absolute;
  top: 64px;
  left: 16px;
  color: var(--colour-neutral);
  font-weight: 400;
}
header .page-location .project-dropdown.open {
  display: block;
}
header .page-location .project-dropdown .project {
  position: relative;
  z-index: 10;
  overflow: hidden;
  display: grid;
  grid-template-columns: 28px calc(100% - 32px);
  padding: 8px;
  margin: 0 12px;
  border-radius: 4px;
  font-weight: 400;
  cursor: pointer;
}
header .page-location .project-dropdown .project:not(:last-child) {
  margin-bottom: 4px;
}
header .page-location .project-dropdown .project:first-child {
  margin-top: 12px;
}
header .page-location .project-dropdown .project:last-child {
  margin-bottom: 12px;
}
header .page-location .project-dropdown .project:hover, header .page-location .project-dropdown .project.active {
  background-color: var(--colour-neutral-10);
}
header .page-location .project-dropdown .project.active {
  cursor: default;
  font-weight: 600;
}
header .page-location .project-dropdown .project .project-name {
  line-height: 20px;
}
header .page-location .project-dropdown .project-dropdown-search {
  position: sticky;
  z-index: 100;
  top: 0;
  background-color: var(--colour-system-surface);
}
header .page-location .project-dropdown .project-dropdown-search input {
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--colour-neutral-100);
}
header .page-location .menu-icon {
  margin-right: 12px;
  color: var(--colour-neutral-300);
  text-align: left;
}
header .page-location .project-type-icon-small,
header .page-location .project-logo-icon-small {
  margin-right: 12px;
}
header .nav-settings {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 56px;
  padding-right: 24px;
}
header .nav-settings > div {
  position: relative;
}
header .nav-settings > div:hover .menu-icon {
  color: var(--colour-primary-dark-invert);
}
header .nav-settings > div[data-notification=true]:before {
  content: "";
  position: absolute;
  z-index: 100;
  top: 16px;
  left: 24px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--colour-system-text-inverse);
  border-radius: 50%;
  background-color: var(--colour-danger);
  pointer-events: none;
}
header .nav-settings .menu-icon {
  position: relative;
  display: block;
  line-height: 56px;
  font-size: 18px;
  color: var(--colour-neutral-400);
  text-align: center;
  cursor: pointer;
}
header .nav-settings > a {
  margin-right: 24px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
}
header .nav-settings > a:hover {
  color: var(--colour-system-text);
}
@media (max-width: 800px) {
  header .nav-settings > a {
    display: none;
  }
}
header .nav-settings button.round {
  margin-left: 12px;
}
header .nav-settings .account-upgrade {
  margin: 0 12px;
}
@media (max-width: 800px) {
  header .nav-settings .account-upgrade {
    display: none;
  }
}
header .install-menu,
header .help-menu > button,
header .upload-menu > button,
header .settings-menu {
  width: 42px;
}
header .install-menu {
  cursor: pointer;
}
@media (max-width: 800px) {
  header .install-menu {
    display: none;
  }
}
header .help-menu[data-notify="1"]:after {
  content: "";
  position: absolute;
  top: 16px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--colour-system-text-inverse);
  border-radius: 50%;
  background-color: var(--colour-danger-600);
}
@media (max-width: 800px) {
  header .help-menu {
    display: none;
  }
}
@media (max-width: 800px) {
  header .upload-menu,
  header .settings-menu {
    display: none;
  }
}
header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  header nav {
    margin-left: 12px;
  }
}
header nav a {
  position: relative;
  display: block;
  height: 56px;
  line-height: 56px;
  margin: 0 12px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
}
@media (max-width: 800px) {
  header nav a {
    margin: 0 6px;
  }
}
header nav a:hover {
  color: var(--colour-system-text);
}
header nav a.active {
  color: var(--colour-system-text);
}
header nav a.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--colour-primary-dark-invert);
}
header nav a .status-indicator {
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 8px;
  border-radius: 50%;
}
@media (max-width: 800px) {
  header nav a .status-indicator {
    display: none;
  }
}
header nav a .status-indicator[data-status=activated] {
  background-color: var(--colour-success);
}
header nav a .status-indicator[data-status=deactivated] {
  background-color: var(--colour-neutral-300);
}
header nav a .status-indicator[data-status=scheduled] {
  background-color: var(--colour-warning-300);
}

.menu-profile .profile-dropdown {
  display: none;
  overflow: hidden;
  z-index: 1600;
  left: 24px;
  top: 52px;
  width: 240px;
  font-size: 14px;
  border-radius: 8px;
  animation: dropdown 0.2s;
}
.menu-profile .profile-dropdown.open {
  display: block;
}
.menu-profile .profile-dropdown > div {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-profile .profile-dropdown .my-details {
  display: grid;
  grid-template-columns: 32px auto;
  padding: 24px;
}
.menu-profile .profile-dropdown .photo {
  display: flex;
  align-items: center;
}
.menu-profile .profile-dropdown .detail {
  overflow: hidden;
  position: relative;
  margin-left: 8px;
}
.menu-profile .profile-dropdown .detail .user-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 16px;
}
.menu-profile .profile-dropdown .detail .user-email {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-profile .profile-dropdown .detail .button {
  position: absolute;
  bottom: 0;
}
.menu-profile .account-menu > div {
  padding: 4px 0;
  border-top: 1px solid var(--colour-system-line);
}
.menu-profile .account-menu > div:first-child {
  border-top: none;
}
.menu-profile .account-menu > div .subtitle {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 8px 24px;
  font-size: 12px;
  color: var(--colour-neutral);
  user-select: none;
}
.menu-profile .account-menu > div > a {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 24px;
  text-decoration: none;
  outline: none;
  font-size: 13px;
  user-select: none;
}
.menu-profile .account-menu > div > a:last-child {
  margin-bottom: 0;
}
.menu-profile .account-menu > div > a .icon {
  width: 16px;
  margin-right: 8px;
  color: var(--colour-neutral-400);
}
.menu-profile .account-menu > div > a:hover:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 4px;
  right: 4px;
  background-color: var(--colour-neutral-25);
  border-radius: 8px;
  pointer-events: none;
}
.menu-profile .account-menu > div > a .alert {
  margin-left: 8px;
  color: var(--colour-warning);
}
.menu-profile .button-bar {
  overflow: hidden;
  padding: 12px 16px;
  border-top: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface-2);
}
.menu-profile .button-bar .sign-out {
  text-decoration: none;
}
.menu-profile .button-bar .sign-out i {
  margin-right: 5px;
}

.app-nav-side {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  width: 256px;
  padding: 8px;
  background-color: var(--colour-system-body);
  box-shadow: -1px 0 0 0 var(--colour-system-line) inset, -4px 0 16px rgba(35, 46, 58, 0.06) inset;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side {
    width: 72px;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side {
    width: 72px;
  }
}
@media (max-width: 800px) {
  .app-nav-side {
    display: none;
    z-index: 1500;
    background-color: var(--colour-system-surface);
    opacity: 0;
    transform: translateX(-100px);
    animation: opacityTransformRest 0.16s linear forwards;
    transition: all 0.16s linear;
  }
  .menu-small-open .app-nav-side {
    display: flex;
  }
  .menu-small-closing .app-nav-side {
    opacity: 0;
    left: -256px;
  }
}
.app-nav-side .region-favorites {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-bottom: 12px;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .region-favorites {
    display: none;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .region-favorites {
    display: none;
  }
}
.app-nav-side .region-favorites .region-favorited-projects {
  overflow: auto;
}
.app-nav-side .heading {
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}
.app-nav-side .empty {
  padding: 0 16px;
  color: var(--colour-neutral);
  font-size: 13px;
  line-height: 20px;
}
.app-nav-side .menu-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  padding-left: 2px;
  color: var(--colour-neutral-300);
  text-align: left;
}
.app-nav-side .project-type-icon-small,
.app-nav-side .project-logo-icon-small {
  margin-right: 12px;
}
.app-nav-side .menu-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 32px);
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .menu-text {
    display: none;
    position: absolute;
    width: auto;
    left: 100%;
    background-color: var(--colour-neutral-1000);
    color: var(--colour-system-text-inverse);
    padding: 2px 12px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateX(-8px);
    animation: opacityTransformRest 0.1s linear forwards;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .menu-text {
    display: none;
    position: absolute;
    width: auto;
    left: 100%;
    background-color: var(--colour-neutral-1000);
    color: var(--colour-system-text-inverse);
    padding: 2px 12px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateX(-8px);
    animation: opacityTransformRest 0.1s linear forwards;
  }
}
.app-nav-side .menu-text .coming-soon-badge {
  padding: 2px 6px;
  margin-left: 4px;
  font-size: 9px;
  background: var(--gradient-shiny-bg);
  border-radius: 8px;
  vertical-align: middle;
}
.app-nav-side .menu-text .coming-soon-badge > span {
  background: var(--gradient-shiny-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  pointer-events: none;
}
.app-nav-side .menu-notify {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--colour-neutral);
  pointer-events: none;
}
.app-nav-side .menu-notify:empty {
  display: none;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .menu-notify {
    top: 4px;
    right: 8px;
    bottom: auto;
    font-size: 11px;
    line-height: normal;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .menu-notify {
    top: 4px;
    right: 8px;
    bottom: auto;
    font-size: 11px;
    line-height: normal;
  }
}
.app-nav-side .workspace-name {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
}
.app-nav-side .workspace-name:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f107";
  margin-left: 8px;
  color: var(--colour-neutral-400);
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .workspace-name:after {
    display: none;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .workspace-name:after {
    display: none;
  }
}
.app-nav-side .workspace-name:hover, .app-nav-side button.workspace-name.success.active, .app-nav-side button.workspace-name.info.active, .app-nav-side button.workspace-name.danger.active {
  background-color: var(--colour-menu-active-bg);
}
.app-nav-side .workspace-name:hover:after, .app-nav-side button.workspace-name.success.active:after, .app-nav-side button.workspace-name.info.active:after, .app-nav-side button.workspace-name.danger.active:after {
  color: var(--colour-neutral);
}
.app-nav-side .workspace-name .display-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .workspace-name .display-name {
    display: none;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .workspace-name .display-name {
    display: none;
  }
}
.app-nav-side .workspace-logo {
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 8px;
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .workspace-logo {
    margin-right: 0;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .workspace-logo {
    margin-right: 0;
  }
}
.app-nav-side .workspace-logo.workspace-logo-text {
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  background-color: var(--colour-feedback-100);
  color: var(--colour-feedback-600);
  text-align: center;
}
.app-nav-side .menu-toggle {
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  text-align: center;
  cursor: pointer;
}
.app-nav-side .menu-toggle:hover, .app-nav-side button.menu-toggle.success.active, .app-nav-side button.menu-toggle.info.active, .app-nav-side button.menu-toggle.danger.active {
  color: var(--colour-neutral-600);
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .menu-toggle {
    display: none;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .menu-toggle {
    display: none;
  }
}
@media (max-width: 800px) {
  .app-nav-side .menu-toggle {
    display: none;
  }
}
.app-nav-side a.menu {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  text-decoration: none;
  line-height: 24px;
  font-weight: 500;
}
.app-nav-side a.menu.active {
  background-color: var(--colour-menu-active-bg);
}
@media (max-width: 800px) {
  .app-nav-side a.menu.active {
    background-color: var(--colour-neutral-25);
  }
}
.app-nav-side a.menu:hover {
  background-color: var(--colour-menu-active-bg-hover);
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side a.menu:hover .menu-text {
    display: block;
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side a.menu:hover .menu-text {
    display: block;
  }
}
.app-nav-side .project-shortcut:not(.drag-start):not(.sortable-chosen):hover:before, .app-nav-side button.project-shortcut.success.active:not(.drag-start):not(.sortable-chosen):before, .app-nav-side button.project-shortcut.info.active:not(.drag-start):not(.sortable-chosen):before, .app-nav-side button.project-shortcut.danger.active:not(.drag-start):not(.sortable-chosen):before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e411";
  position: absolute;
  z-index: 10;
  left: 16px;
  width: 20px;
  color: var(--colour-neutral);
  text-align: center;
  cursor: move;
}
.app-nav-side .project-shortcut:not(.drag-start):not(.sortable-chosen):hover .project-type-icon-small, .app-nav-side button.project-shortcut.success.active:not(.drag-start):not(.sortable-chosen) .project-type-icon-small, .app-nav-side button.project-shortcut.info.active:not(.drag-start):not(.sortable-chosen) .project-type-icon-small, .app-nav-side button.project-shortcut.danger.active:not(.drag-start):not(.sortable-chosen) .project-type-icon-small,
.app-nav-side .project-shortcut:not(.drag-start):not(.sortable-chosen):hover .project-logo-icon-small,
.app-nav-side button.project-shortcut.success.active:not(.drag-start):not(.sortable-chosen) .project-logo-icon-small,
.app-nav-side button.project-shortcut.info.active:not(.drag-start):not(.sortable-chosen) .project-logo-icon-small,
.app-nav-side button.project-shortcut.danger.active:not(.drag-start):not(.sortable-chosen) .project-logo-icon-small {
  opacity: 0;
}
.app-nav-side .project-shortcut.drag-start:not(.drag-placeholder).active, .app-nav-side .project-shortcut.drag-start:not(.drag-placeholder):hover {
  background-color: transparent;
}
.app-nav-side .project-shortcut.drag-placeholder {
  background-color: var(--colour-neutral-75) !important;
}
.app-nav-side .project-shortcut.drag-placeholder > * {
  display: none;
}
.app-nav-side .region-account-offer {
  margin-top: auto;
}
.app-nav-side .code-install-banner,
.app-nav-side .promo-offer,
.app-nav-side .usage-dropdown {
  position: relative;
  margin-top: 8px;
  padding: 16px 16px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  font-size: 12px;
  cursor: default;
}
.app-nav-side .code-install-banner:empty,
.app-nav-side .promo-offer:empty,
.app-nav-side .usage-dropdown:empty {
  display: none;
}
.app-nav-side .code-install-banner.flash,
.app-nav-side .promo-offer.flash,
.app-nav-side .usage-dropdown.flash {
  animation: flash 1s;
}
@media (min-width: 800px) {
  .menu-large-closed .app-nav-side .code-install-banner,
  .menu-large-closed .app-nav-side .promo-offer,
  .menu-large-closed .app-nav-side .usage-dropdown {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 240px;
    box-shadow: var(--shadow-2);
  }
}
@media (max-width: 1440px) and (min-width: 800px) {
  .app-nav-side .code-install-banner,
  .app-nav-side .promo-offer,
  .app-nav-side .usage-dropdown {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 240px;
    box-shadow: var(--shadow-2);
  }
}
@media (max-width: 800px) {
  .app-nav-side .code-install-banner,
  .app-nav-side .promo-offer,
  .app-nav-side .usage-dropdown {
    box-shadow: var(--shadow-1);
  }
}
.app-nav-side .code-install-banner .promo-dismiss,
.app-nav-side .code-install-banner .usage-dismiss,
.app-nav-side .code-install-banner .setup-dismiss,
.app-nav-side .promo-offer .promo-dismiss,
.app-nav-side .promo-offer .usage-dismiss,
.app-nav-side .promo-offer .setup-dismiss,
.app-nav-side .usage-dropdown .promo-dismiss,
.app-nav-side .usage-dropdown .usage-dismiss,
.app-nav-side .usage-dropdown .setup-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--colour-neutral-300);
  cursor: pointer;
}
.app-nav-side .code-install-banner .promo-dismiss:hover, .app-nav-side .code-install-banner button.promo-dismiss.success.active, .app-nav-side .code-install-banner button.promo-dismiss.info.active, .app-nav-side .code-install-banner button.promo-dismiss.danger.active,
.app-nav-side .code-install-banner .usage-dismiss:hover,
.app-nav-side .code-install-banner button.usage-dismiss.success.active,
.app-nav-side .code-install-banner button.usage-dismiss.info.active,
.app-nav-side .code-install-banner button.usage-dismiss.danger.active,
.app-nav-side .code-install-banner .setup-dismiss:hover,
.app-nav-side .code-install-banner button.setup-dismiss.success.active,
.app-nav-side .code-install-banner button.setup-dismiss.info.active,
.app-nav-side .code-install-banner button.setup-dismiss.danger.active,
.app-nav-side .promo-offer .promo-dismiss:hover,
.app-nav-side .promo-offer button.promo-dismiss.success.active,
.app-nav-side .promo-offer button.promo-dismiss.info.active,
.app-nav-side .promo-offer button.promo-dismiss.danger.active,
.app-nav-side .promo-offer .usage-dismiss:hover,
.app-nav-side .promo-offer button.usage-dismiss.success.active,
.app-nav-side .promo-offer button.usage-dismiss.info.active,
.app-nav-side .promo-offer button.usage-dismiss.danger.active,
.app-nav-side .promo-offer .setup-dismiss:hover,
.app-nav-side .promo-offer button.setup-dismiss.success.active,
.app-nav-side .promo-offer button.setup-dismiss.info.active,
.app-nav-side .promo-offer button.setup-dismiss.danger.active,
.app-nav-side .usage-dropdown .promo-dismiss:hover,
.app-nav-side .usage-dropdown button.promo-dismiss.success.active,
.app-nav-side .usage-dropdown button.promo-dismiss.info.active,
.app-nav-side .usage-dropdown button.promo-dismiss.danger.active,
.app-nav-side .usage-dropdown .usage-dismiss:hover,
.app-nav-side .usage-dropdown button.usage-dismiss.success.active,
.app-nav-side .usage-dropdown button.usage-dismiss.info.active,
.app-nav-side .usage-dropdown button.usage-dismiss.danger.active,
.app-nav-side .usage-dropdown .setup-dismiss:hover,
.app-nav-side .usage-dropdown button.setup-dismiss.success.active,
.app-nav-side .usage-dropdown button.setup-dismiss.info.active,
.app-nav-side .usage-dropdown button.setup-dismiss.danger.active {
  color: var(--colour-neutral);
}
.app-nav-side .code-install-banner .donut-meteor,
.app-nav-side .promo-offer .donut-meteor,
.app-nav-side .usage-dropdown .donut-meteor {
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: 4px;
}
.app-nav-side .code-install-banner .donut-meteor svg,
.app-nav-side .promo-offer .donut-meteor svg,
.app-nav-side .usage-dropdown .donut-meteor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.app-nav-side .code-install-banner .donut-meteor svg .donut-ring,
.app-nav-side .promo-offer .donut-meteor svg .donut-ring,
.app-nav-side .usage-dropdown .donut-meteor svg .donut-ring {
  stroke: var(--colour-neutral-100);
}
.app-nav-side .code-install-banner .percentage,
.app-nav-side .promo-offer .percentage,
.app-nav-side .usage-dropdown .percentage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 8px;
  font-weight: 500;
}
.app-nav-side .code-install-banner ul,
.app-nav-side .promo-offer ul,
.app-nav-side .usage-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  line-height: 24px;
  font-size: 13px;
}
.app-nav-side .code-install-banner li,
.app-nav-side .promo-offer li,
.app-nav-side .usage-dropdown li {
  position: relative;
  cursor: pointer;
}
.app-nav-side .code-install-banner li > i,
.app-nav-side .promo-offer li > i,
.app-nav-side .usage-dropdown li > i {
  margin-right: 4px;
  color: var(--colour-neutral-200);
}
.app-nav-side .code-install-banner li:hover:not(.completed) > i,
.app-nav-side .promo-offer li:hover:not(.completed) > i,
.app-nav-side .usage-dropdown li:hover:not(.completed) > i {
  color: var(--colour-success);
}
.app-nav-side .code-install-banner li.completed,
.app-nav-side .promo-offer li.completed,
.app-nav-side .usage-dropdown li.completed {
  text-decoration: line-through;
  color: var(--colour-neutral-400);
}
.app-nav-side .code-install-banner li.completed > i,
.app-nav-side .promo-offer li.completed > i,
.app-nav-side .usage-dropdown li.completed > i {
  color: var(--colour-success);
}

@keyframes featureNotification {
  from {
    height: 0;
  }
  to {
    height: 36px;
  }
}
.feature-notification {
  overflow: hidden;
  position: relative;
  line-height: 36px;
  background: linear-gradient(45deg, rgba(96, 64, 255, 0.8), rgba(0, 192, 128, 0.8));
  text-align: center;
  color: var(--colour-system-text-inverse);
  box-shadow: var(--shadow-1);
  height: 0;
  animation: featureNotification 0.3s linear forwards 1s;
}
@media (max-width: 800px) {
  .feature-notification {
    display: none;
  }
}
.feature-notification a {
  color: var(--colour-system-text-inverse);
  font-weight: 600;
}
.feature-notification .close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(var(--colour-system-surface-rgb), 0.15);
  cursor: pointer;
}
.feature-notification .close:hover, .feature-notification button.close.success.active, .feature-notification button.close.info.active, .feature-notification button.close.danger.active {
  background-color: rgba(var(--colour-system-surface-rgb), 0.25);
}
.feature-notification .close svg {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: auto;
}
.feature-notification .close svg * {
  fill: var(--colour-system-text-inverse);
}

.project-overview {
  position: relative;
  display: grid;
  grid-template-columns: 50px auto 440px;
  padding: 16px 0;
  margin-top: 16px;
  transition: all 0.1s;
  cursor: pointer;
}
.project-overview:first-child {
  margin-top: 0;
}
@media (max-width: 800px) {
  .project-overview {
    grid-template-columns: 50px auto 48px;
  }
}
.project-overview[data-hidden] {
  display: none;
}
.project-overview:after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--colour-neutral-25);
}
.project-overview:hover:before, button.project-overview.success.active:before, button.project-overview.info.active:before, button.project-overview.danger.active:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -16px;
  bottom: 0;
  left: -16px;
  border-radius: 8px;
  background: var(--colour-neutral-10);
  pointer-events: none;
  animation: fadeIn 0.1s;
}
.project-overview .project-name {
  margin: 2px 0 8px 0;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}
.project-overview .project-name .status-indicator {
  display: block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: var(--colour-success);
}
.project-overview .project-name .status-indicator[data-status=activated] {
  background-color: var(--colour-success);
}
.project-overview .project-name .status-indicator[data-status=deactivated] {
  background-color: var(--colour-neutral-300);
}
.project-overview .project-name .status-indicator[data-status=scheduled] {
  background-color: var(--colour-warning-300);
}
.project-overview .project-info {
  margin-bottom: 8px;
}
.project-overview .project-domain {
  position: relative;
  margin-right: 16px;
  font-size: 13px;
  color: var(--colour-neutral);
}
.project-overview .project-domain:not(:last-child):after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 6px;
  border-radius: 50%;
  background-color: var(--colour-neutral-300);
}
.project-overview .project-date {
  margin-right: 16px;
  font-size: 13px;
  color: var(--colour-neutral);
}
.project-overview .project-date .schedule-info {
  display: flex;
  align-items: center;
  justify-content: start;
  align-items: baseline;
  line-height: 20px;
}
.project-overview .project-portal {
  margin-right: 16px;
  font-size: 13px;
}
@media (max-width: 800px) {
  .project-overview .project-portal {
    display: none;
  }
}
.project-overview .project-star {
  width: 32px;
  height: 32px;
  margin-right: 16px;
  font-size: 16px;
  cursor: pointer;
}
.project-overview .project-star[data-starred="1"] .fa-regular {
  display: none;
}
.project-overview .project-star[data-starred="0"] .fa-solid {
  display: none;
}
.project-overview .project-star .fa-solid {
  color: var(--colour-attention-600);
}
.project-overview .project-star .fa-regular {
  color: var(--colour-neutral-100);
}
.project-overview .project-star .fa-regular:hover, .project-overview .project-star button.fa-regular.success.active, .project-overview .project-star button.fa-regular.info.active, .project-overview .project-star button.fa-regular.danger.active {
  color: var(--colour-neutral-300);
}
.project-overview .project-users {
  margin-right: 24px;
}
.project-overview .project-users .user-solid,
.project-overview .project-users .user-24 {
  position: relative;
  float: left;
  font-size: 12px;
  box-shadow: 0 0 0px 1px var(--colour-neutral-200);
}
.project-overview .project-users .user-owner:not(:last-child) {
  margin-right: 24px;
}
.project-overview .project-users .user-owner:not(:last-child):after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 100%;
  margin-left: 8px;
  width: 1px;
  background-color: var(--colour-system-line);
}
.project-overview .project-users .user-more {
  position: relative;
  float: left;
  height: 24px;
  line-height: 24px;
  margin-left: 4px;
  color: var(--colour-neutral);
}

.region-create-project {
  width: 600px;
  max-width: 100%;
  margin: 20px auto auto auto;
}
.region-create-project .field-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
}

.region-project-access .user-model {
  position: relative;
  display: inline-block;
  width: 135px;
  height: 120px;
  margin: 0 20px 20px 0;
  padding: 20px 8px;
  text-align: center;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  background-color: var(--colour-system-surface);
}
.region-project-access .user-model:nth-child(4n) {
  margin-right: 0;
}
.region-project-access .user-model > img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.region-project-access .user-model:hover:not(.user-model-admin), .region-project-access .user-model.active {
  border-color: var(--colour-primary);
}
.region-project-access .user-model.active .checkmark {
  display: block;
  background-color: var(--colour-primary);
}
.region-project-access .user-model.user-model-admin {
  cursor: default;
}
.region-project-access .user-model.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.region-project-access .user-model .checkmark {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.6);
  animation: zoomIn 0.1s;
}
.region-project-access .user-model .checkmark svg {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px;
  fill: var(--colour-system-text-inverse);
}
.region-project-access .user-model .badge-small {
  margin-top: 4px;
}

.project-create .region-domains {
  position: relative;
  margin-top: 16px;
}
.project-create .dropdown-domain {
  display: none;
  position: absolute;
  left: 32px;
  right: 0;
  z-index: 10;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}

.project-member-access .region-users,
.project-member-access .region-invitations,
.project-member-access .members-total {
  padding-left: 8px;
}
.project-member-access .region-users {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--colour-system-line);
}
.project-member-access .member-preview {
  display: grid;
  grid-template-columns: 48px auto 100px;
  margin-bottom: 12px;
}
.project-member-access .member-preview > div:last-child {
  text-align: right;
}
.project-member-access .member-preview .member-info {
  display: flex;
  align-items: center;
  margin-top: 2px;
  color: var(--colour-neutral);
  font-size: 12px;
}
.project-member-access .member-preview .member-info > span {
  position: relative;
  padding: 0 8px;
}
.project-member-access .member-preview .member-info > span:first-child {
  padding-left: 0;
}
.project-member-access .member-preview .member-info > span:last-child {
  padding-right: 0;
}
.project-member-access .member-preview .member-info .member-access:before {
  position: absolute;
  top: 50%;
  left: -2px;
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background-color: var(--colour-neutral-100);
}
.project-member-access ul.project-domains {
  padding: 0;
  margin: 8px 0 0 24px;
}

.project-members-manage .region-project-access {
  overflow: auto;
  padding: 24px;
  margin: 16px 0 32px 0;
  max-height: 400px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.project-members-manage .region-invitations {
  position: relative;
  margin-top: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--colour-system-line);
}
.project-members-manage .region-invitations:before {
  content: "Pending";
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
}
.project-members-manage .region-invitations:empty {
  display: none;
}
.project-members-manage .member-preview {
  display: grid;
  grid-template-columns: 48px auto 100px;
  margin-bottom: 24px;
}
.project-members-manage .member-preview:last-child {
  margin-bottom: 0;
}
.project-members-manage .member-preview > div:last-child {
  text-align: right;
}
.project-members-manage .member-preview > div:last-child button {
  width: 100px;
}
.project-members-manage .member-preview .member-access .dropdown-select {
  padding-left: 0;
}

.feedback-viewer-thread {
  position: relative;
  margin-bottom: 32px;
}
.feedback-viewer-thread:last-child {
  margin-bottom: 0;
}
.feedback-viewer-thread .thread-main {
  position: relative;
}
.feedback-viewer-thread .thread-main .actions {
  display: none;
  position: absolute;
  top: -6px;
  right: 0;
  padding: 2px;
  white-space: nowrap;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  opacity: 0;
  transform: translateX(5px);
  animation: opacityTransformRest 0.1s linear forwards;
}
.feedback-viewer-thread .thread-main .actions button {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border-radius: 4px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.feedback-viewer-thread .thread-main .actions button:hover, .feedback-viewer-thread .thread-main .actions button.success.active, .feedback-viewer-thread .thread-main .actions button.info.active, .feedback-viewer-thread .thread-main .actions button.danger.active {
  background-color: var(--colour-neutral-25);
}
.feedback-viewer-thread .thread-main:hover .actions, .feedback-viewer-thread button.thread-main.success.active .actions, .feedback-viewer-thread button.thread-main.info.active .actions, .feedback-viewer-thread button.thread-main.danger.active .actions {
  display: block;
}
.feedback-viewer-thread .thread-title {
  display: flex;
  align-items: center;
  height: 32px;
  font-size: 13px;
}
.feedback-viewer-thread .thread-title .reporter-email-copy,
.feedback-viewer-thread .thread-title .reporter-details-edit {
  margin-left: 8px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.feedback-viewer-thread .thread-title .pin-num {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  font-size: 14px;
}
.feedback-viewer-thread .thread-title > span {
  margin: 0 8px;
  font-weight: 500;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-viewer-thread .thread-title .thread-time {
  float: left;
  margin-left: 4px;
  line-height: 24px;
  color: var(--colour-neutral);
}
.feedback-viewer-thread .thread-title .comment-type-icon {
  line-height: 24px;
  margin-left: 4px;
}
.feedback-viewer-thread .thread-content {
  display: inline-block;
  padding: 16px 20px;
  margin: 8px 0 0 0;
  border-radius: 0 16px 16px 16px;
  background-color: var(--colour-neutral-25);
  width: 100%;
}
.feedback-viewer-thread .thread-content .comment {
  line-height: 140%;
  word-break: break-word;
}
.feedback-viewer-thread .thread-content .comment:empty {
  padding: 0;
}
.feedback-viewer-thread .thread-content .comment:empty[contenteditable=true] {
  padding: 16px 20px;
}
.feedback-viewer-thread .thread-content .comment[contenteditable=true] {
  overflow: auto;
  display: inline-block;
  width: 100%;
  max-height: 300px;
  padding: 16px 20px 44px 20px;
  border: 1px solid var(--colour-input-border);
  border-radius: 0 16px 16px 16px;
  background-color: var(--colour-system-surface);
  outline: none;
}
.feedback-viewer-thread .thread-content .comment .at-name {
  padding: 0 2px;
  color: var(--colour-primary);
  border-radius: 2px;
}
.feedback-viewer-thread .thread-content .edited {
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.feedback-viewer-thread .inline-edit-actions {
  display: none;
  position: absolute;
  right: 20px;
  margin-top: -36px;
}
.feedback-viewer-thread .view-email-source {
  margin-top: 12px;
  text-align: right;
}
.feedback-viewer-thread .view-slack-source {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 12px;
  text-decoration: none;
  background-color: var(--colour-neutral-50);
  border-radius: 8px;
  font-size: 13px;
}
.feedback-viewer-thread .view-slack-source > img {
  height: 14px;
  margin-right: 4px;
}
.feedback-viewer-thread .view-slack-source > span {
  color: var(--colour-neutral);
}
.feedback-viewer-thread .view-slack-source > span:last-child {
  flex: 1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-viewer-thread .attachment-container {
  position: relative;
  margin: 4px 0 0 8px;
}
.feedback-viewer-thread .attachment-container .attachment {
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
  padding-right: 24px;
  font-size: 12px;
  color: var(--colour-neutral);
  font-weight: 500;
}
.feedback-viewer-thread .attachment-container .attachment > i {
  float: left;
  margin-right: 4px;
  height: 25px;
  line-height: 25px;
}
.feedback-viewer-thread .attachment-container .attachment a {
  display: inline-block;
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--colour-neutral);
}
.feedback-viewer-thread .attachment-container .attachment .attachment-delete {
  display: none;
  margin-left: 8px;
  cursor: pointer;
  font-size: 12px;
  animation: fadeIn 0.1s;
  color: var(--colour-neutral);
}
.feedback-viewer-thread .attachment-container .attachment .attachment-delete:hover, .feedback-viewer-thread .attachment-container .attachment button.attachment-delete.success.active, .feedback-viewer-thread .attachment-container .attachment button.attachment-delete.info.active, .feedback-viewer-thread .attachment-container .attachment button.attachment-delete.danger.active {
  color: #FF4060;
}
.feedback-viewer-thread .attachment-container .attachment-preview {
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
}
.feedback-viewer-thread .attachment-container .attachment-preview img {
  display: block;
  max-height: 60px;
  max-width: 150px;
}
.feedback-viewer-thread .attachment-container .attachment-preview video {
  display: block;
  width: 100px;
  height: 60px;
}
.feedback-viewer-thread .attachment-container .attachment-preview.attachment-preview-video {
  border-radius: 8px;
}
.feedback-viewer-thread .attachment-container .attachment-preview.attachment-preview-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-overlay);
}
.feedback-viewer-thread .attachment-container .attachment-preview.attachment-preview-video:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f144";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  line-height: 16px;
  transform: translate(-50%, -50%);
  font-size: 16px;
  border-radius: 50%;
  color: var(--colour-primary);
  background-color: var(--colour-system-surface);
  text-align: center;
}
.feedback-viewer-thread .attachment-container .attachment-preview.attachment-preview-video:hover:after, .feedback-viewer-thread .attachment-container button.attachment-preview.attachment-preview-video.success.active:after, .feedback-viewer-thread .attachment-container button.attachment-preview.attachment-preview-video.info.active:after, .feedback-viewer-thread .attachment-container button.attachment-preview.attachment-preview-video.danger.active:after {
  box-shadow: var(--shadow-3);
}
.feedback-viewer-thread .attachment-container:hover .attachment-delete, .feedback-viewer-thread button.attachment-container.success.active .attachment-delete, .feedback-viewer-thread button.attachment-container.info.active .attachment-delete, .feedback-viewer-thread button.attachment-container.danger.active .attachment-delete {
  display: block;
}
.feedback-viewer-thread .thread-new {
  display: grid;
  grid-template-columns: 32px auto;
  margin-top: 24px;
}

.feedback-viewer-thread.selected:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  width: 2px;
  background-color: var(--colour-primary);
  pointer-events: none;
  animation: fadeIn 0.1s;
}
.feedback-viewer-thread.selected .pin-num {
  box-shadow: 0 0 0 3px var(--colour-system-surface), 0 0 12px rgba(35, 46, 58, 0.4);
}

.feedback-viewer-thread.resolved .thread-main .actions {
  display: block;
  border-color: transparent;
}
.feedback-viewer-thread.resolved .thread-main .actions button.thread-resolve {
  color: var(--colour-success);
}
.feedback-viewer-thread.resolved .thread-main .actions button.thread-edit, .feedback-viewer-thread.resolved .thread-main .actions button.thread-delete {
  display: none;
}
.feedback-viewer-thread.resolved:hover .actions, button.feedback-viewer-thread.resolved.success.active .actions, button.feedback-viewer-thread.resolved.info.active .actions, button.feedback-viewer-thread.resolved.danger.active .actions {
  border-color: var(--colour-system-line);
}
.feedback-viewer-thread.resolved:hover .actions button.thread-edit, button.feedback-viewer-thread.resolved.success.active .actions button.thread-edit, button.feedback-viewer-thread.resolved.info.active .actions button.thread-edit, button.feedback-viewer-thread.resolved.danger.active .actions button.thread-edit, .feedback-viewer-thread.resolved:hover .actions button.thread-delete, button.feedback-viewer-thread.resolved.success.active .actions button.thread-delete, button.feedback-viewer-thread.resolved.info.active .actions button.thread-delete, button.feedback-viewer-thread.resolved.danger.active .actions button.thread-delete {
  display: inline-block;
}

.feedback-viewer-thread.editing .thread-content {
  display: block;
  padding: 0;
  background-color: transparent;
}
.feedback-viewer-thread.editing .edited {
  display: none;
}

.feedback-viewer[commenttype=open] .feedback-viewer-thread.resolved {
  display: none;
}

.feedback-viewer[commenttype=resolved] .feedback-viewer-thread {
  display: none;
}
.feedback-viewer[commenttype=resolved] .feedback-viewer-thread.resolved {
  display: block;
}

.feedback-viewer-thread.temp {
  display: none;
}

.feedback-viewer .feedback-viewer-thread {
  padding: 16px 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-viewer .feedback-viewer-thread.selected {
  background-color: var(--colour-neutral-10);
}
.feedback-viewer .feedback-viewer-thread.selected:before {
  left: 0;
}

.feedback-inbox .feedback-viewer-thread .thread-content {
  margin-left: 32px;
}
.feedback-inbox .feedback-viewer-thread.selected {
  background-color: transparent;
}
.feedback-inbox .feedback-viewer-thread.selected:before {
  display: none;
}
.feedback-inbox .region-comments-reply {
  margin-left: 32px;
}
.feedback-inbox .thread-main .attachment-container {
  margin-left: 40px;
}

.thread-reply-comment {
  position: relative;
  margin-top: 16px;
}
.thread-reply-comment .region-msg-container {
  position: relative;
  display: inline-block;
}
.thread-reply-comment .region-msg {
  padding: 16px 20px;
  background-color: var(--colour-neutral-25);
  border-radius: 0 16px 16px 16px;
}
.thread-reply-comment .reply-title {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.thread-reply-comment .reply-title .name {
  margin: 0 8px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-reply-comment .reply-title .time {
  color: var(--colour-neutral);
}
.thread-reply-comment .comment-type-icon {
  margin-left: 12px;
}
.thread-reply-comment .attachment,
.thread-reply-comment .attachment-preview {
  margin-left: 0;
}
.thread-reply-comment .reply-body {
  position: relative;
  margin: 8px 0 0 32px;
  border-radius: 0 16px 16px 16px;
}
.thread-reply-comment .comment {
  line-height: 140%;
  word-break: break-word;
}
.thread-reply-comment .comment[contenteditable=true] {
  overflow: auto;
  display: inline-block;
  width: 100%;
  max-height: 300px;
  padding: 16px 20px 44px 20px;
  border: 1px solid var(--colour-input-border);
  border-radius: 0 16px 16px 16px;
  background-color: var(--colour-system-surface);
  outline: none;
}
.thread-reply-comment .comment .at-name {
  padding: 0 2px;
  color: var(--colour-primary);
  border-radius: 2px;
}
.thread-reply-comment .edited {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--colour-neutral);
}
.thread-reply-comment .edit-actions {
  display: none;
  position: absolute;
  right: 20px;
  margin-top: -36px;
}
.thread-reply-comment .actions {
  display: none;
  position: absolute;
  z-index: 10;
  right: 4px;
  bottom: 100%;
  margin-bottom: -8px;
  padding: 2px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(3px);
  animation: opacityTransformRest 0.1s linear forwards;
}
.thread-reply-comment .actions button {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--colour-neutral-400);
}
.thread-reply-comment .actions button:hover:not(:disabled), .thread-reply-comment .actions button.success.active:not(:disabled), .thread-reply-comment .actions button.info.active:not(:disabled), .thread-reply-comment .actions button.danger.active:not(:disabled) {
  background-color: var(--colour-neutral-25);
}
.thread-reply-comment .actions button:disabled {
  color: var(--colour-neutral-300);
  cursor: not-allowed;
}
.thread-reply-comment .region-reactions:not(:empty) {
  margin: 8px 0 0 0;
}
.thread-reply-comment .region-reactions > span {
  display: inline-block;
  padding: 2px 6px;
  margin: 4px 4px 0 0;
  line-height: 16px;
  border: 1px solid rgba(96, 64, 255, 0.6);
  border-radius: 10px;
  background-color: rgba(96, 64, 255, 0.06);
  cursor: default;
}
.thread-reply-comment .region-reactions > span .emoji {
  display: inline-block;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: top;
}
.thread-reply-comment .region-reactions > span .count {
  display: inline-block;
  font-size: 11px;
  vertical-align: top;
  color: var(--colour-primary);
}
.thread-reply-comment .show-replies {
  margin: 8px 0 0 0;
}
.thread-reply-comment .region-replies {
  display: none;
}
.thread-reply-comment .region-new-reply {
  position: relative;
  display: grid;
  grid-template-columns: 32px auto;
  margin: 24px 0 0 0;
}
.thread-reply-comment a.reply-toggle {
  font-size: 12px;
  font-weight: 500;
  color: var(--colour-neutral);
  text-decoration: none;
}
.thread-reply-comment a.reply-toggle:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f064";
  display: inline-block;
  margin-right: 4px;
  transform: scaleY(-1);
}
.thread-reply-comment a.reply-toggle:empty {
  display: none;
}

.thread-reply-comment.reply-open .reply-body.reply-body-child {
  width: auto;
}

.thread-reply-comment.editing .region-msg-container {
  display: block;
}
.thread-reply-comment.editing .region-msg {
  padding: 0;
  background-color: transparent;
}
.thread-reply-comment.editing .edited {
  display: none;
}

.thread-reply-comment-internal .region-msg {
  background-color: var(--colour-internal-surface);
  color: var(--colour-internal-text);
}
.thread-reply-comment-internal .comment a,
.thread-reply-comment-internal .comment > .at-name,
.thread-reply-comment-internal .show-replies > a,
.thread-reply-comment-internal button.text,
.thread-reply-comment-internal button.text:hover {
  color: var(--colour-warning-600);
}
.thread-reply-comment-internal button.primary,
.thread-reply-comment-internal button.primary:hover {
  background-color: var(--colour-warning-600);
}
.thread-reply-comment-internal .comment[contenteditable=true] {
  background-color: var(--colour-internal-surface);
}
.thread-reply-comment-internal .edited {
  color: var(--colour-neutral-400);
}

.feedback-board-column {
  position: relative;
  display: inline-block;
  width: 340px;
  margin-top: 4px;
  margin-right: 16px;
  border-radius: 8px;
  white-space: normal;
  vertical-align: top;
  background-color: var(--colour-neutral-25);
}
.feedback-board-column:first-child {
  margin-left: 48px;
}
@media (max-width: 800px) {
  .feedback-board-column:first-child {
    margin-left: 16px;
  }
}
.feedback-board-column:last-child {
  margin-right: 440px;
}
@media (max-width: 800px) {
  .feedback-board-column:last-child {
    margin-right: 24px;
  }
}
.feedback-board-column.ui-droppable-hover {
  box-shadow: 0 0 0 4px var(--colour-primary);
}
.feedback-board-column.ui-droppable-hover:before {
  content: "";
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(96, 64, 255, 0.08);
}
.feedback-board-column .drop-shadow {
  display: none;
}
.feedback-board-column .scroller {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px 10px 10px 10px;
  height: calc(100vh - 230px);
  border-radius: 8px;
  scrollbar-color: rgba(96, 128, 160, 0.3);
}
.feedback-board-column .scroller::-webkit-scrollbar-thumb {
  background: rgba(96, 128, 160, 0.3);
}
.feedback-board-column .scroller:hover::-webkit-scrollbar-thumb, .feedback-board-column button.scroller.success.active::-webkit-scrollbar-thumb, .feedback-board-column button.scroller.info.active::-webkit-scrollbar-thumb, .feedback-board-column button.scroller.danger.active::-webkit-scrollbar-thumb {
  background: rgba(96, 128, 160, 0.5);
}

.feedback-board-column .column-settings {
  position: absolute;
  z-index: 20;
  top: 5px;
  right: 5px;
  opacity: 0;
  transform: translateX(2px);
  animation: opacityTransformRest 0.1s forwards;
}
.feedback-board-column .column-settings button.small {
  color: var(--colour-neutral);
  cursor: pointer;
}
.feedback-board-column .column-settings button.small:hover, .feedback-board-column .column-settings button.small.success.active, .feedback-board-column .column-settings button.small.info.active, .feedback-board-column .column-settings button.small.danger.active {
  color: var(--colour-primary-dark-invert);
  background-color: rgba(96, 128, 160, 0.1);
}
.feedback-board-column .column-settings .button-dropdown {
  vertical-align: middle;
}
.feedback-board-column .board-name {
  height: 42px;
  line-height: 42px;
  padding-left: 10px;
  white-space: nowrap;
  user-select: none;
}
.feedback-board-column .board-name .workflow-option-colour {
  float: left;
  margin-top: 19px;
}
.feedback-board-column .board-name .workflow-option-resolved {
  float: left;
  margin-right: 4px;
  color: var(--colour-success);
}
.feedback-board-column .board-name .user-24 {
  float: left;
  margin: 8px 4px 0 0;
}
.feedback-board-column .board-name .name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 148px);
  display: inline-block;
  vertical-align: top;
  font-weight: 700;
  font-size: 13px;
}
.feedback-board-column .board-name .count {
  overflow: hidden;
  display: inline-block;
  position: relative;
  min-width: 22px;
  height: 20px;
  line-height: 20px;
  margin: 11px 0 0 8px;
  padding: 0 6px;
  border-radius: 4px;
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}
.feedback-board-column .board-name .count:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
  border-radius: 4px;
}
.feedback-board-column .load-more {
  display: none;
  width: 100%;
  height: 40px;
  margin-top: 8px;
  text-align: center;
  border-radius: 8px;
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.feedback-board-column .load-more:hover, .feedback-board-column button.load-more.success.active, .feedback-board-column button.load-more.info.active, .feedback-board-column button.load-more.danger.active {
  color: var(--colour-primary);
}
.feedback-board-column .scroller > div:empty:before {
  content: "No feedback in this column";
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--colour-neutral);
}
.feedback-board-column.loading .scroller > div:empty:before {
  content: "Loading...";
}

.feedback-preview {
  position: relative;
  cursor: pointer;
}
.feedback-preview img.screenshot,
.feedback-preview video.screen-record {
  height: 80px;
  max-width: none;
  margin: 0 5px;
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.feedback-preview .preview .feedback-name {
  margin-top: 8px;
  font-weight: 600;
  line-height: 16px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-preview .preview .feedback-type,
.feedback-preview .preview .feedback-sentiment,
.feedback-preview .preview .following-icon {
  display: flex;
  align-items: center;
  margin-left: 8px;
  font-size: 13px;
  line-height: 16px;
  color: var(--colour-neutral);
}
.feedback-preview .preview .feedback-type:before,
.feedback-preview .preview .feedback-sentiment:before,
.feedback-preview .preview .following-icon:before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.feedback-preview .preview .feedback-type svg,
.feedback-preview .preview .feedback-sentiment svg,
.feedback-preview .preview .following-icon svg {
  width: 14px;
  height: 14px;
}
.feedback-preview .preview .description .subject {
  margin-top: 8px;
  font-weight: 500;
  word-break: break-word;
}
@media (max-width: 800px) {
  .feedback-preview .preview .description .subject {
    font-size: 16px;
  }
}
.feedback-preview .preview .description .category {
  margin-top: 8px;
  color: var(--colour-primary);
  font-weight: 500;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
}
.feedback-preview .preview .description .category > span {
  margin: 4px 6px 0 0;
}
.feedback-preview .preview .description .stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  line-height: 16px;
  color: var(--colour-neutral);
}
.feedback-preview .preview .description .stats .count > span {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}
.feedback-preview .preview .description .stats .count > span:last-child {
  margin-right: 0;
}
.feedback-preview .preview .description .stats .count > span > i:not(.fa-flag) {
  color: var(--colour-neutral-300);
}
.feedback-preview .preview .description .stats .count > span > i:not(.fa-flag).text-danger {
  color: var(--colour-danger);
}
.feedback-preview .preview .description .stats .count > span > i:not(.fa-flag).text-warning {
  color: var(--colour-warning);
}
.feedback-preview .preview .description .stats .extra {
  display: flex;
  align-items: center;
}
.feedback-preview .preview .description .stats .extra > div {
  margin-left: 12px;
}
.feedback-preview .preview .description .stats .extra > div:first-child {
  margin-left: 0;
}
.feedback-preview .preview .description .stats .extra > div > i {
  color: var(--colour-neutral-300);
}
.feedback-preview .preview .description .stats .extra .button-dropdown-user-assign > button {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  color: var(--colour-neutral);
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.feedback-preview .preview .description .stats .extra .button-dropdown-user-assign > button img {
  border-radius: 50%;
}
.feedback-preview .preview .description .stats .extra .button-dropdown-user-assign > button.user-assign-empty {
  border: 1px dashed var(--colour-system-line);
}
.feedback-preview .preview .description .stats .extra .button-dropdown-user-assign > button.user-assign-empty:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\+";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  line-height: 10px;
  margin: 0 -2px 0 0;
  border-radius: 50%;
  font-size: 8px;
  text-align: center;
  background-color: var(--colour-system-surface);
}
.feedback-preview .preview .category-name:hover, .feedback-preview .preview button.category-name.success.active, .feedback-preview .preview button.category-name.info.active, .feedback-preview .preview button.category-name.danger.active {
  text-decoration: underline;
}
.feedback-preview .feedback-time-expired {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background-color: var(--colour-neutral-200);
  color: var(--colour-system-text-inverse);
}
.feedback-preview .button-dropdown-actions > button {
  text-align: center;
  border-radius: 8px;
}
.feedback-preview .button-dropdown-actions > div:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
}

.feedback-preview-expired .preview {
  filter: blur(3px);
}

.feedback-preview[viewtype=inbox] {
  padding: 20px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}
@media (max-width: 1200px) {
  .feedback-preview[viewtype=inbox] {
    padding: 16px;
  }
}
.feedback-preview[viewtype=inbox].feedback-preview-selected {
  background-color: var(--colour-neutral-10);
}
.feedback-preview[viewtype=inbox].feedback-preview-selected:after {
  display: none;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--colour-primary);
}
.feedback-preview[viewtype=inbox].feedback-preview-open, .feedback-preview[viewtype=inbox]:hover, button.feedback-preview[viewtype=inbox].success.active, button.feedback-preview[viewtype=inbox].info.active, button.feedback-preview[viewtype=inbox].danger.active {
  background-color: var(--colour-neutral-10);
}
.feedback-preview[viewtype=inbox]:hover .button-dropdown-actions, button.feedback-preview[viewtype=inbox].success.active .button-dropdown-actions, button.feedback-preview[viewtype=inbox].info.active .button-dropdown-actions, button.feedback-preview[viewtype=inbox].danger.active .button-dropdown-actions {
  display: block;
}
.feedback-preview[viewtype=inbox]:hover .feedback-time, button.feedback-preview[viewtype=inbox].success.active .feedback-time, button.feedback-preview[viewtype=inbox].info.active .feedback-time, button.feedback-preview[viewtype=inbox].danger.active .feedback-time {
  display: none;
}
.feedback-preview[viewtype=inbox].feedback-preview-open {
  box-shadow: 4px 0 0 0 #6040FF inset;
}
.feedback-preview[viewtype=inbox] .preview {
  position: relative;
}
.feedback-preview[viewtype=inbox] .preview .id {
  position: absolute;
  top: 0;
  left: 0;
}
.feedback-preview[viewtype=inbox] .preview .id label {
  margin-right: 0;
}
@media (max-width: 1200px) {
  .feedback-preview[viewtype=inbox] .preview .id {
    display: none;
  }
}
.feedback-preview[viewtype=inbox] .preview .feedback-time {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--colour-neutral);
  font-size: 12px;
  line-height: 16px;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=inbox] .preview .feedback-time {
    font-size: 14px;
  }
}
.feedback-preview[viewtype=inbox] .preview .description {
  margin: 0 0 0 32px;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=inbox] .preview .description {
    margin-left: 12px;
  }
}
.feedback-preview[viewtype=inbox] .preview .description .stats .feedback-info-time {
  display: none;
}
.feedback-preview[viewtype=inbox] .approval-badge {
  margin: 8px 0 0 32px;
}
.feedback-preview[viewtype=inbox] .priority {
  position: absolute;
  bottom: 0;
  left: 2px;
  line-height: 16px;
  font-size: 13px;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=inbox] .priority {
    left: -6px;
  }
}
.feedback-preview[viewtype=inbox] .button-dropdown-actions {
  display: none;
  position: absolute;
  z-index: 15;
  top: 12px;
  right: 12px;
}
.feedback-preview[viewtype=inbox] .button-dropdown-actions > button {
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral-800);
}
.feedback-preview[viewtype=inbox] .button-dropdown-actions > button:hover, .feedback-preview[viewtype=inbox] .button-dropdown-actions > button.success.active, .feedback-preview[viewtype=inbox] .button-dropdown-actions > button.info.active, .feedback-preview[viewtype=inbox] .button-dropdown-actions > button.danger.active {
  background-color: var(--colour-neutral-75);
  color: var(--colour-neutral-1000);
}

.feedback-preview[viewtype=list] {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  box-shadow: 0 0 0 1px var(--colour-system-line);
  transition: all 0.1s;
}
.feedback-preview[viewtype=list].feedback-preview-selected {
  box-shadow: 0 0 0 1px var(--colour-primary-600-dark-invert);
}
.feedback-preview[viewtype=list].feedback-preview-selected:before {
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.feedback-preview[viewtype=list].feedback-preview-open {
  box-shadow: 0 0 0 1px var(--colour-primary-600-dark-invert);
}
.feedback-preview[viewtype=list] .preview {
  position: relative;
}
.feedback-preview[viewtype=list] .preview .id {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=list] .preview .id {
    display: none;
  }
}
.feedback-preview[viewtype=list] .preview .id label {
  margin-right: 0;
}
.feedback-preview[viewtype=list] .preview .description {
  margin-left: 36px;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=list] .preview .description {
    margin-left: 0;
  }
}
.feedback-preview[viewtype=list] .preview .description .subject {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 64px;
}
.feedback-preview[viewtype=list] .preview .description .page-title {
  color: var(--colour-neutral);
  font-size: 12px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-preview[viewtype=list] .approval-badge {
  margin: 8px 0 0 36px;
}
.feedback-preview[viewtype=list] .priority {
  position: absolute;
  bottom: 6px;
  left: 2px;
  font-size: 13px;
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=list] .priority {
    display: none;
  }
}
.feedback-preview[viewtype=list] .button-dropdown-actions {
  position: absolute;
  top: 12px;
  right: 24px;
}

.feedback-preview[viewtype=grid] .preview .description .stats {
  margin-top: 0;
}

.feedback-preview[viewtype=grid],
.feedback-preview[viewtype=column] {
  user-select: none;
}
.feedback-preview[viewtype=grid]:hover .button-dropdown-actions, button.feedback-preview[viewtype=grid].success.active .button-dropdown-actions, button.feedback-preview[viewtype=grid].info.active .button-dropdown-actions, button.feedback-preview[viewtype=grid].danger.active .button-dropdown-actions, .feedback-preview[viewtype=grid].feedback-preview-selected .button-dropdown-actions,
.feedback-preview[viewtype=column]:hover .button-dropdown-actions,
button.feedback-preview[viewtype=column].success.active .button-dropdown-actions,
button.feedback-preview[viewtype=column].info.active .button-dropdown-actions,
button.feedback-preview[viewtype=column].danger.active .button-dropdown-actions,
.feedback-preview[viewtype=column].feedback-preview-selected .button-dropdown-actions {
  display: block;
}
.feedback-preview[viewtype=grid] .button-dropdown-actions,
.feedback-preview[viewtype=column] .button-dropdown-actions {
  display: none;
  position: absolute;
  z-index: 15;
  top: 6px;
  right: 6px;
}
.feedback-preview[viewtype=grid] .button-dropdown-actions > button,
.feedback-preview[viewtype=column] .button-dropdown-actions > button {
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral-800);
}
.feedback-preview[viewtype=grid] .button-dropdown-actions > button:hover, .feedback-preview[viewtype=grid] .button-dropdown-actions > button.success.active, .feedback-preview[viewtype=grid] .button-dropdown-actions > button.info.active, .feedback-preview[viewtype=grid] .button-dropdown-actions > button.danger.active,
.feedback-preview[viewtype=column] .button-dropdown-actions > button:hover,
.feedback-preview[viewtype=column] .button-dropdown-actions > button.success.active,
.feedback-preview[viewtype=column] .button-dropdown-actions > button.info.active,
.feedback-preview[viewtype=column] .button-dropdown-actions > button.danger.active {
  background-color: var(--colour-neutral-75);
  color: var(--colour-neutral-1000);
}
.feedback-preview[viewtype=grid] .cta-buttons,
.feedback-preview[viewtype=column] .cta-buttons {
  position: absolute;
  z-index: 10;
  top: 35%;
  left: 0;
  right: 0;
  text-align: center;
}
.feedback-preview[viewtype=grid] .cta-buttons button,
.feedback-preview[viewtype=column] .cta-buttons button {
  margin-left: 4px;
  opacity: 0;
  animation: dropdown 0.1s linear forwards;
}
.feedback-preview[viewtype=grid] .cta-buttons button.primary-invert, .feedback-preview[viewtype=grid] .cta-buttons button.primary-invert:hover,
.feedback-preview[viewtype=column] .cta-buttons button.primary-invert,
.feedback-preview[viewtype=column] .cta-buttons button.primary-invert:hover {
  background-color: var(--colour-system-surface);
}
.feedback-preview[viewtype=grid] .cta-buttons button:first-child,
.feedback-preview[viewtype=column] .cta-buttons button:first-child {
  margin-left: 0;
  animation-delay: 0.1s;
}
.feedback-preview[viewtype=grid] .cta-buttons button:nth-child(2),
.feedback-preview[viewtype=column] .cta-buttons button:nth-child(2) {
  animation-delay: 0.2s;
}
.feedback-preview[viewtype=grid] .cta-buttons button:nth-child(3),
.feedback-preview[viewtype=column] .cta-buttons button:nth-child(3) {
  animation-delay: 0.3s;
}
.feedback-preview[viewtype=grid] .priority,
.feedback-preview[viewtype=column] .priority {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 11px;
}

.feedback-preview[viewtype=grid] {
  display: block;
  margin: 0 16px 32px 16px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
}
@media (max-width: 800px) {
  .feedback-preview[viewtype=grid] {
    margin: 0 auto 24px auto;
  }
}
.feedback-preview[viewtype=grid] .preview .id {
  display: none;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  bottom: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
}
.feedback-preview[viewtype=grid] .preview .description .stats {
  padding: 12px;
}
.feedback-preview[viewtype=grid] .cta-buttons {
  display: none;
}
.feedback-preview[viewtype=grid] .video-bg,
.feedback-preview[viewtype=grid] .screenshot-bg,
.feedback-preview[viewtype=grid] .pdf-bg {
  display: block;
  height: 186px;
  line-height: 186px;
  border-radius: 8px 8px 0 0;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
  transition: all 0.1s;
  user-select: none;
}
.feedback-preview[viewtype=grid] .video-bg.screenshot-empty,
.feedback-preview[viewtype=grid] .screenshot-bg.screenshot-empty,
.feedback-preview[viewtype=grid] .pdf-bg.screenshot-empty {
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral);
  text-align: center;
  font-size: 14px;
}
.feedback-preview[viewtype=grid] .video-bg.screenshot-bg-auto,
.feedback-preview[viewtype=grid] .screenshot-bg.screenshot-bg-auto,
.feedback-preview[viewtype=grid] .pdf-bg.screenshot-bg-auto {
  background-size: auto;
  background-position: 50% 50%;
}
.feedback-preview[viewtype=grid] .video-bg.screenshot-bg-contain,
.feedback-preview[viewtype=grid] .screenshot-bg.screenshot-bg-contain,
.feedback-preview[viewtype=grid] .pdf-bg.screenshot-bg-contain {
  background-size: contain;
  background-position: 50% 50%;
}
.feedback-preview[viewtype=grid] .video-bg video,
.feedback-preview[viewtype=grid] .screenshot-bg video,
.feedback-preview[viewtype=grid] .pdf-bg video {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.feedback-preview[viewtype=grid] .video-bg canvas,
.feedback-preview[viewtype=grid] .screenshot-bg canvas,
.feedback-preview[viewtype=grid] .pdf-bg canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.feedback-preview[viewtype=grid] .video-bg {
  overflow: hidden;
  display: flex;
  background-color: var(--colour-neutral-1000);
}
.feedback-preview[viewtype=grid] .video-bg:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  line-height: normal;
  margin-top: -16px;
  transform: translate(-50%, -50%);
  background-color: var(--colour-system-surface);
}
.feedback-preview[viewtype=grid] .video-bg:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f144";
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: normal;
  margin-top: -16px;
  transform: translate(-50%, -50%);
  color: var(--colour-primary-dark-invert);
  font-size: 32px;
}
.feedback-preview[viewtype=grid] .approval-badge {
  position: absolute;
  top: auto;
  right: 8px;
  bottom: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-1);
}
.feedback-preview[viewtype=grid].feedback-preview-selected {
  box-shadow: var(--shadow-1), 0 0 0 1px var(--colour-primary-600-dark-invert);
}
.feedback-preview[viewtype=grid].feedback-preview-selected .preview .id {
  display: block;
}
.feedback-preview[viewtype=grid].feedback-preview-selected .video-bg,
.feedback-preview[viewtype=grid].feedback-preview-selected .screenshot-bg,
.feedback-preview[viewtype=grid].feedback-preview-selected .pdf-bg {
  transform: scale(0.9);
}
.feedback-preview[viewtype=grid]:hover:not(.feedback-preview-selected), button.feedback-preview[viewtype=grid].success.active:not(.feedback-preview-selected), button.feedback-preview[viewtype=grid].info.active:not(.feedback-preview-selected), button.feedback-preview[viewtype=grid].danger.active:not(.feedback-preview-selected) {
  box-shadow: var(--shadow-2);
}
.feedback-preview[viewtype=grid]:hover:not(.feedback-preview-selected) .preview .id, button.feedback-preview[viewtype=grid].success.active:not(.feedback-preview-selected) .preview .id, button.feedback-preview[viewtype=grid].info.active:not(.feedback-preview-selected) .preview .id, button.feedback-preview[viewtype=grid].danger.active:not(.feedback-preview-selected) .preview .id {
  display: block;
}
.feedback-preview[viewtype=grid]:hover:not(.feedback-preview-selected):after, button.feedback-preview[viewtype=grid].success.active:not(.feedback-preview-selected):after, button.feedback-preview[viewtype=grid].info.active:not(.feedback-preview-selected):after, button.feedback-preview[viewtype=grid].danger.active:not(.feedback-preview-selected):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 38px;
  left: 0;
  background-color: var(--colour-system-surface);
  border-radius: 8px 8px 0 0;
}
.feedback-preview[viewtype=grid]:hover:not(.feedback-preview-selected) .cta-buttons, button.feedback-preview[viewtype=grid].success.active:not(.feedback-preview-selected) .cta-buttons, button.feedback-preview[viewtype=grid].info.active:not(.feedback-preview-selected) .cta-buttons, button.feedback-preview[viewtype=grid].danger.active:not(.feedback-preview-selected) .cta-buttons {
  display: block;
}

.feedback-preview[viewtype=column] {
  display: block;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.feedback-preview[viewtype=column]:last-child {
  margin-bottom: 0;
}
.feedback-preview[viewtype=column].disabled {
  opacity: 0.3;
  pointer-events: none;
}
.feedback-preview[viewtype=column].pulsing {
  animation: newFeedbackPulse 0.9s ease-in-out;
}
.feedback-preview[viewtype=column].ui-draggable-dragging {
  z-index: 500;
  cursor: grabbing;
}
.feedback-preview[viewtype=column].ui-draggable-dragging[data-direction=right] {
  transform: rotate(4deg);
}
.feedback-preview[viewtype=column].ui-draggable-dragging[data-direction=left] {
  transform: rotate(-4deg);
}
.feedback-preview[viewtype=column].ui-draggable-dragging .feedback-type-preview,
.feedback-preview[viewtype=column].ui-draggable-dragging .button-dropdown {
  pointer-events: none;
}
.feedback-preview[viewtype=column].ui-draggable-dragging .button-dropdown-actions {
  opacity: 0;
}
.feedback-preview[viewtype=column]:hover, button.feedback-preview[viewtype=column].success.active, button.feedback-preview[viewtype=column].info.active, button.feedback-preview[viewtype=column].danger.active {
  box-shadow: var(--shadow-1), 0 0 0 1px var(--colour-input-border-hover);
}
.feedback-preview[viewtype=column]:hover .feedback-time, button.feedback-preview[viewtype=column].success.active .feedback-time, button.feedback-preview[viewtype=column].info.active .feedback-time, button.feedback-preview[viewtype=column].danger.active .feedback-time {
  display: none;
}
.feedback-preview[viewtype=column].feedback-preview-open {
  box-shadow: var(--shadow-1), 0 0 0 1px var(--colour-primary-600-dark-invert);
}
.feedback-preview[viewtype=column] .preview .id {
  display: none;
}
.feedback-preview[viewtype=column] .preview .feedback-time {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
}
.feedback-preview[viewtype=column] .preview .description .stats .feedback-info-time {
  display: none;
}
.feedback-preview[viewtype=column] .approval-badge {
  margin-top: 12px;
}
.feedback-preview[viewtype=column] .screenshot-bg,
.feedback-preview[viewtype=column] .video-bg {
  height: 160px;
  border-radius: 4px;
  margin-top: 8px;
}
.feedback-preview[viewtype=column] .screenshot-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-preview[viewtype=column] .video-bg {
  background-color: var(--colour-neutral-1000);
}
.feedback-preview[viewtype=column] .video-bg video {
  height: 160px;
  width: 100%;
}

.feedback-preview[locked="1"] .locked-status {
  position: absolute;
  z-index: 50;
  top: 20px;
  left: 72px;
  font-size: 16px;
  color: var(--colour-warning);
}
.feedback-preview[locked="1"] .preview .description .subject {
  margin-left: 24px;
}

.feedback-preview[viewtype=grid][locked="1"] .locked-status,
.feedback-preview[viewtype=column][locked="1"] .locked-status {
  position: absolute;
  z-index: 50;
  top: auto;
  bottom: 10px;
  right: 10px;
  left: auto;
  font-size: 16px;
  color: var(--colour-warning);
}
.feedback-preview[viewtype=grid][locked="1"] .feedback-type-icon,
.feedback-preview[viewtype=grid][locked="1"] .priority,
.feedback-preview[viewtype=column][locked="1"] .feedback-type-icon,
.feedback-preview[viewtype=column][locked="1"] .priority {
  display: none;
}

.feedback-preview-container.has-selection .feedback-preview[viewtype=grid]:not(.feedback-preview-selected):before,
.feedback-preview-container.has-selection .feedback-preview[viewtype=column]:not(.feedback-preview-selected):before {
  display: block;
  content: "";
}
.feedback-preview-container.has-selection .feedback-preview[viewtype=grid]:after,
.feedback-preview-container.has-selection .feedback-preview[viewtype=grid] .cta-buttons,
.feedback-preview-container.has-selection .feedback-preview[viewtype=grid] .button-dropdown-actions,
.feedback-preview-container.has-selection .feedback-preview[viewtype=column]:after,
.feedback-preview-container.has-selection .feedback-preview[viewtype=column] .cta-buttons,
.feedback-preview-container.has-selection .feedback-preview[viewtype=column] .button-dropdown-actions {
  display: none;
}
.feedback-preview-container.has-selection .feedback-preview[viewtype=grid] .preview .id,
.feedback-preview-container.has-selection .feedback-preview[viewtype=list] .preview .id {
  display: block;
}

.feedback-board-container.client-view .feedback-preview[viewtype=grid]:before,
.feedback-board-container.client-view .feedback-preview[viewtype=column]:before,
.feedback-preview-container.client-view .feedback-preview[viewtype=grid]:before,
.feedback-preview-container.client-view .feedback-preview[viewtype=column]:before {
  display: none;
}

.feedback-merge .feedback-type {
  display: flex;
  align-items: center;
  margin-left: 8px;
  line-height: 16px;
  color: var(--colour-neutral);
}
.feedback-merge .feedback-type:before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.feedback-merge .merge-feedback-dropdown.button-dropdown > button * {
  pointer-events: auto;
}
.feedback-merge .merge-feedback-dropdown ul.dropdown-select li:hover .feedback-open {
  display: block;
}
.feedback-merge .merge-feedback-dropdown .feedback-subject {
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-merge .merge-feedback-dropdown .feedback-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.feedback-merge .merge-feedback-dropdown .feedback-open {
  display: none;
}
.feedback-merge .merge-feedback-dropdown .dropdown-search {
  position: relative;
}
.feedback-merge .merge-feedback-dropdown .dropdown-search .suggest-duplicate,
.feedback-merge .merge-feedback-dropdown .dropdown-search .suggest-duplicate-clear {
  position: absolute;
  top: 18px;
  right: 20px;
  cursor: pointer;
  color: var(--colour-primary);
  font-weight: 500;
  background-color: var(--colour-system-surface);
}
.feedback-merge .merge-feedback-dropdown .dropdown-search .suggest-duplicate-clear {
  display: none;
}

.feedback-history {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-history .history-title {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.feedback-history .history-user {
  font-weight: 500;
  margin: 0 8px;
}
.feedback-history .history-user .history-app-name {
  font-weight: normal;
  color: var(--colour-neutral);
  font-size: 12px;
}
.feedback-history .history-time {
  color: var(--colour-neutral);
}
.feedback-history .history-msg {
  padding: 16px 20px;
  margin-top: 8px;
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
}
.feedback-history .history-icon {
  max-height: 24px;
}

.feedback-inbox .region-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 400px;
  bottom: 0;
  background-color: var(--colour-system-surface);
}
@media (max-width: 1200px) {
  .feedback-inbox .region-main {
    right: 340px;
  }
}
.feedback-inbox .region-actions {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  padding: 0 16px;
}
.feedback-inbox .region-actions > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 800px;
  max-width: 100%;
  height: 56px;
  margin: auto;
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-inbox .region-actions .feedback-sentiment {
  display: flex;
  align-items: center;
  margin: 0 8px;
}
.feedback-inbox .region-actions .feedback-sentiment:before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.feedback-inbox .region-actions .feedback-sentiment svg {
  width: 14px;
  height: 14px;
}
.feedback-inbox .region-comments {
  overflow: auto;
  scroll-behavior: smooth;
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 48px 32px 48px;
}
@media (max-width: 1200px) {
  .feedback-inbox .region-comments {
    padding: 32px 16px;
  }
}
.feedback-inbox .region-comments > div {
  width: 800px;
  max-width: 100%;
  margin: auto;
}
.feedback-inbox .region-comments .feedback-title {
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
}
.feedback-inbox .region-side {
  position: fixed;
  z-index: 50;
  top: 112px;
  right: 0;
  bottom: 0;
  width: 400px;
  background-color: var(--colour-system-surface);
  box-shadow: -1px 0 0 0 var(--colour-system-line);
}
@media (max-width: 1200px) {
  .feedback-inbox .region-side {
    width: 340px;
  }
}

.feedback-inbox-video .screenshot-containers .title {
  display: none;
}

.feedback-recent .feedback-status {
  margin-top: 8px;
  font-size: 12px;
}
.feedback-recent .feedback-category {
  margin-top: 8px;
}
.feedback-recent .feedback-category > span {
  margin: 4px 6px 0 0;
}

.feedback-csv-upload {
  height: 100%;
}
.feedback-csv-upload .region-upload-step[data-step="1"] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(to right, var(--colour-neutral-50) 1px, var(--colour-system-surface) 1px);
  background-size: 80px 26px;
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select {
  position: relative;
  width: 600px;
  max-width: 100%;
  padding: 64px;
  margin-top: -48px;
  border: 2px dashed rgba(96, 128, 160, 0.2);
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  cursor: pointer;
  transition: all 0.1s;
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select.drag-over, .feedback-csv-upload .region-upload-step[data-step="1"] .file-select:hover, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.success.active, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.info.active, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.danger.active {
  border-color: var(--colour-primary);
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select.drag-over .icon:before,
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select.drag-over .icon:after, .feedback-csv-upload .region-upload-step[data-step="1"] .file-select:hover .icon:before, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.success.active .icon:before, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.info.active .icon:before, .feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.danger.active .icon:before,
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select:hover .icon:after,
.feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.success.active .icon:after,
.feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.info.active .icon:after,
.feedback-csv-upload .region-upload-step[data-step="1"] button.file-select.danger.active .icon:after {
  transform: scale(1.1);
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .icon {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  font-size: 60px;
  color: var(--colour-neutral-300);
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .icon:before {
  content: "";
  position: absolute;
  bottom: 5px;
  right: -3px;
  width: 8px;
  height: 8px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .icon:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f055";
  position: absolute;
  right: -6px;
  bottom: 2px;
  font-size: 14px;
  color: var(--colour-primary);
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .header {
  font-weight: 600;
  font-size: 16px;
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .uploading {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 24px;
  text-align: center;
  color: var(--colour-neutral);
}
.feedback-csv-upload .region-upload-step[data-step="1"] .file-select .upload-error {
  display: none;
  margin-top: 24px;
  color: #FF4060;
}
.feedback-csv-upload .region-upload-step[data-step="2"] {
  display: none;
  height: 100%;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings {
  position: relative;
  height: 88px;
  padding: 0 24px;
  text-align: right;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .header-setting {
  float: left;
  height: 40px;
  margin: 24px 24px 0 0;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .header-setting .setting-label {
  display: inline-block;
  line-height: 40px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .actions {
  display: inline-block;
  margin-top: 24px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .actions .go-back {
  margin-right: 24px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .actions .go-back i {
  margin-right: 8px;
  transform: translateY(1px);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .missing-fields {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FF4060;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-settings .missing-fields:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06a";
  margin-right: 8px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview {
  position: absolute;
  top: 88px;
  left: 24px;
  right: 24px;
  bottom: 0;
  overflow: auto;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview table {
  background-color: var(--colour-system-box-bg-dark-only);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--colour-system-box-bg-dark-only);
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview tbody tr {
  border-bottom: 1px solid var(--colour-neutral-50);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview td, .feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th {
  border-color: var(--colour-neutral-50);
  border-right: 1px solid var(--colour-neutral-50);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview td:last-child, .feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th:last-child {
  border-right: none;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th {
  white-space: nowrap;
  vertical-align: top;
  border-bottom: none;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th > div {
  width: 350px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th .dropdown-container {
  display: inline-block;
  width: 170px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th .invalid-cell {
  margin-left: 8px;
  color: var(--colour-warning);
  font-weight: 400;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th .invalid-cell a {
  margin-left: 4px;
  color: var(--colour-warning);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview th .example {
  margin-top: 4px;
  font-size: 13px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview td {
  white-space: normal;
  word-break: break-all;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview td:first-child {
  white-space: nowrap;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .region-csv-preview tr.header td {
  color: var(--colour-neutral);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-mask {
  display: none;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress {
  display: none;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: 600px;
  max-width: 100%;
  padding: 64px;
  margin-top: -48px;
  border: 2px dashed rgba(96, 128, 160, 0.2);
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  text-align: center;
  transform: translate(-50%, -50%);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .icon {
  display: inline-block;
  height: 72px;
  color: rgba(96, 64, 255, 0.3);
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .icon i {
  font-size: 60px;
  vertical-align: top;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .header {
  font-weight: 600;
  font-size: 16px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .meteor-success {
  margin-top: 16px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .upload-percent {
  margin-top: 12px;
  color: var(--colour-neutral);
  font-weight: 500;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .upload-download {
  display: none;
  margin-right: 16px;
}
.feedback-csv-upload .region-upload-step[data-step="2"] .csv-upload-progress .open-portal {
  display: none;
  margin-top: 32px;
}

.feedback-time-usage {
  overflow: auto;
}
.feedback-time-usage .time {
  float: left;
  margin-right: 4px;
}
.feedback-time-usage .heading {
  overflow: hidden;
  margin-left: 34px;
  margin-bottom: 5px;
  width: 596px;
}
.feedback-time-usage .heading > div {
  float: left;
  width: 12.5%;
  text-align: center;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
}
.feedback-time-usage .day {
  height: 20px;
  line-height: 20px;
  width: 30px;
  margin: 4px 0;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
}
.feedback-time-usage .inner-scroll {
  width: 634px;
  overflow: hidden;
}
.feedback-time-usage .level {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
}
.feedback-time-usage .level:hover, .feedback-time-usage button.level.success.active, .feedback-time-usage button.level.info.active, .feedback-time-usage button.level.danger.active {
  opacity: 1;
}
.feedback-time-usage .level0 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: transparent;
}
.feedback-time-usage .level0:hover, .feedback-time-usage button.level0.success.active, .feedback-time-usage button.level0.info.active, .feedback-time-usage button.level0.danger.active {
  opacity: 1;
}
.feedback-time-usage .level1 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: #dfd9ff;
}
.feedback-time-usage .level1:hover, .feedback-time-usage button.level1.success.active, .feedback-time-usage button.level1.info.active, .feedback-time-usage button.level1.danger.active {
  opacity: 1;
}
.feedback-time-usage .level2 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: #a08dff;
}
.feedback-time-usage .level2:hover, .feedback-time-usage button.level2.success.active, .feedback-time-usage button.level2.info.active, .feedback-time-usage button.level2.danger.active {
  opacity: 1;
}
.feedback-time-usage .level3 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: var(--colour-primary);
}
.feedback-time-usage .level3:hover, .feedback-time-usage button.level3.success.active, .feedback-time-usage button.level3.info.active, .feedback-time-usage button.level3.danger.active {
  opacity: 1;
}
.feedback-time-usage .level4 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: #2900f3;
}
.feedback-time-usage .level4:hover, .feedback-time-usage button.level4.success.active, .feedback-time-usage button.level4.info.active, .feedback-time-usage button.level4.danger.active {
  opacity: 1;
}
.feedback-time-usage .level5 {
  width: 21px;
  height: 20px;
  margin: 4px 0;
  background-color: #F0F0F0;
  opacity: 0.9;
  background-color: #1c00a6;
}
.feedback-time-usage .level5:hover, .feedback-time-usage button.level5.success.active, .feedback-time-usage button.level5.info.active, .feedback-time-usage button.level5.danger.active {
  opacity: 1;
}
.feedback-time-usage .legend {
  margin-top: 20px;
}
.feedback-time-usage .legend > div {
  float: left;
  margin: 0 2px;
  line-height: 20px;
  height: 20px;
  width: 21px;
  font-size: 12px;
  font-weight: 500;
}
.feedback-time-usage .legend > div:first-child {
  width: auto;
  margin-right: 4px;
}
.feedback-time-usage .legend > div:last-child {
  width: auto;
  margin-left: 4px;
}

.ui-dragging .feedback-sidebar {
  opacity: 0;
  pointer-events: none;
}
.feedback-sidebar .region-devtools {
  position: relative;
}
.feedback-sidebar:not(.feedback-sidebar-inbox) {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
}
@media (max-width: 800px) {
  .feedback-sidebar:not(.feedback-sidebar-inbox) {
    width: auto;
    left: 0;
  }
}
.feedback-sidebar:not(.feedback-sidebar-inbox) .layout-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-sidebar);
}
@media (max-width: 800px) {
  .feedback-sidebar:not(.feedback-sidebar-inbox) .layout-sidebar {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
  }
}
.feedback-sidebar .layout-sidebar {
  display: flex;
  flex-flow: column;
}
.feedback-sidebar .layout-preview {
  display: none;
  position: absolute;
  z-index: 100;
  top: 160px;
  right: 100%;
  width: 900px;
  max-width: calc(100vw - 480px - 100px);
  margin-right: -24px;
  text-align: right;
  opacity: 0;
  transform: translateX(20px);
  animation: opacityTransformRest 0.3s ease-in forwards;
  pointer-events: none;
}
.feedback-sidebar .layout-preview.open {
  display: block;
}
.feedback-sidebar .layout-preview > div {
  position: relative;
  float: right;
}
.feedback-sidebar .layout-preview img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line), 0 4px 16px rgba(35, 46, 58, 0.2);
}
.feedback-sidebar .layout-preview .pin {
  position: absolute;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.feedback-sidebar .layout-preview .pin.selected {
  box-shadow: 0 0 0 3px var(--colour-system-surface), 0 0 12px rgba(35, 46, 58, 0.4);
}
.feedback-sidebar .layout-sidebar-header {
  padding: 28px 24px 0 24px;
}
.feedback-sidebar .layout-sidebar-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 24px 32px 24px;
  scroll-behavior: smooth;
  min-height: calc(100% - 140px);
}
.feedback-sidebar .layout-main {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 480px;
  bottom: 0;
  left: 0;
  border-radius: 16px 0 0 16px;
  background-color: var(--colour-system-body);
}
.feedback-sidebar .layout-main .layout-screenshot {
  overflow: auto;
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 60px;
  left: 0;
}
.feedback-sidebar .layout-main .layout-devtools {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 150;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--colour-system-surface);
  box-shadow: 0 -1px 0 var(--colour-system-line);
}
.feedback-sidebar .layout-main .layout-devtools.active {
  height: 300px;
  min-height: 100px;
  max-height: calc(100vh - 300px);
}
.feedback-sidebar .layout-main .layout-devtools.active .drag-handle {
  position: absolute;
  z-index: 100;
  top: -6px;
  left: 0;
  right: 0;
  height: 12px;
  cursor: ns-resize;
}
.feedback-sidebar .layout-main .layout-devtools.active .region-devtools {
  display: block;
}
.feedback-sidebar .layout-main .layout-devtools .region-thumbnails {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  flex-shrink: 0;
}
.feedback-sidebar .layout-main .layout-devtools .region-thumbnails .thumbnail-scroller {
  display: flex;
  align-items: center;
  overflow: auto;
  height: 100%;
}
.feedback-sidebar .layout-main .layout-devtools .region-devtools {
  display: none;
  flex: 1;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 72px;
  height: 38px;
  margin: 0 6px;
  padding: 0 12px;
  color: var(--colour-primary-dark-invert);
  border-radius: 8px;
  border: 1px solid var(--colour-system-line);
  font-size: 11px;
  font-weight: 500;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: var(--colour-system-surface);
  cursor: pointer;
  white-space: nowrap;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail:not(.thumbnail-disabled):hover, .feedback-sidebar .layout-main .layout-devtools .thumbnail.active {
  box-shadow: 0 0 0 1px var(--colour-primary-dark-invert);
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.active {
  cursor: default;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-disabled {
  opacity: 0.5;
  cursor: default;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-replay, .feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-devtools {
  font-size: 12px;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-replay i, .feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-devtools i {
  margin-right: 4px;
  font-size: 12px;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-video {
  padding: 0;
  background-color: var(--colour-neutral-1000);
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail.thumbnail-video video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.feedback-sidebar .layout-main .layout-devtools .thumbnail-divider {
  width: 1px;
  height: 24px;
  margin: 0 12px;
  background-color: var(--colour-neutral-100);
}
.feedback-sidebar .screenshot-nav-prev,
.feedback-sidebar .screenshot-nav-next {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(35, 46, 58, 0.6);
  color: var(--colour-neutral-100-dark-invert);
  font-size: 16px;
  cursor: pointer;
  animation: fadeIn 0.2s linear;
}
.feedback-sidebar .screenshot-nav-prev:hover, .feedback-sidebar button.screenshot-nav-prev.success.active, .feedback-sidebar button.screenshot-nav-prev.info.active, .feedback-sidebar button.screenshot-nav-prev.danger.active,
.feedback-sidebar .screenshot-nav-next:hover,
.feedback-sidebar button.screenshot-nav-next.success.active,
.feedback-sidebar button.screenshot-nav-next.info.active,
.feedback-sidebar button.screenshot-nav-next.danger.active {
  background-color: rgba(35, 46, 58, 0.8);
}
.feedback-sidebar .screenshot-nav-prev {
  left: 54px;
}
.feedback-sidebar .screenshot-nav-next {
  right: 54px;
}
.feedback-sidebar .zoom-controls[data-type=web] {
  display: none;
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  padding: 4px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateX(-10px);
  animation: opacityTransformRest 0.1s forwards;
}
.feedback-sidebar .zoom-controls[data-type=web]:before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  bottom: 0;
  height: 1px;
  margin: auto;
  background-color: var(--colour-system-line);
}
.feedback-sidebar .zoom-controls[data-type=web] button {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  color: var(--colour-system-text);
  border-radius: 4px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.85);
  cursor: pointer;
}
.feedback-sidebar .zoom-controls[data-type=web] button:first-child {
  margin-bottom: 9px;
}
.feedback-sidebar .zoom-controls[data-type=web] button:hover, .feedback-sidebar .zoom-controls[data-type=web] button.success.active, .feedback-sidebar .zoom-controls[data-type=web] button.info.active, .feedback-sidebar .zoom-controls[data-type=web] button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary-dark-invert);
}
.feedback-sidebar[data-layout=default], .feedback-sidebar[data-layout=fullscreen] {
  overflow: auto;
  width: 1280px;
  max-width: calc(100% - 96px);
  margin: auto;
  top: 48px;
  right: 48px;
  bottom: 48px;
  left: 48px;
  border-radius: 16px;
  box-shadow: var(--shadow-2);
}
.feedback-sidebar[data-layout=default]:before, .feedback-sidebar[data-layout=fullscreen]:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-overlay);
}
.feedback-sidebar[data-layout=default] .layout-main, .feedback-sidebar[data-layout=fullscreen] .layout-main {
  display: block;
}
.feedback-sidebar[data-layout=default] .layout-main:hover .screenshot-nav-prev, .feedback-sidebar[data-layout=default] button.layout-main.success.active .screenshot-nav-prev, .feedback-sidebar[data-layout=default] button.layout-main.info.active .screenshot-nav-prev, .feedback-sidebar[data-layout=default] button.layout-main.danger.active .screenshot-nav-prev,
.feedback-sidebar[data-layout=default] .layout-main:hover .screenshot-nav-next,
.feedback-sidebar[data-layout=default] button.layout-main.success.active .screenshot-nav-next,
.feedback-sidebar[data-layout=default] button.layout-main.info.active .screenshot-nav-next,
.feedback-sidebar[data-layout=default] button.layout-main.danger.active .screenshot-nav-next,
.feedback-sidebar[data-layout=default] .layout-main:hover .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=default] button.layout-main.success.active .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=default] button.layout-main.info.active .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=default] button.layout-main.danger.active .zoom-controls[data-type=web], .feedback-sidebar[data-layout=fullscreen] .layout-main:hover .screenshot-nav-prev, .feedback-sidebar[data-layout=fullscreen] button.layout-main.success.active .screenshot-nav-prev, .feedback-sidebar[data-layout=fullscreen] button.layout-main.info.active .screenshot-nav-prev, .feedback-sidebar[data-layout=fullscreen] button.layout-main.danger.active .screenshot-nav-prev,
.feedback-sidebar[data-layout=fullscreen] .layout-main:hover .screenshot-nav-next,
.feedback-sidebar[data-layout=fullscreen] button.layout-main.success.active .screenshot-nav-next,
.feedback-sidebar[data-layout=fullscreen] button.layout-main.info.active .screenshot-nav-next,
.feedback-sidebar[data-layout=fullscreen] button.layout-main.danger.active .screenshot-nav-next,
.feedback-sidebar[data-layout=fullscreen] .layout-main:hover .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=fullscreen] button.layout-main.success.active .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=fullscreen] button.layout-main.info.active .zoom-controls[data-type=web],
.feedback-sidebar[data-layout=fullscreen] button.layout-main.danger.active .zoom-controls[data-type=web] {
  display: block;
}
.feedback-sidebar[data-layout=default] .layout-sidebar, .feedback-sidebar[data-layout=fullscreen] .layout-sidebar {
  box-shadow: -1px 0 0 var(--colour-system-line);
  z-index: 150;
}
.feedback-sidebar[data-layout=default] .region-media,
.feedback-sidebar[data-layout=default] .region-media-btn-group, .feedback-sidebar[data-layout=fullscreen] .region-media,
.feedback-sidebar[data-layout=fullscreen] .region-media-btn-group {
  display: none;
}
.feedback-sidebar[data-layout=default] .region-description, .feedback-sidebar[data-layout=fullscreen] .region-description {
  margin-top: 0;
}
.feedback-sidebar[data-layout=default] .layout-screenshot > .local-screenshot-warning, .feedback-sidebar[data-layout=fullscreen] .layout-screenshot > .local-screenshot-warning {
  top: 12px;
  left: 12px;
  z-index: 101;
  cursor: pointer;
}
.feedback-sidebar[data-layout=default] .layout-sidebar {
  border-radius: 0 16px 16px 0;
}
.feedback-sidebar[data-layout=default] .region-session-replay,
.feedback-sidebar[data-layout=default] .region-video-player {
  max-height: 520px;
}
.feedback-sidebar[data-layout=fullscreen] {
  width: auto;
  max-width: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
}
.feedback-sidebar[data-layout=fullscreen] .layout-main {
  border-radius: 0;
}
.feedback-sidebar .feedback-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.feedback-sidebar .region-nav {
  position: absolute;
  z-index: 600;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
}
.feedback-sidebar .region-nav .nav-layout,
.feedback-sidebar .region-nav .nav-close,
.feedback-sidebar .region-nav .nav-prev,
.feedback-sidebar .region-nav .nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  font-size: 18px;
  cursor: pointer;
}
.feedback-sidebar .region-nav .nav-layout:hover:not(:disabled), .feedback-sidebar .region-nav button.nav-layout.success.active:not(:disabled), .feedback-sidebar .region-nav button.nav-layout.info.active:not(:disabled), .feedback-sidebar .region-nav button.nav-layout.danger.active:not(:disabled),
.feedback-sidebar .region-nav .nav-close:hover:not(:disabled),
.feedback-sidebar .region-nav button.nav-close.success.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-close.info.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-close.danger.active:not(:disabled),
.feedback-sidebar .region-nav .nav-prev:hover:not(:disabled),
.feedback-sidebar .region-nav button.nav-prev.success.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-prev.info.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-prev.danger.active:not(:disabled),
.feedback-sidebar .region-nav .nav-next:hover:not(:disabled),
.feedback-sidebar .region-nav button.nav-next.success.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-next.info.active:not(:disabled),
.feedback-sidebar .region-nav button.nav-next.danger.active:not(:disabled) {
  color: var(--colour-neutral);
}
.feedback-sidebar .region-nav .nav-layout:disabled,
.feedback-sidebar .region-nav .nav-close:disabled,
.feedback-sidebar .region-nav .nav-prev:disabled,
.feedback-sidebar .region-nav .nav-next:disabled {
  opacity: 0.5;
  cursor: default;
}
.feedback-sidebar .region-nav .nav-layout {
  font-size: 8px;
}
.feedback-sidebar .region-nav .nav-layout .fa-arrow-down-left-and-arrow-up-right-to-center {
  transform: rotate(45deg);
}
.feedback-sidebar .layout-options > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4px;
  text-align: center;
  padding: 4px;
  font-size: 13px;
  color: var(--colour-neutral);
  cursor: pointer;
}
.feedback-sidebar .layout-options .layout-option-item {
  padding: 8px 0;
  border-radius: 8px;
}
.feedback-sidebar .layout-options .layout-option-item:hover, .feedback-sidebar .layout-options button.layout-option-item.success.active, .feedback-sidebar .layout-options button.layout-option-item.info.active, .feedback-sidebar .layout-options button.layout-option-item.danger.active {
  background-color: var(--colour-neutral-25);
}
.feedback-sidebar .layout-options .layout-option-item.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary-dark-invert);
}
.feedback-sidebar .layout-options .layout-option-item .layout-icon {
  margin-bottom: 4px;
  font-size: 8px;
}
.feedback-sidebar .layout-options .layout-option-item .fa-arrow-down-left-and-arrow-up-right-to-center {
  transform: rotate(45deg);
}
.feedback-sidebar .region-heading {
  margin-bottom: 24px;
}
.feedback-sidebar .region-tab-content {
  display: none;
}
.feedback-sidebar .region-tab-content.active {
  display: block;
}
.feedback-sidebar .feedback-sentiment {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
}
.feedback-sidebar .feedback-sentiment:before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.feedback-sidebar .feedback-sentiment svg {
  width: 14px;
  height: 14px;
}
.feedback-sidebar .feedback-title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-sidebar .feedback-title:empty:after {
  content: "Untitled";
}
.feedback-sidebar .region-media {
  position: relative;
  margin-bottom: 8px;
}
.feedback-sidebar .region-media[data-type=video] {
  height: 240px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.feedback-sidebar .region-media[data-type=video]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f144";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 600;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  color: var(--colour-system-text-inverse);
  font-size: 48px;
  pointer-events: none;
}
.feedback-sidebar .region-media[data-type=video]:after {
  content: "";
  position: absolute;
  z-index: 500;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  background-color: rgba(35, 46, 58, 0.3);
  cursor: zoom-in;
}
.feedback-sidebar .region-media .expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  background-color: var(--colour-system-surface);
  border-radius: 4px;
  border: 1px solid var(--colour-system-line);
  color: var(--colour-neutral);
  pointer-events: none;
}
.feedback-sidebar .region-media .screenshot {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  cursor: zoom-in;
}
.feedback-sidebar .region-media .screenshot > img {
  max-height: 200px;
}
.feedback-sidebar .region-media .screenshot .local-screenshot-warning {
  position: absolute;
  top: 4px;
  left: 4px;
  font-weight: 500;
  cursor: pointer;
}
.feedback-sidebar .region-media .screenshot-empty {
  height: 200px;
  color: var(--colour-neutral);
}
.feedback-sidebar .region-media .screenshot-empty:before {
  content: "No screenshots";
  font-weight: 500;
}
.feedback-sidebar .region-media .screenshot-auto:before {
  content: "Auto";
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(35, 46, 58, 0.6);
  color: var(--colour-system-text-inverse);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}
.feedback-sidebar .region-media .pin {
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
}
.feedback-sidebar .region-media .pin:hover, .feedback-sidebar .region-media button.pin.success.active, .feedback-sidebar .region-media button.pin.info.active, .feedback-sidebar .region-media button.pin.danger.active {
  background-color: var(--colour-primary-800);
}
.feedback-sidebar .region-media .pin.selected {
  box-shadow: 0 0 0 2px var(--colour-system-surface), 0 0 12px rgba(35, 46, 58, 0.4);
}
.feedback-sidebar .region-media .media-meta {
  position: absolute;
  z-index: 600;
  bottom: 8px;
  right: 8px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background-color: rgba(35, 46, 58, 0.6);
  color: var(--colour-system-text-inverse);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}
.feedback-sidebar .region-media .media-meta i {
  margin-right: 4px;
  font-size: 10px;
}
.feedback-sidebar .region-media .screenshot-prev,
.feedback-sidebar .region-media .screenshot-next {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  margin: auto;
  border-radius: 50%;
  color: var(--colour-system-text-inverse);
  background-color: rgba(35, 46, 58, 0.6);
  cursor: pointer;
  animation: fadeIn 0.1s linear;
}
.feedback-sidebar .region-media .screenshot-prev:hover, .feedback-sidebar .region-media button.screenshot-prev.success.active, .feedback-sidebar .region-media button.screenshot-prev.info.active, .feedback-sidebar .region-media button.screenshot-prev.danger.active,
.feedback-sidebar .region-media .screenshot-next:hover,
.feedback-sidebar .region-media button.screenshot-next.success.active,
.feedback-sidebar .region-media button.screenshot-next.info.active,
.feedback-sidebar .region-media button.screenshot-next.danger.active {
  background-color: rgba(35, 46, 58, 0.8);
}
.feedback-sidebar .region-media .screenshot-prev *,
.feedback-sidebar .region-media .screenshot-next * {
  pointer-events: none;
}
.feedback-sidebar .region-media .screenshot-prev {
  left: 8px;
}
.feedback-sidebar .region-media .screenshot-next {
  right: 8px;
}
.feedback-sidebar .region-media:hover .screenshot-prev, .feedback-sidebar button.region-media.success.active .screenshot-prev, .feedback-sidebar button.region-media.info.active .screenshot-prev, .feedback-sidebar button.region-media.danger.active .screenshot-prev,
.feedback-sidebar .region-media:hover .screenshot-next,
.feedback-sidebar button.region-media.success.active .screenshot-next,
.feedback-sidebar button.region-media.info.active .screenshot-next,
.feedback-sidebar button.region-media.danger.active .screenshot-next {
  display: block;
}
.feedback-sidebar .region-media-btn-group {
  display: flex;
  gap: 8px;
}
.feedback-sidebar .region-media-btn-group button {
  flex: 1;
  width: 50%;
  height: 38px;
  color: var(--colour-primary-dark-invert);
  border-radius: 8px;
  border: 1px solid var(--colour-system-line);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.feedback-sidebar .region-media-btn-group button:not(.disabled):hover, .feedback-sidebar .region-media-btn-group button.success.active:not(.disabled), .feedback-sidebar .region-media-btn-group button.info.active:not(.disabled), .feedback-sidebar .region-media-btn-group button.danger.active:not(.disabled) {
  border-color: var(--colour-input-border-hover);
}
.feedback-sidebar .region-media-btn-group button.disabled {
  opacity: 0.5;
  cursor: default;
}
.feedback-sidebar .region-media-btn-group button i {
  margin-right: 4px;
}
.feedback-sidebar .region-description {
  margin-top: 24px;
}
.feedback-sidebar .region-description .description-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.feedback-sidebar .region-description .description-heading .date {
  color: var(--colour-neutral);
}
.feedback-sidebar .region-description .description-heading .reporter-email-copy,
.feedback-sidebar .region-description .description-heading .reporter-details-edit {
  margin-left: 8px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.feedback-sidebar .region-description .description-body {
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
  font-size: 13px;
  word-break: break-word;
}
.feedback-sidebar .region-description .description-body .description-text:empty:after {
  content: "No feedback description left.";
  color: var(--colour-neutral);
  font-style: italic;
}
.feedback-sidebar .region-description .description-body .attachment {
  margin-top: 12px;
  color: var(--colour-neutral);
}
.feedback-sidebar .region-description .description-body .attachment a {
  margin-left: 4px;
  color: var(--colour-neutral);
}
.feedback-sidebar .region-description .description-body .view-slack-source {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 12px;
  text-decoration: none;
  background-color: var(--colour-neutral-50);
  border-radius: 8px;
  font-size: 13px;
}
.feedback-sidebar .region-description .description-body .view-slack-source > img {
  height: 14px;
  margin-right: 4px;
}
.feedback-sidebar .region-description .description-body .view-slack-source > span {
  color: var(--colour-neutral);
}
.feedback-sidebar .region-description .description-body .view-slack-source > span:last-child {
  flex: 1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-sidebar .region-description .description-comments-row {
  display: flex;
  align-items: center;
}
.feedback-sidebar .region-description .summarize-comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  color: var(--colour-primary-dark-invert);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.feedback-sidebar .region-description .summarize-comments:hover:not(:disabled), .feedback-sidebar .region-description button.summarize-comments.success.active:not(:disabled), .feedback-sidebar .region-description button.summarize-comments.info.active:not(:disabled), .feedback-sidebar .region-description button.summarize-comments.danger.active:not(:disabled) {
  border-color: var(--colour-input-border-hover);
}
.feedback-sidebar .region-description .summarize-comments.active {
  border-color: var(--colour-primary);
  color: var(--colour-primary);
}
.feedback-sidebar .region-description .summarize-comments.loading i {
  animation: rotate 0.8s linear infinite;
}
.feedback-sidebar .region-description .summarize-comments:disabled {
  opacity: 0.6;
  cursor: default;
}
.feedback-sidebar .region-description .details-summary-overlay {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
}
.feedback-sidebar .region-description .details-summary-overlay.open {
  display: block;
}
.feedback-sidebar .region-description .details-summary-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-sidebar .region-description .details-summary-overlay-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-neutral-700);
}
.feedback-sidebar .region-description .details-summary-overlay-close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--colour-neutral-500);
}
.feedback-sidebar .region-description .details-summary-overlay-close:hover, .feedback-sidebar .region-description button.details-summary-overlay-close.success.active, .feedback-sidebar .region-description button.details-summary-overlay-close.info.active, .feedback-sidebar .region-description button.details-summary-overlay-close.danger.active {
  color: var(--colour-primary);
  background-color: var(--colour-system-bg);
}
.feedback-sidebar .region-description .details-summary-overlay-body {
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--colour-neutral-700);
}
.feedback-sidebar .region-description .details-summary-overlay-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--colour-neutral-500);
}
.feedback-sidebar .region-description .details-summary-overlay-meta {
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--colour-neutral-500);
}
.feedback-sidebar .region-details .merged-tips .fa-circle-small {
  margin: 0 6px;
  font-size: 6px;
  color: var(--colour-neutral-400);
}
.feedback-sidebar .region-overview .merged-feedback-item {
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-sidebar .region-overview .merged-feedback-item:last-child {
  margin-bottom: 0;
}
.feedback-sidebar .region-overview .merged-feedback-item:hover:after, .feedback-sidebar .region-overview button.merged-feedback-item.success.active:after, .feedback-sidebar .region-overview button.merged-feedback-item.info.active:after, .feedback-sidebar .region-overview button.merged-feedback-item.danger.active:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f105";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
  color: var(--colour-primary);
}
.feedback-sidebar .region-overview .region-user-data,
.feedback-sidebar .region-overview .region-custom-data {
  position: relative;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty),
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) {
  font-size: 13px;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) > div:not(.empty),
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) > div:not(.empty) {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 8px;
  margin-bottom: 12px;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) > div:not(.empty):last-child,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) > div:not(.empty):last-child {
  margin-bottom: 0;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .title,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .title {
  color: var(--colour-neutral);
  font-weight: 500;
  word-break: break-all;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value {
  word-break: break-all;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown {
  position: absolute;
  top: -4px;
  right: 0;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown > button {
  width: 32px;
  height: 32px;
  font-size: 24px;
  color: var(--colour-neutral);
  border-radius: 8px;
}
.feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button:hover, .feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.success.active, .feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.info.active, .feedback-sidebar .region-overview .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.danger.active,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown > button:hover,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown > button.success.active,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown > button.info.active,
.feedback-sidebar .region-overview .region-custom-data .item-content:not(.empty) .value .user-edit-dropdown > button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary);
}
.feedback-sidebar .region-screenshot {
  position: absolute;
  display: flex;
  z-index: 100;
  top: 0;
  right: 28px;
  bottom: 0;
  left: 28px;
  overflow: visible;
}
.feedback-sidebar .region-screenshot.is-draggable {
  cursor: grab;
}
.feedback-sidebar .region-screenshot.is-zoomed {
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: none;
}
.feedback-sidebar .region-screenshot.is-zoomed::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.feedback-sidebar .region-screenshot.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.feedback-sidebar .region-screenshot.is-dragging .pin {
  pointer-events: none;
}
.feedback-sidebar .region-screenshot .screenshot-expanded {
  position: relative;
  flex: 0 0 auto;
  max-width: none;
  margin: auto;
}
.feedback-sidebar .region-screenshot .screenshot-expanded > img {
  display: block;
  margin: 0;
  max-height: none;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line), 0 0 16px rgba(35, 46, 58, 0.2);
}
.feedback-sidebar .region-screenshot .screenshot-expanded-auto:before {
  content: "Screenshot automatically generated";
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 8px;
  border-radius: 0 8px 0 8px;
  background: var(--colour-neutral-50);
  font-size: 11px;
  font-weight: 500;
}
.feedback-sidebar .region-screenshot .screenshot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 250px;
  margin: auto;
  border-radius: 8px;
  background-color: var(--colour-neutral-10);
  box-shadow: 0 0 0 1px var(--colour-system-line), 0 0 16px rgba(35, 46, 58, 0.2);
}
.feedback-sidebar .region-screenshot .screenshot-empty:before {
  content: "No screenshots";
  font-size: 16px;
  font-weight: 500;
  color: var(--colour-neutral);
}
.feedback-sidebar .region-screenshot .pin {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background-color: var(--colour-primary-600);
  color: var(--colour-on-accent);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
}
.feedback-sidebar .region-screenshot .pin:hover, .feedback-sidebar .region-screenshot button.pin.success.active, .feedback-sidebar .region-screenshot button.pin.info.active, .feedback-sidebar .region-screenshot button.pin.danger.active {
  background-color: var(--colour-primary-800);
}
.feedback-sidebar .region-screenshot .pin.selected {
  box-shadow: 0 0 0 4px var(--colour-system-surface), 0 0 16px rgba(35, 46, 58, 0.4);
}
.feedback-sidebar .region-session-replay,
.feedback-sidebar .region-video-player {
  position: absolute;
  z-index: 100;
  top: 32px;
  right: 28px;
  bottom: 32px;
  left: 28px;
  margin: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.feedback-sidebar .region-session-replay {
  display: none;
}
.feedback-sidebar .session-item.open .item-header:before {
  transform: rotate(180deg);
}
.feedback-sidebar .session-item.open .item-content {
  display: block;
}
.feedback-sidebar .session-item .item-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}
.feedback-sidebar .session-item .item-header.item-header-collapsible {
  padding-left: 20px;
  cursor: pointer;
  user-select: none;
}
.feedback-sidebar .session-item .item-header.item-header-collapsible:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f107";
  position: absolute;
  left: 0;
  color: var(--colour-neutral-400);
}
.feedback-sidebar .session-item .item-header.item-header-collapsible:hover:before, .feedback-sidebar .session-item button.item-header.item-header-collapsible.success.active:before, .feedback-sidebar .session-item button.item-header.item-header-collapsible.info.active:before, .feedback-sidebar .session-item button.item-header.item-header-collapsible.danger.active:before {
  color: var(--colour-primary-dark-invert);
}
.feedback-sidebar .session-item .item-count {
  margin-left: 8px;
  font-weight: 500;
}
.feedback-sidebar .session-item .item-content {
  display: none;
}
.feedback-sidebar .session-item .item-content.empty,
.feedback-sidebar .session-item .item-content > div.empty {
  color: var(--colour-neutral);
  font-style: italic;
  font-size: 13px;
}
.feedback-sidebar .info-grid-box {
  padding: 16px 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.feedback-sidebar .info-grid {
  display: grid;
  grid-template-columns: 100px calc(100% - 100px);
}
.feedback-sidebar .info-grid .info-title {
  padding: 6px 0;
  color: var(--colour-neutral);
}
.feedback-sidebar .info-grid .info-value {
  padding: 6px 0;
}
.feedback-sidebar .info-grid .browser-meta-logo {
  float: left;
  width: 14px;
  height: 14px;
  margin: 2px 4px 0 0;
}
.feedback-sidebar .workflow-dropdown-group {
  display: flex;
}
.feedback-sidebar .workflow-dropdown-group > .button-dropdown {
  flex: 1;
  width: 100%;
}
.feedback-sidebar .workflow-dropdown-group > .button-dropdown[resolved="0"] {
  width: calc(100% - 32px);
}
.feedback-sidebar .workflow-dropdown-group > .button-dropdown[resolved="0"] > button.dropdown-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.feedback-sidebar .workflow-dropdown-group > button.resolve {
  padding: 0 8px;
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--colour-success-600);
  font-size: 16px;
}
.feedback-sidebar .workflow-dropdown-group > button.resolve[resolved="1"] {
  display: none;
}
.feedback-sidebar .button-dropdown[data-append] > div {
  z-index: 1000;
}
.feedback-sidebar .portal-visibility-group {
  display: flex;
}
.feedback-sidebar .portal-visibility-group > .button-dropdown {
  flex: 1;
  width: 100%;
}
.feedback-sidebar .portal-visibility-group > .button-dropdown[visible="0"] {
  width: calc(100% - 32px);
}
.feedback-sidebar .portal-visibility-group > .button-dropdown[visible="0"] > button.dropdown-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.feedback-sidebar .portal-visibility-group > .open-portal {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--colour-system-line);
  padding: 0 8px;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
.feedback-sidebar .portal-visibility-group > .open-portal i {
  font-size: 16px;
}
.feedback-sidebar .portal-visibility-group > .open-portal[visible="1"] {
  display: none;
}

.feedback-sidebar-due-date .text-danger, .feedback-sidebar .text-danger {
  color: var(--colour-danger);
}
.feedback-sidebar-due-date .text-danger i, .feedback-sidebar .text-danger i {
  color: var(--colour-danger);
}
.feedback-sidebar-due-date .text-warning, .feedback-sidebar .text-warning {
  color: var(--colour-warning);
}
.feedback-sidebar-due-date .text-warning i, .feedback-sidebar .text-warning i {
  color: var(--colour-warning);
}
.feedback-sidebar-due-date .info-grid-large, .feedback-sidebar .info-grid-large {
  display: grid;
  grid-template-columns: 40% 60%;
}
.feedback-sidebar-due-date .info-grid-large .info-title, .feedback-sidebar .info-grid-large .info-title {
  padding: 6px 0;
  color: var(--colour-neutral);
  font-weight: 500;
}
.feedback-sidebar-due-date .info-grid-large .info-value, .feedback-sidebar .info-grid-large .info-value {
  min-height: 100%;
  margin-bottom: 8px;
}
.feedback-sidebar-due-date .info-grid-large .info-value .category-text, .feedback-sidebar .info-grid-large .info-value .category-text {
  display: block;
  overflow-wrap: break-word;
  text-align: left;
}

.feedback-sidebar-inbox .layout-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.feedback-sidebar-inbox .layout-preview {
  top: 76px;
}
.feedback-sidebar-inbox .layout-sidebar-header {
  padding-top: 24px;
}

.feedback-sidebar-comments .region-thread-desc {
  padding-bottom: 24px;
}
.feedback-sidebar-comments .region-thread-video {
  padding: 24px 0;
  border-top: 1px solid var(--colour-system-line);
}
.feedback-sidebar-comments .region-thread-video:last-child {
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-sidebar-comments .region-thread-screenshot {
  padding: 24px 0;
  border-top: 1px solid var(--colour-system-line);
}
.feedback-sidebar-comments .region-thread-screenshot:last-child {
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-sidebar-comments .region-thread-screenshot .header {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--colour-neutral);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.feedback-sidebar-comments .region-thread-screenshot .header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f107";
  margin-right: 8px;
  color: var(--colour-neutral-400);
}
.feedback-sidebar-comments .region-thread-screenshot .header:hover:before, .feedback-sidebar-comments .region-thread-screenshot button.header.success.active:before, .feedback-sidebar-comments .region-thread-screenshot button.header.info.active:before, .feedback-sidebar-comments .region-thread-screenshot button.header.danger.active:before {
  color: var(--colour-primary);
}
.feedback-sidebar-comments .region-thread-screenshot .content {
  display: none;
}
.feedback-sidebar-comments .region-thread-screenshot .header + .content {
  margin-top: 16px;
}
.feedback-sidebar-comments .region-thread-screenshot.open .header:before {
  transform: rotate(180deg);
}
.feedback-sidebar-comments .region-thread-screenshot.open .header .view-screenshot {
  display: block;
}
.feedback-sidebar-comments .region-thread-screenshot.open .content {
  display: block;
}

.feedback-integrations .integration-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
}
.feedback-integrations .integration-send.integration-send-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  background-color: var(--colour-system-box-bg-dark-only);
}
.feedback-integrations .integration-send.integration-send-small .integration-icon {
  margin-right: 0;
}
.feedback-integrations .integration-send .integration-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}
.feedback-integrations .integration-send .integration-icon img {
  width: 100%;
  height: 100%;
  margin-right: 0;
}
.feedback-integrations .integration-send .status-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--colour-success);
}
.feedback-integrations .integration-send .status-sent svg {
  width: 6px;
  height: 6px;
  fill: var(--colour-system-text-inverse);
}

.survey-dropdown-list .status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--colour-success);
}
.survey-dropdown-list .status-indicator[data-status=activated] {
  background-color: var(--colour-success);
}
.survey-dropdown-list .status-indicator[data-status=deactivated] {
  background-color: var(--colour-neutral-300);
}
.survey-dropdown-list .status-indicator[data-status=scheduled] {
  background-color: var(--colour-warning-300);
}

.feedback-filter .region-filtered-feedback {
  margin: 12px 0 0 24px;
  padding: 16px 16px 16px 8px;
}
.feedback-filter .filter-row {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 16px;
}
.feedback-filter .filter-row .filter-delete {
  cursor: pointer;
}
.feedback-filter .filter-row > div {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
.feedback-filter .filter-row > div .filter-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 0 12px;
  background-color: var(--colour-neutral-50);
}
.feedback-filter .filter-row > div .filter-operator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 0 0;
  background-color: var(--colour-neutral-50);
}
.feedback-filter .filter-row > div .filter-value {
  display: flex;
  align-items: center;
  justify-content: start;
  flex: 1;
  padding: 0 12px;
}
.feedback-filter .filter-row > div .filter-value input[type=text],
.feedback-filter .filter-row > div .filter-value input[type=number] {
  height: 32px;
  font-size: 14px;
}
.feedback-filter .filter-row > div .filter-value .button-dropdown > button {
  font-size: 13px;
}
.feedback-filter .filter-row > div .filter-value .button-dropdown > button:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f107";
  margin-left: 6px;
  color: var(--colour-neutral);
}
.feedback-filter .filter-row > div .filter-value .button-dropdown > button:hover, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.success.active, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.info.active, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.danger.active {
  color: var(--colour-primary);
}
.feedback-filter .filter-row > div .filter-value .button-dropdown > button:hover:after, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.success.active:after, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.info.active:after, .feedback-filter .filter-row > div .filter-value .button-dropdown > button.danger.active:after {
  color: var(--colour-primary);
}
.feedback-filter .filter-row .filter-title {
  font-weight: 600;
  cursor: default;
}
.feedback-filter .filter-row .filter-operator {
  cursor: default;
}

.account-refer-dialog {
  overflow: hidden;
  margin: 0;
  text-align: center;
  border-radius: 8px;
}
.account-refer-dialog .hero-text {
  font-weight: 700;
  margin-top: 20px;
  color: var(--colour-system-text);
}
.account-refer-dialog .hero-desc {
  padding: 10px 30px;
  margin: 0 auto;
  max-width: 640px;
}
.account-refer-dialog .referral-link {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 24px 0;
  color: var(--colour-system-text);
  word-break: break-all;
}
@media (max-width: 800px) {
  .account-refer-dialog .referral-link {
    font-size: 14px;
  }
}

.emoji-selector {
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  padding: 0 8px 8px 8px;
  width: 320px;
  height: 250px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  scrollbar-width: thin;
  scrollbar-color: var(--colour-neutral-100) transparent;
}
.emoji-selector:hover, button.emoji-selector.success.active, button.emoji-selector.info.active, button.emoji-selector.danger.active {
  scrollbar-color: var(--colour-neutral-200) transparent;
}
.emoji-selector::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
.emoji-selector::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--colour-neutral-100);
}
.emoji-selector:hover::-webkit-scrollbar-thumb, button.emoji-selector.success.active::-webkit-scrollbar-thumb, button.emoji-selector.info.active::-webkit-scrollbar-thumb, button.emoji-selector.danger.active::-webkit-scrollbar-thumb {
  background: var(--colour-neutral-200);
}
.emoji-selector .emoji-group-container {
  overflow: hidden;
  margin-bottom: 12px;
}
.emoji-selector .emoji-group-container:last-child {
  margin-bottom: 0;
}
.emoji-selector .emoji-group-title {
  padding: 0 8px;
  margin-bottom: 4px;
  color: var(--colour-system-text);
  font-size: 14px;
  font-weight: 500;
}
.emoji-selector .emoji-char {
  float: left;
  width: 12.5%;
  height: 32px;
  line-height: 32px;
  font-size: 20px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.emoji-selector .emoji-char:hover, .emoji-selector button.emoji-char.success.active, .emoji-selector button.emoji-char.info.active, .emoji-selector button.emoji-char.danger.active {
  background-color: var(--colour-system-surface-2);
}
.emoji-selector .emoji-search {
  position: sticky;
  top: 0;
  padding: 16px 6px 12px 8px;
  background-color: var(--colour-system-surface);
}
.emoji-selector .emoji-search .fa-search {
  position: absolute;
  left: 14px;
  line-height: 28px;
  font-size: 14px;
  pointer-events: none;
  color: var(--colour-neutral-300);
}
.emoji-selector .emoji-search input {
  height: 28px;
  padding: 0 8px 0 24px;
  border: 1px solid var(--colour-input-border);
  background-color: var(--colour-system-surface-2);
  border-radius: 8px;
  font-size: 14px;
}
.emoji-selector .emoji-search input:focus {
  border-color: var(--colour-primary);
}

.region-message-editor {
  position: relative;
}
.region-message-editor.invalid:after {
  content: "Required";
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background-color: rgba(255, 64, 96, 0.16);
  color: #FF4060;
}
.region-message-editor > div[data-internal] {
  border-radius: 8px;
  background-color: var(--colour-internal-surface);
}
.region-message-editor > div[data-internal] .message-editor {
  color: var(--colour-internal-text);
}
.region-message-editor > div[data-internal] .comment-status-launcher input[type=checkbox]:checked + label:before {
  border-color: var(--colour-warning);
  background-color: var(--colour-warning);
}
.region-message-editor > div[data-internal] .comment-status-launcher label {
  color: var(--colour-internal-launcher);
}
.region-message-editor > div[data-internal] .options button.template-launcher, .region-message-editor > div[data-internal] .options button.emoji-launcher, .region-message-editor > div[data-internal] .options button.attach-launcher {
  color: var(--colour-internal-launcher);
}
.region-message-editor > div[data-internal] .options button.template-launcher:hover, .region-message-editor > div[data-internal] .options button.template-launcher.success.active, .region-message-editor > div[data-internal] .options button.template-launcher.info.active, .region-message-editor > div[data-internal] .options button.template-launcher.danger.active, .region-message-editor > div[data-internal] .options button.emoji-launcher:hover, .region-message-editor > div[data-internal] .options button.emoji-launcher.success.active, .region-message-editor > div[data-internal] .options button.emoji-launcher.info.active, .region-message-editor > div[data-internal] .options button.emoji-launcher.danger.active, .region-message-editor > div[data-internal] .options button.attach-launcher:hover, .region-message-editor > div[data-internal] .options button.attach-launcher.success.active, .region-message-editor > div[data-internal] .options button.attach-launcher.info.active, .region-message-editor > div[data-internal] .options button.attach-launcher.danger.active {
  background-color: unset;
  color: var(--colour-warning);
}
.region-message-editor > div[data-internal] .send button.text-info:hover:not(:disabled), .region-message-editor > div[data-internal] .send button.text-info.success.active:not(:disabled), .region-message-editor > div[data-internal] .send button.text-info.info.active:not(:disabled), .region-message-editor > div[data-internal] .send button.text-info.danger.active:not(:disabled) {
  border-radius: 4px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-warning);
}
.region-message-editor .message-editor {
  overflow-x: hidden;
  overflow-y: auto;
  display: inline-block;
  width: 100%;
  max-height: 100px;
  padding: 12px 16px;
  box-shadow: none;
  outline: none;
  color: var(--colour-system-text);
}
.region-message-editor .message-editor:empty:before {
  content: attr(placeholder);
  color: var(--colour-system-text-placeholder);
  pointer-events: none;
}
.region-message-editor .message-editor.disabled {
  color: var(--colour-system-text-muted);
  cursor: not-allowed;
}
.region-message-editor .attachment-preview {
  position: relative;
  display: inline-block;
  top: 100%;
  left: 0;
  margin: 12px 0 0 0;
  font-size: 12px;
}
.region-message-editor .attachment-preview:empty {
  display: none;
}
.region-message-editor .attachment-preview img {
  display: block;
  max-width: 140px;
  max-height: 80px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.region-message-editor .attachment-preview video {
  display: block;
  width: 140px;
  height: 80px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.region-message-editor .attachment-preview span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 14px;
}
.region-message-editor .attachment-preview .attachment-remove {
  position: absolute;
  right: -6px;
  top: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}
.region-message-editor .attachment-preview .attachment-remove i {
  pointer-events: none;
}
.region-message-editor .attachment-preview .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--portal-theme);
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  font-size: 16px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.region-message-editor .attachment-preview.attachment-preview-video {
  cursor: pointer;
}
.region-message-editor .attachment-preview.attachment-preview-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
}
.region-message-editor .attachment-preview.attachment-preview-video:hover .video-play, .region-message-editor button.attachment-preview.attachment-preview-video.success.active .video-play, .region-message-editor button.attachment-preview.attachment-preview-video.info.active .video-play, .region-message-editor button.attachment-preview.attachment-preview-video.danger.active .video-play {
  box-shadow: var(--shadow-3);
}
.region-message-editor .action-bar {
  position: relative;
  padding: 8px;
}
.region-message-editor .action-bar .comment-template-button-dropdown {
  float: none;
  margin: 0px;
}
.region-message-editor .action-bar .options .comment-status-launcher {
  border-right: 1px solid var(--colour-system-line);
}
.region-message-editor .action-bar .options button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--colour-neutral);
  font-size: 15px;
  cursor: pointer;
}
.region-message-editor .action-bar .options button:disabled {
  opacity: 0.2;
  cursor: default;
}
.region-message-editor .action-bar .options button:hover:not(:disabled), .region-message-editor .action-bar .options button.success.active:not(:disabled), .region-message-editor .action-bar .options button.info.active:not(:disabled), .region-message-editor .action-bar .options button.danger.active:not(:disabled) {
  background-color: var(--colour-neutral-25);
}
.region-message-editor .action-bar .options button.emoji-launcher:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f118";
  display: block;
  transition: all 0.1s;
}
.region-message-editor .action-bar .options button.emoji-launcher:hover, .region-message-editor .action-bar .options button.emoji-launcher.success.active, .region-message-editor .action-bar .options button.emoji-launcher.info.active, .region-message-editor .action-bar .options button.emoji-launcher.danger.active {
  color: var(--colour-primary);
}
.region-message-editor .action-bar .options button.emoji-launcher:hover:before, .region-message-editor .action-bar .options button.emoji-launcher.success.active:before, .region-message-editor .action-bar .options button.emoji-launcher.info.active:before, .region-message-editor .action-bar .options button.emoji-launcher.danger.active:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f599";
  transform: rotate(10deg);
}
.region-message-editor .action-bar .options input[type=file] {
  display: none;
}
.region-message-editor .action-bar .send {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.region-message-editor .action-bar .send .button-dropdown {
  margin-right: 12px;
}
.region-message-editor .action-bar .send .button-dropdown > button {
  color: var(--colour-neutral);
}
.region-message-editor .action-bar .send .button-dropdown > button:hover, .region-message-editor .action-bar .send .button-dropdown > button.success.active, .region-message-editor .action-bar .send .button-dropdown > button.info.active, .region-message-editor .action-bar .send .button-dropdown > button.danger.active {
  color: var(--portal-theme);
}
.region-message-editor .message-editor:empty + .action-bar .submit {
  opacity: 0.2;
  pointer-events: none;
}
.region-message-editor .emoji-selector {
  display: none;
  left: 12px;
  bottom: 100%;
  animation: dropdown-up 0.2s;
}

.new-feedback-editor-desc {
  position: relative;
  padding-bottom: 42px;
}
.new-feedback-editor-desc.haspreview {
  padding-bottom: 116px;
}

.new-feedback-editor-actions {
  position: absolute;
  left: 8px;
  bottom: 8px;
}
.new-feedback-editor-actions > button {
  width: 32px;
  height: 32px;
  color: var(--colour-neutral);
  border-radius: 4px;
  background-color: var(--colour-neutral-10);
  cursor: pointer;
}
.new-feedback-editor-actions > button:hover:not(:disabled), .new-feedback-editor-actions > button.success.active:not(:disabled), .new-feedback-editor-actions > button.info.active:not(:disabled), .new-feedback-editor-actions > button.danger.active:not(:disabled) {
  color: var(--colour-primary);
  background-color: var(--colour-neutral-25);
}
.new-feedback-editor-actions > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.new-feedback-editor-actions .image-preview {
  position: relative;
  display: inline-block;
  margin: 0 6px 6px 0;
}
.new-feedback-editor-actions .image-preview > div {
  width: 100px;
  height: 60px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.new-feedback-editor-actions .image-preview button {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  color: var(--colour-system-text);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}

.dnd-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-overlay);
  color: var(--colour-on-accent);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.1s;
  border-radius: inherit;
}
.dnd-dropzone:before {
  content: "Drop your file(s) here";
}
.dnd-dropzone[data-size=medium] {
  font-size: 16px;
}
.dnd-dropzone[data-size=large] {
  font-size: 18px;
}
.dnd-dropzone[data-theme=light] {
  background-color: var(--colour-system-shadow-soft);
  text-shadow: 0px 1px 2px var(--colour-neutral-300);
}

.tiptap-editor {
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
.tiptap-editor.invalid {
  border-color: var(--portal-theme);
}
.tiptap-editor .tiptap-editor-content {
  padding: 12px;
}
.tiptap-editor .tiptap-editor-content > div {
  overflow: auto;
  height: 260px;
  outline: none;
}
.tiptap-editor .tiptap-editor-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  border-top: 1px solid var(--colour-input-border);
  border-radius: 0 0 8px 8px;
  background-color: var(--colour-neutral-10);
}
.tiptap-editor .tiptap-editor-toolbar button {
  margin-right: 4px;
}
.tiptap-editor .tiptap-editor-toolbar button.active, .tiptap-editor .tiptap-editor-toolbar button:hover, .tiptap-editor .tiptap-editor-toolbar button:active:not(:disabled), .tiptap-editor .tiptap-editor-toolbar button:focus:not(:disabled) {
  color: var(--portal-theme);
  border-color: var(--portal-theme);
  box-shadow: none;
}
.tiptap-editor .toolbar-dropdown button.dropdown-select {
  padding: 0;
  color: var(--colour-neutral-600);
  text-align: center;
}
.tiptap-editor .toolbar-dropdown button.dropdown-select.active, .tiptap-editor .toolbar-dropdown button.dropdown-select:hover, .tiptap-editor .toolbar-dropdown button.dropdown-select:active:not(:disabled), .tiptap-editor .toolbar-dropdown button.dropdown-select:focus:not(:disabled) {
  color: var(--portal-theme);
}
.tiptap-editor .toolbar-dropdown button.dropdown-select:before {
  display: none;
}
.tiptap-editor .toolbar-dropdown-body {
  display: none;
  position: absolute;
  z-index: 250;
  top: auto;
  bottom: 40px;
  left: 50%;
  margin: 0;
  width: 400px;
  max-width: none;
  padding: 24px;
  margin-left: -200px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  animation: dropdown-up 0.2s;
}
.tiptap-editor .toolbar-dropdown-body button.active, .tiptap-editor .toolbar-dropdown-body button:hover, .tiptap-editor .toolbar-dropdown-body button:active:not(:disabled), .tiptap-editor .toolbar-dropdown-body button:focus:not(:disabled) {
  color: var(--colour-system-text-inverse);
}
.tiptap-editor .toolbar-dropdown-body button:disabled:hover, .tiptap-editor .toolbar-dropdown-body button.success.active:disabled, .tiptap-editor .toolbar-dropdown-body button.info.active:disabled, .tiptap-editor .toolbar-dropdown-body button.danger.active:disabled {
  border-color: var(--colour-neutral-50);
}

.tiptap-content code {
  white-space: pre-line;
}

.thread-reply-form {
  position: relative;
}
.thread-reply-form.open {
  display: block;
}
.thread-reply-form .new-comment-container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--colour-input-bg);
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.thread-reply-form .new-comment-container:focus-within {
  border-color: var(--colour-input-border-hover);
}
.thread-reply-form .new-comment {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  outline: none;
  word-break: break-word;
}
.thread-reply-form .new-comment:focus {
  border-color: var(--colour-input-border-hover);
}
.thread-reply-form .new-comment:empty:before {
  content: attr(data-placeholder);
  color: var(--colour-system-text-placeholder);
  pointer-events: none;
}
.thread-reply-form .new-comment .at-name {
  padding: 0 2px;
  color: var(--colour-primary);
  background-color: rgba(96, 64, 255, 0.05);
  border-radius: 2px;
  user-select: none;
}
.thread-reply-form .new-comment-attachment {
  position: relative;
  display: inline-block;
  font-size: 12px;
}
.thread-reply-form .new-comment-attachment:not(:empty) {
  padding: 0 10px;
}
.thread-reply-form .new-comment-attachment img {
  display: block;
  max-width: 100px;
  max-height: 60px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.thread-reply-form .new-comment-attachment video {
  display: block;
  width: 100px;
  height: 60px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.thread-reply-form .new-comment-attachment span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 14px;
}
.thread-reply-form .new-comment-attachment .attachment-remove {
  position: absolute;
  right: 4px;
  top: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}
.thread-reply-form .new-comment-attachment .attachment-remove i {
  pointer-events: none;
}
.thread-reply-form .new-comment-attachment .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--colour-primary);
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  font-size: 16px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.thread-reply-form .new-comment-attachment.new-comment-attachment-video {
  cursor: pointer;
}
.thread-reply-form .new-comment-attachment.new-comment-attachment-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 10px;
  border-radius: 8px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
}
.thread-reply-form .new-comment-attachment.new-comment-attachment-video:hover .video-play, .thread-reply-form button.new-comment-attachment.new-comment-attachment-video.success.active .video-play, .thread-reply-form button.new-comment-attachment.new-comment-attachment-video.info.active .video-play, .thread-reply-form button.new-comment-attachment.new-comment-attachment-video.danger.active .video-play {
  box-shadow: var(--shadow-3);
}
.thread-reply-form .new-comment-toolbar {
  position: relative;
  height: 34px;
  padding: 0 4px 0 10px;
  border-radius: 0 0 8px 8px;
  text-align: right;
}
.thread-reply-form .new-comment-toolbar .attachment-launcher,
.thread-reply-form .new-comment-toolbar .comment-status-launcher,
.thread-reply-form .new-comment-toolbar .emoji-launcher,
.thread-reply-form .new-comment-toolbar .mention-launcher {
  float: left;
  height: 16px;
  line-height: 16px;
  margin: 8px 12px 0 0;
  font-size: 13px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.thread-reply-form .new-comment-toolbar .attachment-launcher label,
.thread-reply-form .new-comment-toolbar .comment-status-launcher label,
.thread-reply-form .new-comment-toolbar .emoji-launcher label,
.thread-reply-form .new-comment-toolbar .mention-launcher label {
  color: var(--colour-neutral);
}
.thread-reply-form .new-comment-toolbar .attachment-launcher:hover:not(.disabled), .thread-reply-form .new-comment-toolbar button.attachment-launcher.success.active:not(.disabled), .thread-reply-form .new-comment-toolbar button.attachment-launcher.info.active:not(.disabled), .thread-reply-form .new-comment-toolbar button.attachment-launcher.danger.active:not(.disabled),
.thread-reply-form .new-comment-toolbar .comment-status-launcher:hover:not(.disabled),
.thread-reply-form .new-comment-toolbar button.comment-status-launcher.success.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.comment-status-launcher.info.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.comment-status-launcher.danger.active:not(.disabled),
.thread-reply-form .new-comment-toolbar .emoji-launcher:hover:not(.disabled),
.thread-reply-form .new-comment-toolbar button.emoji-launcher.success.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.emoji-launcher.info.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.emoji-launcher.danger.active:not(.disabled),
.thread-reply-form .new-comment-toolbar .mention-launcher:hover:not(.disabled),
.thread-reply-form .new-comment-toolbar button.mention-launcher.success.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.mention-launcher.info.active:not(.disabled),
.thread-reply-form .new-comment-toolbar button.mention-launcher.danger.active:not(.disabled) {
  color: var(--colour-primary);
}
.thread-reply-form .new-comment-toolbar .attachment-launcher.disabled,
.thread-reply-form .new-comment-toolbar .comment-status-launcher.disabled,
.thread-reply-form .new-comment-toolbar .emoji-launcher.disabled,
.thread-reply-form .new-comment-toolbar .mention-launcher.disabled {
  opacity: 0.4;
  cursor: default;
}
.thread-reply-form .new-comment-toolbar .comment-status button {
  color: var(--colour-neutral);
}
.thread-reply-form .new-comment-toolbar .comment-status button:hover, .thread-reply-form .new-comment-toolbar .comment-status button.success.active, .thread-reply-form .new-comment-toolbar .comment-status button.info.active, .thread-reply-form .new-comment-toolbar .comment-status button.danger.active, .thread-reply-form .new-comment-toolbar .comment-status button:hover i, .thread-reply-form .new-comment-toolbar .comment-status button.success.active i, .thread-reply-form .new-comment-toolbar .comment-status button.info.active i, .thread-reply-form .new-comment-toolbar .comment-status button.danger.active i {
  color: var(--colour-primary);
}
.thread-reply-form .new-comment-toolbar .reply-submit {
  position: relative;
  width: 28px;
  height: 28px;
  line-height: 24px;
  margin-left: 8px;
  background-color: var(--colour-primary-dark-invert);
  color: var(--colour-system-text-inverse);
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}
.thread-reply-form .new-comment-toolbar .reply-submit:hover:not(:disabled), .thread-reply-form .new-comment-toolbar button.reply-submit.success.active:not(:disabled), .thread-reply-form .new-comment-toolbar button.reply-submit.info.active:not(:disabled), .thread-reply-form .new-comment-toolbar button.reply-submit.danger.active:not(:disabled) {
  background-color: var(--colour-primary-dark-invert);
  color: var(--colour-system-text-inverse);
}
.thread-reply-form .new-comment-toolbar .reply-submit:disabled {
  cursor: not-allowed;
}
.thread-reply-form .new-comment-toolbar .reply-submit.loading {
  color: transparent;
}
.thread-reply-form .new-comment-toolbar .reply-submit.loading:before, .thread-reply-form .new-comment-toolbar .reply-submit.loading:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid rgba(var(--colour-system-surface-rgb), 0.4);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}
.thread-reply-form .new-comment-toolbar .reply-submit i.fa-paper-plane {
  transform: rotate(10deg);
}
.thread-reply-form .new-comment-toolbar .ai-refine-button-dropdown {
  float: left;
  margin: 8px 12px 0 0;
}
.thread-reply-form .new-comment-toolbar .ai-refine-button-dropdown .ai-refine-launcher {
  display: block;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  color: var(--colour-neutral-400);
}
.thread-reply-form .new-comment-toolbar .ai-refine-result {
  position: s;
  display: none;
  width: 400px;
  padding: 12px;
}
.thread-reply-form .new-comment-toolbar .ai-refine-result .ai-refine-loader {
  display: none;
  height: 160px;
}
.thread-reply-form .new-comment-toolbar .ai-refine-result .ai-refine-result-text {
  display: none;
  overflow: auto;
  height: 160px;
  text-align: left;
}
.thread-reply-form .new-comment-toolbar .ai-refine-result .ai-fefine-apply {
  margin-top: 12px;
}
.thread-reply-form .new-comment-resolver {
  height: 1px;
  user-select: none;
  pointer-events: none;
}
.thread-reply-form .new-comment:empty ~ .new-comment-action-bar {
  display: none;
}
.thread-reply-form .new-comment:empty ~ .new-comment-action-bar .new-comment-toolbar .reply-submit {
  pointer-events: none;
  color: var(--colour-neutral-400);
  background-color: unset;
}
.thread-reply-form .new-comment:not(:empty) ~ .new-comment-action-bar .ai-refine-launcher {
  background: var(--gradient-shiny-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.thread-reply-form.ai-refining .new-comment {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}
.thread-reply-form.ai-refining .new-comment-toolbar .template-launcher,
.thread-reply-form.ai-refining .new-comment-toolbar .ai-refine-button-dropdown,
.thread-reply-form.ai-refining .new-comment-toolbar .emoji-launcher,
.thread-reply-form.ai-refining .new-comment-toolbar .attachment-launcher,
.thread-reply-form.ai-refining .new-comment-toolbar .mention-launcher,
.thread-reply-form.ai-refining .new-comment-toolbar .comment-status-launcher {
  pointer-events: none;
  opacity: 0.4;
}
.thread-reply-form .comment-status-launcher {
  border-right: 1px solid var(--colour-system-line);
}
.thread-reply-form .comment-status-launcher input[type=checkbox]:checked + label:before {
  border-color: var(--colour-warning);
  background-color: var(--colour-warning);
}
.thread-reply-form .mention-launcher > span {
  float: right;
  margin-left: 6px;
  font-size: 12px;
  user-select: none;
}
.thread-reply-form .mention-launcher i.mention-waring {
  color: var(--colour-primary-dark-invert);
}
.thread-reply-form .mention-list {
  left: 30px;
  top: 100%;
  margin: 4px 0 20px 0;
  border-radius: 8px;
}
.thread-reply-form .mention-list[direction=up] {
  top: auto;
  bottom: 36px;
  margin: 0;
}
.thread-reply-form .at-list {
  position: absolute;
  left: 10px;
  top: 100%;
  min-width: 150px;
  margin-top: -40px;
  padding: 8px 0;
  border-radius: 8px;
  animation: fadeIn 0.1s;
}
.thread-reply-form .emoji-selector {
  display: none;
  left: 10px;
  top: 100%;
  margin: 4px 0 20px 0;
  animation: dropdown 0.2s;
}
.thread-reply-form .emoji-selector[direction=up] {
  top: auto;
  bottom: 36px;
  margin: 0;
  animation: dropdown-up 0.2s;
}
.thread-reply-form.internal .new-comment-container {
  color: var(--colour-internal-text);
  background-color: var(--colour-internal-surface);
  border: 1px solid var(--colour-internal-border);
}
.thread-reply-form.internal .new-comment-container .comment-status-launcher input[type=checkbox] + label {
  color: var(--colour-internal-launcher);
}
.thread-reply-form.internal .new-comment-container .template-launcher,
.thread-reply-form.internal .new-comment-container .ai-refine-launcher,
.thread-reply-form.internal .new-comment-container .emoji-launcher,
.thread-reply-form.internal .new-comment-container .attachment-launcher,
.thread-reply-form.internal .new-comment-container .mention-launcher {
  color: var(--colour-internal-launcher);
}
.thread-reply-form.internal .new-comment-container .template-launcher:hover:not(.disabled), .thread-reply-form.internal .new-comment-container button.template-launcher.success.active:not(.disabled), .thread-reply-form.internal .new-comment-container button.template-launcher.info.active:not(.disabled), .thread-reply-form.internal .new-comment-container button.template-launcher.danger.active:not(.disabled),
.thread-reply-form.internal .new-comment-container .ai-refine-launcher:hover:not(.disabled),
.thread-reply-form.internal .new-comment-container button.ai-refine-launcher.success.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.ai-refine-launcher.info.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.ai-refine-launcher.danger.active:not(.disabled),
.thread-reply-form.internal .new-comment-container .emoji-launcher:hover:not(.disabled),
.thread-reply-form.internal .new-comment-container button.emoji-launcher.success.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.emoji-launcher.info.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.emoji-launcher.danger.active:not(.disabled),
.thread-reply-form.internal .new-comment-container .attachment-launcher:hover:not(.disabled),
.thread-reply-form.internal .new-comment-container button.attachment-launcher.success.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.attachment-launcher.info.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.attachment-launcher.danger.active:not(.disabled),
.thread-reply-form.internal .new-comment-container .mention-launcher:hover:not(.disabled),
.thread-reply-form.internal .new-comment-container button.mention-launcher.success.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.mention-launcher.info.active:not(.disabled),
.thread-reply-form.internal .new-comment-container button.mention-launcher.danger.active:not(.disabled) {
  color: var(--colour-warning);
}
.thread-reply-form.internal .new-comment-container .template-launcher i.mention-waring,
.thread-reply-form.internal .new-comment-container .ai-refine-launcher i.mention-waring,
.thread-reply-form.internal .new-comment-container .emoji-launcher i.mention-waring,
.thread-reply-form.internal .new-comment-container .attachment-launcher i.mention-waring,
.thread-reply-form.internal .new-comment-container .mention-launcher i.mention-waring {
  color: var(--colour-warning);
}
.thread-reply-form.internal .reply-submit {
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-warning);
}
.thread-reply-form.internal .reply-submit:hover:not(:disabled), .thread-reply-form.internal button.reply-submit.success.active:not(:disabled), .thread-reply-form.internal button.reply-submit.info.active:not(:disabled), .thread-reply-form.internal button.reply-submit.danger.active:not(:disabled) {
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-warning-700);
}
.thread-reply-form.internal .new-comment .at-name {
  color: var(--colour-warning);
}
.thread-reply-form.internal .new-comment:empty:before {
  content: "Add an internal note...";
}
.thread-reply-form.internal .new-comment:empty + div {
  display: none;
}
.thread-reply-form.internal .new-comment:empty + div .new-comment-toolbar .reply-submit {
  pointer-events: none;
  color: var(--colour-neutral-300);
  background-color: unset;
}

.comment-template-box {
  width: 480px;
  height: 250px;
}
.comment-template-box .feedback-comment-template-container {
  display: grid;
  grid-template-columns: 200px auto;
  height: 100%;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector {
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--colour-system-line);
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .search-box-container {
  position: sticky;
  top: 0;
  padding: 4px;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .search-box-container input {
  box-shadow: none;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list {
  margin: 8px;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list .empty-state {
  padding: 12px;
  color: var(--colour-neutral-400);
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item.hovered {
  background-color: var(--colour-neutral-25);
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .template-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--colour-system-text);
}
.comment-template-box .feedback-comment-template-container .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item i {
  font-size: 11px;
  color: var(--colour-neutral-300);
}
.comment-template-box .feedback-comment-template-container .feedback-comment-template-preview .feedback-comment-template-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-template-preview .feedback-comment-template-preview-header > span {
  margin-left: 12px;
  text-transform: uppercase;
  font-size: 10px;
  text-align: left;
  color: var(--colour-neutral);
  font-weight: 500;
}
.comment-template-box .feedback-comment-template-container .feedback-comment-template-preview .feedback-comment-template-content {
  overflow: auto;
  max-height: 216px;
  padding: 0 12px 12px 12px;
  word-break: break-word;
  text-align: left;
  font-size: 13px;
  color: var(--colour-system-text);
}

.comment-template-button-dropdown {
  float: left;
  margin: 8px 12px 0 0;
}
.comment-template-button-dropdown .template-launcher {
  display: block;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  color: var(--colour-neutral-400);
}
.comment-template-button-dropdown .template-launcher:hover, .comment-template-button-dropdown button.template-launcher.success.active, .comment-template-button-dropdown button.template-launcher.info.active, .comment-template-button-dropdown button.template-launcher.danger.active {
  color: var(--colour-primary-dark-invert);
}
.comment-template-button-dropdown .comment-template {
  max-width: none;
}

.comment-template-edit-box .feedback-comment-template-edit {
  display: grid;
  grid-template-columns: 400px auto;
  height: calc(100vh - 200px);
}
.comment-template-edit-box .feedback-comment-template-edit .search-result-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.comment-template-edit-box .feedback-comment-template-edit .search-result-container .search-result-empty {
  background-color: transparent;
}
.comment-template-edit-box .feedback-comment-template-edit .new-template {
  position: absolute;
  top: 24px;
  right: 24px;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector {
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--colour-system-line);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list {
  padding-bottom: 24px;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item {
  position: relative;
  padding: 16px 48px 16px 24px;
  border-bottom: 1px solid var(--colour-system-line);
  cursor: pointer;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item.selected {
  background-color: var(--colour-neutral-10);
  box-shadow: 4px 0 0 0 var(--colour-feedback-600) inset;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .template-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .template-content {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--colour-neutral);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .action-btns {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  position: absolute;
  top: 8px;
  right: 4px;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item:hover, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.success.active, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.info.active, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.danger.active {
  background-color: var(--colour-neutral-25);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item:hover .action-btns, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.success.active .action-btns, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.info.active .action-btns, .comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list button.feedback-comment-template-item.danger.active .action-btns {
  opacity: 1;
  pointer-events: auto;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .creator {
  position: absolute;
  display: inline-block;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  color: var(--colour-neutral);
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .creator.user-assign-empty {
  border: 1px dashed var(--colour-system-line);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .feedback-comment-template-list .feedback-comment-template-item .creator.user-assign-empty:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\+";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  line-height: 10px;
  margin: 0 -2px 0 0;
  border-radius: 50%;
  font-size: 8px;
  text-align: center;
  background-color: var(--colour-system-surface);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .search-box-container {
  position: sticky;
  z-index: 10;
  top: 0;
  padding: 12px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .search-box-container input {
  border: none;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-selector .submit-buttons {
  bottom: 24px;
  position: absolute;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-template-form {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  padding: 24px 32px;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-template-form form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-template-form .preview-bar {
  overflow: hidden;
}
.comment-template-edit-box .feedback-comment-template-edit .feedback-comment-template-form .preview-bar .wildcards {
  position: absolute;
}
.comment-template-edit-box .feedback-comment-template-edit .empty-state {
  padding: 16px 24px;
  color: var(--colour-neutral-400);
}

.notification-settings {
  position: relative;
  padding: 8px 60px 8px 0;
}
.notification-settings > button {
  position: absolute;
  right: 0;
  top: 8px;
}
.notification-settings .title {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
}

.user-identification-info .region-basic {
  display: grid;
  grid-template-columns: 48px auto;
  margin-bottom: 24px;
}
.user-identification-info .region-basic .user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
}
.user-identification-info .region-basic .user-info .user-info-primary {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.user-identification-info .region-basic .user-info .user-info-secondary {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--colour-neutral);
}
.user-identification-info .average-rating,
.user-identification-info .average-nps {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
}
.user-identification-info .average-rating i,
.user-identification-info .average-nps i {
  color: var(--colour-attention);
}
.user-identification-info .average-rating .icon,
.user-identification-info .average-nps .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
}
.user-identification-info .average-nps .icon {
  background-color: var(--colour-system-surface);
}
.user-identification-info .list-count {
  padding: 0 8px 8px 8px;
  border-bottom: 1px solid var(--colour-system-line);
  font-size: 13px;
  color: var(--colour-neutral);
}
.user-identification-info .load-more {
  margin-top: 12px;
}
.user-identification-info .load-more span {
  color: var(--colour-primary);
  font-weight: 500;
  cursor: pointer;
}
.user-identification-info .section-heading {
  margin-bottom: 12px;
  font-weight: 600;
}
.user-identification-info .region-last-session {
  margin-bottom: 24px;
}
.user-identification-info .region-last-session .last-session-watch {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary-dark-invert);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.user-identification-info .region-last-session .last-session-properties {
  display: grid;
  grid-template-columns: 32px auto;
  padding: 16px 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
}
.user-identification-info .region-last-session .last-session-properties > div {
  padding: 6px 0;
}
.user-identification-info .region-last-session .last-session-properties > div:nth-child(odd) {
  color: var(--colour-neutral-400);
}
.user-identification-info .region-properties {
  margin-bottom: 24px;
}
.user-identification-info .region-properties .user-properties {
  padding: 16px 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  display: grid;
  grid-template-columns: 35% calc(65% - 64px) 64px;
}
.user-identification-info .region-properties .user-properties > div {
  padding: 6px 0;
}
.user-identification-info .region-properties .user-properties > div:nth-child(3n+1) {
  color: var(--colour-neutral);
  word-break: break-all;
}
.user-identification-info .region-properties .user-properties > div:nth-child(3n) {
  text-align: right;
}
.user-identification-info .no-data-captured {
  padding: 16px 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  color: var(--colour-neutral);
  font-style: italic;
}
.user-identification-info .feedback-recent,
.user-identification-info .recent-survey-response,
.user-identification-info .session-replay-recent {
  position: relative;
  z-index: 10;
  padding: 16px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--colour-neutral-25);
  cursor: pointer;
}
.user-identification-info .feedback-recent:hover:before, .user-identification-info button.feedback-recent.success.active:before, .user-identification-info button.feedback-recent.info.active:before, .user-identification-info button.feedback-recent.danger.active:before,
.user-identification-info .recent-survey-response:hover:before,
.user-identification-info button.recent-survey-response.success.active:before,
.user-identification-info button.recent-survey-response.info.active:before,
.user-identification-info button.recent-survey-response.danger.active:before,
.user-identification-info .session-replay-recent:hover:before,
.user-identification-info button.session-replay-recent.success.active:before,
.user-identification-info button.session-replay-recent.info.active:before,
.user-identification-info button.session-replay-recent.danger.active:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  right: 0;
  bottom: 4px;
  left: 0;
  border-radius: 8px;
  background-color: var(--colour-neutral-10);
  cursor: pointer;
}
.user-identification-info .session-replay-recent .session-duration {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 20px;
  line-height: 20px;
  margin-left: 12px;
  padding: 0 6px;
  color: var(--colour-neutral);
  background-color: var(--colour-neutral-25);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.user-identification-info .session-replay-recent .session-duration:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f04b";
  margin-right: 4px;
  color: var(--colour-neutral-300);
  font-size: 10px;
}
.user-identification-info .session-replay-recent .session-duration .session-online {
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: var(--colour-success);
}

.portal-feedback-preview {
  position: relative;
  margin-bottom: 48px;
}
[data-embed=widget] .portal-feedback-preview {
  margin-bottom: 32px;
}
.portal-feedback-preview .content-grid {
  display: grid;
  grid-template-columns: 100px calc(100% - 100px);
}
@media (max-width: 1072px) {
  .portal-feedback-preview .content-grid {
    grid-template-columns: 48px calc(100% - 48px);
  }
}
.portal-feedback-preview[data-mode=preview] {
  border-radius: 4px;
  cursor: pointer;
}
.portal-feedback-preview[data-mode=preview][data-pinned="1"], .portal-feedback-preview[data-mode=preview][data-pinned="1"]:hover {
  background-color: var(--colour-portal-pinned-bg);
  box-shadow: 0 0 0 16px var(--colour-portal-pinned-bg);
}
[data-embed=widget] .portal-feedback-preview[data-mode=preview][data-pinned="1"], [data-embed=widget] .portal-feedback-preview[data-mode=preview][data-pinned="1"]:hover {
  box-shadow: 0 0 0 8px var(--colour-portal-pinned-bg);
}
.portal-feedback-preview[data-mode=preview][data-pinned="1"] h3, .portal-feedback-preview[data-mode=preview][data-pinned="1"]:hover h3 {
  margin-right: 100px;
}
.portal-feedback-preview[data-mode=preview]:hover, button.portal-feedback-preview[data-mode=preview].success.active, button.portal-feedback-preview[data-mode=preview].info.active, button.portal-feedback-preview[data-mode=preview].danger.active {
  background-color: var(--colour-neutral-10);
  box-shadow: 0 0 0 16px var(--colour-neutral-10);
}
[data-embed=widget] .portal-feedback-preview[data-mode=preview]:hover, [data-embed=widget] button.portal-feedback-preview[data-mode=preview].success.active, [data-embed=widget] button.portal-feedback-preview[data-mode=preview].info.active, [data-embed=widget] button.portal-feedback-preview[data-mode=preview].danger.active {
  box-shadow: 0 0 0 8px var(--colour-neutral-10);
}
.portal-feedback-preview[data-mode=preview]:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--colour-neutral-25);
  pointer-events: none;
}
[data-embed=widget] .portal-feedback-preview[data-mode=preview]:after {
  bottom: -16px;
}
.portal-feedback-preview[data-mode=preview] h3 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-embed=widget] .portal-feedback-preview[data-mode=preview] h3 {
  font-size: 15px;
}
.portal-feedback-preview[data-mode=preview] .feedback-description {
  color: var(--colour-neutral);
}
.portal-feedback-preview[data-mode=preview] .feedback-screenshot img,
.portal-feedback-preview[data-mode=preview] .feedback-screenshot video {
  height: 86px;
}
.portal-feedback-preview[data-mode=preview] .feedback-screenshot .pin {
  transform: scale(0.7);
}
.portal-feedback-preview[data-mode=roadmap] {
  margin-bottom: 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  cursor: pointer;
  transition: all 0.1s;
}
.portal-feedback-preview[data-mode=roadmap]:last-child {
  margin-bottom: 0;
}
.portal-feedback-preview[data-mode=roadmap]:hover, button.portal-feedback-preview[data-mode=roadmap].success.active, button.portal-feedback-preview[data-mode=roadmap].info.active, button.portal-feedback-preview[data-mode=roadmap].danger.active {
  background-color: var(--colour-neutral-10);
}
.portal-feedback-preview[data-mode=roadmap] .content-grid {
  padding: 16px;
  grid-template-columns: 48px calc(100% - 48px);
}
.portal-feedback-preview[data-mode=roadmap] .vote,
.portal-feedback-preview[data-mode=roadmap] .unvote {
  width: 36px;
  height: 36px;
  font-size: 14px;
  padding-top: 10px;
}
.portal-feedback-preview[data-mode=roadmap] .vote {
  padding-top: 14px;
}
.portal-feedback-preview[data-mode=roadmap] .vote:before {
  top: 6px;
}
.portal-feedback-preview[data-mode=roadmap] .feedback-details {
  display: flex;
  align-items: center;
  padding-top: 0;
}
.portal-feedback-preview[data-mode=roadmap] .feedback-stats {
  margin-top: 0;
}
.portal-feedback-preview[data-mode=roadmap] .comment-count {
  float: none;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
}
.portal-feedback-preview[data-mode=roadmap] .comment-count:before {
  margin-right: 4px;
}
.portal-feedback-preview[data-mode=roadmap] h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 1072px) {
  .portal-feedback-preview[data-mode=roadmap] h3 {
    font-size: 14px;
  }
}
.portal-feedback-preview[data-mode=roadmap] .feedback-screenshot {
  position: relative;
  margin: 0;
}
.portal-feedback-preview[data-mode=roadmap] .feedback-screenshot > div {
  position: relative;
  margin: 0;
}
.portal-feedback-preview[data-mode=roadmap] .feedback-screenshot > div .count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: var(--colour-system-surface-2);
  color: var(--colour-neutral);
  font-size: 11px;
  font-weight: 500;
}
.portal-feedback-preview[data-mode=roadmap] .feedback-screenshot img,
.portal-feedback-preview[data-mode=roadmap] .feedback-screenshot video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}
.portal-feedback-preview .vote,
.portal-feedback-preview .unvote {
  position: relative;
  width: 64px;
  height: 64px;
  padding-top: 20px;
  background-color: var(--colour-portal-voted-bg);
  text-align: center;
  border-radius: 8px;
  font-size: 20px;
  user-select: none;
  cursor: auto;
}
@media (max-width: 1072px) {
  .portal-feedback-preview .vote,
  .portal-feedback-preview .unvote {
    width: 36px;
    height: 36px;
    font-size: 14px;
    padding-top: 10px;
  }
}
.portal-feedback-preview .vote {
  padding-top: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.portal-feedback-preview .vote:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0de";
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  color: var(--colour-neutral-400);
  font-size: 14px;
  transition: all 0.1s linear;
}
@media (max-width: 1072px) {
  .portal-feedback-preview .vote {
    padding-top: 14px;
  }
  .portal-feedback-preview .vote:before {
    top: 6px;
  }
}
.portal-feedback-preview .vote:hover:before, .portal-feedback-preview button.vote.success.active:before, .portal-feedback-preview button.vote.info.active:before, .portal-feedback-preview button.vote.danger.active:before {
  color: var(--portal-theme);
  transform: translateY(-1px);
}
.portal-feedback-preview .vote.animating:before {
  opacity: 0;
}
.portal-feedback-preview .vote.animating:after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -64px 0 0 -50px;
  background-image: url("/image/heart_animation.png");
  background-repeat: no-repeat;
  background-position: -2800px 0;
  opacity: 0;
  animation: fave-heart 1s steps(28);
  transform: scale(0.5);
  pointer-events: none;
}
:root[data-colour-scheme=light] .portal-feedback-preview .vote.voted {
  box-shadow: 0 0 0 1px var(--portal-theme);
}
:root[data-colour-scheme=light] .portal-feedback-preview .vote.voted:before {
  color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-feedback-preview .vote.voted {
    box-shadow: 0 0 0 1px var(--portal-theme);
  }
  :root:not([data-colour-scheme]) .portal-feedback-preview .vote.voted:before {
    color: var(--portal-theme);
  }
}
:root[data-colour-scheme=dark] .portal-feedback-preview .vote.voted {
  box-shadow: 0 0 0 1px var(--colour-neutral-400);
}
:root[data-colour-scheme=dark] .portal-feedback-preview .vote.voted:before {
  color: var(--colour-neutral-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .portal-feedback-preview .vote.voted {
    box-shadow: 0 0 0 1px var(--colour-neutral-400);
  }
  :root:not([data-colour-scheme]) .portal-feedback-preview .vote.voted:before {
    color: var(--colour-neutral-400);
  }
}
@keyframes fave-heart {
  0% {
    background-position: 0 0;
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    background-position: -2800px 0;
    transform: scale(0.5);
    opacity: 1;
  }
}
.portal-feedback-preview .feedback-details {
  padding-top: 8px;
}
@media (max-width: 1072px) {
  .portal-feedback-preview .feedback-details {
    padding-top: 0;
  }
}
.portal-feedback-preview .author-details {
  display: grid;
  grid-template-columns: 42px auto;
  margin-bottom: 12px;
}
.portal-feedback-preview .author-details .name {
  font-weight: 600;
}
.portal-feedback-preview .author-details .date {
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-feedback-preview h3 {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.portal-feedback-preview .pin-mark,
.portal-feedback-preview .pin-mark-roadmap {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--colour-warning);
  border-radius: 4px;
  color: var(--colour-warning);
  background-color: var(--colour-system-surface);
}
.portal-feedback-preview .pin-mark i,
.portal-feedback-preview .pin-mark-roadmap i {
  margin-right: 2px;
  font-size: 10px;
  transform: rotate(45deg);
}
.portal-feedback-preview .pin-mark-roadmap {
  top: 6px;
  right: 6px;
}
.portal-feedback-preview .pin-mark-inline {
  float: left;
  margin: -2px 8px 0 0;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--colour-warning);
  border-radius: 4px;
  color: var(--colour-warning);
}
.portal-feedback-preview .pin-mark-inline i {
  margin-right: 2px;
  font-size: 10px;
  transform: rotate(45deg);
}
.portal-feedback-preview .feedback-description {
  margin-bottom: 12px;
  word-break: break-word;
}
.portal-feedback-preview .feedback-description a {
  color: var(--portal-theme);
}
.portal-feedback-preview .feedback-stats {
  position: relative;
  margin-top: 24px;
}
[data-embed=widget] .portal-feedback-preview .feedback-stats {
  margin-top: 4px;
}
.portal-feedback-preview .feedback-status {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 8px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  font-size: 12px;
  cursor: default;
}
.portal-feedback-preview .feedback-tags {
  display: inline-block;
  font-size: 12px;
  word-break: break-word;
  margin-top: 8px;
}
.portal-feedback-preview .feedback-tags > a,
.portal-feedback-preview .feedback-tags > span {
  margin-right: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--portal-theme);
  white-space: nowrap;
}
.portal-feedback-preview .feedback-tags > a:hover {
  text-decoration: underline;
}
.portal-feedback-preview .feedback-my-actions {
  float: right;
}
.portal-feedback-preview .feedback-my-edit,
.portal-feedback-preview .feedback-my-delete {
  margin-left: 4px;
  color: var(--colour-neutral);
}
.portal-feedback-preview .feedback-screenshot {
  margin-top: 16px;
}
.portal-feedback-preview .feedback-screenshot > div {
  position: relative;
  display: inline-block;
  margin: 0 8px 8px 0;
}
.portal-feedback-preview .feedback-screenshot > div:last-child {
  margin-right: 0;
}
.portal-feedback-preview .feedback-screenshot > div:hover .expand {
  display: block;
}
.portal-feedback-preview .feedback-screenshot > div.expanded img,
.portal-feedback-preview .feedback-screenshot > div.expanded video {
  width: 100%;
  height: auto;
}
.portal-feedback-preview .feedback-screenshot > div.expanded .pin {
  transform: scale(1.4);
}
.portal-feedback-preview .feedback-screenshot > div.expanded .video-play {
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 56px;
}
.portal-feedback-preview .feedback-screenshot img,
.portal-feedback-preview .feedback-screenshot video {
  display: inline-block;
  height: 140px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
  border-radius: 8px;
  vertical-align: top;
  cursor: pointer;
  object-fit: contain;
}
.portal-feedback-preview .feedback-screenshot .pin {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background-color: var(--portal-theme);
  color: var(--colour-system-text-inverse);
  text-align: center;
  font-size: 8px;
  font-weight: 500;
  user-select: none;
  animation: fadeIn 0.1s;
  pointer-events: none;
}
.portal-feedback-preview .feedback-screenshot .video-play {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  text-align: center;
  font-size: 24px;
  color: var(--portal-theme);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.portal-feedback-preview .feedback-screenshot .video-play:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f144";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.portal-feedback-preview .feedback-screenshot .expand {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 2px;
  background-color: var(--colour-system-surface);
  text-align: center;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  font-size: 12px;
}
.portal-feedback-preview .feedback-screenshot .expand:after {
  display: block;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f065";
}
.portal-feedback-preview .feedback-screenshot .expand:hover, .portal-feedback-preview .feedback-screenshot button.expand.success.active, .portal-feedback-preview .feedback-screenshot button.expand.info.active, .portal-feedback-preview .feedback-screenshot button.expand.danger.active {
  color: var(--portal-theme);
}
.portal-feedback-preview .feedback-screenshot .expand:hover:after, .portal-feedback-preview .feedback-screenshot button.expand.success.active:after, .portal-feedback-preview .feedback-screenshot button.expand.info.active:after, .portal-feedback-preview .feedback-screenshot button.expand.danger.active:after {
  transform: scale(1.1);
}
.portal-feedback-preview .comment-count {
  float: right;
  color: var(--colour-neutral);
  font-weight: 500;
}
.portal-feedback-preview .comment-count:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b0";
  display: inline-block;
  margin-right: 8px;
  transform: translateY(1px);
  color: var(--colour-neutral-300);
}
@media (max-width: 1072px) {
  .portal-feedback-preview .comment-count {
    top: 0;
  }
}
.portal-feedback-preview .region-video-player {
  position: relative;
  width: 400px;
  height: 300px;
  margin-top: 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.portal-feedback-preview .feedback-attachment {
  margin-top: 12px;
  font-size: 12px;
}
.portal-feedback-preview .feedback-attachment a {
  color: var(--colour-neutral);
}
.portal-feedback-preview .feedback-attachment a:hover {
  color: var(--portal-theme);
}

.overlay.loaded .portal-feedback-details, .loaded.mask .portal-feedback-details, .loaded.mask-light .portal-feedback-details, .loaded.mask-dark .portal-feedback-details {
  opacity: 1;
  transform: none;
  animation: none;
}

.portal-feedback-details {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1024px;
  max-width: 100%;
  padding: 42px 0;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  opacity: 0.5;
  transform: translateX(10%);
  animation: opacityTransformRest 0.16s linear forwards;
}
[data-embed=widget] .portal-feedback-details {
  padding: 32px 0;
}
@media (max-width: 1072px) {
  .portal-feedback-details {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.portal-feedback-details.portal-feedback-details-small {
  width: 700px;
}
.portal-feedback-details .admin-actions {
  position: absolute;
  top: 0;
  left: -64px;
  bottom: 0;
  width: 64px;
  padding: 42px 0;
  background-color: var(--colour-system-surface);
  border-right: 1px solid var(--colour-system-line);
}
.portal-feedback-details .admin-actions:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-neutral-25);
  pointer-events: none;
}
@media (max-width: 1072px) {
  .portal-feedback-details .admin-actions {
    display: none;
  }
}
.portal-feedback-details .admin-actions > span {
  display: block;
  margin: 0 0 12px 0;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--portal-theme);
}
.portal-feedback-details .admin-actions .button-dropdown,
.portal-feedback-details .admin-actions .action {
  position: relative;
  display: block;
}
.portal-feedback-details .admin-actions .button-dropdown button,
.portal-feedback-details .admin-actions .action button {
  display: block;
  width: 42px;
  height: 42px;
  margin: auto auto 4px auto;
  border-radius: 50%;
  cursor: pointer;
  color: var(--colour-neutral);
}
.portal-feedback-details .admin-actions .button-dropdown button:hover, .portal-feedback-details .admin-actions .button-dropdown button.success.active, .portal-feedback-details .admin-actions .button-dropdown button.info.active, .portal-feedback-details .admin-actions .button-dropdown button.danger.active,
.portal-feedback-details .admin-actions .action button:hover,
.portal-feedback-details .admin-actions .action button.success.active,
.portal-feedback-details .admin-actions .action button.info.active,
.portal-feedback-details .admin-actions .action button.danger.active {
  color: var(--colour-system-text);
  background-color: var(--colour-neutral-50);
}
.portal-feedback-details .admin-actions .button-dropdown button a,
.portal-feedback-details .admin-actions .action button a {
  color: inherit;
}
.portal-feedback-details .admin-actions .button-dropdown button.active:before, .portal-feedback-details .admin-actions .button-dropdown button.active:after,
.portal-feedback-details .admin-actions .action button.active:before,
.portal-feedback-details .admin-actions .action button.active:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  margin: auto;
  border-radius: 4px;
  pointer-events: none;
}
.portal-feedback-details .admin-actions .button-dropdown button.active:before,
.portal-feedback-details .admin-actions .action button.active:before {
  height: 2px;
  background-color: var(--colour-neutral);
  transform: rotate(40deg) translateY(1px);
}
.portal-feedback-details .admin-actions .button-dropdown button.active:after,
.portal-feedback-details .admin-actions .action button.active:after {
  height: 1px;
  background-color: var(--colour-system-line);
  transform: rotate(40deg);
}
.portal-feedback-details .admin-actions .button-dropdown button.active:hover:after, .portal-feedback-details .admin-actions .button-dropdown button.active.success:after, .portal-feedback-details .admin-actions .button-dropdown button.active.info:after, .portal-feedback-details .admin-actions .button-dropdown button.active.danger:after,
.portal-feedback-details .admin-actions .action button.active:hover:after,
.portal-feedback-details .admin-actions .action button.active.success:after,
.portal-feedback-details .admin-actions .action button.active.info:after,
.portal-feedback-details .admin-actions .action button.active.danger:after {
  background-color: var(--colour-system-text);
}
.portal-feedback-details .admin-actions .button-dropdown .new-category button,
.portal-feedback-details .admin-actions .action .new-category button {
  width: auto;
  height: auto;
  border-radius: 0;
}
.portal-feedback-details .admin-actions .button-dropdown .new-category button:hover, .portal-feedback-details .admin-actions .button-dropdown .new-category button.success.active, .portal-feedback-details .admin-actions .button-dropdown .new-category button.info.active, .portal-feedback-details .admin-actions .button-dropdown .new-category button.danger.active,
.portal-feedback-details .admin-actions .action .new-category button:hover,
.portal-feedback-details .admin-actions .action .new-category button.success.active,
.portal-feedback-details .admin-actions .action .new-category button.info.active,
.portal-feedback-details .admin-actions .action .new-category button.danger.active {
  background-color: initial;
}
.portal-feedback-details .feedback-display {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 42px 0;
}
[data-embed=widget] .portal-feedback-details .feedback-display {
  padding: 24px 0;
}
.portal-feedback-details .region-preview {
  padding: 0 42px;
}
@media (max-width: 1072px) {
  .portal-feedback-details .region-preview {
    padding: 0 24px;
  }
}
.portal-feedback-details .region-preview .portal-feedback-preview {
  margin-bottom: 0;
}
.portal-feedback-details .region-new-comment {
  margin-top: 48px;
  padding: 0 42px;
}
[data-embed=widget] .portal-feedback-details .region-new-comment {
  margin-top: 32px;
}
@media (max-width: 1072px) {
  .portal-feedback-details .region-new-comment {
    padding: 0 24px;
  }
}
.portal-feedback-details .close {
  position: absolute;
  z-index: 50;
  top: 16px;
  right: 16px;
}
[data-embed=widget] .portal-feedback-details .close {
  display: none;
}
.portal-feedback-details .no-post {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 200px;
  margin: auto;
  text-align: center;
}
.portal-feedback-details .no-post i {
  font-size: 44px;
}
.portal-feedback-details .no-post h2 {
  margin: 12px 0 12px 0;
  font-weight: 700;
}
.portal-feedback-details .region-tab-header {
  display: flex;
  align-items: center;
  margin: 32px 42px 0 42px;
}
[data-embed=widget] .portal-feedback-details .region-tab-header {
  margin-top: 12px;
}
@media (max-width: 1072px) {
  .portal-feedback-details .region-tab-header {
    margin: 32px 0 0 0;
  }
}
.portal-feedback-details .region-tab-header > button {
  height: 44px;
  line-height: 44px;
  margin-right: 16px;
  color: var(--colour-neutral);
  cursor: pointer;
}
[data-embed=widget] .portal-feedback-details .region-tab-header > button {
  margin-right: 4px;
}
.portal-feedback-details .region-tab-header > button.active {
  background-color: transparent;
  cursor: default;
}
:root[data-colour-scheme=light] .portal-feedback-details .region-tab-header > button.active {
  color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-feedback-details .region-tab-header > button.active {
    color: var(--portal-theme);
  }
}
:root[data-colour-scheme=dark] .portal-feedback-details .region-tab-header > button.active {
  color: var(--colour-system-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .portal-feedback-details .region-tab-header > button.active {
    color: var(--colour-system-text);
  }
}
.portal-feedback-details .region-tab-item {
  display: none;
}
.portal-feedback-details .region-tab-item.active {
  display: block;
}
.portal-feedback-details .comment-off {
  margin: 0 42px;
}
.portal-feedback-details .voter-list {
  padding-left: 0;
  margin: 12px 42px 0 42px;
}
@media (max-width: 1072px) {
  .portal-feedback-details .voter-list {
    margin: 12px 24px 0 24px;
  }
}
.portal-feedback-details .voter-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--colour-system-line);
}
.portal-feedback-details .voter-item .voter-info {
  margin-left: 16px;
  font-size: 12px;
}
.portal-feedback-details .voter-item .voter-info .voter-name {
  font-weight: 600;
}
.portal-feedback-details .voter-item .voter-info .voter-name span {
  margin-left: 4px;
}
.portal-feedback-details .voter-item .voter-info .voter-name .badge-small {
  color: var(--portal-theme);
  background-color: var(--portal-theme-bg);
}
.portal-feedback-details .voter-item .voter-info .voter-email {
  color: var(--colour-neutral);
}
@media (max-width: 1072px) {
  .portal-feedback-details .region-comment-header {
    padding: 0 24px;
  }
}
.portal-feedback-details .region-comment-header .comment-count {
  float: left;
  color: var(--colour-neutral);
}
.portal-feedback-details .region-comment-header .comment-off {
  float: left;
  margin-left: 12px;
  font-style: italic;
  font-size: 13px;
  color: rgba(96, 128, 160, 0.8);
}
.portal-feedback-details .region-comment-header .comment-sort {
  float: right;
  color: var(--colour-neutral);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}
.portal-feedback-details .region-comment-header .comment-sort:hover, .portal-feedback-details .region-comment-header button.comment-sort.success.active, .portal-feedback-details .region-comment-header button.comment-sort.info.active, .portal-feedback-details .region-comment-header button.comment-sort.danger.active {
  color: var(--portal-theme);
}
.portal-feedback-details .region-comment-header .comment-sort:after {
  margin-left: 4px;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f160";
}
.portal-feedback-details .region-screenshot {
  position: relative;
  padding: 24px 0 16px 0;
}
.portal-feedback-details .region-screenshot:before {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--colour-system-line);
}
.portal-feedback-details .region-screenshot:last-child {
  border-bottom: 1px solid var(--colour-system-line);
}
.portal-feedback-details .region-screenshot > span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 110px;
  height: 24px;
  line-height: 24px;
  border-radius: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--colour-neutral);
  background-color: var(--colour-system-surface-2);
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.portal-new-announcement .tiptap-editor h2,
.announcement-content h2 {
  font-weight: 600;
  font-size: 18px;
}
[data-embed=widget] .portal-new-announcement .tiptap-editor h2,
[data-embed=widget] .announcement-content h2 {
  font-size: 14px;
}
.portal-new-announcement .tiptap-editor a,
.announcement-content a {
  color: var(--portal-theme);
}
.portal-new-announcement .tiptap-editor pre,
.announcement-content pre {
  padding: 16px;
  background-color: var(--colour-neutral-25);
  color: var(--colour-system-text);
  font-weight: 500;
}
.portal-new-announcement .tiptap-editor ul,
.portal-new-announcement .tiptap-editor ol,
.portal-new-announcement .tiptap-editor p,
.announcement-content ul,
.announcement-content ol,
.announcement-content p {
  line-height: 20px;
}

.portal-announcement-preview {
  position: relative;
  margin: 0 0 64px 0;
  border-radius: 4px;
}
.portal-announcement-preview:last-child {
  margin-bottom: 0;
}
.portal-announcement-preview:not(.portal-announcement-details) {
  cursor: pointer;
}
.portal-announcement-preview:not(.portal-announcement-details):hover, button.portal-announcement-preview.success.active:not(.portal-announcement-details), button.portal-announcement-preview.info.active:not(.portal-announcement-details), button.portal-announcement-preview.danger.active:not(.portal-announcement-details) {
  background-color: var(--colour-neutral-10);
  box-shadow: 0 0 0 24px var(--colour-neutral-10);
}
[data-embed=widget] .portal-announcement-preview:not(.portal-announcement-details):hover, [data-embed=widget] button.portal-announcement-preview.success.active:not(.portal-announcement-details), [data-embed=widget] button.portal-announcement-preview.info.active:not(.portal-announcement-details), [data-embed=widget] button.portal-announcement-preview.danger.active:not(.portal-announcement-details) {
  box-shadow: 0 2px 16px rgba(96, 128, 160, 0.1);
}
.portal-announcement-preview:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  content: "";
  height: 1px;
  background-color: var(--colour-neutral-25);
  pointer-events: none;
}
.portal-announcement-preview .announcement-custom-button button {
  min-width: 200px;
}
.portal-announcement-preview .announcement-custom-button button:focus:not(:disabled) {
  box-shadow: none;
}
[data-embed=widget] .portal-announcement-preview {
  padding: 16px;
  margin: 0 0 24px 0;
  border: 1px solid var(--colour-neutral-75);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(96, 128, 160, 0.1);
}
[data-embed=widget] .portal-announcement-preview:last-child {
  margin-bottom: 0;
}
[data-embed=widget] .portal-announcement-preview:after {
  display: none;
}
[data-embed=widget] .portal-announcement-preview .announcement-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
}
[data-embed=widget] .portal-announcement-preview .announcement-actions .announcement-custom-button {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 16px;
}
[data-embed=widget] .portal-announcement-preview .announcement-actions .announcement-custom-button button {
  width: 100%;
}
.portal-announcement-preview .created-by {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 4px;
  color: var(--colour-neutral);
}
[data-embed=widget] .portal-announcement-preview .created-by {
  font-size: 13px;
}
.portal-announcement-preview .announcement-main {
  position: relative;
  flex: 1;
}
.portal-announcement-preview .announcement-buttons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
.portal-announcement-preview .announcement-buttons .button-dropdown > button {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  color: var(--colour-neutral);
}
.portal-announcement-preview .announcement-buttons .button-dropdown > button:hover, .portal-announcement-preview .announcement-buttons .button-dropdown > button.success.active, .portal-announcement-preview .announcement-buttons .button-dropdown > button.info.active, .portal-announcement-preview .announcement-buttons .button-dropdown > button.danger.active {
  background-color: var(--colour-neutral-25);
}
.portal-announcement-preview .announcement-button {
  color: var(--colour-system-text);
}
.portal-announcement-preview .announcement-title {
  margin-right: 48px;
  font-size: 22px;
  font-weight: 600;
}
[data-embed=widget] .portal-announcement-preview .announcement-title {
  font-size: 15px;
}
.portal-announcement-preview .announcement-content {
  margin-top: 16px;
  font-size: 15px;
}
.portal-announcement-preview .announcement-content .read-more-dot,
.portal-announcement-preview .announcement-content .read-more {
  font-style: normal;
  font-size: 15px;
  font-weight: 400 !important;
}
[data-embed=widget] .portal-announcement-preview .announcement-content {
  font-size: 14px;
}
[data-embed=widget] .portal-announcement-preview .announcement-content .read-more-dot,
[data-embed=widget] .portal-announcement-preview .announcement-content .read-more {
  font-size: 14px;
}
.portal-announcement-preview .announcement-category {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  margin-top: 12px;
}
.portal-announcement-preview .announcement-category:empty {
  display: none;
}
:root[data-colour-scheme=light] .portal-announcement-preview .announcement-category .announcement-category-value {
  border: 1px solid var(--portal-theme);
  color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-category .announcement-category-value {
    border: 1px solid var(--portal-theme);
    color: var(--portal-theme);
  }
}
:root[data-colour-scheme=dark] .portal-announcement-preview .announcement-category .announcement-category-value {
  border: 1px solid var(--colour-neutral-200);
  color: var(--colour-system-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-category .announcement-category-value {
    border: 1px solid var(--colour-neutral-200);
    color: var(--colour-system-text);
  }
}
.portal-announcement-preview .announcement-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.portal-announcement-preview .announcement-actions .region-reactions {
  position: relative;
}
.portal-announcement-preview .announcement-actions .region-reactions > span {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 4px 4px 0;
  line-height: 16px;
  border: 1px solid var(--portal-theme-o-6);
  background-color: var(--portal-theme-bg);
  border-radius: 10px;
  cursor: pointer;
}
:root[data-colour-scheme=light] .portal-announcement-preview .announcement-actions .region-reactions > span {
  border: 1px solid var(--portal-theme-o-6);
  background-color: var(--portal-theme-bg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-actions .region-reactions > span {
    border: 1px solid var(--portal-theme-o-6);
    background-color: var(--portal-theme-bg);
  }
}
:root[data-colour-scheme=dark] .portal-announcement-preview .announcement-actions .region-reactions > span {
  border: 1px solid var(--colour-neutral-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-actions .region-reactions > span {
    border: 1px solid var(--colour-neutral-300);
  }
}
.portal-announcement-preview .announcement-actions .region-reactions > span .emoji {
  display: inline-block;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: top;
}
.portal-announcement-preview .announcement-actions .region-reactions > span .count {
  display: inline-block;
  font-size: 11px;
  vertical-align: top;
  color: var(--portal-theme);
}
:root[data-colour-scheme=light] .portal-announcement-preview .announcement-actions .region-reactions > span .count {
  color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-actions .region-reactions > span .count {
    color: var(--portal-theme);
  }
}
:root[data-colour-scheme=dark] .portal-announcement-preview .announcement-actions .region-reactions > span .count {
  color: var(--colour-neutral-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .portal-announcement-preview .announcement-actions .region-reactions > span .count {
    color: var(--colour-neutral-600);
  }
}
.portal-announcement-preview .announcement-actions .region-reactions .reaction-add {
  position: relative;
  padding: 2px 6px;
  margin: 0 4px 4px 0;
  line-height: 16px;
  border: 1px solid var(--colour-neutral-300);
  border-radius: 10px;
  cursor: pointer;
}
.portal-announcement-preview .announcement-actions .region-reactions .reaction-add:hover:before, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.success.active:before, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.info.active:before, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.danger.active:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f599";
  color: var(--colour-primary-dark-invert);
}
.portal-announcement-preview .announcement-actions .region-reactions .reaction-add:hover:after, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.success.active:after, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.info.active:after, .portal-announcement-preview .announcement-actions .region-reactions button.reaction-add.danger.active:after {
  color: var(--colour-primary-dark-invert);
}
.portal-announcement-preview .announcement-actions .region-reactions .reaction-add:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f118";
  display: inline-block;
  color: var(--colour-neutral-600);
  font-size: 14px;
  transition: all 0.1s;
}
.portal-announcement-preview .announcement-actions .region-reactions .reaction-add:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\+";
  position: absolute;
  right: 4px;
  top: 0px;
  width: 8px;
  height: 8px;
  line-height: 8px;
  border-radius: 50%;
  color: var(--colour-neutral-600);
  font-size: 6px;
  text-align: center;
  background-color: var(--colour-system-surface-2);
}
.portal-announcement-preview .announcement-actions .region-reactions .region-emoji {
  position: relative;
}
.portal-announcement-preview .announcement-feature-img {
  margin: 24px 0 0 0;
}
.portal-announcement-preview .announcement-feature-img img, .portal-announcement-preview .announcement-feature-img video {
  display: block;
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

.portal-announcement-details {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1024px;
  max-width: 100%;
  padding: 46px 0;
  margin: 0;
  background-color: var(--colour-system-surface);
  border-radius: 0;
  box-shadow: var(--shadow-2);
  opacity: 0.5;
  cursor: auto;
  transform: translateX(10%);
  animation: opacityTransformRest 0.16s linear forwards;
}
@media (max-width: 1072px) {
  .portal-announcement-details {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
[data-embed=widget] .portal-announcement-details {
  margin: 0;
}
.portal-announcement-details.portal-announcement-details-small {
  width: 700px;
}
.portal-announcement-details .close {
  position: absolute;
  z-index: 50;
  top: 16px;
  right: 16px;
}
.portal-announcement-details .portal-announcement-main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
}
.portal-announcement-details .portal-announcement-main .no-post {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 200px;
  margin: auto;
  text-align: center;
}
.portal-announcement-details .portal-announcement-main .no-post i {
  font-size: 44px;
}
.portal-announcement-details .portal-announcement-main .no-post h2 {
  margin: 12px 0 12px 0;
  font-weight: 700;
}
.portal-announcement-details .portal-announcement-heading,
.portal-announcement-details .portal-announcement-footer {
  flex-shrink: 0;
  padding: 0 42px;
}
@media (max-width: 1072px) {
  .portal-announcement-details .portal-announcement-heading,
  .portal-announcement-details .portal-announcement-footer {
    padding: 0 24px;
  }
}
.portal-announcement-details .portal-announcement-heading {
  margin-bottom: 24px;
}
.portal-announcement-details .portal-announcement-heading .portal-announcement-title {
  font-size: 20px;
  margin-bottom: 0;
  font-weight: 600;
}
.portal-announcement-details .portal-announcement-body {
  flex: 1;
  overflow: auto;
  padding: 24px 42px;
  border-top: 1px solid var(--colour-system-line);
  border-radius: 0 0 16px 16px;
  background-color: var(--colour-system-surface);
}
@media (max-width: 1072px) {
  .portal-announcement-details .portal-announcement-body {
    padding: 16px 24px;
  }
}
.portal-announcement-details .region-emoji {
  position: relative;
}
.portal-announcement-details .share-copy {
  margin-left: 8px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.portal-announcement-details .announcement-custom-button button:focus:not(:disabled) {
  box-shadow: none;
}

[data-embed=widget] .portal-announcement-details {
  border: none;
  border-radius: 0;
}
[data-embed=widget] .portal-announcement-details .portal-announcement-main {
  display: block;
  padding-bottom: 0;
  overflow: auto;
}
[data-embed=widget] .portal-announcement-details .portal-announcement-heading {
  margin-bottom: 0;
}
[data-embed=widget] .portal-announcement-details .portal-announcement-heading .portal-announcement-title {
  font-size: 15px;
}
[data-embed=widget] .portal-announcement-details .portal-announcement-body {
  padding-top: 0;
  background: var(--colour-system-surface);
  border: none;
}
[data-embed=widget] .portal-announcement-details .announcement-footer {
  display: block;
}
[data-embed=widget] .portal-announcement-details .announcement-custom-button a {
  display: block;
}
[data-embed=widget] .portal-announcement-details .announcement-custom-button button {
  width: 100%;
}

.portal-new-idea {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 42px;
}
@media (max-width: 1072px) {
  .portal-new-idea {
    padding: 32px;
  }
}
[data-embed=widget] .portal-new-idea {
  padding: 24px;
}
.portal-new-idea h2 {
  margin-bottom: 12px;
  font-weight: 600;
}
[data-embed=widget] .portal-new-idea h2 {
  font-size: 16px;
}
.portal-new-idea .idea-help {
  margin-bottom: 32px;
}
[data-embed=widget] .portal-new-idea .idea-help {
  margin-bottom: 24px;
}
.portal-new-idea .idea-help a {
  color: var(--portal-theme);
}
.portal-new-idea .idea-form {
  position: relative;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-neutral-10);
}
[data-embed=widget] .portal-new-idea .idea-form {
  background-color: var(--colour-system-surface);
}
.portal-new-idea .idea-title {
  position: relative;
}
.portal-new-idea .idea-title .region-suggestion {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 24px;
  border-radius: 8px;
}
[data-embed=widget] .portal-new-idea .idea-title .region-suggestion {
  padding: 12px;
}
.portal-new-idea .idea-title .region-suggestion .heading {
  margin: 0 0 12px 12px;
  color: var(--colour-neutral);
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion {
  display: grid;
  grid-template-columns: 60px calc(100% - 60px);
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion:last-child {
  margin-bottom: 0;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion:hover, .portal-new-idea .idea-title .region-suggestion button.feedback-suggestion.success.active, .portal-new-idea .idea-title .region-suggestion button.feedback-suggestion.info.active, .portal-new-idea .idea-title .region-suggestion button.feedback-suggestion.danger.active {
  background-color: var(--colour-neutral-10);
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .vote {
  position: relative;
  width: 36px;
  height: 36px;
  padding-top: 14px;
  border-radius: 8px;
  text-align: center;
  background-color: rgba(96, 128, 160, 0.1);
  cursor: default;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .vote:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0de";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  color: var(--colour-neutral);
  font-size: 14px;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .title {
  font-weight: 600;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .desc {
  color: var(--colour-neutral);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .categories {
  margin-top: 4px;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .categories a {
  margin-right: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--portal-theme);
  font-size: 12px;
  white-space: nowrap;
}
.portal-new-idea .idea-title .region-suggestion .feedback-suggestion .date {
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.portal-new-idea .category-select {
  position: absolute;
  z-index: 10;
  right: 4px;
  bottom: 8px;
}
[data-embed=widget] .portal-new-idea .category-select {
  display: none;
}
.portal-new-idea .category-select .category-label {
  margin-right: 4px;
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-new-idea .category-select .button-dropdown > button {
  min-height: 32px;
  padding: 0 32px 0 0;
  border: none;
  font-size: 13px;
  font-weight: 500;
  background-color: transparent;
}
[data-embed=widget] .portal-new-idea .category-select .button-dropdown > button {
  background-color: var(--colour-system-surface);
}
[data-embed=widget] .portal-new-idea .category-select .button-dropdown > button:hover, [data-embed=widget] .portal-new-idea .category-select .button-dropdown > button.success.active, [data-embed=widget] .portal-new-idea .category-select .button-dropdown > button.info.active, [data-embed=widget] .portal-new-idea .category-select .button-dropdown > button.danger.active {
  background-color: var(--colour-system-surface);
  box-shadow: none;
}
.portal-new-idea .category-select .button-dropdown > button.placeholder {
  padding: 0 32px 0 8px;
  color: var(--colour-neutral);
}
.portal-new-idea .idea-title {
  margin: 8px 0 4px 0;
}
.portal-new-idea .idea-title input[type=text],
.portal-new-idea .idea-title input[type=email] {
  height: 32px;
  padding: 0 16px;
  border: none;
  font-size: 16px;
  font-weight: 600;
}
.portal-new-idea .idea-title input[type=text]::placeholder,
.portal-new-idea .idea-title input[type=email]::placeholder {
  color: var(--colour-neutral);
}
.portal-new-idea .screenshot-attach {
  overflow: hidden;
  padding-top: 12px;
}
.portal-new-idea .screenshot-attach .preview {
  float: left;
}
.portal-new-idea .screenshot-attach .preview > div {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 60px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  vertical-align: top;
}
[data-embed=widget] .portal-new-idea .screenshot-attach .preview > div {
  width: 42px;
  height: 32px;
}
.portal-new-idea .screenshot-attach .preview > div .remove {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}
.portal-new-idea .screenshot-attach .add {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  float: left;
  width: 100px;
  height: 60px;
  border: 1px dashed var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  color: var(--colour-neutral);
  text-align: center;
  cursor: pointer;
  user-select: none;
}
[data-embed=widget] .portal-new-idea .screenshot-attach .add {
  width: 42px;
  height: 32px;
}
.portal-new-idea .screenshot-attach .add:hover, .portal-new-idea .screenshot-attach button.add.success.active, .portal-new-idea .screenshot-attach button.add.info.active, .portal-new-idea .screenshot-attach button.add.danger.active {
  color: var(--portal-theme);
}
.portal-new-idea .screenshot-attach .add span:first-child {
  font-size: 28px;
}
[data-embed=widget] .portal-new-idea .screenshot-attach .add span:first-child {
  font-size: 16px;
}
.portal-new-idea .screenshot-attach .add span:last-child {
  position: absolute;
  top: 13px;
  right: 30px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 11px;
  border-radius: 50%;
  background: var(--colour-system-surface);
  text-align: center;
}
[data-embed=widget] .portal-new-idea .screenshot-attach .add span:last-child {
  display: none;
}
.portal-new-idea .error-msg {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: #FF4060;
}

.portal-new-idea-success {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--colour-system-surface);
  text-align: center;
}
.portal-new-idea-success > div {
  height: 100%;
  padding: 0 42px;
}
.portal-new-idea-success h3 {
  margin: 16px 0 8px 0;
  font-weight: 600;
}
.portal-new-idea-success a {
  color: var(--portal-theme);
}

.overlay.loaded .portal-announcement-details, .loaded.mask .portal-announcement-details, .loaded.mask-light .portal-announcement-details, .loaded.mask-dark .portal-announcement-details {
  opacity: 1;
  transform: none;
  animation: none;
}

.portal-announcement-details {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1024px;
  max-width: 100%;
  padding: 46px 0;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  opacity: 0.5;
  transform: translateX(10%);
  animation: opacityTransformRest 0.16s linear forwards;
}
@media (max-width: 1072px) {
  .portal-announcement-details {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.portal-announcement-details.portal-announcement-details-small {
  width: 700px;
}
.portal-announcement-details .close {
  position: absolute;
  z-index: 50;
  top: 20px;
  right: 20px;
}
[data-embed=widget] .portal-announcement-details .close {
  display: none;
}

.portal-new-announcement {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}
.portal-new-announcement .new-announcement-heading,
.portal-new-announcement .new-announcement-footer {
  flex-shrink: 0;
  padding: 0 42px;
}
.portal-new-announcement .new-announcement-footer {
  padding-top: 24px;
  border-top: 1px solid var(--colour-neutral-75);
}
.portal-new-announcement .new-announcement-heading h2 {
  margin-bottom: 24px;
  font-weight: 600;
}
.portal-new-announcement .new-announcement-body {
  flex: 1;
  overflow: auto;
  padding: 24px 42px;
  border-top: 1px solid var(--colour-system-line);
  border-radius: 0 0 16px 16px;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
.portal-new-announcement .dropdown-tag-select {
  margin-bottom: 48;
}
.portal-new-announcement input[type=text].solid:focus,
.portal-new-announcement input[type=text].solid:hover:not(:disabled),
.portal-new-announcement input[type=datetime-local].solid:focus,
.portal-new-announcement input[type=datetime-local].solid:hover:not(:disabled),
.portal-new-announcement input[type=url].solid:focus,
.portal-new-announcement input[type=url].solid:hover:not(:disabled) {
  box-shadow: unset;
}
:root[data-colour-scheme=light] .portal-new-announcement input[type=text].solid:focus,
:root[data-colour-scheme=light] .portal-new-announcement input[type=text].solid:hover:not(:disabled),
:root[data-colour-scheme=light] .portal-new-announcement input[type=datetime-local].solid:focus,
:root[data-colour-scheme=light] .portal-new-announcement input[type=datetime-local].solid:hover:not(:disabled),
:root[data-colour-scheme=light] .portal-new-announcement input[type=url].solid:focus,
:root[data-colour-scheme=light] .portal-new-announcement input[type=url].solid:hover:not(:disabled) {
  border-color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=text].solid:focus,
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=text].solid:hover:not(:disabled),
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=datetime-local].solid:focus,
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=datetime-local].solid:hover:not(:disabled),
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=url].solid:focus,
  :root:not([data-colour-scheme]) .portal-new-announcement input[type=url].solid:hover:not(:disabled) {
    border-color: var(--portal-theme);
  }
}
.portal-new-announcement .screenshot-attach .preview > div {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 60px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  vertical-align: top;
}
.portal-new-announcement .screenshot-attach .preview > div video {
  width: 100%;
  height: 100%;
}
.portal-new-announcement .screenshot-attach .preview > div .remove {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
}
.portal-new-announcement .screenshot-attach .add {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100px;
  height: 60px;
  border: 1px dashed var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  color: var(--colour-neutral);
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.portal-new-announcement .screenshot-attach .add:hover, .portal-new-announcement .screenshot-attach button.add.success.active, .portal-new-announcement .screenshot-attach button.add.info.active, .portal-new-announcement .screenshot-attach button.add.danger.active {
  color: var(--portal-theme);
}
.portal-new-announcement .screenshot-attach .add span:first-child {
  font-size: 28px;
}
.portal-new-announcement .screenshot-attach .add span:last-child {
  position: absolute;
  top: 13px;
  right: 30px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 11px;
  border-radius: 50%;
  background: var(--colour-system-surface);
  text-align: center;
}
.portal-new-announcement .image-help {
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.portal-new-announcement .save-draft:hover:not(:disabled), .portal-new-announcement button.save-draft.success.active:not(:disabled), .portal-new-announcement button.save-draft.info.active:not(:disabled), .portal-new-announcement button.save-draft.danger.active:not(:disabled),
.portal-new-announcement .save-draft:active:not(:disabled),
.portal-new-announcement .save-draft:focus:not(:disabled) {
  border-color: var(--portal-theme);
}
.portal-new-announcement .button-group-submit {
  position: relative;
  overflow: visible;
}
.portal-new-announcement .button-group-submit button.active {
  box-shadow: none;
}
.portal-new-announcement .action-button-form.hidden {
  display: none;
}
.portal-new-announcement .publish-date-button {
  min-width: auto;
  padding: 0 14px;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid var(--colour-system-surface);
}
.portal-new-announcement .publish-date-button.active, .portal-new-announcement .publish-date-button.primary:focus:not(:disabled) {
  box-shadow: none;
}
.portal-new-announcement .publish-date-picker {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.portal-new-announcement .publish-date-value-text {
  font-size: 12px;
  color: var(--colour-neutral);
}
.portal-new-announcement .publish-date-value-text .cancel-scheduled {
  cursor: pointer;
  text-decoration: underline;
}
.portal-new-announcement .error-msg {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: #FF4060;
}
.portal-new-announcement .tiptap-editor.focus {
  border-color: var(--portal-theme);
}

.portal-new-comment {
  position: relative;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: rgba(96, 128, 160, 0.03);
}
.portal-new-comment .message-editor {
  height: 84px;
  max-height: none;
}
.portal-new-comment .message-editor.disabled {
  height: auto;
}
.portal-new-comment .dnd-dropzone {
  border-radius: 8px;
}
.portal-new-comment .sign-in {
  position: absolute;
  top: 12px;
  right: 16px;
  color: var(--portal-theme);
}

.portal-new-idea .message-editor {
  min-height: 160px;
  max-height: 300px;
  padding-top: 0;
}
[data-embed=widget] .portal-new-idea .message-editor {
  min-height: 160px;
  max-height: 160px;
}

.portal-thread,
.portal-reply-comment {
  position: relative;
  display: grid;
  grid-template-columns: 48px auto;
  padding: 24px 42px 0 42px;
}
@media (max-width: 1072px) {
  .portal-thread,
  .portal-reply-comment {
    padding: 24px 24px 0 24px;
  }
}
[data-embed=widget] .portal-thread,
[data-embed=widget] .portal-reply-comment {
  padding: 16px 24px 0 24px;
}
.portal-thread[data-internal="1"] .msg,
.portal-reply-comment[data-internal="1"] .msg {
  color: var(--colour-internal-text);
  background-color: var(--colour-internal-surface);
}
.portal-thread[data-internal="1"] .msg .comment > a,
.portal-thread[data-internal="1"] .msg .at-name,
.portal-reply-comment[data-internal="1"] .msg .comment > a,
.portal-reply-comment[data-internal="1"] .msg .at-name {
  color: var(--colour-warning);
}
.portal-thread .pin-num,
.portal-reply-comment .pin-num {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background-color: var(--portal-theme);
  color: var(--colour-system-text-inverse);
  text-align: center;
  font-size: 12px;
  user-select: none;
  cursor: default;
}
.portal-thread .author-name,
.portal-reply-comment .author-name {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}
.portal-thread .author-name:empty,
.portal-reply-comment .author-name:empty {
  display: none;
}
.portal-thread .author-name .video-note-time,
.portal-reply-comment .author-name .video-note-time {
  margin-left: 8px;
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-thread .author-name .video-note-time i,
.portal-reply-comment .author-name .video-note-time i {
  margin-right: 4px;
}
.portal-thread .author-name .badge-small,
.portal-reply-comment .author-name .badge-small {
  margin-left: 4px;
  color: var(--portal-theme);
  background-color: var(--portal-theme-bg);
}
.portal-thread .msg,
.portal-reply-comment .msg {
  display: inline-block;
  line-height: 140%;
  margin: 0 0 8px 0;
  padding: 8px 12px;
  word-break: break-word;
  border-radius: 8px;
  background-color: rgba(96, 128, 160, 0.06);
}
.portal-thread .msg a,
.portal-reply-comment .msg a {
  color: var(--portal-theme);
}
.portal-thread .msg .comment:empty:before,
.portal-reply-comment .msg .comment:empty:before {
  content: "No message left";
  font-style: italic;
  color: var(--colour-neutral);
}
.portal-thread .msg .at-name,
.portal-reply-comment .msg .at-name {
  color: var(--portal-theme);
}
.portal-thread .msg .edited,
.portal-reply-comment .msg .edited {
  display: block;
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-thread .attachment,
.portal-reply-comment .attachment {
  margin: 4px 0 12px 0;
  font-size: 12px;
}
.portal-thread .attachment img,
.portal-thread .attachment video,
.portal-reply-comment .attachment img,
.portal-reply-comment .attachment video {
  max-height: 120px;
  border: 1px solid var(--colour-system-line);
  border-radius: 4px;
  vertical-align: top;
  transition: all 0.1s;
}
.portal-thread .attachment img.expanded,
.portal-thread .attachment video.expanded,
.portal-reply-comment .attachment img.expanded,
.portal-reply-comment .attachment video.expanded {
  width: 100%;
  height: auto;
  max-height: none;
}
.portal-thread .attachment a,
.portal-reply-comment .attachment a {
  text-decoration: none;
}
.portal-thread .attachment .attachment-download a,
.portal-reply-comment .attachment .attachment-download a {
  color: var(--colour-neutral);
}
.portal-thread .attachment .attachment-download a:hover,
.portal-reply-comment .attachment .attachment-download a:hover {
  color: var(--portal-theme);
}
.portal-thread .attachment .attachment-preview,
.portal-reply-comment .attachment .attachment-preview {
  position: relative;
  display: inline-block;
  margin-top: 4px;
}
.portal-thread .attachment .attachment-preview:hover .expand, .portal-thread .attachment button.attachment-preview.success.active .expand, .portal-thread .attachment button.attachment-preview.info.active .expand, .portal-thread .attachment button.attachment-preview.danger.active .expand,
.portal-reply-comment .attachment .attachment-preview:hover .expand,
.portal-reply-comment .attachment button.attachment-preview.success.active .expand,
.portal-reply-comment .attachment button.attachment-preview.info.active .expand,
.portal-reply-comment .attachment button.attachment-preview.danger.active .expand {
  display: block;
}
.portal-thread .attachment .attachment-preview .expand,
.portal-reply-comment .attachment .attachment-preview .expand {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 2px;
  background-color: var(--colour-system-surface);
  text-align: center;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  font-size: 12px;
}
.portal-thread .attachment .attachment-preview .expand:after,
.portal-reply-comment .attachment .attachment-preview .expand:after {
  display: block;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f065";
}
.portal-thread .attachment .attachment-preview .expand:hover, .portal-thread .attachment .attachment-preview button.expand.success.active, .portal-thread .attachment .attachment-preview button.expand.info.active, .portal-thread .attachment .attachment-preview button.expand.danger.active,
.portal-reply-comment .attachment .attachment-preview .expand:hover,
.portal-reply-comment .attachment .attachment-preview button.expand.success.active,
.portal-reply-comment .attachment .attachment-preview button.expand.info.active,
.portal-reply-comment .attachment .attachment-preview button.expand.danger.active {
  color: var(--portal-theme);
}
.portal-thread .attachment .attachment-preview .expand:hover:after, .portal-thread .attachment .attachment-preview button.expand.success.active:after, .portal-thread .attachment .attachment-preview button.expand.info.active:after, .portal-thread .attachment .attachment-preview button.expand.danger.active:after,
.portal-reply-comment .attachment .attachment-preview .expand:hover:after,
.portal-reply-comment .attachment .attachment-preview button.expand.success.active:after,
.portal-reply-comment .attachment .attachment-preview button.expand.info.active:after,
.portal-reply-comment .attachment .attachment-preview button.expand.danger.active:after {
  transform: scale(1.1);
}
.portal-thread .attachment .attachment-preview.attachment-preview-video,
.portal-reply-comment .attachment .attachment-preview.attachment-preview-video {
  cursor: pointer;
}
.portal-thread .attachment .attachment-preview.attachment-preview-video:before,
.portal-reply-comment .attachment .attachment-preview.attachment-preview-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  background-color: rgba(96, 128, 160, 0.1);
  pointer-events: none;
}
.portal-thread .attachment .attachment-preview.attachment-preview-video:after,
.portal-reply-comment .attachment .attachment-preview.attachment-preview-video:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f144";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  border-radius: 50%;
  color: var(--portal-theme);
  background-color: var(--colour-system-surface);
  font-size: 24px;
  text-align: center;
  pointer-events: none;
}
.portal-thread .region-reactions > span,
.portal-reply-comment .region-reactions > span {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 4px 4px 0;
  line-height: 16px;
  border: 1px solid var(--portal-theme-o-6);
  border-radius: 10px;
  background-color: var(--portal-theme-bg);
  cursor: pointer;
}
.portal-thread .region-reactions > span .emoji,
.portal-reply-comment .region-reactions > span .emoji {
  display: inline-block;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: top;
}
.portal-thread .region-reactions > span .count,
.portal-reply-comment .region-reactions > span .count {
  display: inline-block;
  font-size: 11px;
  vertical-align: top;
  color: var(--portal-theme);
}
.portal-thread .region-reactions .reaction-add,
.portal-reply-comment .region-reactions .reaction-add {
  position: relative;
  padding: 2px 6px;
  margin: 0 4px 4px 0;
  line-height: 16px;
  border: 1px solid rgba(96, 128, 160, 0.6);
  border-radius: 10px;
  background-color: rgba(96, 128, 160, 0.06);
  cursor: pointer;
}
.portal-thread .region-reactions .reaction-add:hover, .portal-thread .region-reactions button.reaction-add.success.active, .portal-thread .region-reactions button.reaction-add.info.active, .portal-thread .region-reactions button.reaction-add.danger.active,
.portal-reply-comment .region-reactions .reaction-add:hover,
.portal-reply-comment .region-reactions button.reaction-add.success.active,
.portal-reply-comment .region-reactions button.reaction-add.info.active,
.portal-reply-comment .region-reactions button.reaction-add.danger.active {
  background-color: var(--colour-system-surface);
}
.portal-thread .region-reactions .reaction-add:hover:before, .portal-thread .region-reactions button.reaction-add.success.active:before, .portal-thread .region-reactions button.reaction-add.info.active:before, .portal-thread .region-reactions button.reaction-add.danger.active:before,
.portal-reply-comment .region-reactions .reaction-add:hover:before,
.portal-reply-comment .region-reactions button.reaction-add.success.active:before,
.portal-reply-comment .region-reactions button.reaction-add.info.active:before,
.portal-reply-comment .region-reactions button.reaction-add.danger.active:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f599";
  color: var(--colour-primary);
}
.portal-thread .region-reactions .reaction-add:hover:after, .portal-thread .region-reactions button.reaction-add.success.active:after, .portal-thread .region-reactions button.reaction-add.info.active:after, .portal-thread .region-reactions button.reaction-add.danger.active:after,
.portal-reply-comment .region-reactions .reaction-add:hover:after,
.portal-reply-comment .region-reactions button.reaction-add.success.active:after,
.portal-reply-comment .region-reactions button.reaction-add.info.active:after,
.portal-reply-comment .region-reactions button.reaction-add.danger.active:after {
  color: var(--colour-primary);
}
.portal-thread .region-reactions .reaction-add:before,
.portal-reply-comment .region-reactions .reaction-add:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f118";
  display: inline-block;
  color: rgba(96, 128, 160, 0.8);
  font-size: 14px;
  transition: all 0.1s;
}
.portal-thread .region-reactions .reaction-add:after,
.portal-reply-comment .region-reactions .reaction-add:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\+";
  position: absolute;
  right: 4px;
  top: 0px;
  width: 8px;
  height: 8px;
  line-height: 8px;
  border-radius: 50%;
  color: rgba(96, 128, 160, 0.8);
  font-size: 6px;
  text-align: center;
  background-color: var(--colour-system-surface-2);
}
.portal-thread .emoji-selector,
.portal-reply-comment .emoji-selector {
  left: 0;
  bottom: 100%;
  margin-bottom: 12px;
  animation: dropdown-up 0.2s;
}
.portal-thread .actions,
.portal-reply-comment .actions {
  position: relative;
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--colour-neutral);
}
.portal-thread .actions > span,
.portal-reply-comment .actions > span {
  position: relative;
  margin-right: 20px;
}
.portal-thread .actions > span:last-child,
.portal-reply-comment .actions > span:last-child {
  margin-right: 0;
}
.portal-thread .actions > span:last-child:after,
.portal-reply-comment .actions > span:last-child:after {
  display: none;
}
.portal-thread .actions > span:after,
.portal-reply-comment .actions > span:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 2px;
  height: 2px;
  margin: auto auto auto 8px;
  border-radius: 50%;
  background-color: var(--colour-neutral);
}
.portal-thread .actions a,
.portal-reply-comment .actions a {
  color: var(--colour-neutral);
}
.portal-thread .actions a:hover,
.portal-reply-comment .actions a:hover {
  color: var(--portal-theme);
}
.portal-thread .actions .button-dropdown > button,
.portal-reply-comment .actions .button-dropdown > button {
  font-size: 12px;
  color: var(--colour-neutral);
}
.portal-thread .actions .button-dropdown > button:hover, .portal-thread .actions .button-dropdown > button.success.active, .portal-thread .actions .button-dropdown > button.info.active, .portal-thread .actions .button-dropdown > button.danger.active,
.portal-reply-comment .actions .button-dropdown > button:hover,
.portal-reply-comment .actions .button-dropdown > button.success.active,
.portal-reply-comment .actions .button-dropdown > button.info.active,
.portal-reply-comment .actions .button-dropdown > button.danger.active {
  color: var(--portal-theme);
}
.portal-thread .replies,
.portal-reply-comment .replies {
  position: relative;
  margin: 12px 0 0 8px;
}
.portal-thread .replies .show-replies,
.portal-reply-comment .replies .show-replies {
  color: var(--portal-theme);
  font-size: 12px;
  text-decoration: none;
}
.portal-thread .replies .show-replies:before,
.portal-reply-comment .replies .show-replies:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f064";
  display: inline-block;
  margin-right: 4px;
  transform: scaleY(-1);
}
.portal-thread .replies .show-replies:hover, .portal-thread .replies button.show-replies.success.active, .portal-thread .replies button.show-replies.info.active, .portal-thread .replies button.show-replies.danger.active,
.portal-reply-comment .replies .show-replies:hover,
.portal-reply-comment .replies button.show-replies.success.active,
.portal-reply-comment .replies button.show-replies.info.active,
.portal-reply-comment .replies button.show-replies.danger.active {
  text-decoration: underline;
}
.portal-thread .replies .text-show,
.portal-reply-comment .replies .text-show {
  display: inline;
}
.portal-thread .replies .text-hide,
.portal-reply-comment .replies .text-hide {
  display: none;
}
.portal-thread .replies.active .text-show,
.portal-reply-comment .replies.active .text-show {
  display: none;
}
.portal-thread .replies.active .text-hide,
.portal-reply-comment .replies.active .text-hide {
  display: inline;
}
.portal-thread .replies.active .region-replies,
.portal-reply-comment .replies.active .region-replies {
  display: block;
}
.portal-thread .region-replies,
.portal-reply-comment .region-replies {
  display: none;
}

.portal-thread .region-reply-comment-new {
  display: none;
  margin: 24px 0 0 0;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: rgba(96, 128, 160, 0.03);
}

.portal-reply-comment {
  padding: 12px 0 12px 16px;
}
.portal-reply-comment:last-child {
  padding-bottom: 0;
}
.portal-reply-comment:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--colour-system-line);
  pointer-events: none;
}
.portal-reply-comment:after {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 12px;
  height: 1px;
  background-color: var(--colour-system-line);
  pointer-events: none;
}
.portal-reply-comment:first-child:before {
  top: 14px;
}

.portal-roadmap-column {
  position: relative;
  display: inline-block;
  width: 360px;
  height: 100%;
  margin-right: 64px;
  white-space: normal;
  vertical-align: top;
  white-space: normal;
}
.portal-roadmap-column:last-child {
  margin-right: 0;
}
.portal-roadmap-column:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  margin-left: 32px;
  border-right: 1px dashed rgba(96, 128, 160, 0.16);
}
@media (max-width: 1072px) {
  .portal-roadmap-column:last-child:after {
    display: none;
  }
}
[data-embed=widget] .portal-roadmap-column {
  width: 100%;
  margin-right: 0;
}
[data-embed=widget] .portal-roadmap-column:after {
  display: none;
}
.portal-roadmap-column .region-title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 52px;
  padding-top: 16px;
  border-bottom: 2px solid var(--column-colour);
  border-radius: 8px 8px 0 0;
  cursor: default;
}
[data-embed=widget] .portal-roadmap-column .region-title {
  display: none;
}
.portal-roadmap-column .region-title .name {
  font-weight: 700;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 80%;
  vertical-align: top;
  line-height: 24px;
}
.portal-roadmap-column .region-title .count {
  display: inline-block;
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  margin-left: 8px;
  border: 1px solid rgba(96, 128, 160, 0.16);
  border-radius: 20px;
  background-color: var(--colour-system-box-bg-dark-only);
  font-size: 12px;
  font-weight: 600;
  vertical-align: top;
}
.portal-roadmap-column .region-title .count:empty {
  display: none;
}
.portal-roadmap-column .region-main {
  position: absolute;
  top: 76px;
  right: 0;
  bottom: 0;
  left: 0;
}
[data-embed=widget] .portal-roadmap-column .region-main {
  top: 0;
}
.portal-roadmap-column .region-main .scroller-top,
.portal-roadmap-column .region-main .scroller-bottom {
  display: none;
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  height: 36px;
  pointer-events: none;
  animation: fadeIn 0.1s;
}
.portal-roadmap-column .region-main .scroller-top {
  top: 0;
  background: linear-gradient(180deg, var(--colour-system-surface), transparent);
}
.portal-roadmap-column .region-main .scroller-bottom {
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--colour-system-surface));
}
.portal-roadmap-column .region-main.has-scroll-top .scroller-top, .portal-roadmap-column .region-main.has-scroll-bottom .scroller-bottom {
  display: block;
}
.portal-roadmap-column .region-feedback {
  overflow: auto;
  max-height: 100%;
}
.portal-roadmap-column .region-feedback::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
[data-embed=widget] .portal-roadmap-column .region-feedback {
  padding-right: 24px;
}
.portal-roadmap-column .region-feedback:empty:before {
  content: "Nothing here yet";
  color: var(--colour-neutral);
}
.portal-roadmap-column .region-feedback.loadmore:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f3f4";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: auto;
  text-align: center;
  color: var(--colour-neutral);
  animation: rotate 1s linear infinite;
}

.portal-activate {
  padding: 12px;
}
.portal-activate .domain-window {
  position: relative;
  padding: 54px 24px 24px 24px;
  border: 1px dashed var(--colour-neutral-400);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
}
.portal-activate .domain-window:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 30px;
  background-color: var(--colour-neutral-50);
  border-bottom: 1px solid var(--colour-neutral-100);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}
.portal-activate .domain-window:after {
  content: "";
  position: absolute;
  top: 11px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF554E;
  box-shadow: 12px 0 0 0 #FFB429, 24px 0 0 0 #24C238;
  pointer-events: none;
}
.portal-activate .domain-window .address-bar {
  position: absolute;
  top: 3px;
  left: 58px;
  right: 3px;
  height: 24px;
  line-height: 22px;
  padding: 0 12px;
  border: 1px solid var(--colour-neutral-200);
  border-radius: 30px;
  font-size: 12px;
  background-color: var(--colour-system-surface);
}
.portal-activate .domain-window .address-bar:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f023";
  margin-right: 8px;
  font-size: 10px;
  color: var(--colour-neutral-400);
}
.portal-activate .domain-window .address-bar-arrow:after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 14px;
  left: 60px;
  width: 88px;
  height: 136px;
  background-image: url("/image/spinner.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(160deg);
  pointer-events: none;
}
.portal-activate .domain-window .main {
  position: relative;
}
.portal-activate .domain-window .main .links {
  font-size: 11px;
}
.portal-activate .domain-window .main .links > span {
  margin-right: 8px;
  color: var(--colour-neutral-500);
}
.portal-activate .domain-window .main .links > span.active {
  color: var(--colour-neutral);
  font-weight: 500;
}
.portal-activate .domain-window .main .content-grid {
  display: grid;
  grid-template-columns: 200px auto;
}
.portal-activate .domain-window .main .profile-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background-color: var(--colour-neutral-10);
  text-align: center;
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-activate .domain-window .main .new-idea-btn {
  position: absolute;
  top: 0;
  right: 32px;
  width: 96px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  background-color: var(--colour-neutral-10);
  color: var(--colour-neutral);
  text-align: center;
  font-size: 11px;
}
.portal-activate .domain-window .main .new-idea-btn i {
  margin-right: 8px;
}
.portal-activate .domain-window .placeholder-side {
  position: relative;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 2px;
  background-color: var(--colour-neutral-10);
}
.portal-activate .domain-window .placeholder-side:first-child {
  margin-top: 36px;
}
.portal-activate .domain-window .placeholder-side:nth-child(1) {
  width: 70%;
}
.portal-activate .domain-window .placeholder-side:nth-child(2) {
  width: 90%;
}
.portal-activate .domain-window .placeholder-side:nth-child(3) {
  width: 50%;
}
.portal-activate .domain-window .placeholder-side:nth-child(4) {
  width: 80%;
}
.portal-activate .domain-window .placeholder-post {
  position: relative;
  margin: 0 0 24px 24px;
}
.portal-activate .domain-window .placeholder-post:first-child {
  margin-top: 36px;
}
.portal-activate .domain-window .placeholder-post:last-child {
  margin-bottom: 0;
}
.portal-activate .domain-window .placeholder-post > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  padding-top: 14px;
  border-radius: 4px;
  background-color: var(--colour-neutral-10);
  text-align: center;
  color: var(--colour-neutral);
  font-size: 12px;
}
.portal-activate .domain-window .placeholder-post > span:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0d8";
  position: absolute;
  left: 0;
  top: 4px;
  right: 0;
  text-align: center;
}
.portal-activate .domain-window .placeholder-post .ph-t {
  position: relative;
  width: 200px;
  height: 12px;
  margin-bottom: 8px;
  margin-left: 44px;
  border-radius: 2px;
  background-color: var(--colour-neutral-10);
}
.portal-activate .domain-window .placeholder-post .ph-t:before, .portal-activate .domain-window .placeholder-post .ph-t:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%;
  width: 8px;
  background-color: var(--colour-system-surface);
}
.portal-activate .domain-window .placeholder-post .ph-t:after {
  left: 60%;
}
.portal-activate .domain-window .placeholder-post .ph {
  position: relative;
  height: 8px;
  margin-bottom: 8px;
  margin-left: 44px;
  border-radius: 2px;
  background-color: var(--colour-neutral-10);
}
.portal-activate .domain-window .placeholder-post .ph:last-child {
  margin-bottom: 0;
}
.portal-activate .domain-window .placeholder-post .ph:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background-color: var(--colour-system-surface);
}
.portal-activate .domain-window .placeholder-post .ph:nth-child(1):before {
  left: 20%;
}
.portal-activate .domain-window .placeholder-post .ph:nth-child(2):before {
  left: 40%;
}
.portal-activate .domain-window .placeholder-post .ph:nth-child(3):before {
  left: 60%;
}
.portal-activate .domain-window .placeholder-post .ph:nth-child(4):before {
  left: 45%;
}
.portal-activate .domain-window .placeholder-post .ph:nth-child(5):before {
  left: 35%;
}
.portal-activate .domain-window .placeholder-post .ph:last-child {
  width: 70%;
}
.portal-activate .domain-window .placeholder-post .ph:last-child:before {
  display: none;
}
.portal-activate .domain-window .placeholder-post .attachment {
  display: inline-block;
  padding: 8px 16px;
  margin: 12px 0 0 44px;
  border: 1px solid var(--colour-system-line);
  border-radius: 4px;
  color: var(--colour-neutral);
  font-size: 14px;
}
.portal-activate .domain-window .portal-activate-arrow {
  position: absolute;
  bottom: -36px;
  left: 50%;
  width: 88px;
  height: 136px;
  background-image: url("/image/spinner.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(60deg);
  pointer-events: none;
}
.portal-activate .domain-window .progress {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.connected-app {
  padding: 24px;
  margin: 0;
}
.connected-app > div:first-child {
  width: 24px;
  float: left;
}
.connected-app > div:last-child {
  margin-left: 36px;
}
.connected-app .app-logo {
  width: 24px;
  height: 24px;
}
.connected-app .app-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 28px;
  font-size: 15px;
  font-weight: 600;
}
.connected-app .app-connect-time {
  margin-top: 12px;
  color: var(--colour-neutral);
}
.connected-app .app-connect-by {
  margin-top: 4px;
  color: var(--colour-neutral);
}
.connected-app .app-usage {
  margin-top: 12px;
  color: var(--colour-neutral);
}
.connected-app .app-action {
  position: absolute;
  top: 16px;
  right: 16px;
}
.connected-app .badge-warning-invert {
  position: absolute;
  bottom: 20px;
  right: 24px;
}

.workspace-member-preview {
  display: grid;
  grid-template-columns: 58px auto 250px;
  border-bottom: 1px solid var(--colour-neutral-25);
  padding: 16px 0;
}
.workspace-member-preview:last-child {
  border-bottom: none;
}
.workspace-member-preview > div:last-child {
  text-align: right;
}
.workspace-member-preview .user-36 {
  float: left;
  margin-top: 4px;
}
.workspace-member-preview .member-name {
  line-height: 24px;
  font-size: 15px;
  font-weight: 600;
}
.workspace-member-preview .member-email {
  display: flex;
  align-items: center;
  justify-content: start;
  line-height: 20px;
}
.workspace-member-preview .member-email svg {
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  fill: var(--colour-neutral);
}
.workspace-member-preview .member-badge {
  margin: -2px 0 0 8px;
  vertical-align: middle;
  font-weight: 600;
}
.workspace-member-preview .last-login {
  margin-top: 8px;
  line-height: 16px;
  color: var(--colour-neutral);
  font-size: 13px;
}
.workspace-member-preview .last-login > span {
  position: relative;
  margin-right: 16px;
}
.workspace-member-preview .last-login > span:not(:last-child):after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 6px;
  border-radius: 50%;
  background-color: var(--colour-neutral-300);
}
.workspace-member-preview .member-info {
  line-height: 32px;
  color: var(--colour-neutral);
}
.workspace-member-preview .button-dropdown-full {
  margin-right: 8px;
}
.workspace-member-preview .access-checkbox {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 32px;
}

.workspace-member-invitation {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 58px auto 100px;
  border-bottom: 1px solid var(--colour-system-line);
}
.workspace-member-invitation .member-badge {
  margin: -2px 0 0 8px;
  vertical-align: middle;
  font-weight: 600;
}
.workspace-member-invitation .invitation-email {
  line-height: 24px;
  font-weight: 500;
}
.workspace-member-invitation .invitation-date {
  color: var(--colour-neutral);
}
.workspace-member-invitation .button-dropdown {
  margin: 8px 0 0 24px;
}

.region-create-workspace {
  width: 600px;
  max-width: 100%;
  margin: 20px auto auto auto;
}
.region-create-workspace .url-taken {
  display: none;
  margin-top: 8px;
}
.region-create-workspace .url-validation {
  display: none;
}
.region-create-workspace .workspace-logo {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  text-align: center;
}
.region-create-workspace .workspace-logo img {
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.region-create-workspace .workspace-logo span {
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  line-height: 64px;
  background-color: rgba(96, 64, 255, 0.04);
  color: var(--colour-primary);
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  cursor: default;
}
.region-create-workspace .workspace-logo .logo-upload {
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  text-decoration: none;
  color: var(--colour-primary);
  font-size: 13px;
  white-space: nowrap;
}
.region-create-workspace .workspace-logo .logo-remove {
  position: absolute;
  z-index: 20;
  top: -6px;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-1);
  font-size: 10px;
  cursor: pointer;
}
.region-create-workspace .workspace-logo .logo-remove:hover, .region-create-workspace .workspace-logo button.logo-remove.success.active, .region-create-workspace .workspace-logo button.logo-remove.info.active, .region-create-workspace .workspace-logo button.logo-remove.danger.active {
  color: var(--colour-primary);
}

.workspace-invite-link .link-container {
  margin: 24px 0 0 0;
  padding: 24px;
  border: 1px solid var(--colour-neutral-25);
  border-radius: 8px;
  background-color: var(--colour-neutral-10);
  line-height: 16px;
  cursor: pointer;
}
.workspace-invite-link .link-container .url {
  line-height: 32px;
  font-weight: 600;
}
.workspace-invite-link .link-container .url.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
.workspace-invite-link .link-container .header {
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 500;
}

.workspace-login h3 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 150%;
  font-weight: 700;
}
.workspace-login .workspace-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px auto;
  padding: 24px;
  margin-bottom: 8px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}
.workspace-login .workspace-item:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f090";
  display: none;
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: auto;
  color: var(--colour-primary);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  animation: opacityTransformRest 0.1s forwards;
}
.workspace-login .workspace-item:hover, .workspace-login button.workspace-item.success.active, .workspace-login button.workspace-item.info.active, .workspace-login button.workspace-item.danger.active {
  border-color: var(--colour-primary);
}
.workspace-login .workspace-item:hover:after, .workspace-login button.workspace-item.success.active:after, .workspace-login button.workspace-item.info.active:after, .workspace-login button.workspace-item.danger.active:after {
  display: block;
}
.workspace-login .workspace-item .workspace-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.workspace-login .workspace-item .workspace-name {
  font-weight: 500;
}
.workspace-login .workspace-item .workspace-url {
  color: var(--colour-neutral);
}
.workspace-login .workspace-create {
  padding: 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.workspace-login .workspace-create:hover, .workspace-login button.workspace-create.success.active, .workspace-login button.workspace-create.info.active, .workspace-login button.workspace-create.danger.active {
  border-color: var(--colour-primary);
}
.workspace-login .workspace-create i {
  margin-right: 8px;
  color: var(--colour-primary);
}

.user-segment-condition {
  position: relative;
  display: grid;
  grid-template-columns: 32px auto;
  margin-bottom: 24px;
}
.user-segment-condition > div:last-child {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 8px;
}
.user-segment-condition > div:last-child > div:last-child {
  grid-column: 1/-1;
}
.user-segment-condition .condition-delete {
  cursor: pointer;
}
.user-segment-condition .condition-delete:disabled {
  color: var(--colour-neutral-100);
  cursor: not-allowed;
}
.user-segment-condition .condition-add {
  font-size: 13px;
  color: var(--colour-primary);
  font-weight: 500;
}
.user-segment-condition .condition-add i {
  width: 32px;
}

.user-segment-overview .user-total {
  margin: 8px 0;
  font-size: 24px;
  font-weight: 600;
}
.user-segment-overview .user-list-count {
  margin-top: 24px;
  padding: 0 8px 8px 8px;
  border-bottom: 1px solid var(--colour-system-line);
  font-size: 13px;
  color: var(--colour-neutral);
}
.user-segment-overview .region-user-list > div {
  position: relative;
  padding: 16px 8px;
  font-size: 13px;
  margin-top: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
}
.user-segment-overview .region-user-list > div:first-child {
  margin-top: 8px;
}
.user-segment-overview .region-user-list > div:after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--colour-neutral-25);
}
.user-segment-overview .region-user-list > div:hover {
  background: var(--colour-neutral-10);
}

.user-property-filter {
  min-width: 500px;
}
.user-property-filter .region-conditions {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
  padding: 24px 24px 8px 24px;
  margin: 0;
}
.user-property-filter .region-actions {
  padding: 0 24px 24px 24px;
}
.user-property-filter .condition-item {
  display: grid;
  grid-template-columns: 32px auto;
}
.user-property-filter .condition-item:not(:last-child) {
  margin-bottom: 16px;
}
.user-property-filter .condition-item > div:last-child {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 8px;
}
.user-property-filter .condition-item > div:last-child > div:last-child {
  grid-column: 1/-1;
}
.user-property-filter .condition-delete {
  cursor: pointer;
}
.user-property-filter .condition-delete:disabled {
  color: var(--colour-neutral-100);
  cursor: not-allowed;
}

.invite-user-modal {
  width: 600px;
  max-width: 100%;
  margin: auto;
}
.invite-user-modal .badge-group-tertiary {
  position: fixed;
  z-index: 10;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.widget-form-preview .userback-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  color: var(--colour-system-text);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.widget-form-preview .userback-controls[data-step="1"] {
  padding: 56px 32px 32px 32px;
}
.widget-form-preview .userback-controls .preview-close {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--colour-neutral);
}
.widget-form-preview .userback-controls .preview-close:hover, .widget-form-preview .userback-controls button.preview-close.success.active, .widget-form-preview .userback-controls button.preview-close.info.active, .widget-form-preview .userback-controls button.preview-close.danger.active {
  color: var(--colour-neutral-800);
}
.widget-form-preview .userback-controls .userback-controls-header-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 32px;
}
.widget-form-preview .userback-controls .userback-controls-header-text > svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: var(--widget-preview-button-text);
}
.widget-form-preview .userback-controls .userback-controls-header-text > img {
  display: block;
  height: 24px;
  object-fit: contain;
  object-position: left;
  fill: var(--widget-preview-button-text);
}
.widget-form-preview .userback-controls .userback-controls-back,
.widget-form-preview .userback-controls .userback-controls-close,
.widget-form-preview .userback-controls .userback-controls-minimize {
  width: 40px;
  line-height: 40px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.widget-form-preview .userback-controls .userback-controls-back:hover, .widget-form-preview .userback-controls button.userback-controls-back.success.active, .widget-form-preview .userback-controls button.userback-controls-back.info.active, .widget-form-preview .userback-controls button.userback-controls-back.danger.active,
.widget-form-preview .userback-controls .userback-controls-close:hover,
.widget-form-preview .userback-controls button.userback-controls-close.success.active,
.widget-form-preview .userback-controls button.userback-controls-close.info.active,
.widget-form-preview .userback-controls button.userback-controls-close.danger.active,
.widget-form-preview .userback-controls .userback-controls-minimize:hover,
.widget-form-preview .userback-controls button.userback-controls-minimize.success.active,
.widget-form-preview .userback-controls button.userback-controls-minimize.info.active,
.widget-form-preview .userback-controls button.userback-controls-minimize.danger.active {
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
}
.widget-form-preview .userback-controls .userback-controls-back {
  margin: 0 0 0 8px;
}
.widget-form-preview .userback-controls .userback-controls-back.disabled {
  opacity: 0;
  pointer-events: none;
}
.widget-form-preview .userback-controls .userback-controls-close {
  margin: 0 8px 0 0;
}
.widget-form-preview .userback-controls .userback-controls-step[data-step=fs] {
  padding: 32px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 460px);
}
.widget-form-preview .userback-controls .userback-controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-radius: 16px 16px 0 0;
  text-align: center;
  font-weight: 600;
  background-color: var(--widget-preview-button-bg);
  color: var(--widget-preview-button-text);
}
.widget-form-preview .userback-controls .userback-controls-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 80px;
  border-top: 1px solid var(--colour-neutral-25);
  font-weight: 500;
}
.widget-form-preview .userback-controls .userback-controls-nav:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
  background: var(--colour-widget-preview-nav-gradient);
  pointer-events: none;
}
.widget-form-preview .userback-controls .userback-controls-nav > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: var(--colour-widget-nav-text);
}
.widget-form-preview .userback-controls .userback-controls-nav > div:hover, .widget-form-preview .userback-controls .userback-controls-nav > div.active {
  color: var(--colour-widget-preview-nav-text-active);
  cursor: pointer;
}
.widget-form-preview .userback-controls .userback-controls-nav > div.active {
  cursor: default;
}
.widget-form-preview .userback-controls .userback-controls-nav > div > i {
  margin-bottom: 4px;
  font-size: 16px;
}
.widget-form-preview .userback-controls .userback-controls-logo {
  display: block;
  max-height: 36px;
  margin: 0 auto 24px auto;
}
.widget-form-preview .userback-controls .userback-header-text {
  padding: 16px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.widget-form-preview .userback-controls .userback-feedback-type-form {
  position: relative;
  padding: 28px 24px 28px 92px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s linear;
  word-break: break-word;
  hyphens: auto;
}
.widget-form-preview .userback-controls .userback-feedback-type-form.highlighted, .widget-form-preview .userback-controls .userback-feedback-type-form:hover, .widget-form-preview .userback-controls button.userback-feedback-type-form.success.active, .widget-form-preview .userback-controls button.userback-feedback-type-form.info.active, .widget-form-preview .userback-controls button.userback-feedback-type-form.danger.active {
  background-color: var(--colour-neutral-10);
  transform: scale(1.02);
}
.widget-form-preview .userback-controls .userback-feedback-type-form > div:nth-child(1) {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--colour-neutral-25);
  border-radius: 50%;
  background-color: var(--colour-system-surface);
}
.widget-form-preview .userback-controls .userback-feedback-type-form > div:nth-child(2) {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--colour-system-text);
}
.widget-form-preview .userback-controls .userback-feedback-type-form > div:nth-child(3) {
  font-size: 13px;
  color: var(--colour-neutral);
}
.widget-form-preview .userback-controls .userback-feedback-type-form svg {
  display: block;
  width: 18px;
  height: 18px;
}
.widget-form-preview .userback-controls .userback-feedback-type-form svg polygon,
.widget-form-preview .userback-controls .userback-feedback-type-form svg circle,
.widget-form-preview .userback-controls .userback-feedback-type-form svg path {
  fill: var(--colour-neutral-300);
}
.widget-form-preview .userback-controls .userback-feedback-type-form svg polygon.colour,
.widget-form-preview .userback-controls .userback-feedback-type-form svg circle.colour,
.widget-form-preview .userback-controls .userback-feedback-type-form svg path.colour {
  fill: var(--colour-primary);
}
.widget-form-preview .userback-controls .userback-controls-help-message {
  width: auto;
  height: auto;
  line-height: 150%;
  margin: 0 0 16px 0;
  padding: 0;
  text-transform: none;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.widget-form-preview .userback-controls .userback-controls-rating {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
}
.widget-form-preview .userback-controls .userback-controls-rating > div {
  display: inline-block;
  padding: 0 8px;
  margin: 0;
  text-align: center;
  background: none;
  cursor: pointer;
}
.widget-form-preview .userback-controls .userback-controls-rating > div svg {
  display: block;
  width: 40px;
  height: auto;
  margin: auto auto 16px auto;
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=number] {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto 4px 16px 4px;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  background-color: var(--widget-preview-button-bg);
  color: var(--widget-preview-button-text);
  transition: all 0.1s;
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=number].inactive {
  background-color: var(--colour-system-surface);
  color: var(--colour-system-text);
  border: 1px solid var(--colour-input-border);
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=number].inactive:hover {
  border-color: var(--widget-preview-button-bg);
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=thumb] {
  padding: 0 12px;
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=thumb] svg {
  width: 52px;
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=thumb]:first-child {
  transform: translateY(-4px);
}
.widget-form-preview .userback-controls .userback-controls-rating > div[data-type=thumb]:last-child {
  transform: translateY(4px);
}
.widget-form-preview .userback-controls .userback-controls-rating > div.selected span {
  font-weight: bold;
}
.widget-form-preview .userback-controls .userback-controls-rating > div.inactive:not(.highlight) svg .bg {
  fill: var(--colour-neutral-100);
}
.widget-form-preview .userback-controls .userback-controls-rating > div.inactive:not(.highlight) svg .shape {
  fill: var(--colour-neutral-200);
}
.widget-form-preview .userback-controls .userback-controls-rating > div.inactive:not(.highlight) svg .star,
.widget-form-preview .userback-controls .userback-controls-rating > div.inactive:not(.highlight) svg .heart,
.widget-form-preview .userback-controls .userback-controls-rating > div.inactive:not(.highlight) svg .thumb {
  fill: var(--colour-neutral-100);
}
.widget-form-preview .userback-controls .userback-controls-rating > div.preview:not(.highlight) svg .star,
.widget-form-preview .userback-controls .userback-controls-rating > div.preview:not(.highlight) svg .heart,
.widget-form-preview .userback-controls .userback-controls-rating > div.preview:not(.highlight) svg .thumb {
  fill: var(--colour-neutral-100);
}
.widget-form-preview .userback-controls .userback-controls-feedback-type {
  text-align: right;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions[data-item="1"] {
  height: auto;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions[data-item="1"] btn {
  text-align: left;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions[data-item="1"] btn > div {
  display: block;
  margin-left: 8px;
  font-size: 13px;
  color: var(--colour-neutral);
}
.widget-form-preview .userback-controls .userback-controls-attach-actions[data-item="1"] btn:hover utooltip {
  display: none;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin: 0;
  background: var(--colour-input-bg);
  border: 1px solid var(--colour-input-border);
  border-right-width: 0;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-right-width: 1px;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn:hover {
  background: var(--colour-neutral-25);
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn:hover utooltip {
  display: block;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn:hover i {
  fill: var(--colour-system-text);
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn > i {
  color: var(--colour-neutral-400);
}
.widget-form-preview .userback-controls .userback-controls-attach-actions btn > div {
  display: none;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions utooltip {
  display: none;
  position: absolute;
  z-index: 100;
  bottom: 100%;
  left: 50%;
  padding: 4px 8px;
  margin: 0 0 12px 0;
  border-radius: 4px;
  color: var(--colour-system-text-inverse);
  font-size: 12px;
  white-space: nowrap;
  background-color: var(--colour-system-text);
  transform: translateX(-50%);
  line-height: normal;
}
.widget-form-preview .userback-controls .userback-controls-attach-actions utooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  left: 0;
  right: 0;
  margin: -1px auto auto auto;
  border: 6px solid transparent;
  border-top-color: var(--colour-system-text);
}
.widget-form-preview .userback-controls .field-comment {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 0 12px 0;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
.widget-form-preview .userback-controls .field-comment:focus-within {
  border-color: var(--colour-neutral-200);
}
.widget-form-preview .userback-controls .field-comment textarea {
  margin: 0;
  border: none;
}
.widget-form-preview .userback-controls .field-comment select {
  width: auto;
  height: 32px;
  margin: 0 8px 0 auto;
  padding-left: 0;
  padding-right: 24px;
  border: none;
  text-align: right;
  font-size: 13px !important;
  background-size: 9px 10px;
  color: var(--colour-neutral);
  cursor: pointer;
}
.widget-form-preview .userback-controls .field-comment select:hover {
  color: var(--colour-neutral-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2341576D' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
}
.widget-form-preview .userback-controls input[type=text],
.widget-form-preview .userback-controls input[type=email] {
  display: block;
  padding: 0 10px;
  height: 40px;
  margin: 0 0 12px 0;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--colour-system-text);
  background-color: var(--colour-input-bg);
}
.widget-form-preview .userback-controls input[type=text]:focus,
.widget-form-preview .userback-controls input[type=email]:focus {
  border-color: var(--colour-neutral-200);
}
.widget-form-preview .userback-controls input[name=email],
.widget-form-preview .userback-controls input[name=name] {
  border-style: dashed;
}
.widget-form-preview .userback-controls select {
  padding: 0 34px 0 10px;
  height: 40px;
  margin: 0 0 12px 0;
  border: 1px solid var(--colour-input-border);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%236080A0' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
  background-size: 14px 16px;
  background-position: 97% 50%;
  background-repeat: no-repeat;
  background-color: var(--colour-input-bg);
  border-radius: 8px;
  font-size: 14px;
  color: var(--colour-system-text);
}
.widget-form-preview .userback-controls select.empty {
  color: var(--colour-system-text-placeholder);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ACBDCE' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
}
.widget-form-preview .userback-controls select:focus {
  border-color: var(--colour-neutral-200);
}
.widget-form-preview .userback-controls textarea {
  display: block;
  padding-bottom: 0;
  margin: 0 0 12px 0;
  height: 112px;
  resize: none;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  background-color: var(--colour-input-bg);
  font-size: 14px;
  color: var(--colour-system-text);
}
.widget-form-preview .userback-controls textarea:focus {
  border-color: var(--colour-neutral-200);
}
.widget-form-preview .userback-controls .user-id-field {
  position: relative;
}
.widget-form-preview .userback-controls .user-id-field > span.tooltip {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: var(--colour-neutral);
}
.widget-form-preview .userback-controls .checkbox-container {
  overflow: hidden;
  margin: 0 0 12px 0;
}
.widget-form-preview .userback-controls .checkbox-container > div {
  display: inline-block;
  cursor: pointer;
}
.widget-form-preview .userback-controls .checkbox-container > div:hover .checkbox {
  border-color: var(--colour-neutral-300);
}
.widget-form-preview .userback-controls .checkbox-container a {
  color: var(--colour-system-text);
}
.widget-form-preview .userback-controls .checkbox-container .checkbox {
  float: left;
  width: 18px;
  height: 18px;
  margin: 0 4px 0 0;
  line-height: 16px;
  border: 1px solid var(--colour-neutral-200);
  border-radius: 2px;
  text-align: center;
  font-size: 10px;
}
.widget-form-preview .userback-controls .checkbox-container .checkbox-label {
  float: left;
  max-width: 270px;
  line-height: 18px;
  font-size: 13px;
  user-select: none;
}
.widget-form-preview .userback-controls .disclamier {
  margin: 0 0 12px 0;
  font-size: 13px;
}
.widget-form-preview .userback-controls button.medium {
  font-size: 14px;
  font-weight: bold;
}
.widget-form-preview .userback-controls .userback-footer {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 20px;
  padding: 0;
  user-select: none;
  transform: translateY(8px);
}
.widget-form-preview .userback-controls .userback-footer > span {
  margin: 0 8px 0 0;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  font-weight: normal;
  color: var(--colour-neutral-400);
}
.widget-form-preview .userback-controls .userback-footer > svg {
  width: auto;
  height: 12px;
  transform: translateY(1px);
}
.widget-form-preview .userback-controls .userback-footer > svg path {
  fill: var(--colour-neutral-400);
}
.widget-form-preview .userback-controls .userback-controls-outro {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
  border-radius: 16px;
  text-align: center;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 48px;
  margin-top: -48px;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message .emoji-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 142px;
  width: 142px;
  background-color: var(--colour-neutral-50);
  margin: auto;
  border-radius: 50%;
  font-size: 52px;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message .emoji-icon span {
  animation: outro-icon-2 0.8s;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message svg {
  display: block;
  margin: auto;
  fill: var(--widget-preview-button-bg);
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message div {
  margin-top: 32px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message p {
  margin: 8px 0 0 0;
  font-size: 14px;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message[data-icon="1"] svg {
  width: 48px;
  height: 48px;
  fill: var(--colour-system-text-inverse);
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message[data-icon="2"] svg, .widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message[data-icon="3"] svg, .widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message[data-icon="4"] svg, .widget-form-preview .userback-controls .userback-controls-outro .userback-controls-outro-message[data-icon="5"] svg {
  width: 64px;
  height: 64px;
  animation: outro-icon-2 0.8s;
}
.widget-form-preview .userback-controls .userback-controls-outro .userback-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
}
.widget-form-preview .userback-controls[nextgen="1"] {
  width: 420px;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-header {
  height: 128px;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-header-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 18px;
  text-align: left;
  white-space: normal;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-close,
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-minimize {
  position: absolute;
  top: 8px;
  right: 0;
  font-size: 18px;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-minimize {
  right: 48px;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-send-container {
  position: sticky;
  bottom: 0;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 8px 24px var(--colour-system-surface);
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-send {
  height: 36px;
  font-weight: 600;
}
.widget-form-preview .userback-controls[nextgen="1"] .userback-controls-send:focus {
  box-shadow: none;
}
.widget-form-preview .userback-controls[nextgen="1"] .wildcard-preview {
  padding: 0 4px;
  border-radius: 4px;
  background-color: var(--widget-preview-button-text);
  color: var(--widget-preview-button-bg);
  font-family: "Source Code Pro", monospace;
}
.widget-form-preview .userback-controls[nextgen="1"] .wildcard-preview-text {
  padding: 0 4px;
  border-radius: 4px;
  background-color: var(--colour-neutral-250);
  font-family: "Source Code Pro", monospace;
}

.launcher-preview {
  position: absolute;
  cursor: default;
  user-select: none;
}
.launcher-preview[data-style=text] {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border-radius: 8px 8px 0 0;
}
.launcher-preview[data-style=text][data-position=w] {
  border-radius: 0 0 8px 8px;
}
.launcher-preview[data-style=text] img,
.launcher-preview[data-style=text] svg {
  float: left;
  width: 14px;
  height: 14px;
  margin: 13px 5px 0 0;
}
.launcher-preview[data-style=text] {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.launcher-preview[data-style=text]:hover, button.launcher-preview[data-style=text].success.active, button.launcher-preview[data-style=text].info.active, button.launcher-preview[data-style=text].danger.active {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.launcher-preview[data-style=text][data-position=e] {
  top: 50%;
  right: 0;
  margin-top: calc(-20px + var(--widget-preview-launcher-offset-y) * -1);
  transform: rotate(-90deg) translateX(50%) translateY(-50%);
  transform-origin: 100% 50%;
}
.launcher-preview[data-style=text][data-position=e] img,
.launcher-preview[data-style=text][data-position=e] svg {
  transform: rotate(90deg);
}
.launcher-preview[data-style=text][data-position=w] {
  top: 50%;
  left: 0;
  margin-top: calc(-20px + var(--widget-preview-launcher-offset-y) * -1);
  transform: rotate(-90deg) translateX(-50%) translateY(50%);
  transform-origin: 0 50%;
}
.launcher-preview[data-style=text][data-position=w] img,
.launcher-preview[data-style=text][data-position=w] svg {
  transform: rotate(90deg);
}
.launcher-preview[data-style=text][data-position=se] {
  right: var(--widget-preview-launcher-offset-x);
  bottom: 0;
}
.launcher-preview[data-style=text][data-position=sw] {
  left: var(--widget-preview-launcher-offset-x);
  bottom: 0;
}
.launcher-preview[data-style=circle] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px;
}
.launcher-preview[data-style=circle] img,
.launcher-preview[data-style=circle] svg {
  display: block;
  width: 20px;
  height: 20px;
}
.launcher-preview[data-style=circle][data-position=e] {
  right: 20px;
  top: 50%;
  margin-top: calc(-24px + var(--widget-preview-launcher-offset-y) * -1);
}
.launcher-preview[data-style=circle][data-position=w] {
  left: 20px;
  top: 50%;
  margin-top: calc(-24px + var(--widget-preview-launcher-offset-y) * -1);
}
.launcher-preview[data-style=circle][data-position=se] {
  right: var(--widget-preview-launcher-offset-x);
  bottom: var(--widget-preview-launcher-offset-y);
}
.launcher-preview[data-style=circle][data-position=sw] {
  left: var(--widget-preview-launcher-offset-x);
  bottom: var(--widget-preview-launcher-offset-y);
}

.onboarding-container {
  position: relative;
}
.onboarding-container:not(.onboarding-container-simple) {
  min-height: 340px;
}
.onboarding-container .onboarding-footer {
  text-align: center;
}
.onboarding-container .onboarding-footer:not(.onboarding-footer-simple) {
  display: grid;
  grid-template-columns: 100px auto 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.onboarding-container .onboarding-footer > div:first-child {
  text-align: left;
}
.onboarding-container .onboarding-footer > div:last-child {
  text-align: right;
}
.onboarding-container .onboarding-footer > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colour-neutral);
  font-size: 13px;
}
.onboarding-container .submit-progress {
  opacity: 0;
}
.onboarding-container .submit-progress.active {
  opacity: 1;
}
.onboarding-container .url-validation {
  display: none;
}
.onboarding-container .url-taken {
  margin-top: 8px;
  font-size: 13px;
  color: var(--colour-danger);
}

.template-gallery-selection {
  width: 1040px;
  max-width: 100%;
  margin: 48px auto 0 auto;
  text-align: center;
}
@media (max-width: 800px) {
  .template-gallery-selection {
    margin-top: 16px;
  }
}
.template-gallery-selection h1 {
  margin-bottom: 64px;
}
@media (max-width: 800px) {
  .template-gallery-selection h1 {
    margin-bottom: 32px;
    font-size: 20px;
  }
}
.template-gallery-selection .template-choice-container {
  padding: 64px 64px 48px 64px;
  border: 1px solid var(--colour-neutral-25);
  border-radius: 16px;
  background-color: var(--colour-system-box-bg-dark-only);
  transition: all 0.1s;
  cursor: pointer;
}
@media (max-width: 800px) {
  .template-gallery-selection .template-choice-container {
    padding: 32px;
  }
}
:root[data-colour-scheme=light] .template-gallery-selection .template-choice-container:hover, :root[data-colour-scheme=light] .template-gallery-selection button.template-choice-container.success.active, :root[data-colour-scheme=light] .template-gallery-selection button.template-choice-container.info.active, :root[data-colour-scheme=light] .template-gallery-selection button.template-choice-container.danger.active {
  box-shadow: 0 2px 8px var(--colour-neutral-100);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .template-gallery-selection .template-choice-container:hover, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.success.active, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.info.active, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.danger.active {
    box-shadow: 0 2px 8px var(--colour-neutral-100);
  }
}
:root[data-colour-scheme=dark] .template-gallery-selection .template-choice-container:hover, :root[data-colour-scheme=dark] .template-gallery-selection button.template-choice-container.success.active, :root[data-colour-scheme=dark] .template-gallery-selection button.template-choice-container.info.active, :root[data-colour-scheme=dark] .template-gallery-selection button.template-choice-container.danger.active {
  border-color: var(--colour-neutral-50);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .template-gallery-selection .template-choice-container:hover, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.success.active, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.info.active, :root:not([data-colour-scheme]) .template-gallery-selection button.template-choice-container.danger.active {
    border-color: var(--colour-neutral-50);
  }
}
.template-gallery-selection .template-choice-container:hover button.btn-template.primary, .template-gallery-selection button.template-choice-container.success.active button.btn-template.primary, .template-gallery-selection button.template-choice-container.info.active button.btn-template.primary, .template-gallery-selection button.template-choice-container.danger.active button.btn-template.primary {
  display: block;
}
.template-gallery-selection .template-choice-container:hover button.btn-template.tertiary, .template-gallery-selection button.template-choice-container.success.active button.btn-template.tertiary, .template-gallery-selection button.template-choice-container.info.active button.btn-template.tertiary, .template-gallery-selection button.template-choice-container.danger.active button.btn-template.tertiary {
  display: none;
}
.template-gallery-selection .template-choice-container:hover .btn-start, .template-gallery-selection button.template-choice-container.success.active .btn-start, .template-gallery-selection button.template-choice-container.info.active .btn-start, .template-gallery-selection button.template-choice-container.danger.active .btn-start {
  opacity: 1;
}
.template-gallery-selection .template-choice-container > div {
  max-width: 320px;
  margin: auto;
}
.template-gallery-selection .template-choice-container .project-type {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 16px;
  color: var(--colour-system-text-inverse);
  font-size: 32px;
}
@media (max-width: 800px) {
  .template-gallery-selection .template-choice-container .project-type {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}
.template-gallery-selection .template-choice-container .project-type[data-val=feedback] {
  background-color: var(--colour-feedback-600);
}
.template-gallery-selection .template-choice-container .project-type[data-val=feedback]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b4";
  color: var(--colour-on-accent);
}
.template-gallery-selection .template-choice-container .project-type[data-val=survey] {
  background-color: var(--colour-survey-600);
}
.template-gallery-selection .template-choice-container .project-type[data-val=survey]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f200";
  color: var(--colour-on-accent);
}
.template-gallery-selection .template-choice-container h3 {
  margin: 24px 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}
.template-gallery-selection .template-choice-container button {
  margin: 24px 0 0 0;
}
@media (max-width: 800px) {
  .template-gallery-selection .template-choice-container button {
    margin: 12px 0 0 0;
  }
}
.template-gallery-selection .template-choice-container button.btn-template.primary {
  display: none;
}
.template-gallery-selection .template-choice-container button.btn-template.tertiary {
  display: block;
}
.template-gallery-selection .template-choice-container .btn-start {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  margin-top: 12px;
  color: var(--colour-neutral-600);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.1s;
  opacity: 0;
}
.template-gallery-selection .template-choice-container .btn-start:hover[data-val=feedback], .template-gallery-selection .template-choice-container button.btn-start[data-val=feedback].success.active, .template-gallery-selection .template-choice-container button.btn-start[data-val=feedback].info.active, .template-gallery-selection .template-choice-container button.btn-start[data-val=feedback].danger.active {
  color: var(--colour-feedback-600);
}
.template-gallery-selection .template-choice-container .btn-start:hover[data-val=survey], .template-gallery-selection .template-choice-container button.btn-start[data-val=survey].success.active, .template-gallery-selection .template-choice-container button.btn-start[data-val=survey].info.active, .template-gallery-selection .template-choice-container button.btn-start[data-val=survey].danger.active {
  color: var(--colour-survey-600);
}

.template-gallery {
  display: none;
}

.template-gallery-container {
  width: 1120px;
  max-width: 100%;
  margin: 12px auto 0 auto;
}
@media (max-width: 1200px) {
  .template-gallery-container {
    width: 792px;
  }
}
@media (max-width: 800px) {
  .template-gallery-container {
    width: 384px;
  }
}
.template-gallery-container .start-scratch {
  position: fixed;
  z-index: 100;
  top: 14px;
  right: 64px;
}
.template-gallery-container .template-gallery-filter {
  width: 260px;
}
.template-gallery-container .template-gallery-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 310px;
}
.template-gallery-container .template-gallery-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 32px;
  margin-top: 24px;
}
@media (max-width: 1200px) {
  .template-gallery-container .template-gallery-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .template-gallery-container .template-gallery-list {
    grid-template-columns: 1fr;
  }
}
.template-gallery-container .template-gallery-thumbnail {
  overflow: hidden;
  position: relative;
  height: 276px;
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-neutral-100);
  background-color: #F2F5F7;
  transition: all 0.2s;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.template-gallery-container .template-gallery-thumbnail[data-type=survey] {
  height: 212px;
  background-color: var(--colour-system-surface);
  background-size: cover;
}
.template-gallery-container .template-gallery-thumbnail:not(.disabled):hover .template-gallery-cta, .template-gallery-container button.template-gallery-thumbnail.success.active:not(.disabled) .template-gallery-cta, .template-gallery-container button.template-gallery-thumbnail.info.active:not(.disabled) .template-gallery-cta, .template-gallery-container button.template-gallery-thumbnail.danger.active:not(.disabled) .template-gallery-cta {
  display: flex;
}
.template-gallery-container .template-gallery-thumbnail.disabled:not(.loading) {
  opacity: 0.4;
  pointer-events: none;
}
.template-gallery-container .template-gallery-thumbnail.disabled:not(.loading) + .template-gallery-metadata {
  opacity: 0.4;
  pointer-events: none;
}
.template-gallery-container .template-gallery-thumbnail.loading:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(96, 128, 160, 0.1) 0%, rgba(96, 128, 160, 0.2) 100%);
  backdrop-filter: blur(4px);
}
.template-gallery-container .template-gallery-thumbnail.loading:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f3f4";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 48px;
  line-height: 48px;
  margin: auto;
  text-align: center;
  font-size: 32px;
  color: var(--colour-neutral);
  animation: rotate 1s infinite linear;
}
.template-gallery-container .template-gallery-cta {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  animation: fadeIn 0.2s;
  background: linear-gradient(180deg, rgba(96, 128, 160, 0.1) 0%, rgba(96, 128, 160, 0.2) 100%);
  backdrop-filter: blur(4px);
}
.template-gallery-container .template-gallery-cta > button {
  margin: 0 8px;
}
.template-gallery-container .template-gallery-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.template-gallery-container .template-gallery-name > span:first-child {
  font-weight: 600;
  line-height: 20px;
  color: var(--colour-neutral-1000);
}
.template-gallery-container .template-gallery-type {
  color: var(--colour-feedback-600);
  font-weight: 500;
  line-height: 16px;
}
.template-gallery-container .template-gallery-type[data-type=survey] {
  color: var(--colour-survey-600);
}

.template-preview {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.1s;
  width: auto;
  overflow: hidden;
  background-color: rgba(35, 46, 58, 0.92);
}
@media (max-width: 800px) {
  .template-preview {
    width: auto;
    left: 0;
  }
}
.template-preview .template-survey-container {
  overflow: hidden;
  position: absolute;
  top: 8px;
  right: 436px;
  bottom: 0;
  left: 8px;
}
.template-preview .region-floating-buttons button.nav {
  position: absolute;
  z-index: 200;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background-color: rgba(35, 46, 58, 0.6);
  color: var(--colour-system-text-inverse);
  font-size: 16px;
  cursor: pointer;
}
.template-preview .region-floating-buttons button.nav.prev {
  left: 54px;
}
.template-preview .region-floating-buttons button.nav.next {
  right: 54px;
}
.template-preview .region-floating-buttons button.nav:hover, .template-preview .region-floating-buttons button.nav.success.active, .template-preview .region-floating-buttons button.nav.info.active, .template-preview .region-floating-buttons button.nav.danger.active {
  background-color: rgba(35, 46, 58, 0.8);
}
.template-preview .region-floating-buttons .survey-preview {
  display: none;
}
.template-preview .template-preview-sidebar {
  overflow: auto;
  scroll-behavior: smooth;
  padding: 0 0 32px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 4px 16px rgba(35, 46, 58, 0.2), -4px 0 16px rgba(35, 46, 58, 0.1);
}
@media (max-width: 800px) {
  .template-preview .template-preview-sidebar {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
  }
}
.template-preview .template-preview-sidebar-header {
  position: relative;
  padding: 28px 32px 0 32px;
}
.template-preview .template-preview-sidebar-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background-color: var(--colour-system-surface);
}
.template-preview .template-preview-sidebar-body {
  padding: 0 32px;
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item {
  position: relative;
  padding: 2px 0;
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item span {
  margin-left: 40px;
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item:before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  margin: auto;
  border-radius: 4px;
  background-color: var(--colour-neutral-50);
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item[data-type=intro]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
  background-color: var(--colour-attention-100);
  color: var(--colour-attention-700);
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item[data-type=selection]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
  background-color: var(--colour-dolphin-100);
  color: var(--colour-dolphin-700);
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item[data-type=text]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4a7";
  background-color: var(--colour-success-100);
  color: var(--colour-success-700);
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item[data-type=poll]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e473";
  background-color: var(--colour-danger-100);
  color: var(--colour-danger-700);
}
.template-preview .template-preview-sidebar-body[data-project-type=survey] .feature-group-item[data-type=thankyou]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10e";
  background-color: var(--colour-neutral-700);
  color: var(--colour-system-text-inverse);
}
.template-preview .template-preview-main {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 420px;
  bottom: 0;
  left: 0;
}
.template-preview .template-preview-main .template-preview-body {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 900px;
  max-width: calc(100vw - 420px - 100px);
  margin: auto;
  overflow-x: auto;
}
.template-preview .template-preview-main .template-preview-nav-prev,
.template-preview .template-preview-main .template-preview-nav-next {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(35, 46, 58, 0.6);
  color: var(--colour-system-text-inverse);
  font-size: 16px;
  cursor: pointer;
  animation: fadeIn 0.2s linear;
}
.template-preview .template-preview-main .template-preview-nav-prev:hover, .template-preview .template-preview-main button.template-preview-nav-prev.success.active, .template-preview .template-preview-main button.template-preview-nav-prev.info.active, .template-preview .template-preview-main button.template-preview-nav-prev.danger.active,
.template-preview .template-preview-main .template-preview-nav-next:hover,
.template-preview .template-preview-main button.template-preview-nav-next.success.active,
.template-preview .template-preview-main button.template-preview-nav-next.info.active,
.template-preview .template-preview-main button.template-preview-nav-next.danger.active {
  background-color: rgba(35, 46, 58, 0.8);
}
.template-preview .template-preview-main .template-preview-nav-prev {
  left: 54px;
}
.template-preview .template-preview-main .template-preview-nav-next {
  right: 54px;
}
.template-preview .template-preview-main:hover .template-preview-nav-prev, .template-preview button.template-preview-main.success.active .template-preview-nav-prev, .template-preview button.template-preview-main.info.active .template-preview-nav-prev, .template-preview button.template-preview-main.danger.active .template-preview-nav-prev,
.template-preview .template-preview-main:hover .template-preview-nav-next,
.template-preview button.template-preview-main.success.active .template-preview-nav-next,
.template-preview button.template-preview-main.info.active .template-preview-nav-next,
.template-preview button.template-preview-main.danger.active .template-preview-nav-next {
  display: block;
}
.template-preview .template-preview-main:hover .template-preview-nav-prev:disabled, .template-preview button.template-preview-main.success.active .template-preview-nav-prev:disabled, .template-preview button.template-preview-main.info.active .template-preview-nav-prev:disabled, .template-preview button.template-preview-main.danger.active .template-preview-nav-prev:disabled,
.template-preview .template-preview-main:hover .template-preview-nav-next:disabled,
.template-preview button.template-preview-main.success.active .template-preview-nav-next:disabled,
.template-preview button.template-preview-main.info.active .template-preview-nav-next:disabled,
.template-preview button.template-preview-main.danger.active .template-preview-nav-next:disabled {
  display: none;
}
.template-preview .template-preview-main .template-preview-content {
  display: flex;
  justify-content: center;
  flex: 1;
}
.template-preview .template-preview-main .template-preview-content.scrollable {
  display: block;
  margin-left: calc(50% - 210px);
  padding-right: calc(50% - 210px);
}
.template-preview .template-preview-main .template-preview-inner {
  display: flex;
  align-items: center;
}
.template-preview .template-preview-main .template-preview-success {
  margin-left: 40px;
}
.template-preview .template-preview-sidebar-header {
  position: sticky;
  top: 0;
  z-index: 700;
  background-color: var(--colour-system-surface);
}
.template-preview.template-preview-expanded {
  display: block;
}
.template-preview.template-preview-animated {
  animation: fadeIn 0.2s linear;
}
.template-preview.template-preview-animated .template-preview-sidebar {
  opacity: 0;
  transform: translateX(50%);
  animation: opacityTransformRest 0.16s linear forwards;
}
@media (max-width: 800px) {
  .template-preview.template-preview-animated .template-preview-sidebar {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 800px) {
  .template-preview.template-preview-animated .template-preview-main {
    display: none;
  }
}
.template-preview .region-nav {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
}
.template-preview .region-nav .nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  font-size: 22px;
  cursor: pointer;
}
.template-preview .region-nav .nav-close:hover:not(:disabled), .template-preview .region-nav button.nav-close.success.active:not(:disabled), .template-preview .region-nav button.nav-close.info.active:not(:disabled), .template-preview .region-nav button.nav-close.danger.active:not(:disabled) {
  color: var(--colour-neutral);
}
.template-preview .region-nav .nav-close:disabled {
  opacity: 0.5;
  cursor: default;
}
.template-preview .region-heading {
  margin-bottom: 24px;
}
.template-preview .region-heading .template-title {
  color: var(--colour-neutral-600);
  font-size: 13px;
  font-weight: 400;
}
.template-preview .region-heading .template-name {
  margin-top: 8px;
  color: var(--colour-neutral-1000);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
.template-preview .region-btn {
  margin-top: 20px;
  margin-bottom: 4px;
}
.template-preview .section-box {
  margin: 24px 0;
}
.template-preview .section-body {
  line-height: 20px;
}
.template-preview .section-title {
  padding-bottom: 8px;
  color: var(--colour-neutral-1000);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.template-preview .feature-group {
  margin-bottom: 20px;
}
.template-preview .feature-group .feature-group-heading {
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--colour-neutral-1000);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.template-preview .feature-group .feature-group-body {
  padding: 8px 22px;
  border-radius: 8px;
  border: 1px solid var(--colour-neutral-75);
}
.template-preview .feature-group .feature-group-item {
  margin: 12px 0;
}
.template-preview .feature-group .feature-group-item i {
  color: var(--colour-success-600);
  margin-right: 10px;
}
.template-preview .feature-group .feature-group-item i.icon-placeholder {
  display: inline-block;
  width: 12px;
}
.template-preview .feature-group .feature-group-item i.text-danger {
  color: var(--colour-danger-700);
}

.survey-icon-nps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border: 1px solid var(--colour-system-line);
  border-radius: 4px;
  background-color: var(--colour-system-surface);
}

.survey-icon-heart {
  margin-right: 4px;
  color: var(--colour-danger);
}

.survey-icon-star,
.survey-icon-emoji,
.survey-icon-thumb {
  margin-right: 4px;
  color: var(--colour-attention);
}

.survey-user {
  display: flex;
  align-items: center;
  justify-content: start;
  text-decoration: none;
}
.survey-user > i {
  margin-left: 4px;
}

.survey-response-expired-mask {
  display: block;
  height: 18px;
  border-radius: 4px;
  background-color: var(--colour-neutral-75);
}

.survey-response-sidebar {
  overflow: auto;
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  right: 0;
  width: 480px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-sidebar);
  opacity: 0;
  transform: translateX(50%);
  animation: opacityTransformRest 0.16s linear forwards;
}
.survey-response-sidebar .layout-header {
  position: sticky;
  top: 0;
  z-index: 700;
  padding: 28px 32px 0 32px;
  background-color: var(--colour-system-surface);
}
.survey-response-sidebar .layout-body {
  padding: 0 32px 28px 32px;
}
.survey-response-sidebar .region-nav {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
}
.survey-response-sidebar .region-nav .nav-close,
.survey-response-sidebar .region-nav .nav-prev,
.survey-response-sidebar .region-nav .nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  font-size: 22px;
  cursor: pointer;
}
.survey-response-sidebar .region-nav .nav-close:hover:not(:disabled), .survey-response-sidebar .region-nav button.nav-close.success.active:not(:disabled), .survey-response-sidebar .region-nav button.nav-close.info.active:not(:disabled), .survey-response-sidebar .region-nav button.nav-close.danger.active:not(:disabled),
.survey-response-sidebar .region-nav .nav-prev:hover:not(:disabled),
.survey-response-sidebar .region-nav button.nav-prev.success.active:not(:disabled),
.survey-response-sidebar .region-nav button.nav-prev.info.active:not(:disabled),
.survey-response-sidebar .region-nav button.nav-prev.danger.active:not(:disabled),
.survey-response-sidebar .region-nav .nav-next:hover:not(:disabled),
.survey-response-sidebar .region-nav button.nav-next.success.active:not(:disabled),
.survey-response-sidebar .region-nav button.nav-next.info.active:not(:disabled),
.survey-response-sidebar .region-nav button.nav-next.danger.active:not(:disabled) {
  color: var(--colour-neutral);
}
.survey-response-sidebar .region-nav .nav-close:disabled,
.survey-response-sidebar .region-nav .nav-prev:disabled,
.survey-response-sidebar .region-nav .nav-next:disabled {
  opacity: 0.5;
  cursor: default;
}
.survey-response-sidebar .region-heading {
  margin-bottom: 24px;
}
.survey-response-sidebar .survey-title {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.survey-response-sidebar .region-response-details {
  margin-top: 12px;
  word-break: break-word;
}
.survey-response-sidebar .region-session-details {
  margin: 0 0 24px 0;
}
.survey-response-sidebar .region-session-details .session-data-panel {
  display: grid;
  grid-template-columns: 32px calc(100% - 32px);
  grid-gap: 8px;
}
.survey-response-sidebar .region-custom-data {
  font-size: 13px;
  word-break: break-all;
}
.survey-response-sidebar .region-custom-data .custom-data-panel .item-content {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-gap: 8px;
}
.survey-response-sidebar .region-custom-data .custom-data-panel .title {
  color: var(--colour-neutral);
  font-weight: 500;
}
.survey-response-sidebar .item-header {
  line-height: 24px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.survey-response-sidebar .session-replay-watch {
  height: 40px;
  line-height: 40px;
  margin-top: 8px;
  padding: 0 16px;
  border-radius: 8px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary-dark-invert);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.survey-response-sidebar .region-user-data {
  position: relative;
  margin-bottom: 24px;
}
.survey-response-sidebar .region-user-data .item-count {
  margin-left: 8px;
  font-weight: 500;
}
.survey-response-sidebar .region-user-data .item-content {
  font-size: 13px;
}
.survey-response-sidebar .region-user-data .item-content.empty,
.survey-response-sidebar .region-user-data .item-content > div.empty {
  color: var(--colour-neutral);
  font-style: italic;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) > div:not(.empty) {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 8px;
  margin-bottom: 12px;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) > div:not(.empty):last-child {
  margin-bottom: 0;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) .title {
  color: var(--colour-neutral);
  font-weight: 500;
  word-break: break-all;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) .value {
  word-break: break-all;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown {
  position: absolute;
  top: -4px;
  right: 0;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button {
  width: 32px;
  height: 32px;
  font-size: 24px;
  color: var(--colour-neutral);
  border-radius: 8px;
}
.survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button:hover, .survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.success.active, .survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.info.active, .survey-response-sidebar .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary);
}

.survey-question-condition {
  min-width: 500px;
}
.survey-question-condition .region-conditions {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
  margin: 0;
  padding: 24px 24px 8px 24px;
}
.survey-question-condition .region-actions {
  padding: 0 24px 24px 24px;
}
.survey-question-condition .condition-item {
  display: grid;
  grid-template-columns: 32px auto;
}
.survey-question-condition .condition-item:not(:last-child) {
  margin-bottom: 16px;
}
.survey-question-condition .condition-item > div:last-child {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 8px;
}
.survey-question-condition .condition-item > div:last-child > div:first-child {
  grid-column: 1/-1;
}
.survey-question-condition .condition-item .question-condition-value {
  width: 100%;
}
.survey-question-condition .condition-item .search-operator {
  width: 133px;
}
.survey-question-condition .condition-item .question-icon {
  position: relative;
  padding-left: 28px;
}
.survey-question-condition .condition-item .question-icon:before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 12px;
}
.survey-question-condition .condition-item .question-icon[data-type=short]:before, .survey-question-condition .condition-item .question-icon[data-type=long]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4a7";
  background-color: var(--colour-success-100);
  color: var(--colour-success-700);
}
.survey-question-condition .condition-item .question-icon[data-type=nps]:before, .survey-question-condition .condition-item .question-icon[data-type=rating]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e473";
  background-color: var(--colour-danger-100);
  color: var(--colour-danger-700);
}
.survey-question-condition .condition-item .question-icon[data-type=dropdown]:before, .survey-question-condition .condition-item .question-icon[data-type=multiple]:before, .survey-question-condition .condition-item .question-icon[data-type=yesno]:before {
  background-color: var(--colour-dolphin-100);
  color: var(--colour-dolphin-700);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
}
.survey-question-condition .condition-delete:disabled {
  color: var(--colour-neutral-100);
  cursor: not-allowed;
}

.survey-schedule-form .has-end.fade {
  color: var(--colour-neutral-600);
}
.survey-schedule-form .has-end.fade label {
  color: var(--colour-neutral-600);
}
.survey-schedule-form .schedule-instruction {
  color: var(--colour-neutral-600);
  margin: 8px 0 0 26px;
}
.survey-schedule-form .date-start,
.survey-schedule-form .date-end {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
  width: 300px;
  margin: 14px 0 0 26px;
}
.survey-schedule-form .date-start.active,
.survey-schedule-form .date-end.active {
  display: grid;
}

.survey-canvas-container {
  position: absolute;
  opacity: 0;
  transition: all 0.1s;
}
.survey-canvas-container.loaded {
  opacity: 1;
}
.survey-canvas-container .close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  cursor: pointer;
}
.survey-canvas-container .close svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: var(--colour-neutral);
}
.survey-canvas-container .close:hover svg, .survey-canvas-container button.close.success.active svg, .survey-canvas-container button.close.info.active svg, .survey-canvas-container button.close.danger.active svg {
  fill: var(--colour-neutral-dark);
}
.survey-canvas-container[data-position=top] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.survey-canvas-container[data-position=top_left] {
  top: 0;
  left: 0;
}
.survey-canvas-container[data-position=top_right] {
  top: 0;
  right: 0;
}
.survey-canvas-container[data-position=left] {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.survey-canvas-container[data-position=right] {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.survey-canvas-container[data-position=bottom_left] {
  bottom: 0;
  left: 0;
}
.survey-canvas-container[data-position=bottom_right] {
  bottom: 0;
  right: 0;
}
.survey-canvas-container[data-position=bottom] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.survey-canvas-container[data-position=center] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.survey-preview-container {
  overflow: hidden;
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 24px;
  left: 24px;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: all 0.1s;
}
.survey-preview-container .region-survey-canvas {
  position: relative;
  height: calc(100% - 48px);
}
@media (prefers-color-scheme: dark) {
  .survey-preview-container .region-survey-canvas:not([data-ub-colour-scheme]) {
    color-scheme: dark;
  }
}
.survey-preview-container .region-survey-canvas .survey-canvas-margin-box {
  position: absolute;
}
.survey-preview-container .region-survey-canvas[data-format=pageless] .survey-canvas-margin-box {
  inset: 0;
}
.survey-preview-container .region-survey-canvas[data-format=pageless] .survey-canvas-container {
  overflow-x: hidden;
  overflow-y: auto;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  padding: 80px 12px;
  max-height: 100%;
  box-sizing: border-box;
  scrollbar-width: none;
}
.survey-preview-container .region-survey-canvas[data-format=pageless] .survey-canvas-container .close {
  top: 80px;
  right: 12px;
}
.survey-preview-container .region-survey-canvas[data-format=paged] {
  overflow-x: hidden;
  overflow-y: auto;
}
.survey-preview-container .region-survey-canvas[data-format=paged] .survey-canvas-margin-box {
  inset: 24px;
}
.survey-preview-container .region-survey-canvas[data-format=paged] .survey-preview-iframe {
  max-height: 600px;
}
.survey-preview-container.hide-nav .region-floating-buttons {
  display: none;
}
.survey-preview-container.hide-nav .region-survey-canvas {
  height: 100%;
}
.survey-preview-container.hide-nav .survey-preview-iframe {
  overflow-x: hidden;
  overflow-y: auto;
}

.survey-preview-iframe {
  display: block;
  height: 600px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: var(--colour-system-surface);
}
.survey-preview-iframe[data-size=smaller] {
  width: 352px;
}
.survey-preview-iframe[data-size=smaller-widget] {
  width: 448px;
}
.survey-preview-iframe[data-size=small] {
  width: 448px;
}
.survey-preview-iframe[data-size=small-wide] {
  width: 544px;
}
.survey-preview-iframe[data-size=medium] {
  width: 544px;
}
.survey-preview-iframe[data-size=medium-wide] {
  width: 640px;
}
.survey-preview-iframe[data-size=large] {
  width: 640px;
}
.survey-preview-iframe[data-size=large-wide] {
  width: 736px;
}
.survey-preview-iframe[data-size=larger] {
  width: 736px;
}
.survey-preview-iframe[data-size=larger-wide] {
  width: 832px;
}
.survey-preview-iframe[data-size=largest] {
  width: 1120px;
}

.widget-studio {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
.widget-studio:not(.hide-animation) {
  opacity: 0;
  transform: translateY(-60px) scale(0.8);
  transform-origin: 70% 50%;
  animation: opacityTransformRest 0.2s forwards;
}
.widget-studio .region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  padding: 0 24px;
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
.widget-studio .region-step {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
}
.widget-studio .region-step.active {
  display: block;
}
.widget-studio .region-step[data-val=audience] {
  overflow: auto;
  padding: 32px 0;
}
.widget-studio .region-step[data-val=audience] > div {
  max-width: 660px;
  margin: auto;
}
.widget-studio .region-step[data-val=install] {
  overflow: auto;
  padding: 32px 0;
}
.widget-studio .region-widget-preview {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 640px;
  left: 0;
  bottom: 0;
  background-color: var(--colour-system-body);
}
@media (max-width: 800px) {
  .widget-studio .region-widget-preview {
    display: none;
  }
}
.widget-studio .region-widget-preview .widget-demo {
  display: none;
}
.widget-studio .region-widget-preview > div {
  overflow: hidden;
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  left: 24px;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: all 0.1s;
}
.widget-studio .region-widget-preview[data-device=mobile] > div {
  width: 400px;
  height: 800px;
}
.widget-studio .region-page-conditions {
  display: none;
}
.widget-studio .region-page-conditions .page-condition-delete {
  cursor: pointer;
}
.widget-studio .region-page-conditions.active {
  display: block;
}
.widget-studio .region-page-conditions .url-match-type {
  display: grid;
  grid-template-columns: 32px 184px auto;
  grid-column-gap: 8px;
  margin: 8px 0 0 26px;
}
.widget-studio .region-page-conditions .page-condition-add {
  margin: 8px 0 0 26px;
}
.widget-studio .region-widget-settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 640px;
  border-left: 1px solid var(--colour-system-line);
}
@media (max-width: 800px) {
  .widget-studio .region-widget-settings {
    width: auto;
    left: 0;
  }
}
.widget-studio .region-widget-settings .setting-step {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.widget-studio .region-widget-settings .action-bar {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 48px;
  left: 48px;
  padding: 12px 0;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
}
@media (max-width: 800px) {
  .widget-studio .region-widget-settings .action-bar {
    left: 16px;
    right: 16px;
  }
}
.widget-studio .region-widget-settings .action-bar .form-type {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  line-height: 32px;
}
.widget-studio .region-widget-settings .action-bar-single {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 32px;
  padding: 12px 0;
  text-align: right;
  background-color: var(--colour-system-surface);
}
.widget-studio .region-widget-settings .action-bar-single button {
  margin-left: 8px;
}
.widget-studio .region-widget-settings .action-bar-single button:first-child {
  margin-left: 0;
}
.widget-studio .setting-content {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
}
.widget-studio .setting-content.setting-content-float {
  top: 68px;
}
.widget-studio .setting-content.setting-content-float > div {
  padding-top: 24px;
}
@media (max-width: 800px) {
  .widget-studio .setting-content.setting-content-float > div {
    padding: 24px;
  }
}
.widget-studio .setting-content > div {
  padding: 36px 48px 96px 48px;
}
@media (max-width: 800px) {
  .widget-studio .setting-content > div {
    padding: 36px 16px 32px 16px;
  }
}
.widget-studio .region-form-edit {
  display: none;
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
}
.widget-studio .region-form-edit.open {
  display: block;
}
.widget-studio .region-form-edit .setting-content {
  display: none;
}
.widget-studio .region-form-edit .setting-content > div {
  padding-top: 60px;
}
.widget-studio .region-form-edit .setting-content.open {
  display: block;
}
.widget-studio .region-project-name {
  padding: 8px;
  margin-left: -8px;
}
.widget-studio .region-save-btns {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 4px;
  margin-right: -4px;
}
.widget-studio .region-save-btns .help-btn {
  font-size: 18px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.widget-studio .region-save-btns .help-btn:hover, .widget-studio .region-save-btns button.help-btn.success.active, .widget-studio .region-save-btns button.help-btn.info.active, .widget-studio .region-save-btns button.help-btn.danger.active {
  color: var(--colour-primary);
}
.widget-studio .setting-title {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 15px;
}
.widget-studio .setting-subtitle {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 14px;
}
.widget-studio .region-preview-action-bar {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}
.widget-studio .region-preview-form {
  overflow: auto;
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  display: flex;
  background: linear-gradient(var(--colour-system-surface), var(--colour-neutral-100));
}
.widget-studio .region-preview-form:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  background-image: linear-gradient(var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(90deg, var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(var(--colour-neutral-25) 1px, transparent 1px), linear-gradient(90deg, var(--colour-neutral-25) 1px, var(--colour-system-surface) 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.widget-studio .region-preview-form[data-modal=true] .widget-form-preview {
  position: relative;
  margin: auto;
}
.widget-studio .region-preview-form .userback-controls {
  color-scheme: light;
  --colour-primary: var(--colour-primary-600);
  --colour-neutral-1000: #232E3A;
  --colour-neutral-900: #324353;
  --colour-neutral-800: #41576D;
  --colour-neutral-700: #516C86;
  --colour-neutral-600: #6080A0;
  --colour-neutral-500: #7994AF;
  --colour-neutral-400: #93A9BE;
  --colour-neutral-300: #ACBDCE;
  --colour-neutral-200: #C6D1DD;
  --colour-neutral-100: #DFE6EC;
  --colour-neutral-75: #E6EBF0;
  --colour-neutral-50: #ECF0F4;
  --colour-neutral-25: #F2F5F7;
  --colour-neutral-10: #F9FAFB;
  --colour-code-bg: #324353;
  --colour-neutral-100-dark-invert: var(--colour-neutral-100);
  --colour-neutral-200-dark-invert: var(--colour-neutral-200);
  --colour-neutral-300-dark-invert: var(--colour-neutral-300);
  --colour-neutral-400-dark-invert: var(--colour-neutral-400);
  --colour-neutral-500-dark-invert: var(--colour-neutral-500);
  --colour-neutral-600-dark-invert: var(--colour-neutral-600);
  --colour-neutral-700-dark-invert: var(--colour-neutral-700);
  --colour-neutral-800-dark-invert: var(--colour-neutral-800);
  --colour-neutral-900-dark-invert: var(--colour-neutral-900);
  --colour-neutral-1000-dark-invert: var(--colour-neutral-1000);
  --colour-primary-100-dark-invert: var(--colour-primary-100);
  --colour-primary-200-dark-invert: var(--colour-primary-200);
  --colour-primary-300-dark-invert: var(--colour-primary-300);
  --colour-primary-400-dark-invert: var(--colour-primary-400);
  --colour-primary-500-dark-invert: var(--colour-primary-500);
  --colour-primary-600-dark-invert: var(--colour-primary-600);
  --colour-primary-700-dark-invert: var(--colour-primary-700);
  --colour-primary-800-dark-invert: var(--colour-primary-800);
  --colour-primary-900-dark-invert: var(--colour-primary-900);
  --colour-primary-1000-dark-invert: var(--colour-primary-1000);
  --colour-primary-dark-invert: var(--colour-primary);
  --colour-danger-dark-invert: var(--colour-danger);
  --colour-primary-dark-invert-neutral-100: var(--colour-primary);
  --colour-primary-dark-invert-neutral-200: var(--colour-primary);
  --colour-primary-dark-invert-neutral-300: var(--colour-primary);
  --colour-primary-dark-invert-neutral-400: var(--colour-primary);
  --colour-primary-dark-invert-neutral-500: var(--colour-primary);
  --colour-primary-dark-invert-neutral-600: var(--colour-primary);
  --colour-primary-dark-invert-neutral-700: var(--colour-primary);
  --colour-primary-dark-invert-neutral-800: var(--colour-primary);
  --colour-primary-dark-invert-neutral-900: var(--colour-primary);
  --colour-primary-dark-invert-neutral-1000: var(--colour-primary);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #F0F3F9;
  --colour-system-line: var(--colour-neutral-75);
  --colour-system-surface: #FFFFFF;
  --colour-system-surface-rgb: 255, 255, 255;
  --colour-system-surface-1: #FFFFFF;
  --colour-system-surface-2: var(--colour-neutral-10);
  --colour-system-surface-3: var(--colour-neutral-25);
  --colour-system-text-muted: var(--colour-neutral-400);
  --colour-system-text-inverse: #FFFFFF;
  --colour-system-overlay: rgba(96, 128, 160, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.2);
  --colour-system-box-bg-dark-only: transparent;
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-75);
  --colour-menu-active-bg-hover: var(--colour-neutral-50);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-4: 0 0 16px var(--colour-neutral-75);
  --shadow-sidebar: -4px 0 16px var(--colour-neutral-100);
  --shadow-box-solid-hover-light-only: 0px 4px 10px var(--colour-neutral-75);
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(172, 189, 206)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-1000);
  --colour-internal-border: var(--colour-neutral-1000);
  --colour-internal-text: var(--colour-system-text-inverse);
  --colour-internal-launcher: var(--colour-neutral-300);
  --colour-status-success-bg: var(--colour-success-50);
  --colour-status-success-bg-hover: var(--colour-success-100);
  --colour-status-attention-bg: var(--colour-attention-50);
  --colour-status-attention-bg-hover: var(--colour-attention-100);
  --colour-portal-pinned-bg: var(--colour-attention-10);
  --colour-portal-voted-bg: var(--colour-neutral-25);
  --colour-mask-dark: #000000;
  --colour-badge-primary-invert-bg: var(--colour-primary-25);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-25);
  --colour-badge-warning-invert-bg: var(--colour-warning-25);
  --colour-badge-danger-invert-bg: var(--colour-danger-25);
  --colour-badge-primary-invert-text: var(--colour-primary-600);
  --colour-badge-secondary-invert-text: var(--colour-neutral-600);
  --colour-badge-success-invert-text: var(--colour-success-600);
  --colour-badge-warning-invert-text: var(--colour-warning-600);
  --colour-badge-danger-invert-text: var(--colour-danger-600);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-50);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-system-surface);
  --colour-banner-warning-bg: var(--colour-warning-25);
  --colour-banner-warning-border: var(--colour-warning-50);
  --colour-banner-danger-bg: var(--colour-danger-25);
  --colour-banner-danger-border: var(--colour-danger-50);
  --colour-banner-success-bg: var(--colour-success-25);
  --colour-banner-success-border: var(--colour-success-50);
  --colour-banner-info-bg: var(--colour-dolphin-25);
  --colour-banner-info-border: var(--colour-dolphin-50);
  --colour-notification-attention-bg: var(--colour-system-surface);
  --colour-notification-attention-border: var(--colour-attention-600);
  --gradient-shiny-bg: linear-gradient(90deg, #FFF0F2, #F2F0FF);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-notification-attention-highlight: var(--colour-attention-600);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-system-surface);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-primary-600);
  --colour-input-border-focus: var(--colour-primary-200);
  --colour-checkbox-text: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-600);
  --colour-checkbox-bg-hover: var(--colour-primary-700);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-1000);
  --colour-button-secondary-bg-hover: var(--colour-neutral-900);
  --colour-button-secondary-bg-active: var(--colour-neutral-1000);
  --colour-button-secondary-text: var(--colour-system-text-inverse);
  --colour-button-tertiary-bg: var(--colour-system-surface);
  --colour-button-tertiary-border-hover: var(--colour-primary-600);
  --colour-button-bg-disabled: var(--colour-neutral-50);
  --colour-button-text-disabled: var(--colour-neutral-400);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-300) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-system-text);
  --colour-widget-nav-text-active: var(--widget-button-bg);
  --colour-widget-footer-shadow: 0 0 8px var(--colour-neutral-50);
  --colour-widget-preview-nav-text-active: var(--widget-preview-button-bg);
  --colour-widget-preview-nav-gradient: linear-gradient(180deg, var(--colour-system-surface) 0%, var(--colour-neutral-10) 60%, var(--colour-neutral-50) 100%);
}
@media (prefers-color-scheme: dark) {
  .widget-studio .region-preview-form .userback-controls:not([data-colour-scheme]) {
    color-scheme: dark;
    --colour-primary: var(--colour-primary-400);
    --colour-neutral-1000: #F3F6FA;
    --colour-neutral-900: #E3E9F0;
    --colour-neutral-800: #D3DCE6;
    --colour-neutral-700: #C3CEDB;
    --colour-neutral-600: #AFC0D1;
    --colour-neutral-500: #9BAEC1;
    --colour-neutral-400: #879CAF;
    --colour-neutral-300: #6E849A;
    --colour-neutral-200: #556A80;
    --colour-neutral-100: #3F5266;
    --colour-neutral-75: #344457;
    --colour-neutral-50: #2A384A;
    --colour-neutral-25: #202C3B;
    --colour-neutral-10: #161F2B;
    --colour-code-bg: #202C3B;
    --colour-neutral-100-dark-invert: var(--colour-system-text);
    --colour-neutral-200-dark-invert: var(--colour-system-text);
    --colour-neutral-300-dark-invert: var(--colour-system-text);
    --colour-neutral-400-dark-invert: var(--colour-system-text);
    --colour-neutral-500-dark-invert: var(--colour-system-text);
    --colour-neutral-600-dark-invert: var(--colour-system-text);
    --colour-neutral-700-dark-invert: var(--colour-system-text);
    --colour-neutral-800-dark-invert: var(--colour-system-text);
    --colour-neutral-900-dark-invert: var(--colour-system-text);
    --colour-neutral-1000-dark-invert: var(--colour-system-text);
    --colour-primary-100-dark-invert: var(--colour-system-text);
    --colour-primary-200-dark-invert: var(--colour-system-text);
    --colour-primary-300-dark-invert: var(--colour-system-text);
    --colour-primary-400-dark-invert: var(--colour-system-text);
    --colour-primary-500-dark-invert: var(--colour-system-text);
    --colour-primary-600-dark-invert: var(--colour-system-text);
    --colour-primary-700-dark-invert: var(--colour-system-text);
    --colour-primary-800-dark-invert: var(--colour-system-text);
    --colour-primary-900-dark-invert: var(--colour-system-text);
    --colour-primary-1000-dark-invert: var(--colour-system-text);
    --colour-primary-dark-invert: var(--colour-system-text);
    --colour-danger-dark-invert: var(--colour-system-text);
    --colour-primary-dark-invert-neutral-100: var(--colour-neutral-100);
    --colour-primary-dark-invert-neutral-200: var(--colour-neutral-200);
    --colour-primary-dark-invert-neutral-300: var(--colour-neutral-300);
    --colour-primary-dark-invert-neutral-400: var(--colour-neutral-400);
    --colour-primary-dark-invert-neutral-500: var(--colour-neutral-500);
    --colour-primary-dark-invert-neutral-600: var(--colour-neutral-600);
    --colour-primary-dark-invert-neutral-700: var(--colour-neutral-700);
    --colour-primary-dark-invert-neutral-800: var(--colour-neutral-800);
    --colour-primary-dark-invert-neutral-900: var(--colour-neutral-900);
    --colour-primary-dark-invert-neutral-1000: var(--colour-neutral-1000);
    --colour-system-text: var(--colour-neutral-1000);
    --colour-system-text-placeholder: var(--colour-neutral-400);
    --colour-system-body: #0E1116;
    --colour-system-line: var(--colour-neutral-25);
    --colour-system-surface: #151B22;
    --colour-system-surface-rgb: 21, 27, 34;
    --colour-system-surface-1: var(--colour-neutral-10);
    --colour-system-surface-2: #1C2330;
    --colour-system-surface-3: #232C3B;
    --colour-system-text-muted: var(--colour-neutral-500);
    --colour-system-text-inverse: #0E1116;
    --colour-system-overlay: rgba(0, 0, 0, 0.7);
    --colour-system-shadow-soft: rgba(0, 0, 0, 0.4);
    --colour-system-box-bg-dark-only: var(--colour-neutral-10);
    --colour-on-accent: #FFFFFF;
    --colour-menu-active-bg: var(--colour-neutral-10);
    --colour-menu-active-bg-hover: var(--colour-neutral-25);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.7);
    --shadow-4: 0 0 0 1px var(--colour-neutral-25);
    --shadow-sidebar: -1px 0 0 0 var(--colour-neutral-25);
    --shadow-box-solid-hover-light-only: none;
    --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(135, 156, 175)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
    --colour-internal-surface: var(--colour-neutral-100);
    --colour-internal-border: var(--colour-neutral-75);
    --colour-internal-text: var(--colour-system-text);
    --colour-internal-launcher: var(--colour-neutral-400);
    --colour-status-success-bg: var(--colour-success-900);
    --colour-status-success-bg-hover: var(--colour-success-800);
    --colour-status-attention-bg: var(--colour-attention-900);
    --colour-status-attention-bg-hover: var(--colour-attention-800);
    --colour-portal-pinned-bg: var(--colour-system-surface-3);
    --colour-portal-voted-bg: var(--colour-neutral-10);
    --colour-mask-dark: var(--colour-system-body);
    --colour-badge-primary-invert-bg: var(--colour-primary-800);
    --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
    --colour-badge-success-invert-bg: var(--colour-success-800);
    --colour-badge-warning-invert-bg: var(--colour-warning-800);
    --colour-badge-danger-invert-bg: var(--colour-danger-800);
    --colour-badge-primary-invert-text: var(--colour-system-text);
    --colour-badge-secondary-invert-text: var(--colour-system-text);
    --colour-badge-success-invert-text: var(--colour-system-text);
    --colour-badge-warning-invert-text: var(--colour-system-text);
    --colour-badge-danger-invert-text: var(--colour-system-text);
    --colour-badge-group-tertiary-bg: var(--colour-neutral-10);
    --colour-badge-group-tertiary-highlight-bg: var(--colour-neutral-25);
    --colour-banner-warning-bg: var(--colour-warning-800);
    --colour-banner-warning-border: var(--colour-warning-700);
    --colour-banner-danger-bg: var(--colour-danger-800);
    --colour-banner-danger-border: var(--colour-danger-700);
    --colour-banner-success-bg: var(--colour-success-800);
    --colour-banner-success-border: var(--colour-success-700);
    --colour-banner-info-bg: var(--colour-dolphin-800);
    --colour-banner-info-border: var(--colour-dolphin-700);
    --colour-notification-attention-bg: var(--colour-neutral-25);
    --colour-notification-attention-border: var(--colour-neutral-100);
    --colour-notification-attention-highlight: var(--colour-neutral-100);
    --gradient-shiny-bg: linear-gradient(90deg, #E8D8DB, #DBD8E8);
    --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
    --colour-tooltip-bg: var(--colour-neutral-1000);
    --colour-tooltip-text: var(--colour-system-text-inverse);
    --colour-input-bg: var(--colour-neutral-10);
    --colour-input-bg-disabled: var(--colour-neutral-100);
    --colour-input-text-disabled: var(--colour-neutral-400);
    --colour-input-border: var(--colour-neutral-100);
    --colour-input-border-hover: var(--colour-neutral-400);
    --colour-input-border-focus: transparent;
    --colour-checkbox-color: #FFFFFF;
    --colour-checkbox-bg: var(--colour-primary-800);
    --colour-checkbox-bg-hover: var(--colour-primary-900);
    --colour-button-primary-text: #FFFFFF;
    --colour-button-secondary-bg: var(--colour-neutral-100);
    --colour-button-secondary-bg-hover: var(--colour-neutral-50);
    --colour-button-secondary-bg-active: var(--colour-neutral-200);
    --colour-button-secondary-text: var(--colour-system-text);
    --colour-button-tertiary-bg: var(--colour-neutral-10);
    --colour-button-tertiary-border-hover: var(--colour-neutral-600);
    --colour-button-bg-disabled: var(--colour-neutral-10);
    --colour-button-text-disabled: var(--colour-neutral-100);
    --colour-loader-placeholder-bg: linear-gradient(to right, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 54%) 50% 50%;
    --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-100) 0.5px, var(--colour-system-surface) 0.5px);
    --colour-widget-nav-text: var(--colour-neutral-700);
    --colour-widget-nav-text-active: var(--colour-on-accent);
    --colour-widget-footer-shadow: none;
    --colour-widget-preview-nav-text-active: var(--colour-on-accent);
    --colour-widget-preview-nav-gradient: none;
  }
}
.widget-studio .region-preview-form .userback-controls[data-colour-scheme=dark] {
  color-scheme: dark;
  --colour-primary: var(--colour-primary-400);
  --colour-neutral-1000: #F3F6FA;
  --colour-neutral-900: #E3E9F0;
  --colour-neutral-800: #D3DCE6;
  --colour-neutral-700: #C3CEDB;
  --colour-neutral-600: #AFC0D1;
  --colour-neutral-500: #9BAEC1;
  --colour-neutral-400: #879CAF;
  --colour-neutral-300: #6E849A;
  --colour-neutral-200: #556A80;
  --colour-neutral-100: #3F5266;
  --colour-neutral-75: #344457;
  --colour-neutral-50: #2A384A;
  --colour-neutral-25: #202C3B;
  --colour-neutral-10: #161F2B;
  --colour-code-bg: #202C3B;
  --colour-neutral-100-dark-invert: var(--colour-system-text);
  --colour-neutral-200-dark-invert: var(--colour-system-text);
  --colour-neutral-300-dark-invert: var(--colour-system-text);
  --colour-neutral-400-dark-invert: var(--colour-system-text);
  --colour-neutral-500-dark-invert: var(--colour-system-text);
  --colour-neutral-600-dark-invert: var(--colour-system-text);
  --colour-neutral-700-dark-invert: var(--colour-system-text);
  --colour-neutral-800-dark-invert: var(--colour-system-text);
  --colour-neutral-900-dark-invert: var(--colour-system-text);
  --colour-neutral-1000-dark-invert: var(--colour-system-text);
  --colour-primary-100-dark-invert: var(--colour-system-text);
  --colour-primary-200-dark-invert: var(--colour-system-text);
  --colour-primary-300-dark-invert: var(--colour-system-text);
  --colour-primary-400-dark-invert: var(--colour-system-text);
  --colour-primary-500-dark-invert: var(--colour-system-text);
  --colour-primary-600-dark-invert: var(--colour-system-text);
  --colour-primary-700-dark-invert: var(--colour-system-text);
  --colour-primary-800-dark-invert: var(--colour-system-text);
  --colour-primary-900-dark-invert: var(--colour-system-text);
  --colour-primary-1000-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert: var(--colour-system-text);
  --colour-danger-dark-invert: var(--colour-system-text);
  --colour-primary-dark-invert-neutral-100: var(--colour-neutral-100);
  --colour-primary-dark-invert-neutral-200: var(--colour-neutral-200);
  --colour-primary-dark-invert-neutral-300: var(--colour-neutral-300);
  --colour-primary-dark-invert-neutral-400: var(--colour-neutral-400);
  --colour-primary-dark-invert-neutral-500: var(--colour-neutral-500);
  --colour-primary-dark-invert-neutral-600: var(--colour-neutral-600);
  --colour-primary-dark-invert-neutral-700: var(--colour-neutral-700);
  --colour-primary-dark-invert-neutral-800: var(--colour-neutral-800);
  --colour-primary-dark-invert-neutral-900: var(--colour-neutral-900);
  --colour-primary-dark-invert-neutral-1000: var(--colour-neutral-1000);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #0E1116;
  --colour-system-line: var(--colour-neutral-25);
  --colour-system-surface: #151B22;
  --colour-system-surface-rgb: 21, 27, 34;
  --colour-system-surface-1: var(--colour-neutral-10);
  --colour-system-surface-2: #1C2330;
  --colour-system-surface-3: #232C3B;
  --colour-system-text-muted: var(--colour-neutral-500);
  --colour-system-text-inverse: #0E1116;
  --colour-system-overlay: rgba(0, 0, 0, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.4);
  --colour-system-box-bg-dark-only: var(--colour-neutral-10);
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-10);
  --colour-menu-active-bg-hover: var(--colour-neutral-25);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.7);
  --shadow-4: 0 0 0 1px var(--colour-neutral-25);
  --shadow-sidebar: -1px 0 0 0 var(--colour-neutral-25);
  --shadow-box-solid-hover-light-only: none;
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(135, 156, 175)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-100);
  --colour-internal-border: var(--colour-neutral-75);
  --colour-internal-text: var(--colour-system-text);
  --colour-internal-launcher: var(--colour-neutral-400);
  --colour-status-success-bg: var(--colour-success-900);
  --colour-status-success-bg-hover: var(--colour-success-800);
  --colour-status-attention-bg: var(--colour-attention-900);
  --colour-status-attention-bg-hover: var(--colour-attention-800);
  --colour-portal-pinned-bg: var(--colour-system-surface-3);
  --colour-portal-voted-bg: var(--colour-neutral-10);
  --colour-mask-dark: var(--colour-system-body);
  --colour-badge-primary-invert-bg: var(--colour-primary-800);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-800);
  --colour-badge-warning-invert-bg: var(--colour-warning-800);
  --colour-badge-danger-invert-bg: var(--colour-danger-800);
  --colour-badge-primary-invert-text: var(--colour-system-text);
  --colour-badge-secondary-invert-text: var(--colour-system-text);
  --colour-badge-success-invert-text: var(--colour-system-text);
  --colour-badge-warning-invert-text: var(--colour-system-text);
  --colour-badge-danger-invert-text: var(--colour-system-text);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-10);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-neutral-25);
  --colour-banner-warning-bg: var(--colour-warning-800);
  --colour-banner-warning-border: var(--colour-warning-700);
  --colour-banner-danger-bg: var(--colour-danger-800);
  --colour-banner-danger-border: var(--colour-danger-700);
  --colour-banner-success-bg: var(--colour-success-800);
  --colour-banner-success-border: var(--colour-success-700);
  --colour-banner-info-bg: var(--colour-dolphin-800);
  --colour-banner-info-border: var(--colour-dolphin-700);
  --colour-notification-attention-bg: var(--colour-neutral-25);
  --colour-notification-attention-border: var(--colour-neutral-100);
  --colour-notification-attention-highlight: var(--colour-neutral-100);
  --gradient-shiny-bg: linear-gradient(90deg, #E8D8DB, #DBD8E8);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-neutral-10);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-neutral-400);
  --colour-input-border-focus: transparent;
  --colour-checkbox-color: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-800);
  --colour-checkbox-bg-hover: var(--colour-primary-900);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-100);
  --colour-button-secondary-bg-hover: var(--colour-neutral-50);
  --colour-button-secondary-bg-active: var(--colour-neutral-200);
  --colour-button-secondary-text: var(--colour-system-text);
  --colour-button-tertiary-bg: var(--colour-neutral-10);
  --colour-button-tertiary-border-hover: var(--colour-neutral-600);
  --colour-button-bg-disabled: var(--colour-neutral-10);
  --colour-button-text-disabled: var(--colour-neutral-100);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-100) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-neutral-700);
  --colour-widget-nav-text-active: var(--colour-on-accent);
  --colour-widget-footer-shadow: none;
  --colour-widget-preview-nav-text-active: var(--colour-on-accent);
  --colour-widget-preview-nav-gradient: none;
}
.widget-studio .region-preview-form .userback-controls[data-colour-scheme=light] {
  color-scheme: light;
  --colour-primary: var(--colour-primary-600);
  --colour-neutral-1000: #232E3A;
  --colour-neutral-900: #324353;
  --colour-neutral-800: #41576D;
  --colour-neutral-700: #516C86;
  --colour-neutral-600: #6080A0;
  --colour-neutral-500: #7994AF;
  --colour-neutral-400: #93A9BE;
  --colour-neutral-300: #ACBDCE;
  --colour-neutral-200: #C6D1DD;
  --colour-neutral-100: #DFE6EC;
  --colour-neutral-75: #E6EBF0;
  --colour-neutral-50: #ECF0F4;
  --colour-neutral-25: #F2F5F7;
  --colour-neutral-10: #F9FAFB;
  --colour-code-bg: #324353;
  --colour-neutral-100-dark-invert: var(--colour-neutral-100);
  --colour-neutral-200-dark-invert: var(--colour-neutral-200);
  --colour-neutral-300-dark-invert: var(--colour-neutral-300);
  --colour-neutral-400-dark-invert: var(--colour-neutral-400);
  --colour-neutral-500-dark-invert: var(--colour-neutral-500);
  --colour-neutral-600-dark-invert: var(--colour-neutral-600);
  --colour-neutral-700-dark-invert: var(--colour-neutral-700);
  --colour-neutral-800-dark-invert: var(--colour-neutral-800);
  --colour-neutral-900-dark-invert: var(--colour-neutral-900);
  --colour-neutral-1000-dark-invert: var(--colour-neutral-1000);
  --colour-primary-100-dark-invert: var(--colour-primary-100);
  --colour-primary-200-dark-invert: var(--colour-primary-200);
  --colour-primary-300-dark-invert: var(--colour-primary-300);
  --colour-primary-400-dark-invert: var(--colour-primary-400);
  --colour-primary-500-dark-invert: var(--colour-primary-500);
  --colour-primary-600-dark-invert: var(--colour-primary-600);
  --colour-primary-700-dark-invert: var(--colour-primary-700);
  --colour-primary-800-dark-invert: var(--colour-primary-800);
  --colour-primary-900-dark-invert: var(--colour-primary-900);
  --colour-primary-1000-dark-invert: var(--colour-primary-1000);
  --colour-primary-dark-invert: var(--colour-primary);
  --colour-danger-dark-invert: var(--colour-danger);
  --colour-primary-dark-invert-neutral-100: var(--colour-primary);
  --colour-primary-dark-invert-neutral-200: var(--colour-primary);
  --colour-primary-dark-invert-neutral-300: var(--colour-primary);
  --colour-primary-dark-invert-neutral-400: var(--colour-primary);
  --colour-primary-dark-invert-neutral-500: var(--colour-primary);
  --colour-primary-dark-invert-neutral-600: var(--colour-primary);
  --colour-primary-dark-invert-neutral-700: var(--colour-primary);
  --colour-primary-dark-invert-neutral-800: var(--colour-primary);
  --colour-primary-dark-invert-neutral-900: var(--colour-primary);
  --colour-primary-dark-invert-neutral-1000: var(--colour-primary);
  --colour-system-text: var(--colour-neutral-1000);
  --colour-system-text-placeholder: var(--colour-neutral-400);
  --colour-system-body: #F0F3F9;
  --colour-system-line: var(--colour-neutral-75);
  --colour-system-surface: #FFFFFF;
  --colour-system-surface-rgb: 255, 255, 255;
  --colour-system-surface-1: #FFFFFF;
  --colour-system-surface-2: var(--colour-neutral-10);
  --colour-system-surface-3: var(--colour-neutral-25);
  --colour-system-text-muted: var(--colour-neutral-400);
  --colour-system-text-inverse: #FFFFFF;
  --colour-system-overlay: rgba(96, 128, 160, 0.7);
  --colour-system-shadow-soft: rgba(0, 0, 0, 0.2);
  --colour-system-box-bg-dark-only: transparent;
  --colour-on-accent: #FFFFFF;
  --colour-menu-active-bg: var(--colour-neutral-75);
  --colour-menu-active-bg-hover: var(--colour-neutral-50);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-4: 0 0 16px var(--colour-neutral-75);
  --shadow-sidebar: -4px 0 16px var(--colour-neutral-100);
  --shadow-box-solid-hover-light-only: 0px 4px 10px var(--colour-neutral-75);
  --select-caret-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="rgb(172, 189, 206)"><path d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
  --colour-internal-surface: var(--colour-neutral-1000);
  --colour-internal-border: var(--colour-neutral-1000);
  --colour-internal-text: var(--colour-system-text-inverse);
  --colour-internal-launcher: var(--colour-neutral-300);
  --colour-status-success-bg: var(--colour-success-50);
  --colour-status-success-bg-hover: var(--colour-success-100);
  --colour-status-attention-bg: var(--colour-attention-50);
  --colour-status-attention-bg-hover: var(--colour-attention-100);
  --colour-portal-pinned-bg: var(--colour-attention-10);
  --colour-portal-voted-bg: var(--colour-neutral-25);
  --colour-mask-dark: #000000;
  --colour-badge-primary-invert-bg: var(--colour-primary-25);
  --colour-badge-secondary-invert-bg: var(--colour-neutral-25);
  --colour-badge-success-invert-bg: var(--colour-success-25);
  --colour-badge-warning-invert-bg: var(--colour-warning-25);
  --colour-badge-danger-invert-bg: var(--colour-danger-25);
  --colour-badge-primary-invert-text: var(--colour-primary-600);
  --colour-badge-secondary-invert-text: var(--colour-neutral-600);
  --colour-badge-success-invert-text: var(--colour-success-600);
  --colour-badge-warning-invert-text: var(--colour-warning-600);
  --colour-badge-danger-invert-text: var(--colour-danger-600);
  --colour-badge-group-tertiary-bg: var(--colour-neutral-50);
  --colour-badge-group-tertiary-highlight-bg: var(--colour-system-surface);
  --colour-banner-warning-bg: var(--colour-warning-25);
  --colour-banner-warning-border: var(--colour-warning-50);
  --colour-banner-danger-bg: var(--colour-danger-25);
  --colour-banner-danger-border: var(--colour-danger-50);
  --colour-banner-success-bg: var(--colour-success-25);
  --colour-banner-success-border: var(--colour-success-50);
  --colour-banner-info-bg: var(--colour-dolphin-25);
  --colour-banner-info-border: var(--colour-dolphin-50);
  --colour-notification-attention-bg: var(--colour-system-surface);
  --colour-notification-attention-border: var(--colour-attention-600);
  --gradient-shiny-bg: linear-gradient(90deg, #FFF0F2, #F2F0FF);
  --gradient-shiny-text: linear-gradient(90deg, #FF4051, #6040FF);
  --colour-notification-attention-highlight: var(--colour-attention-600);
  --colour-tooltip-bg: var(--colour-neutral-1000);
  --colour-tooltip-text: var(--colour-system-text-inverse);
  --colour-input-bg: var(--colour-system-surface);
  --colour-input-bg-disabled: var(--colour-neutral-100);
  --colour-input-text-disabled: var(--colour-neutral-400);
  --colour-input-border: var(--colour-neutral-100);
  --colour-input-border-hover: var(--colour-primary-600);
  --colour-input-border-focus: var(--colour-primary-200);
  --colour-checkbox-text: #FFFFFF;
  --colour-checkbox-bg: var(--colour-primary-600);
  --colour-checkbox-bg-hover: var(--colour-primary-700);
  --colour-button-primary-text: #FFFFFF;
  --colour-button-secondary-bg: var(--colour-neutral-1000);
  --colour-button-secondary-bg-hover: var(--colour-neutral-900);
  --colour-button-secondary-bg-active: var(--colour-neutral-1000);
  --colour-button-secondary-text: var(--colour-system-text-inverse);
  --colour-button-tertiary-bg: var(--colour-system-surface);
  --colour-button-tertiary-border-hover: var(--colour-primary-600);
  --colour-button-bg-disabled: var(--colour-neutral-50);
  --colour-button-text-disabled: var(--colour-neutral-400);
  --colour-loader-placeholder-bg: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
  --colour-canvas-builder-bg: radial-gradient(var(--colour-neutral-300) 0.5px, var(--colour-system-surface) 0.5px);
  --colour-widget-nav-text: var(--colour-system-text);
  --colour-widget-nav-text-active: var(--widget-button-bg);
  --colour-widget-footer-shadow: 0 0 8px var(--colour-neutral-50);
  --colour-widget-preview-nav-text-active: var(--widget-preview-button-bg);
  --colour-widget-preview-nav-gradient: linear-gradient(180deg, var(--colour-system-surface) 0%, var(--colour-neutral-10) 60%, var(--colour-neutral-50) 100%);
}
.widget-studio .region-preview-form[data-modal=false][data-style=text][data-position=e] .widget-form-preview {
  margin: auto 60px auto auto;
}
.widget-studio .region-preview-form[data-modal=false][data-style=text][data-position=w] .widget-form-preview {
  margin: auto auto auto 60px;
}
.widget-studio .region-preview-form[data-modal=false][data-style=text][data-position=se] .widget-form-preview {
  align-self: flex-end;
  margin: auto var(--widget-preview-launcher-offset-x) 60px auto;
}
.widget-studio .region-preview-form[data-modal=false][data-style=text][data-position=sw] .widget-form-preview {
  align-self: flex-end;
  margin: auto auto 60px var(--widget-preview-launcher-offset-x);
}
.widget-studio .region-preview-form[data-modal=false][data-style=circle][data-position=e] .widget-form-preview {
  margin: auto 88px auto auto;
}
.widget-studio .region-preview-form[data-modal=false][data-style=circle][data-position=w] .widget-form-preview {
  margin: auto auto auto 88px;
}
.widget-studio .region-preview-form[data-modal=false][data-style=circle][data-position=se] .widget-form-preview {
  align-self: flex-end;
  margin: auto var(--widget-preview-launcher-offset-x) calc(var(--widget-preview-launcher-offset-y) + 20px + 48px) auto;
}
.widget-studio .region-preview-form[data-modal=false][data-style=circle][data-position=sw] .widget-form-preview {
  align-self: flex-end;
  margin: auto auto calc(var(--widget-preview-launcher-offset-y) + 20px + 48px) var(--widget-preview-launcher-offset-x);
}
.widget-studio .layout-box {
  position: relative;
  margin-top: 12px;
  border: 1px solid var(--colour-system-line);
  border-radius: 12px;
  background-color: var(--colour-system-box-bg-dark-only);
}
.widget-studio .layout-box.layout-box-hidden {
  display: none;
}
.widget-studio .layout-box.sortable-chosen {
  background-color: var(--colour-system-surface);
}
.widget-studio .layout-box.sortable-chosen .layout-box-heading:after,
.widget-studio .layout-box.sortable-chosen button {
  display: none;
}
.widget-studio .layout-box.drag-placeholder {
  background-color: var(--colour-neutral-25);
}
.widget-studio .layout-box.drag-placeholder > * {
  opacity: 0;
}
:root[data-colour-scheme=light] .widget-studio .layout-box:hover, :root[data-colour-scheme=light] .widget-studio button.layout-box.success.active, :root[data-colour-scheme=light] .widget-studio button.layout-box.info.active, :root[data-colour-scheme=light] .widget-studio button.layout-box.danger.active, :root[data-colour-scheme=light] .widget-studio .layout-box.layout-box-open {
  box-shadow: 0px 4px 10px var(--colour-neutral-75);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .widget-studio .layout-box:hover, :root:not([data-colour-scheme]) .widget-studio button.layout-box.success.active, :root:not([data-colour-scheme]) .widget-studio button.layout-box.info.active, :root:not([data-colour-scheme]) .widget-studio button.layout-box.danger.active, :root:not([data-colour-scheme]) .widget-studio .layout-box.layout-box-open {
    box-shadow: 0px 4px 10px var(--colour-neutral-75);
  }
}
:root[data-colour-scheme=dark] .widget-studio .layout-box:hover, :root[data-colour-scheme=dark] .widget-studio button.layout-box.success.active, :root[data-colour-scheme=dark] .widget-studio button.layout-box.info.active, :root[data-colour-scheme=dark] .widget-studio button.layout-box.danger.active, :root[data-colour-scheme=dark] .widget-studio .layout-box.layout-box-open {
  border-color: var(--colour-neutral-100);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .widget-studio .layout-box:hover, :root:not([data-colour-scheme]) .widget-studio button.layout-box.success.active, :root:not([data-colour-scheme]) .widget-studio button.layout-box.info.active, :root:not([data-colour-scheme]) .widget-studio button.layout-box.danger.active, :root:not([data-colour-scheme]) .widget-studio .layout-box.layout-box-open {
    border-color: var(--colour-neutral-100);
  }
}
.widget-studio .layout-box.layout-box-locked .layout-box-heading .drag-handle {
  cursor: default;
}
.widget-studio .layout-box.layout-box-open .layout-box-heading {
  border-bottom: 1px solid var(--colour-neutral-25);
}
.widget-studio .layout-box.layout-box-open .layout-box-heading:after {
  transform: rotate(180deg);
}
.widget-studio .layout-box.layout-box-open .layout-box-content {
  display: grid;
}
.widget-studio .layout-box.layout-box-open .layout-box-content-single {
  display: block;
}
.widget-studio .layout-box button.dropdown-select.select-category {
  padding-top: 8px;
}
.widget-studio .layout-box button.dropdown-select.select-category:before {
  display: none;
}
.widget-studio .layout-box .retiring {
  display: block;
  font-size: 12px;
  color: var(--colour-neutral);
}
.widget-studio .layout-box .retiring i {
  color: var(--colour-neutral-400);
}
.widget-studio .layout-box .layout-box-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 64px 0 24px;
  cursor: pointer;
}
.widget-studio .layout-box .layout-box-heading.layout-box-heading-indented {
  padding-left: 64px;
}
.widget-studio .layout-box .layout-box-heading .field-icon {
  position: absolute;
  z-index: 10;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  background-color: var(--colour-neutral-75);
  text-align: center;
  color: var(--colour-neutral-500);
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=header_text]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f8c0";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=rating_help_message] {
  background-color: var(--colour-attention-100);
  color: var(--colour-attention-700);
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=rating_help_message]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=rating_type]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e28b";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=feedback_type]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=email]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0e0";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=name]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e283";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=title]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f075";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=comment]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b0";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=category]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f02b";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=priority]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f024";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=assignee]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f007";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=custom_field_1]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f61f";
}
.widget-studio .layout-box .layout-box-heading .field-icon[data-val=send_button_text]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f2fc";
}
.widget-studio .layout-box .layout-box-heading .drag-handle {
  position: absolute;
  z-index: 20;
  left: 16px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: var(--colour-neutral-300);
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
  cursor: move;
}
:root[data-colour-scheme=light] .widget-studio .layout-box .layout-box-heading .drag-handle {
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 2px var(--colour-system-surface);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .widget-studio .layout-box .layout-box-heading .drag-handle {
    background-color: var(--colour-system-surface);
    box-shadow: 0 0 0 2px var(--colour-system-surface);
  }
}
:root[data-colour-scheme=dark] .widget-studio .layout-box .layout-box-heading .drag-handle {
  background-color: var(--colour-system-box-bg-dark-only);
  box-shadow: 0 0 0 2px var(--colour-system-box-bg-dark-only);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .widget-studio .layout-box .layout-box-heading .drag-handle {
    background-color: var(--colour-system-box-bg-dark-only);
    box-shadow: 0 0 0 2px var(--colour-system-box-bg-dark-only);
  }
}
@media (max-width: 800px) {
  .widget-studio .layout-box .layout-box-heading .drag-handle {
    display: none;
  }
}
.widget-studio .layout-box .layout-box-heading .field-delete {
  position: absolute;
  right: 48px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.widget-studio .layout-box .layout-box-heading .field-delete:hover, .widget-studio .layout-box .layout-box-heading button.field-delete.success.active, .widget-studio .layout-box .layout-box-heading button.field-delete.info.active, .widget-studio .layout-box .layout-box-heading button.field-delete.danger.active {
  color: var(--colour-neutral);
}
.widget-studio .layout-box .layout-box-heading:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f107";
  position: absolute;
  right: 24px;
  color: var(--colour-neutral-300);
  font-size: 18px;
  transition: all 0.1s;
}
@media (max-width: 800px) {
  .widget-studio .layout-box .layout-box-heading:after {
    right: 12px;
  }
}
.widget-studio .layout-box .layout-box-heading > span {
  font-weight: 500;
  user-select: none;
}
.widget-studio .layout-box .layout-box-heading .field-title {
  margin-bottom: 4px;
  color: var(--colour-neutral);
  font-size: 13px;
}
.widget-studio .layout-box .layout-box-heading .field-custom-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
}
.widget-studio .layout-box .layout-box-heading-field .drag-handle {
  display: none;
}
.widget-studio .layout-box .layout-box-heading-field:hover .drag-handle, .widget-studio .layout-box button.layout-box-heading-field.success.active .drag-handle, .widget-studio .layout-box button.layout-box-heading-field.info.active .drag-handle, .widget-studio .layout-box button.layout-box-heading-field.danger.active .drag-handle {
  display: block;
}
.widget-studio .layout-box .layout-box-content {
  display: none;
  padding: 24px 32px;
}
.widget-studio .layout-box .layout-box-content:not(.layout-box-content-single) {
  grid-template-columns: 48px auto;
  grid-column-gap: 12px;
}
.widget-studio .layout-box .layout-box-content:not(.layout-box-content-single) > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--colour-system-line);
  border-radius: 50%;
}
.widget-studio .layout-box .layout-box-content:not(.layout-box-content-single) > div:first-child svg {
  width: 20px;
  height: 20px;
  fill: var(--colour-neutral);
}
.widget-studio .layout-box .layout-box-content input[type=text],
.widget-studio .layout-box .layout-box-content textarea {
  display: block;
  margin-top: 12px;
}
.widget-studio .layout-box .layout-box-content input[type=text]:first-child,
.widget-studio .layout-box .layout-box-content textarea:first-child {
  margin-top: 0;
}
.widget-studio .layout-box .form-toggle {
  margin-left: 16px;
}
.widget-studio .field-select {
  display: none;
  position: absolute;
  z-index: 100;
  left: 100px;
  bottom: 0;
  min-width: 256px;
  padding: 12px 0;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown-right 0.1s;
}
.widget-studio .field-select > div {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  height: 32px;
  padding: 12px;
  margin: 0 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.widget-studio .field-select > div.disabled {
  color: var(--colour-neutral);
  opacity: 0.4;
  cursor: default;
}
.widget-studio .field-select > div:hover:not(.disabled) {
  background-color: var(--colour-neutral-25);
}
.widget-studio .field-select > div:before {
  content: "";
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 8px;
  border-radius: 4px;
  color: var(--colour-neutral-500);
  background-color: var(--colour-neutral-75);
  text-align: center;
  font-size: 12px;
}
.widget-studio .field-select > div[data-val=header_text]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f8c0";
}
.widget-studio .field-select > div[data-val=rating_help_message] {
  background-color: var(--colour-attention-100);
  color: var(--colour-attention-700);
}
.widget-studio .field-select > div[data-val=rating_help_message]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
}
.widget-studio .field-select > div[data-val=rating_type]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e28b";
}
.widget-studio .field-select > div[data-val=feedback_type]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
}
.widget-studio .field-select > div[data-val=email]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0e0";
}
.widget-studio .field-select > div[data-val=name]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e283";
}
.widget-studio .field-select > div[data-val=title]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f075";
}
.widget-studio .field-select > div[data-val=comment]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b0";
}
.widget-studio .field-select > div[data-val=category]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f02b";
}
.widget-studio .field-select > div[data-val=priority]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f024";
}
.widget-studio .field-select > div[data-val=assignee]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f007";
}
.widget-studio .field-select > div[data-val=custom_field_1]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f61f";
}
.widget-studio .field-select > div[data-val=send_button_text]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f2fc";
}
.widget-studio .radio-box-select {
  display: grid;
  grid-gap: 12px;
}
.widget-studio .radio-box-select.radio-box-select-2 {
  grid-template-columns: 1fr 1fr;
}
.widget-studio .radio-box-select.radio-box-select-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.widget-studio .radio-box-select.radio-box-select-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.widget-studio .radio-box-select.radio-box-select-6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.widget-studio .radio-box-select.radio-box-select-7 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.widget-studio .radio-box {
  position: relative;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  color: var(--colour-neutral-600-dark-invert);
  background-color: var(--colour-system-box-bg-dark-only);
  cursor: pointer;
  transition: all 0.1s;
}
.widget-studio .radio-box:before, .widget-studio .radio-box:after {
  transition: all 0.1s;
}
.widget-studio .radio-box:after {
  font-weight: 500;
}
.widget-studio .radio-box:hover:not(.disabled), .widget-studio button.radio-box.success.active:not(.disabled), .widget-studio button.radio-box.info.active:not(.disabled), .widget-studio button.radio-box.danger.active:not(.disabled) {
  border-color: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box.selected {
  border-color: var(--colour-primary-dark-invert);
  box-shadow: 0 0 0 1px var(--colour-primary-dark-invert);
  color: var(--colour-system-text);
}
.widget-studio .radio-box.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.widget-studio .radio-box-style {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  text-align: center;
}
.widget-studio .radio-box-style:before {
  content: "";
  margin-bottom: 12px;
  background-color: var(--colour-neutral-300-dark-invert);
}
.widget-studio .radio-box-style:after {
  font-size: 13px;
}
.widget-studio .radio-box-style.selected:before {
  background-color: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box-style[data-val=circle]:before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.widget-studio .radio-box-style[data-val=circle]:after {
  content: "Icon Button";
}
.widget-studio .radio-box-style[data-val=text]:before {
  width: 56px;
  height: 16px;
  border-radius: 4px 4px 0 0;
}
.widget-studio .radio-box-style[data-val=text]:after {
  content: "Text Button";
}
.widget-studio .radio-box-position {
  height: 64px;
}
.widget-studio .radio-box-position:before {
  content: "";
  position: absolute;
  background-color: var(--colour-neutral-300-dark-invert);
}
.widget-studio .radio-box-position:after {
  color: var(--colour-neutral-300-dark-invert);
}
.widget-studio .radio-box-position.selected:before {
  background-color: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box-position.selected:after {
  color: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box-position[data-style=text][data-val=e]:before {
  width: 6px;
  height: 20px;
  border-radius: 2px 0 0 2px;
  top: 0;
  right: 2px;
  bottom: 0;
  margin: auto;
}
.widget-studio .radio-box-position[data-style=text][data-val=e]:hover:after, .widget-studio button.radio-box-position[data-style=text][data-val=e].success.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=e].info.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=e].danger.active:after, .widget-studio .radio-box-position[data-style=text][data-val=e].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f061";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
.widget-studio .radio-box-position[data-style=text][data-val=w]:before {
  width: 6px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  top: 0;
  left: 2px;
  bottom: 0;
  margin: auto;
}
.widget-studio .radio-box-position[data-style=text][data-val=w]:hover:after, .widget-studio button.radio-box-position[data-style=text][data-val=w].success.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=w].info.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=w].danger.active:after, .widget-studio .radio-box-position[data-style=text][data-val=w].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f060";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
.widget-studio .radio-box-position[data-style=text][data-val=se]:before {
  width: 20px;
  height: 6px;
  border-radius: 2px 2px 0 0;
  bottom: 2px;
  right: 8px;
}
.widget-studio .radio-box-position[data-style=text][data-val=se]:hover:after, .widget-studio button.radio-box-position[data-style=text][data-val=se].success.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=se].info.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=se].danger.active:after, .widget-studio .radio-box-position[data-style=text][data-val=se].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f061";
  position: absolute;
  bottom: 12px;
  right: 26px;
  transform: rotate(45deg);
}
.widget-studio .radio-box-position[data-style=text][data-val=sw]:before {
  width: 20px;
  height: 6px;
  border-radius: 2px 2px 0 0;
  bottom: 2px;
  left: 8px;
}
.widget-studio .radio-box-position[data-style=text][data-val=sw]:hover:after, .widget-studio button.radio-box-position[data-style=text][data-val=sw].success.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=sw].info.active:after, .widget-studio button.radio-box-position[data-style=text][data-val=sw].danger.active:after, .widget-studio .radio-box-position[data-style=text][data-val=sw].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f060";
  position: absolute;
  bottom: 12px;
  left: 26px;
  transform: rotate(-45deg);
}
.widget-studio .radio-box-position[data-style=circle]:before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.widget-studio .radio-box-position[data-style=circle][data-val=e]:before {
  top: 0;
  right: 2px;
  bottom: 0;
  margin: auto;
}
.widget-studio .radio-box-position[data-style=circle][data-val=e]:hover:after, .widget-studio button.radio-box-position[data-style=circle][data-val=e].success.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=e].info.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=e].danger.active:after, .widget-studio .radio-box-position[data-style=circle][data-val=e].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f061";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
.widget-studio .radio-box-position[data-style=circle][data-val=w]:before {
  top: 0;
  left: 2px;
  bottom: 2px;
  margin: auto;
}
.widget-studio .radio-box-position[data-style=circle][data-val=w]:hover:after, .widget-studio button.radio-box-position[data-style=circle][data-val=w].success.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=w].info.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=w].danger.active:after, .widget-studio .radio-box-position[data-style=circle][data-val=w].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f060";
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}
.widget-studio .radio-box-position[data-style=circle][data-val=se]:before {
  bottom: 2px;
  right: 2px;
}
.widget-studio .radio-box-position[data-style=circle][data-val=se]:hover:after, .widget-studio button.radio-box-position[data-style=circle][data-val=se].success.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=se].info.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=se].danger.active:after, .widget-studio .radio-box-position[data-style=circle][data-val=se].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f061";
  position: absolute;
  bottom: 16px;
  right: 16px;
  transform: rotate(45deg);
}
.widget-studio .radio-box-position[data-style=circle][data-val=sw]:before {
  bottom: 2px;
  left: 2px;
}
.widget-studio .radio-box-position[data-style=circle][data-val=sw]:hover:after, .widget-studio button.radio-box-position[data-style=circle][data-val=sw].success.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=sw].info.active:after, .widget-studio button.radio-box-position[data-style=circle][data-val=sw].danger.active:after, .widget-studio .radio-box-position[data-style=circle][data-val=sw].selected:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f060";
  position: absolute;
  bottom: 16px;
  left: 16px;
  transform: rotate(-45deg);
}
.widget-studio .radio-box-widget-icon,
.widget-studio .radio-box-outro-icon {
  height: 60px;
  text-align: center;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-studio .radio-box-widget-icon > i,
.widget-studio .radio-box-outro-icon > i {
  font-size: 16px;
  color: var(--colour-neutral-300);
}
.widget-studio .radio-box-widget-icon img,
.widget-studio .radio-box-widget-icon svg,
.widget-studio .radio-box-outro-icon img,
.widget-studio .radio-box-outro-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: var(--colour-neutral-300-dark-invert);
}
.widget-studio .radio-box-widget-icon .emoji,
.widget-studio .radio-box-outro-icon .emoji {
  font-size: 26px;
}
.widget-studio .radio-box-widget-icon .icon-delete,
.widget-studio .radio-box-outro-icon .icon-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  text-align: center;
  font-size: 10px;
  box-shadow: var(--shadow-1);
}
.widget-studio .radio-box-widget-icon.selected svg,
.widget-studio .radio-box-outro-icon.selected svg {
  fill: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box-capture-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  text-align: center;
}
.widget-studio .radio-box-capture-tool:before {
  margin-bottom: 4px;
  font-size: 22px;
}
.widget-studio .radio-box-capture-tool:after {
  font-size: 13px;
}
.widget-studio .radio-box-capture-tool.selected:before {
  color: var(--colour-primary-dark-invert);
}
.widget-studio .radio-box-capture-tool[data-val=screenshot]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f5ef";
}
.widget-studio .radio-box-capture-tool[data-val=screenshot]:after {
  content: "Screenshot";
}
.widget-studio .radio-box-capture-tool[data-val=screenshot][data-nextgen]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f030";
}
.widget-studio .radio-box-capture-tool[data-val=video]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f03d";
}
.widget-studio .radio-box-capture-tool[data-val=video]:after {
  content: "Screen Recording";
}
.widget-studio .radio-box-capture-tool[data-val=attachment]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0c6";
}
.widget-studio .radio-box-capture-tool[data-val=attachment]:after {
  content: "Attachment";
}
.widget-studio input:not(:checked) + label + .region-url-match-type,
.widget-studio input:not(:checked) + label + .region-widget-trigger-code,
.widget-studio input:not(:checked) + label + .launcher-api-help {
  display: none;
}
.widget-studio .region-feedback-type-without-ai.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.widget-studio .region-url-match-type {
  display: grid;
  grid-template-columns: 184px auto;
  grid-column-gap: 8px;
  margin: 8px 0 0 26px;
}
.widget-studio .region-widget-trigger-code {
  margin: 4px 0 0 26px;
}
.widget-studio .user-segment-select {
  display: inline-block;
}
.widget-studio .segment-view {
  color: var(--colour-neutral-300);
}
.widget-studio input[name=user_segment]:checked ~ .segment-view {
  color: var(--colour-primary);
}
.widget-studio .launcher-api-help {
  margin: 4px 0 0 26px;
  color: var(--colour-neutral);
}
.widget-studio .video-time-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-studio .video-time-text > div {
  color: var(--colour-neutral);
  font-weight: 500;
}
.widget-studio .video-time-text > div.selected {
  color: var(--colour-system-text);
}
.widget-studio .input-short,
.widget-studio input[type=text].short {
  width: 50%;
}
.widget-studio .button-dropdown.short,
.widget-studio input.colour.short {
  width: 150px;
}
.widget-studio input[type=number].short {
  width: 90px;
}
.widget-studio .wildcard-input {
  position: relative;
  margin-top: 12px;
}
.widget-studio .wildcard-input > .button-dropdown {
  position: absolute;
  right: 4px;
  bottom: 4px;
}

.survey-designer {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
.survey-designer:not(.hide-animation) {
  opacity: 0;
  transform: translateY(-60px) scale(0.8);
  transform-origin: 70% 50%;
  animation: opacityTransformRest 0.2s forwards;
}
.survey-designer .region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  padding: 0 24px;
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
.survey-designer .region-header > div {
  display: flex;
  justify-content: center;
  width: 33.33%;
}
@media (max-width: 800px) {
  .survey-designer .region-header > div {
    width: auto;
  }
}
.survey-designer .region-header > div:first-child {
  justify-content: flex-start;
}
.survey-designer .region-header > div:last-child {
  justify-content: flex-end;
}
@media (max-width: 800px) {
  .survey-designer .region-header > div:nth-child(2) {
    display: none;
  }
}
.survey-designer .region-save-btns > div {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 4px;
  margin-right: -4px;
}
.survey-designer .region-save-btns .help-btn {
  font-size: 18px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.survey-designer .region-save-btns .help-btn:hover, .survey-designer .region-save-btns button.help-btn.success.active, .survey-designer .region-save-btns button.help-btn.info.active, .survey-designer .region-save-btns button.help-btn.danger.active {
  color: var(--colour-primary);
}
.survey-designer .region-main {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 320px auto 320px;
}
@media (max-width: 800px) {
  .survey-designer .region-main {
    display: block;
  }
}
.survey-designer .region-form-layout {
  position: relative;
}
.survey-designer .region-form-layout .region-heading,
.survey-designer .region-form-layout .region-ending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 500;
}
.survey-designer .region-form-layout .question {
  position: relative;
  border: 1px solid var(--colour-system-line);
  border-radius: 12px;
  background-color: var(--colour-system-box-bg-dark-only);
}
.survey-designer .region-form-layout .question:not(:last-child) {
  margin-bottom: 12px;
}
:root[data-colour-scheme=light] .survey-designer .region-form-layout .question:hover, :root[data-colour-scheme=light] .survey-designer .region-form-layout .question.active {
  box-shadow: 0px 4px 10px var(--colour-neutral-75);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) .survey-designer .region-form-layout .question:hover, :root:not([data-colour-scheme]) .survey-designer .region-form-layout .question.active {
    box-shadow: 0px 4px 10px var(--colour-neutral-75);
  }
}
:root[data-colour-scheme=dark] .survey-designer .region-form-layout .question:hover, :root[data-colour-scheme=dark] .survey-designer .region-form-layout .question.active {
  border-color: var(--colour-neutral-100);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .survey-designer .region-form-layout .question:hover, :root:not([data-colour-scheme]) .survey-designer .region-form-layout .question.active {
    border-color: var(--colour-neutral-100);
  }
}
.survey-designer .region-form-layout .question:hover .drag-handle, .survey-designer .region-form-layout button.question.success.active .drag-handle, .survey-designer .region-form-layout button.question.info.active .drag-handle, .survey-designer .region-form-layout button.question.danger.active .drag-handle {
  opacity: 1;
}
.survey-designer .region-form-layout .question .question-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 64px;
  padding-left: 64px;
  cursor: pointer;
  user-select: none;
}
.survey-designer .region-form-layout .question .question-header:before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--colour-neutral-50);
  font-size: 14px;
}
.survey-designer .region-form-layout .question .question-header:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f078";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 12px;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  transition: all 0.1s linear;
}
.survey-designer .region-form-layout .question .question-header > div:first-child {
  color: var(--colour-neutral);
  font-size: 13px;
  line-height: 16px;
}
.survey-designer .region-form-layout .question .question-header > div:nth-child(2) {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  margin-right: 90px;
}
.survey-designer .region-form-layout .question .region-question-settings {
  display: none;
  padding: 24px 32px;
}
.survey-designer .region-form-layout .question.active .question-header {
  border-bottom: 1px solid var(--colour-neutral-25);
}
.survey-designer .region-form-layout .question.active .question-header:after {
  transform: rotate(180deg);
}
.survey-designer .region-form-layout .question.active .region-question-settings {
  display: block;
}
.survey-designer .region-form-layout .question.drag-placeholder {
  background-color: var(--colour-neutral-25);
}
.survey-designer .region-form-layout .question.drag-placeholder:before,
.survey-designer .region-form-layout .question.drag-placeholder > * {
  opacity: 0;
}
.survey-designer .region-form-layout .question.sortable-chosen .question-header:after,
.survey-designer .region-form-layout .question.sortable-chosen .menu-button {
  display: none;
}
.survey-designer .region-form-layout .question .drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: var(--colour-neutral-300);
  background-color: var(--colour-system-surface);
  cursor: move;
}
:root[data-colour-scheme=dark] .survey-designer .region-form-layout .question .drag-handle {
  background-color: var(--colour-system-box-bg-dark-only);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) .survey-designer .region-form-layout .question .drag-handle {
    background-color: var(--colour-system-box-bg-dark-only);
  }
}
.survey-designer .region-form-layout .question .drag-handle * {
  pointer-events: none;
}
.survey-designer .region-form-layout .question .menu-button {
  position: absolute;
  right: 48px;
  cursor: pointer;
}
.survey-designer .region-form-layout .question .menu-button > div {
  display: none;
}
.survey-designer .region-form-layout .question:hover:not([data-type=thankyou]):not(.drag-start):before, .survey-designer .region-form-layout button.question.success.active:not([data-type=thankyou]):not(.drag-start):before, .survey-designer .region-form-layout button.question.info.active:not([data-type=thankyou]):not(.drag-start):before, .survey-designer .region-form-layout button.question.danger.active:not([data-type=thankyou]):not(.drag-start):before {
  display: none;
}
.survey-designer .region-form-layout .question .question-name {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 4px;
}
.survey-designer .region-form-layout .question[data-type=welcome] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
  background-color: var(--colour-attention-100);
  color: var(--colour-attention-700);
}
.survey-designer .region-form-layout .question[data-type=selection] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
  background-color: var(--colour-dolphin-100);
  color: var(--colour-dolphin-700);
}
.survey-designer .region-form-layout .question[data-type=text] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4a7";
  background-color: var(--colour-success-100);
  color: var(--colour-success-700);
}
.survey-designer .region-form-layout .question[data-type=poll] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e473";
  background-color: var(--colour-danger-100);
  color: var(--colour-danger-700);
}
.survey-designer .region-form-layout .question[data-type=thankyou] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10e";
  background-color: var(--colour-neutral-700);
  color: var(--colour-system-text-inverse);
}
.survey-designer .region-form-layout .question[data-type=redirect] .question-header:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f5eb";
  background-color: var(--colour-neutral-700);
  color: var(--colour-system-text-inverse);
}
.survey-designer .region-preview {
  overflow: hidden;
  position: relative;
  background: var(--colour-system-body);
  box-shadow: 1px 0 0 0 var(--colour-system-line);
}
@media (max-width: 800px) {
  .survey-designer .region-preview {
    display: none;
  }
}
.survey-designer .region-preview .survey-preview-container {
  background: linear-gradient(var(--colour-system-surface), var(--colour-neutral-100));
}
.survey-designer .region-preview .survey-preview-container .region-survey-canvas:before {
  content: "";
  position: sticky;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-image: linear-gradient(var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(90deg, var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(var(--colour-neutral-25) 1px, transparent 1px), linear-gradient(90deg, var(--colour-neutral-25) 1px, var(--colour-system-surface) 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  width: 100%;
  height: 100%;
}
.survey-designer .region-preview .region-floating-buttons {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}
.survey-designer .region-right {
  height: 100%;
  overflow: auto;
}
.survey-designer .region-right .region-setting-container {
  height: 100%;
}
.survey-designer .region-general {
  flex: 1 1 auto;
  overflow: auto;
  padding: 36px 48px 96px 48px;
  min-height: 100%;
}
.survey-designer .region-demo {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.survey-designer .region-audience,
.survey-designer .region-install {
  overflow: auto;
  padding: 32px 0 64px 0;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
.survey-designer .region-audience > div,
.survey-designer .region-install > div {
  max-width: 660px;
  margin: auto;
}
.survey-designer .region-questions-add {
  display: none;
  overflow: auto;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 100px;
  min-width: 256px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown-right 0.1s;
}
.survey-designer .project-name-inline-edit {
  padding: 8px;
  margin-left: -8px;
}
.survey-designer .setting-title {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 15px;
}
.survey-designer .setting-subtitle {
  margin-bottom: 8px;
  font-weight: 500;
}
.survey-designer .setting-subtitle .view-info {
  margin-left: 8px;
  font-size: 13px;
  cursor: pointer;
}
.survey-designer .button-dropdown.short,
.survey-designer input[type=text].short,
.survey-designer input.colour.short {
  width: 150px;
}
.survey-designer input[type=text].medium {
  width: 280px;
}
.survey-designer input[type=text].half {
  width: 50%;
}
.survey-designer .half-field {
  width: 50%;
}
.survey-designer .position-select {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  width: 274px;
  padding: 8px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.survey-designer .position-select > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 4px;
  background-color: var(--colour-neutral-100);
  cursor: pointer;
}
.survey-designer .position-select > div:hover, .survey-designer .position-select > div.selected {
  background-color: var(--colour-primary);
}
.survey-designer .position-select > div.selected {
  cursor: default;
}
.survey-designer .position-select > div.selected:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f00c";
  color: var(--colour-system-text-inverse);
}
.survey-designer .radio-box-select {
  display: grid;
  grid-gap: 12px;
  height: 100px;
}
.survey-designer .radio-box-select.radio-box-select-2 {
  grid-template-columns: 1fr 1fr;
}
.survey-designer .radio-box-select.radio-box-select-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.survey-designer .radio-box-select.radio-box-select-6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.survey-designer .radio-box-select-small {
  width: 148px;
  height: 56px;
}
.survey-designer .radio-box-select-border {
  box-shadow: 0 0 0 1px var(--colour-system-line);
  border-radius: 8px;
}
.survey-designer .radio-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 8px;
  color: var(--colour-neutral);
  background-color: var(--colour-system-box-bg-dark-only);
  text-align: center;
  box-shadow: 0 0 0 1px var(--colour-system-line);
  cursor: pointer;
  transition: all 0.1s;
}
.survey-designer .radio-box.hide-border {
  box-shadow: none;
}
.survey-designer .radio-box > i {
  font-size: 32px;
  color: var(--colour-neutral-300);
}
.survey-designer .radio-box > span {
  margin-top: 8px;
  font-weight: 500;
}
.survey-designer .radio-box:hover, .survey-designer button.radio-box.success.active, .survey-designer button.radio-box.info.active, .survey-designer button.radio-box.danger.active {
  box-shadow: 0 0 0 1px var(--colour-primary);
}
.survey-designer .radio-box.selected {
  box-shadow: 0 0 0 2px var(--colour-primary);
  color: var(--colour-system-text);
}
.survey-designer .radio-box.selected i {
  color: var(--colour-primary);
}
.survey-designer .radio-box.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.survey-designer .survey-size-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.survey-designer .survey-size-text > div {
  color: var(--colour-neutral);
  font-weight: 500;
}
.survey-designer .survey-size-text > div.selected {
  color: var(--colour-system-text);
}
.survey-designer .format-tips span {
  display: none;
}
.survey-designer .format-tips span.active {
  display: inline;
}
.survey-designer .survey-alignment .radio-box > i {
  font-size: 26px;
}
.survey-designer .background-colour {
  display: none;
}
.survey-designer .background-colour.active {
  display: flex;
}
.survey-designer .background-colour-alpha {
  margin-left: 8px;
}
.survey-designer .background-colour-alpha > input {
  width: 90px;
  padding-right: 32px;
}
.survey-designer .background-colour-alpha > label {
  margin-left: -20px;
}
.survey-designer .region-page-conditions {
  display: none;
}
.survey-designer .region-page-conditions .page-condition-delete {
  cursor: pointer;
}
.survey-designer .region-page-conditions.active {
  display: block;
}
.survey-designer .region-page-conditions .url-match-type {
  display: grid;
  grid-template-columns: 32px 184px auto;
  grid-column-gap: 8px;
  margin: 8px 0 0 26px;
}
.survey-designer .region-page-conditions .page-condition-add {
  margin: 8px 0 0 26px;
}
.survey-designer .region-event-condition {
  display: none;
}
.survey-designer .region-event-condition .text-icon {
  cursor: pointer;
}
.survey-designer .region-event-condition .text-icon:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.survey-designer .region-event-condition.active {
  display: block;
}
.survey-designer .region-event-condition input[name=trigger_delay] {
  width: 64px;
  margin-right: 8px;
}
.survey-designer .region-event-condition .event-match-type {
  margin: 8px 0 0 26px;
}
.survey-designer .region-event-condition .event-match-type .event-selector {
  display: grid;
  grid-template-columns: 32px 184px 32px;
  grid-column-gap: 8px;
  margin-bottom: 8px;
}
.survey-designer .region-event-condition .event-match-type .meta-expand {
  display: none;
}
.survey-designer .region-event-condition .event-match-type .meta-expand.active {
  display: block;
}
.survey-designer .region-event-condition .event-match-type .meta-selector {
  display: none;
  grid-template-columns: 32px 184px 160px auto 32px;
  grid-column-gap: 8px;
  margin-bottom: 8px;
  position: relative;
}
.survey-designer .region-event-condition .event-match-type .meta-selector .meta-key .button-dropdown {
  width: 100%;
}
.survey-designer .region-event-condition .event-match-type .meta-selector.active {
  display: grid;
}
.survey-designer .region-event-condition .event-match-type .meta-selector > :first-child {
  grid-column: 2; /* First child starts at column 2 */
}
.survey-designer .region-event-condition .event-match-type .meta-selector > :nth-child(2) {
  display: none;
  grid-column: 3; /* Second child starts at column 3 */
}
.survey-designer .region-event-condition .event-match-type .meta-selector > :nth-child(2).active {
  display: block;
}
.survey-designer .region-event-condition .event-match-type .meta-selector > :nth-child(3) {
  display: none;
  grid-column: 4; /* Third child starts at column 4 */
}
.survey-designer .region-event-condition .event-match-type .meta-selector > :nth-child(3).active {
  display: block;
}
.survey-designer .region-event-condition .event-condition-add {
  margin: 8px 0 0 26px;
}
.survey-designer .segments-selector {
  display: none;
  margin: 8px 0 0 26px;
}
.survey-designer .segments-selector.active {
  display: grid;
}
.survey-designer .segments-selector .segment-button {
  font-size: 13px;
}
.survey-designer .segments-selector .segment-tag {
  margin: 0 8px 8px 0;
  display: inline-flex;
}
.survey-designer .segments-selector .segment-tag > span {
  display: inline-block;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.survey-designer .trigger-actions {
  margin: 8px 0 0 26px;
  padding: 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.survey-designer .trigger-option {
  margin-bottom: 12px;
}
.survey-designer .trigger-delay,
.survey-designer .trigger-action {
  margin-top: 12px;
  margin-left: 26px;
}
.survey-designer .trigger-delay {
  margin-bottom: 4px;
}
.survey-designer .trigger-delay input {
  width: 64px;
  margin-right: 8px;
}
.survey-designer .trigger-element {
  margin-top: 12px;
  margin-left: 26px;
}
.survey-designer .trigger-action {
  padding: 18px;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
}
.survey-designer .trigger-action > div {
  margin-bottom: 12px;
}
.survey-designer .trigger-action > div:last-child {
  margin-bottom: 0;
}
.survey-designer .trigger-frequency {
  margin: 4px 0 0 26px;
}
.survey-designer .trigger-frequency input + label {
  margin-right: 0;
}
.survey-designer .trigger-frequency input[type=number] {
  width: 72px;
  margin: 0 8px;
}
.survey-designer .trigger-value {
  display: none;
}
.survey-designer input:checked + label + .trigger-value {
  display: block;
}
.survey-designer .trigger-element {
  display: none;
}
.survey-designer input:checked + label + .trigger-element {
  display: block;
}
.survey-designer .view-info-img {
  display: block;
  margin: auto;
}
.survey-designer .question-settings-section {
  display: none;
}
.survey-designer .question-settings-section.active {
  display: block;
}
.survey-designer .question-settings-section .dropdown-rating-scale,
.survey-designer .question-settings-section .dropdown-answer-order,
.survey-designer .question-settings-section .dropdown-other-answer-type,
.survey-designer .question-settings-section .dropdown-rating-scale {
  width: 50%;
}
.survey-designer .question-settings-section .character-limit,
.survey-designer .question-settings-section .other-character-limit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 12px;
  width: 50%;
}
.survey-designer .question-settings-section .character-limit > div,
.survey-designer .question-settings-section .other-character-limit > div {
  position: relative;
}
.survey-designer .question-settings-section .character-limit input,
.survey-designer .question-settings-section .other-character-limit input {
  padding-left: 48px;
}
.survey-designer .question-settings-section .character-limit .character-limit-text-min,
.survey-designer .question-settings-section .character-limit .character-limit-text-max,
.survey-designer .question-settings-section .other-character-limit .character-limit-text-min,
.survey-designer .question-settings-section .other-character-limit .character-limit-text-max {
  position: absolute;
  top: 8px;
  left: 12px;
}
.survey-designer .question-settings-section .scale-labels {
  width: 50%;
}
.survey-designer .question-settings-section .scale-labels .scale-label .first-label-number,
.survey-designer .question-settings-section .scale-labels .scale-label .last-label-number {
  position: absolute;
  margin-top: 8px;
  margin-left: 12px;
}
.survey-designer .question-settings-section .scale-labels .scale-label > input {
  padding-left: 32px;
}
.survey-designer .question-settings-section .radio-box-outro-icon {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.survey-designer .question-settings-section .radio-box-outro-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--colour-neutral-300);
}
.survey-designer .question-settings-section .radio-box-outro-icon .emoji {
  font-size: 26px;
}
.survey-designer .question-settings-section .radio-box-outro-icon.selected svg {
  fill: var(--colour-primary);
}
.survey-designer .question-settings-section .radio-box-select {
  display: grid;
  grid-column-gap: 8px;
  height: auto;
  padding: 20px;
}
.survey-designer .question-settings-section .update-logo .logo-preview {
  max-width: 120px;
}
.survey-designer .question-settings-section .image-upload {
  width: auto;
  height: 64px;
  border: 1px dashed var(--colour-system-line);
  background-color: var(--colour-neutral-10);
  color: var(--colour-neutral-400);
  border-radius: 8px;
  padding: 0 12px;
}
.survey-designer .question-settings-section .image-upload.drop-active {
  background-color: var(--colour-neutral-100);
}
.survey-designer .question-settings-section .image-upload .logo-upload {
  cursor: pointer;
  text-decoration-line: underline;
  color: var(--colour-primary);
}
.survey-designer .question-settings-section .image-upload .logo-url-name {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.survey-designer .question-settings-section .image-upload input {
  display: none;
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input.sortable-chosen button {
  display: none;
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input .mulitple-option {
  display: flex;
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input .mulitple-option .option-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  top: auto;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral-300);
  cursor: move;
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input .mulitple-option .option-drag-handle:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e411";
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input.drag-placeholder {
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
}
.survey-designer .question-settings-section.multiple-options-selector .multiple-input.drag-placeholder > * {
  opacity: 0;
}
.survey-designer section[data-step=design] .region-main, .survey-designer[data-step=design] .region-main {
  grid-template-columns: auto 640px;
}
.survey-designer section[data-step=design] .region-demo,
.survey-designer section[data-step=design] .region-audience,
.survey-designer section[data-step=design] .region-install, .survey-designer[data-step=design] .region-demo,
.survey-designer[data-step=design] .region-audience,
.survey-designer[data-step=design] .region-install {
  display: none;
}
.survey-designer section[data-step=design] .region-general, .survey-designer[data-step=design] .region-general {
  display: block;
}
.survey-designer section[data-step=demo] .region-demo, .survey-designer[data-step=demo] .region-demo {
  display: block;
}
.survey-designer section[data-step=demo] .region-audience,
.survey-designer section[data-step=demo] .region-install, .survey-designer[data-step=demo] .region-audience,
.survey-designer[data-step=demo] .region-install {
  display: none;
}
.survey-designer section[data-step=audience] .region-audience, .survey-designer[data-step=audience] .region-audience {
  display: block;
}
.survey-designer section[data-step=audience] .region-demo,
.survey-designer section[data-step=audience] .region-install, .survey-designer[data-step=audience] .region-demo,
.survey-designer[data-step=audience] .region-install {
  display: none;
}
.survey-designer section[data-step=install] .region-demo,
.survey-designer section[data-step=install] .region-audience, .survey-designer[data-step=install] .region-demo,
.survey-designer[data-step=install] .region-audience {
  display: none;
}
.survey-designer section[data-step=install] .region-install, .survey-designer[data-step=install] .region-install {
  display: block;
}
.survey-designer .share-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.survey-designer .share-url button {
  color: var(--colour-neutral-300);
}
.survey-designer .share-url-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.survey-question-select {
  padding: 12px 0;
}
.survey-question-select.question-select-change {
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
.survey-question-select > div {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  height: 32px;
  padding-left: 36px;
  margin: 0 24px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.survey-question-select > div:hover:not(.disabled) {
  background-color: var(--colour-neutral-25);
}
.survey-question-select > div:before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.survey-question-select > div.disabled {
  color: var(--colour-neutral-400);
  cursor: default;
}
.survey-question-select > div[data-type=intro], .survey-question-select > div[data-type=open], .survey-question-select > div[data-type=selection], .survey-question-select > div[data-type=rating] {
  font-weight: 500;
}
.survey-question-select > div[data-type=intro]:not(:first-child), .survey-question-select > div[data-type=open]:not(:first-child), .survey-question-select > div[data-type=selection]:not(:first-child), .survey-question-select > div[data-type=rating]:not(:first-child) {
  margin-top: 12px;
}
.survey-question-select > div[data-type=intro]:hover, .survey-question-select > div[data-type=open]:hover, .survey-question-select > div[data-type=selection]:hover, .survey-question-select > div[data-type=rating]:hover {
  cursor: default;
  background-color: transparent;
}
.survey-question-select > div[data-type=intro]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
  background-color: var(--colour-attention-100);
  color: var(--colour-attention-700);
}
.survey-question-select > div[data-type=open]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4a7";
  background-color: var(--colour-success-100);
  color: var(--colour-success-700);
}
.survey-question-select > div[data-type=selection]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
  background-color: var(--colour-dolphin-100);
  color: var(--colour-dolphin-700);
}
.survey-question-select > div[data-type=rating]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e473";
  background-color: var(--colour-danger-100);
  color: var(--colour-danger-700);
}

.automation-builder {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
  opacity: 0;
  transform: translateY(-60px) scale(0.8);
  animation: opacityTransformRest 0.2s forwards;
}
.automation-builder .automation-canvas {
  overflow: auto;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(var(--colour-system-surface), var(--colour-neutral-100));
}
.automation-builder .automation-canvas:before {
  content: "";
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
  opacity: 0.8;
  background-image: var(--colour-canvas-builder-bg);
  background-size: 10px 10px;
  pointer-events: none;
}
.automation-builder .automation-canvas .workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  padding: 0 24px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
.automation-builder .automation-canvas .workflow-header .workflow-name {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--colour-system-surface);
}
.automation-builder .automation-canvas .workflow-header .workflow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--colour-neutral-25);
  color: var(--colour-neutral);
  font-size: 12px;
}
.automation-builder .automation-canvas .workflow-header .workflow-icon.workflow-icon-paused {
  background-color: var(--colour-warning-100);
  color: var(--colour-warning-700);
}
.automation-builder .automation-canvas .automation-layer {
  display: flex;
  align-items: flex-start;
  justify-content: start;
  flex-wrap: nowrap;
  gap: 102px;
  overflow: auto;
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px 96px 48px 48px;
}
.automation-builder .automation-canvas .automation-widget {
  position: relative;
  flex: 0 0 354px;
  background-color: var(--colour-system-surface-1);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--colour-system-line);
  font-weight: 500;
  transition: all 0.1s;
}
.automation-builder .automation-canvas .automation-widget.empty {
  display: none;
}
.automation-builder .automation-canvas .automation-widget:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 100%;
  width: 102px;
  height: 2px;
  margin-left: 1px;
  background-color: var(--colour-system-line);
}
.automation-builder .automation-canvas .automation-widget:after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0a9";
  position: absolute;
  top: 20px;
  left: 100%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 35px;
  color: var(--colour-neutral-300);
  font-size: 24px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
}
.automation-builder .automation-canvas .automation-widget:last-child:before, .automation-builder .automation-canvas .automation-widget:last-child:after {
  display: none;
}
.automation-builder .automation-canvas .automation-widget .widget-title {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 40px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
}
.automation-builder .automation-canvas .automation-widget .widget-title img,
.automation-builder .automation-canvas .automation-widget .widget-title svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  fill: var(--colour-neutral-300);
}
.automation-builder .automation-canvas .automation-widget .widget-content {
  position: relative;
  padding: 16px;
  border-top: 1px solid var(--colour-system-line);
}
.automation-builder .automation-canvas .automation-widget .widget-helper {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--colour-neutral);
}
.automation-builder .automation-canvas .automation-widget .trigger-set,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set,
.automation-builder .automation-canvas .automation-widget .automation-set {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 48px;
  padding: 0 16px;
  border: 2px dashed var(--colour-neutral-100);
  border-radius: 8px;
  color: var(--colour-neutral);
  cursor: pointer;
  transition: all 0.1s;
}
.automation-builder .automation-canvas .automation-widget .trigger-set.active:after,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set.active:after,
.automation-builder .automation-canvas .automation-widget .automation-set.active:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--colour-success);
}
.automation-builder .automation-canvas .automation-widget .trigger-set.broken:after,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set.broken:after,
.automation-builder .automation-canvas .automation-widget .automation-set.broken:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f071";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--colour-warning);
}
.automation-builder .automation-canvas .automation-widget .trigger-set:hover, .automation-builder .automation-canvas .automation-widget button.trigger-set.success.active, .automation-builder .automation-canvas .automation-widget button.trigger-set.info.active, .automation-builder .automation-canvas .automation-widget button.trigger-set.danger.active, .automation-builder .automation-canvas .automation-widget .trigger-set:focus,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set:hover,
.automation-builder .automation-canvas .automation-widget button.feedback-filter-set.success.active,
.automation-builder .automation-canvas .automation-widget button.feedback-filter-set.info.active,
.automation-builder .automation-canvas .automation-widget button.feedback-filter-set.danger.active,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set:focus,
.automation-builder .automation-canvas .automation-widget .automation-set:hover,
.automation-builder .automation-canvas .automation-widget button.automation-set.success.active,
.automation-builder .automation-canvas .automation-widget button.automation-set.info.active,
.automation-builder .automation-canvas .automation-widget button.automation-set.danger.active,
.automation-builder .automation-canvas .automation-widget .automation-set:focus {
  border-color: var(--colour-primary-dark-invert-neutral-600);
}
.automation-builder .automation-canvas .automation-widget .trigger-set > div:first-child,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set > div:first-child,
.automation-builder .automation-canvas .automation-widget .automation-set > div:first-child {
  display: flex;
  align-items: center;
  justify-content: start;
}
.automation-builder .automation-canvas .automation-widget .trigger-set > div:first-child > i,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set > div:first-child > i,
.automation-builder .automation-canvas .automation-widget .automation-set > div:first-child > i {
  margin-right: 4px;
  color: var(--colour-neutral-300);
}
.automation-builder .automation-canvas .automation-widget .trigger-set,
.automation-builder .automation-canvas .automation-widget .feedback-filter-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: 12px 8px 12px 16px;
}
.automation-builder .automation-canvas .automation-widget .integration-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--colour-neutral-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
}
.automation-builder .automation-canvas .automation-widget .integration-preview:hover, .automation-builder .automation-canvas .automation-widget button.integration-preview.success.active, .automation-builder .automation-canvas .automation-widget button.integration-preview.info.active, .automation-builder .automation-canvas .automation-widget button.integration-preview.danger.active {
  border-color: var(--colour-primary-dark-invert-neutral-600);
}
.automation-builder .automation-canvas .automation-widget .integration-preview.active:after, .automation-builder .automation-canvas .automation-widget .integration-preview.disabled:after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--colour-success);
  background-color: var(--colour-system-surface);
}
.automation-builder .automation-canvas .automation-widget .integration-preview.disabled:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06a";
  color: var(--colour-warning-600);
}
.automation-builder .automation-canvas .automation-widget .integration-preview img {
  width: 24px;
  height: 24px;
}
.automation-builder .automation-canvas .automation-widget .integration-new {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
}
.automation-builder .automation-canvas .automation-widget .condition-and {
  position: relative;
  padding-left: 14px;
  color: var(--colour-neutral-400);
  font-size: 12px;
}
.automation-builder .automation-canvas .automation-widget .condition-and:before {
  content: "";
  position: absolute;
  left: 8px;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-right: 1px dashed var(--colour-neutral-300);
}
.automation-builder .automation-canvas .automation-widget .condition-operator {
  font-style: italic;
}

.inbox-notification {
  position: relative;
  display: grid;
  grid-template-columns: 32px calc(100% - 32px);
  padding: 20px;
  border-bottom: 1px solid var(--colour-system-line);
  cursor: pointer;
}
.inbox-notification:hover, button.inbox-notification.success.active, button.inbox-notification.info.active, button.inbox-notification.danger.active, .inbox-notification.selected {
  background-color: var(--colour-neutral-10);
}
.inbox-notification.selected {
  box-shadow: 4px 0 0 0 var(--colour-feedback-600) inset;
}
.inbox-notification:hover .notification-time, button.inbox-notification.success.active .notification-time, button.inbox-notification.info.active .notification-time, button.inbox-notification.danger.active .notification-time {
  display: none;
}
.inbox-notification:hover .action-btns, button.inbox-notification.success.active .action-btns, button.inbox-notification.info.active .action-btns, button.inbox-notification.danger.active .action-btns {
  opacity: 1;
  pointer-events: auto;
}
.inbox-notification[data-read="1"] .notification-title {
  font-weight: 400;
}
.inbox-notification[data-read="1"] .notification-title:before {
  display: none;
}
.inbox-notification[data-overdue="1"] .notification-title:before {
  background-color: var(--colour-danger-600);
}
.inbox-notification .notification-time {
  color: var(--colour-neutral);
  font-size: 12px;
  line-height: 16px;
}
.inbox-notification .notification-title {
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: 700;
  line-height: 16px;
}
.inbox-notification .notification-title > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
}
.inbox-notification .notification-title:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background-color: var(--colour-feedback-600);
}
.inbox-notification .notification-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8px;
}
.inbox-notification .action-btns {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 15;
  top: 12px;
  right: 12px;
  pointer-events: none;
}
.inbox-notification .action-btns > div,
.inbox-notification .action-btns > button {
  margin: 0 4px;
}
.inbox-notification .project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.inbox-notification .project-info > div {
  position: relative;
  font-size: 13px;
  line-height: 16px;
  color: var(--colour-neutral);
}
.inbox-notification .project-info > div:not(:first-child) {
  margin-left: 8px;
}
.inbox-notification .project-info > div:not(:first-child):before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.inbox-notification .snooze-time {
  margin-top: 12px;
  font-size: 13px;
  line-height: 16px;
  color: var(--colour-neutral);
}

body[page=viewer] {
  overflow: hidden;
}
body[page=viewer] #app {
  min-height: 100vh;
}
body[page=viewer] .network-searchbar {
  position: absolute;
  top: -34px;
  right: 0;
  border-bottom: none;
}
body[page=viewer] .feedback-console .network-table {
  top: 0;
}
body[page=viewer] .feedback-console .network-table th, body[page=viewer] .feedback-console .network-table td {
  padding: 4px;
  font-size: 12px;
}
body[page=viewer] .feedback-console .network-table th:first-child,
body[page=viewer] .feedback-console .network-table td:first-child {
  padding-left: 28px;
}
body[page=viewer] .feedback-console .network-table th:last-child,
body[page=viewer] .feedback-console .network-table td:last-child {
  padding-right: 8px;
}

#feedback_viewer_iframe_overlay {
  position: fixed;
  z-index: 1400;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colour-system-body);
  animation: fadeIn 0.1s;
}

#feedback_viewer_iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.feedback-viewer.drag-over .dropzone {
  display: block;
}
.feedback-viewer .dropzone {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 4px solid var(--colour-primary);
  background-color: rgba(96, 64, 255, 0.1);
}
.feedback-viewer .dropzone > div {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 40px 40px 50px 40px;
  margin: auto;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  background-color: var(--colour-system-surface);
  transform: translate(-50%, -50%);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.feedback-viewer .dropzone > div .upload-icon {
  display: inline-block;
  font-size: 58px;
  color: var(--colour-primary);
  animation: uploadIcon 0.8s linear infinite;
}
.feedback-viewer .grid-main {
  overflow: hidden;
  position: absolute;
  top: 60px;
  right: 430px;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-body);
  transition: all 0.1s linear;
}
.inbox-view .feedback-viewer .grid-main {
  top: 0;
  right: 0;
  left: 430px;
}
@media (max-width: 800px) {
  .feedback-viewer .grid-main {
    right: 0;
  }
}
.feedback-viewer .grid-sidebar {
  position: absolute;
  z-index: 200;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 430px;
  background-color: var(--colour-system-surface);
  border-left: 1px solid var(--colour-system-line);
  transition: all 0.1s linear;
}
.inbox-view .feedback-viewer .grid-sidebar {
  top: 0;
  left: 0;
  right: auto;
}
@media (max-width: 800px) {
  .feedback-viewer .grid-sidebar {
    display: none;
    top: 60px;
  }
  .feedback-viewer-show-details .feedback-viewer .grid-sidebar {
    display: block;
    width: 100%;
    border-left: none;
  }
}
.feedback-viewer .sidebar-toggle {
  position: absolute;
  z-index: 210;
  top: 32px;
  right: 100%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: -12px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  color: var(--colour-neutral);
  text-align: center;
  box-shadow: 0 0 0 1px var(--colour-system-line);
  cursor: pointer;
}
.feedback-viewer .sidebar-toggle:hover, .feedback-viewer button.sidebar-toggle.success.active, .feedback-viewer button.sidebar-toggle.info.active, .feedback-viewer button.sidebar-toggle.danger.active {
  color: var(--colour-primary-dark-invert);
}
@media (max-width: 800px) {
  .feedback-viewer .sidebar-toggle {
    display: none;
  }
}
.feedback-viewer .comment-legend {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.feedback-viewer .comment-type {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 5px 5px 5px 0;
  border-radius: 50%;
  background-color: #FF4060;
  vertical-align: middle;
}
.feedback-viewer .comment-type.comment-type-public {
  background-color: var(--colour-success);
}
.feedback-viewer .comment-type.comment-type-original {
  background-color: grey;
}
.feedback-viewer .annotation-cursor-hint {
  display: none;
  position: absolute;
  z-index: 2000;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  border-radius: 15px;
  font-size: 12px;
  background-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
  white-space: nowrap;
  pointer-events: none;
}
.feedback-viewer .revision-dropdown {
  position: relative;
  float: left;
  margin: 11px 0 0 11px;
}
@media (max-width: 800px) {
  .feedback-viewer .revision-dropdown {
    float: none;
  }
}
.feedback-viewer .revision-dropdown .button-dropdown > button {
  border-radius: 8px;
}
.feedback-viewer .revision-dropdown .button-dropdown > button.split-with {
  border-radius: 8px 0 0 8px;
}
.feedback-viewer .revision-dropdown .button-dropdown > button i {
  margin-left: 8px;
}
.feedback-viewer .revision-dropdown .revision-new {
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.feedback-viewer .revision-dropdown button.approve {
  margin-left: 12px;
}
@media (max-width: 800px) {
  .feedback-viewer .revision-dropdown button.approve {
    float: right;
    margin-left: 0;
    margin-right: 11px;
  }
}
.feedback-viewer .revision-dropdown .approval-status {
  margin-left: 12px;
}
.feedback-viewer .pdf-pagination {
  float: left;
  margin: 11px 0 0 11px;
}
.feedback-viewer .pdf-pagination button:nth-child(1) {
  border-radius: 8px 0 0 8px;
}
.feedback-viewer .pdf-pagination button:nth-child(2) {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.feedback-viewer .pdf-pagination button:nth-child(3) {
  border-radius: 0 8px 8px 0;
}
.feedback-viewer .annotation-tools {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media (max-width: 800px) {
  .feedback-viewer .annotation-tools {
    display: none;
  }
}
.feedback-viewer .annotation-tools button {
  position: relative;
  height: 54px;
  line-height: 54px;
  width: 40px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
  color: var(--colour-neutral);
  cursor: pointer;
  transition: all 0.1s;
}
.feedback-viewer .annotation-tools button[data-type=eye-open]:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 2px;
  margin: auto;
  background-color: #FF4060;
  transform: rotate(45deg);
}
.feedback-viewer .annotation-tools button[data-type=eye-open] {
  display: none;
}
.feedback-viewer .annotation-tools button[data-type=arrow] i {
  transform: rotate(45deg);
}
.feedback-viewer .annotation-tools button:hover, .feedback-viewer .annotation-tools button.success.active, .feedback-viewer .annotation-tools button.info.active, .feedback-viewer .annotation-tools button.danger.active {
  color: var(--colour-primary-dark-invert);
}
.feedback-viewer .annotation-tools button.active {
  color: var(--colour-primary-dark-invert);
}
.feedback-viewer .annotation-tools button.active:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--colour-primary-dark-invert);
}
.feedback-viewer .comment-type-icon {
  font-size: 12px;
}
.feedback-viewer .region-heading {
  position: absolute;
  z-index: 500;
  top: 0;
  right: 0;
  left: 0;
  height: 60px;
  background-color: var(--colour-system-surface);
  border-bottom: 1px solid var(--colour-system-line);
}
.inbox-view .feedback-viewer .region-heading {
  display: none;
}
.feedback-viewer .region-heading .viewer-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-right: 1px solid var(--colour-system-line);
  color: var(--colour-neutral);
  text-align: center;
  font-size: 16px;
  text-decoration: none;
}
.inbox-view .feedback-viewer .region-heading .viewer-close {
  display: none;
}
.feedback-viewer .region-heading .viewer-close:hover i, .feedback-viewer .region-heading button.viewer-close.success.active i, .feedback-viewer .region-heading button.viewer-close.info.active i, .feedback-viewer .region-heading button.viewer-close.danger.active i {
  color: var(--colour-primary-dark-invert);
}
.feedback-viewer .region-heading .viewer-close span {
  display: block;
  font-size: 7px;
  text-align: center;
  pointer-events: none;
}
.feedback-viewer .region-heading .logo {
  position: relative;
  height: 60px;
  float: left;
  margin: 0 8px 0 24px;
}
.feedback-viewer .region-heading .logo.powered-by {
  padding-right: 24px;
  border-right: 1px solid var(--colour-system-line);
}
.feedback-viewer .region-heading .logo a {
  display: block;
  text-decoration: none;
}
.feedback-viewer .region-heading .logo svg {
  display: block;
  width: auto;
  height: 28px;
  margin-top: 16px;
}
.feedback-viewer .region-heading .logo img {
  display: block;
  height: 28px;
  margin-top: 12px;
}
.feedback-viewer .region-heading .logo .powered-by-text {
  margin-top: 2px;
  white-space: nowrap;
  color: var(--colour-neutral-400);
  font-size: 9px;
  font-weight: 600;
}
.feedback-viewer .region-heading .logo .powered-by-text b {
  color: var(--colour-neutral);
  text-transform: uppercase;
}
.feedback-viewer .region-heading .id {
  float: left;
  max-width: calc(50vw - 200px);
  height: 28px;
  line-height: 28px;
  margin-top: 16px;
  padding: 0 8px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 800px) {
  .feedback-viewer .region-heading .id {
    max-width: calc(100vw - 200px);
  }
}
.in-app .feedback-viewer .region-heading .id {
  margin-left: 72px;
}
.inbox-view .feedback-viewer .region-heading .id {
  display: none;
}
.feedback-viewer .region-heading .feedback-title {
  float: left;
  padding-left: 6px;
  padding-top: 12px;
}
.in-app .feedback-viewer .region-heading .feedback-title {
  margin-left: 66px;
}
.feedback-viewer .region-heading .feedback-title .sup {
  margin-left: 6px;
  line-height: 14px;
  color: var(--colour-neutral);
  font-size: 12px;
  font-weight: 500;
}
.feedback-viewer .region-heading .feedback-title .sub {
  line-height: 18px;
  font-size: 14px;
  font-weight: 600;
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit {
  float: left;
  padding: 2px 6px;
  outline: none;
  border-radius: 4px;
  max-width: 50vw;
  min-width: 40px;
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit:not(:focus) {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit[contenteditable] {
  cursor: pointer;
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit[contenteditable]:hover, .feedback-viewer .region-heading .feedback-title .sub button.feedback-title-edit[contenteditable].success.active, .feedback-viewer .region-heading .feedback-title .sub button.feedback-title-edit[contenteditable].info.active, .feedback-viewer .region-heading .feedback-title .sub button.feedback-title-edit[contenteditable].danger.active {
  background-color: var(--colour-neutral-25);
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit[contenteditable]:focus {
  cursor: text;
  background-color: var(--colour-neutral-25);
  box-shadow: 0 0 0 1px var(--colour-primary);
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit[contenteditable]:focus:empty:before {
  color: var(--colour-system-text-placeholder);
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-edit:empty:before {
  content: "Untitled";
}
.feedback-viewer .region-heading .feedback-title .sub .feedback-title-success {
  float: left;
  display: none;
  margin: 2px 0 0 0;
  color: var(--colour-success);
  animation: fadeIn 0.2s;
}
.feedback-viewer .region-heading .profile-img {
  position: relative;
  float: right;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 12px 22px 0 0;
  background-color: var(--colour-system-surface);
}
.inbox-view .feedback-viewer .region-heading .profile-img {
  display: none;
}
@media (max-width: 800px) {
  .feedback-viewer .region-heading .profile-img {
    display: none;
  }
}
.feedback-viewer .region-heading .profile-img:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--colour-system-text-inverse);
  background-color: var(--colour-success);
  border-radius: 50%;
}
.feedback-viewer .region-heading .profile-img.profile-img-anon {
  cursor: pointer;
}
.feedback-viewer .region-heading .profile-img img {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--colour-system-surface), var(--shadow-1);
}
.feedback-viewer .region-heading .profile-img > div {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  padding: 5px 10px;
  background-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  animation: fadeIn 0.1s;
  cursor: default;
  pointer-events: none;
}
.feedback-viewer .region-heading .profile-img > div:before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  border: 6px solid transparent;
  border-bottom-color: var(--colour-neutral-1000);
}
.feedback-viewer .region-heading .profile-img > div i {
  margin: 0 4px;
  font-size: 5px;
  color: var(--colour-success);
  vertical-align: middle;
}
.feedback-viewer .region-heading .profile-img:hover > div, .feedback-viewer .region-heading button.profile-img.success.active > div, .feedback-viewer .region-heading button.profile-img.info.active > div, .feedback-viewer .region-heading button.profile-img.danger.active > div {
  display: block;
}
.feedback-viewer .region-heading .region-actions {
  float: right;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve,
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings,
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send,
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown {
  display: block;
  margin: 14px 18px 0 0;
}
@media (max-width: 800px) {
  .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve,
  .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings,
  .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send,
  .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown {
    display: none;
  }
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown-assignee,
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown-priority,
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send {
  margin-right: 10px;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown[resolved="0"] {
  margin-right: 0;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > .button-dropdown[resolved="0"] > button {
  border-radius: 8px 0 0 8px;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve {
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--colour-success-600);
  font-size: 16px;
  padding: 0 8px;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve[resolved="1"] {
  display: none;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve:hover, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve.success.active, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve.info.active, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.resolve.danger.active {
  border-color: rgba(96, 64, 255, 0.36);
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings {
  display: none;
  margin-right: 0;
  font-size: 16px;
  color: var(--colour-neutral);
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings:hover, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings.success.active, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings.info.active, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings.danger.active {
  color: var(--colour-primary);
}
@media (max-width: 800px) {
  .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.settings {
    display: block;
  }
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.details {
  float: right;
  width: 32px;
  height: 32px;
  margin: 14px 16px 0 0;
  color: var(--colour-primary);
  cursor: pointer;
  font-size: 20px;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send {
  position: relative;
  float: left;
  display: flex;
  align-items: center;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send .integration-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send .integration-icon img {
  width: 100%;
  height: 100%;
  margin-right: 0;
}
.feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send:hover img, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send.success.active img, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send.info.active img, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send.danger.active img, .feedback-viewer .region-heading .region-actions .feedback-viewer-actions > button.integration-send:hover .integration-icon img {
  opacity: 1;
}
.feedback-viewer .region-heading .mobile-toggle {
  display: none;
  position: relative;
  float: right;
  width: 34px;
  height: 30px;
  margin: 15px 15px 0 0;
  cursor: pointer;
  border-radius: 8px;
}
.feedback-viewer .region-heading .mobile-toggle:before, .feedback-viewer .region-heading .mobile-toggle:after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 2px;
  background-color: var(--colour-neutral);
  transition: transform 0.1s linear;
}
.feedback-viewer .region-heading .mobile-toggle:before {
  top: 7px;
}
.feedback-viewer-show-details .feedback-viewer .region-heading .mobile-toggle:before {
  top: 50%;
  margin-top: -1px;
  transform: rotate(45deg);
}
.feedback-viewer .region-heading .mobile-toggle:after {
  top: 14px;
  box-shadow: 0 7px 0 var(--colour-neutral);
}
.feedback-viewer-show-details .feedback-viewer .region-heading .mobile-toggle:after {
  top: 50%;
  margin-top: -1px;
  transform: rotate(-45deg);
  box-shadow: none;
}
.feedback-viewer .region-heading .mobile-toggle:hover:before, .feedback-viewer .region-heading button.mobile-toggle.success.active:before, .feedback-viewer .region-heading button.mobile-toggle.info.active:before, .feedback-viewer .region-heading button.mobile-toggle.danger.active:before, .feedback-viewer .region-heading .mobile-toggle:hover:after, .feedback-viewer .region-heading button.mobile-toggle.success.active:after, .feedback-viewer .region-heading button.mobile-toggle.info.active:after, .feedback-viewer .region-heading button.mobile-toggle.danger.active:after {
  background-color: var(--colour-primary);
}
.feedback-viewer .region-heading .mobile-toggle:hover:after, .feedback-viewer .region-heading button.mobile-toggle.success.active:after, .feedback-viewer .region-heading button.mobile-toggle.info.active:after, .feedback-viewer .region-heading button.mobile-toggle.danger.active:after {
  box-shadow: 0 7px 0 var(--colour-primary);
}
.feedback-viewer-show-details .feedback-viewer .region-heading .mobile-toggle:hover:after, .feedback-viewer-show-details .feedback-viewer .region-heading button.mobile-toggle.success.active:after, .feedback-viewer-show-details .feedback-viewer .region-heading button.mobile-toggle.info.active:after, .feedback-viewer-show-details .feedback-viewer .region-heading button.mobile-toggle.danger.active:after {
  box-shadow: none;
}
@media (max-width: 800px) {
  .feedback-viewer .region-heading .mobile-toggle {
    display: block;
  }
}
.feedback-viewer .details-change {
  position: absolute;
  top: 20px;
  right: 20px;
}
.feedback-viewer .local-warning {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 500;
  height: 40px;
  line-height: 40px;
  padding: 0 8px 0 16px;
  border-radius: 8px;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (max-width: 1230px) {
  .feedback-viewer .local-warning {
    position: fixed;
    top: 40px;
  }
}
@media (max-width: 800px) {
  .feedback-viewer .local-warning {
    display: none;
  }
}
.feedback-viewer .local-warning a {
  color: var(--colour-system-text-inverse);
}
.feedback-viewer .local-warning button {
  width: 36px;
  height: 36px;
  margin: 2px 0 0 8px;
  color: rgba(var(--colour-system-surface-rgb), 0.6);
  vertical-align: top;
  cursor: pointer;
}
.feedback-viewer .local-warning button:hover, .feedback-viewer .local-warning button.success.active, .feedback-viewer .local-warning button.info.active, .feedback-viewer .local-warning button.danger.active {
  color: var(--colour-system-text-inverse);
}
.feedback-viewer .region-screenshot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 54px;
  left: 0;
  padding: 20px;
  overflow: auto;
  scroll-behavior: smooth;
}
.feedback-viewer .region-screenshot[data-type=web], .feedback-viewer .region-screenshot[data-type=upload] {
  display: flex;
}
.feedback-viewer .region-screenshot:hover .zoom-controls[data-type=web], .feedback-viewer button.region-screenshot.success.active .zoom-controls[data-type=web], .feedback-viewer button.region-screenshot.info.active .zoom-controls[data-type=web], .feedback-viewer button.region-screenshot.danger.active .zoom-controls[data-type=web] {
  display: block;
}
.feedback-viewer .region-screenshot .no-screenshot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 250px;
  margin: auto;
  background-color: var(--colour-neutral-50);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
@media (max-width: 800px) {
  .feedback-viewer .region-screenshot .no-screenshot {
    width: 250px;
    height: 150px;
  }
}
.feedback-viewer .region-screenshot .no-screenshot span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  line-height: 100px;
  margin: auto;
  text-align: center;
  font-size: 20px;
  color: var(--colour-neutral-200);
  text-shadow: 1px 1px 0 rgba(var(--colour-system-surface-rgb), 0.8);
}
@media (max-width: 800px) {
  .feedback-viewer .region-screenshot .no-screenshot span {
    font-size: 16px;
  }
}
.feedback-viewer .region-screenshot .no-screenshot span i {
  margin-right: 5px;
}
.feedback-viewer .region-screenshot .screenshot {
  display: none;
  max-width: none;
  max-height: none;
  margin: auto;
  box-shadow: 0 0 0 1px var(--colour-system-line), 0 0 20px rgba(35, 46, 58, 0.2);
  animation: fadeIn 0.1s linear;
  user-select: none;
}
.feedback-viewer .region-screenshot .screenshot.loaded {
  display: block;
}
.feedback-viewer .region-screenshot .annotation-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin-top: 20px;
  user-select: none;
}
.feedback-viewer .region-screenshot .pdf-viewer {
  display: block;
  width: 612px;
  height: 792px;
  margin: auto;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 10px rgba(96, 64, 255, 0.1);
}
.feedback-viewer .region-screenshot .screenshot-auto-badge {
  position: absolute;
  padding: 8px 12px;
  font-size: 11px;
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral);
  border-radius: 0 8px 0 0;
  user-select: none;
}
.feedback-viewer .region-video {
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 94px;
  left: 40px;
}
.feedback-viewer .region-video .feedback-video-player {
  box-shadow: var(--shadow-2);
}
@media (max-width: 800px) {
  .feedback-viewer .region-video {
    top: 0;
    right: 0;
    bottom: 54px;
    left: 0;
  }
}
.feedback-viewer .region-session-replay {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 54px;
  left: 0;
  width: 100%;
  padding: 40px;
  background-color: var(--colour-system-body);
  animation: fadeIn 0.1s;
}
.feedback-viewer .region-session-replay .session-player {
  border: 1px solid var(--colour-system-line);
}
.feedback-viewer .region-toolbar {
  position: absolute;
  z-index: 300;
  bottom: 0;
  left: 0;
  right: 0;
  height: 54px;
  border-top: 1px solid var(--colour-system-line);
  white-space: nowrap;
  background-color: var(--colour-system-surface);
  transition: all 0.1s;
}
.feedback-viewer .region-screenshot-thumbnail {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  scroll-behavior: smooth;
  background-color: var(--colour-system-surface);
  box-shadow: 0 -1px 0 0 var(--colour-system-line);
}
.feedback-viewer .region-screenshot-thumbnail:empty {
  display: none;
}
.feedback-viewer .region-screenshot-thumbnail.active {
  height: 300px;
  min-height: 100px;
  max-height: calc(100vh - 300px);
}
.feedback-viewer .region-screenshot-thumbnail.active .region-devtools {
  display: block;
}
.feedback-viewer .region-screenshot-thumbnail.active .drag-handle {
  position: absolute;
  z-index: 10;
  top: -6px;
  right: 0;
  left: 0;
  height: 12px;
  cursor: row-resize;
}
.feedback-viewer-show-details .feedback-viewer .region-screenshot-thumbnail {
  display: none;
}
.feedback-viewer .region-screenshot-thumbnail .region-thumbnails {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  flex-shrink: 0;
}
.feedback-viewer .region-screenshot-thumbnail .region-devtools {
  display: none;
  flex: 1;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail,
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail,
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail {
  position: relative;
  display: inline-block;
  height: 38px;
  margin: 0 6px;
  border-radius: 8px;
  text-align: center;
  background-color: var(--colour-system-surface);
  box-shadow: 0 0 0 1px var(--colour-system-line);
  transition: all 0.1s;
  cursor: pointer;
  vertical-align: top;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail.disabled,
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail.disabled,
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail.disabled,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail.disabled {
  opacity: 0.5;
  cursor: default;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail:not(.disabled):hover, .feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail:not(.disabled):hover,
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail:not(.disabled):hover,
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail:not(.disabled):hover,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail.active {
  box-shadow: 0 0 0 1px var(--colour-input-border-hover);
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail.active,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail.active {
  cursor: default;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail {
  width: 67.5555555556px;
  height: 38px;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail .img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.feedback-viewer .region-screenshot-thumbnail .screenshot-thumbnail .img.img-cover {
  background-size: cover;
  background-position: 50% 0;
}
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail {
  background-color: var(--colour-neutral-1000);
}
.feedback-viewer .region-screenshot-thumbnail .video-thumbnail video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail {
  line-height: 38px;
  padding: 0 12px;
  color: var(--colour-primary-dark-invert);
}
@media (max-width: 800px) {
  .feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail,
  .feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail {
    display: none;
  }
}
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail .icon,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail .icon {
  font-size: 14px;
  vertical-align: middle;
}
.feedback-viewer .region-screenshot-thumbnail .session-replay-thumbnail .text,
.feedback-viewer .region-screenshot-thumbnail .devtools-thumbnail .text {
  margin-left: 4px;
  font-size: 12px;
  vertical-align: middle;
  font-weight: 500;
}
.feedback-viewer .zoom-controls[data-type=design] {
  float: right;
  margin: 11px 11px 0 0;
}
.feedback-viewer .zoom-controls[data-type=design] button:nth-child(1) {
  border-radius: 8px 0 0 8px;
}
.feedback-viewer .zoom-controls[data-type=design] button:nth-child(2) {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.feedback-viewer .zoom-controls[data-type=design] button:nth-child(3) {
  border-radius: 0 8px 8px 0;
}
.feedback-viewer .zoom-controls[data-type=web] {
  display: none;
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 4px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateX(-10px);
  animation: opacityTransformRest 0.1s forwards;
}
.feedback-viewer .zoom-controls[data-type=web]:before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  bottom: 0;
  height: 1px;
  margin: auto;
  background-color: var(--colour-system-line);
}
.feedback-viewer .zoom-controls[data-type=web] button {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  color: var(--colour-system-text);
  cursor: pointer;
  border-radius: 4px;
}
.feedback-viewer .zoom-controls[data-type=web] button:first-child {
  margin-bottom: 9px;
}
.feedback-viewer .zoom-controls[data-type=web] button:hover, .feedback-viewer .zoom-controls[data-type=web] button.success.active, .feedback-viewer .zoom-controls[data-type=web] button.info.active, .feedback-viewer .zoom-controls[data-type=web] button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary-dark-invert);
}
@media (max-width: 800px) {
  .feedback-viewer .zoom-controls {
    display: none;
  }
}
.feedback-viewer .region-tabs > button {
  position: relative;
  height: 44px;
  line-height: 44px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  color: var(--colour-neutral);
  border-bottom: 1px solid var(--colour-system-line);
}
.feedback-viewer .region-tabs > button:first-child {
  border-right: 1px solid var(--colour-system-line);
}
.feedback-viewer .region-tabs > button:hover, .feedback-viewer .region-tabs > button.success.active, .feedback-viewer .region-tabs > button.info.active, .feedback-viewer .region-tabs > button.danger.active {
  color: var(--colour-system-text);
}
.feedback-viewer .region-tabs > button.active {
  background-color: transparent;
  cursor: default;
  color: var(--colour-primary-dark-invert);
  border-bottom-color: var(--colour-system-surface);
}
.feedback-viewer .region-details,
.feedback-viewer .region-comments {
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 40px;
}
@media (max-width: 800px) {
  .feedback-viewer .region-details,
  .feedback-viewer .region-comments {
    padding: 15px 20px;
  }
}
.feedback-viewer .region-details {
  display: none;
}
.feedback-viewer .region-comments {
  padding: 0 0 30px 0;
  scroll-behavior: smooth;
}
.feedback-viewer .region-details .task-details,
.feedback-viewer .region-details .session-details,
.feedback-viewer .region-details .user-details > div {
  display: grid;
  grid-template-columns: 40% 60%;
}
.feedback-viewer .region-details .task-details.empty,
.feedback-viewer .region-details .session-details.empty,
.feedback-viewer .region-details .user-details > div.empty {
  display: block;
  padding: 12px 0 24px 0;
  font-style: italic;
  color: var(--colour-neutral);
}
.feedback-viewer .region-details .task-details .title,
.feedback-viewer .region-details .session-details .title,
.feedback-viewer .region-details .user-details > div .title {
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--colour-neutral);
  word-break: break-all;
}
.feedback-viewer .region-details .task-details .title.title-medium,
.feedback-viewer .region-details .session-details .title.title-medium,
.feedback-viewer .region-details .user-details > div .title.title-medium {
  line-height: 32px;
}
.feedback-viewer .region-details .task-details .value,
.feedback-viewer .region-details .session-details .value,
.feedback-viewer .region-details .user-details > div .value {
  margin-bottom: 12px;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group,
.feedback-viewer .region-details .session-details .value.portal-visibility-group,
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group {
  display: flex;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .button-dropdown,
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .button-dropdown,
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .button-dropdown {
  flex: 1;
  width: 100%;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .button-dropdown[visible="0"],
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .button-dropdown[visible="0"],
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .button-dropdown[visible="0"] {
  width: calc(100% - 32px);
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .button-dropdown[visible="0"] > button.dropdown-select,
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .button-dropdown[visible="0"] > button.dropdown-select,
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .button-dropdown[visible="0"] > button.dropdown-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .open-portal,
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .open-portal,
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .open-portal {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--colour-system-line);
  padding: 0 8px;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .open-portal i,
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .open-portal i,
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .open-portal i {
  font-size: 16px;
}
.feedback-viewer .region-details .task-details .value.portal-visibility-group > .open-portal[visible="1"],
.feedback-viewer .region-details .session-details .value.portal-visibility-group > .open-portal[visible="1"],
.feedback-viewer .region-details .user-details > div .value.portal-visibility-group > .open-portal[visible="1"] {
  display: none;
}
.feedback-viewer .region-details .task-details .value .category-text,
.feedback-viewer .region-details .session-details .value .category-text,
.feedback-viewer .region-details .user-details > div .value .category-text {
  display: block;
  overflow-wrap: break-word;
  text-align: left;
}
.feedback-viewer .region-details .task-details > div.full,
.feedback-viewer .region-details .session-details > div.full,
.feedback-viewer .region-details .user-details > div > div.full {
  grid-column-start: 1;
  grid-column-end: 3;
}
.feedback-viewer .region-details .task-details .merged-tips {
  margin: 8px 0;
}
.feedback-viewer .region-details .task-details .merged-tips i {
  display: block;
  margin-top: 2px;
}
.feedback-viewer .region-details .task-details .merged-tips span {
  display: block;
  margin-left: 24px;
}
.feedback-viewer .region-details .task-details .merged-feedback-tools {
  margin: 0 0 24px 24px;
}
.feedback-viewer .region-details .task-details .text-danger {
  color: var(--colour-danger);
}
.feedback-viewer .region-details .browser-meta-logo {
  float: left;
  width: 14px;
  height: 14px;
  margin: 2px 4px 0 0;
}
.feedback-viewer .region-details .browser-meta-logo .separator {
  margin: 12px 0 24px 0;
  border-top: 1px solid var(--colour-system-line);
}
.feedback-viewer .region-details .device-type {
  margin-left: 10px;
}
.feedback-viewer .region-details .category-name {
  margin: 0 2px 2px 0;
  vertical-align: top;
}
.feedback-viewer .region-details .inline-edit {
  margin-left: 10px;
}
.feedback-viewer .region-details .integration-icon {
  float: left;
  width: 21px;
  height: 21px;
  margin: 2px 4px 0 0;
  padding: 2px;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  border-radius: 8px;
}
.feedback-viewer .region-details .integration-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feedback-viewer .region-details .activity-details {
  display: none;
}
.feedback-viewer .comment-list-empty-state {
  display: none;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
}
.feedback-viewer .comment-list-empty-state i {
  font-size: 48px;
}
.feedback-viewer .comment-actions {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 2px 30px;
  text-align: right;
  background-color: var(--colour-system-surface);
}
.feedback-viewer .feedback-viewer-pin-comment {
  display: none;
  position: absolute;
  z-index: 100;
  margin: -18px 0 0 -18px;
}
.feedback-viewer .feedback-viewer-pin-comment.open {
  z-index: 250;
}
.feedback-viewer .feedback-viewer-pin-comment.open .pin {
  box-shadow: 0 0 0 4px var(--colour-system-surface), var(--shadow-3);
}
.feedback-viewer .feedback-viewer-pin-comment.open .pin:before, .feedback-viewer .feedback-viewer-pin-comment.open .pin:after {
  z-index: 9;
  content: "";
  position: absolute;
  background-color: var(--colour-primary-600);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0.2;
  animation: pin 2s ease-in 1s infinite;
  pointer-events: none;
}
.feedback-viewer .feedback-viewer-pin-comment.open .pin:after {
  opacity: 0.3;
  animation: pin 2s ease-in 1.5s infinite;
}
.feedback-viewer .feedback-viewer-pin-comment.open .pin:hover, .feedback-viewer .feedback-viewer-pin-comment.open button.pin.success.active, .feedback-viewer .feedback-viewer-pin-comment.open button.pin.info.active, .feedback-viewer .feedback-viewer-pin-comment.open button.pin.danger.active {
  background-color: var(--colour-primary-800);
}
.feedback-viewer .feedback-viewer-pin-comment.active {
  display: block;
}
@media (max-width: 800px) {
  .feedback-viewer-show-details .feedback-viewer .feedback-viewer-pin-comment.active {
    display: none;
  }
}
.feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin {
  background-color: var(--colour-success);
  transform: scale(0.8);
}
.feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin:hover, .feedback-viewer .feedback-viewer-pin-comment[resolved=true] button.pin.success.active, .feedback-viewer .feedback-viewer-pin-comment[resolved=true] button.pin.info.active, .feedback-viewer .feedback-viewer-pin-comment[resolved=true] button.pin.danger.active {
  background-color: #008d5e;
}
.feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin > span {
  display: none;
}
.feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin > i {
  display: inline-block;
}
.feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin:before, .feedback-viewer .feedback-viewer-pin-comment[resolved=true] .pin:after {
  background-color: var(--colour-success);
}
.feedback-viewer .feedback-viewer-pin-comment .pin {
  position: relative;
  width: 36px;
  height: 36px;
  background: var(--colour-primary-600);
  border-radius: 50%;
  border: none;
  box-shadow: var(--shadow-1);
  font-family: "Inter", sans-serif;
  transition: all 0.1s linear;
  animation: zoomIn 0.2s linear;
  box-sizing: border-box;
}
.feedback-viewer .feedback-viewer-pin-comment .pin:hover, .feedback-viewer .feedback-viewer-pin-comment button.pin.success.active, .feedback-viewer .feedback-viewer-pin-comment button.pin.info.active, .feedback-viewer .feedback-viewer-pin-comment button.pin.danger.active {
  background-color: var(--colour-primary-800);
}
.feedback-viewer .feedback-viewer-pin-comment .pin > i {
  display: none;
  line-height: 36px;
}
.feedback-viewer .feedback-viewer-pin-comment .pin i,
.feedback-viewer .feedback-viewer-pin-comment .pin span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  line-height: 36px;
  user-select: none;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: center;
  color: var(--colour-system-text-inverse);
  cursor: pointer;
}
.feedback-viewer .annotation-svg {
  display: none;
}
.feedback-viewer .annotation-svg.annotation-svg-resolved {
  opacity: 0.5;
}
.feedback-viewer .annotation-svg.active {
  display: block;
}
.feedback-viewer .not-found {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-60%);
}
.feedback-viewer .not-found .unsub-logo {
  text-align: center;
  font-size: 44px;
}
.feedback-viewer .not-found .logo {
  width: 180px;
  height: 180px;
  margin: auto;
  padding-top: 42px;
  border-radius: 10px;
  background-color: var(--colour-system-surface);
}
.feedback-viewer .not-found .logo svg {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}
.feedback-viewer .not-found .invalid-url {
  margin-top: 30px;
  text-align: center;
  font-size: 34px;
  font-weight: 300;
}
.feedback-viewer .not-found .contact-owner {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
}
.feedback-viewer .feedback-console {
  float: right;
  margin: 9px 9px 0 0;
}
@media (max-width: 800px) {
  .feedback-viewer .feedback-console {
    display: none;
  }
}
.feedback-viewer .feedback-console > button {
  position: relative;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.feedback-viewer .feedback-console > button:hover:not(:disabled), .feedback-viewer .feedback-console > button.success.active:not(:disabled), .feedback-viewer .feedback-console > button.info.active:not(:disabled), .feedback-viewer .feedback-console > button.danger.active:not(:disabled) {
  color: var(--colour-primary);
}
.feedback-viewer .feedback-console > button:disabled {
  cursor: not-allowed;
  color: var(--colour-neutral-400);
}
.feedback-viewer .feedback-console > button:disabled .icon {
  color: var(--colour-neutral-400);
}
.feedback-viewer .feedback-console > button .icon {
  float: left;
  margin-right: 6px;
  color: var(--colour-primary);
  text-align: center;
}
.feedback-viewer .feedback-console > button .text {
  font-weight: 500;
  font-size: 12px;
  vertical-align: top;
}

@media (max-width: 1200px) {
  .feedback-viewer[loadtype=design] .region-actions > div > button.settings,
  .feedback-viewer[loadtype=design] .region-actions > div > button.integration-send,
  .feedback-viewer[loadtype=design] .region-actions > div > button.resolve,
  .feedback-viewer[loadtype=design] .region-actions > div > .button-dropdown,
  .feedback-viewer[loadtype=pdf] .region-actions > div > button.settings,
  .feedback-viewer[loadtype=pdf] .region-actions > div > button.integration-send,
  .feedback-viewer[loadtype=pdf] .region-actions > div > button.resolve,
  .feedback-viewer[loadtype=pdf] .region-actions > div > .button-dropdown {
    display: none;
  }
}
@media (max-width: 1200px) {
  .feedback-viewer[loadtype=design] .region-actions > div > button.settings,
  .feedback-viewer[loadtype=pdf] .region-actions > div > button.settings {
    display: block;
  }
}

.feedback-viewer[tooltype=square] .region-screenshot .annotation-canvas,
.feedback-viewer[tooltype=arrow] .region-screenshot .annotation-canvas,
.feedback-viewer[tooltype=comment] .region-screenshot .annotation-canvas {
  cursor: crosshair;
  box-shadow: none;
}

.feedback-viewer[tooltype=eye] .region-screenshot .annotation-canvas {
  display: none;
}
.feedback-viewer[tooltype=eye] .annotation-tools button[data-type=eye] {
  display: none;
}
.feedback-viewer[tooltype=eye] .annotation-tools button[data-type=eye-open] {
  display: inline-block;
}
.feedback-viewer[tooltype=eye] .feedback-viewer-pin-comment {
  display: none;
}

.feedback-viewer[commenttype=open] .feedback-viewer-pin-comment[resolved=true] {
  display: none;
}
.feedback-viewer[commenttype=open] .annotation-svg-resolved {
  display: none;
}

.feedback-viewer[commenttype=resolved] .feedback-viewer-pin-comment {
  display: none;
}
.feedback-viewer[commenttype=resolved] .feedback-viewer-pin-comment.active[resolved=true] {
  display: block;
}
.feedback-viewer[commenttype=resolved] .annotation-svg {
  display: none;
}
.feedback-viewer[commenttype=resolved] .annotation-svg.active.annotation-svg-resolved {
  display: block;
}

.feedback-viewer[theater="1"] .sidebar-toggle {
  transform: scaleX(-1);
}
.feedback-viewer[theater="1"] .grid-sidebar {
  transform: translateX(400px);
}
.feedback-viewer[theater="1"] .grid-main {
  right: 30px;
}
.feedback-viewer[theater="1"] .region-navigation .nav-next {
  right: 54px;
}

.feedback-viewer[fullscreen="1"] .region-actions,
.feedback-viewer[fullscreen="1"] .region-navigation,
.feedback-viewer[fullscreen="1"] .region-toolbar,
.feedback-viewer[fullscreen="1"] .region-screenshot-thumbnail,
.feedback-viewer[fullscreen="1"] .grid-sidebar,
.feedback-viewer[fullscreen="1"] .feedback-viewer-pin-comment,
.feedback-viewer[fullscreen="1"] .annotation-tools,
.feedback-viewer[fullscreen="1"] .annotation-cursor-hint,
.feedback-viewer[fullscreen="1"] .annotation-canvas {
  display: none;
}
.feedback-viewer[fullscreen="1"] .region-screenshot {
  bottom: 0;
}
.feedback-viewer[fullscreen="1"] .region-screenshot .screenshot {
  cursor: default;
}
.feedback-viewer[fullscreen="1"] .grid-main {
  right: 0;
}

.feedback-viewer[dragging="1"] .annotation-cursor-hint,
.feedback-viewer[drawing="1"] .annotation-cursor-hint {
  opacity: 0;
}

/*
.feedback-viewer[screenshotnum="1"] {
    .screenshot-thumbnail {
        display: none;
    }
}*/
@media (max-width: 800px) {
  .feedback-viewer[screenshotnum="0"] .region-screenshot-thumbnail {
    display: none;
  }
}

.video-capture-controls {
  position: absolute;
  z-index: 600;
  left: 50%;
  top: 0;
  height: 60px;
  margin: 0;
  transform: translateX(-50%);
  animation: fadeIn 0.2s;
}
.video-capture-controls > button {
  position: relative;
  float: left;
  width: 54px;
  height: 60px;
  cursor: pointer;
}
.video-capture-controls > button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.video-capture-controls > button:hover:not(:disabled) span, .video-capture-controls > button.success.active:not(:disabled) span, .video-capture-controls > button.info.active:not(:disabled) span, .video-capture-controls > button.danger.active:not(:disabled) span {
  color: var(--colour-system-text);
}
.video-capture-controls > button svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  fill: var(--colour-neutral);
}
.video-capture-controls > button span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  font-size: 12px;
  color: var(--colour-neutral);
  text-align: center;
}
.video-capture-controls > button.userback-video-controls-mute:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 0;
  left: 0;
  height: 2px;
  width: 22px;
  margin: auto;
  background-color: #FF4060;
  transform: rotate(45deg);
}
.video-capture-controls > button.userback-video-controls-mute svg {
  top: 12px;
  width: 18px;
  height: 18px;
}
.video-capture-controls > button.userback-video-controls-mute.userback-video-controls-active:before {
  display: none;
}
.video-capture-controls > button.userback-video-controls-mute.userback-video-controls-active svg {
  fill: var(--colour-primary);
}
.video-capture-controls > button.userback-video-controls-pause svg {
  top: 8px;
  width: 26px;
  height: 26px;
}
.video-capture-controls > button.userback-video-controls-stop svg {
  top: 14px;
  width: 14px;
  height: 14px;
  fill: #FF4060;
}
.video-capture-controls > button.userback-video-controls-recording {
  width: auto;
  height: 60px;
  line-height: 60px;
  margin-left: 10px;
  padding: 0 14px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  user-select: none;
  color: var(--colour-neutral);
  cursor: default;
}
.video-capture-controls > button.userback-video-controls-recording:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background-color: #FF4060;
  animation: fadeIn 0.8s linear alternate infinite;
}
.video-capture-controls .userback-mic-volume {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 5px;
  height: 20px;
  margin: auto;
}
.video-capture-controls .userback-mic-volume span {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  height: 1px;
  margin: 0 0 1px 0;
}
.video-capture-controls .userback-mic-volume span:nth-child(1) {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
.video-capture-controls .userback-mic-volume span:nth-child(2) {
  bottom: 2px;
  background-color: rgba(0, 0, 0, 0.12);
}
.video-capture-controls .userback-mic-volume span:nth-child(3) {
  bottom: 4px;
  background-color: rgba(0, 0, 0, 0.14);
}
.video-capture-controls .userback-mic-volume span:nth-child(4) {
  bottom: 6px;
  background-color: rgba(0, 0, 0, 0.16);
}
.video-capture-controls .userback-mic-volume span:nth-child(5) {
  bottom: 8px;
  background-color: rgba(0, 0, 0, 0.18);
}
.video-capture-controls .userback-mic-volume span:nth-child(6) {
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.2);
}
.video-capture-controls .userback-mic-volume span:nth-child(7) {
  bottom: 12px;
  background-color: rgba(0, 0, 0, 0.22);
}
.video-capture-controls .userback-mic-volume span:nth-child(8) {
  bottom: 14px;
  background-color: rgba(0, 0, 0, 0.24);
}
.video-capture-controls .userback-mic-volume span:nth-child(9) {
  bottom: 16px;
  background-color: rgba(0, 0, 0, 0.26);
}
.video-capture-controls .userback-mic-volume span:nth-child(10) {
  bottom: 18px;
  background-color: rgba(0, 0, 0, 0.28);
}

.video-count-down {
  position: fixed;
  z-index: 2147483645;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 120px;
  height: 120px;
  line-height: 120px;
  margin: auto;
  text-align: center;
  font-size: 60px;
  font-weight: 700;
  color: var(--colour-system-text-inverse);
  border-radius: 50%;
  background-color: var(--colour-neutral-1000);
  opacity: 0;
  animation: videoCountDown 1s linear;
  font-family: "Inter", sans-serif;
}

@keyframes videoCountDown {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
.feedback-video-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 8px;
}
@media (max-width: 800px) {
  .feedback-video-player {
    border-radius: 0;
    box-shadow: none;
  }
}
.feedback-video-player .media-video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 84px;
  background-color: var(--colour-neutral-1000);
  border-radius: 8px 8px 0 0;
}
@media (max-width: 800px) {
  .feedback-video-player .media-video {
    border-radius: 0;
  }
}
.feedback-video-player .media-video video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  outline: none;
  transition: all 0.1s;
}
.feedback-video-player .media-video .media-video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--colour-system-text-inverse);
}
.feedback-video-player .media-video .media-video-overlay a {
  color: var(--colour-system-text-inverse);
}
.feedback-video-player .media-video .media-video-overlay > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(76, 84, 91, 0.7);
  animation: zoomInOut 0.5s linear forwards;
}
.feedback-video-player .media-video .media-video-overlay > div svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 8px;
  fill: var(--colour-system-text-inverse);
}
.feedback-video-player .media-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  margin: auto;
  border-radius: 0 0 8px 8px;
  transition: 0.1s linear;
}
.feedback-video-player .media-controls .media-progress {
  position: absolute;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  cursor: pointer;
  background-color: var(--colour-system-surface);
}
.feedback-video-player .media-controls .media-progress:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgba(96, 128, 160, 0.4);
  transition: all 0.1s linear;
}
.feedback-video-player .media-controls .media-progress .play-progress,
.feedback-video-player .media-controls .media-progress .buffered-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  transition: all 0.25s linear;
}
.feedback-video-player .media-controls .media-progress .play-progress {
  z-index: 10;
  background-color: var(--colour-primary);
}
.feedback-video-player .media-controls .media-progress .play-progress.clicked {
  transition: none;
}
.feedback-video-player .media-controls .media-progress .buffered-progress {
  z-index: 5;
  background-color: rgba(96, 128, 160, 0.4);
}
.feedback-video-player .media-controls .media-progress .play-progress-circle {
  position: absolute;
  z-index: 50;
  left: 0;
  top: 0;
  bottom: -13px;
  width: 16px;
  height: 16px;
  margin: auto auto auto -8px;
  border-radius: 50%;
  border: 6px solid var(--colour-on-accent);
  background-color: var(--colour-primary);
  box-shadow: var(--shadow-1);
  transition: all 0.25s linear;
}
.feedback-video-player .media-controls .media-progress .play-progress-circle.clicked {
  transition: none;
}
.feedback-video-player .media-controls .media-progress .annotation {
  position: absolute;
  z-index: 10;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--colour-system-surface);
  border-radius: 50%;
  background-color: #FF4060;
  pointer-events: none;
}
.feedback-video-player .media-controls .media-progress .quote {
  position: absolute;
  z-index: 11;
  bottom: -4px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  margin: auto auto auto -6px;
  border-radius: 50%;
  text-align: center;
  font-size: 8px;
  color: var(--colour-primary);
  background-color: var(--colour-system-surface);
  pointer-events: none;
}
.feedback-video-player .media-controls .media-progress .quote:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f10d";
}
.feedback-video-player .media-controls .media-progress .quote.quote-success {
  font-size: 10px;
  color: var(--colour-success);
}
.feedback-video-player .media-controls .media-progress .quote.quote-success:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f058";
}
.feedback-video-player .media-controls .media-progress .progress-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  bottom: 100%;
  left: 20px;
  padding: 0 10px;
  width: auto;
  height: 24px;
  line-height: 24px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-neutral-1000);
  border-radius: 15px;
  font-size: 12px;
  user-select: none;
}
.feedback-video-player .media-controls .media-bookmark {
  position: absolute;
  z-index: 250;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 24px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 1px 0 0 var(--colour-system-line);
  cursor: crosshair;
}
.feedback-video-player .media-controls .media-bookmark.media-bookmark-disabled {
  cursor: default;
}
.feedback-video-player .media-controls .media-bookmark .bookmark {
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  margin: 6px 0 0 -8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s linear;
}
.feedback-video-player .media-controls .media-bookmark .bookmark .bookmark-avatar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--colour-neutral-100);
  cursor: pointer;
}
.feedback-video-player .media-controls .media-bookmark .bookmark .bookmark-avatar.bookmark-avatar-text {
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  text-transform: uppercase;
  font-weight: 500;
}
.feedback-video-player .media-controls .media-bookmark .bookmark.open:before {
  box-shadow: 0 0 0 6px rgba(96, 64, 255, 0.2);
}
.feedback-video-player .media-controls .media-bookmark .bookmark-add-placeholder {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  margin-left: -1px;
  background-color: var(--colour-primary);
  pointer-events: none;
}
.feedback-video-player .media-controls .media-bookmark .bookmark-add-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 0 10px;
  width: auto;
  height: 24px;
  line-height: 24px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-neutral-1000);
  border-radius: 15px;
  font-size: 12px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.feedback-video-player .media-controls .media-buttons {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 8px;
  border-radius: 0 0 8px 8px;
  background-color: var(--colour-system-surface);
}
.feedback-video-player .media-controls .media-buttons > button {
  position: relative;
  float: left;
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 4px 0;
  border-radius: 8px;
  color: var(--colour-system-text);
  cursor: pointer;
  border-radius: 50%;
}
.feedback-video-player .media-controls .media-buttons > button svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 3px;
  fill: var(--colour-system-text);
}
.feedback-video-player .media-controls .media-buttons > button:hover:not(:disabled), .feedback-video-player .media-controls .media-buttons > button.success.active:not(:disabled), .feedback-video-player .media-controls .media-buttons > button.info.active:not(:disabled), .feedback-video-player .media-controls .media-buttons > button.danger.active:not(:disabled) {
  background-color: var(--colour-neutral-50);
  color: var(--colour-system-text);
}
.feedback-video-player .media-controls .media-buttons > button:hover:not(:disabled) svg, .feedback-video-player .media-controls .media-buttons > button.success.active:not(:disabled) svg, .feedback-video-player .media-controls .media-buttons > button.info.active:not(:disabled) svg, .feedback-video-player .media-controls .media-buttons > button.danger.active:not(:disabled) svg {
  fill: var(--colour-system-text);
}
.feedback-video-player .media-controls .media-buttons > button:disabled {
  cursor: not-allowed;
}
.feedback-video-player .media-controls .media-buttons > button.media-control-pause, .feedback-video-player .media-controls .media-buttons > button.media-control-replay {
  display: none;
}
.feedback-video-player .media-controls .media-buttons > button.media-control-speed {
  float: right;
  font-size: 12px;
}
.feedback-video-player .media-controls .media-buttons > button.media-control-speed i {
  margin-left: 2px;
  font-size: 10px;
}
.feedback-video-player .media-controls .media-buttons > button.media-control-mute, .feedback-video-player .media-controls .media-buttons > button.media-control-fullscreen {
  float: right;
}
.feedback-video-player .media-controls .media-buttons .media-control-volume {
  float: right;
  width: 90px;
  margin: 3px 4px;
}
@media (max-width: 800px) {
  .feedback-video-player .media-controls .media-buttons .media-control-volume {
    width: 50px;
  }
}
.feedback-video-player .media-controls .media-buttons .video-time {
  float: left;
  margin-left: 4px;
  line-height: 44px;
  font-size: 12px;
  color: var(--colour-system-text);
  user-select: none;
}
.feedback-video-player .media-controls .quick-bookmark {
  display: none;
  position: absolute;
  z-index: 500;
  bottom: 100%;
  width: 400px;
  margin: 0 0 20px -200px;
  padding: 12px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  filter: drop-shadow(0 5px 20px var(--colour-system-overlay));
}
.feedback-video-player .media-controls .quick-bookmark > .arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: var(--colour-system-surface);
}
.feedback-video-player .media-controls .quick-bookmark input {
  padding-right: 90px;
  border: none;
}
.feedback-video-player .media-controls .quick-bookmark .close {
  position: absolute;
  right: -5px;
  top: -5px;
  margin-bottom: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.9);
  cursor: pointer;
}
.feedback-video-player .media-controls .quick-bookmark .close svg {
  display: block;
  width: 5px;
  height: 5px;
  margin: 4px;
  fill: var(--colour-system-text-inverse);
}
.feedback-video-player .media-controls .quick-bookmark .actions {
  position: absolute;
  top: 12px;
  right: 12px;
}
.feedback-video-player .media-controls .quick-bookmark .actions .delete {
  display: none;
  color: var(--colour-neutral);
}
.feedback-video-player .media-controls .quick-bookmark input:placeholder-shown + .actions button[type=submit] {
  opacity: 0.2;
  cursor: not-allowed;
}
.feedback-video-player .video-processing-status {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: 32px;
  color: var(--colour-system-text-inverse);
  text-align: center;
}

.feedback-video-player[data-readonly="1"] .media-video {
  bottom: 40px;
}
.feedback-video-player[data-readonly="1"] .media-controls {
  height: 24px;
}
.feedback-video-player[data-readonly="1"] .media-controls .media-bookmark {
  bottom: 0;
  box-shadow: none;
  cursor: default;
  border-radius: 0 0 8px 8px;
}
.feedback-video-player[data-readonly="1"] .media-controls .media-buttons {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.feedback-inbox .media-control-fullscreen {
  display: none;
}

#session_replay_iframe_overlay {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px;
}
#session_replay_iframe_overlay > .close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: var(--colour-system-text-inverse);
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}

.session-player-overlay {
  padding: 8px;
}

.session-player {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
}
.session-player .region-address-bar {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  overflow: hidden;
  line-height: 42px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 0 0 var(--colour-system-line);
  cursor: default;
  user-select: none;
}
.session-player .region-address-bar .region-url-box {
  width: 0;
  flex: 1;
  margin-right: 12px;
}
.session-player .region-address-bar .region-url {
  width: 100%;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.session-player .region-address-bar .region-url > .fa-lock {
  margin-right: 8px;
  color: var(--colour-neutral);
  font-size: 10px;
  transform: translateY(-1px);
}
.session-player .region-address-bar .region-url > .loader-placeholder {
  width: 300px;
  margin-top: 12px;
}
.session-player .region-address-bar .region-btn-group {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: wrap;
}
.session-player .region-address-bar .replay-close {
  position: relative;
  width: 64px;
  height: 100%;
  border-left: 1px solid var(--colour-system-line);
  color: var(--colour-neutral-300);
  font-size: 18px;
  cursor: pointer;
}
.session-player .region-address-bar .replay-close:hover, .session-player .region-address-bar button.replay-close.success.active, .session-player .region-address-bar button.replay-close.info.active, .session-player .region-address-bar button.replay-close.danger.active {
  color: var(--colour-neutral);
}
.session-player .region-address-bar .region-tag,
.session-player .region-address-bar .region-tags,
.session-player .region-address-bar .region-share {
  margin-right: 12px;
}
@media (max-width: 800px) {
  .session-player .region-address-bar .region-tag {
    display: none;
  }
}
.session-player .region-address-bar .region-tags span {
  margin-right: 4px;
}
@media (max-width: 800px) {
  .session-player .region-address-bar .region-tags span {
    display: none;
  }
}
.session-player .region-address-bar .region-resolution,
.session-player .region-address-bar .region-devtools-toggle,
.session-player .region-address-bar .region-events-toggle {
  position: relative;
  width: 120px;
  text-align: center;
  font-size: 11px;
  border-left: 1px solid var(--colour-system-line);
  font-weight: 500;
  color: var(--colour-neutral);
}
.session-player .region-address-bar .region-resolution > span,
.session-player .region-address-bar .region-devtools-toggle > span,
.session-player .region-address-bar .region-events-toggle > span {
  margin-left: 4px;
  text-transform: uppercase;
}
.session-player .region-address-bar .region-devtools-toggle,
.session-player .region-address-bar .region-events-toggle {
  cursor: pointer;
}
.session-player .region-address-bar .region-devtools-toggle:hover, .session-player .region-address-bar button.region-devtools-toggle.success.active, .session-player .region-address-bar button.region-devtools-toggle.info.active, .session-player .region-address-bar button.region-devtools-toggle.danger.active,
.session-player .region-address-bar .region-events-toggle:hover,
.session-player .region-address-bar button.region-events-toggle.success.active,
.session-player .region-address-bar button.region-events-toggle.info.active,
.session-player .region-address-bar button.region-events-toggle.danger.active {
  color: var(--colour-primary-dark-invert);
}
.session-player .region-events {
  display: none;
  overflow: auto;
  position: absolute;
  z-index: 10;
  top: 42px;
  right: 0;
  bottom: 0;
  width: 380px;
  border-radius: 0 0 8px 0;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
.session-player .region-events:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: var(--colour-system-line);
}
.session-player .region-events .event-item {
  position: relative;
  z-index: 10;
  padding: 8px 12px;
  margin: 8px 16px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  cursor: pointer;
}
.session-player .region-events .event-item:hover, .session-player .region-events .event-item.active {
  border-color: var(--colour-primary-dark-invert);
}
.session-player .region-events .event-item:hover .event-info, .session-player .region-events .event-item.active .event-info {
  color: var(--colour-system-text);
}
.session-player .region-events .event-item:before {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  color: var(--colour-system-text-inverse);
}
.session-player .region-events .event-item[data-type=click]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f245";
  background-color: var(--colour-primary);
}
.session-player .region-events .event-item[data-type=focus]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f649";
  background-color: var(--colour-neutral-1000);
}
.session-player .region-events .event-item[data-type=input]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f11c";
  background-color: var(--colour-warning);
}
.session-player .region-events .event-item[data-type=resize]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f066";
  background-color: var(--colour-neutral);
}
.session-player .region-events .event-item[data-type=navigation]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f361";
  background-color: var(--colour-success);
}
.session-player .region-events .event-item[data-type=browser_tab]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f2d2";
  background-color: var(--colour-success);
}
.session-player .region-events .event-item[data-type=feedback]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06e";
  background-color: #FF4060;
}
.session-player .region-events .event-item[data-type=custom]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f02b";
  background-color: #FF4060;
}
.session-player .region-events .event-item[data-type=rage_click]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0e7";
  background-color: #FF4060;
}
.session-player .region-events .event-item .event-time {
  position: absolute;
  top: 14px;
  right: 16px;
  line-height: 16px;
  color: var(--colour-neutral);
  font-size: 11px;
  font-weight: 500;
}
.session-player .region-events .event-item .event-info {
  margin-right: 40px;
  margin-left: 30px;
  height: 32px;
  line-height: 32px;
  color: var(--colour-neutral);
  user-select: none;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.session-player .region-events .event-item .event-type {
  margin-right: 4px;
  font-weight: 500;
  font-size: 13px;
  text-transform: capitalize;
}
.session-player .region-events .event-item .event-selector {
  font-size: 12px;
}
.session-player .region-events .event-item .event-details {
  display: none;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
}
.session-player .region-events .event-item .event-details .code {
  font-family: "Source Code Pro", monospace;
  word-break: break-all;
}
.session-player .region-events .event-item .event-details .code-copy {
  display: none;
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--colour-neutral);
}
.session-player .region-events .event-item .event-details .code-copy:hover, .session-player .region-events .event-item .event-details button.code-copy.success.active, .session-player .region-events .event-item .event-details button.code-copy.info.active, .session-player .region-events .event-item .event-details button.code-copy.danger.active {
  color: var(--colour-primary);
}
.session-player .region-events .event-item .event-details:hover .code-copy, .session-player .region-events .event-item button.event-details.success.active .code-copy, .session-player .region-events .event-item button.event-details.info.active .code-copy, .session-player .region-events .event-item button.event-details.danger.active .code-copy {
  display: block;
}
.session-player .region-events .event-item.open .event-details {
  display: block;
}
.session-player .region-player {
  position: absolute;
  top: 42px;
  right: 0;
  bottom: 66px;
  left: 0;
  background-color: #000000;
}
.session-player .region-player .indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(76, 84, 91, 0.7);
  animation: zoomInOut 0.5s linear forwards;
  pointer-events: none;
}
.session-player .region-player .indicator svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 8px;
  fill: #FFFFFF;
}
.session-player .region-player .error-msg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -20px;
  line-height: 40px;
  color: #FFFFFF;
  text-align: center;
}
.session-player .region-player:not(.loader) .loading-msg {
  display: none;
}
.session-player .region-player .loading-msg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: 24px;
  line-height: 40px;
  color: var(--colour-system-text);
  text-align: center;
}
.session-player .region-timeline {
  position: absolute;
  right: 0;
  bottom: 44px;
  left: 0;
  height: 22px;
  cursor: pointer;
  box-shadow: 0 -1px 0 0 var(--colour-system-line);
}
.session-player .region-timeline:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-color: var(--colour-neutral-100);
  transition: all 0.1s;
}
.session-player .region-timeline .inactivity {
  position: absolute;
  z-index: 15;
  bottom: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg, #CCCCCC, #CCCCCC 1px, var(--colour-system-body) 1px, var(--colour-system-body) 4px);
  transition: all 0.1s linear;
}
.session-player .region-timeline .play-progress {
  position: absolute;
  z-index: 20;
  bottom: 0;
  left: 0;
  height: 8px;
  background-color: var(--colour-primary);
  transition: all 0.1s;
  opacity: 0.4;
}
.session-player .region-timeline .play-progress-circle {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  bottom: -13px;
  width: 16px;
  height: 16px;
  margin: auto auto auto -8px;
  border-radius: 50%;
  border: 6px solid var(--colour-on-accent);
  background-color: var(--colour-primary);
  box-shadow: var(--shadow-1);
}
.session-player .region-timeline .play-tag {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  margin-left: -3px;
  transition: all 0.1s;
  transform: translateX(-50%);
}
.session-player .region-timeline .play-tag:not([data-type=navigation]) {
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.6;
}
.session-player .region-timeline .play-tag:not([data-type=navigation]):hover, .session-player .region-timeline button.play-tag.success.active:not([data-type=navigation]), .session-player .region-timeline button.play-tag.info.active:not([data-type=navigation]), .session-player .region-timeline button.play-tag.danger.active:not([data-type=navigation]) {
  opacity: 1;
}
.session-player .region-timeline .play-tag[data-type=browser_tab] {
  z-index: 50;
  background-color: var(--colour-success);
}
.session-player .region-timeline .play-tag[data-type=click] {
  z-index: 40;
  background-color: var(--colour-primary);
}
.session-player .region-timeline .play-tag[data-type=focus] {
  z-index: 30;
  background-color: var(--colour-neutral-1000);
}
.session-player .region-timeline .play-tag[data-type=input] {
  z-index: 20;
  width: 2px;
  height: 2px;
  bottom: 3px;
  background-color: var(--colour-warning);
}
.session-player .region-timeline .play-tag[data-type=resize] {
  z-index: 20;
  background-color: var(--colour-neutral);
}
.session-player .region-timeline .play-tag[data-type=feedback] {
  z-index: 50;
  width: 10px;
  height: 10px;
  line-height: 10px;
  bottom: 9px;
  opacity: 1;
}
.session-player .region-timeline .play-tag[data-type=feedback]:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4b0";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 9px;
  color: #FF4060;
  text-align: center;
}
.session-player .region-timeline .play-tag[data-type=custom] {
  z-index: 50;
  width: 10px;
  height: 10px;
  line-height: 10px;
  bottom: 9px;
  opacity: 1;
}
.session-player .region-timeline .play-tag[data-type=custom]:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f02b";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 9px;
  color: #FF4060;
  text-align: center;
}
.session-player .region-timeline .play-tag[data-type=rage_click] {
  z-index: 50;
  width: 10px;
  height: 10px;
  line-height: 10px;
  bottom: 9px;
  opacity: 1;
}
.session-player .region-timeline .play-tag[data-type=rage_click]:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0e7";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 9px;
  color: #FF4060;
  text-align: center;
}
.session-player .region-timeline .play-tag[data-type=navigation] {
  width: 16px;
  height: 12px;
  line-height: 12px;
  bottom: 8px;
  z-index: 60;
  text-align: center;
}
.session-player .region-timeline .play-tag[data-type=navigation]:before {
  display: block;
  font-size: 12px;
  color: var(--colour-success);
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f361";
}
.session-player .region-timeline .play-tag[data-type=navigation]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f361";
}
.session-player .region-devtools-box {
  display: none;
  position: absolute;
  right: 0;
  bottom: 66px;
  left: 0;
  height: 260px;
  background-color: var(--colour-system-surface);
  box-shadow: 0 -1px 0 0 var(--colour-system-line);
}
.session-player .region-devtools-box .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  display: block;
  width: 100%;
  height: 5px;
  cursor: row-resize;
}
.session-player .region-devtools .devtools-btn {
  display: none;
}
.session-player .region-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44px;
  padding: 0 8px;
}
.session-player .region-controls > button {
  position: relative;
  float: left;
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 4px;
  border-radius: 8px;
  color: var(--colour-system-text);
  cursor: pointer;
  border-radius: 50%;
}
.session-player .region-controls > button svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 3px;
  fill: var(--colour-system-text);
}
.session-player .region-controls > button:hover, .session-player .region-controls > button.success.active, .session-player .region-controls > button.info.active, .session-player .region-controls > button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-system-text);
}
.session-player .region-controls > button:hover svg, .session-player .region-controls > button.success.active svg, .session-player .region-controls > button.info.active svg, .session-player .region-controls > button.danger.active svg {
  fill: var(--colour-system-text);
}
.session-player .region-controls > button.media-control-pause, .session-player .region-controls > button.media-control-replay {
  display: none;
}
.session-player .region-controls > button.media-control-speed {
  float: right;
  font-size: 12px;
}
.session-player .region-controls > button.media-control-speed i {
  margin-left: 2px;
  font-size: 10px;
}
.session-player .region-controls > button.media-control-fullscreen {
  float: right;
}
.session-player .region-controls .media-control-inactivity {
  float: right;
  margin: 12px 12px 0 0;
}
.session-player .region-controls .media-control-inactivity > span {
  color: var(--colour-neutral);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.session-player .region-controls .media-control-inactivity > button {
  margin-left: 8px;
  vertical-align: middle;
}
.session-player .region-controls .media-control-settings {
  position: relative;
  float: right;
  margin: 4px;
}
.session-player .region-controls .media-control-settings > button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--colour-system-text);
  cursor: pointer;
}
.session-player .region-controls .media-control-settings > button svg {
  fill: var(--colour-system-text);
}
.session-player .region-controls .media-control-settings > button:hover, .session-player .region-controls .media-control-settings > button.success.active, .session-player .region-controls .media-control-settings > button.info.active, .session-player .region-controls .media-control-settings > button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-system-text);
}
.session-player .region-controls .media-control-settings > button svg {
  fill: var(--colour-system-text);
}
.session-player .region-controls .media-control-settings.active > button {
  background-color: var(--colour-neutral-25);
  color: var(--colour-system-text);
}
.session-player .region-controls .video-time {
  float: left;
  margin-left: 4px;
  line-height: 44px;
  font-size: 12px;
  color: var(--colour-system-text);
  user-select: none;
}
.session-player .rr-player {
  background-color: var(--colour-system-body);
  box-shadow: none;
  border-radius: 0;
}
.session-player .devtools-menu-tab,
.session-player .devtools-menu,
.session-player .console-menu {
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid var(--colour-system-line);
}
.session-player .devtools-menu-tab > span,
.session-player .devtools-menu > span,
.session-player .console-menu > span {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.session-player .devtools-menu-tab > span.active,
.session-player .devtools-menu > span.active,
.session-player .console-menu > span.active {
  color: var(--colour-system-text);
  box-shadow: 0 -2px 0 0 #6040FF inset;
  cursor: default;
}
.session-player .devtools-menu-tab > span .log-total,
.session-player .devtools-menu > span .log-total,
.session-player .console-menu > span .log-total {
  margin-left: 4px;
  pointer-events: none;
}
.session-player .devtools-menu-tab .devtools-close {
  float: right;
  margin: 5px;
  cursor: pointer;
}
.session-player .devtools-menu-tab .devtools-close svg {
  width: 18px;
  height: 18px;
  fill: var(--colour-neutral);
}
.session-player .devtools-menu-tab .devtools-close:hover svg, .session-player .devtools-menu-tab button.devtools-close.success.active svg, .session-player .devtools-menu-tab button.devtools-close.info.active svg, .session-player .devtools-menu-tab button.devtools-close.danger.active svg {
  fill: var(--colour-primary);
}
.session-player .devtools-content {
  display: none;
}
.session-player .devtools-content.active {
  display: block;
}

.session-player.pending .region-tags,
.session-player.pending .region-tag,
.session-player.pending .region-share,
.session-player.pending .region-resolution,
.session-player.pending .region-devtools-toggle,
.session-player.pending .region-events-toggle {
  display: none;
}

.session-player.devtool-open .region-events {
  display: block;
}
.session-player.devtool-open .region-player,
.session-player.devtool-open .region-timeline,
.session-player.devtool-open .region-devtools-box,
.session-player.devtool-open .region-controls {
  right: 380px;
}
.session-player.devtool-open .region-events-toggle,
.session-player.devtool-open .region-events-toggle:hover {
  color: var(--colour-primary-dark-invert);
}
.session-player.devtool-open .region-events-toggle:after,
.session-player.devtool-open .region-events-toggle:hover:after {
  background-color: var(--colour-primary-dark-invert);
}

.session-player.devtools-open .region-devtools-box,
.session-player.devtools-open .region-devtools-body {
  display: block;
}
.session-player.devtools-open .region-player {
  margin-bottom: 260px;
}
.session-player.devtools-open .region-devtools-toggle,
.session-player.devtools-open .region-devtools-toggle:hover {
  color: var(--colour-primary-dark-invert);
}
.session-player.devtools-open .region-devtools-toggle:after,
.session-player.devtools-open .region-devtools-toggle:hover:after {
  background-color: var(--colour-primary-10);
}

.session-replay-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 24px 0;
  margin-top: 16px;
  cursor: pointer;
}
.session-replay-preview:first-child {
  margin-top: 8px;
}
.session-replay-preview:after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--colour-neutral-25);
}
.session-replay-preview:hover:before, button.session-replay-preview.success.active:before, button.session-replay-preview.info.active:before, button.session-replay-preview.danger.active:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -16px;
  bottom: 0;
  left: -16px;
  border-radius: 8px;
  background: var(--colour-neutral-10);
  pointer-events: none;
  animation: fadeIn 0.1s;
}
.session-replay-preview .session-info {
  display: flex;
}
.session-replay-preview .session-info label {
  margin-right: 0;
}
.session-replay-preview .badge-id:after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
.session-replay-preview .view-user {
  text-decoration: none;
  font-weight: 500;
}
.session-replay-preview .view-user > i {
  margin-left: 4px;
}
.session-replay-preview .session-duration {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 20px;
  line-height: 20px;
  margin-left: 16px;
  padding: 0 6px;
  color: var(--colour-neutral);
  background-color: var(--colour-neutral-25);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.session-replay-preview .session-duration:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f04b";
  margin-right: 4px;
  color: var(--colour-neutral-300);
  font-size: 10px;
}
.session-replay-preview .session-duration .session-online {
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: var(--colour-success);
}
.session-replay-preview .browser-info {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
  margin: 0 12px;
  font-size: 16px;
}
.session-replay-preview .browser-info > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.session-replay-preview .browser-info > span:empty {
  display: none;
}
.session-replay-preview .browser-info img {
  display: block;
  width: 16px;
  height: 16px;
}

.widget-demo {
  height: 100%;
  padding: 24px;
  background-color: var(--colour-system-body);
}
.widget-demo .demo-window {
  overflow: hidden;
  position: relative;
  height: 100%;
  border: 4px solid var(--colour-system-line);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
}
@media (prefers-color-scheme: dark) {
  .widget-demo .demo-window {
    color-scheme: dark;
  }
}
.widget-demo .demo-window .preparing {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 100;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
.widget-demo .demo-address-bar {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 48px;
  border-bottom: 1px solid var(--colour-system-line);
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle {
  height: 32px;
  padding: 0 4px;
  margin-left: auto;
  margin-right: 24px;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 24px;
  padding: 0;
  border-radius: 16px;
  cursor: pointer;
  color: var(--colour-neutral-500);
  font-size: 13px;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.demo-theme-light i {
  color: #f59e0b;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.demo-theme-dark i {
  color: #3b82f6;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.active {
  color: var(--colour-system-text);
  background-color: var(--colour-badge-group-tertiary-highlight-bg);
  box-shadow: var(--shadow-1);
  cursor: default;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.active.demo-theme-light i {
  color: #f59e0b;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.active.demo-theme-dark i {
  color: #3b82f6;
}
.widget-demo .demo-address-bar .demo-address-bar-theme-toggle > span.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.widget-demo .demo-address-bar-url {
  margin-left: 24px;
  padding: 4px 12px;
  margin-right: 16px;
  border-radius: 8px;
  background-color: var(--colour-system-surface-2);
  color: var(--colour-system-text-muted);
  font-size: 13px;
}
.widget-demo iframe {
  display: block;
  width: 100%;
  height: calc(100% - 48px);
  border: none;
}

.integration-log-preview {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 120px 100px 100px auto 200px;
  padding: 24px 0;
  border-bottom: 1px solid var(--colour-neutral-25);
  cursor: pointer;
}
.integration-log-preview > div:last-child {
  text-align: right;
  color: var(--colour-neutral);
}
.integration-log-preview:hover:before, button.integration-log-preview.success.active:before, button.integration-log-preview.info.active:before, button.integration-log-preview.danger.active:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  right: -16px;
  bottom: 4px;
  left: -16px;
  background-color: var(--colour-neutral-10);
  border-radius: 8px;
  pointer-events: none;
  animation: fadeIn 0.1s;
}
.integration-log-preview .integration-type {
  display: flex;
  min-width: 100px;
}
.integration-log-preview .integration-type .integration-logo {
  width: 16px;
  height: 16px;
}
.integration-log-preview .integration-type .integration-logo img {
  width: 100%;
  height: 100%;
}
.integration-log-preview .request-url {
  word-break: break-all;
}

.integration-log-sidebar .log-info {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 12px;
  margin-bottom: 12px;
}
.integration-log-sidebar .log-info:last-child {
  margin-bottom: 0;
}
.integration-log-sidebar .log-info .title {
  color: var(--colour-neutral);
  font-weight: 500;
  word-break: break-all;
}
.integration-log-sidebar .log-info .value {
  word-break: break-all;
}
.integration-log-sidebar .session-title {
  font-weight: 600;
}
.integration-log-sidebar .integration-type {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 8px;
  font-weight: 500;
}
.integration-log-sidebar .integration-type .integration-logo {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.integration-log-sidebar .integration-type .integration-logo img {
  margin-right: 0;
}
.integration-log-sidebar .request-url {
  margin-bottom: 16px;
  word-break: break-all;
  font-weight: 500;
}
.integration-log-sidebar .response-body,
.integration-log-sidebar .request-body {
  position: relative;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
  font-size: 13px;
  line-height: 130%;
}
.integration-log-sidebar .response-body .empty,
.integration-log-sidebar .request-body .empty {
  color: var(--colour-neutral);
  font-style: italic;
  font-size: 13px;
}
.integration-log-sidebar .response-body .response-body-copy,
.integration-log-sidebar .response-body .request-body-copy,
.integration-log-sidebar .request-body .response-body-copy,
.integration-log-sidebar .request-body .request-body-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  right: 4px;
  width: 24px;
  height: 24px;
  color: var(--colour-neutral-400);
  cursor: pointer;
}
.integration-log-sidebar .response-body .response-body-copy:hover, .integration-log-sidebar .response-body button.response-body-copy.success.active, .integration-log-sidebar .response-body button.response-body-copy.info.active, .integration-log-sidebar .response-body button.response-body-copy.danger.active,
.integration-log-sidebar .response-body .request-body-copy:hover,
.integration-log-sidebar .response-body button.request-body-copy.success.active,
.integration-log-sidebar .response-body button.request-body-copy.info.active,
.integration-log-sidebar .response-body button.request-body-copy.danger.active,
.integration-log-sidebar .request-body .response-body-copy:hover,
.integration-log-sidebar .request-body button.response-body-copy.success.active,
.integration-log-sidebar .request-body button.response-body-copy.info.active,
.integration-log-sidebar .request-body button.response-body-copy.danger.active,
.integration-log-sidebar .request-body .request-body-copy:hover,
.integration-log-sidebar .request-body button.request-body-copy.success.active,
.integration-log-sidebar .request-body button.request-body-copy.info.active,
.integration-log-sidebar .request-body button.request-body-copy.danger.active {
  color: var(--colour-neutral);
}

.devtools {
  height: 100%;
  flex: 1 1 auto;
}
.devtools .region-devtools-body {
  position: relative;
  height: 100%;
  background-color: var(--colour-system-surface);
  box-shadow: 0 -1px 0 0 var(--colour-system-line);
}
.devtools .region-devtools-body.open {
  display: block;
}
.devtools .region-devtools-body .drag-handle {
  position: absolute;
  z-index: 100;
  top: -4px;
  left: 0;
  right: 0;
  height: 12px;
  cursor: ns-resize;
}
.devtools .region-devtools-body .devtool-tab {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
}
.devtools .region-devtools-body .devtool-tab > div {
  float: left;
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  color: var(--colour-neutral);
}
.devtools .region-devtools-body .devtool-tab > div.active {
  background-color: var(--colour-neutral-25);
  cursor: default;
  color: var(--colour-system-text);
}
.devtools .region-devtools-body .devtool-tab > div i {
  margin-right: 4px;
}
.devtools .region-devtools-body .devtool-tab > div .badge-round {
  margin-left: 4px;
}
.devtools .region-devtools-body .devtool-content {
  display: none;
  overflow: auto;
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--colour-system-line);
  font-size: 12px;
}
.devtools .region-devtools-body .devtool-content.active {
  display: block;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div {
  position: relative;
  padding: 4px 12px 4px 32px;
  border-bottom: 1px solid var(--colour-system-line);
  line-height: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-counter {
  position: absolute;
  top: 6px;
  left: 12px;
  display: block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 500;
  color: var(--colour-system-text-inverse);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-count="1"]:before {
  position: absolute;
  left: 12px;
  width: 14px;
  text-align: center;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=log]:hover, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=dom]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=log]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=dom]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=log][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=dom][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=log][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=dom][data-count="1"]:before {
  color: var(--colour-neutral);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f054";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=log] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=dom] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=log] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=dom] .log-counter {
  background-color: var(--colour-neutral);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=error], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=error] {
  color: #FF4060;
  font-weight: 500;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=error]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=error]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=error][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=error][data-count="1"]:before {
  color: #FF4060;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f057";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=error] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=error] .log-counter {
  background-color: #FF4060;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=warn], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=warn] {
  color: var(--colour-warning);
  font-weight: 500;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=warn]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=warn]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=warn][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=warn][data-count="1"]:before {
  color: var(--colour-warning);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f071";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=warn] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=warn] .log-counter {
  background-color: var(--colour-warning);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=info]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=info]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=info][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=info][data-count="1"]:before {
  color: var(--colour-primary);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f05a";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=info] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=info] .log-counter {
  background-color: var(--colour-primary);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=debug]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=debug]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=debug][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=debug][data-count="1"]:before {
  color: var(--colour-neutral-1000);
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f059";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=debug] .log-counter, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=debug] .log-counter {
  background-color: var(--colour-neutral-1000);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=event_click], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=event_click] {
  padding-left: 90px;
  border-bottom: 1px solid var(--colour-system-line);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=event_click]:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=event_click]:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=event_click][data-count="1"]:before, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=event_click][data-count="1"]:before {
  color: var(--colour-neutral);
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  content: "\f245";
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div[data-type=event_click] .event-type, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div[data-type=event_click] .event-type {
  position: absolute;
  top: 4px;
  left: 32px;
  padding: 0 4px;
  margin-right: 12px;
  background-color: var(--colour-neutral-25);
  border-radius: 8px;
  font-weight: 500;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item {
  position: relative;
  margin-right: 8px;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=number], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=number] {
  color: var(--colour-neutral-1000);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=boolean], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=boolean] {
  color: var(--colour-neutral-1000);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=number_string], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=number_string] {
  color: #FF4060;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=function], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=function] {
  color: var(--colour-primary);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=undefined], .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=null], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=undefined], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=null] {
  color: var(--colour-neutral);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=json], .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=json] {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=json].expanded, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=json].expanded {
  white-space: pre-wrap;
  word-break: break-word;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item[data-type=json] .json-expand, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item[data-type=json] .json-expand {
  margin-right: 4px;
  color: var(--colour-neutral);
  cursor: pointer;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item .goto, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item .goto {
  display: none;
  position: absolute;
  top: 0;
  right: 8px;
  font-size: 12px;
  color: var(--colour-neutral);
  cursor: pointer;
  font-weight: 500;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item .goto:hover, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item button.goto.success.active, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item button.goto.info.active, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item button.goto.danger.active, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item .goto:hover, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item button.goto.success.active, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item button.goto.info.active, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item button.goto.danger.active {
  color: var(--colour-primary);
}
.devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div .log-item:hover .goto, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div button.log-item.success.active .goto, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div button.log-item.info.active .goto, .devtools .region-devtools-body .devtool-content[data-type=console_log] .console-logs > div button.log-item.danger.active .goto, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div .log-item:hover .goto, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div button.log-item.success.active .goto, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div button.log-item.info.active .goto, .devtools .region-devtools-body .devtool-content[data-type=event_track] .event-logs > div button.log-item.danger.active .goto {
  display: block;
}
.devtools .region-devtools-body .devtool-content[data-type=console_log],
.devtools .region-devtools-body .devtool-content[data-type=network_log] {
  overflow: visible;
}
.devtools .region-devtools-body .console-searchbar,
.devtools .region-devtools-body .network-searchbar {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
  position: absolute;
  top: -29px;
  right: 8px;
}
.devtools .region-devtools-body .console-searchbar .button-dropdown .dropdown-select,
.devtools .region-devtools-body .network-searchbar .button-dropdown .dropdown-select {
  font-size: 12px;
  max-height: 260px;
  overflow: auto;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 0 0 32px 0;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table table {
  table-layout: fixed;
  font-size: 12px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th {
  padding: 4px 12px;
  font-size: 12px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=status] {
  width: 94px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=type] {
  width: 114px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=protocol] {
  width: 80px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=name] {
  width: 100%;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=size] {
  width: 120px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table thead th[name=time] {
  width: 100px;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table tr:hover {
  background-color: var(--colour-neutral-10);
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table tr.error,
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table tr.error:hover {
  color: var(--colour-danger-600);
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table td {
  padding: 4px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .success-dot,
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .error-dot,
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .grey-dot {
  display: inline-block;
  margin-right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .success-dot {
  background-color: var(--colour-success);
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .grey-dot {
  background-color: var(--colour-neutral-400);
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table .error-dot {
  background-color: var(--colour-danger);
}
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table th:first-child,
.devtools .region-devtools-body .devtool-content[data-type=network_log] .network-table td:first-child {
  padding-left: 12px;
}
.devtools .region-devtools-body .devtool-content[data-type=custom_data] .row {
  display: grid;
  grid-template-columns: 200px calc(100% - 200px);
  line-height: 18px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--colour-system-line);
  white-space: normal;
  font-size: 12px;
}
.devtools .region-devtools-body .devtool-content[data-type=custom_data] .row.empty {
  display: block;
}
.devtools .region-devtools-body .devtool-content[data-type=custom_data] .title {
  padding: 0 12px;
  color: var(--colour-neutral);
  word-break: break-all;
}
.devtools .region-devtools-body .devtool-content[data-type=custom_data] .title a {
  color: var(--colour-neutral);
}
.devtools .region-devtools-body .devtool-content[data-type=custom_data] .value {
  padding: 0 12px;
}
.devtools .console-content {
  height: 100%;
  overflow: auto;
  padding-bottom: 32px;
}
.devtools .console-empty,
.devtools .network-empty,
.devtools .event-empty {
  display: none;
}
.devtools .console-empty,
.devtools .console-loading,
.devtools .network-empty,
.devtools .network-loading,
.devtools .event-empty,
.devtools .event-loading {
  position: relative;
  padding: 0 12px 0 32px;
  border-bottom: 1px solid var(--colour-system-line);
  line-height: 26px;
  white-space: pre-wrap;
  word-break: break-word;
}
.devtools .console-empty:before,
.devtools .console-loading:before,
.devtools .network-empty:before,
.devtools .network-loading:before,
.devtools .event-empty:before,
.devtools .event-loading:before {
  position: absolute;
  left: 12px;
  width: 14px;
  text-align: center;
  color: var(--colour-primary-dark-invert);
}
.devtools .console-empty:before,
.devtools .network-empty:before,
.devtools .event-empty:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f05a";
}
.devtools .console-loading:before,
.devtools .network-loading:before,
.devtools .event-loading:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e1d4";
  color: var(--colour-neutral);
}

.modal .region-devtools {
  height: 480px;
}

.bottombar-devtools .btn-close, .bottombar-devtools button.btn-close-tiny {
  top: 0px;
}
.bottombar-devtools .bottombar-body {
  overflow: visible;
}
.bottombar-devtools .bottombar-body .console-searchbar,
.bottombar-devtools .bottombar-body .network-searchbar {
  right: 48px;
}

.report-chart {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-box-bg-dark-only);
}
.report-chart.pulse {
  animation: flash 1s ease-in-out infinite;
}
.report-chart.ui-draggable-dragging {
  opacity: 0.7;
  box-shadow: var(--shadow-2);
}
.report-chart.ui-droppable-hover[data-drag-position=left]:before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  bottom: 0;
  width: 4px;
  border-radius: 8px;
  background-color: var(--colour-primary-100);
}
.report-chart.ui-droppable-hover[data-drag-position=right]:before {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  bottom: 0;
  width: 4px;
  border-radius: 8px;
  background-color: var(--colour-primary-100);
}
.report-chart .chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--colour-system-line);
  cursor: move;
}
.report-chart .chart-title .tooltip {
  cursor: default;
}
.report-chart .chart-content {
  position: relative;
  height: 300px;
  padding: 16px;
  color: var(--colour-system-text);
}
.report-chart .chart-content svg text {
  fill: currentColor;
}
.report-chart .chart-content.loading:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.report-chart .chart-content.loading:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f021";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: var(--colour-neutral-400);
  animation: rotate 2s linear infinite;
}
.report-chart .chart-content.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colour-neutral);
}
.report-chart .statcard {
  min-height: 130px;
  padding: 16px 8px 16px 16px;
}
.report-chart .statcard .statcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.report-chart .statcard .statcard-label {
  font-weight: 500;
}
.report-chart .statcard .statcard-value {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
}
.report-chart .statcard .statcard-trend-row {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 6px;
}
.report-chart .statcard .statcard-trend-up {
  color: var(--colour-success-700);
}
.report-chart .statcard .statcard-trend-down {
  color: var(--colour-danger-700);
}
.report-chart .statcard .statcard-subtext {
  font-size: 13px;
}

.chart-bar {
  margin-top: 5px;
  margin-right: 50px;
}
.chart-bar > a {
  position: relative;
  display: block;
  height: 12px;
  line-height: 12px;
  border-radius: 10px;
  text-decoration: none;
}
.chart-bar > a span {
  position: absolute;
  left: 100%;
  margin-left: 10px;
  font-size: 12px;
}

.chart-bar-success > a {
  background-color: var(--colour-success);
}
.chart-bar-success > a:hover {
  background-color: #00744d;
}

.chart-bar-info > a {
  background-color: var(--colour-neutral);
}
.chart-bar-info > a:hover {
  background-color: #435a70;
}

body[page=unavailable] {
  text-align: center;
}
body[page=unavailable] #app {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[page=unavailable] .logo {
  overflow: hidden;
  width: 48px;
  height: 48px;
  margin: auto;
}
body[page=unavailable] h1 {
  position: relative;
  display: inline-block;
  margin: 60px 0 20px 0;
  padding: 0 20px;
  font-size: 46px;
  font-weight: 700;
  color: var(--colour-system-text);
  text-transform: uppercase;
}
@media (max-width: 800px) {
  body[page=unavailable] h1 {
    font-size: 28px;
  }
}
body[page=unavailable] h2 {
  max-width: 700px;
  padding: 0 20px;
  font-size: 28px;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 800px) {
  body[page=unavailable] h2 {
    font-size: 16px;
  }
}
body[page=unavailable] .help {
  margin-top: 50px;
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  body[page=unavailable] .help {
    margin-top: 30px;
    font-size: 14px;
  }
}

body[page=login] {
  background: linear-gradient(var(--colour-neutral-10), var(--colour-neutral-50));
  background-attachment: fixed;
}
@media (max-width: 800px) {
  body[page=login] {
    background: var(--colour-system-surface);
  }
}
body[page=login] .logo svg path[fill="#2A1943"] {
  fill: var(--colour-system-text);
}
body[page=login] #app {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 48px 0;
}

div.login {
  width: 600px;
  min-height: 574px;
  max-width: 100%;
  padding: 62px 0;
  margin: auto;
  border-radius: 16px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-4);
}
@media (max-width: 800px) {
  div.login {
    box-shadow: none;
    margin: none;
  }
}
div.login .logo {
  position: absolute;
  top: 32px;
  left: 32px;
  margin: auto auto 32px auto;
  text-align: center;
}
div.login .logo svg,
div.login .logo img {
  display: block;
  width: auto;
  height: 24px;
  margin: auto;
}
div.login .logo svg path[fill="#2A1943"] {
  fill: var(--colour-system-text);
}
div.login .signup-method-back {
  display: none;
}
div.login #gtm_signup_form {
  display: none;
  animation: fadeIn 0.1s linear;
}
div.login #openid_signin_methods.short {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
}
div.login #openid_signin_methods.short .openid-button > button svg {
  position: relative;
  top: auto;
  left: auto;
  margin-right: 4px;
}
div.login #openid_signin_methods.short .openid-button > button .text {
  display: none;
}
div.login #openid_signin_methods.disabled {
  opacity: 0.4;
  pointer-events: none;
}
div.login .openid-button {
  overflow: hidden;
  position: relative;
  height: 32px;
  margin-bottom: 8px;
  box-shadow: 0 0 0 1px var(--colour-neutral-100);
  border-radius: 20px;
  transition: all 0.2s;
  cursor: pointer;
}
div.login .openid-button:hover, div.login button.openid-button.success.active, div.login button.openid-button.info.active, div.login button.openid-button.danger.active {
  background-color: var(--colour-neutral-10);
}
div.login .openid-button:hover .openid-button-google-overlay, div.login button.openid-button.success.active .openid-button-google-overlay, div.login button.openid-button.info.active .openid-button-google-overlay, div.login button.openid-button.danger.active .openid-button-google-overlay {
  background-color: var(--colour-neutral-10);
}
div.login .openid-button > button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 32px;
  padding: 0;
  font-weight: 500;
  color: var(--colour-system-text);
  cursor: pointer;
}
div.login .openid-button > button svg {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--colour-neutral);
}
div.login .openid-button > button.openid-button-google-overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--colour-system-surface);
}
div.login .openid-button > button.openid-button-sso svg {
  fill: var(--colour-neutral);
}
div.login .openid-button-google {
  overflow: hidden;
  height: 32px;
}
div.login .open-mail-client {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 13px;
  text-decoration: none;
}
div.login .open-mail-client:not(:last-child) {
  margin-right: 24px;
}
div.login .open-mail-client img {
  height: 16px;
  margin-right: 8px;
}
div.login .heading-large {
  margin-bottom: 32px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
div.login .heading-large:empty {
  display: none;
}
div.login .heading-desc {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 32px;
}
div.login .hr:before {
  background-color: var(--colour-system-line);
}
div.login .hr > span {
  background-color: var(--colour-system-surface);
}
div.login .text-info {
  color: var(--colour-system-text-muted);
}
div.login .banner-danger,
div.login .banner-success {
  display: none;
  margin-bottom: 16px;
  text-align: left;
}
div.login .login-form,
div.login .signup-form,
div.login .forgot-password-form,
div.login .reset-password-form,
div.login .user-invitation-form,
div.login .join-form,
div.login .workspace-form,
div.login .sso-domain-display {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.login .login-form > div,
div.login .signup-form > div,
div.login .forgot-password-form > div,
div.login .reset-password-form > div,
div.login .user-invitation-form > div,
div.login .join-form > div,
div.login .workspace-form > div,
div.login .sso-domain-display > div {
  width: 368px;
  max-width: 100%;
  margin: auto;
}
@media (max-width: 800px) {
  div.login .login-form > div,
  div.login .signup-form > div,
  div.login .forgot-password-form > div,
  div.login .reset-password-form > div,
  div.login .user-invitation-form > div,
  div.login .join-form > div,
  div.login .workspace-form > div,
  div.login .sso-domain-display > div {
    max-width: calc(100% - 48px);
  }
}
div.login .join-us,
div.login .log-in,
div.login .forgot-password,
div.login .tnc {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
}
div.login .signup-form h3 {
  margin-bottom: 0px;
  font-weight: 600;
  line-height: 25px;
}
div.login .signup-form-content {
  position: relative;
  z-index: 301;
}
div.login .login-form div[data-step="2"],
div.login .login-form div[data-step="3"],
div.login .signup-form div[data-step="2"],
div.login .signup-form div[data-step="3"],
div.login .user-invitation-form div[data-step="2"],
div.login .user-invitation-form div[data-step="3"] {
  display: none;
  width: 100%;
  animation: fadeIn 0.2s;
}
div.login .login-form .code-resend,
div.login .signup-form .code-resend,
div.login .user-invitation-form .code-resend {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
}
div.login .setup-form {
  display: none;
}
div.login .setup-form-logo {
  height: 32px;
  margin-bottom: 32px;
  text-align: center;
}
div.login .setup-form-logo svg {
  width: 176px;
  height: 32px;
}
div.login .setup-form .step-text {
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
div.login .setup-form .step-desc {
  margin: 0 0 32px 0;
  text-align: center;
}
div.login .setup-form .onboarding-container {
  padding: 48px 0;
}
div.login .setup-form .region-onboarding-steps {
  width: 680px;
}
@media (max-width: 800px) {
  div.login .setup-form .region-onboarding-steps {
    width: auto;
  }
}
div.login .setup-form .step-field-container {
  min-height: 500px;
  background: var(--colour-system-surface);
  box-shadow: 0 4px 16px rgba(96, 128, 160, 0.16);
  border-radius: 16px;
  padding: 72px 96px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  div.login .setup-form .step-field-container {
    min-height: 0;
    padding: 12px 24px 24px 24px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
  }
}
div.login .setup-form .step-field-container .hear-from-text {
  margin-top: 12px;
}
div.login .setup-form .step-field-container .button-dropdown input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 40px;
  pointer-events: none;
}
div.login .setup-form .step-actions {
  margin-top: 24px;
  text-align: center;
}
div.login .setup-form .step-actions button {
  margin: auto 6px;
}
div.login .setup-form .url-taken {
  display: none;
  margin-top: 8px;
}
div.login .password-toggle {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 32px;
  height: 32px;
  color: var(--colour-neutral);
  font-size: 12px;
  cursor: pointer;
}
div.login .password-toggle:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f070";
}
div.login .password-toggle.active:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f06e";
}
div.login .client-logos {
  position: absolute;
  bottom: 64px;
  left: 96px;
  right: 96px;
  text-align: center;
  color: var(--colour-neutral);
  font-size: 16px;
  font-weight: 500;
  pointer-events: none;
}
div.login .client-logos > div {
  height: 20px;
  margin-top: 32px;
  background-size: contain;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-image: url("/image/onboarding/logo.png");
}
div.login .signup-method-email input[name=email]:invalid + button {
  opacity: 0.5;
  pointer-events: none;
  transition: none;
}

body[page=setup] {
  background: linear-gradient(var(--colour-neutral-10), var(--colour-neutral-25));
}
@media (max-width: 800px) {
  body[page=setup] {
    background: var(--colour-system-surface);
  }
  body[page=setup]:before {
    display: none;
  }
}
body[page=setup] .logo {
  position: absolute;
  z-index: 10;
  top: 32px;
  left: 32px;
  margin: auto auto 32px auto;
  text-align: center;
}
body[page=setup] .logo svg {
  display: block;
  width: auto;
  height: 24px;
  margin: auto;
}
body[page=setup] .logo svg path[fill="#2A1943"] {
  fill: var(--colour-system-text);
}
body[page=setup] .region-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}
@media (max-width: 1200px) {
  body[page=setup] .region-setup {
    grid-template-columns: 1fr;
  }
  body[page=setup] .region-setup > div:last-child {
    display: none;
  }
}
body[page=setup] .region-setup > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[page=setup] .region-setup > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 64px 48px;
  border-right: 1px solid var(--colour-neutral-50);
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
}
body[page=setup] .region-setup > div:first-child > div {
  width: 352px;
  max-width: 100%;
  margin: auto;
}
body[page=setup] .use-case-selector {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 56px;
  margin-bottom: 12px;
  padding: 0 24px;
  border: 1px solid var(--colour-input-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
}
body[page=setup] .use-case-selector * {
  pointer-events: none;
}
body[page=setup] .use-case-selector:hover, body[page=setup] button.use-case-selector.success.active, body[page=setup] button.use-case-selector.info.active, body[page=setup] button.use-case-selector.danger.active {
  border-color: var(--colour-primary);
}
body[page=setup] .heading-large {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
body[page=setup] .heading-desc {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 32px;
}
body[page=setup] .setup-step:not([data-val="1"]) {
  display: none;
  animation: fadeIn 0.16s;
}
body[page=setup] .account-setup-flowchart {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-image: var(--colour-canvas-builder-bg);
  background-size: 10px 10px;
}
body[page=setup] .account-setup-flowchart .preview-scroller {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 0.24s;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="1"] {
  top: 22vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="1"] .preview-step[data-val="1"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="2"] {
  top: -34vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="2"] .preview-step[data-val="1"],
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="2"] .preview-step[data-val="2"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="2"] .preview-step[data-val="1"] .preview-connector,
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="2"] .preview-step[data-val="2"] .preview-connector {
  display: block;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="3"] {
  top: -90vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="3"] .preview-step[data-val="2"],
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="3"] .preview-step[data-val="3"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="3"] .preview-step[data-val="2"] .preview-connector,
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="3"] .preview-step[data-val="3"] .preview-connector {
  display: block;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="4"] {
  top: -146vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="4"] .preview-step[data-val="3"],
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="4"] .preview-step[data-val="4"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="4"] .preview-step[data-val="3"] .preview-connector,
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="4"] .preview-step[data-val="4"] .preview-connector {
  display: block;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="5"] {
  top: -202vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="5"] .preview-step[data-val="4"],
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="5"] .preview-step[data-val="5"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="5"] .preview-step[data-val="4"] .preview-connector,
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="5"] .preview-step[data-val="5"] .preview-connector {
  display: block;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="6"] {
  top: -258vh;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="6"] .preview-step[data-val="5"],
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="6"] .preview-step[data-val="6"] {
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="6"] .preview-step[data-val="5"] .preview-connector,
body[page=setup] .account-setup-flowchart .preview-scroller[data-step="6"] .preview-step[data-val="6"] .preview-connector {
  display: block;
}
body[page=setup] .account-setup-flowchart .preview-step {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: calc(100% - 48px);
  height: 56vh;
  opacity: 0;
  transition: all 0.16s;
}
body[page=setup] .account-setup-flowchart .preview-step[data-val="2"] .preview-connector {
  top: -40px;
  left: 0;
  right: 0;
  margin: auto;
}
body[page=setup] .account-setup-flowchart .preview-step[data-val="3"] .preview-connector {
  top: -78px;
  left: 0;
  right: 0;
  margin: auto;
}
body[page=setup] .account-setup-flowchart .preview-step[data-val="4"] .preview-connector {
  top: -60px;
  left: 0;
  right: 0;
  margin: auto;
}
body[page=setup] .account-setup-flowchart .preview-connector {
  display: none;
  position: absolute;
  width: 68px;
  height: 110px;
  background-image: url("/image/spinner.png");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(75deg);
  pointer-events: none;
  animation: fadeIn 0.16s;
}
@media screen and (max-height: 800px) {
  body[page=setup] .account-setup-flowchart .preview-connector {
    display: none;
    opacity: 0;
  }
}
body[page=setup] .account-setup-flowchart .preview-connector-2 {
  background-image: url("/image/spinner-2.png");
  transform: rotate(0deg);
}
body[page=setup] .account-setup-flowchart .preview-connector-2 > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  background-color: var(--colour-system-surface);
}
body[page=setup] .account-setup-flowchart .widget-preview,
body[page=setup] .account-setup-flowchart .integration-preview,
body[page=setup] .account-setup-flowchart .invite-preview {
  overflow: hidden;
  position: relative;
  width: 720px;
  height: 400px;
  border: 4px solid var(--colour-neutral-100);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
}
body[page=setup] .account-setup-flowchart .widget-preview .address-bar,
body[page=setup] .account-setup-flowchart .integration-preview .address-bar,
body[page=setup] .account-setup-flowchart .invite-preview .address-bar {
  display: flex;
  align-items: center;
  justify-content: start;
  position: absolute;
  top: 8px;
  left: 16px;
  right: 16px;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background-color: var(--colour-neutral-50);
  color: var(--colour-neutral-600);
}
body[page=setup] .account-setup-flowchart .widget-preview .address-bar > img,
body[page=setup] .account-setup-flowchart .integration-preview .address-bar > img,
body[page=setup] .account-setup-flowchart .invite-preview .address-bar > img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
body[page=setup] .account-setup-flowchart .widget-preview:before,
body[page=setup] .account-setup-flowchart .integration-preview:before,
body[page=setup] .account-setup-flowchart .invite-preview:before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--colour-system-line);
}
body[page=setup] .account-setup-flowchart .widget-preview .widget-launcher,
body[page=setup] .account-setup-flowchart .integration-preview .widget-launcher,
body[page=setup] .account-setup-flowchart .invite-preview .widget-launcher {
  position: absolute;
  right: 32px;
  bottom: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  margin-bottom: -32px;
  border-radius: 8px 8px 0 0;
  background-color: var(--colour-feedback-600);
  color: var(--colour-system-text-inverse);
  transition: all 0.16s;
  font-weight: 500;
}
body[page=setup] .account-setup-flowchart .widget-preview .widget-launcher.widget-launcher-secondary,
body[page=setup] .account-setup-flowchart .integration-preview .widget-launcher.widget-launcher-secondary,
body[page=setup] .account-setup-flowchart .invite-preview .widget-launcher.widget-launcher-secondary {
  background-color: var(--colour-neutral-600);
}
body[page=setup] .account-setup-flowchart .widget-preview .widget-launcher.active,
body[page=setup] .account-setup-flowchart .integration-preview .widget-launcher.active,
body[page=setup] .account-setup-flowchart .invite-preview .widget-launcher.active {
  margin-bottom: 0;
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body.browser-body-full,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body.browser-body-full,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body.browser-body-full {
  padding: 16px;
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body.browser-body-split,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body.browser-body-split,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body.browser-body-split {
  display: grid;
  grid-template-columns: auto 200px;
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body.browser-body-split > div:first-child,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body.browser-body-split > div:first-child,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body.browser-body-split > div:first-child {
  padding: 16px;
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body.browser-body-split > div:last-child,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body.browser-body-split > div:last-child,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body.browser-body-split > div:last-child {
  padding: 16px;
  border-left: 1px solid var(--colour-system-line);
}
body[page=setup] .account-setup-flowchart .widget-preview .browser-body .task-status,
body[page=setup] .account-setup-flowchart .integration-preview .browser-body .task-status,
body[page=setup] .account-setup-flowchart .invite-preview .browser-body .task-status {
  margin-bottom: 12px;
  font-weight: 500;
}
body[page=setup] .account-setup-flowchart .kanban-preview {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  margin: auto;
  padding: 12px 0;
  white-space: nowrap;
}
body[page=setup] .account-setup-flowchart .kanban-preview > div {
  display: inline-block;
  width: 170px;
  height: 300px;
  padding: 8px;
  margin-right: 12px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  border: 1px solid var(--colour-neutral-50);
  vertical-align: top;
  color: var(--colour-system-text);
}
body[page=setup] .account-setup-flowchart .kanban-preview > div:last-child {
  margin-right: 0;
}
body[page=setup] .account-setup-flowchart .kanban-preview > div .kanban-status {
  padding: 0 4px 12px 4px;
  font-size: 13px;
  user-select: none;
}
body[page=setup] .account-setup-flowchart .kanban-preview .ui-draggable-dragging {
  z-index: 10;
  transform: rotate(5deg);
}
body[page=setup] .account-setup-flowchart .kanban-preview .ui-droppable-hover {
  position: relative;
  border-color: var(--colour-primary);
  background-color: var(--colour-primary-25);
}
body[page=setup] .account-setup-flowchart .example-placeholder {
  height: 12px;
  margin-bottom: 8px;
  background-color: var(--colour-neutral-50);
  border-radius: 8px;
}
body[page=setup] .account-setup-flowchart .channel-placeholder {
  height: 12px;
  margin-bottom: 8px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
  border-radius: 8px;
}
body[page=setup] .account-setup-flowchart .kanban-example {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--colour-system-line);
  font-weight: 500;
  background-color: var(--colour-neutral-10);
  cursor: move;
}
body[page=setup] .account-setup-flowchart .kanban-example i {
  margin-right: 4px;
  color: var(--colour-neutral-300);
  font-size: 12px;
}
body[page=setup] .account-setup-flowchart .notification-preview {
  position: relative;
  width: 720px;
}
body[page=setup] .account-setup-flowchart .email-preview {
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px auto;
  height: 400px;
  border: 4px solid var(--colour-neutral-100);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
}
body[page=setup] .account-setup-flowchart .email-preview > div:first-child {
  border-right: 1px solid var(--colour-system-line);
}
body[page=setup] .account-setup-flowchart .email-preview > div:last-child {
  padding: 16px;
}
body[page=setup] .account-setup-flowchart .email-preview .email-logo {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 48px;
  margin: 0 12px;
  font-family: 500;
  color: var(--colour-system-text);
}
body[page=setup] .account-setup-flowchart .email-preview .email-logo img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
body[page=setup] .account-setup-flowchart .email-preview .email-subject {
  display: grid;
  grid-template-columns: 32px auto;
  padding: 12px;
  font-weight: 500;
  border-top: 1px solid var(--colour-neutral-50);
  color: var(--colour-system-text);
}
body[page=setup] .account-setup-flowchart .email-preview .email-subject input, body[page=setup] .account-setup-flowchart .email-preview .email-subject label {
  pointer-events: none;
}
body[page=setup] .account-setup-flowchart .email-preview .email-subject.selected {
  background-color: var(--colour-neutral-25);
}
body[page=setup] .account-setup-flowchart .email-preview .email-subject.selected .example-placeholder {
  background-color: var(--colour-neutral-75);
}
body[page=setup] .account-setup-flowchart .email-preview .task-screenshot {
  height: 246px;
}
body[page=setup] .account-setup-flowchart .slack-preview,
body[page=setup] .account-setup-flowchart .teams-preview {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px auto;
  width: 720px;
  max-width: 100%;
  height: 400px;
  border: 4px solid var(--colour-neutral-100);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
  transform: translate(35px, 55px);
  opacity: 0;
  transition: all 0.16s;
}
body[page=setup] .account-setup-flowchart .slack-preview.selected,
body[page=setup] .account-setup-flowchart .teams-preview.selected {
  transform: translate(40px, 60px);
  opacity: 1;
}
body[page=setup] .account-setup-flowchart .slack-preview > div:first-child,
body[page=setup] .account-setup-flowchart .teams-preview > div:first-child {
  padding: 16px;
  border-right: 1px solid var(--colour-system-line);
  background-color: #3F0E40;
}
body[page=setup] .account-setup-flowchart .slack-preview > div:last-child,
body[page=setup] .account-setup-flowchart .teams-preview > div:last-child {
  padding: 16px;
}
body[page=setup] .account-setup-flowchart .slack-preview .channel-name,
body[page=setup] .account-setup-flowchart .teams-preview .channel-name {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--colour-system-text-inverse);
}
body[page=setup] .account-setup-flowchart .slack-preview .channel-name img,
body[page=setup] .account-setup-flowchart .teams-preview .channel-name img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
body[page=setup] .account-setup-flowchart .teams-preview > div:first-child {
  background-color: #464775;
}
body[page=setup] .account-setup-flowchart .invite-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}
body[page=setup] .account-setup-flowchart .widget-form {
  overflow: hidden;
  position: relative;
  width: 400px;
  margin: auto;
  border: 1px solid var(--colour-system-line);
  border-radius: 16px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 128px;
  padding: 32px 32px 24px 32px;
  background-color: var(--colour-feedback-600);
  color: var(--colour-system-text-inverse);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.16s;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-header svg {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 24px;
  height: 24px;
  fill: var(--colour-system-text-inverse);
}
body[page=setup] .account-setup-flowchart .widget-form .widget-body {
  position: relative;
  padding: 32px;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-body .example-placeholder {
  position: absolute;
  top: 32px;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-body .example-placeholder:nth-child(1) {
  top: 48px;
  left: 48px;
  right: 48px;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-body .example-placeholder:nth-child(2) {
  top: 72px;
  left: 48px;
  width: 40%;
}
body[page=setup] .account-setup-flowchart .widget-form textarea {
  height: 112px;
  margin-bottom: 12px;
  font-size: 14px;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}
body[page=setup] .account-setup-flowchart .widget-form .widget-tools > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0 0 32px 0;
  border: 1px solid var(--colour-neutral-50);
  border-radius: 8px;
  color: var(--colour-neutral);
}
body[page=setup] .account-setup-flowchart .widget-form .widget-tools > div i {
  margin-right: 8px;
}
body[page=setup] .account-setup-flowchart .user-preview {
  display: grid;
  grid-template-columns: 64px auto;
  margin-bottom: 24px;
}
body[page=setup] .account-setup-flowchart .task-title {
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--colour-system-text);
}
body[page=setup] .account-setup-flowchart .task-title-large {
  font-size: 16px;
}
body[page=setup] .account-setup-flowchart .task-screenshot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 178px;
  background-color: var(--colour-neutral-50);
  border-radius: 8px;
  color: var(--colour-neutral-200);
  font-size: 40px;
}
body[page=setup] .workflow-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--colour-neutral-50);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}
body[page=setup] .workflow-option.selected {
  border-color: var(--colour-primary-dark-invert);
}
body[page=setup] .integration-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid var(--colour-neutral-50);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  font-weight: 500;
  cursor: pointer;
}
body[page=setup] .integration-tool:hover, body[page=setup] button.integration-tool.success.active, body[page=setup] button.integration-tool.info.active, body[page=setup] button.integration-tool.danger.active, body[page=setup] .integration-tool.selected {
  border-color: var(--colour-primary-dark-invert);
}
body[page=setup] .integration-tool .theme-img, body[page=setup] .integration-tool .theme-img-block {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
body[page=setup] .integration-tool img {
  width: 16px;
  height: 16px;
}
body[page=setup] .notification-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border: 1px solid var(--colour-neutral-50);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
body[page=setup] .notification-tool:hover, body[page=setup] button.notification-tool.success.active, body[page=setup] button.notification-tool.info.active, body[page=setup] button.notification-tool.danger.active, body[page=setup] .notification-tool.selected {
  border-color: var(--colour-primary-dark-invert);
}
body[page=setup] .notification-tool img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
body[page=setup] .widget-colour-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 12px 12px 0;
  border-radius: 50%;
  cursor: pointer;
}
body[page=setup] .widget-colour-palette.selected:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--colour-system-text-inverse);
}
body[page=setup] .email-invite {
  display: grid;
  grid-template-columns: 32px auto;
  margin-bottom: 8px;
}
body[page=setup] .setup-progress {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: calc(50% - 48px);
  height: 6px;
  border-radius: 8px;
  background-color: var(--colour-neutral-50);
}
@media (max-width: 1200px) {
  body[page=setup] .setup-progress {
    width: calc(100% - 48px);
  }
}
body[page=setup] .setup-progress > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(to right, var(--colour-feedback-600) 0%, var(--colour-survey-600) 100%);
  transition: all 0.16s;
}

body[page=inbox] section {
  top: 56px;
}
body[page=inbox] .region-global-inbox {
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
}
body[page=inbox] .region-notification-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 380px;
  height: 56px;
  padding: 0 20px;
  background-color: var(--colour-system-surface);
  border-bottom: 1px solid var(--colour-system-line);
  border-right: 1px solid var(--colour-system-line);
}
body[page=inbox] .region-notification-filter label {
  color: var(--colour-neutral);
  font-size: 13px;
}
body[page=inbox] .region-notification-list {
  overflow-x: hidden;
  overflow-y: auto;
  top: 56px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 380px;
  padding-bottom: 120px;
  background-color: var(--colour-system-surface);
  border-right: 1px solid var(--colour-system-line);
}
body[page=inbox] .region-notification-list .empty-result {
  display: none;
  padding: 48px 24px;
  color: var(--colour-neutral);
  font-size: 13px;
  text-align: center;
}
body[page=inbox] .region-notification-list .loading-result {
  display: none;
  padding: 20px;
}
body[page=inbox] .region-notification-list .loading-result > div {
  margin-bottom: 16px;
}
body[page=inbox] .region-notification-list.loading .empty-result,
body[page=inbox] .region-notification-list.loading .inbox-notification {
  display: none;
  opacity: 0;
  pointer-events: none;
}
body[page=inbox] .region-notification-list.loading .loading-result {
  display: block;
}
body[page=inbox] .region-notification-body {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 380px;
  bottom: 0;
}
body[page=inbox] .region-notification-body:empty:not(.loader) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
body[page=inbox] .region-notification-body:empty:not(.loader):before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  content: "\f01c";
  color: var(--colour-neutral-300);
  font-size: 64px;
}
body[page=inbox] .region-notification-body:empty:not(.loader):after {
  content: attr(data-count);
  margin-top: 8px;
  color: var(--colour-neutral);
  font-weight: 500;
}
body[page=inbox] .survey-response-inbox-preview {
  width: 480px;
  max-width: 100%;
  margin: 48px auto;
}
body[page=inbox] .survey-response-inbox-preview .region-session-details {
  margin: 0 0 24px 0;
}
body[page=inbox] .survey-response-inbox-preview .region-session-details .session-data-panel {
  display: grid;
  grid-template-columns: 32px calc(100% - 32px);
  grid-gap: 8px;
}
body[page=inbox] .survey-response-inbox-preview .region-custom-data {
  word-break: break-all;
}
body[page=inbox] .survey-response-inbox-preview .region-custom-data .custom-data-panel .item-content {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-gap: 8px;
}
body[page=inbox] .survey-response-inbox-preview .region-custom-data .custom-data-panel .title {
  color: var(--colour-neutral);
  font-weight: 500;
}
body[page=inbox] .survey-response-inbox-preview .item-header {
  line-height: 24px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
body[page=inbox] .region-user-data {
  position: relative;
  margin-bottom: 24px;
}
body[page=inbox] .region-user-data .item-count {
  margin-left: 8px;
  font-weight: 500;
}
body[page=inbox] .region-user-data .item-content {
  font-size: 14px;
}
body[page=inbox] .region-user-data .item-content.empty,
body[page=inbox] .region-user-data .item-content > div.empty {
  color: var(--colour-neutral);
  font-style: italic;
}
body[page=inbox] .region-user-data .item-content:not(.empty) > div:not(.empty) {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-gap: 8px;
  margin-bottom: 12px;
}
body[page=inbox] .region-user-data .item-content:not(.empty) > div:not(.empty):last-child {
  margin-bottom: 0;
}
body[page=inbox] .region-user-data .item-content:not(.empty) .title {
  color: var(--colour-neutral);
  font-weight: 500;
  word-break: break-all;
}
body[page=inbox] .region-user-data .item-content:not(.empty) .value {
  word-break: break-all;
}
body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown {
  position: absolute;
  top: -4px;
  right: 0;
}
body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button {
  width: 32px;
  height: 32px;
  font-size: 24px;
  color: var(--colour-neutral);
  border-radius: 8px;
}
body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button:hover, body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.success.active, body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.info.active, body[page=inbox] .region-user-data .item-content:not(.empty) .value .user-edit-dropdown > button.danger.active {
  background-color: var(--colour-neutral-25);
  color: var(--colour-primary);
}
body[page=inbox] .system-notification {
  padding: 48px;
}

body[page=dashboard] .overview-header {
  width: 1120px;
  max-width: 100%;
  margin: auto auto 48px auto;
}
@media (max-width: 800px) {
  body[page=dashboard] .overview-header {
    display: none;
  }
}
body[page=dashboard] .overview-header > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 800px) {
  body[page=dashboard] aside {
    display: none;
  }
}
body[page=dashboard] aside h3 {
  line-height: 20px;
  margin-bottom: 12px;
}
body[page=dashboard] aside h3.main-title {
  line-height: 32px;
  margin-bottom: 16px;
  font-weight: 600;
}
body[page=dashboard] aside .widget-info,
body[page=dashboard] aside .survey-info {
  margin: 0px 0px 16px 16px;
  padding: 0;
  line-height: 24px;
  word-break: break-all;
}
body[page=dashboard] aside .widget-info li:not(:last-child),
body[page=dashboard] aside .survey-info li:not(:last-child) {
  margin-bottom: 4px;
}
body[page=dashboard] aside .widget-toggle {
  cursor: pointer;
}
body[page=dashboard] aside .status-indicator-live,
body[page=dashboard] aside .status-indicator-paused {
  display: block;
  float: left;
  width: 6px;
  height: 6px;
  margin: 4px 4px 0 0;
  border-radius: 50%;
}
body[page=dashboard] aside .status-indicator-live {
  background-color: var(--colour-success);
}
body[page=dashboard] aside .status-indicator-paused {
  background-color: var(--colour-warning);
}
body[page=dashboard] aside .try-extension-close {
  position: absolute;
  top: 4px;
  right: 4px;
}
body[page=dashboard] aside .slack-app-close {
  position: absolute;
  top: 4px;
  right: 4px;
}
body[page=dashboard] .schedule-info {
  position: relative;
  padding: 16px 16px 16px 42px;
  margin-bottom: 24px;
  border-radius: 8px;
  background-color: var(--colour-neutral-25);
  font-size: 13px;
  line-height: 20px;
}
body[page=dashboard] .schedule-info:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f017";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 16px;
  height: 16px;
  color: var(--colour-neutral-300);
  text-align: center;
}
body[page=dashboard] .schedule-info:empty {
  display: none;
}
body[page=dashboard] .project-title {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 8px;
}
body[page=dashboard] .project-title .project-name {
  max-width: 520px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=dashboard] .project-title .project-star {
  margin-left: 8px;
  font-size: 18px;
  cursor: pointer;
}
body[page=dashboard] .project-title .project-star[data-starred="1"] .fa-regular {
  display: none;
}
body[page=dashboard] .project-title .project-star[data-starred="0"] .fa-solid {
  display: none;
}
body[page=dashboard] .project-title .project-star .fa-solid {
  color: var(--colour-attention-600);
}
body[page=dashboard] .project-title .project-star .fa-regular {
  color: var(--colour-neutral-300);
}
body[page=dashboard] .project-info {
  display: flex;
  align-items: center;
  justify-content: start;
}
@media (max-width: 800px) {
  body[page=dashboard] .project-info {
    display: none;
  }
}
body[page=dashboard] .project-info .project-domain,
body[page=dashboard] .project-info .project-domain-add,
body[page=dashboard] .project-info .project-member {
  position: relative;
  margin-right: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-neutral);
  cursor: pointer;
}
body[page=dashboard] .project-info .project-domain:not(:last-child):after,
body[page=dashboard] .project-info .project-domain-add:not(:last-child):after,
body[page=dashboard] .project-info .project-member:not(:last-child):after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 14px;
  border-radius: 50%;
  background-color: var(--colour-neutral-300);
  pointer-events: none;
}
body[page=dashboard] .project-info .project-domain-add {
  color: var(--colour-warning);
}
body[page=dashboard] .project-info .project-domain-install-status {
  display: none;
  position: absolute;
  top: 100%;
  z-index: 10;
  min-width: 360px;
  max-width: 520px;
  padding: 16px 24px;
  margin-top: 8px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  color: var(--colour-system-text);
  font-weight: 400;
  cursor: default;
}
body[page=dashboard] .project-info .project-domain-install-status:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 8px;
}
body[page=dashboard] .project-info .project-domain-install-status .domain {
  margin-top: 12px;
}
body[page=dashboard] .project-info .project-member .user-img-24 {
  margin-right: -4px;
  background-color: var(--colour-system-surface);
}
body[page=dashboard] .project-info .project-member .user-more {
  margin-left: 12px;
  font-weight: 500;
}
body[page=dashboard] .project-info .project-member .user-invite {
  margin-left: 12px;
}
body[page=dashboard] .project-info .project-domain:hover .project-domain-install-status, body[page=dashboard] .project-info button.project-domain.success.active .project-domain-install-status, body[page=dashboard] .project-info button.project-domain.info.active .project-domain-install-status, body[page=dashboard] .project-info button.project-domain.danger.active .project-domain-install-status {
  display: block;
}
@media (max-width: 800px) {
  body[page=dashboard] #chart_rating .gradient-line-left:before {
    display: none;
  }
}
body[page=dashboard] .project-performance[data-mode=dashboard] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 48px;
  text-align: center;
}
body[page=dashboard] .project-performance[data-mode=dashboard] > div {
  padding: 24px;
}
body[page=dashboard] .region-feedback-type {
  position: relative;
}
body[page=dashboard] .region-feedback-type .feedback-widget-impressions {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 24px;
  color: var(--colour-neutral);
}
body[page=dashboard] .feedback-type-count > a {
  padding: 40px;
}
@media (max-width: 800px) {
  body[page=dashboard] .feedback-type-count > a {
    padding: 16px 24px;
  }
}
body[page=dashboard] .feedback-status-title {
  padding: 15px 30px;
  text-transform: uppercase;
  font-size: 12px;
}
body[page=dashboard] .feedback-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px 32px;
  border-top: 1px solid var(--colour-system-line);
  text-decoration: none;
}
body[page=dashboard] .feedback-status-row:first-child {
  border-top: none;
}
body[page=dashboard] .feedback-status-row > div:first-child {
  font-weight: 500;
}
body[page=dashboard] .feedback-status-row > div:last-child {
  display: flex;
  align-items: center;
}
body[page=dashboard] .feedback-status-row .total {
  width: 80px;
  text-align: right;
}
@media (max-width: 800px) {
  body[page=dashboard] .feedback-status-row .total {
    width: 40px;
    text-align: left;
  }
}
body[page=dashboard] .feedback-status-row .bar {
  height: 8px;
  margin: 0 12px;
  background-color: var(--colour-success);
  border-radius: 8px;
}
body[page=dashboard] .feedback-status-row .bar-danger {
  background-color: var(--colour-danger);
}
body[page=dashboard] .feedback-status-row:hover .bar, body[page=dashboard] button.feedback-status-row.success.active .bar, body[page=dashboard] button.feedback-status-row.info.active .bar, body[page=dashboard] button.feedback-status-row.danger.active .bar {
  background-color: #008d5e;
}
body[page=dashboard] .feedback-status-row:hover .bar-danger, body[page=dashboard] button.feedback-status-row.success.active .bar-danger, body[page=dashboard] button.feedback-status-row.info.active .bar-danger, body[page=dashboard] button.feedback-status-row.danger.active .bar-danger {
  background-color: #ff0d36;
}
@media (max-width: 800px) {
  body[page=dashboard] .feedback-status-row > div:first-child {
    margin-bottom: 8px;
  }
}
body[page=dashboard] .user-row:not(:first-child) {
  border-top: 1px solid var(--colour-system-line);
}
body[page=dashboard] .project-owner:not(:last-child) {
  margin-right: 24px;
}
body[page=dashboard] .project-owner:not(:last-child):after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 100%;
  margin-left: 8px;
  width: 1px;
  background-color: var(--colour-system-line);
}
body[page=dashboard] .widget-usage {
  margin-bottom: 16px;
  font-size: 14px;
}
body[page=dashboard] .config-widget {
  border-radius: 0 8px 8px 0;
  border-left: 1px solid var(--colour-system-line);
}
body[page=dashboard] .rating-container {
  position: relative;
  height: 160px;
  margin: 40px 50px;
}
@media (max-width: 800px) {
  body[page=dashboard] .rating-container {
    margin: 52px 30px 40px 30px;
  }
}
body[page=dashboard] .rating-container:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--colour-system-line);
}
body[page=dashboard] .rating-container:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: var(--colour-system-line);
}
body[page=dashboard] .rating-container .axis-y {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  margin-right: 10px;
  font-size: 12px;
}
body[page=dashboard] .rating-container .axis-y:before, body[page=dashboard] .rating-container .axis-y:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--colour-system-line);
}
body[page=dashboard] .rating-container .axis-y:after {
  top: 50%;
}
body[page=dashboard] .rating-container .axis-y .max {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 10px;
}
body[page=dashboard] .rating-container .axis-y .min {
  position: absolute;
  bottom: 0;
  right: 100%;
  margin-right: 10px;
}
body[page=dashboard] .rating-container .bar {
  position: relative;
  float: left;
  width: 6%;
  height: 100%;
  margin: 0 2.6%;
}
body[page=dashboard] .rating-container .bar:nth-child(2) {
  margin-left: 10.8%;
}
body[page=dashboard] .rating-container .bar:last-child {
  margin-right: 10.8%;
}
body[page=dashboard] .rating-container .bar .meteor {
  position: absolute;
  background-color: var(--colour-attention);
  bottom: 0;
  left: 0;
  right: 0;
}
body[page=dashboard] .rating-container .bar .meteor:hover, body[page=dashboard] .rating-container .bar button.meteor.success.active, body[page=dashboard] .rating-container .bar button.meteor.info.active, body[page=dashboard] .rating-container .bar button.meteor.danger.active {
  background-color: var(--colour-attention-700);
}
body[page=dashboard] .rating-container .bar .number {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 10px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
body[page=dashboard] .box .rating-icon, body[page=dashboard] .box-small .rating-icon, body[page=dashboard] .box-small-medium .rating-icon, body[page=dashboard] .box-small-large .rating-icon, body[page=dashboard] .box-medium .rating-icon, body[page=dashboard] .box-large .rating-icon, body[page=dashboard] .card .rating-icon,
body[page=dashboard] .box .feedback-type-icon,
body[page=dashboard] .box-small .feedback-type-icon,
body[page=dashboard] .box-small-medium .feedback-type-icon,
body[page=dashboard] .box-small-large .feedback-type-icon,
body[page=dashboard] .box-medium .feedback-type-icon,
body[page=dashboard] .box-large .feedback-type-icon,
body[page=dashboard] .card .feedback-type-icon {
  float: left;
  margin: 0 16px 0 0;
}
body[page=dashboard] .box .rating-icon svg, body[page=dashboard] .box-small .rating-icon svg, body[page=dashboard] .box-small-medium .rating-icon svg, body[page=dashboard] .box-small-large .rating-icon svg, body[page=dashboard] .box-medium .rating-icon svg, body[page=dashboard] .box-large .rating-icon svg, body[page=dashboard] .card .rating-icon svg,
body[page=dashboard] .box .feedback-type-icon svg,
body[page=dashboard] .box-small .feedback-type-icon svg,
body[page=dashboard] .box-small-medium .feedback-type-icon svg,
body[page=dashboard] .box-small-large .feedback-type-icon svg,
body[page=dashboard] .box-medium .feedback-type-icon svg,
body[page=dashboard] .box-large .feedback-type-icon svg,
body[page=dashboard] .card .feedback-type-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}
body[page=dashboard] .box .rating-icon + div, body[page=dashboard] .box-small .rating-icon + div, body[page=dashboard] .box-small-medium .rating-icon + div, body[page=dashboard] .box-small-large .rating-icon + div, body[page=dashboard] .box-medium .rating-icon + div, body[page=dashboard] .box-large .rating-icon + div, body[page=dashboard] .card .rating-icon + div,
body[page=dashboard] .box .feedback-type-icon + div,
body[page=dashboard] .box-small .feedback-type-icon + div,
body[page=dashboard] .box-small-medium .feedback-type-icon + div,
body[page=dashboard] .box-small-large .feedback-type-icon + div,
body[page=dashboard] .box-medium .feedback-type-icon + div,
body[page=dashboard] .box-large .feedback-type-icon + div,
body[page=dashboard] .card .feedback-type-icon + div {
  float: left;
}
body[page=dashboard] .box .rating-icon, body[page=dashboard] .box-small .rating-icon, body[page=dashboard] .box-small-medium .rating-icon, body[page=dashboard] .box-small-large .rating-icon, body[page=dashboard] .box-medium .rating-icon, body[page=dashboard] .box-large .rating-icon, body[page=dashboard] .card .rating-icon {
  margin-top: 4px;
}
body[page=dashboard] .box .rating-icon svg path, body[page=dashboard] .box-small .rating-icon svg path, body[page=dashboard] .box-small-medium .rating-icon svg path, body[page=dashboard] .box-small-large .rating-icon svg path, body[page=dashboard] .box-medium .rating-icon svg path, body[page=dashboard] .box-large .rating-icon svg path, body[page=dashboard] .card .rating-icon svg path {
  fill: var(--colour-attention);
}
@media (max-width: 800px) {
  body[page=dashboard] .box .feedback-type-icon, body[page=dashboard] .box-small .feedback-type-icon, body[page=dashboard] .box-small-medium .feedback-type-icon, body[page=dashboard] .box-small-large .feedback-type-icon, body[page=dashboard] .box-medium .feedback-type-icon, body[page=dashboard] .box-large .feedback-type-icon, body[page=dashboard] .card .feedback-type-icon {
    display: none;
  }
}
body[page=dashboard] .box .feedback-type-icon svg path, body[page=dashboard] .box-small .feedback-type-icon svg path, body[page=dashboard] .box-small-medium .feedback-type-icon svg path, body[page=dashboard] .box-small-large .feedback-type-icon svg path, body[page=dashboard] .box-medium .feedback-type-icon svg path, body[page=dashboard] .box-large .feedback-type-icon svg path, body[page=dashboard] .card .feedback-type-icon svg path {
  fill: var(--colour-neutral-400);
}
body[page=dashboard] .box .time-selector, body[page=dashboard] .box-small .time-selector, body[page=dashboard] .box-small-medium .time-selector, body[page=dashboard] .box-small-large .time-selector, body[page=dashboard] .box-medium .time-selector, body[page=dashboard] .box-large .time-selector, body[page=dashboard] .card .time-selector {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 12px;
}
body[page=dashboard] .box .pending-count, body[page=dashboard] .box-small .pending-count, body[page=dashboard] .box-small-medium .pending-count, body[page=dashboard] .box-small-large .pending-count, body[page=dashboard] .box-medium .pending-count, body[page=dashboard] .box-large .pending-count, body[page=dashboard] .card .pending-count {
  position: absolute;
  top: 11px;
  left: 100%;
  margin-left: 12px;
  white-space: nowrap;
  font-weight: 600;
}
@media (max-width: 800px) {
  body[page=dashboard] .box .pending-count, body[page=dashboard] .box-small .pending-count, body[page=dashboard] .box-small-medium .pending-count, body[page=dashboard] .box-small-large .pending-count, body[page=dashboard] .box-medium .pending-count, body[page=dashboard] .box-large .pending-count, body[page=dashboard] .card .pending-count {
    position: static;
    top: auto;
    left: auto;
    margin-left: 0;
  }
}
body[page=dashboard] .onboarding-block {
  position: relative;
  cursor: pointer;
}
body[page=dashboard] .onboarding-block:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--colour-system-surface-rgb), 0.6), var(--colour-system-surface));
}
@media (max-width: 800px) {
  body[page=dashboard] .onboarding-block:before {
    display: none;
  }
}
body[page=dashboard] .onboarding-block:after {
  content: "Pending widget installation...";
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 4px;
  z-index: 10;
  text-align: center;
  font-weight: 600;
  background-color: var(--colour-system-surface);
  transform: translate(-50%, -50%);
}
@media (max-width: 800px) {
  body[page=dashboard] .onboarding-block:after {
    display: none;
  }
}
body[page=dashboard] .widget-onboarding {
  position: fixed;
  z-index: 1000;
  top: 40px;
  left: 50%;
  width: 156px;
  height: 249px;
  margin-left: 120px;
  background: url("/image/spinner.png") no-repeat center center;
  background-size: contain;
  transform: scaleX(-1) scaleY(-1) rotate(-10deg);
  pointer-events: none;
}
@media (max-width: 800px) {
  body[page=dashboard] .widget-onboarding {
    display: none;
  }
}
body[page=dashboard] .survey-question-overview {
  display: grid;
  grid-template-columns: 48px auto;
}
body[page=dashboard] .survey-question-overview .question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=short], body[page=dashboard] .survey-question-overview .question-icon[data-type=long] {
  background-color: var(--colour-success-100);
  color: var(--colour-success-700);
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=short]:before, body[page=dashboard] .survey-question-overview .question-icon[data-type=long]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f4a7";
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=nps], body[page=dashboard] .survey-question-overview .question-icon[data-type=rating] {
  background-color: var(--colour-danger-100);
  color: var(--colour-danger-700);
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=nps]:before, body[page=dashboard] .survey-question-overview .question-icon[data-type=rating]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\e473";
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=dropdown], body[page=dashboard] .survey-question-overview .question-icon[data-type=multiple], body[page=dashboard] .survey-question-overview .question-icon[data-type=yesno] {
  background-color: var(--colour-dolphin-100);
  color: var(--colour-dolphin-700);
}
body[page=dashboard] .survey-question-overview .question-icon[data-type=dropdown]:before, body[page=dashboard] .survey-question-overview .question-icon[data-type=multiple]:before, body[page=dashboard] .survey-question-overview .question-icon[data-type=yesno]:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f14a";
}
body[page=dashboard] .survey-question-overview .question-type {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=dashboard] .survey-question-overview .question-label {
  font-size: 15px;
  font-weight: 500;
}
body[page=dashboard] .survey-question-overview .show-all,
body[page=dashboard] .survey-question-overview .view-all-responses {
  display: inline-block;
  margin-top: 24px;
  font-weight: 500;
}
body[page=dashboard] .survey-question-overview .question-chart {
  margin-top: 24px;
}
body[page=dashboard] .survey-question-overview .question-chart .question-chart-title {
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
}
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score {
  line-height: 32px;
  font-size: 24px;
  font-weight: 600;
}
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .helper {
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 400;
}
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-heart {
  color: var(--colour-danger);
}
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-star-sharp,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-thumbs-up,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-face-confounded,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-face-frown-slight,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-face-meh,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-face-smile,
body[page=dashboard] .survey-question-overview .question-chart .question-chart-score .fa-face-laugh-squint {
  color: var(--colour-attention);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-bar {
  overflow: hidden;
  margin: 32px 0 24px 0;
  border-radius: 4px;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-bar span {
  display: block;
  float: left;
  height: 40px;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-bar span:nth-child(1) {
  background-color: var(--colour-danger-600);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-bar span:nth-child(2) {
  background-color: var(--colour-attention-600);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-bar span:nth-child(3) {
  background-color: var(--colour-success-600);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 80%;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div {
  position: relative;
  padding: 0 0 0 24px;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div .nps-count-title {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div[data-type=detractor]:before {
  background-color: var(--colour-danger-600);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div[data-type=passive]:before {
  background-color: var(--colour-attention-600);
}
body[page=dashboard] .survey-question-overview .question-chart[data-type=nps] .nps-count > div[data-type=promoter]:before {
  background-color: var(--colour-success-600);
}
body[page=dashboard] .survey-question-overview .chart-rating {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-evenly;
  height: 160px;
  margin: 32px 0 24px 0;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=dashboard] .survey-question-overview .chart-rating .axis-y {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
body[page=dashboard] .survey-question-overview .chart-rating .axis-y > div {
  height: 25%;
  padding-top: 4px;
  border-top: 1px solid var(--colour-system-line);
  font-size: 11px;
  font-weight: 500;
  color: var(--colour-neutral);
}
body[page=dashboard] .survey-question-overview .chart-rating .bar {
  position: relative;
  width: 16px;
  background-color: var(--colour-attention);
  text-align: center;
}
body[page=dashboard] .survey-question-overview .chart-rating .bar > span {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  font-size: 13px;
}
body[page=dashboard] .survey-question-overview .chart-rating[data-type=heart] .bar {
  background-color: var(--colour-danger);
}
body[page=dashboard] .survey-question-overview .chart-rating[data-type=thumb] .bar {
  background-color: var(--colour-primary);
}
body[page=dashboard] .survey-question-overview .chart-rating[data-type=thumb] .bar:last-child {
  background-color: var(--colour-neutral-300);
}
body[page=dashboard] .survey-question-overview .chart-rating[data-type=number] .bar {
  background-color: var(--colour-primary);
}
body[page=dashboard] .survey-question-overview .chart-multiple .bar {
  overflow: hidden;
  height: 16px;
  margin: 8px 0 24px 0;
  border-radius: 8px;
  background-color: var(--colour-neutral-75);
}
body[page=dashboard] .survey-question-overview .chart-multiple .bar > div {
  height: 16px;
  background-color: var(--colour-primary);
}
body[page=dashboard] .survey-question-overview .percentage-text {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--colour-neutral-1000);
}
body[page=dashboard] .survey-question-overview .percentage-text .percentage {
  color: var(--colour-neutral-600);
}
body[page=dashboard] .survey-question-overview .chart-text .option {
  margin: 0 0 24px 0;
}
body[page=dashboard] .survey-question-overview .chart-text .option .answer {
  margin-bottom: 8px;
}
body[page=dashboard] .survey-question-overview .chart-text .option .date {
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=dashboard] .survey-question-overview .chart-text .hidden-options {
  display: none;
}
body[page=dashboard] .survey-question-overview .chart-text .hidden-options.show {
  display: block;
}
body[page=dashboard] .code-install {
  margin-bottom: 32px;
  padding-right: 160px;
  animation: fadeIn 0.1s;
}
@media (max-width: 800px) {
  body[page=dashboard] .code-install {
    transform: none;
    margin-bottom: 24px;
  }
}
body[page=dashboard] .code-install:empty {
  display: none;
}
body[page=dashboard] .code-install .actions {
  display: flex;
  align-items: center;
  justify-content: start;
  position: absolute;
  top: 10px;
  right: 16px;
}
body[page=dashboard] .code-install .actions a {
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
  text-decoration: none;
  color: var(--colour-dolphin-600);
  font-weight: 500;
}
body[page=dashboard] .code-install .actions .code-install-close {
  width: 32px;
  height: 32px;
  color: var(--colour-success-300);
  font-size: 16px;
  cursor: pointer;
}

body[page=feedback] #app section,
body[page=feedback_design] #app section {
  top: 112px;
}
body[page=feedback] .region-feedback-preview.loading-more:after,
body[page=feedback_design] .region-feedback-preview.loading-more:after {
  content: "Loading more...";
  position: absolute;
  width: 100%;
  padding: 24px 0 48px 0;
  text-align: center;
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 500;
}
body[page=feedback] .region-feedback-preview.loading-more-end:after,
body[page=feedback_design] .region-feedback-preview.loading-more-end:after {
  content: "All feedback is loaded";
}
body[page=feedback] .region-feedback-preview:empty.loading-more-end:after,
body[page=feedback_design] .region-feedback-preview:empty.loading-more-end:after {
  display: none;
}
body[page=feedback] .feedback-preview-container[viewtype=inbox],
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-list,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-list {
  top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 380px;
  background-color: var(--colour-system-surface);
  border-right: 1px solid var(--colour-system-line);
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-list,
  body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-list {
    right: 0;
    width: auto;
  }
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-pagination,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-pagination {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-preview,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-preview {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 8px 8px;
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-preview.loading-more:after,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-preview.loading-more:after {
  background-color: var(--colour-system-surface);
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-preview:empty:before,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-preview:empty:before {
  content: "Loading...";
  display: block;
  padding: 24px;
  color: var(--colour-neutral);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer {
  position: relative;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  margin-left: 380px;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer,
  body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer {
    display: none;
  }
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer:empty:before,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer:empty:before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--colour-neutral-50);
  font-size: 34px;
  color: var(--colour-neutral-400);
  text-align: center;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f0a5";
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer:empty:after,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .region-feedback-viewer:empty:after {
  content: "No feedback selected";
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  margin-top: 120px;
  text-align: center;
  font-size: 22px;
}
body[page=feedback] .feedback-preview-container[viewtype=inbox] .feedback-no-result,
body[page=feedback_design] .feedback-preview-container[viewtype=inbox] .feedback-no-result {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  padding: 32vh 32px 48px 32px;
  border-right: 1px solid var(--colour-system-line);
  border-radius: 0;
  background-color: var(--colour-system-surface);
}
body[page=feedback] .feedback-preview-container[viewtype=list],
body[page=feedback_design] .feedback-preview-container[viewtype=list] {
  max-width: 1024px;
  margin: 0 auto 32px auto;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=list],
  body[page=feedback_design] .feedback-preview-container[viewtype=list] {
    margin-top: 16px;
  }
}
body[page=feedback] .feedback-preview-container[viewtype=list] .region-feedback-list,
body[page=feedback_design] .feedback-preview-container[viewtype=list] .region-feedback-list {
  padding: 0;
}
body[page=feedback] .feedback-preview-container[viewtype=list] .region-pagination,
body[page=feedback_design] .feedback-preview-container[viewtype=list] .region-pagination {
  margin-bottom: 16px;
}
body[page=feedback] .feedback-preview-container[viewtype=list] .region-feedback-preview,
body[page=feedback_design] .feedback-preview-container[viewtype=list] .region-feedback-preview {
  position: relative;
}
body[page=feedback] .feedback-preview-container[viewtype=list] .region-feedback-preview:not(:empty),
body[page=feedback_design] .feedback-preview-container[viewtype=list] .region-feedback-preview:not(:empty) {
  padding-bottom: 60px;
}
body[page=feedback] .feedback-preview-container[viewtype=list] .region-feedback-preview:empty:not(.loading-more-end):before,
body[page=feedback_design] .feedback-preview-container[viewtype=list] .region-feedback-preview:empty:not(.loading-more-end):before {
  content: "Loading...";
  display: block;
  color: var(--colour-neutral);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid],
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] {
    margin: 16px 0 0 0;
  }
}
body[page=feedback] .feedback-preview-container[viewtype=grid] .region-pagination,
body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-pagination {
  margin: 0 16px 24px 16px;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-pagination,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-pagination {
    margin: 0 0 16px 0;
  }
}
body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
  position: relative;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview.loading-more:after,
body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview.loading-more:after {
  bottom: 0;
  padding: 12px 0 32px 0;
}
@media screen and (max-width: 2900px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 2560px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1920px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1680px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1400px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-preview-container[viewtype=grid] .region-feedback-preview,
  body[page=feedback_design] .feedback-preview-container[viewtype=grid] .region-feedback-preview {
    display: block;
    grid-template-columns: none;
  }
}
body[page=feedback] .region-pagination,
body[page=feedback_design] .region-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[page=feedback] .region-pagination .feedback-count,
body[page=feedback_design] .region-pagination .feedback-count {
  font-size: 13px;
}
body[page=feedback] .region-feedback-preview.loading,
body[page=feedback_design] .region-feedback-preview.loading {
  display: none !important;
}
body[page=feedback] .feedback-upload-dropdown,
body[page=feedback_design] .feedback-upload-dropdown {
  position: fixed;
  z-index: 300;
  top: 112px;
  right: 24px;
  width: 600px;
  max-width: 100%;
  padding: 16px 16px 24px 16px;
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  box-shadow: var(--shadow-2);
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown,
  body[page=feedback_design] .feedback-upload-dropdown {
    z-index: 400;
    top: 52px;
    left: 12px;
    right: 12px;
    width: auto;
    padding: 24px 16px;
    box-shadow: var(--shadow-2);
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video {
  float: left;
  width: 180px;
  position: relative;
  padding: 20px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-design,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 16px 0;
    text-align: left;
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2),
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2),
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2),
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2),
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2),
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2) {
  margin: 0 14px;
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):before,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):before,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):before,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):before,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):before,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 1px;
  background: var(--colour-system-line);
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):after,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):after,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):after,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):after,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):after,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -7px;
  width: 1px;
  background: var(--colour-system-line);
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2),
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2),
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2),
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2),
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2),
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2) {
    margin: 0 0 16px 0;
  }
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):before, body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):after,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):before,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):after,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):before,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):after,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):before,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:nth-child(2):after,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):before,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:nth-child(2):after,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):before,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:nth-child(2):after {
    display: none;
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design:hover, body[page=feedback] .feedback-upload-dropdown button.feedback-upload-design.success.active, body[page=feedback] .feedback-upload-dropdown button.feedback-upload-design.info.active, body[page=feedback] .feedback-upload-dropdown button.feedback-upload-design.danger.active,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf:hover,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-pdf.success.active,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-pdf.info.active,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-pdf.danger.active,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video:hover,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-video.success.active,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-video.info.active,
body[page=feedback] .feedback-upload-dropdown button.feedback-upload-video.danger.active,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design:hover,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-design.success.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-design.info.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-design.danger.active,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf:hover,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-pdf.success.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-pdf.info.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-pdf.danger.active,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video:hover,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-video.success.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-video.info.active,
body[page=feedback_design] .feedback-upload-dropdown button.feedback-upload-video.danger.active {
  background-color: rgba(96, 64, 255, 0.04);
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design i,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf i,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video i,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design i,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf i,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video i {
  color: var(--colour-neutral-300);
  font-size: 48px;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-design i,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf i,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video i,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design i,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf i,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video i {
    float: left;
    margin: 0 12px 0 16px;
    font-size: 24px;
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design .title,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf .title,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video .title,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design .title,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf .title,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video .title {
  margin: 12px 0 4px 0;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-design .title,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf .title,
  body[page=feedback] .feedback-upload-dropdown .feedback-upload-video .title,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design .title,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf .title,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video .title {
    margin: 0 0 4px 0;
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-upload-design .desc,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-pdf .desc,
body[page=feedback] .feedback-upload-dropdown .feedback-upload-video .desc,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-design .desc,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-pdf .desc,
body[page=feedback_design] .feedback-upload-dropdown .feedback-upload-video .desc {
  color: var(--colour-neutral);
  font-size: 13px;
}
body[page=feedback] .feedback-upload-dropdown .feedback-scrape,
body[page=feedback_design] .feedback-upload-dropdown .feedback-scrape {
  margin-top: 12px;
  text-align: center;
  color: var(--colour-neutral);
  font-size: 13px;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-upload-dropdown .feedback-scrape,
  body[page=feedback_design] .feedback-upload-dropdown .feedback-scrape {
    margin: 0 0 0 22px;
    text-align: left;
  }
}
body[page=feedback] .feedback-upload-dropdown .feedback-scrape a,
body[page=feedback_design] .feedback-upload-dropdown .feedback-scrape a {
  color: var(--colour-neutral);
}
body[page=feedback] .feedback-upload-dropdown .feedback-scrape a:hover,
body[page=feedback_design] .feedback-upload-dropdown .feedback-scrape a:hover {
  color: var(--colour-primary);
}
body[page=feedback] .region-feedback-filter-scroller,
body[page=feedback_design] .region-feedback-filter-scroller {
  display: flex;
  align-items: center;
  justify-content: start;
}
@media screen and (max-width: 1160px) {
  body[page=feedback] .region-feedback-filter-scroller .feedback-filters > div[data-type=user-property],
  body[page=feedback_design] .region-feedback-filter-scroller .feedback-filters > div[data-type=user-property] {
    display: none;
  }
}
body[page=feedback] .region-feedback-filters,
body[page=feedback_design] .region-feedback-filters {
  float: left;
}
@media (max-width: 800px) {
  body[page=feedback] .region-feedback-filters,
  body[page=feedback_design] .region-feedback-filters {
    display: none;
  }
}
body[page=feedback] .feedback-filters,
body[page=feedback_design] .feedback-filters {
  display: flex;
}
body[page=feedback] .feedback-filters > div,
body[page=feedback_design] .feedback-filters > div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 4px;
}
body[page=feedback] .feedback-filters .button-dropdown > button .label,
body[page=feedback_design] .feedback-filters .button-dropdown > button .label {
  float: left;
  line-height: 16px;
  font-weight: 500;
}
body[page=feedback] .feedback-filters .button-dropdown > button .count,
body[page=feedback_design] .feedback-filters .button-dropdown > button .count {
  float: left;
  margin-left: 4px;
  padding: 0 6px;
  line-height: 16px;
  border-radius: 8px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary);
  font-size: 11px;
  font-weight: 500;
}
body[page=feedback] .feedback-filters .button-dropdown > button .count:empty,
body[page=feedback_design] .feedback-filters .button-dropdown > button .count:empty {
  display: none;
}
body[page=feedback] .feedback-filters .region-user-properties,
body[page=feedback_design] .feedback-filters .region-user-properties {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}
body[page=feedback] .feedback-filters-clear,
body[page=feedback_design] .feedback-filters-clear {
  display: none;
  float: left;
  margin: 0 0 0 0;
}
body[page=feedback] .feedback-filters-clear:hover, body[page=feedback] button.feedback-filters-clear.success.active, body[page=feedback] button.feedback-filters-clear.info.active, body[page=feedback] button.feedback-filters-clear.danger.active,
body[page=feedback_design] .feedback-filters-clear:hover,
body[page=feedback_design] button.feedback-filters-clear.success.active,
body[page=feedback_design] button.feedback-filters-clear.info.active,
body[page=feedback_design] button.feedback-filters-clear.danger.active {
  text-decoration: none;
}
@media (max-width: 800px) {
  body[page=feedback] .feedback-filters-clear,
  body[page=feedback_design] .feedback-filters-clear {
    display: none;
  }
}
body[page=feedback] .region-feedback-filters-advanced,
body[page=feedback_design] .region-feedback-filters-advanced {
  position: relative;
  float: left;
}
@media (max-width: 800px) {
  body[page=feedback] .region-feedback-filters-advanced,
  body[page=feedback_design] .region-feedback-filters-advanced {
    display: none;
  }
}
body[page=feedback] .advanced-search-toggle .label,
body[page=feedback_design] .advanced-search-toggle .label {
  float: left;
  line-height: 16px;
  font-weight: 500;
}
body[page=feedback] .advanced-search-toggle .count,
body[page=feedback_design] .advanced-search-toggle .count {
  float: left;
  margin-left: 4px;
  padding: 0 6px;
  line-height: 16px;
  border-radius: 8px;
  color: var(--colour-system-text-inverse);
  background-color: var(--colour-primary);
  font-size: 11px;
  font-weight: 600;
}
body[page=feedback] .advanced-search-toggle .count:empty,
body[page=feedback_design] .advanced-search-toggle .count:empty {
  display: none;
}
body[page=feedback] .advanced-search-filters,
body[page=feedback_design] .advanced-search-filters {
  display: none;
  position: absolute;
  z-index: 250;
  top: 100%;
  right: 0;
  width: 640px;
  min-width: 400px;
  margin-top: 8px;
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}
body[page=feedback] .advanced-search-filters form div.row > span,
body[page=feedback_design] .advanced-search-filters form div.row > span {
  margin-bottom: 0;
}
body[page=feedback] .advanced-search-filters .filter-item,
body[page=feedback_design] .advanced-search-filters .filter-item {
  position: relative;
  width: 80%;
  height: 32px;
  margin: 8px 0 24px 0;
  border: 1px solid var(--colour-neutral-100);
  border-radius: 8px;
}
body[page=feedback] .advanced-search-filters .filter-item:not(:last-child):before,
body[page=feedback_design] .advanced-search-filters .filter-item:not(:last-child):before {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  width: 1px;
  height: 24px;
  background-color: var(--colour-system-line);
}
body[page=feedback] .advanced-search-filters .filter-item:not(:last-child):after,
body[page=feedback_design] .advanced-search-filters .filter-item:not(:last-child):after {
  content: "and";
  position: absolute;
  top: 100%;
  left: 24px;
  color: var(--colour-neutral);
  font-size: 12px;
  line-height: 24px;
}
body[page=feedback] .advanced-search-filters .filter-item .search-key,
body[page=feedback_design] .advanced-search-filters .filter-item .search-key {
  display: inline-block;
  line-height: 30px;
  padding: 0 12px;
  background-color: var(--colour-neutral-50);
  vertical-align: top;
  border-radius: 8px 0 0 8px;
}
body[page=feedback] .advanced-search-filters .filter-item .search-key .search-key-val,
body[page=feedback_design] .advanced-search-filters .filter-item .search-key .search-key-val {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 8px;
  max-width: 200px;
  vertical-align: top;
  font-weight: 600;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val {
  display: inline-block;
  height: 30px;
  vertical-align: top;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val input,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 12px;
  font-size: 14px;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown {
  max-width: 100%;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button {
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button:after,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f107";
  margin-left: 6px;
  color: var(--colour-neutral);
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button:hover, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.success.active, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.info.active, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.danger.active,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button:hover,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.success.active,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.info.active,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.danger.active {
  color: var(--colour-primary-dark-invert);
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button:hover:after, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.success.active:after, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.info.active:after, body[page=feedback] .advanced-search-filters .filter-item .search-val .button-dropdown > button.danger.active:after,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button:hover:after,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.success.active:after,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.info.active:after,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .button-dropdown > button.danger.active:after {
  color: var(--colour-primary-dark-invert);
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .number-input,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .number-input {
  height: 30px;
  border: none;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .number-input:focus-within,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .number-input:focus-within {
  box-shadow: none;
}
body[page=feedback] .advanced-search-filters .filter-item .search-val .number-input > button,
body[page=feedback_design] .advanced-search-filters .filter-item .search-val .number-input > button {
  height: 30px;
  border-left-color: var(--colour-system-line);
}
body[page=feedback] .advanced-search-filters .filter-item .search-del,
body[page=feedback_design] .advanced-search-filters .filter-item .search-del {
  position: absolute;
  left: 100%;
  top: 0;
}
body[page=feedback] .advanced-search-filters .filter-item[data-val=due_date] .search-val > div,
body[page=feedback_design] .advanced-search-filters .filter-item[data-val=due_date] .search-val > div {
  width: 100%;
  display: inline-flex;
  padding: 0 12px;
  height: 100%;
  align-items: center;
}
@media (max-width: 800px) {
  body[page=feedback] .advanced-search-filters,
  body[page=feedback_design] .advanced-search-filters {
    width: 90vw;
    min-width: 0;
  }
}
body[page=feedback] .upload-design,
body[page=feedback_design] .upload-design {
  margin-right: 24px;
}
body[page=feedback] .view-selector,
body[page=feedback_design] .view-selector {
  margin-right: 24px;
}
body[page=feedback] .view-selector .button-dropdown .icon,
body[page=feedback_design] .view-selector .button-dropdown .icon {
  display: none;
}
@media screen and (max-width: 1160px) {
  body[page=feedback] .view-selector,
  body[page=feedback_design] .view-selector {
    margin-right: 12px;
  }
  body[page=feedback] .view-selector .button-dropdown .text,
  body[page=feedback_design] .view-selector .button-dropdown .text {
    display: none;
  }
  body[page=feedback] .view-selector .button-dropdown .icon,
  body[page=feedback_design] .view-selector .button-dropdown .icon {
    display: block;
  }
}
body[page=feedback] .feedback-search-form,
body[page=feedback_design] .feedback-search-form {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  max-height: calc(100vh - 200px);
  background-color: var(--colour-system-surface-1);
}
body[page=feedback] .feedback-search-form .date-shortcut,
body[page=feedback_design] .feedback-search-form .date-shortcut {
  margin-right: 8px;
  color: var(--colour-neutral);
}
body[page=feedback] .feedback-search-form .date-shortcut:hover, body[page=feedback] .feedback-search-form button.date-shortcut.success.active, body[page=feedback] .feedback-search-form button.date-shortcut.info.active, body[page=feedback] .feedback-search-form button.date-shortcut.danger.active,
body[page=feedback_design] .feedback-search-form .date-shortcut:hover,
body[page=feedback_design] .feedback-search-form button.date-shortcut.success.active,
body[page=feedback_design] .feedback-search-form button.date-shortcut.info.active,
body[page=feedback_design] .feedback-search-form button.date-shortcut.danger.active {
  color: var(--colour-primary);
}
body[page=feedback] .feedback-search-form .date-shortcut:last-child,
body[page=feedback_design] .feedback-search-form .date-shortcut:last-child {
  margin-right: 0;
}
body[page=feedback] .feedback-search-form .portal-visible-select span,
body[page=feedback_design] .feedback-search-form .portal-visible-select span {
  display: inline-block;
  width: 28px;
}
body[page=feedback] .feedback-no-result .empty-adjust-search,
body[page=feedback_design] .feedback-no-result .empty-adjust-search {
  display: none;
}
body[page=feedback] .feedback-no-result .empty-upload-designs,
body[page=feedback_design] .feedback-no-result .empty-upload-designs {
  display: none;
}
body[page=feedback] .feedback-preview-container,
body[page=feedback_design] .feedback-preview-container {
  animation: fadeIn 0.1s linear;
}
body[page=feedback] .feedback-preview-container.feedback-open .feedback-preview-open,
body[page=feedback_design] .feedback-preview-container.feedback-open .feedback-preview-open {
  display: block;
}
body[page=feedback] .feedback-preview-container.feedback-open .feedback-preview-closed,
body[page=feedback_design] .feedback-preview-container.feedback-open .feedback-preview-closed {
  display: none;
}
body[page=feedback] .feedback-preview-container.feedback-closed .feedback-preview-open,
body[page=feedback_design] .feedback-preview-container.feedback-closed .feedback-preview-open {
  display: none;
}
body[page=feedback] .feedback-preview-container.feedback-closed .feedback-preview-closed,
body[page=feedback_design] .feedback-preview-container.feedback-closed .feedback-preview-closed {
  display: block;
}
body[page=feedback] .feedback-board-container,
body[page=feedback_design] .feedback-board-container {
  overflow: hidden;
  position: absolute;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 0 0 0;
}
body[page=feedback] .feedback-board-container > div,
body[page=feedback_design] .feedback-board-container > div {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
body[page=feedback] .feedback-board-container > div::-webkit-scrollbar,
body[page=feedback_design] .feedback-board-container > div::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
body[page=feedback] .feedback-board-name,
body[page=feedback_design] .feedback-board-name {
  display: flex;
  align-items: center;
  height: 64px;
}
body[page=feedback] .feedback-board-name h2,
body[page=feedback_design] .feedback-board-name h2 {
  margin: 0;
  font-size: 22px;
}
body[page=feedback] .feedback-board-name .region-sort-dropdown .dropdown-sort,
body[page=feedback_design] .feedback-board-name .region-sort-dropdown .dropdown-sort {
  max-height: unset;
}
body[page=feedback] .kanban-column-indicator,
body[page=feedback_design] .kanban-column-indicator {
  position: absolute;
  z-index: 100;
  bottom: 12px;
  right: 24px;
  height: 60px;
  padding: 0 6px;
  background-color: var(--colour-system-surface);
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: var(--shadow-3);
}
@media (max-width: 800px) {
  body[page=feedback] .kanban-column-indicator,
  body[page=feedback_design] .kanban-column-indicator {
    display: none !important;
  }
}
body[page=feedback] .kanban-column-indicator .scroller,
body[page=feedback_design] .kanban-column-indicator .scroller {
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  right: 8px;
}
body[page=feedback] .kanban-column-indicator .scroller span,
body[page=feedback_design] .kanban-column-indicator .scroller span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 0 2px var(--colour-primary-dark-invert);
  cursor: move;
}
:root[data-colour-scheme=light] body[page=feedback] .kanban-column-indicator .scroller span,
:root[data-colour-scheme=light] body[page=feedback_design] .kanban-column-indicator .scroller span {
  background-color: rgba(96, 64, 255, 0.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=feedback] .kanban-column-indicator .scroller span,
  :root:not([data-colour-scheme]) body[page=feedback_design] .kanban-column-indicator .scroller span {
    background-color: rgba(96, 64, 255, 0.1);
  }
}
:root[data-colour-scheme=dark] body[page=feedback] .kanban-column-indicator .scroller span,
:root[data-colour-scheme=dark] body[page=feedback_design] .kanban-column-indicator .scroller span {
  background-color: rgba(96, 128, 160, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=feedback] .kanban-column-indicator .scroller span,
  :root:not([data-colour-scheme]) body[page=feedback_design] .kanban-column-indicator .scroller span {
    background-color: rgba(96, 128, 160, 0.1);
  }
}
body[page=feedback] .kanban-column-indicator .column,
body[page=feedback_design] .kanban-column-indicator .column {
  display: inline-block;
  width: 16px;
  height: 44px;
  margin: 8px 2px;
  background-color: var(--colour-system-line);
  border-radius: 2px;
}

body[page=response] .action-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
  padding-right: 24px;
  text-align: right;
}
body[page=response] .region-responses {
  overflow: auto;
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
}
body[page=response] .response-action-bar {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 16px 24px;
}
body[page=response] .response-action-bar .response-count {
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=response] .response-action-bar .loading-state {
  display: none;
  color: var(--colour-neutral);
  font-size: 13px;
}
body[page=response] .survey-response-filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 800px) {
  body[page=response] .survey-response-filter-container {
    display: none;
  }
}
body[page=response] .survey-response-filter-container .survey-response-filters {
  display: flex;
  align-items: center;
  justify-content: start;
}
body[page=response] .survey-response-filter-container .region-user-properties, body[page=response] .survey-response-filter-container .region-question-condition-filter {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 0;
  margin-top: 10px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}
body[page=response] table tbody tr {
  cursor: pointer;
}
body[page=response] table tbody tr:hover {
  background-color: var(--colour-neutral-10);
}
body[page=response] table th {
  background-color: var(--colour-neutral-10);
}
body[page=response] table th, body[page=response] table td {
  padding: 16px;
}
body[page=response] table th.select, body[page=response] table th.select-all, body[page=response] table td.select, body[page=response] table td.select-all {
  padding-left: 24px;
  padding-right: 0;
}
body[page=response] table th a.user-id, body[page=response] table td a.user-id {
  font-size: 13px;
  color: var(--colour-neutral);
  text-decoration: none;
}
body[page=response] table th > div, body[page=response] table td > div {
  max-width: 224px;
  text-overflow: ellipsis;
  overflow: hidden;
}
body[page=response] table th > div > .tooltip, body[page=response] table td > div > .tooltip {
  display: inline-block;
  max-width: 100%;
}
body[page=response] table input[type=checkbox] + label {
  margin-right: 0;
  vertical-align: middle;
}
body[page=response] .region-pagination {
  padding: 24px 0;
}
body[page=response] .empty-state {
  padding: 48px 24px;
  margin: 0;
  border-bottom: 1px solid var(--colour-system-line);
  text-align: center;
  font-weight: 500;
}

body[page=member] {
  background-color: var(--colour-system-surface);
}
body[page=member] .search-launcher {
  position: relative;
  float: left;
  height: 32px;
  color: var(--colour-neutral-300);
}
@media (max-width: 800px) {
  body[page=member] .search-launcher {
    display: none;
  }
}
body[page=member] .search-launcher:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f002";
  position: absolute;
  top: 4px;
  left: 0;
  pointer-events: none;
}
body[page=member] .search-launcher:focus-within:before {
  color: var(--colour-primary);
}
body[page=member] .search-launcher input {
  width: 42px;
  height: 22px;
  padding-left: 20px;
  border: none;
  opacity: 0;
  font-size: 14px;
  cursor: pointer;
}
body[page=member] .search-launcher.active input {
  width: 160px;
  margin-right: 16px;
  opacity: 1;
  cursor: text;
}

body[page=member_restricted] .lock-icon {
  width: 52px;
  height: 52px;
  line-height: 52px;
  margin: auto auto 24px auto;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.2);
  color: var(--colour-neutral);
  font-size: 18px;
  text-align: center;
}

body[page=report] .region-chart-new {
  padding: 12px;
  margin-top: 24px;
  border-radius: 8px;
  cursor: pointer;
}
body[page=report] .region-chart-new:hover, body[page=report] button.region-chart-new.success.active, body[page=report] button.region-chart-new.info.active, body[page=report] button.region-chart-new.danger.active {
  background-color: var(--colour-neutral-25);
}
body[page=report] .chart-row {
  display: flex;
  justify-content: space-between;
  gap: 36px;
}
body[page=report] .chart-row:not(:last-child) {
  margin-bottom: 36px;
}
body[page=report] .chart-row .report-chart {
  flex: 1;
}
body[page=report] .chart-row:empty {
  display: none;
}
@media (max-width: 800px) {
  body[page=report] .chart-row:first-child {
    flex-wrap: wrap;
  }
  body[page=report] .chart-row:first-child .report-chart {
    flex: 0 0 calc(50% - 18px);
  }
  body[page=report] .chart-row:not(:first-child) {
    flex-direction: column;
  }
}
body[page=report] .chart-row-empty {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -36px;
  height: 36px;
}
body[page=report] .chart-row-empty.ui-droppable-hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  margin: auto;
  border-radius: 8px;
  background-color: var(--colour-primary-100);
}

.report-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) {
  .report-gallery {
    grid-template-columns: 1fr;
  }
}
.report-gallery .chart-thumbnail {
  position: relative;
  height: 180px;
  border-radius: 8px 8px 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  background-color: #FFFFFF;
}
.report-gallery .report-add {
  position: absolute;
  top: 12px;
  right: 12px;
}
.report-gallery .chart-content {
  padding: 16px;
}
.report-gallery .chart-title {
  font-weight: 600;
}
.report-gallery .chart-description {
  margin-top: 4px;
  color: var(--colour-neutral);
  list-style: 16px;
}
.report-gallery .ask-for-more {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.report-gallery .ask-for-more:hover, .report-gallery button.ask-for-more.success.active, .report-gallery button.ask-for-more.info.active, .report-gallery button.ask-for-more.danger.active {
  box-shadow: 0 0 0 1px var(--colour-primary);
}
.report-gallery .ask-for-more > div:first-child {
  font-size: 15px;
  font-weight: 600;
}
.report-gallery .ask-for-more > div:last-child {
  margin-top: 8px;
  color: var(--colour-neutral);
}

body[page=insights] .coming-soon {
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(var(--colour-neutral-50) 1px, transparent 1px), linear-gradient(to right, var(--colour-neutral-50) 1px, var(--colour-system-surface) 1px);
  background-size: 64px 64px;
  background-position: 50% 50%;
  text-align: center;
}
body[page=insights] .coming-soon:before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent, var(--colour-system-surface));
  pointer-events: none;
}
body[page=insights] .coming-soon:after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, var(--colour-system-surface) 0%, transparent 50%, var(--colour-system-surface) 100%);
  pointer-events: none;
}
body[page=insights] .coming-soon > * {
  position: relative;
  z-index: 10;
}
body[page=insights] .coming-soon > img {
  width: 700px;
  user-select: none;
}

body[page=referral] .referral-welcome {
  margin: 0 20px 20px 20px;
}
@media (max-width: 800px) {
  body[page=referral] .referral-welcome {
    margin-top: 20px;
    text-align: center;
  }
}
body[page=referral] .get-referral-link {
  float: right;
}
@media (max-width: 800px) {
  body[page=referral] .get-referral-link {
    float: none;
    margin-bottom: 24px;
  }
}
body[page=referral] .referral-credit-box {
  position: relative;
  padding: 50px 0 70px 0;
  margin: 0 20px;
  border-radius: 20px;
  background-color: var(--colour-system-surface-2);
  text-align: center;
}
@media (max-width: 800px) {
  body[page=referral] .referral-credit-box {
    padding: 30px 0;
    margin-bottom: 10px;
  }
}
body[page=referral] .referral-credit-box-primary {
  color: var(--colour-primary);
  border-color: var(--colour-primary);
}
body[page=referral] .referral-credit-box-primary .money .symbol,
body[page=referral] .referral-credit-box-primary .money .number {
  color: var(--colour-primary);
}
body[page=referral] .icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
  padding: 16px 0 0 0;
  text-align: center;
}
body[page=referral] .referral-credit-box-success .icon-box {
  background-color: rgba(0, 192, 128, 0.1);
  color: var(--colour-success);
}
body[page=referral] .referral-credit-box-secondary .icon-box {
  background-color: var(--colour-neutral-100);
  color: var(--colour-neutral-1000);
}
body[page=referral] .referral-credit-box-primary .icon-box {
  background-color: var(--colour-warning-100);
  color: var(--colour-warning);
}

body[page=branding] .branding-settings {
  margin-right: 440px;
}
@media (max-width: 1200px) {
  body[page=branding] .branding-settings {
    margin-right: 0;
  }
}
body[page=branding] .branding-settings .branding-logo-container {
  position: relative;
  display: inline-block;
  padding-right: 24px;
  margin-bottom: 8px;
}
body[page=branding] .branding-settings .branding-logo-container a {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: -10px 0 0 0;
}
body[page=branding] .branding-settings .branding-logo-container:hover a, body[page=branding] .branding-settings button.branding-logo-container.success.active a, body[page=branding] .branding-settings button.branding-logo-container.info.active a, body[page=branding] .branding-settings button.branding-logo-container.danger.active a {
  opacity: 1;
}
body[page=branding] .branding-settings .logo-preview-email {
  display: block;
  height: 28px;
}
body[page=branding] .branding-settings .logo-preview-app, body[page=branding] .branding-settings .logo-preview-app-dark {
  display: block;
  height: 28px;
}
body[page=branding] .branding-settings .logo-preview-favicon {
  display: block;
  width: 16px;
  height: 16px;
}
body[page=branding] .branding-settings .border-bottom {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(96, 128, 160, 0.4);
}
body[page=branding] .branding-settings .upload-logo {
  color: var(--colour-primary);
  text-decoration: none;
  font-size: 13px;
}
body[page=branding] .branding-settings .upload-logo:hover, body[page=branding] .branding-settings button.upload-logo.success.active, body[page=branding] .branding-settings button.upload-logo.info.active, body[page=branding] .branding-settings button.upload-logo.danger.active {
  text-decoration: underline;
}
body[page=branding] .branding-settings .feature-unlock {
  margin-left: 8px;
  cursor: pointer;
}
body[page=branding] .branding-settings .sender-email-confirm {
  display: none;
  margin-top: 4px;
  color: var(--colour-primary);
  font-size: 12px;
}
body[page=branding] .branding-settings .sender-email-confirm a {
  color: var(--colour-primary);
}
body[page=branding] .window-container {
  float: right;
  width: 400px;
}
@media (max-width: 1200px) {
  body[page=branding] .window-container {
    display: none;
  }
}
body[page=branding] .window-gmail {
  position: relative;
  border: 1px dashed var(--colour-neutral);
  background-color: var(--colour-system-surface);
  border-radius: 8px;
  pointer-events: none;
}
@media (max-width: 1200px) {
  body[page=branding] .window-gmail {
    display: none;
  }
}
body[page=branding] .window-gmail h4 {
  position: relative;
  display: block;
  height: 30px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=branding] .window-gmail h4 img {
  float: left;
  width: 12px;
  height: 12px;
  margin: 7px 6px 0 0;
}
body[page=branding] .window-gmail h4 span {
  position: absolute;
  top: 4px;
  left: 60px;
  bottom: 0;
  line-height: 26px;
  padding: 0 12px;
  text-align: center;
  border: 1px solid #CCCCCC;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: var(--colour-system-surface);
  font-size: 11px;
}
body[page=branding] .window-gmail h4:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 30px;
  background-color: var(--colour-system-surface-2);
  border-bottom: 1px solid var(--colour-system-line);
  border-radius: 8px 8px 0 0;
}
body[page=branding] .window-gmail h4:after {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF554E;
  box-shadow: 12px 0 0 0 #FFB429, 24px 0 0 0 #24C238;
}
body[page=branding] .window-gmail .placeholder-text {
  height: 10px;
  margin: 8px 12px;
  background-color: var(--colour-system-surface-2);
  border-radius: 2px;
}
body[page=branding] .window-gmail .placeholder-text-short {
  width: 50%;
  height: 10px;
  margin: 8px 12px;
  background-color: var(--colour-system-surface-2);
  border-radius: 2px;
}
body[page=branding] .window-gmail .placeholder-text-light {
  height: 10px;
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
  border-radius: 2px;
}
body[page=branding] .window-gmail .edit-highlight {
  position: relative;
}
body[page=branding] .window-gmail .edit-highlight:before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  margin: -8px 0 0 4px;
  width: 77.5px;
  height: 59px;
  background: url("/image/red_arrow.png");
  background-size: cover;
}
body[page=branding] .window-gmail .panel-email {
  padding: 20px;
  background-color: #FFFFFF;
}
body[page=branding] .window-gmail .panel-email .email-time {
  float: right;
  font-size: 13px;
  color: #5F6368;
}
body[page=branding] .window-gmail .panel-email .email-time i {
  margin-left: 8px;
}
body[page=branding] .window-gmail .panel-email .email-subject {
  margin-bottom: 4px;
  font-size: 13px;
  color: #5F6368;
}
body[page=branding] .window-gmail .panel-email .email-subject .sender-name {
  font-weight: 700;
  font-size: 16px;
  color: #202124;
}
body[page=branding] .window-gmail .panel-email .email-to {
  font-size: 13px;
  color: #5F6368;
}
body[page=branding] .window-gmail .panel-email .email-content {
  overflow: hidden;
  margin-top: 24px;
  background-color: #F0F3F9;
  color: #232E3A;
}
body[page=branding] .window-gmail .panel-email .email-content .container {
  margin: 24px;
  border: 1px solid #E6EBF0;
  background-color: #FFFFFF;
}
body[page=branding] .window-gmail .panel-email .email-content .container .logo-preview-email {
  display: block;
  height: 28px;
  margin: auto;
}
body[page=branding] .window-gmail .panel-email .email-content .container .header {
  padding: 25px;
  border-bottom: 1px solid #E6EBF0;
  text-align: center;
}
body[page=branding] .window-gmail .panel-email .email-content .container .body {
  padding: 25px;
  font-size: 13px;
}
body[page=branding] .window-gmail .panel-email .email-content .container .body a {
  color: var(--colour-primary);
}
body[page=branding] .window-gmail .panel-email .email-content .container .body p {
  font-weight: 600;
}
body[page=branding] .window-gmail .panel-email .email-content .container .footer {
  display: block;
  height: 20px;
  line-height: 20px;
  margin-bottom: 16px;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
}
body[page=branding] .window-gmail .panel-email .email-content .container .footer svg {
  width: auto;
  height: 12px;
  margin: 0 4px 0 0;
  vertical-align: top;
  transform: translateY(5px);
}
body[page=branding] .window-gmail .panel-email .email-content .container .footer svg path {
  fill: #93A9BE;
}
body[page=branding] .window-gmail .panel-email .email-content .container .footer > span:first-child {
  display: inline-block;
  margin: 0 8px 0 0;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  font-weight: normal;
  color: var(--colour-neutral-400);
}
body[page=branding] .window-gmail .panel-email .email-content .container .metadata {
  overflow: hidden;
  margin: 24px 0;
  line-height: 24px;
}
body[page=branding] .window-gmail .panel-email .email-content .container .metadata .grid-3 {
  font-weight: 600;
}
body[page=branding] .window-gmail .panel-email .email-content .container .metadata svg {
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
}
body[page=branding] .window-gmail .panel-email .email-content .container button.primary {
  box-shadow: none;
}
body[page=branding] .window-gmail .viewer-header {
  position: absolute;
  z-index: 10;
  top: 30px;
  left: 0;
  right: 0;
  height: 54px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  box-shadow: 0 2px 4px 0 rgba(96, 64, 255, 0.1);
}
body[page=branding] .window-gmail .viewer-header .logo-preview-app {
  float: left;
  height: 28px;
  margin: 13px;
}
body[page=branding] .window-gmail .viewer-header .feedback-id-preview {
  float: left;
  width: 80px;
  line-height: 54px;
}
body[page=branding] .window-gmail .viewer-header .feedback-id-preview .placeholder-text {
  margin: 22px 0 0 0;
}
body[page=branding] .window-gmail .viewer-body {
  position: relative;
  margin-top: 54px;
  padding: 20px;
  background-color: var(--colour-system-body);
}
body[page=branding] .window-gmail .viewer-body .viewer-screenshot {
  position: relative;
  height: 120px;
  margin-right: 140px;
}
body[page=branding] .window-gmail .viewer-body .viewer-screenshot:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface-2);
}
body[page=branding] .window-gmail .viewer-body .viewer-details {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 140px;
  padding: 20px 10px;
  border-left: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}

body[page=billing] .change-plan {
  margin-top: -8px;
}

body[page=connected_app] .region-app {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(3, 33.33%);
}
@media (max-width: 800px) {
  body[page=connected_app] .region-app {
    grid-template-columns: repeat(2, 50%);
  }
}
body[page=connected_app] .region-app:empty {
  display: none;
}
body[page=connected_app] .region-app:empty + .region-empty {
  display: block;
}
body[page=connected_app] .region-empty {
  display: none;
}

body[page=capture] {
  color: var(--colour-system-text);
  overflow: hidden;
}
body[page=capture] #app {
  min-height: 100vh;
}
body[page=capture] .region-main {
  position: absolute;
  top: 0;
  right: 400px;
  bottom: 0;
  left: 0;
}
body[page=capture] .region-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  border-left: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-2);
}
body[page=capture] #canvas_screenshot {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 44px;
  left: 0;
  padding: 40px;
  align-items: center;
}
body[page=capture] #canvas_screenshot > div {
  position: relative;
  margin: auto;
  box-shadow: var(--shadow-2);
}
body[page=capture] #canvas_screenshot .snap-cursor-hint {
  display: none;
  position: absolute;
  z-index: 2000;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  border-radius: 15px;
  font-size: 12px;
  background-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
  white-space: nowrap;
  pointer-events: none;
}
body[page=capture] #canvas_screenshot.obj-hover .snap-cursor-hint, body[page=capture] #canvas_screenshot.dragging .snap-cursor-hint {
  opacity: 0;
}
body[page=capture] #canvas_video {
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 40px;
  left: 40px;
}
body[page=capture] #screenshot {
  display: block;
  max-width: 100%;
  max-height: none;
  height: auto;
}
body[page=capture] #screenshot_invalid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 660px;
  height: 400px;
  padding: 32px;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: var(--colour-system-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
body[page=capture] #screenshot_invalid i {
  font-size: 80px;
  color: rgba(96, 128, 160, 0.8);
}
body[page=capture] #screenshot_invalid p {
  margin: 8px 0 0 0;
  font-size: 15px;
  line-height: 150%;
  color: var(--colour-neutral);
}
body[page=capture] #snap {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  cursor: crosshair;
}
body[page=capture] #snap[tooltype=square] {
  cursor: url("/image/cursor_square1x.png") 7 22, crosshair;
}
body[page=capture] #snap[tooltype=blackout] {
  cursor: url("/image/cursor_blackout1x.png") 7 22, crosshair;
}
body[page=capture] #snap[tooltype=draw] {
  cursor: url("/image/cursor_draw1x.png") 7 22, crosshair;
}
body[page=capture] #snap[tooltype=line] {
  cursor: url("/image/cursor_line1x.png") 7 22, crosshair;
}
body[page=capture] #snap[tooltype=arrow] {
  cursor: url("/image/cursor_arrow1x.png") 7 22, crosshair;
}
body[page=capture] #snap[tooltype=comment] {
  cursor: url("/image/cursor_comment1x.png") 7 22, crosshair;
}
body[page=capture] #snap[dpr="2.00"] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor2x.png") 2x) 8 8, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=square] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_square2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=blackout] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_blackout2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=draw] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_draw2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=line] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_line2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=arrow] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_arrow2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #snap[dpr="2.00"][tooltype=comment] {
  cursor: -webkit-image-set(url("/image/cursor1x.png") 1x, url("/image/cursor_comment2x.png") 2x) 8 17, crosshair;
}
body[page=capture] #annotation-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background-color: var(--colour-system-surface);
  border-top: 1px solid var(--colour-system-line);
  text-align: center;
}
body[page=capture] #annotation-tools .tool {
  display: inline-block;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
body[page=capture] #annotation-tools .tool:hover svg, body[page=capture] #annotation-tools button.tool.success.active svg, body[page=capture] #annotation-tools button.tool.info.active svg, body[page=capture] #annotation-tools button.tool.danger.active svg {
  fill: var(--colour-primary);
}
body[page=capture] #annotation-tools .tool.active {
  cursor: default;
  box-shadow: 0 2px 0 #6040FF inset;
}
body[page=capture] #annotation-tools .tool.active svg {
  fill: var(--colour-primary);
}
body[page=capture] #annotation-tools .tool svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 14px;
  fill: rgba(53, 76, 95, 0.8);
}
body[page=capture] #annotation-tools .colour {
  position: relative;
}
body[page=capture] #annotation-tools .colour span {
  display: block;
  width: 16px;
  height: 16px;
  margin: 14px;
  border-radius: 50%;
}
body[page=capture] #annotation-tools .colour:hover ul, body[page=capture] #annotation-tools button.colour.success.active ul, body[page=capture] #annotation-tools button.colour.info.active ul, body[page=capture] #annotation-tools button.colour.danger.active ul {
  display: block;
}
body[page=capture] #annotation-tools .colour ul {
  display: none;
  list-style: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 136px;
  margin: 0 0 8px -68px;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-1);
}
body[page=capture] #annotation-tools .colour ul:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
body[page=capture] #annotation-tools .colour ul li {
  float: left;
  width: 16px;
  height: 16px;
  margin: 4px;
  border-radius: 50%;
  transition: all 0.1s linear;
}
body[page=capture] #annotation-tools .colour ul li.white {
  border: 1px solid rgba(96, 128, 160, 0.3);
}
body[page=capture] #annotation-tools .colour ul li:hover {
  transform: scale(1.2);
}
body[page=capture] .header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=capture] .header .project-select {
  margin-right: 48px;
}
body[page=capture] .header .project-select .title {
  color: var(--colour-neutral);
  font-size: 12px;
}
body[page=capture] .header .project-select .project-name-single {
  height: 32px;
  line-height: 32px;
  font-weight: 700;
  font-size: 18px;
  color: var(--colour-system-text);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=capture] .header .project-select .button-dropdown {
  max-width: calc(100% - 44px);
}
body[page=capture] .header .reporter-profile {
  position: relative;
  float: right;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  cursor: pointer;
}
body[page=capture] .header .reporter-profile.reporter-profile-anon {
  cursor: default;
}
body[page=capture] .header .reporter-profile:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--colour-system-surface);
  background-color: var(--colour-success);
  border-radius: 50%;
}
body[page=capture] .header .reporter-profile img {
  display: block;
  border-radius: 50%;
}
body[page=capture] .header .reporter-profile > div {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  padding: 5px 10px;
  background-color: var(--colour-neutral-1000);
  color: var(--colour-system-text-inverse);
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  animation: fadeIn 0.1s;
  cursor: default;
  pointer-events: none;
}
body[page=capture] .header .reporter-profile > div:before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  border: 6px solid transparent;
  border-bottom-color: var(--colour-neutral-1000);
}
body[page=capture] .header .reporter-profile > div i {
  margin: 0 4px;
  font-size: 5px;
  color: var(--colour-success);
  vertical-align: middle;
}
body[page=capture] .header .reporter-profile:hover > div, body[page=capture] .header button.reporter-profile.success.active > div, body[page=capture] .header button.reporter-profile.info.active > div, body[page=capture] .header button.reporter-profile.danger.active > div {
  display: block;
}
body[page=capture] .header .loader-project {
  width: 40%;
  margin: 4px 0;
}
body[page=capture] .header .loader-profile {
  float: right;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-top: 2px;
}
body[page=capture] .main {
  overflow: auto;
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  bottom: 48px;
  padding: 32px;
  background: linear-gradient(var(--colour-system-surface) 30%, rgba(var(--colour-system-surface-rgb), 0)), linear-gradient(rgba(var(--colour-system-surface-rgb), 0), var(--colour-system-surface) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--colour-system-shadow-soft), transparent), radial-gradient(farthest-side at 50% 100%, var(--colour-system-shadow-soft), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--colour-system-surface);
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
body[page=capture] .powered-by {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
}
body[page=capture] .powered-by svg {
  width: 12px;
  height: 12px;
  margin: -1px 4px 0 8px;
  vertical-align: middle;
}
body[page=capture] .powered-by span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--colour-neutral);
}
body[page=capture] .powered-by span:last-child {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
body[page=capture] form.feedback .attachment-preview {
  position: relative;
}
body[page=capture] form.feedback .attachment-preview > img,
body[page=capture] form.feedback .attachment-preview > video {
  display: block;
  max-width: 100%;
  max-height: 48px;
  margin: 0 0 4px auto;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
body[page=capture] form.feedback .attachment-preview .file-name {
  margin: 0 0 0 auto;
  color: var(--colour-neutral);
  text-decoration: underline;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=capture] form.feedback .attachment-preview .file-name.file-name-single {
  margin-right: 14px;
}
body[page=capture] form.feedback .attachment-preview .attachment-remove {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: var(--colour-system-surface);
  border-radius: 50%;
  cursor: pointer;
}
body[page=capture] form.login {
  padding: 42px;
  color: var(--colour-system-text);
}
body[page=capture] form.login .logo {
  margin-bottom: 32px;
}
body[page=capture] form.login .login-error {
  display: none;
  position: relative;
  padding: 12px 12px 12px 32px;
  margin-bottom: 16px;
  background-color: var(--colour-banner-danger-bg);
  border-radius: 8px;
  animation: fadeIn 0.1s;
}
body[page=capture] form.login .login-error i {
  position: absolute;
  top: 14px;
  left: 12px;
  color: var(--colour-danger);
}
body[page=capture] form.login .join-us {
  margin-top: 24px;
  text-align: center;
}
body[page=capture] .screen-comment {
  position: absolute;
}
body[page=capture] .screen-comment > div {
  position: absolute;
  top: -17px;
  left: -17px;
  width: 34px;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
}
body[page=capture] .screen-comment > div > span {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--colour-primary);
  color: var(--colour-system-text-inverse);
  text-align: center;
}
body[page=capture] .screen-comment > div:hover > span {
  background-color: #2900f3;
}
body[page=capture] .screen-comment > div:before, body[page=capture] .screen-comment > div:after {
  content: "";
  position: absolute;
  background-color: var(--colour-primary);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
  animation: commentPulse 2s ease-in 1s infinite;
}
@media (max-width: 800px) {
  body[page=capture] .screen-comment > div:before, body[page=capture] .screen-comment > div:after {
    display: none;
  }
}
body[page=capture] .screen-comment > div:after {
  opacity: 0.3;
  animation: commentPulse 2s ease-in 1.5s infinite;
}
body[page=capture] .screen-comment > form {
  display: none;
  position: absolute;
  top: -17px;
  width: 280px;
  border-radius: 8px;
  background-color: var(--colour-system-surface);
  filter: drop-shadow(0 0 8px var(--colour-system-overlay));
}
body[page=capture] .screen-comment > form:before {
  content: "";
  position: absolute;
  top: 9px;
  border: 8px solid transparent;
}
body[page=capture] .screen-comment > form > div {
  overflow-x: hidden;
  overflow-y: auto;
  display: inline-block;
  width: 100%;
  max-height: 200px;
  min-height: 60px;
  margin: 0;
  padding: 12px;
  outline: none;
}
body[page=capture] .screen-comment > form > div:empty:before {
  content: "Enter your comment";
  color: var(--colour-system-text-placeholder);
  pointer-events: none;
}
body[page=capture] .screen-comment > form button.delete {
  float: right;
  color: var(--colour-neutral);
}
body[page=capture] .screen-comment > form button.delete:hover, body[page=capture] .screen-comment > form button.delete.success.active, body[page=capture] .screen-comment > form button.delete.info.active, body[page=capture] .screen-comment > form button.delete.danger.active {
  color: #FF4060;
}
body[page=capture] .screen-comment > form button.primary {
  float: right;
  margin: 0 6px 6px 0;
}
body[page=capture] .screen-comment > form > div:empty + button {
  opacity: 0.2;
  cursor: default;
}
body[page=capture] .screen-comment > form .close {
  position: absolute;
  z-index: 10;
  top: 6px;
  right: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.2);
}
body[page=capture] .screen-comment > form .close:hover, body[page=capture] .screen-comment > form button.close.success.active, body[page=capture] .screen-comment > form button.close.info.active, body[page=capture] .screen-comment > form button.close.danger.active {
  background-color: rgba(96, 128, 160, 0.3);
}
body[page=capture] .screen-comment > form .close svg {
  display: block;
  width: 5px;
  height: 5px;
  margin: 5px;
  fill: var(--colour-neutral-1000);
}
body[page=capture] .screen-comment.open {
  z-index: 50;
}
body[page=capture] .screen-comment.open form {
  display: block;
}
body[page=capture] .screen-comment[data-direction=right] > form {
  left: 100%;
  margin-left: 29px;
}
body[page=capture] .screen-comment[data-direction=right] > form:before {
  right: 100%;
  border-right-color: var(--colour-system-surface);
}
body[page=capture] .screen-comment[data-direction=left] > form {
  right: 100%;
  margin-right: 29px;
}
body[page=capture] .screen-comment[data-direction=left] > form:before {
  left: 100%;
  border-left-color: var(--colour-system-surface);
}

@keyframes commentPulse {
  50% {
    transform: scale(4);
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
body[page=portal] #app {
  min-height: 100vh;
}
body[page=portal] .not-found {
  position: absolute;
  top: 72px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body[page=portal] .not-found .icon {
  font-size: 44px;
}
body[page=portal] .not-found h2 {
  margin: 12px 0 12px 0;
  font-weight: 700;
}
body[page=portal] .not-found .back {
  margin: 24px 0 0 0;
}
body[page=portal] .init-placeholder {
  display: grid;
  grid-template-columns: 100px calc(100% - 100px);
  opacity: 0.6;
}
@media (max-width: 1072px) {
  body[page=portal] .init-placeholder {
    grid-template-columns: 48px calc(100% - 48px);
  }
}
body[page=portal] .init-placeholder .loader-placeholder-regular {
  width: 64px;
  height: 64px;
}
@media (max-width: 1072px) {
  body[page=portal] .init-placeholder .loader-placeholder-regular {
    width: 36px;
    height: 36px;
  }
}
body[page=portal] .header {
  position: relative;
  height: 72px;
  box-shadow: 0 1px 0 0 var(--colour-system-line);
}
body[page=portal] .header .logo {
  float: left;
  display: block;
  height: 72px;
  margin: 0 16px 0 42px;
}
@media (max-width: 1072px) {
  body[page=portal] .header .logo {
    margin-left: 24px;
  }
}
body[page=portal] .header .logo img,
body[page=portal] .header .logo svg {
  display: block;
  height: 28px;
  margin: 22px 0 0 0;
}
body[page=portal] .header .links {
  float: left;
  height: 32px;
  line-height: 32px;
  margin: 20px 0 0 0;
  text-align: center;
}
@media (max-width: 1072px) {
  body[page=portal] .header .links {
    display: none;
  }
}
body[page=portal] .header .links a {
  display: inline-block;
  margin-left: 24px;
  border-radius: 8px;
  color: var(--colour-neutral);
  text-decoration: none;
  font-weight: 500;
}
body[page=portal] .header .links a i {
  margin-right: 4px;
  transform: scale(0.8);
}
:root[data-colour-scheme=light] body[page=portal] .header .links a.active, :root[data-colour-scheme=light] body[page=portal] .header .links a:hover {
  color: var(--portal-theme);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] .header .links a.active, :root:not([data-colour-scheme]) body[page=portal] .header .links a:hover {
    color: var(--portal-theme);
  }
}
:root[data-colour-scheme=dark] body[page=portal] .header .links a.active, :root[data-colour-scheme=dark] body[page=portal] .header .links a:hover {
  color: var(--colour-system-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=portal] .header .links a.active, :root:not([data-colour-scheme]) body[page=portal] .header .links a:hover {
    color: var(--colour-system-text);
  }
}
body[page=portal] .header .menu-bar {
  display: none;
  position: absolute;
  width: 48px;
  height: 48px;
  line-height: 48px;
  top: 12px;
  right: 12px;
  text-align: center;
  border-radius: 8px;
  font-size: 20px;
  color: var(--colour-neutral);
  cursor: pointer;
}
@media (max-width: 1072px) {
  body[page=portal] .header .menu-bar {
    display: block;
  }
}
body[page=portal] .header .user-profile {
  position: relative;
  float: right;
  margin-right: 42px;
}
@media (max-width: 1072px) {
  body[page=portal] .header .user-profile {
    margin-right: 64px;
  }
}
body[page=portal] .header .user-profile .profile-dropdown {
  right: 0;
  width: 260px;
  padding: 24px 0 16px 0;
  margin-top: 12px;
  border-radius: 8px;
}
body[page=portal] .header .user-profile .profile-dropdown .photo-box {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 8px auto 0 auto;
}
body[page=portal] .header .user-profile .profile-dropdown .photo {
  width: 68px;
  height: 68px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: 1px solid var(--colour-system-line);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}
body[page=portal] .header .user-profile .profile-dropdown .photo input[type=file] {
  display: none;
}
body[page=portal] .header .user-profile .profile-dropdown .profile-details {
  padding: 16px 32px 24px 32px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=portal] .header .user-profile .profile-dropdown .profile-name {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=portal] .header .user-profile .profile-dropdown .profile-email {
  color: var(--colour-neutral);
  text-align: center;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[page=portal] .header .user-profile .profile-dropdown .profile-role {
  margin-top: 12px;
  text-align: center;
}
body[page=portal] .header .user-profile .profile-dropdown .profile-role:empty {
  display: none;
}
body[page=portal] .header .user-profile .profile-dropdown > a {
  display: block;
  padding: 0 32px;
  margin: 0 12px;
  line-height: 40px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}
:root[data-colour-scheme=light] body[page=portal] .header .user-profile .profile-dropdown > a:hover {
  color: var(--portal-theme);
  background-color: var(--portal-theme-bg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] .header .user-profile .profile-dropdown > a:hover {
    color: var(--portal-theme);
    background-color: var(--portal-theme-bg);
  }
}
:root[data-colour-scheme=dark] body[page=portal] .header .user-profile .profile-dropdown > a:hover {
  color: var(--colour-system-text);
  background-color: var(--colour-neutral-10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=portal] .header .user-profile .profile-dropdown > a:hover {
    color: var(--colour-system-text);
    background-color: var(--colour-neutral-10);
  }
}
body[page=portal] .header .user-profile .profile-dropdown > a i {
  margin-right: 8px;
}
body[page=portal] .header .user-profile .sign-in,
body[page=portal] .header .user-profile .sign-up {
  position: relative;
  display: inline-block;
  margin: 20px 0 0 0;
  line-height: 32px;
  color: var(--portal-theme);
  text-decoration: none;
}
body[page=portal] .header .user-profile .sign-in:after,
body[page=portal] .header .user-profile .sign-up:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  margin-bottom: 4px;
  background-color: var(--portal-theme);
  transition: all 0.1s;
  pointer-events: none;
}
body[page=portal] .header .user-profile .sign-in:hover:after, body[page=portal] .header .user-profile button.sign-in.success.active:after, body[page=portal] .header .user-profile button.sign-in.info.active:after, body[page=portal] .header .user-profile button.sign-in.danger.active:after,
body[page=portal] .header .user-profile .sign-up:hover:after,
body[page=portal] .header .user-profile button.sign-up.success.active:after,
body[page=portal] .header .user-profile button.sign-up.info.active:after,
body[page=portal] .header .user-profile button.sign-up.danger.active:after {
  width: 100%;
}
body[page=portal] .header .user-profile .sign-in-separator {
  margin: 0 6px;
  color: var(--colour-neutral);
}
body[page=portal] .header .user-profile .avatar {
  width: 36px;
  height: 36px;
  margin: 18px 0 0 0;
  border-radius: 50%;
}
body[page=portal] .header .user-profile .avatar:not(.avatar-static) {
  cursor: pointer;
}
body[page=portal] .header .user-profile .avatar:not(.avatar-static):hover, body[page=portal] .header .user-profile button.avatar.success.active:not(.avatar-static), body[page=portal] .header .user-profile button.avatar.info.active:not(.avatar-static), body[page=portal] .header .user-profile button.avatar.danger.active:not(.avatar-static) {
  box-shadow: 0 0 0 1px var(--portal-theme-o-5), 0 0 0 4px var(--portal-theme-o-2);
}
@media (max-width: 1072px) {
  body[page=portal] .header .user-profile .avatar {
    width: 30px;
    height: 30px;
    margin: 21px 0 0 0;
  }
}
body[page=portal] .header .user-profile .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--colour-system-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}
body[page=portal] .header .user-profile.open .avatar {
  box-shadow: 0 0 0 1px var(--portal-theme-o-5), 0 0 0 4px var(--portal-theme-o-2);
}
body[page=portal] .header .user-profile.open .profile-dropdown {
  display: block;
}
body[page=portal] .header .search {
  position: relative;
  float: right;
  width: 200px;
  height: 36px;
  margin: 18px 24px auto auto;
  transition: all 0.1s;
}
@media (max-width: 1072px) {
  body[page=portal] .header .search {
    display: none;
  }
}
body[page=portal] .header .search:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f002";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  line-height: 36px;
  color: var(--colour-neutral);
  pointer-events: none;
}
body[page=portal] .header .search:focus-within {
  width: 260px;
}
body[page=portal] .header .search input {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 32px 1px 40px;
  border: none;
  border-radius: 8px;
  background-color: rgba(96, 128, 160, 0.1);
  font-size: 14px;
}
:root[data-colour-scheme=light] body[page=portal] .header .search input:focus {
  box-shadow: 0 0 0 1px var(--portal-theme-o-5), 0 0 0 4px var(--portal-theme-o-2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] .header .search input:focus {
    box-shadow: 0 0 0 1px var(--portal-theme-o-5), 0 0 0 4px var(--portal-theme-o-2);
  }
}
:root[data-colour-scheme=dark] body[page=portal] .header .search input:focus {
  box-shadow: 0 0 0 1px var(--colour-input-border-hover);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=portal] .header .search input:focus {
    box-shadow: 0 0 0 1px var(--colour-input-border-hover);
  }
}
body[page=portal] .header .search .clear {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  color: var(--colour-neutral);
  cursor: pointer;
}
body[page=portal] .header .search .clear:hover, body[page=portal] .header .search button.clear.success.active, body[page=portal] .header .search button.clear.info.active, body[page=portal] .header .search button.clear.danger.active {
  color: var(--portal-theme);
}
body[page=portal] .nav-mobile {
  display: none;
  position: absolute;
  z-index: 100;
  top: 71px;
  left: 0;
  right: 0;
  padding: 12px 24px 24px 24px;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-3);
}
body[page=portal] .nav-mobile > a {
  display: block;
  height: 48px;
  line-height: 48px;
  padding: 0 12px;
  margin-bottom: 4px;
  text-decoration: none;
  color: var(--colour-neutral);
  font-weight: 500;
}
body[page=portal] .nav-mobile > a:last-child {
  margin-bottom: 0;
}
body[page=portal] .nav-mobile > a.active {
  background-color: var(--portal-theme-bg);
  color: var(--portal-theme);
  border-radius: 8px;
}
body[page=portal] .nav-mobile > a i {
  margin-right: 4px;
}
body[page=portal] .nav {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 72px;
  left: 0;
  bottom: 0;
  width: 360px;
  padding: 42px;
  box-shadow: 1px 0 0 0 var(--colour-system-line);
  scrollbar-color: rgba(96, 128, 160, 0.3);
}
body[page=portal] .nav::-webkit-scrollbar-thumb {
  background: rgba(96, 128, 160, 0.3);
}
body[page=portal] .nav:hover::-webkit-scrollbar-thumb, body[page=portal] button.nav.success.active::-webkit-scrollbar-thumb, body[page=portal] button.nav.info.active::-webkit-scrollbar-thumb, body[page=portal] button.nav.danger.active::-webkit-scrollbar-thumb {
  background: rgba(96, 128, 160, 0.5);
}
@media (max-width: 1072px) {
  body[page=portal] .nav {
    display: none;
  }
}
body[page=portal] .nav .section {
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px dashed var(--colour-system-line);
}
body[page=portal] .nav .section:last-child {
  padding-bottom: 0px;
  margin-bottom: 24px;
  border-bottom: none;
}
body[page=portal] .nav .section .title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
body[page=portal] .nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
body[page=portal] .nav ul li {
  position: relative;
  padding: 8px 8px 8px 28px;
  margin-bottom: 4px;
  line-height: 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}
body[page=portal] .nav ul li:last-child {
  margin-bottom: 0;
}
body[page=portal] .nav ul li:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f00c";
  display: block;
  position: absolute;
  top: 8px;
  right: 16px;
  color: var(--portal-theme);
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: all 0.06s;
}
body[page=portal] .nav ul li.disabled {
  cursor: text;
  color: var(--colour-system-text-placeholder);
}
:root[data-colour-scheme=light] body[page=portal] .nav ul li:hover:not(.disabled) {
  background-color: var(--portal-theme-bg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] .nav ul li:hover:not(.disabled) {
    background-color: var(--portal-theme-bg);
  }
}
:root[data-colour-scheme=dark] body[page=portal] .nav ul li:hover:not(.disabled) {
  background-color: var(--colour-neutral-10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=portal] .nav ul li:hover:not(.disabled) {
    background-color: var(--colour-neutral-10);
  }
}
body[page=portal] .nav ul li.active:after {
  opacity: 1;
  transform: scale(1);
}
body[page=portal] .nav ul li.active .category-count,
body[page=portal] .nav ul li.active .status-count {
  display: none;
}
body[page=portal] .nav ul li .icon-status {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 6px;
  height: 6px;
  margin: auto 12px auto 0;
  border-radius: 50%;
}
body[page=portal] .nav ul li .icon-category {
  position: absolute;
  left: 12px;
  width: 20px;
  color: var(--colour-neutral);
  font-size: 10px;
}
body[page=portal] .nav ul li .category-count,
body[page=portal] .nav ul li .status-count {
  float: right;
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  border: 1px solid var(--colour-system-line);
  border-radius: 20px;
  background-color: var(--colour-system-box-bg-dark-only);
  font-size: 12px;
}
body[page=portal] .nav ul li .category-count:empty,
body[page=portal] .nav ul li .status-count:empty {
  display: none;
}
body[page=portal] .main {
  overflow: auto;
  position: absolute;
  top: 72px;
  right: 0;
  bottom: 0;
  left: 360px;
}
@media (max-width: 1072px) {
  body[page=portal] .main {
    left: 0;
  }
}
body[page=portal] .main > div {
  width: 1072px;
  max-width: 100%;
  margin: auto;
  padding: 42px 24px;
}
@media (max-width: 1072px) {
  body[page=portal] .main > div {
    padding: 24px;
  }
}
body[page=portal] .main .region-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 32px 0;
  text-align: right;
}
body[page=portal] .main .feedback-loadmore,
body[page=portal] .main .announcement-loadmore {
  height: 48px;
  opacity: 0;
  pointer-events: none;
}
body[page=portal] .main .feedback-loadmore.active,
body[page=portal] .main .announcement-loadmore.active {
  opacity: 1;
}
body[page=portal] .main .feedback-empty {
  margin: 0;
}
body[page=portal] button.new-idea,
body[page=portal] button.new-idea:hover {
  background-color: var(--portal-theme);
}
body[page=portal] .filters .dropdown-select li {
  padding-right: 42px;
}
body[page=portal] .filters .dropdown-select li i {
  margin: 0 4px 0 0;
  color: var(--colour-neutral-300);
}
body[page=portal] .filters .badge-btn {
  margin-left: 24px;
}
body[page=portal] .powered-by {
  position: absolute;
  width: 360px;
  left: 0;
  bottom: 0;
  height: 42px;
  line-height: 42px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  user-select: none;
  background-color: var(--colour-system-surface);
}
@media (max-width: 1072px) {
  body[page=portal] .powered-by {
    display: none;
  }
}
body[page=portal] .powered-by svg {
  width: 12px;
  height: 12px;
  margin: 11px 4px 0 0;
  vertical-align: top;
  transform: translateY(4px);
}
body[page=portal] .powered-by svg path:first-child {
  fill: var(--colour-neutral-500);
}
body[page=portal] .powered-by svg path:last-child {
  fill: var(--colour-neutral-400);
}
body[page=portal] .powered-by > a {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
body[page=portal] .powered-by > a > span:first-child {
  display: inline-block;
  margin: 0 8px 0 0;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  font-weight: normal;
  color: var(--colour-neutral-400);
}
body[page=portal] .powered-by > a > span:last-child {
  display: inline-block;
  font-weight: 700;
  font-size: 10px;
  font-family: "Inter", sans-serif;
  color: var(--colour-neutral-500);
  text-transform: uppercase;
  vertical-align: baseline;
}
body[page=portal] .powered-by > a:hover > span:first-child {
  color: var(--colour-neutral-500);
}
body[page=portal] .powered-by > a:hover > span:last-child {
  color: var(--colour-neutral-600);
}
body[page=portal] .powered-by > a:hover path {
  fill: var(--colour-primary);
}
body[page=portal] .not-found .powered-by {
  right: 0;
  bottom: 12px;
}
body[page=portal] .roadmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  position: absolute;
  top: 72px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 42px;
}
@media (max-width: 1072px) {
  body[page=portal] .roadmap {
    padding: 24px;
  }
}
body[page=portal] .region-columns {
  overflow: auto;
  height: 100%;
  white-space: nowrap;
}
body[page=portal][data-embed=widget] .menu-bar {
  display: none;
}
body[page=portal][data-embed=widget] .header {
  display: none;
  background-color: var(--portal-theme);
}
body[page=portal][data-embed=widget] .header .links a {
  margin-left: 12px;
  padding: 0 12px;
  font-weight: 600;
  color: var(--colour-system-text-inverse);
}
body[page=portal][data-embed=widget] .header .links a:first-child {
  margin-left: 24px;
}
body[page=portal][data-embed=widget] .header .links a.active, body[page=portal][data-embed=widget] .header .links a:hover {
  background-color: rgba(var(--colour-system-surface-rgb), 0.1);
}
@media (max-width: 1072px) {
  body[page=portal][data-embed=widget] .header .links {
    display: block;
  }
}
body[page=portal][data-embed=widget] .header .user-profile {
  margin-right: 24px;
}
body[page=portal][data-embed=widget] .header .menu-bar {
  left: 12px;
  right: auto;
}
body[page=portal][data-embed=widget] .main,
body[page=portal][data-embed=widget] .roadmap {
  top: 0;
}
body[page=portal][data-embed=widget] .main {
  top: 48px;
}
body[page=portal][data-embed=widget] .main > div {
  padding-top: 16px;
}
body[page=portal][data-embed=widget] .main .region-actions {
  display: block;
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 16px 0;
  margin: 0;
  text-align: center;
}
body[page=portal][data-embed=widget] .main .region-actions.region-actions-gradient {
  background: linear-gradient(180deg, transparent, var(--colour-system-surface));
}
body[page=portal][data-embed=widget] .main .region-actions .filters {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 16px 24px 0 24px;
  text-align: left;
}
body[page=portal][data-embed=widget] .main .region-actions .filters:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 16px;
  background: linear-gradient(0deg, transparent, var(--colour-system-surface));
  pointer-events: none;
}
body[page=portal][data-embed=widget] .main .region-actions .filters .dropdown-filter-portal {
  max-height: 280px;
}
body[page=portal][data-embed=widget] .main .region-actions .filters .selected-count {
  margin-left: 4px;
  font-size: 10px;
  background-color: var(--portal-theme);
  color: var(--colour-system-text-inverse);
  border-radius: 16px;
  padding: 2px 6px;
}
body[page=portal][data-embed=widget] .roadmap {
  gap: 0;
  padding: 16px 0 16px 24px;
}
body[page=portal][data-embed=widget] .roadmap .region-actions {
  padding-right: 24px;
}
body[page=portal][data-embed=widget] .region-actions {
  margin-bottom: 20px;
}
body[page=portal][data-embed=widget] button.new-idea {
  min-width: 116px;
  box-shadow: 0 0 20px rgba(96, 128, 160, 0.2), 0 0 80px rgba(96, 128, 160, 0.4);
}
body[page=portal][data-embed=widget] .search-result-empty {
  background-color: transparent;
}
body[page=portal][data-embed=widget] .search-result-empty h1 {
  margin: 0;
  font-size: 15px;
}
body[page=portal][data-embed=widget] .search-result-empty p {
  display: none;
}
body[page=portal][data-embed=widget] .back-to-top {
  display: none;
}
body[page=portal] form input:focus,
body[page=portal] form select:focus {
  border-color: var(--portal-theme);
}
body[page=portal] form span.helper.focus {
  color: var(--portal-theme);
}
:root[data-colour-scheme=light] body[page=portal] button.dropdown-select:hover, :root[data-colour-scheme=light] body[page=portal] button.dropdown-select.success.active, :root[data-colour-scheme=light] body[page=portal] button.dropdown-select.info.active, :root[data-colour-scheme=light] body[page=portal] button.dropdown-select.danger.active {
  border-color: var(--portal-theme) !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] button.dropdown-select:hover, :root:not([data-colour-scheme]) body[page=portal] button.dropdown-select.success.active, :root:not([data-colour-scheme]) body[page=portal] button.dropdown-select.info.active, :root:not([data-colour-scheme]) body[page=portal] button.dropdown-select.danger.active {
    border-color: var(--portal-theme) !important;
  }
}
:root[data-colour-scheme=light] body[page=portal] button.dropdown-select:focus {
  border-color: var(--portal-theme) !important;
  box-shadow: 0 0 0 4px var(--portal-theme-bg-1) !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] button.dropdown-select:focus {
    border-color: var(--portal-theme) !important;
    box-shadow: 0 0 0 4px var(--portal-theme-bg-1) !important;
  }
}
body[page=portal] button.primary,
body[page=portal] button.primary:hover {
  background-color: var(--portal-theme);
}
body[page=portal] button.primary-invert,
body[page=portal] button.primary-invert:hover {
  color: var(--portal-theme);
  border-color: var(--portal-theme-o-4);
  background-color: transparent;
}
body[page=portal] button.text:hover, body[page=portal] button.text.success.active, body[page=portal] button.text.info.active, body[page=portal] button.text.danger.active {
  color: var(--portal-theme) !important;
}
body[page=portal] .badge-primary-invert {
  color: var(--portal-theme);
  border-color: var(--portal-theme-o-8);
  background-color: var(--portal-theme-bg);
}
body[page=portal] .badge-primary-invert button {
  color: var(--portal-theme);
}
body[page=portal] .badge-primary-invert:after {
  background-color: var(--portal-theme-o-1);
}
body[page=portal] .badge-primary-invert .btn {
  color: var(--portal-theme-o-8);
}
:root[data-colour-scheme=light] body[page=portal] ul.dropdown-select > li.selected:before {
  color: var(--portal-theme) !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=portal] ul.dropdown-select > li.selected:before {
    color: var(--portal-theme) !important;
  }
}
:root[data-colour-scheme=dark] body[page=portal] ul.dropdown-select > li.selected:before {
  color: var(--colour-system-text) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=portal] ul.dropdown-select > li.selected:before {
    color: var(--colour-system-text) !important;
  }
}
body[page=portal] .portal-sign-in-modal div[data-step="2"] {
  display: none;
  width: 100%;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper {
  margin-top: 32px;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .code-container {
  display: flex;
  justify-content: center;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .success-code,
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .code-error-msg {
  display: none;
  padding: 12px;
  margin-top: 12px;
  background-color: rgba(255, 64, 96, 0.1);
  border-radius: 8px;
  animation: fadeIn 0.1s;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .success-code i,
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .code-error-msg i {
  color: #FF4060;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .success-code {
  background-color: rgba(0, 192, 128, 0.1);
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .success-code i {
  color: var(--colour-success);
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .code-resend {
  margin-top: 24px;
  font-size: 12px;
  text-align: center;
}
body[page=portal] .portal-sign-in-modal .email-confirmation .code-wrapper .confirm-code-loader {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 64px;
}
body[page=portal] .back-to-top {
  position: fixed;
  right: 48px;
  bottom: 48px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all ease 0.2s;
  pointer-events: none;
}
body[page=portal] .back-to-top.active {
  opacity: 1;
  pointer-events: auto;
}
body[page=portal] button.dropdown-select.select-category {
  padding-top: 8px;
}
body[page=portal] button.dropdown-select.select-category:before {
  display: none;
}
body[page=portal] button.dropdown-select.select-category a.category-add {
  color: var(--portal-theme);
}

.portal-settings .drag-placeholder .drag-handle {
  opacity: 0;
}
.portal-settings .drag-placeholder .drag-placeholder-highlight {
  border-color: var(--colour-primary);
}
.portal-settings .drag-placeholder .drag-placeholder-highlight > * {
  opacity: 0;
}
.portal-settings .region-portal-status {
  box-shadow: 0 0 0 white;
}
.portal-settings .region-portal-status-unassigned {
  padding: 0 16px 12px 16px;
}
.portal-settings .region-portal-status-unassigned:empty {
  display: none;
}
.portal-settings .portal-status {
  position: relative;
  margin-bottom: 12px;
  font-weight: 500;
}
.portal-settings .portal-status.ui-droppable-hover > div {
  border-color: var(--colour-primary);
}
.portal-settings .portal-status > div {
  margin-left: 16px;
  padding: 12px;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-neutral-10);
  border-radius: 8px;
}
.portal-settings .portal-status .status-name {
  position: relative;
  display: block;
  margin-right: 80px;
}
.portal-settings .portal-status .workflow-names:not(:empty) {
  margin-top: 8px;
}
.portal-settings .portal-status .drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 16px;
  cursor: move;
}
.portal-settings .portal-status .drag-handle:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: var(--colour-neutral);
  box-shadow: 0 4px 0 0 var(--colour-neutral), 0 8px 0 0 var(--colour-neutral), 0 12px 0 0 var(--colour-neutral), 4px 0 0 0 var(--colour-neutral), 4px 4px 0 0 var(--colour-neutral), 4px 8px 0 0 var(--colour-neutral), 4px 12px 0 0 var(--colour-neutral);
}
.portal-settings .portal-status .drag-handle:hover:before, .portal-settings .portal-status button.drag-handle.success.active:before, .portal-settings .portal-status button.drag-handle.info.active:before, .portal-settings .portal-status button.drag-handle.danger.active:before {
  background-color: var(--colour-primary);
  box-shadow: 0 4px 0 0 #6040FF, 0 8px 0 0 #6040FF, 0 12px 0 0 #6040FF, 4px 0 0 0 #6040FF, 4px 4px 0 0 #6040FF, 4px 8px 0 0 #6040FF, 4px 12px 0 0 var(--colour-primary);
}
.portal-settings .portal-status .colour-edit {
  position: absolute;
  top: 16px;
  right: 48px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
.portal-settings .portal-status .colour-edit .colour-indicator {
  margin-top: 0;
  width: 16px;
  height: 16px;
}
.portal-settings .portal-status .colour-edit input {
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  padding: 0;
  margin-top: 4px;
  pointer-events: none;
}
.portal-settings .portal-status .button-dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--colour-neutral);
}
.portal-settings .workflow-name {
  z-index: 10;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 4px 4px 0 0;
  border: 1px solid var(--colour-system-line);
  font-size: 10px;
  cursor: move;
}
.portal-settings .portal-status-add {
  display: inline-block;
  margin-top: 8px;
}
.portal-settings .logo-preview,
.portal-settings .logo-dark-preview,
.portal-settings .favicon-preview {
  position: relative;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.portal-settings .logo-preview img,
.portal-settings .logo-dark-preview img,
.portal-settings .favicon-preview img {
  vertical-align: top;
  cursor: pointer;
}
.portal-settings .logo-preview .delete,
.portal-settings .logo-dark-preview .delete,
.portal-settings .favicon-preview .delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  text-align: center;
  font-size: 10px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}
.portal-settings .logo-preview img,
.portal-settings .logo-dark-preview img {
  height: 28px;
}
.portal-settings .favicon-preview img {
  width: 28px;
  height: 28px;
}
.portal-settings .logo-placeholder,
.portal-settings .logo-dark-placeholder {
  width: 140px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  background-color: var(--colour-neutral-100);
  text-align: center;
  color: var(--colour-neutral);
  cursor: pointer;
}
.portal-settings .logo-placeholder:before,
.portal-settings .logo-dark-placeholder:before {
  content: "Logo";
}
.portal-settings .favicon-placeholder {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  background-color: var(--colour-neutral-100);
  text-align: center;
  color: var(--colour-neutral);
  cursor: pointer;
}
.portal-settings .favicon-placeholder:before {
  content: "F";
}
.portal-settings .live-toggle {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 3px 8px 4px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--colour-neutral);
  background-color: rgba(96, 128, 160, 0.08);
  border-radius: 4px;
}
.portal-settings .url-taken {
  display: none;
}

.region-workspace-settings .setting-toggle {
  float: right;
  margin: -2px 0 0 24px;
}
.region-workspace-settings .setting-toggle > button {
  margin-left: 8px;
  vertical-align: top;
}
.region-workspace-settings .url-taken {
  display: none;
}
.region-workspace-settings .input-subdomain {
  display: none;
}
.region-workspace-settings .subdomain-cancel,
.region-workspace-settings .subdomain-submit {
  display: none;
}
.region-workspace-settings .subdomain-cancel {
  margin-right: 8px;
  font-size: 12px;
}
.region-workspace-settings .workspace-url-preview {
  margin-top: 8px;
}
.region-workspace-settings .workspace-url-preview div {
  font-weight: 700;
  font-size: 15px;
}
.region-workspace-settings .workspace-url-preview a {
  float: right;
  margin-left: 8px;
  font-weight: 500;
}
.region-workspace-settings .workspace-logo {
  position: relative;
  display: inline-block;
  text-align: center;
}
.region-workspace-settings .workspace-logo img {
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--colour-system-line);
}
.region-workspace-settings .workspace-logo span {
  display: block;
  width: 64px;
  height: 64px;
  margin: auto;
  line-height: 64px;
  background-color: rgba(96, 64, 255, 0.04);
  color: var(--colour-primary);
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  cursor: default;
}
.region-workspace-settings .workspace-logo .logo-upload {
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  text-decoration: none;
  color: var(--colour-primary);
  font-size: 13px;
  white-space: nowrap;
}
.region-workspace-settings .workspace-logo .logo-remove {
  position: absolute;
  z-index: 20;
  top: -6px;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--colour-system-surface);
  box-shadow: var(--shadow-1);
  font-size: 10px;
  cursor: pointer;
}
.region-workspace-settings .workspace-logo .logo-remove:hover, .region-workspace-settings .workspace-logo button.logo-remove.success.active, .region-workspace-settings .workspace-logo button.logo-remove.info.active, .region-workspace-settings .workspace-logo button.logo-remove.danger.active {
  color: var(--colour-primary);
}

.modal-workspace-settings .member-add {
  float: right;
}
.modal-workspace-settings .member-search {
  width: 300px;
  margin: 24px 0;
}
.modal-workspace-settings .empty-search {
  display: none;
}

body[page=workspace_members] .invite-members {
  margin-top: 12px;
}
body[page=workspace_members] .empty-search {
  display: none;
  position: relative;
  margin: auto;
  padding: 100px 50px;
  border-radius: 8px;
  background-color: var(--colour-system-surface-2);
  text-align: center;
}
@media (max-width: 800px) {
  body[page=workspace_members] .empty-search {
    height: auto;
    margin: 40px 0 0 0;
    padding: 50px 20px;
  }
}
body[page=workspace_members] .empty-search .icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: auto auto 32px auto;
  border-radius: 50%;
  background-color: rgba(96, 128, 160, 0.1);
  font-size: 34px;
  color: rgba(96, 128, 160, 0.6);
}

body[page=project] #app {
  overflow-x: hidden;
}
body[page=project] .project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 32px;
}
body[page=project] .project-header h1 {
  margin: 0;
}
body[page=project] .search-header {
  position: relative;
  margin-bottom: 24px;
}
body[page=project] .search-header form {
  position: relative;
  width: 380px;
  user-select: none;
}
body[page=project] .search-header form:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f002";
  position: absolute;
  left: 0;
  top: 0;
  height: 32px;
  line-height: 32px;
  color: var(--colour-neutral);
  font-size: 16px;
  pointer-events: none;
}
body[page=project] .search-header form:focus-within:before {
  color: var(--colour-primary);
}
body[page=project] .search-header form input[type=text] {
  height: 32px;
  padding-left: 26px;
  padding-right: 30px;
  border: none;
  border-bottom: 1px solid transparent;
}
body[page=project] .search-header button.cta {
  position: absolute;
  top: 8px;
  right: 8px;
}
@media (max-width: 800px) {
  body[page=project] .search-header button.cta {
    top: 0;
    right: 0;
  }
}
body[page=project] .project-menu .badge-fluid {
  margin-left: 4px;
}
body[page=project] .project-search-launcher {
  position: relative;
  float: left;
  height: 32px;
  color: var(--colour-neutral-300);
}
@media (max-width: 800px) {
  body[page=project] .project-search-launcher {
    display: none;
  }
}
body[page=project] .project-search-launcher:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f002";
  position: absolute;
  top: 4px;
  left: 0;
  pointer-events: none;
}
body[page=project] .project-search-launcher:focus-within:before {
  color: var(--colour-primary);
}
body[page=project] .project-search-launcher input {
  width: 42px;
  height: 22px;
  padding-left: 20px;
  border: none;
  opacity: 0;
  font-size: 14px;
  cursor: pointer;
}
body[page=project] .project-search-launcher.active input {
  width: 160px;
  margin-right: 16px;
  opacity: 1;
  cursor: text;
}
body[page=project] .dropdown-project-sort {
  float: right;
}
@media (max-width: 800px) {
  body[page=project] .dropdown-project-sort {
    display: none;
  }
}
body[page=project] .onboarding-overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-neutral-1000);
  opacity: 0.8;
}
body[page=project] .onboarding-assistant {
  position: absolute;
  z-index: 1000;
  top: 100%;
  right: 0;
  display: flex;
  width: 330px;
  margin-top: 24px;
  line-height: 150%;
}
body[page=project] .onboarding-assistant > img {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 50%;
}
body[page=project] .onboarding-assistant > div {
  padding: 16px;
  border-radius: 4px 16px 16px 16px;
  background-color: var(--colour-system-surface);
}
body[page=project] .onboarding-assistant .close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100%;
  top: 0;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  color: var(--colour-system-text-inverse);
  font-size: 16px;
  cursor: pointer;
}
body[page=project] .create-project-onboarding {
  z-index: 1000;
  box-shadow: 0 0 0 6px var(--colour-system-surface);
}
body[page=project] .region-domain {
  position: relative;
}
body[page=project] .region-domain:empty, body[page=project] .region-domain[data-match="0"] {
  display: none;
}
body[page=project] .region-domain:not(:last-child) {
  margin-bottom: 12px;
}
body[page=project] .region-domain:before {
  content: attr(data-domain);
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 42px;
  background-color: var(--colour-neutral-10);
  color: var(--colour-neutral);
  border-radius: 8px;
  box-shadow: 8px 0 0 0 var(--colour-neutral-10), -8px 0 0 0 var(--colour-neutral-10);
  cursor: pointer;
}
body[page=project] .region-domain:after {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f106";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  line-height: 40px;
  width: 24px;
  color: var(--colour-neutral-300);
  text-align: center;
  transform: rotate(180deg);
  transition: all 0.1s linear;
}
body[page=project] .region-domain.active:after {
  transform: none;
}
body[page=project] .region-domain:not(.active) .project-overview {
  display: none;
}
body[page=project] .region-domain .project-overview:first-child {
  margin-top: 12px;
}

.project-settings-ai .feedback-type-icons {
  display: flex;
  align-items: center;
  justify-content: start;
}
.project-settings-ai .feedback-type-icons > div {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 24px;
  margin-right: 8px;
  padding: 0 12px;
  background-color: var(--colour-neutral-400);
  color: var(--colour-system-text-inverse);
  font-size: 13px;
  border-radius: 16px;
  font-weight: 500;
  cursor: default;
}
.project-settings-ai .sentiment-icons {
  display: flex;
  align-items: center;
  justify-content: start;
}
.project-settings-ai .sentiment-icons svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

body[page=user_segment] {
  background-color: var(--colour-system-surface);
}
body[page=user_segment] .view-feedback i,
body[page=user_segment] .view-user i {
  opacity: 0;
  margin-left: 4px;
}
body[page=user_segment] .view-feedback:hover i, body[page=user_segment] button.view-feedback.success.active i, body[page=user_segment] button.view-feedback.info.active i, body[page=user_segment] button.view-feedback.danger.active i,
body[page=user_segment] .view-user:hover i,
body[page=user_segment] button.view-user.success.active i,
body[page=user_segment] button.view-user.info.active i,
body[page=user_segment] button.view-user.danger.active i {
  opacity: 1;
}
body[page=user_segment] .segment-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin-bottom: 24px;
  padding: 0 24px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
}
body[page=user_segment] .segment-count {
  height: 36px;
  border-bottom: 1px solid var(--colour-neutral-25);
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-neutral);
}
body[page=user_segment] .segment-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 24px 0;
  margin-top: 16px;
  cursor: pointer;
}
body[page=user_segment] .segment-preview-row:first-child {
  margin-top: 8px;
}
body[page=user_segment] .segment-preview-row:after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--colour-neutral-25);
}
body[page=user_segment] .segment-preview-row:hover:before, body[page=user_segment] button.segment-preview-row.success.active:before, body[page=user_segment] button.segment-preview-row.info.active:before, body[page=user_segment] button.segment-preview-row.danger.active:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -16px;
  bottom: 0;
  left: -16px;
  border-radius: 8px;
  background: var(--colour-neutral-10);
  pointer-events: none;
  animation: fadeIn 0.1s;
}
body[page=user_segment] .segment-preview-row .segment-name {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 15px;
  font-weight: 600;
}
body[page=user_segment] .segment-preview-row .segment-info {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: start;
}
body[page=user_segment] .segment-preview-row .segment-info > div {
  display: flex;
  align-items: center;
  justify-content: start;
}
body[page=user_segment] .segment-preview-row .segment-info > div:not(:last-child):after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 8px;
  background-color: var(--colour-neutral);
  border-radius: 50%;
}
body[page=user_segment] .segment-preview-row .segment-time {
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=user_segment] ul.segment-condition {
  margin: 12px 0 0 24px;
  padding: 0;
  line-height: 18px;
}
body[page=user_segment] .learn-more {
  display: none;
}

body[page=session_replay] {
  background-color: var(--colour-system-surface);
}
body[page=session_replay] .region-search-bar {
  position: relative;
  z-index: 1;
  height: 56px;
}
body[page=session_replay] .region-search-bar .region-group-action {
  display: none;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=session_replay] .region-search-bar .region-group-action .item-counter {
  font-size: 16px;
  font-weight: 500;
}
body[page=session_replay] .region-search-bar .region-group-action .item-counter .clear-selection {
  float: left;
  margin-right: 8px;
}
body[page=session_replay] .region-search-bar.flip .region-group-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[page=session_replay] .region-search-bar.flip .region-filters {
  display: none;
}
body[page=session_replay] .region-search-bar .region-filters, body[page=session_replay] .region-search-bar .region-group-action {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--colour-system-surface);
}
body[page=session_replay] .region-filters {
  display: flex;
  align-items: center;
  justify-content: start;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=session_replay] .region-filters button.dropdown-select-small {
  padding-left: 0;
}
body[page=session_replay] .region-group-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[page=session_replay] .region-header {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 56px;
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=session_replay] .region-user-properties, body[page=session_replay] .region-event {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 0;
  margin-top: 10px;
  border-radius: 8px;
  background-color: var(--colour-system-surface-1);
  box-shadow: var(--shadow-2);
  animation: dropdown 0.2s;
}
body[page=session_replay] .region-event {
  min-width: 500px;
}
body[page=session_replay] .region-event .region-conditions {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
  padding: 24px 24px 8px 24px;
  margin: 0;
}
body[page=session_replay] .region-event .region-actions {
  padding: 0 24px 24px 24px;
}
body[page=session_replay] .region-event .condition-item {
  display: grid;
  grid-template-columns: 32px auto;
}
body[page=session_replay] .region-event .condition-item:not(:last-child) {
  margin-bottom: 16px;
}
body[page=session_replay] .region-event .condition-item > div:last-child {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 8px;
}
body[page=session_replay] .region-event .condition-item > div:last-child > div:last-child {
  grid-column: 1/-1;
}
body[page=session_replay] .region-event .condition-delete:disabled {
  color: var(--colour-neutral-100);
  cursor: not-allowed;
}
body[page=session_replay] .filters-clear:hover, body[page=session_replay] button.filters-clear.success.active, body[page=session_replay] button.filters-clear.info.active, body[page=session_replay] button.filters-clear.danger.active {
  text-decoration: none;
}
body[page=session_replay] .session-tag-loading {
  margin: 16px;
  text-align: center;
}
body[page=session_replay] .session-tag-dropdown {
  display: none;
  min-width: 240px;
}
body[page=session_replay] .session-tag-modal-content .tag-delete {
  pointer-events: auto;
}
body[page=session_replay] .session-tag-modal-content .dropdown-session-no-tags {
  border-top: none;
  padding-left: 42px;
  cursor: not-allowed;
  color: var(--colour-system-text-placeholder);
}

body[page=integration_log] .filter-bar {
  border-bottom: 1px solid var(--colour-system-line);
}
body[page=integration_log] .region-filters {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: start;
}
body[page=integration_log] .button-dropdown.button-dropdown-date-range > div {
  width: 480px;
  padding: 20px;
}
body[page=integration_log] .button-dropdown.button-dropdown-date-range > div > div {
  border: 0;
}
body[page=integration_log] .integration-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
body[page=integration_log] .log-search-launcher {
  position: relative;
  color: var(--colour-neutral-300);
}
@media (max-width: 800px) {
  body[page=integration_log] .log-search-launcher {
    display: none;
  }
}
body[page=integration_log] .log-search-launcher:before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f002";
  position: absolute;
  top: 4px;
  left: 0;
  pointer-events: none;
}
body[page=integration_log] .log-search-launcher:focus-within:before {
  color: var(--colour-primary);
}
body[page=integration_log] .log-search-launcher input {
  width: 42px;
  height: 22px;
  padding-left: 20px;
  border: none;
  opacity: 0;
  font-size: 14px;
  cursor: pointer;
}
body[page=integration_log] .log-search-launcher.active input {
  width: 160px;
  margin-right: 20px;
  opacity: 1;
  cursor: text;
}
body[page=integration_log] .log-search-launcher .quick-search-clear {
  position: absolute;
  top: 3px;
  right: 3px;
}

body[page=automation] .region-automation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
}
body[page=automation] .region-automation .search-result-empty {
  grid-column: 1/-1;
  width: 100%;
}
body[page=automation] .automation-preview {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--colour-system-box-bg-dark-only);
  box-shadow: 0 0 0 1px var(--colour-system-line);
  cursor: pointer;
  transition: all 0.1s;
}
:root[data-colour-scheme=light] body[page=automation] .automation-preview:hover, :root[data-colour-scheme=light] body[page=automation] button.automation-preview.success.active, :root[data-colour-scheme=light] body[page=automation] button.automation-preview.info.active, :root[data-colour-scheme=light] body[page=automation] button.automation-preview.danger.active {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--colour-system-line), 0 4px 10px var(--colour-neutral-75);
}
@media (prefers-color-scheme: light) {
  :root:not([data-colour-scheme]) body[page=automation] .automation-preview:hover, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.success.active, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.info.active, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.danger.active {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--colour-system-line), 0 4px 10px var(--colour-neutral-75);
  }
}
:root[data-colour-scheme=dark] body[page=automation] .automation-preview:hover, :root[data-colour-scheme=dark] body[page=automation] button.automation-preview.success.active, :root[data-colour-scheme=dark] body[page=automation] button.automation-preview.info.active, :root[data-colour-scheme=dark] body[page=automation] button.automation-preview.danger.active {
  background-color: var(--colour-neutral-25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=automation] .automation-preview:hover, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.success.active, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.info.active, :root:not([data-colour-scheme]) body[page=automation] button.automation-preview.danger.active {
    background-color: var(--colour-neutral-25);
  }
}
body[page=automation] .automation-preview .automation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--colour-neutral-25);
  color: var(--colour-neutral);
}
body[page=automation] .automation-preview .automation-icon.automation-icon-paused {
  background-color: var(--colour-warning-100);
  color: var(--colour-warning-700);
}
body[page=automation] .automation-preview .automation-name {
  font-weight: 500;
}
body[page=automation] .automation-preview .automation-description {
  margin-top: 4px;
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=automation] .automation-preview .automation-date {
  font-size: 13px;
  color: var(--colour-neutral);
}
body[page=automation] .automation-preview .integrations {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  margin-top: 16px;
}
body[page=automation] .automation-preview .integrations > div {
  width: 16px;
  height: 16px;
}

body[page=sr] .region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--colour-system-line);
  background-color: var(--colour-system-surface);
}
body[page=sr] .region-header a {
  text-decoration: none;
  color: var(--colour-neutral);
}
body[page=sr] .region-main {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background-color: var(--colour-system-body);
}
body[page=sr] .not-found {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-60%);
}
body[page=sr] .not-found .logo {
  width: 180px;
  height: 180px;
  margin: auto;
  padding-top: 42px;
  border-radius: 10px;
  background-color: var(--colour-system-surface);
}
body[page=sr] .not-found .logo svg {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}
body[page=sr] .not-found .invalid-url {
  margin-top: 30px;
  text-align: center;
  font-size: 34px;
  font-weight: 300;
}
body[page=sr] .not-found .contact-owner {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
}

body[page=sr].embed .region-main {
  top: 0;
  padding: 0;
}

body[page=oauth_authorize] .oauth-authorize-shell {
  max-width: 1200px;
  margin: 24px auto;
}
body[page=oauth_authorize] .oauth-authorize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
}
body[page=oauth_authorize] .oauth-authorize-card {
  margin-bottom: 0;
}
body[page=oauth_authorize] .oauth-authorize-brand {
  display: inline-block;
  width: 140px;
  height: 24px;
  background: url("/image/logo.svg") no-repeat center center;
}
:root[data-colour-scheme=dark] body[page=oauth_authorize] .oauth-authorize-brand {
  background-image: url("/image/logo_white.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-scheme]) body[page=oauth_authorize] .oauth-authorize-brand {
    background-image: url("/image/logo_white.svg");
  }
}
body[page=oauth_authorize] .oauth-panel {
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  padding: 16px;
  background-color: var(--colour-system-surface);
}
body[page=oauth_authorize] .oauth-header {
  margin: 0 0 20px 0;
}
body[page=oauth_authorize] .oauth-header h1, body[page=oauth_authorize] .oauth-header h3 {
  margin: 0;
}
body[page=oauth_authorize] .oauth-account-heading {
  font-size: 12px;
  color: var(--colour-system-text-muted);
}
body[page=oauth_authorize] .oauth-account-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--colour-system-line);
  background-color: color-mix(in srgb, var(--colour-primary) 14%, var(--colour-system-surface));
}
body[page=oauth_authorize] .oauth-account-avatar img,
body[page=oauth_authorize] .oauth-account-avatar .oauth-account-avatar-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body[page=oauth_authorize] .oauth-account-avatar img {
  object-fit: cover;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
body[page=oauth_authorize] .oauth-account-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--colour-system-text);
}
body[page=oauth_authorize] .oauth-account-avatar:hover .oauth-account-avatar-tooltip, body[page=oauth_authorize] button.oauth-account-avatar.success.active .oauth-account-avatar-tooltip, body[page=oauth_authorize] button.oauth-account-avatar.info.active .oauth-account-avatar-tooltip, body[page=oauth_authorize] button.oauth-account-avatar.danger.active .oauth-account-avatar-tooltip {
  display: block;
}
body[page=oauth_authorize] .oauth-account-avatar-tooltip {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;
  margin: 0 0 8px 0;
  background-color: var(--colour-tooltip-bg);
  color: var(--colour-tooltip-text);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(40%);
}
body[page=oauth_authorize] .oauth-scope-item {
  position: relative;
  opacity: 0.6;
}
body[page=oauth_authorize] .oauth-scope-item:hover, body[page=oauth_authorize] button.oauth-scope-item.success.active, body[page=oauth_authorize] button.oauth-scope-item.info.active, body[page=oauth_authorize] button.oauth-scope-item.danger.active, body[page=oauth_authorize] .oauth-scope-item.oauth-scope-item-previous, body[page=oauth_authorize] .oauth-scope-item:has(input[type=checkbox]:checked) {
  opacity: 1;
}
body[page=oauth_authorize] .oauth-scope-label {
  font-weight: 600;
}
body[page=oauth_authorize] .oauth-scope-item-requested:has(.oauth-scope-tools-details[open]) .oauth-scope-tools-panel {
  display: block;
}
body[page=oauth_authorize] .oauth-scope-description {
  padding-left: 24px;
  margin-top: 12px;
}
body[page=oauth_authorize] .oauth-scope-tools-details {
  position: absolute;
  top: 12px;
  right: 12px;
}
body[page=oauth_authorize] .oauth-scope-tools-details > summary {
  display: inline-block;
  list-style: none;
  margin: 0;
}
body[page=oauth_authorize] .oauth-scope-tools-details > summary::-webkit-details-marker {
  display: none;
}
body[page=oauth_authorize] .oauth-scope-tools-details > summary::marker {
  display: none;
}
body[page=oauth_authorize] .oauth-scope-tools-details[open] > .oauth-scope-tools-toggle .fa-angle-down {
  transform: rotate(180deg);
}
body[page=oauth_authorize] .oauth-scope-tools-toggle {
  cursor: pointer;
  color: var(--colour-neutral);
  font-size: 12px;
  user-select: none;
}
body[page=oauth_authorize] .oauth-scope-tools-panel {
  display: none;
  margin: 12px 0 0 24px;
  padding: 10px 12px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
  background-color: var(--colour-system-surface);
}
body[page=oauth_authorize] .oauth-scope-tools-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body[page=oauth_authorize] .oauth-scope-tool-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
body[page=oauth_authorize] .oauth-scope-tool-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--colour-system-line);
}
body[page=oauth_authorize] .oauth-scope-tool-item:first-child {
  border-top: 0;
}
body[page=oauth_authorize] .oauth-scope-tool-name {
  font-weight: 500;
  font-size: 12px;
}
body[page=oauth_authorize] .oauth-scope-tool-id {
  font-size: 12px;
  opacity: 0.75;
}
body[page=oauth_authorize] .oauth-scope-tool-item-empty {
  display: block;
  opacity: 0.75;
}
body[page=oauth_authorize] .oauth-redirect-warning {
  border: 1px solid var(--colour-warning);
  border-left: 4px solid var(--colour-warning);
  border-radius: 8px;
  padding: 12px;
  background-color: color-mix(in srgb, var(--colour-warning) 12%, transparent);
}
body[page=oauth_authorize] .oauth-redirect-warning-trusted {
  border-color: var(--colour-success);
  border-left-color: var(--colour-success);
  background-color: color-mix(in srgb, var(--colour-success) 14%, transparent);
}
body[page=oauth_authorize] .oauth-redirect-warning-unverified {
  border-color: var(--colour-danger);
  border-left-color: var(--colour-danger);
  background-color: color-mix(in srgb, var(--colour-danger) 12%, transparent);
}
body[page=oauth_authorize] .oauth-insecure-risk-confirm {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--colour-danger);
  border-left: 4px solid var(--colour-danger);
  background-color: color-mix(in srgb, var(--colour-danger) 12%, transparent);
  color: var(--colour-system-text);
  line-height: 1.4;
}
body[page=oauth_authorize] .oauth-insecure-risk-confirm input[type=checkbox] + label {
  display: block;
  height: auto;
  line-height: 1.4;
  margin-right: 0;
  padding-left: 28px;
  color: var(--colour-system-text);
}
body[page=oauth_authorize] .oauth-insecure-risk-confirm input[type=checkbox] + label:before,
body[page=oauth_authorize] .oauth-insecure-risk-confirm input[type=checkbox] + label:after {
  top: 2px;
  bottom: auto;
}
body[page=oauth_authorize] .oauth-insecure-risk-confirm.oauth-insecure-risk-confirm-flash {
  animation: oauth_insecure_risk_confirm_flash 420ms ease-in-out;
}
@keyframes oauth_insecure_risk_confirm_flash {
  0% {
    background-color: color-mix(in srgb, var(--colour-danger) 12%, transparent);
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    background-color: color-mix(in srgb, var(--colour-danger) 24%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--colour-danger) 16%, transparent);
  }
  100% {
    background-color: color-mix(in srgb, var(--colour-danger) 12%, transparent);
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (max-width: 1024px) {
  body[page=oauth_authorize] .oauth-authorize-shell {
    max-width: 680px;
  }
  body[page=oauth_authorize] .oauth-authorize-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  body[page=oauth_authorize] {
    padding: 12px 0;
  }
  body[page=oauth_authorize] .oauth-authorize-card {
    padding: 20px;
  }
  body[page=oauth_authorize] .oauth-actions {
    flex-direction: column-reverse;
  }
  body[page=oauth_authorize] .oauth-actions button {
    width: 100%;
  }
  body[page=oauth_authorize] .oauth-scope-item-requested {
    grid-template-columns: minmax(0, 1fr);
  }
  body[page=oauth_authorize] .oauth-account-row {
    align-items: center;
  }
  body[page=oauth_authorize] .oauth-scope-item-requested > .oauth-scope-tools-details {
    grid-column: 1;
    justify-self: start;
    margin-left: 0;
  }
}

body[page=style_guide] .button-dropdown-theme {
  position: fixed;
  z-index: 100;
  top: 68px;
  right: 12px;
}
body[page=style_guide] aside .component-title {
  font-weight: 600;
}
body[page=style_guide] aside ul {
  list-style: none;
  line-height: 24px;
  padding: 0;
  margin: 4px 0 16px 0;
}
body[page=style_guide] aside a {
  text-decoration: none;
  color: var(--colour-neutral);
}
body[page=style_guide] aside a.active {
  font-weight: 500;
  color: var(--colour-primary);
}
body[page=style_guide] .region-component {
  display: none;
}
body[page=style_guide] .region-component.active {
  display: block;
}
body[page=style_guide] pre {
  margin-top: 24px;
}
body[page=style_guide] .colour-palette {
  display: grid;
  grid-template-columns: 64px auto;
  height: 64px;
  margin: 0 0 12px 0;
}
body[page=style_guide] .colour-palette > div:first-child {
  border-radius: 8px;
}
body[page=style_guide] .colour-palette > div:last-child {
  display: flex;
  align-items: center;
  padding: 0 0 0 12px;
  font-size: 12px;
}
body[page=style_guide] .colour-palette > div:last-child span {
  display: inline-block;
  width: 56px;
}
body[page=style_guide] .example-loader {
  display: inline-block;
  width: 200px;
  height: 150px;
  border: 1px solid var(--colour-system-line);
  border-radius: 8px;
}
body[page=style_guide] .example-loader-dark {
  display: inline-block;
  width: 200px;
  height: 150px;
  border: 1px solid var(--colour-system-line);
  background-color: var(--colour-primary);
  border-radius: 8px;
}
body[page=style_guide] .example-card {
  overflow: hidden;
  padding: 24px;
  background-color: var(--colour-system-body);
}
body[page=style_guide] .example-grid-block {
  height: 28px;
  line-height: 28px;
  background-color: var(--colour-primary-100);
  border: 1px dotted var(--colour-primary-200);
  text-align: center;
  color: var(--colour-primary);
}

pre[class*=language-] {
  background: var(--colour-neutral-25);
  color: var(--colour-system-text);
}

code[class*=language-],
pre[class*=language-] {
  font-size: 14px;
  line-height: 150%;
}

.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag {
  color: #BC2C5F;
}

.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
  color: #168989;
}

.token.atrule, .token.attr-value, .token.keyword {
  color: #4371A1;
}

.token.class-name, .token.function {
  color: #4371A1;
}

.token.punctuation {
  color: var(--colour-system-text);
}

.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
  color: #4371A1;
}

.replayer-wrapper {
  position: relative;
}

.replayer-mouse {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: left 0.05s linear, top 0.05s linear;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==");
  border-color: transparent;
}

.replayer-mouse:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #4950f6;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.replayer-mouse.active:after {
  animation: click 0.2s ease-in-out 1;
}

.replayer-mouse.touch-device {
  background-image: none;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  margin-left: -37px;
  margin-top: -37px;
  border: 4px solid rgba(73, 80, 246, 0);
  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
}

.replayer-mouse.touch-device.touch-active {
  border-color: #4950f6;
  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
}

.replayer-mouse.touch-device:after {
  opacity: 0;
}

.replayer-mouse.touch-device.active:after {
  animation: touch-click 0.2s ease-in-out 1;
}

.replayer-mouse-tail {
  position: absolute;
  pointer-events: none;
}

@keyframes click {
  0% {
    opacity: 0.3;
    width: 20px;
    height: 20px;
  }
  50% {
    opacity: 0.5;
    width: 10px;
    height: 10px;
  }
}
@keyframes touch-click {
  0% {
    opacity: 0;
    width: 20px;
    height: 20px;
  }
  50% {
    opacity: 0.5;
    width: 10px;
    height: 10px;
  }
}
.rr-player {
  position: relative;
  background: white;
  float: left;
  border-radius: 5px;
  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
}

.rr-player__frame {
  overflow: hidden;
}

.replayer-wrapper {
  float: left;
  clear: both;
  transform-origin: top left;
  left: 50%;
  top: 50%;
}

.replayer-wrapper > iframe {
  border: none;
}

.rr-controller.svelte-19ke1iv.svelte-19ke1iv {
  width: 100%;
  height: 80px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 0 0 5px 5px;
}

.rr-timeline.svelte-19ke1iv.svelte-19ke1iv {
  width: 80%;
  display: flex;
  align-items: center;
}

.rr-timeline__time.svelte-19ke1iv.svelte-19ke1iv {
  display: inline-block;
  width: 100px;
  text-align: center;
  color: #11103e;
}

.rr-progress.svelte-19ke1iv.svelte-19ke1iv {
  flex: 1;
  height: 12px;
  background: #eee;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
  border-top: solid 4px #fff;
  border-bottom: solid 4px #fff;
}

.rr-progress.disabled.svelte-19ke1iv.svelte-19ke1iv {
  cursor: not-allowed;
}

.rr-progress__step.svelte-19ke1iv.svelte-19ke1iv {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #e0e1fe;
}

.rr-progress__handler.svelte-19ke1iv.svelte-19ke1iv {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  top: 2px;
  transform: translate(-50%, -50%);
  background: rgb(73, 80, 246);
}

.rr-controller__btns.svelte-19ke1iv.svelte-19ke1iv {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.rr-controller__btns.svelte-19ke1iv button.svelte-19ke1iv {
  width: 32px;
  height: 32px;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.rr-controller__btns.svelte-19ke1iv button.svelte-19ke1iv:active {
  background: #e0e1fe;
}

.rr-controller__btns.svelte-19ke1iv button.active.svelte-19ke1iv {
  color: #fff;
  background: rgb(73, 80, 246);
}

.rr-controller__btns.svelte-19ke1iv button.svelte-19ke1iv:disabled {
  cursor: not-allowed;
}

.switch.svelte-9brlez.svelte-9brlez.svelte-9brlez {
  height: 1em;
  display: flex;
  align-items: center;
}

.switch.disabled.svelte-9brlez.svelte-9brlez.svelte-9brlez {
  opacity: 0.5;
}

.label.svelte-9brlez.svelte-9brlez.svelte-9brlez {
  margin: 0 8px;
}

.switch.svelte-9brlez input[type=checkbox].svelte-9brlez.svelte-9brlez {
  position: absolute;
  opacity: 0;
}

.switch.svelte-9brlez label.svelte-9brlez.svelte-9brlez {
  width: 2em;
  height: 1em;
  position: relative;
  cursor: pointer;
  display: block;
}

.switch.disabled.svelte-9brlez label.svelte-9brlez.svelte-9brlez {
  cursor: not-allowed;
}

.switch.svelte-9brlez label.svelte-9brlez.svelte-9brlez:before {
  content: "";
  position: absolute;
  width: 2em;
  height: 1em;
  left: 0.1em;
  transition: background 0.1s ease;
  background: rgba(73, 80, 246, 0.5);
  border-radius: 50px;
}

.switch.svelte-9brlez label.svelte-9brlez.svelte-9brlez:after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  left: 0;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  background: #fcfff4;
  animation: switch-off 0.2s ease-out;
  z-index: 2;
}

.switch.svelte-9brlez input[type=checkbox].svelte-9brlez:checked + label.svelte-9brlez:before {
  background: rgb(73, 80, 246);
}

.switch.svelte-9brlez input[type=checkbox].svelte-9brlez:checked + label.svelte-9brlez:after {
  animation: switch-on 0.2s ease-out;
  left: 1.1em;
}

/*# sourceMappingURL=app.css.map */