/* Layout Definitions */
/* 100% Saturation */
/* 25% less saturation */
/* 50% less saturation */
/* 50% less saturation and 20% darker */
/* 50% less saturation and 40% darker */
[data-ui-theme="light"] {
  --home-page-masthead-filter: brightness(1);
  --masthead-table-trim: linear-gradient(270deg, rgb(208 207 207) 0%, rgb(202 202 202) 100%), linear-gradient(179deg, #dadada, #e3e3e3);
  --masthead-table-apron: linear-gradient(180deg, #d0d0d0, #e0e0e0);
  --story-viewer-header-bg-color: #f0f0f0;
  --story-viewer-header-border-color: #e6e6e6;
  --story-viewer-header-logo-color: #070808;
  --story-viewer-header-color: #525252;
  --story-viewer-header-button-color-hover: #262626;
  --story-viewer-header-button-color-active: #fff;
  --story-viewer-header-button-color-selected: #fff;
  --story-viewer-header-button-bg-hover: #fff;
  --story-viewer-header-button-bg-active: rgba(255, 255, 255, 0.1);
  --story-viewer-header-button-bg-selected: #03a9f4;
  --story-viewer-divider-color: #d4d4d4;
  --story-viewer-header-bg-color--home: #0f0f0f;
  --story-viewer-header-border-color--home: #262626;
  --story-viewer-header-logo-color--home: #f7f7f7;
  --story-viewer-header-color--home: #e6e6e6;
  --story-viewer-header-button-color-hover--home: #e6e6e6;
  --story-viewer-header-button-bg-hover--home: #525252;
  --story-viewer-header-button-bg-selected--home: #004d6e;
  --loading-spinner-image: url(/web-app/img/pw_logo_spinner_light.gif);
  --scene-image-placeholder: url(/web-app/img/empty_image_placeholders/no_scene_image_placeholder.png);
  --character-image-placeholder: url(/web-app/img/no_character_image.png);
  --emotive-scene-image-placeholder: url(/web-app/img/empty_image_placeholders/no_scene_image_darker.png);
  --story-image-placeholder: url(/web-app/img/empty_image_placeholders/no_story_image_placeholder.png);
  --grouped-characters-icon: url(/web-app/img/grouped_characters_icon.png);
  --act-color-dilution: 0%;
  --act-header-color-dilution: 50%;
  --act-header-border-color-dilution: 0%;
  --chart-color-dilution: 20%;
  --stats-color-dilution: 0%;
  --scene-navigator-marker-dilution: 0%;
  --chart-color-bkg: rgba(0, 0, 0, 0.05);
  --connection-color-dilution: 65%;
  --scene-navigator-bg: #fff;
  --scene-navigator-dilution: 40%;
  --connection-nav-opacity: 0.15;
  --connection-nav-opacity-hover: 0.2;
  --image-bg-color: #f2f2f2;
  --image-bg-color-hover: #f2f2f2;
  --story-image-bg-color: #f2f2f2;
  --page-break-shadow-top-color: rgba(0, 0, 0, 0.1);
  --page-break-shadow-bottom-color: rgba(0, 0, 0, 0.05);
  --pages-top-shadow-color: rgba(0, 0, 0, 0.1);
  --skeleton-bg-color-stop-1: #e6e6e6;
  --skeleton-bg-color-stop-2: #f9f9f9;
  --surface-color-0: #f7f7f7;
  --surface-color-0-hover: #f2f2f2;
  --surface-color-1: #e6e6e6;
  --surface-color-2: #fff;
  --surface-color-2-1: color-mix(in srgb, var(--surface-color-2) 100%, #000 10%);
  --surface-color-2-2: color-mix(in srgb, var(--surface-color-2) 100%, #000 10%);
  --surface-color-2-hover: #f7f7f7;
  --surface-color-3: #fff;
  --surface-color-3-hover: #f2f2f2;
  --surface-color-3-1: color-mix(in srgb, var(--surface-color-3) 100%, #000 10%);
  --surface-color-4: #fff;
  --surface-color-4-1: color-mix(in srgb, var(--surface-color-4) 100%, #000 5%);
  --surface-color-4-2: color-mix(in srgb, var(--surface-color-4) 100%, #000 20%);
  --text-color-primary: #262626;
  --text-color-secondary: #525252;
  --text-color-tertiary: #737373;
  --text-color-muted: #a3a3a3;
  --text-color-disabled: #e6e6e6;
  --icon-color-primary: #262626;
  --icon-color-secondary: #525252;
  --icon-color-tertiary: #737373;
  --icon-color-muted: #a3a3a3;
  --icon-color-disabled: #e6e6e6;
  --surface-color-0-divider-color: #e6e6e6;
  --surface-color-1-divider-color: #e6e6e6;
  --surface-color-2-divider-color: #e6e6e6;
  --surface-color-3-divider-color: #d4d4d4;
  --surface-color-4-divider-color: #e6e6e6;
  --dropdown-items-bg: var(--surface-color-4);
  --dropdown-items-bg-hover: var(--surface-color-4-1);
  --dropdown-shadow: 0 0 0 1px #e6e6e6, 0 16px 18px -5px rgba(0, 0, 0, 0.14);
  --primary-text-color: #0279b1;
  --primary-text-color-hover: #81d6fe;
  --danger-text-color: #d32f2f;
  --primary-button-bg: #03a9f4;
  --primary-button-bg-hover: #029ce3;
  --secondary-button-bg: #e6e6e6;
  --secondary-button-bg-hover: #d4d4d4;
  --secondary-button-color: #525252;
  --secondary-button-color-hover: #262626;
  --success-button-bg: #4caf50;
  --success-button-bg-hover: #43a047;
  --danger-button-bg: #ff443e;
  --danger-button-bg-hover: #f31e16;
  --danger-button-color: #fff;
  --danger-button-color-hover: #fff;
  --transparent-button-color: #03a9f4;
  --toggle-inactive-bg: #d4d4d4;
  --toggle-inactive-bg-hover: #a3a3a3;
  --toggle-active-bg: #03a9f4;
  --toggle-active-bg-hover: #0288d1;
  --radio-inactive-bg: #e6e6e6;
  --radio-inactive-bg-hover: #d4d4d4;
  --radio-active-bg: #03a9f4;
  --radio-active-bg-hover: #0288d1;
  --form-text-input-bg: #f7f7f7;
  --form-text-input-bg-hover: #f2f2f2;
  --form-text-input-bg-focus: #f2f2f2;
  --form-text-input-border-color: #d4d4d4;
  --form-text-input-border-color-focus: #03a9f4;
  --form-text-input-border-color-error: #f44336;
  --form-text-input-placeholder-color: #a3a3a3;
  --text-input-bg: #f7f7f7;
  --text-input-error-bg: #f44336;
  --marker-cell-bg: #f2f2f2;
  --marker-cell-text-mixin: #000;
  --marker-cell-text-mixin-dilution: 30%;
  --marker-cell-border-color: #e6e6e6;
  --table-loading-gradient: linear-gradient(90deg, #efefef, #8f8f8f, #efefef, #8f8f8f, #efefef);
  --table-cell-bg: #f7f7f7;
  --table-cell-bg-hover: #f2f2f2;
  --table-cell-border-color: #e6e6e6;
  --table-cell-bg-drop-ready: color-mix(in srgb, #0279b1 5%, #f7f7f7 95%);
  --table-cell-header-bg: #f2f2f2;
  --table-cell-structure-side-header-bg: #f7f7f7;
  --table-cell-header-bg-hover: #f2f2f2;
  --card-bg: #fff;
  --card-bg-hover: #fff;
  --page-scene-bg: #fff;
  --page-scene-bg-hover: #fff;
  --page-editor-marker-bg: #fff;
  --page-editor-marker-bg-hover: #fff;
  --dragging-item-bg: #fff;
  --draggable-item-bg: #fff;
  --draggable-item-border-color: #e6e6e6;
  --draggable-item-bg-hover: #fff;
  --draggable-item-shadow: 0 0 0 1px #d4d4d4, 0 6px 6px -5px rgba(0, 0, 0, 0.1);
  --draggable-item-shadow-disabled: 0 0 0 1px #d4d4d4;
  --draggable-item-shadow-hover: 0 0 0 1px #d4d4d4, 0 9px 13px -7px rgba(0, 0, 0, 0.15);
  --draggable-item-dragging-clone-shadow: 0 0 0 1px #d4d4d4;
  --draggable-item-drop-zone-bg: #f9f9f9;
  --draggable-item-drop-zone-border-color: #d4d4d4;
  --draggable-item-drop-target-bg: #fff;
  --draggable-item-drop-target-border-color: #4caf50;
  --draggable-item-drop-target-text-color: #004d6e;
  --folder-bg: #a0aeb5;
  --folder-flap-bg: #c6cdd2;
  --folder-thumb-bg: #a0aeb5;
  --tag-bg: #f2f2f2;
  --tag-color: #525252;
  --info-container-bg: #015f8a;
  --premium-text-color: #22a86d;
  --team-text-color: #835bc9;
  --scrollbar-bg: #f9f9f9;
  --scrollbar-thumb-bg: #d4d4d4;
  --scrollbar-thumb-bg-hover: #a3a3a3;
  --success-message-bg: color-mix(in srgb, #4caf50 50%, transparent 100%);
  --success-message-border-color: color-mix(in srgb, #388e3c 50%, transparent 100%);
  --success-message-text-color: color-mix(in srgb, #388e3c 100%, var(--text-color-primary) 75%);
  --danger-message-bg: color-mix(in srgb, #f44336 50%, transparent 100%);
  --danger-message-border-color: color-mix(in srgb, #d32f2f 50%, transparent 100%);
  --danger-message-text-color: color-mix(in srgb, #d32f2f 50%, var(--text-color-primary) 50%);
  --writing-section-label-color: #525252;
  --writing-input-label-color: #737373;
  --slider-input-track-bg: #f7f7f7;
  --slider-input-track-bg-hover: #f2f2f2;
  --add-item-button-bg: #f7f7f7;
  --add-item-button-bg-hover: #f2f2f2;
  --add-item-button-border-color: #d4d4d4;
  --add-item-button-text-color: #737373;
  --tooltip-bg: #222428;
  --drop-zone-action--shadow: 0 14px 65px rgba(63, 23, 23, 0.46);
  --drop-zone-action--delete-bg-color: rgba(198, 78, 78, 0.8);
  --drop-zone-action--delete-dashed-border-color: rgba(255, 255, 255, 0.75);
  --drop-zone-action--delete-icon-color: #f0dede;
  --drop-zone-action--delete-drop-state-icon-color: #ffffff;
  --drop-zone-action--delete-static-state-border-color: rgba(255, 255, 255, 0);
  --drop-zone-action--delete-drop-state-border-color: #ffabac;
  --drop-zone-action--delete-drop-state-bg-color: #db7171;
  --story-event-input-bg: var(--surface-color-2);
  --story-event-input-bg-dilution: 50%;
  --story-event-input-bg-hover: var(--surface-color-2);
  --story-event-input-bg-dilution-hover: 40%;
  --story-event-input-bg-focus: var(--surface-color-2);
  --story-event-input-bg-dilution-focus: 95%;
  --story-event-input-border-dilution-focus: 5%;
  --story-event-input-shadow-opacity-focus: 0.08;
  --tag-display-bg: #e6e6e6;
  --text-editor-button-bg-selected: color-mix(in srgb, #909d9d 20%, transparent 80%);
  --character-scene-count-tag-bg: #d2edfd;
  --character-line-count-tag-bg: #dcedd4;
  --character-tag-color: #525252;
  --search-result-bg: #f9f9f9;
  --search-result-bg--even: #f2f2f2;
  --search-result-highlight-color: #000;
  --search-result-highlight-bg: #fff8c3;
  --message-container-bg--warning: #fff3d7;
  --message-container-border-color--warning: #ffde85;
}
[data-ui-theme="dark"] {
  --home-page-masthead-filter: brightness(0.25) contrast(1.3);
  --masthead-table-trim: linear-gradient(270deg, rgb(27 29 30) 0%, rgb(46 46 46) 100%);
  --masthead-table-apron: linear-gradient(180deg, #2d3037, #2d3037);
  --story-viewer-header-bg-color: #222326;
  --story-viewer-header-border-color: #292c30;
  --story-viewer-header-logo-color: #f7f7f7;
  --story-viewer-header-color: #d4d4d4;
  --story-viewer-header-button-color-hover: #e6e6e6;
  --story-viewer-header-button-color-active: #fff;
  --story-viewer-header-button-color-selected: #fff;
  --story-viewer-header-button-bg-hover: #313439;
  --story-viewer-header-button-bg-active: rgba(255, 255, 255, 0.1);
  --story-viewer-header-button-bg-selected: #0279b1;
  --story-viewer-divider-color: #d4d4d4;
  --story-viewer-header-bg-color--home: #0f0f0f;
  --story-viewer-header-border-color--home: #262626;
  --story-viewer-header-logo-color--home: #f7f7f7;
  --story-viewer-header-color--home: #e6e6e6;
  --story-viewer-header-button-color-hover--home: #e6e6e6;
  --story-viewer-header-button-bg-hover--home: #525252;
  --story-viewer-header-button-bg-selected--home: #004d6e;
  --loading-spinner-image: url(/web-app/img/pw_logo_spinner.gif);
  --scene-image-placeholder: url(/web-app/img/empty_image_placeholders/no_scene_image_darker.png);
  --character-image-placeholder: url(/web-app/img/no_character_image.png);
  --emotive-scene-image-placeholder: url(/web-app/img/empty_image_placeholders/no_scene_image_darker.png);
  --story-image-placeholder: url(/web-app/img/empty_image_placeholders/no_story_image_placeholder_darker.png);
  --grouped-characters-icon: url(/web-app/img/grouped_characters_dark_icon.png);
  --act-color-dilution: 35%;
  --act-header-color-dilution: 60%;
  --act-header-border-color-dilution: 15%;
  --chart-color-dilution: 40%;
  --stats-color-dilution: 20%;
  --scene-navigator-marker-dilution: 30%;
  --chart-color-bkg: rgba(255, 255, 255, 0.1);
  --connection-color-dilution: 75%;
  --scene-navigator-bg: #000;
  --scene-navigator-dilution: 55%;
  --connection-nav-opacity: 0.4;
  --connection-nav-opacity-hover: 0.2;
  --image-bg-color: #27292c;
  --image-bg-color-hover: #292c30;
  --story-image-bg-color: #27292c;
  --page-break-shadow-top-color: rgba(0, 0, 0, 0.3);
  --page-break-shadow-bottom-color: rgba(0, 0, 0, 0.2);
  --pages-top-shadow-color: rgba(0, 0, 0, 0.2);
  --skeleton-bg-color-stop-1: #292c30;
  --skeleton-bg-color-stop-2: #313439;
  --surface-color-0: #1c1d20;
  --surface-color-0-hover: #222326;
  --surface-color-1: #222326;
  --surface-color-2: #222428;
  --surface-color-2-1: color-mix(in srgb, var(--surface-color-2) 100%, #000 10%);
  --surface-color-2-2: color-mix(in srgb, var(--surface-color-2) 100%, #000 60%);
  --surface-color-2-hover: #27292c;
  --surface-color-3: #292c30;
  --surface-color-3-hover: #313439;
  --surface-color-3-1: color-mix(in srgb, var(--surface-color-3) 100%, #000 10%);
  --surface-color-4: #2c2e31;
  --surface-color-4-1: color-mix(in srgb, var(--surface-color-4) 100%, #000 10%);
  --surface-color-4-2: color-mix(in srgb, var(--surface-color-4) 100%, #000 20%);
  --text-color-primary: color-mix(in srgb, #fff 100%, #070808 15%);
  --text-color-secondary: color-mix(in srgb, #fff 100%, #070808 30%);
  --text-color-tertiary: color-mix(in srgb, #fff 100%, #070808 50%);
  --text-color-muted: color-mix(in srgb, #fff 100%, #070808 100%);
  --text-color-disabled: color-mix(in srgb, #fff 40%, #070808 80%);
  --icon-color-primary: #fff;
  --icon-color-secondary: color-mix(in srgb, #fff 100%, #070808 10%);
  --icon-color-tertiary: color-mix(in srgb, #fff 100%, #070808 30%);
  --icon-color-muted: color-mix(in srgb, #fff 100%, #070808 50%);
  --icon-color-disabled: color-mix(in srgb, #fff 100%, #070808 100%);
  --surface-color-0-divider-color: #292c30;
  --surface-color-1-divider-color: #292c30;
  --surface-color-2-divider-color: #2c2e31;
  --surface-color-3-divider-color: #313439;
  --surface-color-4-divider-color: #232528;
  --dropdown-items-bg: var(--surface-color-4);
  --dropdown-items-bg-hover: var(--surface-color-4-2);
  --dropdown-shadow: 0 0 0 1px #525252, 0 16px 18px -5px rgba(0, 0, 0, 0.18);
  --primary-text-color: #4ec6fd;
  --primary-text-color-hover: #81d6fe;
  --danger-text-color: #ef5350;
  --primary-button-bg: #0279b1;
  --primary-button-bg-hover: #029ce3;
  --secondary-button-bg: #464b55;
  --secondary-button-bg-hover: #505662;
  --secondary-button-color: #d4d5d7;
  --secondary-button-color-hover: #ffffff;
  --success-button-bg: #43a047;
  --success-button-bg-hover: #388e3c;
  --danger-button-bg: #5a3f44;
  --danger-button-bg-hover: #69494f;
  --danger-button-color: #ffd6d5;
  --danger-button-color-hover: #ffe6e5;
  --transparent-button-color: #03a9f4;
  --toggle-inactive-bg: #737373;
  --toggle-inactive-bg-hover: #a3a3a3;
  --toggle-active-bg: #029ce3;
  --toggle-active-bg-hover: #0279b1;
  --radio-inactive-bg: #525252;
  --radio-inactive-bg-hover: #737373;
  --radio-active-bg: #029ce3;
  --radio-active-bg-hover: #0279b1;
  --form-text-input-bg: #1c1d20;
  --form-text-input-bg-hover: #161719;
  --form-text-input-bg-focus: #161719;
  --form-text-input-border-color: #3f4349;
  --form-text-input-border-color-focus: #015f8a;
  --form-text-input-border-color-error: #f44336;
  --form-text-input-placeholder-color: #3f4349;
  --text-input-bg: #313439;
  --marker-cell-bg: #222326;
  --marker-cell-text-mixin: #fff;
  --marker-cell-text-mixin-dilution: 0%;
  --marker-cell-border-color: #35383d;
  --table-loading-gradient: linear-gradient(90deg, #3f4349, #070808, #3f4349, #070808, #3f4349);
  --table-cell-bg: #222428;
  --table-cell-bg-hover: #27292c;
  --table-cell-border-color: #2c2e31;
  --table-cell-bg-drop-ready: color-mix(in srgb, #029ce3 10%, #222428 90%);
  --table-cell-header-bg: #222326;
  --table-cell-structure-side-header-bg: #232528;
  --table-cell-header-bg-hover: #27292c;
  --card-bg: #222428;
  --card-bg-hover: #27292c;
  --page-scene-bg: #222428;
  --page-scene-bg-hover: #27292c;
  --page-editor-marker-bg: #222428;
  --page-editor-marker-bg-hover: #27292c;
  --dragging-item-bg: #35383d;
  --draggable-item-bg: #313439;
  --draggable-item-border-color: #3f4349;
  --draggable-item-bg-hover: #35383d;
  --draggable-item-dropdown-bg: #222428;
  --draggable-item-dropdown-bg-hover: #27292c;
  --draggable-item-dropdown-selected-bg: #1c1d20;
  --draggable-item-dropdown-color: #f7f7f7;
  --draggable-item-dropdown-color-hover: #f7f7f7;
  --draggable-item-dropdown-color-selected: #fff;
  --draggable-item-shadow: 0 0 0 1px #3f4349, 0 6px 6px -5px rgba(0, 0, 0, 0.1);
  --draggable-item-shadow-disabled: 0 0 0 1px #3f4349;
  --draggable-item-shadow-hover: 0 0 0 1px #3f4349, 0 9px 13px -7px rgba(0, 0, 0, 0.15);
  --draggable-item-dragging-clone-shadow: 0 0 0 1px #3f4349;
  --draggable-item-drop-zone-bg: #292c30;
  --draggable-item-drop-zone-border-color: #4a4f57;
  --draggable-item-drop-target-bg: #222428;
  --draggable-item-drop-target-border-color: #004d6e;
  --draggable-item-drop-target-text-color: #029ce3;
  --folder-bg: #35383d;
  --folder-flap-bg: #3f4349;
  --folder-thumb-bg: #4a4f57;
  --tag-bg: #313439;
  --tag-color: #f7f7f7;
  --info-container-bg: #313439;
  --premium-text-color: #2bd48b;
  --team-text-color: #a081d5;
  --scrollbar-bg: #292c30;
  --scrollbar-thumb-bg: #3f4349;
  --scrollbar-thumb-bg-hover: #5e646e;
  --success-message-bg: color-mix(in srgb, #4caf50 50%, transparent 100%);
  --success-message-border-color: color-mix(in srgb, #388e3c 50%, transparent 100%);
  --success-message-text-color: color-mix(in srgb, #388e3c 65%, var(--text-color-primary) 100%);
  --danger-message-bg: color-mix(in srgb, #f44336 50%, transparent 100%);
  --danger-message-border-color: color-mix(in srgb, #d32f2f 50%, transparent 100%);
  --danger-message-text-color: color-mix(in srgb, #d32f2f 30%, var(--text-color-primary) 100%);
  --writing-section-label-color: #a3a3a3;
  --writing-input-label-color: #a3a3a3;
  --slider-input-track-bg: #1c1d20;
  --slider-input-track-bg-hover: #161719;
  --add-item-button-bg: #222428;
  --add-item-button-bg-hover: #292c30;
  --add-item-button-border-color: #525252;
  --add-item-button-text-color: #5e646e;
  --tooltip-bg: #000;
  --drop-zone-action--shadow: 0 14px 65px rgba(0, 0, 0, 0.46);
  --drop-zone-action--delete-bg-color: rgba(135, 57, 57, 0.8);
  --drop-zone-action--delete-dashed-border-color: rgba(190, 136, 136, 0.75);
  --drop-zone-action--delete-icon-color: #ffb8b8;
  --drop-zone-action--delete-drop-state-icon-color: white;
  --drop-zone-action--delete-static-state-border-color: rgba(255, 255, 255, 0);
  --drop-zone-action--delete-drop-state-border-color: rgba(101, 35, 36, 0.77);
  --drop-zone-action--delete-drop-state-bg-color: #ff7b7b;
  --story-event-input-bg: var(--surface-color-2);
  --story-event-input-bg-dilution: 68%;
  --story-event-input-bg-hover: var(--surface-color-2);
  --story-event-input-bg-dilution-hover: 60%;
  --story-event-input-bg-focus: var(--surface-color-2);
  --story-event-input-bg-dilution-focus: 83%;
  --story-event-input-border-dilution-focus: 30%;
  --story-event-input-shadow-opacity-focus: 0.15;
  --tag-display-bg: #313439;
  --text-editor-button-bg-selected: #35383d;
  --character-scene-count-tag-bg: #004d6e;
  --character-line-count-tag-bg: #145d32;
  --character-tag-color: #e6e6e6;
  --search-result-bg: #313439;
  --search-result-bg--even: #292c30;
  --search-result-highlight-color: #000;
  --search-result-highlight-bg: #fff8c3;
  --message-container-bg--warning: #39382d;
  --message-container-border-color--warning: #5d5832;
}
/*//////////////////////////*/
/*/ ////////RESETS///////////*/
/*//////////////////////////*/
[contenteditable="true"] {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  -webkit-user-modify: read-write;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  -webkit-tap-highlight-color: transparent;
}
html {
  font-size: 62.5%;
  background: var(--surface-color-0);
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  color: var(--text-color-primary);
  font-family: "Open Sans", helvetica, sans-serif;
  overflow-x: hidden;
}
body {
  background: var(--surface-color-0);
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  margin: 0;
  overscroll-behavior-x: none;
  overflow-x: hidden;
}
body.viewing {
  height: 100%;
  position: fixed;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
pre {
  font-family: "Open Sans", helvetica, sans-serif;
}
.swapping * {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: transparent;
  cursor: pointer;
  outline: none;
}
/*/ /////////////////////////*/
/*/////UTILITY CLASSES//////*/
/*/ /////////////////////////*/
/* Row */
.pos-item-container--row {
  display: flex;
  flex-flow: row;
}
/* Column */
.pos-item-container--column {
  display: flex;
  flex-flow: column;
}
/* Align Content */
.pos-item-container--space-between {
  display: flex;
  justify-content: space-between;
}
.pos-item-container--space-around {
  display: flex;
  justify-content: space-around;
}
.pos-item-container--center {
  display: flex;
  justify-content: center;
}
.pos-item-container--start {
  display: flex;
  justify-content: flex-start;
}
.pos-item-container--end {
  display: flex;
  justify-content: flex-end;
}
.pos-item-container--wrap {
  display: flex;
  flex-wrap: wrap;
}
.pos-item-container--align-center {
  display: flex;
  align-items: center;
}
.pos-item {
  display: flex;
}
.translate-center {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pointer-all {
  pointer-events: all !important;
}
.link-wrapper {
  display: inline-block;
  text-decoration: none;
}
.pos-rel {
  position: relative !important;
}
.fit-content {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.full-width {
  width: 100% !important;
}
.full-height {
  height: 100% !important;
}
.all-caps,
.caps {
  text-transform: uppercase !important;
}
.capitalize {
  text-transform: capitalize !important;
}
.txt--left {
  text-align: left !important;
}
.txt--center {
  text-align: center !important;
}
.txt--right {
  text-align: right !important;
}
.txt--uc {
  text-transform: uppercase !important;
}
.txt--b {
  font-weight: bold !important;
}
.txt--n {
  font-weight: normal !important;
}
.cap {
  text-transform: capitalize !important;
}
.txt--pre-line {
  white-space: pre-line;
}
.transition-all--normal {
  transition: all 200ms;
}
.transition-all--slow {
  transition: all 400ms;
}
.blur-background {
  position: absolute;
  left: -4rem;
  top: -4rem;
  right: calc(-4rem * 2);
  bottom: calc(-4rem * 2);
  -webkit-filter: blur(2rem);
          filter: blur(2rem);
}
/* Padding */
.p-dbl-wide {
  padding: 6rem !important;
}
.p-wide {
  padding: 4rem !important;
}
.p-thick {
  padding: 3rem !important;
}
.p-normal {
  padding: 2rem !important;
}
.p-thin {
  padding: 1rem !important;
}
.p-thinner {
  padding: 0.57142857rem !important;
}
.p-super-thin {
  padding: 0.2rem !important;
}
.p-none {
  padding: 0 !important;
}
/* Padding Left */
.pl-dbl-wide {
  padding-left: 6rem !important;
}
.pl-wide {
  padding-left: 4rem !important;
}
.pl-normal {
  padding-left: 2rem !important;
}
.pl-average {
  padding-left: 1.33333333rem !important;
}
.pl-thin {
  padding-left: 1rem !important;
}
.pl-thinner {
  padding-left: 0.57142857rem !important;
}
.pl-super-thin {
  padding-left: 0.2rem !important;
}
/* Padding Top */
.pt-dbl-wide {
  padding-top: 6rem !important;
}
.pt-wide {
  padding-top: 4rem !important;
}
.pt-thick {
  padding-top: 3rem !important;
}
.pt-normal {
  padding-top: 2rem !important;
}
.pt-thin {
  padding-top: 1rem !important;
}
.pt-thinner {
  padding-top: 0.57142857rem !important;
}
.pt-super-thin {
  padding-top: 0.2rem !important;
}
/* Padding Right */
.pr-dbl-wide {
  padding-right: 6rem !important;
}
.pr-thick {
  padding-right: 3rem !important;
}
.pr-wide {
  padding-right: 4rem !important;
}
.pr-wider {
  padding-right: 5rem !important;
}
.pr-normal {
  padding-right: 2rem !important;
}
.pr-average {
  padding-right: 1.33333333rem !important;
}
.pr-thin {
  padding-right: 1rem !important;
}
.pr-thinner {
  padding-right: 0.57142857rem !important;
}
.pr-super-thin {
  padding-right: 0.2rem !important;
}
/* Padding Bottom */
.pb-dbl-wide {
  padding-bottom: 6rem !important;
}
.pb-wide {
  padding-bottom: 4rem !important;
}
.pb-thick {
  padding-bottom: 3rem !important;
}
.pb-normal {
  padding-bottom: 2rem !important;
}
.pb-thin {
  padding-bottom: 1rem !important;
}
.pb-thinner {
  padding-bottom: 0.57142857rem !important;
}
.pb-super-thin {
  padding-bottom: 0.2rem !important;
}
/* Margin */
.m-dbl-wide {
  margin: 6rem !important;
}
.m-wide {
  margin: 4rem !important;
}
.m-thick {
  margin: 3rem !important;
}
.m-normal {
  margin: 2rem !important;
}
.m-thin {
  margin: 1rem !important;
}
.m-thinner {
  margin: 0.57142857rem !important;
}
.m-super-thin {
  margin: 0.2rem !important;
}
.m-none {
  margin: 0 !important;
}
.mt-dbl-wide {
  margin-top: 6rem !important;
}
.mt-wide {
  margin-top: 4rem !important;
}
.mt-wider {
  margin-top: 5rem !important;
}
.mt-thick {
  margin-top: 3rem !important;
}
.mt-normal {
  margin-top: 2rem !important;
}
.mt-thin {
  margin-top: 1rem !important;
}
.mt-thinner {
  margin-top: 0.57142857rem !important;
}
.mt-super-thin {
  margin-top: 0.2rem !important;
}
.mb-dbl-wide {
  margin-bottom: 6rem !important;
}
.mb-wide {
  margin-bottom: 4rem !important;
}
.mb-wider {
  margin-bottom: 5rem !important;
}
.mb-thick {
  margin-bottom: 3rem !important;
}
.mb-normal {
  margin-bottom: 2rem !important;
}
.mb-thin {
  margin-bottom: 1rem !important;
}
.mb-thinner {
  margin-bottom: 0.57142857rem !important;
}
.mb-super-thin {
  margin-bottom: 0.2rem !important;
}
.ml-dbl-wide {
  margin-left: 6rem !important;
}
.ml-wide {
  margin-left: 4rem !important;
}
.ml-wider {
  margin-left: 5rem !important;
}
.ml-thick {
  margin-left: 3rem !important;
}
.ml-normal {
  margin-left: 2rem !important;
}
.ml-thin {
  margin-left: 1rem !important;
}
.ml-thinner {
  margin-left: 0.57142857rem !important;
}
.ml-super-thin {
  margin-left: 0.2rem !important;
}
.mr-dbl-wide {
  margin-right: 6rem !important;
}
.mr-wide {
  margin-right: 4rem !important;
}
.mr-wider {
  margin-right: 5rem !important;
}
.mr-thick {
  margin-right: 3rem !important;
}
.mr-normal {
  margin-right: 2rem !important;
}
.mr-thin {
  margin-right: 1rem !important;
}
.mr-thinner {
  margin-right: 0.57142857rem !important;
}
.mr-super-thin {
  margin-right: 0.2rem !important;
}
.mr-auto {
  margin-right: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
/* Padding Collapse */
.cp-l {
  padding-left: 0 !important;
}
.cp-t {
  padding-top: 0 !important;
}
.cp-r {
  padding-right: 0 !important;
}
.cp-b {
  padding-bottom: 0 !important;
}
.cp-lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cp-tb {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.cp-lt {
  padding-left: 0 !important;
  padding-top: 0 !important;
}
.cp-rb {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.cp-lrb {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.cp-ltr {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
}
.cp-ltb {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.cp-ltrb {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
/* Margin Collapse */
.cm-l {
  margin-left: 0 !important;
}
.cm-t {
  margin-top: 0 !important;
}
.cm-r {
  margin-right: 0 !important;
}
.cm-b {
  margin-bottom: 0 !important;
}
.cm-lr {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cm-tb {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.cm-lt {
  margin-left: 0 !important;
  margin-top: 0 !important;
}
.cm-rb {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.cm-lrb {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.cm-ltr {
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
}
/* Border Radius Collapse */
.cbr-l {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.cbr-r {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Vertical Item Spacing */
/* Top */
.children-fit-content > * {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  flex-basis: unset !important;
  flex-grow: 0 !important;
}
.children-mt-dbl-wide > * {
  margin-top: 6rem;
}
.children-mt-wide > * {
  margin-top: 4rem;
}
.children-mt-normal > * {
  margin-top: 2rem;
}
.children-mt-thin > * {
  margin-top: 1rem;
}
.children-mt-thinner > * {
  margin-top: 0.57142857rem;
}
.children-mt-super-thin > * {
  margin-top: 0.2rem;
}
/* Right */
.children-mr-dbl-wide > * {
  margin-right: 6rem;
}
.children-mr-wide > * {
  margin-right: 4rem;
}
.children-mr-thick > * {
  margin-right: 3rem;
}
.children-mr-normal > * {
  margin-right: 2rem;
}
.children-mr-thin > * {
  margin-right: 1rem;
}
.children-mr-thinner > * {
  margin-right: 0.57142857rem;
}
.children-mr-super-thin > * {
  margin-right: 0.2rem;
}
/* Bottom */
.children-mb-dbl-wide > * {
  margin-bottom: 6rem;
}
.children-mb-wide > * {
  margin-bottom: 4rem;
}
.children-mb-normal > * {
  margin-bottom: 2rem;
}
.children-mb-thin > * {
  margin-bottom: 1rem;
}
.children-mb-thinner > * {
  margin-bottom: 0.57142857rem;
}
.children-mb-super-thin > * {
  margin-bottom: 0.2rem;
}
.fill-width {
  width: 100%;
}
/* Grid Layout */
.grid-column-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
.grid-column-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid-column-span-2 {
  grid-column: span 2;
}
.grid-gap-normal {
  grid-gap: 2rem;
}
.grid-gap-wide {
  grid-gap: 4rem;
}
.grid-gap-thick {
  grid-gap: 3rem;
}
.grid-gap-wider {
  grid-gap: 5rem;
}
.grid-gap-dbl-wide {
  grid-gap: 6rem;
}
/* Flex Layout */
.flx-no-shrink {
  flex-shrink: 0;
}
.flx-1 {
  flex: 1;
}
.flx {
  display: flex;
}
.flx--row {
  display: flex;
  flex-direction: row;
}
.flx--col {
  display: flex;
  flex-direction: column;
}
.flx--wrap {
  display: flex;
  flex-wrap: wrap;
}
.flx--wrap-reverse {
  display: flex;
  flex-flow: wrap-reverse;
}
/* Flex Justify */
.flx-just-start {
  display: flex;
  justify-content: flex-start;
}
.flx-just-center {
  display: flex;
  justify-content: center;
}
.flx-just-end {
  display: flex;
  justify-content: flex-end;
}
.flx-just-even {
  display: flex;
  justify-content: space-evenly;
}
.flx-just-around {
  display: flex;
  justify-content: space-around;
}
.flx-just-between {
  display: flex;
  justify-content: space-between !important;
}
/* Flex Align */
.flx-align-start {
  display: flex;
  align-items: flex-start;
}
.flx-align-center {
  display: flex;
  align-items: center !important;
}
.flx-align-baseline {
  display: flex;
  align-items: baseline;
}
.flx-align-stretch {
  display: flex;
  align-items: stretch;
}
.flx-align-end {
  display: flex;
  align-items: flex-end;
}
.flx-align-self-start {
  align-self: flex-start !important;
}
.flx-align-self-center {
  align-self: center !important;
}
.flx-align-self-end {
  align-self: flex-end !important;
}
/* Flex Gap */
.flx-gap-none {
  gap: 0;
}
.flx-gap-super-thin {
  gap: 0.2rem;
}
.flx-gap-thin {
  gap: 1rem;
}
.flx-gap-thinner {
  gap: 0.7rem;
}
.flx-gap-normal {
  gap: 2rem;
}
.flx-gap-thick {
  gap: 3rem;
}
.flx-gap-wide {
  gap: 4rem;
}
.flx-gap-dbl-wide {
  gap: 6rem;
}
.flx-extend-vertical {
  flex: 1 1 100vh;
}
.flx-extend-vertical-40 {
  flex: 1 1 40vh;
}
.flx-extend-vertical-50 {
  flex: 1 1 50vh;
}
/* Absolute Layouts */
.top-right-wide {
  position: absolute;
  top: 4rem;
  right: 4rem;
}
.fill-parent {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fill-parent-scroller {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-overflow-scrolling: touch;
}
/* Line truncation */
.lc-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}
.w-full {
  width: 100% !important;
}
.inline-block {
  display: inline-block;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.bkg--free {
  background-color: #4191bf;
}
.bkg--premium {
  background-color: #22a86d;
}
.bkg--pro {
  background-color: #03a9f4;
}
.bkg--team {
  background-color: #835bc9;
}
.color--free {
  color: #4191bf;
}
.color--premium {
  color: var(--premium-text-color);
}
.color--pro {
  color: #03a9f4;
}
.color--team {
  color: var(--team-text-color);
}
.professional-box-shadow {
  box-shadow: 0 2px 3px -3px rgba(0, 0, 0, 0.5);
}
.professional-border-bottom {
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.disabled {
  display: none !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
/* Grids */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
/* Flex Auto Sizing */
.flx-auto-full {
  flex-basis: 100%;
  flex-grow: 1;
}
.flx-auto-half {
  flex-basis: calc(calc(calc(76.8rem / 2) - 100%) * 999);
  min-width: calc(76.8rem / 3);
  flex-grow: 1;
}
.flx-auto-third {
  flex-basis: calc(calc(calc(76.8rem / 3) - 100%) * 999);
  min-width: calc(76.8rem / 4);
  flex-grow: 1;
}
.flx-auto-quarter {
  flex-basis: calc(calc(calc(76.8rem / 4) - 100%) * 999);
  min-width: calc(76.8rem / 5);
  flex-grow: 1;
}
.mw-tiny {
  max-width: 9rem;
}
.mw-thin {
  max-width: 35rem;
}
.mw-below-average {
  max-width: 45rem;
}
.mw-average {
  max-width: 55rem;
}
.mw-normal {
  max-width: 60rem;
}
.mw-wide {
  max-width: 76.8rem;
}
.mw-wider {
  max-width: 92rem;
}
.mw-widest {
  max-width: 120rem;
}
.minh-auto {
  min-height: auto !important;
}
.minh-medium {
  min-height: 40rem !important;
}
.align-center {
  display: block;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .height--tall {
    height: 100vh;
  }
  .height--fit {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.bd-thin {
  border-radius: 1rem;
}
.bd-thinner {
  border-radius: 0.57142857rem;
}
.bd-normal {
  border-radius: 2rem;
}
/*///////////////////////////////////////*/
/*/ ///////DIRECT UTILITY CLASSES////////*/
/*//////////////////////////////////////*/
.icon-color-muted {
  color: var(--icon-color-muted);
  fill: var(--icon-color-muted);
}
/*/ /////////////////////////*/
/*/ ///////APP LAYERS////////*/
/*/ /////////////////////////*/
#dropdown-menu-holder,
#rich-text-menu-holder {
  position: absolute;
  z-index: 99999999;
  width: 100vw;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
}
/*/ /////////////////////////*/
/*/ //FRONT-FACING WEBSITE///*/
/*/ /////////////////////////*/
.login-or-signup-button {
  margin: 6px 8px 0 6px;
}
.promotional-pricing-card {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
  border-radius: 0.8rem;
  background: var(--surface-color-2);
}
.promotional-pricing-card-header {
  box-sizing: border-box;
  font-size: 2rem;
  border-radius: 0.8rem 0.8rem 0 0;
}
.promotional-pricing-card-header-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  letter-spacing: 0.05em;
  color: #fff;
}
.promotional-pricing-card-sub-header {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 2rem;
  padding: 0 2rem;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.promotional-pricing-card-header-price {
  font-size: 4.8rem;
  display: flex;
  justify-content: center;
  line-height: 0.8em;
  margin-top: 1.8rem;
  color: #fff;
}
.currency {
  font-size: 0.5em;
  line-height: 1em;
}
.cents {
  font-size: 0.4em;
  line-height: 1em;
}
.promotional-pricing-card-header-price-schedule {
  font-size: 1.333rem;
  color: #fff;
  opacity: 0.9;
  font-weight: bold;
  margin-top: 1.4rem;
  display: block;
}
.promotional-pricing-card-info {
  width: 100%;
  box-sizing: border-box;
}
.promotional-pricing-card-info-text {
  font-size: 1.333rem;
  margin-bottom: 2rem;
}
.promotional-h1 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 4rem;
  color: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .promotional-h1 {
    font-size: 4.8rem;
  }
}
.promotional-h2 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  color: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .promotional-h2 {
    font-size: 4rem;
  }
}
.promotional-h3 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2.4rem;
  line-height: 1.2em;
  color: var(--text-color-primary);
}
.promotional-h4 {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--text-color-muted);
  max-width: 35em;
}
.promotional-p {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 2rem;
  line-height: 1.6em;
  color: var(--text-color-primary);
}
.promotional-p--smaller {
  font-size: 1.6rem;
  line-height: 1.2em;
}
.promotional--lighter {
  color: var(--text-color-secondary);
}
.promotional--masthead {
  color: #f9f9f9;
}
.promotional-p--masthead {
  color: #f2f2f2;
}
@media only screen and (min-width: 768px) {
  .promotional-p {
    font-size: 2.4rem;
  }
  .promotional-p--smaller {
    font-size: 2rem;
    line-height: 1.4em;
  }
}
.promotional-meta {
  display: block;
  font-weight: 300;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #4caf50;
}
.promotional-stamp-text {
  font-family: "Open Sans", helvetica, sans-serif;
  color: #888;
  font-size: 1.2rem;
  text-transform: uppercase;
}
/* Subscription Features */
.promotional-features-list-title {
  font-size: 2.4rem;
  color: var(--text-color-primary);
}
.promotional-feature-item-video-slideshow-wrapper,
.promotional-feature-item-slideshow-content-wrapper {
  display: none;
}
.promotional-feature-item-video-title {
  color: var(--text-color-primary);
  font-size: 2.4rem;
}
.promotional-feature-item-title {
  font-size: 1.6rem;
  color: var(--text-color-primary);
}
.promotional-feature-item-description {
  margin-top: 0.4rem;
}
.promotional-feature-item-tag {
  color: #fff;
  font-size: 0.933rem;
  font-weight: bold;
  border-radius: 0.3rem;
  border: thin solid transparent;
}
.promotional-feature-item-timer {
  display: none;
  width: 14px;
  height: 14px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.promotional-feature-item-timer-circle {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 10px;
  stroke-dasharray: calc(0 * 31.42 / 100) 31.42;
}
.promotional-features-slideshow-holder {
  padding: 3rem 1rem;
}
@media only screen and (min-width: 768px) {
  .promotional-features-slideshow-holder {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 6rem;
  }
  .promotional-feature-item-video {
    display: none;
  }
  .promotional-features-video-holder {
    min-height: 65rem;
  }
  .promotional-feature-item-video-slideshow-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 62.5%;
    display: block;
    border-radius: 1rem;
    box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.1);
  }
  .promotional-feature-item-slideshow-content-wrapper {
    display: block;
  }
  .promotional-feature-item-video-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .promotional-feature-item-description {
    display: none;
  }
  .selected .promotional-feature-item-tag {
    border-color: rgba(255, 255, 255, 0.36);
  }
  /*.promotional-feature-item-tags-holder {*/
  /*    display: none;*/
  /*}*/
}
.promotional-feature-item {
  padding: 0.8rem;
  margin: 0.4rem 0 0.4rem -1rem;
  border-radius: 0.6rem;
  border: thin solid transparent;
  transition: all 500ms;
}
@media only screen and (min-width: 768px) {
  .promotional-feature-item:hover {
    cursor: pointer;
    background: var(--surface-color-2-hover);
    border: thin solid var(--surface-color-2-divider-color);
  }
  .selected .promotional-feature-item-title {
    color: #fff;
  }
  .promotional-feature-item.selected {
    pointer-events: none;
    background: var(--primary-button-bg);
    border-color: var(--primary-button-bg);
    color: #fff;
  }
  .selected .promotional-feature-item-timer {
    display: block;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.05);
  }
}
/* Promotional Components */
.promotional-label {
  font-size: 2.4rem;
  color: var(--text-color-primary);
  font-family: "Work Sans", "Open Sans", sans-serif;
}
.promotional-banner-wrapper {
  padding: clamp(calc(4rem * 0.25), 3vw, 2rem) clamp(calc(4rem * 0.5), 4vw, 4rem);
}
.promotional-banner {
  padding: 2rem 0;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.promotional-signup {
  display: flex;
  max-width: 500px;
  border-radius: 100px;
}
.promotional-signup-input {
  width: 100%;
  padding: 1.2em 1em 1.2em 1.2em;
  border-radius: 10rem 0 0 10rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 4.6rem;
  font-size: 1.2rem;
  outline: none;
  border: thin solid var(--form-text-input-border-color);
  border-right: none;
  transition: all 200ms;
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  background: var(--form-text-input-bg);
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
.promotional-signup-input:focus {
  border-color: var(--form-text-input-border-color-focus);
}
@media only screen and (min-width: 768px) {
  .promotional-signup-input {
    font-size: 1.6rem;
  }
}
.promotional-signup-input::-webkit-input-placeholder {
  color: var(--text-color-tertiary);
}
.promotional-signup-input::-moz-placeholder {
  color: var(--text-color-tertiary);
}
.promotional-signup-input::placeholder {
  color: var(--text-color-tertiary);
}
.promotional-signup-button {
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: none;
  padding: 0.1em 1.8rem 0 1.4rem;
  background: var(--primary-button-bg);
  border: thin solid var(--primary-button-bg);
  color: #fff;
  font-size: 1.2rem;
  height: 4.6rem;
  white-space: nowrap;
  border-radius: 0 10rem 10rem 0;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .promotional-signup-button {
    font-size: 1.6rem;
  }
}
.promotional-signup-button:hover {
  background: var(--primary-button-bg-hover);
}
.promotional-ghost-button {
  padding: 1.4em 1.6em 1.3em;
  border: 0.1rem solid currentColor;
  border-radius: 0.6rem;
  display: inline-block;
  margin: 0 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: #03a9f4;
  min-width: 13rem;
  text-decoration: none;
  text-align: center;
  transition: all 200ms;
}
.promotional-ghost-button--writers {
  color: #26719a;
}
.promotional-ghost-button--creators {
  color: #ce3c84;
}
.promotional-ghost-button--companies {
  color: #4caf50;
}
.promotional-ghost-button--educators {
  color: #e58f10;
}
@media only screen and (min-width: 768px) {
  .promotional-ghost-button--writers:hover {
    background: rgba(38, 113, 154, 0.1);
  }
  .promotional-ghost-button--creators:hover {
    background: rgba(206, 60, 132, 0.1);
  }
  .promotional-ghost-button--companies:hover {
    background: rgba(76, 175, 80, 0.1);
  }
  .promotional-ghost-button--educators:hover {
    background: rgba(229, 143, 16, 0.1);
  }
}
.promotional-signup-call-to-action-title {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.6rem;
  height: 1.3em;
  color: var(--text-color-tertiary);
  padding: 0 0.8rem 0 0;
  display: inline-block;
}
.promotional-signup-call-to-action-button {
  width: 36px;
  height: 36px;
  margin: 0 5px;
  border-radius: 50%;
  transition: all 200ms;
}
.promotional-signup-call-to-action-button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.promotional-signup-call-to-action-button-icon {
  fill: #fff;
}
.promotional-signup-call-to-action-button--google {
  background: #ea4435;
}
.promotional-signup-confirmation-wrapper {
  color: var(--text-color-primary);
  font-size: 18px;
  margin: 4rem auto 0;
  padding: 2rem 3rem;
  border-radius: 0.8rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  box-sizing: border-box;
}
.promotional-signup-confirmation-header {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
}
.promotional-signup-confirmation-body {
  font-size: 2rem;
  display: block;
  font-weight: 900;
  color: var(--text-color-primary);
}
.promotional-signup-confirmation-gmail-warning {
  padding: 15px 18px;
  box-sizing: border-box;
  border-radius: 6px;
  color: var(--text-color-primary);
}
.promotional-signup-confirmation-gmail-warning-body {
  font-size: 14px;
  display: block;
  margin: 0;
  color: var(--text-color-primary);
}
/* Promotional Color Cards */
.promotional-color-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 200ms;
}
.promotional-color-card-ribbon {
  position: absolute;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  right: 0;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  top: 65px;
  color: var(--text-color-muted);
  padding: 7px 28px 6px;
  box-sizing: border-box;
  background: #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.promotional-color-card-ribbon--warning {
  background: #ffcc80;
}
.promotional-color-card-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  display: block;
  color: var(--text-color-primary);
}
.promotional-color-card-description {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 2rem;
  display: block;
  color: var(--text-color-primary);
}
.promotional-color-card--purple {
  background: #886fc4;
}
.promotional-color-card--violet {
  background: #6b79c0;
}
.promotional-color-card--blue {
  background: #64a7ef;
}
.promotional-color-card--teal {
  background: #79c9db;
}
.promotional-color-card--clickable {
  cursor: pointer;
}
.promotional-color-card--clickable:hover {
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
}
/* Promotional Library Cards */
.prewrite-ff-video-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(255,255,255,0.9);*/
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999999999;
  opacity: 0;
  pointer-events: none;
}
.showing-video .prewrite-ff-video-overlay {
  opacity: 1;
  pointer-events: all;
}
.video-wrapper {
  display: flex;
  margin: auto;
  align-items: center;
  width: calc(100vw - 10rem);
  max-width: 120rem;
  height: 100%;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  width: 100%;
  height: 0;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.3);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.desk-perspective-layer {
  -webkit-perspective: 2080px;
          perspective: 2080px;
  -webkit-perspective-origin: center bottom;
          perspective-origin: center bottom;
  position: absolute;
  margin: 10rem auto 0;
}
.desk-wall-bkg-holder {
  position: absolute;
  width: 100vw;
  height: 100vh;
  min-height: 110rem;
  overflow: hidden;
  left: 0;
  bottom: 0;
  z-index: -1;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.desk-wall-bkg-image {
  position: absolute;
  top: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  left: -15px;
  background: radial-gradient(transparent, rgba(0, 0, 0, 0.12)), radial-gradient(transparent, rgba(0, 0, 0, 0.12)), url(../img/brick_wall_bkg.jpg);
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: var(--home-page-masthead-filter);
          filter: var(--home-page-masthead-filter);
}
.desk-3d-layer {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  height: calc((70vw * 0.625) + 6.25vw);
  width: 100vw;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .desk-3d-layer {
    height: calc((45vw * 0.625) + 4.25vw);
  }
}
.desk-surface {
  position: absolute;
  left: 50%;
  width: 100%;
  height: 4vw;
  bottom: 0;
  background: #efefef;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.12) 10%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.12) 90%, rgba(0, 0, 0, 0.23) 100%), linear-gradient(344deg, var(--surface-color-0), var(--surface-color-4));
}
.desk-surface-edge {
  position: absolute;
  width: 100%;
  top: 100%;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  /*transform: rotateX(-90deg);*/
}
.desk-surface-edge-trim {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2vw;
  /*border-bottom: thin solid rgba(51, 51, 51, 0.1);*/
  /*border-top: 1px solid rgba(255, 255, 255, 0.6);*/
  background: var(--masthead-table-trim);
}
.desk-surface-edge-apron {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 6vw;
  background: var(--masthead-table-apron);
}
.desk-surface-edge-apron-shadow {
  height: 3.5vw;
  -webkit-filter: blur(0.6vw);
          filter: blur(0.6vw);
  width: 100%;
  height: 3vw;
  background: #000;
  -webkit-filter: blur(0.36vw);
          filter: blur(0.36vw);
  opacity: 0.12;
}
.prewrite-ff-layout-promotional-library-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-promotional-library-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
  }
}
.promotional-library-card-link-wrapper {
  text-decoration: none;
}
.promotional-library-card {
  color: var(--text-color-primary);
  text-align: left;
  padding: 1.4rem;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 200ms;
}
.promotional-library-card:hover {
  background: var(--surface-color-2);
}
.promotional-library-card-content-image-holder {
  position: relative;
  padding-top: 100%;
  width: 100%;
}
.promotional-library-card-content-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.6rem;
}
.promotional-library-card-content-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2rem;
  line-height: 0.9em;
  color: inherit;
  text-transform: uppercase;
  font-weight: bolder;
  margin-top: 1rem;
  display: block;
  text-decoration: none;
  transition: color 200ms;
}
.promotional-library-card-content-info {
  margin-top: 2rem;
  font-family: "Teko", "Open Sans", sans-serif;
  font-size: 2rem;
  line-height: 1.2em;
  color: var(--text-color-muted);
  white-space: pre-wrap;
  word-break: break-word;
  text-decoration: none;
}
/* Promotional Icon Button */
.promotional-icon-button {
  background: var(--secondary-button-bg);
  color: var(--secondary-button-bg);
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 200ms;
}
.promotional-icon-button:hover {
  background: var(--secondary-button-bg-hover);
  color: var(--secondary-button-bg-hover);
}
.promotional-icon-button-icon {
  fill: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.promotional-icon-button-label {
  font-size: 0.933rem;
  color: inherit;
  text-transform: uppercase;
  position: absolute;
  top: 100%;
  left: 50%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transform: translate(-50%, 75%);
          transform: translate(-50%, 75%);
}
/* Promotional Form Buttons */
.promotional-form-button {
  position: relative;
  font-size: 1.6rem;
  text-decoration: none;
  padding: 0.8em 1.4em 0.7em;
  border-radius: 2em;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
  transition: all 200ms;
}
.promotional-form-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.promotional-form-button:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.promotional-form-button--larger {
  font-size: 2rem;
}
.promotional-form-button:active,
.promotional-form-button:focus {
  box-shadow: 0 0 0 1px white, 0 0 0 3px #05a9f4;
}
.promotional-form-button--primary {
  color: #fff;
  font-weight: bold;
  background: var(--primary-button-bg);
}
.promotional-form-button--dark {
  color: var(--secondary-button-color);
  background: var(--secondary-button-bg);
  border: thin solid var(--text-color-tertiary);
}
.promotional-form-button-spinner,
.promotional-form-button-spinner::after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.promotional-form-button-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 4px solid rgba(255, 255, 255, 0.2);
  border-right: 4px solid rgba(255, 255, 255, 0.2);
  border-bottom: 4px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid #fff;
  -webkit-animation: spin 1.1s infinite linear;
          animation: spin 1.1s infinite linear;
  display: none;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Promotional Social Proof */
.promotional-social-proof-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.promotional-social-proof-card-header {
  height: 5rem;
  position: relative;
  width: 100%;
}
.promotional-social-proof-card-header-image {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 5px solid var(--surface-color-4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.promotional-social-proof-card-content {
  position: relative;
  padding: 8rem 2.8rem 2.4rem;
  background: var(--surface-color-2);
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 0.8rem;
}
.promotional-social-proof-card-content-quote {
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-secondary);
  font-style: italic;
  font-size: 2rem;
}
.promotional-social-proof-card-content-name {
  display: block;
  font-size: 2.4rem;
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: var(--text-color-muted);
  margin-top: 2rem;
}
.promotional-social-proof-card-content-details {
  display: block;
  font-size: 1.333rem;
  color: var(--text-color-muted);
}
.promotional-social-proof-card-content-quote-icon {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 3rem;
  height: 3rem;
  fill: var(--surface-color-2-divider-color);
}
/* Promotional FAQ Item */
.promotional-faq-item {
  text-align: left;
}
.promotional-pop {
  color: var(--primary-button-bg);
}
/* Promotional FAQ Items (Sam move here from inline <style>) */
.promotional-faq-items-holder {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.promotional-faq-question {
  font-size: 1.6rem;
  color: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .promotional-faq-items-holder {
    display: grid;
    grid-gap: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  }
}
.promotional-faq-answer {
  margin-top: 1rem;
  font-size: 1.333rem;
  line-height: 1.6em;
  color: var(--text-color-tertiary);
}
.prewrite-ff-layout-section--faqs {
  background: var(--surface-color-2);
  border-top: thin solid var(--surface-color-1-divider-color);
  border-bottom: thin solid var(--surface-color-1-divider-color);
}
/* //////////////////////////////////////////// */
/* ////////////////RETRO STYLE///////////////// */
/* //////////////////////////////////////////// */
.retro-button {
  outline: none;
  position: relative;
  font-size: 1.333rem;
  padding: 0.8em 1.2em;
  cursor: pointer;
  min-width: 7rem;
  text-decoration: none;
  border: thin solid transparent;
  border-radius: 3px;
  transition: all 200ms;
}
.retro-button:hover {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.retro-button--secondary {
  color: #403f3b;
  background: #c4c2bc;
  border-color: #c4c2bc;
}
.prewrite-ff-layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  top: 0;
  width: 100%;
  z-index: 999;
  position: fixed;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}
.prewrite-ff-layout-header--transparent {
  background: transparent;
}
.prewrite-ff-layout-header-menu-button {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  align-self: flex-start;
  border-radius: 50%;
}
.prewrite-ff-layout-header-menu-button:hover {
  background: var(--surface-color-2-divider-color);
}
.prewrite-ff-layout-header-menu-button-line {
  position: absolute;
  width: 50%;
  height: 2px;
  border-radius: 3px;
  background: var(--text-color-primary);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.prewrite-ff-layout-header-menu-button-line::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  border-radius: 3px;
  background: inherit;
  left: 0;
  -webkit-transform: translateY(-280%);
          transform: translateY(-280%);
}
.prewrite-ff-layout-header-logo {
  margin: 0;
  width: 160px;
  padding: 0;
  fill: var(--surface-color-1);
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-header-logo {
    width: 280px;
  }
}
.prewrite-ff-layout-header-sign-in-button {
  align-self: flex-start;
  margin-top: 0.6rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  text-decoration: none;
  fill: var(--text-color-tertiary);
  color: var(--text-color-tertiary);
  padding: 0.4em 0.8em 0.3em 0.7em;
  border-radius: 3px;
  cursor: pointer;
}
.prewrite-ff-layout-header-sign-in-button:hover {
  background: var(--surface-color-2-divider-color);
}
.prewrite-ff-layout-header-sign-in-button-icon {
  width: 14px;
  height: 14px;
}
/* Menu */
.prewrite-ff-layout-menu-cover {
  position: fixed;
  background: rgba(0, 0, 0, 0);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}
.prewrite-ff-layout-menu-drawer {
  width: 80vw;
  max-width: 340px;
  background: var(--surface-color-0);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 12px 0 12px rgba(0, 0, 0, 0);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.is-showing-account-menu .prewrite-ff-layout-menu-cover {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.2);
}
.is-showing-account-menu .prewrite-ff-layout-menu-drawer {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  box-shadow: 12px 0 12px rgba(0, 0, 0, 0.05);
}
.prewrite-ff-layout-menu-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prewrite-ff-layout-menu-drawer-header-logo {
  flex: 1;
  fill: var(--text-color-primary);
  max-width: 167px;
}
.prewrite-ff-layout-menu-drawer-header-close-button {
  position: relative;
  width: 4rem;
  height: 4rem;
  margin-left: 2rem;
  border-radius: 50%;
  background: #f3f3f3;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.prewrite-ff-layout-menu-drawer-header-close-button:hover {
  background: var(--surface-color-2-divider-color);
}
.prewrite-ff-layout-menu-drawer-header-close-button::before {
  position: absolute;
  content: "";
  width: 60%;
  height: 2px;
  background: var(--text-color-muted);
  left: 50%;
  top: 50%;
  border-radius: 2px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-layout-menu-drawer-header-close-button::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  background: var(--text-color-muted);
  left: 50%;
  top: 50%;
  border-radius: 2px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-layout-menu-drawer-nav-items {
  padding: 0;
  list-style: none;
}
.prewrite-ff-layout-menu-drawer-nav-items-item {
  padding: 0 1rem;
  color: var(--text-color-secondary);
  border-radius: 4px;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-menu-drawer-nav-items-item:hover {
    color: var(--primary-button-bg);
  }
}
.prewrite-ff-layout-menu-drawer-nav-items-item-link {
  font-size: 1.6rem;
  line-height: 3.4em;
  font-weight: bold;
  display: block;
  text-decoration: none;
  color: inherit;
}
.prewrite-ff-layout-menu-drawer-nav-items-item.selected {
  pointer-events: none;
  color: var(--primary-button-bg);
}
.prewrite-ff-layout-menu-drawer-auth-nav {
  border-top: thin solid var(--surface-color-2-divider-color);
}
.prewrite-ff-layout-menu-drawer-auth-nav-items {
  list-style: none;
  padding: 0;
}
.prewrite-ff-layout-menu-drawer-auth-nav-item {
  font-size: 1.333rem;
  font-weight: bold;
  text-transform: uppercase;
}
.prewrite-ff-layout-menu-drawer-auth-nav-item-link {
  display: flex;
  align-items: center;
  color: var(--text-color-primary);
  fill: var(--text-color-tertiary);
  text-decoration: none;
  line-height: 3em;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-menu-drawer-auth-nav-item-link:hover {
    color: var(--primary-button-bg);
    fill: var(--primary-button-bg);
  }
}
.prewrite-ff-layout-menu-drawer-auth-nav-item-link-icon {
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 1.2rem;
}
.prewrite-ff-layout-menu-drawer-auth-nav-item-link-label {
  margin-left: 0.2rem;
  color: inherit;
}
/* Global Parts - Footer */
.prewrite-ff-error-message {
  font-size: 1.6rem;
  white-space: pre-wrap;
}
.prewrite-ff-layout-footer-section {
  background: var(--surface-color-0);
}
.prewrite-ff-layout-footer-section-content {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  grid-gap: 4rem;
}
@media only screen and (min-width: 375px) {
  .prewrite-ff-layout-footer-section-content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-footer-section-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
.prewrite-ff-layout-footer-section-content-section-header-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: var(--text-color-muted);
  font-size: 2rem;
  line-height: 1.2em;
}
.prewrite-ff-layout-footer-section-content-section-content-nav-items {
  margin-top: 1.8rem;
  padding: 0;
  list-style: none;
}
.prewrite-ff-layout-footer-section-content-section-content-nav-item-link {
  font-size: 1.6rem;
  text-decoration: none;
  transition: all 200ms;
}
.prewrite-ff-layout-footer-section-content-section-content-nav-item-link:hover {
  color: var(--surface-color-2-divider-color);
}
.prewrite-ff-layout-footer-section-content-section-content-nav-item-icon {
  width: 2.4rem;
  height: 1.8rem;
  fill: var(--text-color-muted);
  transition: all 200ms;
}
.prewrite-ff-layout-footer-section-content-section-content-nav-item-icon:hover {
  fill: var(--text-color-tertiary);
}
.prewrite-ff-layout-footer-section-copyright {
  border-top: thin solid var(--surface-color-1-divider-color);
}
.prewrite-ff-layout-footer-section-copyright-logo {
  width: 10rem;
  fill: var(--text-color-muted);
}
.prewrite-ff-layout-footer-section-copyright-legal {
  display: block;
  color: var(--text-color-muted);
  font-size: 1.2rem;
  text-align: left;
}
.prewrite-ff-layout-footer-section-copyright-link {
  color: var(--primary-button-bg);
  text-decoration: none;
}
/* Content Sections */
.prewrite-ff-layout-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
}
.prewrite-ff-layout-section--half-height {
  min-height: 40vh;
}
.prewrite-ff-layout-section--auto-height {
  min-height: unset;
}
.prewrite-ff-layout-section-content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.surface-2-bg {
  background: var(--surface-color-2);
}
.prewrite-ff-layout-section-content-wrapper--full {
  max-width: unset;
}
.prewrite-ff-layout-section-content-wrapper--center {
  text-align: center;
}
.prewrite-ff-layout-section--pricing-options {
  background: var(--surface-color-0);
}
/* Figures */
/* Figures - Laptop */
.prewrite-ff-laptop {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 12vw;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-laptop {
    margin: 0 auto 10vw;
  }
}
.prewrite-ff-laptop-screen {
  position: relative;
  padding-top: 62.75%;
  display: block;
  margin: 10rem auto 0;
  max-width: 950px;
  width: calc(70vw);
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-laptop-screen {
    width: 45vw;
  }
}
.prewrite-ff-laptop-screen-play-button {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  cursor: default;
  background: transparent;
  transition: all 200ms;
}
.prewrite-ff-laptop-screen-play-button-icon {
  width: 20%;
  max-width: 10rem;
  fill: #565a5f;
  opacity: 0.7;
  background: transparent;
  border-radius: 20%;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-laptop-screen-play-button:hover {
    background: rgba(255, 255, 255, 0.4);
  }
  .prewrite-ff-laptop-screen-play-button:hover .prewrite-ff-laptop-screen-play-button-icon {
    fill: var(--primary-button-bg);
    opacity: 1;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    background: #fff;
  }
}
.prewrite-ff-laptop-screen-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.prewrite-ff-laptop-screen-slide:not(:first-child) {
  opacity: 0;
}
.prewrite-ff-laptop-screen-slide-image {
  width: 100%;
}
.prewrite-ff-laptop-screen-slide-label {
  font-size: 2.2vw;
  position: absolute;
  bottom: 6%;
  left: 50%;
  font-family: "Work Sans", sans-serif;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.2em 0.8em;
  color: #4a4a4a;
  border-radius: 50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-laptop-screen-slide-label--lighter {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
}
.prewrite-ff-laptop-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(106%);
  height: calc(115%);
  background: black;
  border-radius: 2vw 2vw 0 0;
  border: 0.25vw solid #a7a7a7;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-laptop-bezel {
    border-radius: 1.6vw 1.6vw 0 0;
  }
}
.prewrite-ff-laptop-bezel-gear {
  position: absolute;
  top: 3.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-laptop-bezel-gear-camera {
  width: 1vw;
  height: 1vw;
  max-width: 14px;
  max-height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.15);
  background: #000 radial-gradient(rgba(255, 255, 255, 0.19), transparent);
  border: thin solid #2f2f2f;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-laptop-bezel-gear-camera {
    width: 0.6vw;
    height: 0.6vw;
    max-width: 9px;
    max-height: 9px;
  }
}
.prewrite-ff-laptop-base {
  position: absolute;
  width: 130%;
  top: 105%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-laptop-base-top {
  position: relative;
  overflow: hidden;
  background: #7f7f7f;
  border-top: thin solid rgba(255, 255, 255, 0.07);
  width: 100%;
  padding-top: 1.6%;
  border-radius: 2px 2px 0 0;
}
.prewrite-ff-laptop-base-top::before {
  position: absolute;
  left: 0;
  top: -100%;
  content: "";
  width: 6%;
  height: 300%;
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.77634804) 0%, rgba(0, 0, 0, 0) 48%);
  opacity: 0.6;
}
.prewrite-ff-laptop-base-top::after {
  position: absolute;
  right: 0;
  top: -100%;
  content: "";
  width: 6%;
  height: 300%;
  background: #000000;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 48%);
  opacity: 0.6;
}
.prewrite-ff-laptop-base-top-notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 60%;
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 -6px 5px 4px rgba(0, 0, 0, 0.47);
  border: thin solid #929292;
  background: #969696;
  border-top: none;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-laptop-base-bottom {
  position: absolute;
  top: 100%;
  background: #2f2f2f;
  width: 100%;
  padding-top: 1.6%;
  border-radius: 0 0 300% 300%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 0;
}
.prewrite-ff-laptop-base-shadow {
  position: absolute;
  width: calc(97%);
  left: 1.5%;
  height: 79%;
  background: #000;
  opacity: 0.7;
  top: 94%;
  border-radius: 0 0 300% 300%;
  -webkit-filter: blur(0.27vw);
          filter: blur(0.27vw);
  z-index: -1;
}
/* Figures - Story Build */
.prewrite-ff-story-build-figure--desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-story-build-figure--desktop {
    display: block;
  }
  .prewrite-ff-story-build-figure--mobile {
    display: none;
  }
}
.prewrite-ff-story-build-figure--mobile-image {
  width: 100%;
  margin-top: 100px;
}
.prewrite-ff-story-build-figure-perspective-layer {
  -webkit-perspective: 3000px;
          perspective: 3000px;
  -webkit-perspective-origin: center bottom;
          perspective-origin: center bottom;
  display: flex;
  justify-content: center;
}
.prewrite-ff-story-build-figure-3d-layer {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateX(40px) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);
          transform: translateX(40px) rotateX(50deg) rotateY(0deg) rotateZ(-45deg);
}
.prewrite-ff-story-build-figure-scene {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 2px;
}
.prewrite-ff-story-build-figure-scene-front {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  background: linear-gradient(-155deg, var(--surface-color-2), var(--surface-color-2));
}
.prewrite-ff-story-build-figure-scene-front-image-holder {
  position: relative;
  width: 100%;
  height: 110px;
  box-sizing: border-box;
  background: var(--image-bg-color);
  padding-top: 54%;
}
.prewrite-ff-story-build-figure-scene-front-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.prewrite-ff-story-build-figure-scene-front-content-holder {
  padding: 20px;
  min-height: 142px;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.prewrite-ff-story-build-figure-scene-front-content {
  background: var(--text-color-muted);
  color: transparent;
  line-height: 20px;
}
.prewrite-ff-story-build-figure-scene-front-characters-holder {
  padding: 20px;
  min-height: 130px;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.prewrite-ff-story-build-figure-scene-front-character-item {
  margin-top: 12px;
  display: flex;
  align-items: center;
}
.prewrite-ff-story-build-figure-scene-front-character-item:first-child {
  margin-top: 0;
}
.prewrite-ff-story-build-figure-scene-front-character-item-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--image-bg-color);
  border: thin solid var(--text-color-muted);
  overflow: hidden;
}
.prewrite-ff-story-build-figure-scene-front-character-item-thumb-image {
  width: 100%;
  height: 100%;
}
.prewrite-ff-story-build-figure-scene-front-character-item-name {
  background: var(--text-color-muted);
  color: transparent;
  margin-left: 10px;
}
.prewrite-ff-story-build-figure-scene-front-emotional-value-cell-holder {
  position: relative;
  height: 70px;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.prewrite-ff-story-build-figure-scene-front-emotional-value-cell-bar {
  position: absolute;
  width: 30px;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  background: color-mix(in srgb, #4caf50, var(--surface-color-2) 40%);
  border-radius: 3px 3px 0 0;
  left: 50%;
  bottom: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-story-build-figure-scene-front-emotional-value-cell-bar.bad {
  background: color-mix(in srgb, #e57373, var(--surface-color-2) 40%);
  -webkit-transform: translateX(-50%) rotate(180deg);
          transform: translateX(-50%) rotate(180deg);
}
.prewrite-ff-story-build-figure-scene-front-emotional-value-cell-holder::after {
  position: absolute;
  content: "";
  width: 100%;
  border-top: thin dashed var(--surface-color-2-divider-color);
  top: 50%;
  left: 0;
}
.prewrite-ff-story-build-figure-scene-front-plot-thread-cells-holder {
  display: flex;
  flex-direction: column;
  height: 190px;
}
.prewrite-ff-story-build-figure-scene-front-plot-thread-cell {
  flex: 1;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  position: relative;
}
.prewrite-ff-story-build-figure-scene-front-plot-thread-cell-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  right: -2px;
}
.thread-1 {
  background: color-mix(in srgb, #ffd4a1, var(--surface-color-2) 40%);
}
.thread-2 {
  background: color-mix(in srgb, #d5ccff, var(--surface-color-2) 40%);
}
.thread-3 {
  background: color-mix(in srgb, #b3e0ef, var(--surface-color-2) 40%);
}
.thread-4 {
  background: color-mix(in srgb, #fecccc, var(--surface-color-2) 40%);
}
.thread-5 {
  background: color-mix(in srgb, #b2efdb, var(--surface-color-2) 40%);
}
.thread-start {
  left: 6px;
  border-radius: 50px 0 0 50px;
}
.thread-end {
  right: 6px;
  border-radius: 0 50px 50px 0;
}
.thread-event::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 40px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-story-build-figure-scene-left {
  position: absolute;
  top: 0;
  right: 100%;
  background: var(--surface-color-4);
  width: 12px;
  height: 100%;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}
.prewrite-ff-story-build-figure-scene-bottom {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  height: 12px;
  background: var(--surface-color-4);
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}
.prewrite-ff-story-build-figure-scene-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0003;
  -webkit-transform: translateZ(-13px);
          transform: translateZ(-13px);
  -webkit-filter: blur(12px);
          filter: blur(12px);
}
/* Figures - Story Stats */
.prewrite-ff-layout-story-stat-overview-charts {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 30px;
  margin-top: 70px;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-story-stat-overview-charts {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }
}
.prewrite-ff-story-stats-figure-bar-charts {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-story-stats-figure-bar-charts {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.story-stat-overview-example-bar-chart-holder {
  width: 100%;
  height: 140px;
  min-height: 140px;
}
.story-stat-overview-example-holder {
  background: #fff;
  /* border: thin solid #f3f3f3; */
  box-shadow: -3px -5px 12px #fff, 0 2px 24px rgba(0, 0, 0, 0.13);
  min-height: 80px;
  text-align: left;
}
.story-stat-bar-chart-holder {
  background: #fff;
  margin-top: 20px;
  box-shadow: -3px -5px 12px #fff, 0 2px 24px rgba(0, 0, 0, 0.13);
  min-height: 80px;
  height: 205px;
  position: relative;
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .story-stat-bar-chart-holder {
    margin-top: 30px;
  }
}
.story-stat-overview-example-header {
  padding: 8px 12px;
  border-bottom: thin solid #f3f3f3;
  color: #aaa;
  font-weight: bold;
  font-size: 1.333rem;
}
.story-stat-overview-example-content {
  padding: 20px;
}
.story-stat-overview-example-content--bar-chart {
  padding: 16px;
}
.story-stat-overview-example-legend-holder {
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding-left: 20%;
}
.story-stat-overview-example-legend-item {
  color: #888;
  font-size: 1.2rem;
  text-transform: uppercase;
  padding: 4px 0;
}
.story-stat-overview-example-legend-item-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.story-stat-overview-example-legend-item-label {
  margin-left: 8px;
  display: block;
}
.story-stat-overview-example-pie-chart-holder {
  width: 33%;
}
.character-list-item {
  padding: 10px;
  margin-top: 20px;
  border-radius: 3px;
  box-shadow: -3px -5px 12px rgba(255, 255, 255, 0.65), 0 2px 24px rgba(0, 0, 0, 0.13);
}
.character-list-item:first-child {
  margin-top: 0;
}
.character-list-item-image {
  width: 30px;
  height: 30px;
}
.character-list-item-name {
  text-align: left;
}
.character-list-item-name,
.character-list-item-scene-count {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #8c8c8c;
  margin: 0 0.8rem 0 1.2rem;
}
.settings-rect {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.bar-chart-bars {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
.bar-chart-bars--emotional-value {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
/* Figures - Devices */
/* Figures - Devices - Phone */
.prewrite-ff-phone {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(70%, 2vw);
          transform: translate(70%, 2vw);
}
.prewrite-ff-phone-screen {
  position: relative;
  padding-top: 212%;
  display: block;
  border-radius: 1vw;
  max-width: 200px;
  width: calc(8vw);
  overflow: hidden;
  background: #000;
  border: 0.4vw solid #000;
}
.prewrite-ff-phone-screen-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.prewrite-ff-phone-bezel-gear {
  position: absolute;
  top: 0;
  left: 50%;
  padding-top: 12%;
  width: 44%;
  background: #000;
  border-radius: 0 0 0.4vw 0.4vw;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-phone-bezel-button {
  position: absolute;
  width: 0.86vw;
  height: 0.86vw;
  border: thin solid #101010;
  top: 96%;
  background: #0a0a0a;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-phone-bezel-gear-camera {
  width: 0.124vw;
  height: 0.124vw;
  max-width: 14px;
  max-height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.15);
  background: #000 radial-gradient(rgba(255, 255, 255, 0.19), transparent);
  border: thin solid #2f2f2f;
}
.prewrite-ff-phone-bezel-gear-speaker {
  background: #3d3d3d;
  width: 1vw;
  height: 0.124vw;
  border-radius: 3vw;
  margin-right: 0.3vw;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.3);
}
.prewrite-ff-phone-base-shadow {
  position: absolute;
  width: 96%;
  left: 2%;
  height: 2%;
  background: #000;
  opacity: 1;
  top: 99%;
  border-radius: 0 0 300% 300%;
  -webkit-filter: blur(0.25vw);
          filter: blur(0.25vw);
  z-index: -1;
}
/* Figures - Devices - Tablet */
.prewrite-ff-tablet {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 6;
  left: 0;
  bottom: 0;
  -webkit-transform: translateX(-70%);
          transform: translateX(-70%);
}
.prewrite-ff-tablet-screen {
  position: relative;
  padding-top: 142%;
  display: block;
  max-width: 400px;
  width: calc(16vw);
  overflow: hidden;
  background: #000;
}
.prewrite-ff-tablet-screen-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.prewrite-ff-tablet-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(109%);
  height: calc(117%);
  background: black;
  border-radius: 0.75vw;
  border: 2px solid #565656;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-tablet-bezel-gear {
  position: absolute;
  top: 4%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-tablet-bezel-button {
  position: absolute;
  width: 0.86vw;
  height: 0.86vw;
  border: thin solid #101010;
  top: 96%;
  background: #0a0a0a;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-tablet-bezel-gear-camera {
  width: 0.24vw;
  height: 0.24vw;
  max-width: 14px;
  max-height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.15);
  background: #000 radial-gradient(rgba(255, 255, 255, 0.19), transparent);
  border: thin solid #2f2f2f;
}
.prewrite-ff-tablet-base-shadow {
  position: absolute;
  width: 105%;
  left: -3%;
  height: 2%;
  background: #000;
  opacity: 1;
  top: 108%;
  border-radius: 0 0 300% 300%;
  -webkit-filter: blur(0.25vw);
          filter: blur(0.25vw);
  z-index: -1;
}
/* Figures - Devices - PC */
.prewrite-ff-pc {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.prewrite-ff-pc-parts {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.prewrite-ff-pc-screen {
  position: relative;
  padding-top: 57%;
  display: block;
  max-width: 1100px;
  width: calc(46vw);
  overflow: hidden;
  background: #333;
}
.prewrite-ff-pc-screen-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.prewrite-ff-pc-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(106%);
  height: calc(112%);
  background: black;
  border-radius: 1vw 1vw 0 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-pc-bezel-gear {
  position: absolute;
  top: 3%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.prewrite-ff-pc-bezel-gear-camera {
  width: 0.4vw;
  height: 0.4vw;
  max-width: 14px;
  max-height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.15);
  background: #000 radial-gradient(rgba(255, 255, 255, 0.19), transparent);
  border: thin solid #2f2f2f;
}
.prewrite-ff-pc-bezel-bottom {
  background: linear-gradient(47deg, #9c9c9d, #585858);
  width: 100%;
  height: 17%;
  position: absolute;
  top: 100%;
  border-radius: 0 0 1vw 1vw;
  border-bottom: 2px solid rgba(105, 105, 105, 0.36);
}
.prewrite-ff-pc-base {
  position: absolute;
  top: 117%;
  left: 50%;
  width: 40%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-pc-base-buffer {
  width: 100%;
  padding-top: 29%;
}
.prewrite-ff-pc-base-stand {
  width: 100%;
}
.prewrite-ff-pc-base-shadow {
  position: absolute;
  width: 98%;
  left: 1%;
  height: 2%;
  background: black;
  opacity: 1;
  top: 100%;
  border-radius: 0 0 300% 300%;
  -webkit-filter: blur(0.25vw);
          filter: blur(0.25vw);
  z-index: -1;
}
/* Figures - Devices - Devices Mockup */
.prewrite-ff-devices-mockup-figure {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.prewrite-ff-devices-mockup-figure-shadow {
  position: absolute;
  width: 120%;
  height: 5vw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 68%);
          transform: translate(-50%, 68%);
  -webkit-filter: blur(2vw);
          filter: blur(2vw);
}
/* Social Proof Section */
.prewrite-ff-layout-social-proof-slideshow-slide {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4rem;
  padding-bottom: 6rem;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-social-proof-slideshow-slide {
    grid-template-columns: 1fr 1fr;
  }
}
/* Social Signup Section */
.prewrite-ff-layout-signup-section {
  background: var(--surface-color-1);
  border: thin solid var(--surface-color-2-divider-color);
  border-left: none;
  border-right: none;
}
.prewrite-ff-layout-signup-section--lite {
  border: none;
  background: var(--surface-color-2);
}
/* Contact Form */
.prewrite-ff-contact-form {
  display: block;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-contact-form {
    display: flex;
    flex-direction: row;
  }
}
.prewrite-ff-contact-form-wrapper {
  flex: 3;
  flex-basis: 40%;
}
.prewrite-ff-contact-form-details-info-item-icon {
  fill: var(--text-color-tertiary);
}
.prewrite-ff-contact-form-details-info-item-text {
  color: var(--text-color-tertiary);
  font-size: 1.333rem;
  font-weight: bold;
}
.prewrite-ff-contact-form-details {
  flex: 1;
  flex-basis: 40%;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-contact-form-details {
    padding-left: 4rem;
  }
}
.prewrite-ff-contact-form-details-map-holder {
  max-height: 34rem;
}
.prewrite-ff-contact-form-details-map {
  width: 100%;
  border: thin solid var(--surface-color-2-divider-color);
  height: 100%;
}
.prewrite-ff-contact-form-success-message-image {
  max-width: 200px;
}
.prewrite-ff-contact-form-failed-message-holder {
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}
/* Front Facing Website - Home Page */
.prewrite-ff-home-layout-masthead-content {
  position: relative;
  display: block;
  margin: 11rem auto 0;
  padding: 0 2rem;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  box-sizing: border-box;
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-content-bloom {
  width: 100%;
  height: 150%;
  position: absolute;
  background: var(--surface-color-0);
  opacity: 0.85;
  z-index: -1;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-filter: blur(119px);
          filter: blur(119px);
  pointer-events: none;
}
.prewrite-ff-home-layout-masthead-content-headline {
  color: var(--text-color-primary);
}
.prewrite-ff-home-layout-masthead-content-headline-edit {
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom;
}
.prewrite-ff-home-layout-masthead-content-headline-edit-story {
  font-family: "Permanent Marker", cursive;
  font-size: 4.8rem;
  position: relative;
  line-height: 5rem;
  margin-bottom: 3rem;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.prewrite-ff-home-layout-masthead-content-headline-edit-story::after {
  content: "^";
  position: absolute;
  left: 50%;
  top: 100%;
  font-size: 4rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.prewrite-ff-home-layout-masthead-content-headline-edit-strikethrough {
  position: relative;
}
.prewrite-ff-home-layout-masthead-content-headline-edit-strikethrough::after {
  font-family: "Permanent Marker", cursive;
  content: "-";
  position: absolute;
  left: 37px;
  right: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: scaleX(7) rotate(-15deg) translateY(-10px);
          transform: scaleX(7) rotate(-15deg) translateY(-10px);
  color: var(--text-color-primary);
}
.prewrite-ff-home-layout-masthead-content-signup {
  margin: 30px auto;
}
.prewrite-ff-home-layout-writer-types-section {
  background: var(--surface-color-1);
  border-top: thin solid var(--surface-color-1-divider-color);
}
.prewrite-ff-home-layout-writer-types-section-gradient-bkg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  max-height: 400px;
  display: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #eaeaea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#eaeaea', GradientType=0);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#eaeaea', GradientType=0);
  /* IE6-9 */
}
.prewrite-ff-home-layout-writer-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  grid-gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-home-layout-writer-types {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .prewrite-ff-home-layout-writer-types {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 4rem;
  }
}
.prewrite-ff-writer-type-card {
  overflow: hidden;
  border-radius: 1rem;
  min-height: 38rem;
}
.prewrite-ff-writer-type-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 34%);
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-writer-type-card::after {
    opacity: 0;
    transition: all 200ms;
  }
  .prewrite-ff-writer-type-card:hover::after {
    opacity: 1;
  }
}
.prewrite-ff-writer-type-card--blue-grad-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #26719a 5%, rgba(60, 149, 206, 0.13));
}
.prewrite-ff-writer-type-card--rose-grad-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ce3c84 5%, rgba(206, 60, 195, 0.07));
}
.prewrite-ff-writer-type-card--green-grad-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #4caf50, rgba(76, 175, 80, 0.08));
}
.prewrite-ff-writer-type-card--orange-grad-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #e58f10 5%, rgba(255, 152, 0, 0.09));
}
.prewrite-ff-writer-type-card-image {
  -o-object-position: center center;
     object-position: center center;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: saturate(0.25) brightness(1.1);
          filter: saturate(0.25) brightness(1.1);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-writer-type-card:not(:hover) .prewrite-ff-writer-type-card-image {
    -webkit-filter: saturate(1) brightness(1);
            filter: saturate(1) brightness(1);
  }
}
.prewrite-ff-writer-type-card-content {
  padding: 2rem 2rem 1rem;
  position: absolute;
  bottom: 0;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
}
.prewrite-ff-writer-type-card-content-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  color: #fff;
}
.prewrite-ff-writer-type-card-content-list {
  padding: 1rem 2.4rem 1rem;
  overflow: hidden;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.6em;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-writer-type-card-content-list {
    max-height: 0;
    opacity: 0;
    padding: 1rem 2.4rem 0;
    transition: all 200ms;
  }
  .prewrite-ff-writer-type-card:hover .prewrite-ff-writer-type-card-content-list {
    padding: 1rem 2.4rem 1rem;
    max-height: 14rem;
    opacity: 1;
  }
}
.prewrite-ff-home-layout-used-by-section {
  background: #dedede;
}
.prewrite-ff-home-layout-partner-logo {
  width: 100px;
  opacity: 0.3;
  padding: 10px 30px;
}
.prewrite-ff-home-layout-devices-holder-share-icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px 0;
}
.prewrite-ff-home-layout-devices-mockup-holder {
  margin: 10rem auto 40px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.prewrite-ff-home-layout-library-items {
  display: flex;
  flex-direction: column;
}
.prewrite-ff-home-layout-library-items > div:first-child {
  flex: 1;
}
.prewrite-ff-home-layout-invest-section-content {
  min-height: 30rem;
}
.prewrite-ff-home-layout-invest-section-content-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
/* Auth Pages */
.prewrite-ff-auth-page {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100vh;
}
.prewrite-ff-auth-page-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  min-width: 320px;
}
.prewrite-ff-auth-page-alt-section {
  display: none;
  color: #fff;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: var(--surface-color-0);
  background-image: radial-gradient(ellipse at center, rgba(53, 59, 66, 0.95) 0%, #102129 100%), url(../img/masthead_bkg_low_res.jpg);
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#91000000', endColorstr='#000000', GradientType=1);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#91000000', endColorstr='#000000', GradientType=1);
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-auth-page-alt-section {
    display: flex;
  }
}
.prewrite-ff-auth-page-section-content {
  width: calc(100% - 10rem);
  max-width: 40rem;
}
.prewrite-ff-auth-page-alt-section-logo {
  fill: #f9f9f9;
  height: 8rem;
}
.prewrite-ff-auth-page-alt-section-title {
  display: block;
  font-weight: normal;
  font-size: 3.2rem;
}
.prewrite-ff-auth-page-alt-section-message {
  font-size: 2rem;
  display: block;
  color: #f2f2f2;
}
.prewrite-ff-auth-page-section-content-logo {
  width: 100%;
  max-width: 20rem;
  fill: var(--text-color-primary);
}
.prewrite-ff-auth-page-form-wrapper {
  min-height: 40vh;
}
.prewrite-ff-auth-page-form-wrapper--center {
  text-align: center;
}
.prewrite-ff-form-feedback {
  display: inline-block;
  background: #339655;
  border: thin solid #389a59;
  color: #ddefe3;
  padding: 1rem 2rem;
  font-weight: 400;
  font-size: 1.6rem;
  border-radius: 0.6rem;
}
.prewrite-ff-form-feedback--bad {
  background: var(--danger-message-bg);
  border: thin solid var(--danger-message-border-color);
  color: var(--danger-message-text-color);
}
.auth-page-form-header-email {
  font-weight: normal;
  font-size: 16px;
  color: #4c5563;
}
.prewrite-ff-auth-page-form-item-label {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-left: 0.2rem;
  display: block;
  color: var(--text-color-secondary);
}
.auth-page-form-input-label:first-child {
  margin-top: 20px;
}
.prewrite-ff-auth-page-form-item-input-wrapper {
  position: relative;
  width: 100%;
}
.prewrite-ff-auth-page-form-item-input {
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--surface-color-2);
  border: none;
  border-bottom: 2px solid var(--surface-color-3-divider-color);
  padding: 1.2rem 1rem;
  font-size: 1.6rem;
  color: var(--text-color-primary);
  outline: none;
}
.prewrite-ff-auth-page-form-item-textarea {
  font-family: "Open Sans", helvetica, sans-serif;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--surface-color-2);
  border: none;
  border-bottom: 2px solid var(--surface-color-3-divider-color);
  padding: 1.2rem 1rem;
  font-size: 1.6rem;
  outline: none;
  resize: none;
}
.prewrite-ff-auth-page-form-forgot-password-link {
  display: inline-block;
  position: absolute;
  top: 50%;
  font-size: 14px;
  font-weight: bold;
  right: 14px;
  color: #666;
  text-decoration: none;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.prewrite-ff-auth-page-form-item-input:focus,
.prewrite-ff-auth-page-form-item-textarea:focus {
  border-bottom-color: var(--primary-button-bg);
}
.prewrite-ff-auth-page-form-alt-option {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
}
.prewrite-ff-auth-page-form-alt-option-link {
  text-decoration: none;
  font-weight: bold;
  color: #0088d1;
}
.prewrite-ff-auth-page-form-alt-option-link:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-auth-page-form-alt-option {
    display: none;
  }
}
.prewrite-ff-auth-page-social-signin {
  border-top: thin solid var(--surface-color-2-divider-color);
}
.prewrite-ff-auth-page-form-body {
  display: block;
  font-size: 2rem;
}
.prewrite-ff-auth-page-gmail-warning {
  background: var(--info-container-bg);
  padding: 15px 18px;
  box-sizing: border-box;
  border-radius: 0.6rem;
}
.prewrite-ff-auth-page-gmail-warning-title {
  font-weight: bold;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #333a41;
}
.prewrite-ff-auth-page-gmail-warning-body {
  font-size: 1.333rem;
  display: block;
  color: #505050;
}
.prewrite-ff-auth-page-form-set-password-form-meter {
  display: flex;
  flex-direction: row;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.prewrite-ff-auth-page-form-set-password-form-meter-tick {
  flex: 1;
  margin: 0;
  background: transparent;
  height: 2px;
}
.prewrite-ff-auth-page-form-set-password-form-meter::after {
  content: "";
  position: absolute;
  font-size: 10px;
  top: 100%;
  right: 1px;
  font-weight: bold;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="0"] .prewrite-ff-auth-page-form-set-password-form-meter-tick:first-child,
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="1"] .prewrite-ff-auth-page-form-set-password-form-meter-tick:first-child {
  background: #ff5548;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="0"]::after,
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="1"]::after {
  content: "Very weak";
  color: #ff5548;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="2"] .prewrite-ff-auth-page-form-set-password-form-meter-tick:nth-child(-n + 2) {
  background: #ff9832;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="2"]::after {
  content: "So-so";
  color: #ff9832;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="3"] .prewrite-ff-auth-page-form-set-password-form-meter-tick:nth-child(-n + 3) {
  background: #9fd148;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="3"]::after {
  content: "Good";
  color: #9fd148;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="4"] .prewrite-ff-auth-page-form-set-password-form-meter-tick:nth-child(-n + 4) {
  background: #15c300;
}
.prewrite-ff-auth-page-form-set-password-form-meter[data-score="4"]::after {
  content: "Great";
  color: #15c300;
}
.prewrite-ff-auth-page-form-toggle-password {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 0.2rem;
  color: #4caf50;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.prewrite-ff-auth-page-form-toggle-password:hover {
  background: #dadada;
}
.prewrite-ff-auth-page-form-toggle-password[data-state="hidden"]::after {
  content: "Show";
}
.prewrite-ff-auth-page-form-toggle-password[data-state="showing"]::after {
  content: "Hide";
}
.prewrite-ff-auth-page-form-terms-of-service-label {
  display: flex;
  align-items: center;
}
.prewrite-ff-auth-page-form-privacy-label-text {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-left: 2rem;
  margin-top: 1rem;
}
.prewrite-ff-auth-page-form-terms-of-service-label-text {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-left: 1rem;
}
.prewrite-ff-auth-page-form-terms-of-service-label-text-link {
  text-decoration: none;
  font-weight: bold;
  color: #0088d1;
}
.prewrite-ff-auth-page-form-terms-of-service-label-text-link:hover {
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.grecaptcha-badge {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}
.app-header-button-active {
  fill: #ff5548;
}
@media only screen and (min-width: 768px) {
  .slaask-widget {
    bottom: 19px !important;
    right: 19px !important;
  }
}
.dev-watermark {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  z-index: 9999999999999;
  border: 2px solid #03a9f4;
}
.dev-watermark-text {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.1em 0.6em 0.05em;
  background: rgba(2, 177, 255, 0.72);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 0 4px 0 0;
}
/* Front Facing Website User Type Pages */
.prewrite-ff-home-layout-masthead--user-type {
  position: relative;
  height: 24vw;
  min-height: 44rem;
}
.prewrite-ff-home-layout-masthead-user-type-content {
  z-index: 3;
}
.prewrite-ff-home-layout-masthead-user-type-masthead-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: #fff;
  font-size: 4.8rem;
}
.prewrite-ff-home-layout-masthead-user-type-masthead-body {
  color: #f2f2f2;
  font-size: 2.4rem;
  text-wrap: balance;
}
.prewrite-ff-home-layout-masthead-bkg-image-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.prewrite-ff-home-layout-masthead-bkg-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: saturate(0.2);
          filter: saturate(0.2);
}
.prewrite-ff-home-layout-masthead-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  color: #fff;
  font-size: 1.333rem;
  font-weight: bold;
}
.prewrite-ff-home-layout-masthead-bkg-image--bright {
  -webkit-filter: saturate(0.2) brightness(1.4);
          filter: saturate(0.2) brightness(1.4);
}
.prewrite-ff-home-layout-masthead-bkg-image--dark-gradient::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0.4) 34%);
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-bkg-image--rose-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(206, 60, 132, 0.8) 5%, rgba(206, 60, 195, 0.07));
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-bkg-image--blue-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(38, 113, 154, 0.89) 5%, rgba(60, 149, 206, 0.48));
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-bkg-image--green-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.7), rgba(76, 175, 80, 0.48));
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-bkg-image--orange-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(229, 143, 16, 0.85) 5%, rgba(255, 152, 0, 0.52));
  z-index: 1;
}
.prewrite-ff-home-layout-masthead-transition {
  background: var(--surface-color-0);
  border-top: thin solid var(--surface-color-1-divider-color);
  border-bottom: thin solid var(--surface-color-1-divider-color);
}
.prewrite-ff-layout-subsection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-column-gap: clamp(2rem, 7vw, 7rem);
     -moz-column-gap: clamp(2rem, 7vw, 7rem);
          column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: 4rem;
  margin-top: 6rem;
}
.prewrite-ff-layout-subsection:first-child {
  margin-top: 0;
}
.prewrite-ff-layout-subsection--reverse {
  flex-direction: column-reverse;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-subsection {
    flex-direction: row;
  }
  .prewrite-ff-layout-subsection--reverse {
    flex-direction: row;
  }
}
.prewrite-ff-layout-subsection-side--half {
  flex-basis: calc(calc(calc(76.8rem / 2) - 100%) * 999);
  min-width: calc(76.8rem / 3);
  flex-grow: 1;
}
.prewrite-ff-layout-subsection-side-text {
  max-width: 80ch;
  min-width: 60ch;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .prewrite-ff-layout-subsection-side-text {
    text-align: left;
  }
}
.prewrite-ff-layout-subsection-side-image {
  width: 100%;
}
.prewrite-ff-more-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
.prewrite-ff-shadow-wide {
  box-shadow: 1rem 3rem 6rem rgba(60, 63, 69, 0.7);
}
.prewrite-ff-collage {
  position: relative;
  width: 100%;
}
/*/ /////////////////////////*/
/*/ ///////COMPONENTS////////*/
/*/ /////////////////////////*/
/* Buttons */
.professional-button {
  outline: none;
  display: inline-block;
  position: relative;
  font-size: 1.333rem;
  padding: 0.9em 1.2em 0.8em;
  cursor: pointer;
  min-width: 7rem;
  text-decoration: none;
  border: thin solid transparent;
  border-radius: 0.4rem;
  transition: all 200ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
}
.professional-button--compact {
  padding: 0.6em 1em 0.5em;
}
.professional-button--heavy {
  font-weight: bold;
}
.professional-button:disabled {
  pointer-events: none;
  opacity: 0.6;
}
.professional-button.professional-dropdown-selected-item {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.professional-button-group {
  display: flex;
}
.professional-button-group .professional-button {
  min-width: unset;
  border-left: thin solid rgba(0, 0, 0, 0.15);
}
.professional-button:not(.no-focus):focus-visible {
  box-shadow: 0 0 0 1px var(--surface-color-2-hover), 0 0 0 2px var(--primary-button-bg);
}
.professional-button-group .professional-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-left: thin solid transparent;
}
.professional-button-group .professional-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.professional-button--primary {
  background: var(--primary-button-bg);
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .professional-button--primary:hover {
    background: var(--primary-button-bg-hover);
  }
}
.professional-button--secondary {
  background: var(--secondary-button-bg);
  color: var(--secondary-button-color);
}
.professional-button--secondary:hover {
  background: var(--secondary-button-bg-hover);
}
.professional-button--success {
  background: var(--success-button-bg);
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .professional-button--success:hover {
    background: var(--success-button-bg-hover);
  }
}
.professional-button--danger {
  background: var(--danger-button-bg);
  color: var(--danger-button-color);
}
@media only screen and (min-width: 768px) {
  .professional-button--danger:hover {
    background: var(--danger-button-bg-hover);
    color: var(--danger-button-color-hover);
  }
}
.professional-button--transparent {
  background: transparent;
  color: var(--text-color-secondary);
}
@media only screen and (min-width: 768px) {
  .professional-button--transparent:hover {
    background: var(--surface-color-3-hover);
  }
}
.professional-button--free {
  background: #4191bf;
  color: #fff;
  border-color: #4191bf;
}
.professional-button--premium {
  background: #22a86d;
  color: #fff;
  border-color: #22a86d;
}
.professional-button--pro {
  background: #03a9f4;
  color: #fff;
  border-color: #03a9f4;
}
.professional-button--enterprise {
  background: var(--team-text-color);
  color: #fff;
  border-color: var(--team-text-color);
}
.professional-button-text {
  white-space: nowrap;
}
.professional-button-icon {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.4em;
  fill: currentColor;
}
.professional-button--icon {
  display: flex;
  align-items: center;
  padding-left: 1em;
}
.professional-button--icon-icon {
  fill: currentColor;
}
.pensive-text-button {
  display: flex;
  align-items: center;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.2rem;
  padding: 0.3rem 0.8rem;
  border: thin solid var(--surface-color-3-divider-color);
  background: var(--surface-color-3);
  color: var(--text-color-primary);
  border-radius: 0.3rem;
  cursor: pointer;
  transition: all 200ms;
}
.pensive-text-button.professional-dropdown-selected-item {
  border-color: var(--primary-button-bg);
  color: var(--primary-button-bg);
}
.pensive-text-button-title {
  text-transform: capitalize;
  white-space: nowrap;
}
.pensive-text-button-arrow {
  width: 0.6em;
  height: 0.6em;
  border: 0.18rem solid currentColor;
  border-radius: 0.2rem;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-0.1em) rotate(45deg);
          transform: translateY(-0.1em) rotate(45deg);
  margin-left: 0.6em;
}
@media only screen and (min-width: 768px) {
  .pensive-text-button:hover {
    color: var(--text-color-primary);
    background: var(--surface-color-3-hover);
    border-color: var(--surface-color-3-divider-color);
  }
  .pensive-text-button--primary-hover:hover {
    color: var(--text-color-primary);
    border-color: var(--primary-button-bg);
    background: var(--primary-button-bg);
  }
}
.pensive-text-button:disabled {
  pointer-events: none;
}
/* Containers */
.professional-permissions-section {
  padding-bottom: 2rem;
}
.professional-permissions-section--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
}
.professional-form-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  grid-column-gap: 2rem;
  padding: 1rem 1rem 1rem;
  max-height: 50rem;
  opacity: 1;
  transition: padding 200ms, max-height 200ms, opacity 200ms;
  overflow: hidden;
}
.professional-form-item--hoverable {
  position: relative;
}
.professional-form-item--hoverable::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 0;
  width: calc(100% + 1.2rem);
  height: 100%;
  background: #f7f8f9;
  border-radius: 0.6rem;
  opacity: 0;
  transition: opacity 100ms;
}
.professional-form-item--hoverable:hover::before {
  opacity: 1;
}
.professional-form-section-content:empty {
  padding-top: 0;
}
.professional-form-section.section-off .professional-form-section-content {
  pointer-events: none;
  opacity: 0.3;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.professional-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2rem;
}
.professional-selection-grid-item {
  border-radius: 0.4rem;
  overflow: hidden;
  display: flex;
  border: 1px solid #dedede;
  flex-direction: column;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: all 200ms;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .professional-selection-grid-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    border-color: #dedede;
  }
}
.professional-container-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 1rem 1rem 0 0;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  padding: 1.5rem 1.5rem 1.25rem 2rem;
  background: var(--surface-color-2);
}
.professional-form-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: -4rem;
  background: var(--surface-color-2);
  border-radius: 0 0 1rem 1rem;
  z-index: 10;
}
.professional-box {
  border-radius: 1rem;
}
.professional-box--bordered {
  border: thin solid var(--surface-color-2-divider-color);
}
.professional-container {
  width: 100%;
  position: relative;
  background: var(--surface-color-2);
  border-radius: 1rem;
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2);
}
.professional-container--transparent {
  background: var(--surface-color-2);
}
.professional-horizontal-scroller-wrapper {
  position: relative;
}
.professional-horizontal-scroller {
  margin: 0;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}
.professional-horizontal-scroller.on-left {
  margin-left: 2rem;
}
.professional-horizontal-scroller.on-right {
  margin-right: 2rem;
}
.professional-horizontal-scroller::-webkit-scrollbar {
  display: none;
}
.professional-horizontal-scroller-content {
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
}
.text-measuring-container > * {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.professional-horizontal-scroller-content > * {
  flex-basis: 18rem;
  flex-shrink: 0;
}
.professional-horizontal-scroller-content--medium {
  flex-basis: 18vw;
  flex-shrink: 0;
}
.professional-horizontal-scroller-button {
  position: absolute;
  display: flex;
  color: var(--icon-color-secondary);
  align-items: center;
  justify-content: center;
  top: 50%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--surface-color-3);
  border: 1px solid var(--surface-color-3-divider-color);
  box-shadow: 0 0 12px 0 rgba(64, 87, 109, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms, background 200ms;
}
[data-button="left"].professional-horizontal-scroller-button {
  left: 0;
  -webkit-transform: translate(-3px, calc(-50% - 3rem));
          transform: translate(-3px, calc(-50% - 3rem));
  border-radius: 0 2rem 2rem 0;
  border-left-color: var(--surface-color-3-divider-color);
}
[data-button="right"].professional-horizontal-scroller-button {
  right: 0;
  -webkit-transform: translate(3px, calc(-50% - 3rem));
          transform: translate(3px, calc(-50% - 3rem));
  border-radius: 2rem 0 0 2rem;
  border-right-color: var(--surface-color-3-divider-color);
}
@media only screen and (min-width: 768px) {
  .professional-horizontal-scroller-button {
    visibility: visible;
    pointer-events: all;
  }
  .professional-horizontal-scroller-button:hover {
    color: var(--icon-color-primary);
    background: var(--surface-color-3-hover);
  }
}
/* Test Display */
.professional-h1 {
  font-size: 3.2rem;
  color: var(--text-color-primary);
}
.professional-h2 {
  font-size: 2rem;
  line-height: 1.4;
  color: var(--text-color-primary);
}
/* Form Text */
.professional-success-message {
  font-size: 14px;
  padding: 11px;
  display: block;
  background: #cbedcc;
  color: #656765;
  border: thin solid #abd6ac;
  border-radius: 4px;
}
.admin-form-instructions {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-color-primary);
  display: block;
}
.professional-meta {
  display: block;
  font-weight: 300;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--text-color-tertiary);
}
.professional-message {
  display: block;
  text-align: center;
  font-size: 20px;
}
.professional-label {
  display: block;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
  transition: all 200ms;
}
.professional-label--subtle {
  font-size: 1.2rem;
  color: #4caf50;
  font-weight: normal;
}
.professional-label--large {
  font-size: 1.6rem;
  color: var(--text-color-tertiary);
}
.professional-subscription-tag {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
  border-radius: 3px;
  background: transparent;
}
.professional-subscription-tag-icon {
  width: 1.3em;
  margin-right: 0.5em;
  fill: var(--team-text-color);
}
.professional-subscription-tag--free {
  color: #4191bf;
}
.professional-subscription-tag--premium {
  color: #22a86d;
}
.professional-subscription-tag--pro {
  color: #03a9f4;
}
.professional-subscription-tag--team,
.professional-subscription-tag--enterprise {
  color: var(--team-text-color);
}
.professional-form-subsection-header-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
}
.professional-form-section-header-icon > svg:not(.custom-svg) {
  width: 1.8rem;
}
.professional-feature-layout-card > svg:not(.custom-svg) {
  width: 3rem;
  height: 3.6rem;
  fill: var(--icon-color-muted);
}
.professional-h3 > svg:not(.custom-svg) {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  opacity: 0.75;
  fill: currentColor;
}
.professional-list-row-text {
  font-size: 1.333rem;
  color: var(--text-color-tertiary);
  padding: 0.6rem 0.4rem;
}
.professional-list-row-text--new {
  font-weight: bold;
  color: var(--primary-button-bg);
}
.professional-tile-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.professional-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 1rem;
  flex: 1;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-tile:hover {
    background: var(--surface-color-3-hover);
    border-color: var(--primary-button-bg);
  }
}
.professional-share-icon {
  width: 5.5rem;
  height: 5.5rem;
}
.professional-tile-title {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #989898;
}
.professional-p--small {
  font-size: 1.2rem;
}
.professional-p--large {
  font-size: 2rem;
  line-height: 1.45em;
}
.professional-p--larger {
  font-size: 2.4rem;
}
.professional-list-row {
  padding: 1rem 0;
}
.professional-list-row:first-child {
  border-top: thin solid transparent;
}
/* Text Inputs */
.professional-text-input:disabled {
  opacity: 0.8;
  color: var(--text-color-primary);
}
.professional-copy-link-input-holder {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.professional-copy-link-input {
  position: absolute;
  background-color: #f3f3f3;
  color: #989898;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  padding: 1rem;
  border-radius: 0.4rem;
  width: 100%;
  font-size: 1.333rem;
  outline: none;
}
.disabled .professional-copy-link-input {
  background-color: #f4f4f4;
  color: var(--text-color-muted);
  pointer-events: none;
}
.professional-copy-link-button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  padding: 0 1rem;
  position: absolute;
  right: 6px;
  font-size: 1.333rem;
  height: calc(100% - 12px);
  top: 6px;
  border-radius: 0.4rem;
  background-color: #f3f3f3;
}
.disabled .professional-copy-link-button {
  display: none;
}
@media only screen and (min-width: 768px) {
  .professional-copy-link-button:hover {
    background: #dfdfdf;
  }
}
.professional-copy-link-button-text {
  font-size: 1.333rem;
  color: #989898;
}
@media only screen and (min-width: 768px) {
  .professional-copy-link-button:hover .professional-copy-link-button-text {
    color: #7c7c7c;
  }
}
.professional-text-input--subtle {
  font-size: 1.333rem;
  border: 1px solid #f1f1f1;
  background: #fafafa;
}
.professional-text-input--small {
  padding: 0.3em 0.6em;
  font-size: 1.333rem;
  background: var(--surface-color-0);
}
.professional-text-input--light-bkg {
  background: rgba(255, 255, 255, 0.7);
}
.professional-text-input.error,
.professional-text-input.error:focus {
  border-color: #d32f2f;
  background: #fae6e4;
  box-shadow: 0 0 0 1px #f3b1ae;
  color: #c56b6b;
}
.professional-textarea {
  width: 100%;
  display: block;
  min-height: 10rem;
  font-size: 1.333rem;
  background: var(--form-text-input-bg);
  border-radius: 0.4rem;
  padding: 1rem;
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  outline: none;
  resize: none;
  border: thin solid var(--form-text-input-border-color);
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
.professional-textarea:hover {
  background: var(--form-text-input-bg-hover);
}
.professional-textarea::-webkit-input-placeholder {
  color: var(--text-color-muted);
}
.professional-textarea::-moz-placeholder {
  color: var(--text-color-muted);
}
.professional-textarea::placeholder {
  color: var(--text-color-muted);
}
.professional-textarea:focus {
  background: var(--form-text-input-bg-focus);
  border-color: var(--form-text-input-border-color-focus);
}
.professional-text-input-autocomplete {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 2rem;
  border: 1px solid transparent;
  font-size: 1.6rem;
  padding: 1.2rem 1rem 1rem;
  min-width: 100%;
  color: #4caf50;
  pointer-events: none;
}
.professional-text-input-autocomplete-dropdown {
  background: #fbfbfb;
  position: absolute;
  width: 100%;
  top: calc(100% + 0.3rem);
  border-radius: 0.5rem;
  max-height: 0;
  z-index: 9;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 200ms;
}
.professional-text-input-autocomplete-dropdown.has-results {
  opacity: 1;
  pointer-events: all;
  max-height: 30rem;
}
.professional-text-input-wrapper:not(:focus-within) .professional-text-input-autocomplete-dropdown {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
}
.professional-text-input-autocomplete-dropdown-item {
  width: 100%;
  text-align: left;
  font-size: 1.333rem;
  padding: 1.5rem 1.5rem;
  transition: background-color 100ms;
}
@media only screen and (min-width: 768px) {
  .professional-text-input-autocomplete-dropdown-item:hover {
    background: #efefef;
  }
  .professional-text-input-autocomplete-dropdown-item:focus,
  .professional-text-input-autocomplete-dropdown-item.selected {
    background: var(--primary-button-bg);
    color: var(--text-color-primary);
  }
}
.professional-text-input-wrapper:focus-within .professional-text-input--focus-within-child {
  border-color: var(--primary-button-bg);
}
.professional-text-input-wrapper {
  position: relative;
  width: 100%;
}
.professional-text-input-wrapper.error::after {
  content: attr(data-error);
  color: #d32f2f;
  display: block;
  font-size: 1.2rem;
  margin-top: 3px;
}
.professional-text-input-wrapper.error--top-right::after {
  content: attr(data-error);
  color: #d32f2f;
  display: block;
  font-size: 1.2rem;
  margin-top: 0;
  position: absolute;
  top: -4px;
  right: 0;
  opacity: 0.8;
  max-width: calc(100% - 4rem);
  text-align: right;
  white-space: break-spaces;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.professional-text-input-wrapper.error--top-right.warning::after {
  content: attr(data-warning);
  color: #d88b3b;
  display: block;
  font-size: 1.2rem;
  margin-top: 0;
  position: absolute;
  top: -4px;
  right: 0;
  opacity: 0.8;
  max-width: calc(100% - 4rem);
  text-align: right;
  white-space: break-spaces;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
[data-can-edit="no"] .professional-text-input {
  opacity: 0.5;
  pointer-events: none;
}
.professional-text-input-wrapper.error .professional-text-input {
  background: #faebe9;
  box-shadow: 0 0 0 1px #f3b1ae;
  color: #c56b6b;
}
.professional-text-input-wrapper.warning .professional-text-input {
  background: #fff9f0;
  box-shadow: 0 0 0 1px #f3cfae;
}
.professional-text-input-keystroke-instruction {
  position: absolute;
  opacity: 0;
  right: 0;
  top: 100%;
  padding: 0.3rem 0.2rem;
  color: #c5c5c5;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 200ms;
}
.professional-text-input:not(:placeholder-shown) ~ .professional-text-input-keystroke-instruction {
  opacity: 1;
}
.professional-text-input--textarea {
  font-family: "Open Sans", helvetica, sans-serif;
  min-height: 9rem;
  display: block;
  resize: none;
}
.professional-text-input--visible-rows {
  background-image: linear-gradient(#f5f5f5 50%, #f9f9f9 50%);
  background-size: 100% 4em;
  border: 1px solid #ccc;
  background-position-y: 0;
  line-height: 2em;
  padding-top: 0;
  padding-bottom: 0;
  background-attachment: local;
}
.professional-terms-of-service-message {
  font-size: 2rem;
  color: var(--text-color-tertiary);
  display: block;
}
.professional-inline-link {
  font-size: inherit;
  color: var(--primary-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-inline-link:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-inline-link-icon {
  fill: currentColor;
  transition: all 200ms;
}
/* Range Input */
.professional-range-input {
  width: 100%;
}
/* Buttons */
.emotive-ghost-button-icon-wrapper > svg:not(.custom-svg) {
  width: 38%;
  height: 38%;
}
/* Card Options */
.professional-card-option {
  position: relative;
  border: 0.2rem solid var(--surface-color-2-divider-color);
  padding: 1.4rem;
  border-radius: 0.8rem;
  max-width: 20rem;
  min-width: 10rem;
  cursor: pointer;
  box-shadow: 0 6px 8px -3px rgba(0, 0, 0, 0);
}
.professional-card-option:hover {
  border-color: var(--surface-color-3-divider-color);
}
.professional-card-option-input {
  opacity: 0;
  position: absolute;
}
.professional-card-option-input:checked + .professional-card-option {
  border-color: var(--primary-button-bg);
  box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.1);
}
.professional-card-option-input:checked + .professional-card-option > p,
.professional-card-option-input:checked + .professional-card-option > span {
  color: var(--text-color-primary);
}
/* Select Boxes */
.professional-select-input-wrapper {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.professional-select-input-wrapper::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 2px solid #c3c3c3;
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: 50%;
  right: 1.5rem;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translateY(-70%) rotate(45deg);
          transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition-property: border-color;
  transition-duration: 200ms;
}
.professional-dropdown-selected-item.professional-select-input-wrapper::after {
  border-color: #86cef9;
  border-left-color: transparent;
  border-top-color: transparent;
}
.professional-select-input {
  font-family: "Open Sans", helvetica, sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 0.4rem;
  min-width: 11rem;
  padding: 1.2rem 4rem 1rem 1rem;
  color: var(--text-color-tertiary);
  font-size: 1.333rem;
  background: var(--surface-color-2-hover);
  border: 0 none;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 1px 1px 1px transparent;
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
.professional-dropdown-selected-item .professional-select-input {
  box-shadow: 0 0 0 1px var(--primary-button-bg);
  color: var(--primary-button-bg);
}
.professional-select-input:hover {
  box-shadow: 0 0 0 1px var(--primary-button-bg), 0 1px 1px 1px transparent;
}
.professional-select-input.cbr-l {
  border-left: none;
}
.professional-select-input:focus {
  outline: none;
  border-color: var(--primary-button-bg);
}
.professional-select-input.cbr-l:focus {
  border-left: thin solid var(--primary-button-bg);
}
.professional-select-input-wrapper .professional-select-input {
  height: 100%;
}
/* Dropdowns */
/* Checkboxes */
/* Radio Buttons */
/* Toggles */
.professional-toggle-spinner-holder {
  width: 26px;
  position: relative;
  height: 14px;
  display: none;
}
.professional-toggle-spinner {
  position: absolute;
  width: 26px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.5;
}
.professional-toggle-checkbox {
  position: absolute;
  visibility: hidden;
}
.professional-toggle-knob {
  width: 12px;
  height: 12px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: all 100ms;
}
.professional-toggle-radio {
  width: 38%;
  height: 38%;
  background: var(--surface-color-2);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-toggle-checkbox:checked ~ .professional-toggle-checkmark-holder .professional-toggle-radio {
  opacity: 1;
}
.professional-toggle-checkmark::before {
  content: "";
  width: 2px;
  height: 8px;
  background: inherit;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
.professional-toggle-checkmark::after {
  content: "";
  width: 5px;
  height: 2px;
  background: inherit;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-checkmark-holder .professional-toggle-checkmark {
  opacity: 1;
}
.professional-toggle-message {
  align-self: self-start;
  font-size: 1.333rem;
  white-space: break-spaces;
  color: var(--text-color-tertiary);
  display: block;
  transition: color 100ms;
}
.professional-toggle--disabled .professional-toggle-message {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .professional-toggle:hover .professional-toggle-message {
    color: var(--text-color-muted);
  }
  .professional-toggle--checkmark:hover .professional-toggle-message {
    color: var(--text-color-tertiary);
  }
}
.editing .professional-toggle--editable .professional-toggle-message {
  opacity: 1;
}
.professional-toggle-checkbox:disabled ~ .professional-toggle-message {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-message,
.professional-toggle-checkbox:checked ~ .professional-toggle-message-holder .professional-toggle-message {
  color: var(--text-color-tertiary);
}
@media only screen and (min-width: 768px) {
  .professional-toggle:hover .professional-toggle-checkbox:not(:disabled):checked ~ .professional-toggle-message {
    color: var(--text-color-muted);
  }
}
.professional-toggle-checkbox:checked ~ .professional-toggle-message--off {
  display: none;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-message--on {
  display: block;
}
.is-toggling .professional-toggle-spinner-holder {
  display: block;
}
.editing .professional-toggle--editable {
  pointer-events: all;
}
/* Avatars */
.professional-avatar-wrapper {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.professional-avatar-edit-icon {
  background: #fff;
  border-radius: 50%;
  fill: #3f4349;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  border: 3px solid var(--surface-color-1-divider-color);
  box-sizing: content-box;
  right: 0;
  bottom: 0;
  transition: all 200ms;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .professional-avatar-wrapper:hover .professional-avatar-edit-icon {
    fill: #35383d;
  }
}
.professional-avatar {
  position: relative;
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
  width: 9rem;
  height: 9rem;
  background: var(--surface-color-2-divider-color);
  background-clip: content-box;
  text-indent: -999999999px;
  transition: all 200ms;
}
.professional-avatar--org {
  border: 0.2rem solid var(--team-text-color);
}
.professional-avatar--extra-large {
  width: 12rem;
  height: 12rem;
}
.professional-avatar--large {
  width: 9rem;
  height: 9rem;
}
.professional-avatar--medium {
  width: 6rem;
  height: 6rem;
}
.professional-avatar--small {
  width: 4rem;
  height: 4rem;
}
.professional-avatar--extra-small {
  width: 3rem;
  height: 3rem;
}
.professional-avatar--round {
  border-radius: 50%;
}
.editing .professional-avatar--editable {
  pointer-events: all;
}
@media only screen and (min-width: 768px) {
  .professional-avatar--editable {
    cursor: pointer;
  }
  .professional-avatar--editable:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
  .professional-avatar-wrapper:hover .professional-avatar--editable {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.user-menu-avatar {
  background-clip: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: 0.2rem solid transparent;
}
.user-menu-avatar-smaller {
  background-clip: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: 0.3rem solid transparent;
  position: absolute;
  width: 2rem;
  height: 2rem;
}
.professional-dropdown-selected-item .user-menu-avatar {
  border-color: var(--primary-button-bg);
}
.user-menu-avatar-arrow-icon {
  opacity: 0.7;
  transition: all 200ms;
}
.user-menu-avatar-holder:hover .user-menu-avatar-arrow-icon {
  opacity: 1;
}
.professional-dropdown-selected-item .user-menu-avatar-arrow-icon {
  opacity: 1;
  fill: var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .user-menu-avatar:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-avatar-badge-wrapper {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.user-menu-avatar--org {
  border-color: var(--team-text-color);
}
.professional-avatar-badge {
  position: absolute;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  background: var(--team-text-color);
  border: 2px solid var(--surface-color-2);
  box-sizing: content-box;
  pointer-events: none;
  right: 0;
  top: 0;
  -webkit-transform: translate(8%, -2%);
          transform: translate(8%, -2%);
}
.professional-avatar--small + .professional-avatar-badge,
.professional-avatar--medium + .professional-avatar-badge {
  -webkit-transform: translate(30%, -30%);
          transform: translate(30%, -30%);
}
.professional-avatar--extra-large + .professional-avatar-badge {
  width: 2rem;
  height: 2rem;
  -webkit-transform: translate(0, -5%);
          transform: translate(0, -5%);
}
.professional-avatar-badge-icon {
  width: 80%;
  height: 80%;
  fill: #fff;
}
/* Tags Input */
.professional-tags-input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  width: auto;
  min-width: 10rem;
  max-width: inherit;
  font-size: 1.333rem;
  padding: 0;
  color: #5f5f5f;
}
/* Tags Input in Admin Modals (No example is style guide currently ) */
.bootstrap-tagsinput {
  font-size: 1.333rem;
  padding: 1.2rem 0;
  min-width: 100%;
  margin-top: 6px;
  border-radius: 4px;
  color: var(--tag-color);
  outline: none;
  resize: none;
}
.pensive-modal-input-holder .bootstrap-tagsinput {
  min-height: 7rem;
}
.professional-modal .bootstrap-tagsinput {
  border: 1px solid var(--text-color-muted);
}
.share-via-email-section .bootstrap-tagsinput {
  min-height: unset;
  margin-top: 1rem;
  padding: 1rem;
}
.professional-modal .bootstrap-tagsinput.fake-focus {
  border: 1px solid var(--primary-button-bg);
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  margin: 0;
  width: auto;
  min-width: 100px;
  max-width: inherit;
  font-size: 14px;
  padding: 0;
  color: var(--text-color-primary);
}
.bootstrap-tagsinput .tag {
  margin: 0.2rem 0.4rem 0.5rem 0;
  display: inline-flex;
  color: var(--tag-color);
  background: var(--tag-bg);
  padding: 0.85rem 0.9rem 0.8rem 1.8rem;
  border-radius: 2rem;
  box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.07);
}
.bootstrap-tagsinput .tag.not-valid {
  background: #facbc5;
  color: #d32f2f;
  border: none;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  position: relative;
  margin-left: 8px;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-block;
  transition: background 100ms;
}
.bootstrap-tagsinput .tag [data-role="remove"]::before,
.bootstrap-tagsinput .tag [data-role="remove"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 0.2rem;
  opacity: 0.5;
  background: var(--tag-color);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  transition: background 100ms;
}
.bootstrap-tagsinput .tag [data-role="remove"]::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.professional-dropdown-selected-item {
  pointer-events: none !important;
}
.bootstrap-tagsinput .tag.delete-all.professional-dropdown-selected-item {
  box-shadow: 0 0 0 1px #d32f2f;
  color: #d32f2f;
}
.bootstrap-tagsinput .tag.not-valid [data-role="remove"]::before,
.bootstrap-tagsinput .tag.not-valid [data-role="remove"]::after {
  color: #d32f2f;
}
.bootstrap-tagsinput .tag.delete-all.professional-dropdown-selected-item [data-role="remove"]::before,
.bootstrap-tagsinput .tag.delete-all.professional-dropdown-selected-item [data-role="remove"]::after {
  background: #d32f2f;
}
@media only screen and (min-width: 768px) {
  .bootstrap-tagsinput .tag [data-role="remove"]:hover::before,
  .bootstrap-tagsinput .tag [data-role="remove"]:hover::after {
    opacity: 1;
  }
  .bootstrap-tagsinput .tag.not-valid [data-role="remove"]:hover::before,
  .bootstrap-tagsinput .tag.not-valid [data-role="remove"]:hover::after {
    opacity: 1;
  }
}
.tt-menu {
  background: var(--surface-color-0);
  border-radius: 0;
  position: absolute;
  z-index: 9999999999 !important;
  overflow: hidden;
  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
}
.tt-suggestion {
  font-family: "Open Sans", helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.333rem;
  padding: 0.8em 1.8em 0.8em 1.2em;
  cursor: pointer;
  background: #fff;
}
.tt-suggestion:hover {
  background-color: #efefef;
}
.tt-cursor {
  background: var(--primary-button-bg);
  color: #fff;
}
.tt-cursor:hover {
  background: #2390bf;
  color: #fff;
}
.bootstrap-tagsinput input.tt-hint {
  color: #d32f2f;
}
/* Duration Input */
/* Duration Modal Input */
.modal-duration-input-fields {
  padding: 4rem 2rem 0 1.3rem;
}
.modal-duration-input-field {
  position: relative;
}
.modal-duration-input-field::after {
  content: attr(data-time-marker);
  position: absolute;
  right: 0.6rem;
  bottom: 0.68rem;
  font-size: 1.2rem;
  color: #4caf50;
  pointer-events: none;
}
.modal-duration-input-field-input {
  display: inline-flex;
  max-width: 5rem;
  color: #5f5f5f;
  text-align: right;
  padding: 1rem 2.2rem 0.8rem 1rem;
  outline: none;
  cursor: pointer;
  background: #f7f7f7;
  border: thin solid #f7f7f7;
  border-radius: 0.4rem;
  transition: all 200ms;
}
.modal-duration-input-field-input::-webkit-outer-spin-button,
.modal-duration-input-field-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}
.modal-duration-input-field-input:hover {
  background: #ececec;
  border: thin solid #e3e3e3;
}
.modal-duration-input-field-input:focus {
  cursor: default;
  background: #e9f1f7;
  border: thin solid #e0ebf3;
}
.scene-duration-holder {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0.4rem;
  right: 0.4rem;
  padding: 0.1em 0.4em;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 0.2rem;
  z-index: 99;
}
/* Tooltips */
[data-tooltip-boundary] {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
@media only screen and (min-width: 768px) {
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: fixed;
    text-align: left;
    padding: 0.8rem 1rem;
    border-radius: 0.4rem;
    font-size: 1.2rem;
    left: calc(var(--item-left) + calc(var(--item-width) / 2));
    top: calc(var(--item-top) - 0.5rem);
    /* stylelint-disable */
    -webkit-transform: translate(calc(-50% + var(--offset, 0px)), calc(-100% + 1rem));
            transform: translate(calc(-50% + var(--offset, 0px)), calc(-100% + 1rem));
    /* stylelint-enable */
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    background: var(--tooltip-bg);
    color: #f2f2f2;
    pointer-events: none;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: var(--item-max-width, 30rem);
    z-index: 999999999999;
    opacity: 0;
    transition: opacity 100ms, -webkit-transform 100ms;
    transition: opacity 100ms, transform 100ms;
    transition: opacity 100ms, transform 100ms, -webkit-transform 100ms;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  [data-tooltip].tooltip--push-down::before {
    top: calc(var(--item-top) + var(--item-height) + 0.8rem);
    /* stylelint-disable */
    -webkit-transform: translate(calc(-50% + var(--offset, 0px)), -1rem);
            transform: translate(calc(-50% + var(--offset, 0px)), -1rem);
    /* stylelint-enable */
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  [data-tooltip]:hover::before {
    opacity: 1;
    /* stylelint-disable */
    -webkit-transform: translate(calc(-50% + var(--offset, 0px)), -100%);
            transform: translate(calc(-50% + var(--offset, 0px)), -100%);
    /* stylelint-enable */
    transition-delay: 400ms;
  }
  [data-tooltip-fast]:hover::before {
    transition-delay: 0ms;
  }
  [data-tooltip].tooltip--push-down:hover::before {
    /* stylelint-disable */
    -webkit-transform: translate(calc(-50% + var(--offset, 0px)), 0);
            transform: translate(calc(-50% + var(--offset, 0px)), 0);
    /* stylelint-enable */
  }
  [data-tooltip].tooltip--hidden:hover::before {
    opacity: 0 !important;
  }
  [data-character-tooltip]::before {
    content: "";
    background-image: var(--image);
    width: 8rem;
    height: 10rem;
    background-color: var(--text-color-muted);
    position: fixed;
    background-size: cover;
    background-position: center 10%;
    border-radius: 0.6rem 0 0 0.6rem;
    background-repeat: no-repeat;
    left: calc(calc(var(--item-left) - var(--item-width)) - 8rem);
    top: calc(var(--item-top) - 5rem);
    -webkit-transform: translate(var(--offset, 0%), calc(-100% + 0.8rem));
            transform: translate(var(--offset, 0%), calc(-100% + 0.8rem));
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms, -webkit-transform 100ms;
    transition: opacity 100ms, transform 100ms;
    transition: opacity 100ms, transform 100ms, -webkit-transform 100ms;
    z-index: 99999999999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  [data-character-tooltip].tooltip--push-down::before {
    top: calc(var(--item-top) + var(--item-height) + 0.8rem);
    /* stylelint-disable */
    -webkit-transform: translate(var(--offset, 0%), -1rem);
            transform: translate(var(--offset, 0%), -1rem);
    /* stylelint-enable */
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  [data-character-tooltip]:hover::before {
    opacity: 1;
    -webkit-transform: translate(var(--offset, 0%), -100%);
            transform: translate(var(--offset, 0%), -100%);
  }
  [data-character-tooltip].tooltip--push-down:hover::before {
    /* stylelint-disable */
    -webkit-transform: translate(var(--offset, 0%), -4rem);
            transform: translate(var(--offset, 0%), -4rem);
    /* stylelint-enable */
  }
  [data-character-tooltip]::after {
    content: attr(data-character-tooltip-name);
    background-color: var(--surface-color-1);
    color: var(--text-color-primary);
    width: 15rem;
    height: 10rem;
    position: fixed;
    border-radius: 0 0.6rem 0.6rem 0;
    padding: 2rem;
    font-size: 1.333rem;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    text-transform: none;
    left: calc(var(--item-left) - var(--item-width));
    top: calc(var(--item-top) - 5rem);
    pointer-events: none;
    -webkit-transform: translate(var(--offset, 0%), calc(-100% + 0.8rem));
            transform: translate(var(--offset, 0%), calc(-100% + 0.8rem));
    transition: opacity 100ms, -webkit-transform 100ms;
    transition: opacity 100ms, transform 100ms;
    transition: opacity 100ms, transform 100ms, -webkit-transform 100ms;
    z-index: 99999999999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  [data-character-tooltip].tooltip--push-down::after {
    top: calc(var(--item-top) + var(--item-height) + 0.8rem);
    /* stylelint-disable */
    -webkit-transform: translate(var(--offset, 0%), -1rem);
            transform: translate(var(--offset, 0%), -1rem);
    /* stylelint-enable */
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  [data-character-tooltip]:hover::after {
    opacity: 1;
    -webkit-transform: translate(var(--offset, 0%), -100%);
            transform: translate(var(--offset, 0%), -100%);
  }
  [data-character-tooltip].tooltip--push-down:hover::after {
    /* stylelint-disable */
    -webkit-transform: translate(var(--offset, 0%), -4rem);
            transform: translate(var(--offset, 0%), -4rem);
    /* stylelint-enable */
  }
  /* stylelint-disable */
  [data-scene-tooltip]::before {
    content: attr(data-scene-tooltip-heading);
    position: absolute;
    bottom: 40px;
    left: 50%;
    background: #fff;
    box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    overflow: hidden;
    width: 20rem;
    opacity: 0;
    text-transform: uppercase;
    text-align: left;
    padding: 0;
    font-size: 1.067rem;
    font-weight: bold;
    color: var(--text-color-tertiary);
    height: 2.8em;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    border: 0.8rem solid #fff;
    border-top-width: 12rem;
    z-index: 9999999;
  }
  /* stylelint-enable */
  [data-timeline-filter~="media"] [data-scene-tooltip]::before {
    border-top-width: 1rem;
  }
  [data-scene-tooltip]:hover::before {
    opacity: 1;
  }
  [data-scene-tooltip]::after {
    content: "";
    background-image: var(--image);
    background-repeat: no-repeat;
    height: 10.75rem;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    bottom: 8.4rem;
    width: 20.2rem;
    left: 50%;
    border-radius: 0.2rem;
    background-size: cover;
    background-position: center center;
    background-color: #efefef;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 9999999;
  }
  [data-timeline-filter~="media"] [data-scene-tooltip]::after {
    display: none;
  }
  [data-scene-tooltip]:hover::after {
    opacity: 1;
  }
}
/* Modals */
.modal {
  position: absolute;
  width: 100%;
  top: 0px;
  pointer-events: none;
  z-index: 99999999;
  min-height: 100vh;
  min-height: 100svh;
  transition: background-color 150ms;
}
.showing-modal .modal,
.showing-app-modal .app-modal,
.showing-error-modal .error-modal {
  background: rgba(0, 0, 0, 0.4);
}
.professional-modal--gradient {
  background: linear-gradient(45deg, #f9f7fd, #f6fafe);
}
.professional-modal-bkg-image-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
}
.professional-modal-bkg-image-holder::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.6);
}
.professional-modal-bkg-image {
  width: 120%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  -o-object-position: 80% center;
     object-position: 80% center;
  top: 0;
  right: 0;
  -webkit-filter: saturate(0.5) brightness(0.75);
          filter: saturate(0.5) brightness(0.75);
}
.professional-modal-content--light-blue-gray {
  background: #fdfdfd;
  border-bottom: thin solid #e6e6e6;
}
.professional-modal-content--blocked {
  pointer-events: none;
  opacity: 0.4;
}
.professional-modal-content--inner-tabs {
  display: grid;
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
  grid-template-columns: -webkit-min-content 1fr;
  grid-template-columns: min-content 1fr;
}
.professional-modal-content-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
}
@-webkit-keyframes professional-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.professional-modal-warning-overlay {
  position: absolute;
  z-index: 139;
  left: 1rem;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  pointer-events: none;
  bottom: 1rem;
  background: #ffffff;
  transition: all 200ms;
}
.professional-modal-warning-overlay-content {
  padding: 4rem;
  text-align: center;
  width: calc(100% - 14rem);
  max-width: 48rem;
  box-sizing: content-box;
}
.professional-modal-warning-overlay-content-image {
  width: 60%;
  max-width: 27rem;
  max-height: 27rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.professional-modal-template-masthead-content {
  z-index: 9;
  left: 0;
  top: 0;
  height: 100%;
  max-width: 62%;
  padding: 3rem 2rem 0;
  margin-top: -42%;
  position: relative;
}
.professional-modal-template-masthead-content-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  color: var(--masthead-header-color, #fff);
}
.professional-modal-template-masthead-content-title-new {
  text-transform: uppercase;
  display: block;
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.professional-modal-template-masthead-content-learn-more {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--masthead-color, #fff);
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-modal-template-masthead-content-learn-more:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-modal-template-masthead-content-learn-more-icon {
  fill: currentColor;
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-modal-template-masthead-content-learn-more:hover .professional-modal-template-masthead-content-learn-more-icon {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
}
.professional-code-holder {
  font-family: "Open Sans", helvetica, sans-serif;
  display: block;
  word-break: break-word;
  width: 100%;
  white-space: pre-line;
  font-size: 1.333rem;
  background: #efefef;
  padding: 1.4rem;
  border-radius: 0.4rem;
  resize: none;
  min-height: 16rem;
  border: none;
  outline: none;
  color: var(--text-color-tertiary);
}
.professional-code-holder--tall {
  height: 50vh;
  max-height: 90rem;
}
.professional-modal-story-thumbnail-image.loading {
  background: #f7f7f7 url(/web-app/img/update_image_thumb_spinner.gif) no-repeat center center;
  background-size: 60px;
}
[data-can-edit="no"] .app-modal-component-content > * {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Act Header Tooltips */
.act-tooltip-holder {
  width: calc(100vw - 40px);
  max-width: 300px;
  background: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 0.8rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.act-tooltip-background {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-header-color-dilution));
}
.act-tooltip-text-holder {
  position: relative;
  padding: 14px 18px;
}
.act-tooltip-text-pre-header {
  display: block;
  color: var(--text-color-primary);
  opacity: 0.6;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0;
}
.act-tooltip-text-header {
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--text-color-primary);
  margin-top: 3px;
  opacity: 0.8;
}
.act-tooltip-text-content {
  font-size: 1.333rem;
  line-height: 1.5em;
  color: var(--text-color-primary);
}
.act-tooltip-text-content > p,
.act-tooltip-text-content > ul {
  font-size: 1.333rem;
  display: block;
  line-height: 1.5em;
  margin-top: 8px;
  word-wrap: break-word;
}
.act-tooltip-text-content > ul {
  padding: 0 1.8rem 0.8rem;
}
.act-tooltip-text-content > ul > li {
  margin-top: 1rem;
}
.tooltipsy {
  background: var(--surface-color-4);
  color: var(--text-color-primary);
  text-transform: capitalize;
  border-radius: 2px;
  padding: 4px 9px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
}
@media only screen and (min-width: 600px) {
  .tooltipsy {
    opacity: 1;
  }
}
.avatar {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  background: var(--surface-color-2);
  text-indent: -999999999px;
}
.avatar.loading {
  background-size: 80%;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/image_search_input_spinner.gif);
  background-position: center center;
}
.avatar--small {
  width: 40px;
  height: 40px;
}
.avatar--medium {
  width: 60px;
  height: 60px;
}
.avatar--large {
  width: 90px;
  height: 90px;
}
.avatar--round {
  border-radius: 50%;
}
.avatar-clickable {
  cursor: pointer;
}
.avatar-clickable:hover {
  opacity: 0.9;
}
/* Warning Modals */
.exclamation-warning-icon {
  fill: #ffcdd2;
}
.error-warning-icon {
  fill: #f44336;
}
.error-warning-icon.okay {
  fill: var(--primary-button-bg);
}
.dialog__warning-message {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color-primary);
}
.dialog__warning-subtext {
  font-size: 14px;
  margin-top: 6px;
  display: block;
  color: var(--text-color-tertiary);
  text-wrap: balance;
}
.dialog__actions-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
}
.dialog__actions-footer-button {
  font-family: "Open Sans", helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0.9em 0.6em 0.8em;
  white-space: nowrap;
  margin: 0;
  border: none;
  font-size: 1.6rem;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.dialog__actions-footer-button--yes {
  background: var(--danger-button-bg);
  color: var(--danger-button-color);
}
.dialog__actions-footer-button--yes:hover {
  color: var(--danger-button-color-hover);
  background: var(--danger-button-bg-hover);
}
.dialog__actions-footer-button--try-again {
  background: var(--primary-button-bg);
  color: #fff;
  border-radius: 0 0 0 2px;
  padding: 2.6rem;
  text-transform: uppercase;
}
.dialog__actions-footer-button--try-again:hover {
  background: var(--primary-button-bg-hover);
}
.dialog__actions-footer-button--no {
  background: var(--secondary-button-bg);
  color: var(--secondary-button-color);
}
.dialog__actions-footer-button--no:hover {
  color: var(--secondary-button-color-hover);
  background: var(--secondary-button-bg-hover);
}
.save_cancel_warning_graphic {
  width: 130px;
  height: 130px;
}
.upgrade-warning {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  width: 100%;
  max-width: 55rem;
  border-radius: 0.5rem;
  margin-top: 2rem;
  box-shadow: 0 5px 26px rgba(0, 0, 0, 0.13);
}
.upgrade-warning-content {
  padding: 3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .upgrade-warning {
    margin-top: 0;
  }
}
.upgrade-warning-top-text,
.upgrade-warning-bottom-text {
  font-size: 1.6rem;
  color: #d32f2f;
  text-align: center;
  font-weight: bold;
}
.upgrade-warning-bottom-text {
  margin-top: 3rem;
}
.upgrade-warning-cta-holder {
  padding: 2rem 1rem 0;
  padding: 2rem clamp(1rem, 2vw, 4rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}
.upgrade-warning-cta-image {
  max-width: 14rem;
  max-width: clamp(14rem, 17vw, 19rem);
}
.upgrade-warning-cta-message {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.5em;
  line-height: clamp(1.5em, 4vw, 1.3rem);
  text-align: center;
  color: var(--text-color-tertiary);
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 26ch;
}
/* Toast Notifications */
#toast-notifications {
  background: transparent;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
  pointer-events: none;
}
.toast-notification-stack {
  width: 100%;
  padding-top: 3rem;
  position: fixed;
  bottom: 0px;
  left: 0;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.toast-notification-outer {
  width: calc(100% - 40px);
  max-width: 800px;
  display: none;
  margin-bottom: 20px;
  pointer-events: all;
}
.toast-notification {
  display: flex;
  flex-direction: column;
  pointer-events: all;
  padding: 16px;
  box-sizing: border-box;
  background: var(--surface-color-3);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--surface-color-3-divider-color), 0px 3px 5px rgba(0, 0, 0, 0.16);
}
.toast-notification-header {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color-primary);
}
.toast-notification-story-thumbnail {
  position: relative;
  width: 9rem;
  padding-top: 6rem;
  border-radius: 0.3rem;
  overflow: hidden;
}
.toast-notification-story-thumbnail-image {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999999px;
}
.professional-story-thumbnail-wrapper {
  width: 100%;
  max-width: 41rem;
}
.professional-story-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 60%;
  border-radius: 0.5rem;
  overflow: hidden;
}
.professional-story-thumbnail-image {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999999px;
}
.toast-notification-body {
  font-size: 14px;
  margin-top: 4px;
}
.toast-notification-link {
  font-size: inherit;
  color: var(--primary-text-color);
  text-decoration: none;
  cursor: pointer;
  transition: all 400ms;
}
@media only screen and (min-width: 768px) {
  .toast-notification-link:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.toast-notification-actions {
  flex: 1;
  gap: 5px;
  display: flex;
  flex-direction: column;
}
.toast-notification-action-button {
  display: block;
  background: var(--secondary-button-bg);
  width: 100%;
  padding: 12px;
  font-size: 14px;
  -webkit-appearance: none;
  border-radius: 3px;
  font-weight: bold;
  color: var(--secondary-button-color);
  outline: none;
  cursor: pointer;
}
.toast-notification-action-button:first-child {
  margin-top: 20px;
}
@media only screen and (min-width: 600px) {
  .toast-notification {
    flex-direction: row;
  }
  .toast-notification-body {
    padding-right: 30px;
  }
  .toast-notification-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .toast-notification-action-button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: normal;
    padding: 8px 18px;
    white-space: nowrap;
  }
  .toast-notification-action-button:first-child {
    margin-top: 0;
  }
  .toast-notification-action-button:hover {
    color: var(--secondary-button-color-hover);
    color: var(--secondary-button-bg-hover);
  }
}
/* Tabs */
.professional-tab-item.selected .professional-tab-item-icon {
  fill: var(--primary-button-bg);
  transition: all 200ms;
}
.professional-tab-item:first-child:not(.professional-tab-item--vertical):not(.selected) {
  padding-left: 0;
}
/* Feature Settings */
.professional-feature-item-drag-ghost-icon-holder .new-section-feature-icon {
  margin: 0;
}
.notinstalled .professional-story-feature-card-icon-holder::before {
  background: #8b8b8b;
}
.professional-story-feature-card-title {
  font-size: 1.6rem;
  color: #444446;
}
.professional-story-feature-card.notinstalled .professional-story-feature-card-title {
  color: #4caf50;
}
.professional-story-feature-card-description {
  font-size: 1.2rem;
  color: #a1a6aa;
  margin-top: 0.8rem;
  line-height: 1.4em;
}
.professional-story-feature-card-detail {
  display: inline-block;
  font-size: 0.933rem;
  margin-top: 0.1em;
  font-weight: bold;
  color: #6dbc6e;
  text-transform: uppercase;
  background: #e8f5e9;
  padding: 0.3em 0.6em 0.3em;
  border-radius: 0.4rem;
}
.professional-story-feature-card-detail--recommended {
  color: #6dbc6e;
  background: #e8f5e9;
}
.professional-story-feature-card-detail--highly-recommended {
  color: #ffa742;
  background: #fff5e4;
}
.professional-story-feature-card-detail--installed,
.professional-story-feature-card-detail--new {
  color: #4c84afc4;
  background: #e8eff5;
}
.professional-story-feature-card-detail--not-recommended {
  color: #f97c72;
  background: #fce9e9;
}
.professional-story-feature-card-detail--very-not-recommended {
  color: #f97c72;
  background: #fce9e9;
}
.professional-story-feature-card-settings-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 999;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  fill: var(--text-color-muted);
  padding: 0.5rem;
  transition: all 200ms;
}
.professional-story-feature-card-settings-button-icon {
  width: 70%;
  height: 70%;
}
@media only screen and (min-width: 768px) {
  .professional-story-feature-card-settings-button {
    opacity: 0;
  }
  .professional-story-feature-card-settings-button:hover {
    fill: #d32f2f;
    background: #f2f2f2;
  }
  .professional-story-feature-card:hover .professional-story-feature-card-settings-button {
    opacity: 1;
  }
}
.notinstalled .professional-story-feature-card-recommended {
  display: none;
}
.professional-add-new-story-feature-card {
  background: #f1f1f6;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
}
.professional-feature-item-drag-ghost-icon-holder {
  position: relative;
  width: 3rem;
  height: 3rem;
  color: var(--primary-button-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 0.3rem 0 0;
  border-radius: 0.5rem;
  overflow: hidden;
  pointer-events: none;
}
.professional-feature-item-drag-ghost-icon-holder:empty {
  display: none;
}
.professional-feature-item-drag-ghost-icon-holder::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-button-bg);
  opacity: 0;
}
.professional-feature-item-drag-ghost-icon-holder:has(.new-section-feature-icon)::before {
  opacity: 0;
}
.professional-available-story-feature-list-item:hover .professional-story-feature-list-item-info-link,
.professional-story-feature-list-item:hover .professional-story-feature-list-item-info-link,
.professional-feature-list-section-header:hover .professional-story-feature-list-item-info-link {
  opacity: 1;
  pointer-events: auto;
}
.professional-story-feature-list-item-title-required {
  color: #ff9089;
}
.professional-available-story-feature-list-item--button {
  cursor: pointer;
}
.professional-available-story-feature-list-item--button.professional-dropdown-selected-item {
  border-color: var(--primary-button-bg);
  box-shadow: 0 2px 2px -2px rgba(47, 45, 67, 0);
}
@media only screen and (min-width: 768px) {
  .professional-available-story-feature-list-item:hover {
    box-shadow: 0 3px 4px -3px rgba(47, 45, 67, 0.23);
  }
}
.professional-story-feature-list-item-dropdown-icon-holder {
  width: 5rem;
  padding: 1.8rem;
  fill: var(--text-color-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
.professional-feature-item-drop-target {
  display: flex;
  align-items: center;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
  position: relative;
  width: 100%;
  height: 4.9rem;
  opacity: 0.5;
  border-radius: 0.6rem;
  background: var(--draggable-item-bg);
  box-shadow: 0 0 0 1px var(--draggable-item-border-color);
}
.professional-feature-item-drop-target-grab-icon {
  fill: currentColor;
}
.professional-feature-item-drop-target-grab-icon .professional-story-feature-list-item-grab-here {
  opacity: 0.2;
}
.professional-feature-item-drop-target-icon {
  background: transparent;
  display: flex;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.4rem;
  justify-content: center;
  color: currentColor;
  margin-right: 0.57142857rem;
}
.professional-draggable-items-holder {
  min-height: calc(80vh - 33rem);
  position: -webkit-sticky;
  position: sticky;
  top: 3rem;
}
.professional-feature-prompt {
  position: absolute;
  bottom: 4rem;
  right: 4rem;
  background: #fff;
  padding: 1.8rem 2rem;
  border: thin solid #e9ebef;
  border-radius: 1rem;
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.25), 0 17px 20px -7px rgba(0, 0, 0, 0.06);
  z-index: 200;
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transform: translateX(2rem);
          transform: translateX(2rem);
  transition: all 400ms;
}
.professional-feature-prompt.showing {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.professional-feature-prompt.dark {
  background: #464f5c;
  border: none;
  box-shadow: 0 2px 4px -1px rgba(71, 79, 92, 0.66), 0 17px 20px -7px rgba(71, 79, 92, 0.27);
}
.professional-feature-prompt-title {
  font-size: 1.333rem;
  line-height: 1.55em;
  max-width: 37ch;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-weight: normal;
  color: #666;
}
.dark .professional-feature-prompt-title {
  color: #fff;
}
.professional-feature-prompt-buttons {
  margin-top: 1.8rem;
}
.professional-feature-prompt-button {
  padding: 0.5em 1em 0.45em;
  font-size: 1.3rem;
  border-radius: 0.4rem;
  font-family: "Open Sans", helvetica, sans-serif;
  color: #666;
  transition: all 100ms;
}
.dark .professional-feature-prompt-button {
  color: #fff;
}
.professional-feature-prompt-button--confirm {
  position: relative;
  background: #fff;
  border: thin solid #c7c7c7;
  font-weight: bold;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 8px 7px -2px rgba(0, 0, 0, 0);
}
.dark .professional-feature-prompt-button--confirm {
  position: relative;
  color: #f2f2f2;
  border: none;
  background: #626d7f;
}
.professional-feature-prompt-button--deny {
  color: #666;
  border: thin solid transparent;
}
.dark .professional-feature-prompt-button--deny {
  color: #bfc1c4;
  border: none;
}
@media only screen and (min-width: 768px) {
  .professional-feature-prompt-button--confirm:hover {
    box-shadow: 0 2px 3px -3px rgba(0, 0, 0, 0.42), 0 8px 7px -2px rgba(0, 0, 0, 0.04);
  }
  .dark .professional-feature-prompt-button--confirm:hover {
    background: #727e92;
    box-shadow: 0 2px 3px -3px rgba(0, 0, 0, 0.42), 0 8px 7px -2px rgba(0, 0, 0, 0.04);
  }
  .professional-feature-prompt-button--deny:hover {
    background: #f0f2f4;
    border-color: #f0f2f4;
  }
  .dark .professional-feature-prompt-button--deny:hover {
    background: #727e92;
    color: #e8e9ec;
  }
}
.professional-feature-prompt-content {
  opacity: 1;
  transition: all 400ms;
}
.success .professional-feature-prompt-content {
  opacity: 0;
  pointer-events: none;
}
.professional-feature-prompt-success-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: all 200ms;
  transition-delay: 200ms;
}
.success .professional-feature-prompt-success-holder {
  opacity: 1;
}
.professional-feature-prompt-success-icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: #62c666;
}
[data-section-drop-zone] {
  min-height: calc(80vh - 33rem);
  flex: 1;
}
.professional-empty-state-container {
  padding: 2rem;
  border: thin solid var(--draggable-item-drop-zone-border-color);
  background: var(--draggable-item-drop-zone-bg);
  border-radius: 0.6rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
}
.professional-empty-state-container-message {
  text-align: center;
  font-size: 1.333rem;
  font-weight: normal;
  line-height: 1.5em;
  color: var(--text-color-muted);
  display: block;
}
/* Structure Editor */
.auto-label-holder {
  display: flex;
  align-items: center;
}
.auto-label-form {
  display: none;
}
.auto-label-on .auto-label-form {
  display: flex;
  padding-left: 2rem;
  gap: 1rem;
}
.professional-drag-indicator-icon {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.professional-act-drop-target {
  position: relative;
  width: 100%;
  height: 0;
  box-shadow: 0 -5px 0 2px var(--primary-button-bg);
}
.professional-act-drop-target::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  left: -5px;
  top: -11px;
  border: 7px solid transparent;
  border-left-color: var(--primary-button-bg);
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.professional-act-drop-target::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  right: -5px;
  top: -11px;
  border: 7px solid transparent;
  border-right-color: var(--primary-button-bg);
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.professional-story-structure-cards-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  gap: 3rem;
  padding: 3rem 0 5rem;
}
.professional-story-structure-card {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 1rem;
  box-shadow: 0 4px 7px -3px rgba(112, 112, 112, 0.1), 0 8px 16px -6px rgba(112, 112, 112, 0.14);
  height: 100%;
  transition: all 200ms;
}
.professional-story-structure-card.installed {
  background: var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .professional-story-structure-card:hover {
    box-shadow: 0 2px 14px -2px rgba(112, 112, 112, 0.18), 0 10px 28px -2px rgba(112, 112, 112, 0.18);
  }
}
.professional-story-structure-card-masthead {
  display: grid;
}
.professional-story-structure-card-image-holder {
  width: 100%;
  position: relative;
  padding-top: 45%;
  min-height: 12rem;
  overflow: hidden;
  border-radius: 0.6rem;
  grid-column: -1;
  grid-row: -1;
}
.professional-story-structure-card .professional-story-structure-card-image-holder {
  border-radius: 0;
}
.professional-story-structure-card-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.professional-story-structure-card-title-holder {
  grid-column: -1;
  grid-row: -1;
  align-self: center;
  z-index: 10;
  padding: 1.4rem;
}
.professional-story-structure-card-title {
  color: #fff;
  font-size: 2rem;
}
.professional-story-structure-card-footer {
  display: flex;
  padding: 1.6rem 1.4rem 1.4rem;
  justify-content: space-between;
  gap: 1rem;
}
.installed .professional-story-structure-card-footer {
  padding: 1.7rem 0.9rem 1rem;
}
.professional-story-structure-card-learn-more {
  display: flex;
  align-items: center;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.2rem;
  padding: 0.3rem 0.8rem;
  border: none;
  color: var(--text-color-tertiary);
  border-radius: 0.3rem;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-story-structure-card-learn-more {
    opacity: 0;
  }
  .professional-story-structure-card-learn-more:hover {
    background: #efefef;
  }
  .professional-story-structure-card:hover .professional-story-structure-card-learn-more {
    opacity: 1;
  }
}
.professional-story-structure-card-selected {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.3rem 0.8rem;
  border: thin solid var(--primary-button-bg);
  background: var(--primary-button-bg);
  color: #fff;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: all 200ms;
}
.installed .professional-story-structure-card-selected {
  font-weight: bold;
  padding: 0 0.4rem;
  font-size: 1.333rem;
}
.professional-story-structure-current-structure-tag {
  font-size: 1.333rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  opacity: 0.76;
  font-weight: bold;
}
.professional-structure-acts-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: 2.2rem;
  padding: 0 4rem 0 3rem;
}
/*//////////////////////////*/
/*/ /////ADMIN MODALS////////*/
/*//////////////////////////*/
.loading-modal {
  position: absolute;
  width: 100%;
  height: calc(100% + 34px);
  top: -34px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 999999999999;
}
.loading-modal__bkg-cover {
  position: absolute;
  background: rgba(67, 77, 89, 0.6);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Google-style Loader */
.loader {
  width: 100px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -60px;
}
.loader:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.circular {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke: #fff;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  transition: all 500ms;
}
/*.loader:hover .path {*/
/*stroke-dasharray: 200, 200;*/
/*stroke: #fff;*/
/*stroke-dashoffset: 0;*/
/*-webkit-animation: saved 0.5s ease-in-out;*/
/*animation: saved 0.5s ease-in-out;*/
/*stroke-linecap: round;*/
/*}*/
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes saved {
  0% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 200, 200;
    stroke-dashoffset: 0;
  }
}
@keyframes saved {
  0% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 200, 200;
    stroke-dashoffset: 0;
  }
}
.saved-check-icon {
  position: absolute;
  top: 27px;
  left: 26px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 16px;
  stroke-dasharray: 250px;
  stroke-dashoffset: 250px;
  opacity: 0;
}
.error-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999999999999;
}
.modal__content-wrapper--alert {
  position: absolute;
  width: 350px;
  background: var(--surface-color-3);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
  box-shadow: 0px 0px 72px rgba(0, 0, 0, 0.5);
  border-radius: 0.6rem;
  overflow: hidden;
  text-align: center;
  padding: 27px 50px 86px;
}
/*//////////////////////////*/
/*/ /////ADMIN DASHBOARD/////*/
/*//////////////////////////*/
#admin-dashboard-plot {
  width: 100% !important;
  margin-top: 20px !important;
}
.dygraph-legend {
  background: none !important;
}
.dygraph-legend {
  position: absolute;
  font-size: 14px;
  z-index: 10;
  width: 250px;
  background: white;
  line-height: normal;
  text-align: left;
  overflow: hidden;
}
/* styles for a solid line in the legend */
.dygraph-legend-line {
  display: inline-block;
  position: relative;
  bottom: 0.5ex;
  padding-left: 1em;
  height: 1px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
/* styles for a dashed line in the legend, e.g. when strokePattern is set */
.dygraph-legend-dash {
  display: inline-block;
  position: relative;
  bottom: 0.5ex;
  height: 1px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  /* border-bottom-color is set based on the series color */
  /* margin-right is set based on the stroke pattern */
  /* padding-left is set based on the stroke pattern */
}
.dygraph-roller {
  position: absolute;
  z-index: 10;
}
/* This class is shared by all annotations, including those with icons */
.dygraph-annotation {
  position: absolute;
  z-index: 10;
  overflow: hidden;
}
/* This class only applies to annotations without icons */
/* Old class name: .dygraphDefaultAnnotation */
.dygraph-default-annotation {
  border: 1px solid black;
  background-color: white;
  text-align: center;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.dygraph-axis-label {
  /* position: absolute; */
  /* font-size: 14px; */
  z-index: 10;
  line-height: normal;
  overflow: hidden;
  color: black;
  /* replaces old axisLabelColor option */
}
.dygraph-title {
  font-weight: bold;
  z-index: 10;
  text-align: center;
  /* font-size: based on titleHeight option */
}
.dygraph-xlabel {
  text-align: center;
  /* font-size: based on xLabelHeight option */
}
/* For y-axis label */
.dygraph-label-rotate-left {
  text-align: center;
  /* See http://caniuse.com/#feat=transforms2d */
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
/* For y2-axis label */
.dygraph-label-rotate-right {
  text-align: center;
  /* See http://caniuse.com/#feat=transforms2d */
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
#admin-dashboard-plot-users {
  height: 600px !important;
  width: 100% !important;
}
#admin-dashboard-plot-user-aggregate {
  height: 600px !important;
  width: 100% !important;
}
#admin-dashboard-plot-stories {
  height: 600px !important;
  width: 100% !important;
}
#admin-dashboard-plot-story-aggregate {
  height: 600px !important;
  width: 100% !important;
}
#admin-dashboard-plot-social {
  height: 600px !important;
  width: 100% !important;
}
.admin-tabs {
  margin: 30px auto 0;
  padding-left: 3px;
}
.admin-tabs--dashboard {
  max-width: 95%;
}
.admin-tabs-item {
  display: inline-block;
}
.admin-panel-tab-view {
  max-width: 95%;
  margin: 20px auto;
}
/* Admin User List Styles */
.admin-user-list-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin-top: 12px;
  min-height: 120px;
  background: #f9f9f9;
  border: thin solid #dcdcdc;
  border-radius: 3px;
}
@media only screen and (min-width: 800px) {
  .admin-user-list-item {
    flex-direction: row;
  }
}
.admin-user-name {
  display: block;
  font-size: 18px;
  margin-top: 6px;
  text-transform: capitalize;
  font-weight: 400;
  color: #5f5f5f;
}
.admin-user-email {
  display: block;
  font-weight: 400;
  color: #5f5f5f;
  font-size: 14px;
  word-wrap: break-word;
  max-width: 220px;
  margin: 0 auto;
}
.admin-user-list-item-detail {
  font-size: 12px;
  color: #989898;
}
.admin-user-list-item-detail:first-of-type {
  margin-top: 3px;
}
.admin__user-list-item-basic-info-section {
  position: relative;
  flex: 1;
  padding: 20px 30px;
  text-align: center;
  align-items: center;
  border: thin solid #e2e2e2;
  background: #fcfcfc;
  border-radius: 8px;
}
.user-list-item-google-analytics-link {
  margin: 25px auto 10px;
  display: inline-block;
  font-size: 12px;
  padding: 6px 13px 5px;
  text-decoration: none;
  color: #b3b3b3;
  border-radius: 3px;
  border: thin solid #dedede;
}
.user-list-item-google-analytics-link:hover {
  color: #03a9f4;
  border: thin solid #03a9f4;
}
.admin__user-list-item-user-management-section {
  padding: 20px 8px;
}
@media only screen and (min-width: 800px) {
  .admin__user-list-item-user-management-section {
    flex: 1.5;
    padding: 20px;
  }
}
.admin__user-list-item-image-holder {
  position: relative;
  display: block;
  margin: 12px auto 0;
}
.user-list-item-user-level {
  margin-top: 9px;
  display: inline-block;
}
.user-list-item-writing-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 250px;
  margin: 20px auto;
}
.user-list-item-writing-stats-item {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  margin: 0 6px;
}
.user-list-item-writing-stats-value {
  font-size: 22px;
  color: #5f5f5f;
  width: 100%;
  text-align: center;
}
.user-list-item-writing-stats-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #a2a2a2;
  white-space: nowrap;
}
.edit-history-log {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
}
.edit-history-log-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  /* padding: 0 12px; */
}
.edit-history-log-item:first-child {
  padding-left: 0;
}
.edit-history-log-value {
  font-size: 18px;
  color: #5f5f5f;
  border-bottom: 2px solid #d6d6d6;
  width: 100%;
  text-align: center;
}
.edit-history-log-label {
  font-size: 12px;
  color: #a2a2a2;
  white-space: nowrap;
  /* border-top: 2px solid #d6d6d6; */
}
.admin-user-list-item-status {
  font-size: 12px;
  background: #ecf1f3;
  padding: 9px;
  margin-top: 8px;
  border-radius: 3px;
  border: thin solid #d4d9dc;
  color: #676767;
}
.admin-user-list-item-status-button {
  display: block;
  margin-top: 7px;
  -webkit-appearance: none;
  background: #26a69a;
  color: #fff;
  padding: 4px 6px;
  border: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.admin-user-list-item-status-button:hover {
  background: #009688;
}
.admin-user-list-item-status-button:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.admin-user-list-item-status-sent {
  display: block;
  margin-top: 8px;
  font-weight: bold;
  color: #009688;
}
/*//////////////////////////*/
/*/ /////////ACCOUNT/////////*/
/*//////////////////////////*/
#app-container {
  flex: 1;
}
.account-module {
  background: var(--surface-color-0);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.user-module-content {
  background: var(--surface-color-0);
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  bottom: 0;
  top: 7rem;
  left: 0;
  right: 0;
  padding-bottom: 4rem;
}
.user-module-content-page {
  background: #fff;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .user-module-content-page {
    width: calc(100% - 6rem);
    margin: 3rem auto;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 1px 5px -2px rgba(0, 0, 0, 0.2);
  }
}
.user-module-content-page-masthead {
  text-align: center;
  width: 100%;
  min-height: 30rem;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/crowdfunding_masthead_bkg.jpg);
  background-size: cover;
  background-position: bottom;
}
@media only screen and (min-width: 768px) {
  .user-module-content-page-masthead {
    min-height: 40rem;
  }
}
.user-module-content-page-masthead-logo {
  width: calc(100% - 15rem);
  max-width: 22rem;
  display: inline-block;
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .user-module-content-page-masthead-logo {
    max-width: 25rem;
    margin-top: 5rem;
  }
}
.user-module-content-page-masthead-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: var(--text-color-primary);
  display: inline-block;
  font-size: 3.2rem;
  padding: 3rem 5rem 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  font-weight: 400;
  word-break: break-word;
}
@media only screen and (min-width: 768px) {
  .user-module-content-page-masthead-title {
    font-size: 3.2rem;
  }
}
.user-module-content-page-content {
  padding: 3rem;
  font-size: 2rem;
  text-align: center;
}
.user-module-content-page-content-title {
  font-size: 2rem;
  text-align: center;
}
.user-module-content-page-content-p {
  font-size: 1.6rem;
}
.user-module-content-page-content-footer {
  text-align: left;
  font-size: 0.933rem;
  color: #d32f2f;
  border-top: thin solid var(--text-color-muted);
}
.user-module-content-page-content-fine-print {
  display: block;
}
.user-module-iframe {
  background: #f7f7f7;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  bottom: 0;
  top: 7rem;
  left: 0;
  right: 0;
}
.user-submodule-content {
  display: none;
}
/* User Navigation */
.user-header {
  position: fixed;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.33333333rem;
  padding: 0 clamp(calc(1.33333333rem * 0.5), 4vw, 1.33333333rem);
  min-height: 7rem;
  background: var(--surface-color-2);
  width: 100%;
  z-index: 130;
  border-bottom: thin solid var(--surface-color-0-divider-color);
}
.user-header-open-menu-button {
  position: relative;
  width: 3rem;
  height: 3rem;
  margin: 1rem 1.5rem 1rem 0;
}
.user-header-open-menu-button-line {
  position: absolute;
  width: 25px;
  height: 2px;
  background: var(--text-color-primary);
  border-radius: 4px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.user-header-open-menu-button-line::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: inherit;
  border-radius: 4px;
  left: 0;
  top: -8px;
}
.user-header-open-menu-button-line::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: inherit;
  border-radius: 4px;
  left: 0;
  top: 8px;
}
.user-header-logo {
  width: 135px;
  fill: var(--text-color-primary);
}
.user-header-menu-nav-logo {
  width: 60%;
  max-width: 167px;
  fill: var(--text-color-primary);
  margin: 2rem 0 2rem 2rem;
}
.user-header-menu {
  position: absolute;
  left: 0;
  top: 0;
}
.user-header-menu-nav {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 9rem);
  max-width: 34rem;
  background: var(--surface-color-2);
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 10;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.user-header-menu-nav-item:first-of-type {
  margin-top: 2rem;
}
.is-showing-account-menu .user-header-menu-nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.user-header-menu-nav-item-link {
  text-decoration: none;
  color: var(--text-color-primary);
  font-size: 1.6rem;
  line-height: 3.4em;
  letter-spacing: 0.05rem;
  font-weight: bold;
  padding: 0 2rem 0 3rem;
  display: block;
  outline: none;
  transition: all 200ms;
}
.user-header-menu-nav-item-link.selected {
  color: var(--primary-text-color);
}
.user-header-menu-auth-links {
  display: flex;
  align-items: center;
}
.user-header-menu-auth-link {
  position: relative;
  white-space: nowrap;
  font-size: 1.333rem;
  line-height: 7rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  text-decoration: none;
  color: var(--text-color-primary);
  font-weight: bold;
  padding: 0.2rem 1.4rem;
  transition: all 200ms;
}
.user-header-menu-auth-link--button-primary {
  background: var(--primary-button-bg);
  line-height: 1.4rem;
  color: #fff;
  padding: 1rem 2rem 1.1rem;
  border-radius: 2rem;
}
@media only screen and (min-width: 768px) {
  .user-header-menu-auth-link:hover {
    color: var(--text-color-primary);
  }
  .user-header-menu-auth-link--button-primary:hover {
    color: #fff;
    background: var(--primary-button-bg-hover);
  }
}
.user-header-menu-nav-auth-holder {
  margin: 2rem 3rem;
  border-top: thin solid var(--surface-color-2-divider-color);
}
.user-header-menu-nav-cover {
  position: fixed;
  background: rgba(0, 0, 0, 0.62);
  width: 100vw;
  height: 100vh;
  transition: opacity 200ms;
  opacity: 0;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
}
.is-showing-account-menu .user-header-menu-nav-cover {
  opacity: 1;
  pointer-events: all;
}
@media only screen and (min-width: 768px) {
  .user-header-open-menu-button {
    display: none;
  }
  .user-header-menu {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .user-header-menu-nav {
    position: relative;
    width: unset;
    flex-direction: row;
    align-items: center;
    height: unset;
    max-width: unset;
    -webkit-transform: unset;
            transform: unset;
  }
  .user-header-menu-nav-logo,
  .user-header-menu-nav-auth-holder {
    display: none;
  }
  .user-header-menu-nav-item {
    margin: 0 1rem;
  }
  .user-header-menu-nav-item:first-of-type {
    margin-top: 0;
  }
  .user-header-menu-nav-item-link {
    position: relative;
    white-space: nowrap;
    font-size: 1.333rem;
    font-family: "Open Sans", helvetica, sans-serif;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0 1.75rem 0;
    line-height: 7rem;
    overflow: hidden;
  }
  .user-header-menu-nav-item-link:not(.selected):hover {
    color: var(--text-color-secondary);
  }
  .user-header-menu-nav-item-link:hover::after {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .user-header-menu-nav-cover {
    display: none;
  }
}
.content-wrapper {
  width: 100%;
  max-width: 130rem;
  margin: 0 auto;
}
.account-modules-holder #settings,
.account-modules-holder #admin {
  height: 100vh;
  color: var(--text-color-primary);
  background: var(--surface-color-0);
}
.admin-message {
  padding: 12px;
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 4px;
}
.admin-message--success {
  background: #4caf50;
  border-color: transparent;
  color: var(--text-color-primary);
  fill: var(--text-color-primary);
}
.admin-input-error-text {
  font-size: 12px;
  color: #d32f2f;
}
.admin-message-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  vertical-align: top;
  color: inherit;
}
.admin-message-icon {
  fill: currentColor;
}
.admin-container-title {
  color: var(--text-color-primary);
  font-weight: 600;
  font-size: 16px;
  margin-top: 25px;
  border-top: thin solid var(--surface-color-2-divider-color);
  padding-top: 15px;
}
.admin-container-title:first-child {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}
.admin-container-content-title {
  color: var(--text-color-primary);
  font-size: 18px;
}
.admin-container-content-body {
  margin-top: 6px;
}
.account-modules-holder {
  margin-left: 0px;
  height: 100%;
}
.settings-module__subsection__input--file {
  display: none;
}
.settings-module__subsection__actions-holder {
  margin-top: 26px;
}
.admin-container__admin-input-error-text {
  margin-top: 5px;
  display: block;
}
.admin-container__admin-message {
  margin-top: 12px;
}
.admin-container__admin-message-text {
  padding-left: 5px;
}
.settings-module__subsection__loading-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(249, 249, 249, 0.81);
  pointer-events: none;
  transition: all 300ms;
  opacity: 0;
}
.saving .settings-module__subsection__loading-cover {
  pointer-events: all;
  opacity: 1;
}
.settings-module__subsection__loader {
  width: 60px;
  height: 60px;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
}
.settings-module__subsection__loader .path {
  stroke: #2ea5d8;
}
.admin__referral-list-item {
  padding: 12px 6px;
  margin-top: 12px;
}
.admin__referral-list div:first-child .admin__referral-list-item {
  margin-top: 0px;
}
.admin__referral-list div:last-child .admin__referral-list-item {
  border-bottom: none;
  padding-bottom: 0px;
}
.admin-container-section {
  width: 100%;
  padding: 12px;
}
/* Choosing, Changing, and Downgrading your plan */
.settings-module__subsection {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  margin: 18px auto 0;
  padding: 14px 20px 20px 20px;
  display: none;
}
.pricing-option-comparison-content {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 600px) {
  .pricing-option-comparison-content {
    grid-template-columns: 1fr 1fr;
  }
}
.pricing-option-comparison-header {
  color: #484848;
  font-size: 16px;
  padding: 0px;
  margin-top: 24px;
}
.pricing-option-comparison-column-header {
  color: #484848;
  padding: 0px;
}
.pricing-option-comparison-column:last-child {
  margin-top: 20px;
}
@media only screen and (min-width: 600px) {
  .pricing-option-comparison-header {
    padding: 0 20px;
  }
  .pricing-option-comparison-column-header {
    padding: 0 30px;
  }
  .pricing-option-comparison-column:last-child {
    margin-top: 00px;
  }
}
.pricing-option-comparison-feature {
  padding: 4px 0;
  font-size: 14px;
  color: var(--text-color-secondary);
}
.pricing-option-comparison-feature-text.no {
  color: #ccced0;
  padding-left: 19px;
  display: none;
}
@media only screen and (min-width: 600px) {
  .pricing-option-comparison-feature-text.no {
    display: block;
  }
}
.for-upgrade .pricing-option-comparison-feature-text.no {
  display: none;
}
.pricing-option-comparison-feature-text--better {
  font-weight: bold;
}
.pricing-option-comparison-feature-text.blocked::before {
  content: "\274C";
  font-size: 12px;
  color: var(--danger-message-text-color);
  margin-right: 8px;
}
.pricing-option-comparison-column-features {
  margin-top: 10px;
  padding: 0px;
}
@media only screen and (min-width: 600px) {
  .pricing-option-comparison-column-features {
    padding: 0;
  }
}
.choose-plan-content-sidebar-section {
  padding: 16px;
  border-bottom: thin solid #d8d8d8;
}
.choose-plan-content-sidebar-section--row {
  display: flex;
  justify-content: space-between;
}
.choose-plan-content-sidebar-section-header {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color-primary);
}
.choose-plan-content-sidebar-section-header--success {
  color: var(--primary-button-bg);
}
.choose-plan-content-sidebar-section-body {
  margin-top: 4px;
  font-size: 14px;
  display: block;
  color: var(--text-color-secondary);
}
.choose-plan-content-sidebar-section-body--promo-description {
  margin-top: 8px;
  font-size: 14px;
  color: #2aa13a;
}
.choose-plan-content-sidebar-section-button {
  width: 100%;
  padding: 11px 20px 11px;
  -webkit-appearance: none;
  background: #4191bf;
  border: none;
  color: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: all 200ms;
  display: block;
  text-align: center;
  text-decoration: none;
}
.choose-plan-content-sidebar-section-button--finish {
  background: #4caf50;
}
.choose-plan-content-sidebar-section-button--cancel {
  background: #e8e8e8;
  margin-top: 14px;
  color: #696969;
}
.choose-plan-content-sidebar-section-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.choose-plan-content-sidebar-section-button:hover {
  background: #48a0d3;
}
.choose-plan-content-sidebar-section-button--finish:hover {
  background: #388e3c;
}
.choose-plan-content-sidebar-section-button--cancel:hover {
  background: #d8d8d8;
}
.plan-holder {
  /*display: none;*/
}
.checkout-holder {
  /*display: none;*/
}
.choose-plan-billing-section {
  border: thin solid var(--surface-color-3-divider-color);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3rem;
}
.choose-plan-billing-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-color-3);
  color: var(--text-color-primary);
  padding: 1.4rem 2rem;
  font-size: 1.333rem;
  font-weight: 600;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.choose-plan-billing-section-header-edit-button {
  -webkit-appearance: none;
  border: none;
  background: none;
  font-size: 14px;
  color: #4191bf;
  outline: none;
  cursor: pointer;
}
.pricing-options-time-toggle {
  display: flex;
  justify-content: center;
  background: var(--surface-color-2);
}
.pricing-options-time-option {
  font-size: 12px;
  color: var(--text-color-secondary);
  font-weight: bold;
  padding: 8px 19px 7px;
  border: thin solid var(--surface-color-3-divider-color);
  min-width: 75px;
  text-align: center;
  cursor: pointer;
  transition: all 200ms;
}
.pricing-options-time-option:first-child {
  border-radius: 20px 0 0 20px;
  border-right-color: transparent;
}
.pricing-options-time-option:last-child {
  border-left-color: transparent;
  padding-left: 9px;
  border-radius: 0 20px 20px 0;
}
.pricing-options-time-option:hover {
  background: var(--surface-color-2-hover);
}
.pricing-options-time-option.selected {
  color: #fff;
  border-color: var(--primary-button-bg);
  background: var(--primary-button-bg);
  pointer-events: none;
}
.pricing-options-time-toggle-savings-text {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #bbbbbb;
}
.checkout-loading-form-holder {
  position: relative;
  min-height: 220px;
  min-width: 45rem;
}
.lds-ring {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  left: 0;
  top: 0;
  border: 3px solid var(--text-color-primary);
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--text-color-primary) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}
@-webkit-keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.spinner-lock-icon {
  fill: var(--icon-color-primary);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 17px;
}
.spinner-lock-icon.spinner-lock-icon--cc-wrapper {
  width: 10px;
}
.lds-ring.lds-ring--cc-wrapper {
  width: 40px;
  height: 40px;
}
.lds-ring.lds-ring--cc-wrapper div {
  width: 40px;
  height: 40px;
}
.new-cc-holder {
  position: relative;
  display: block;
  border: thin solid #dbdbdb;
  width: 100%;
  max-width: 45rem;
  padding-bottom: 1.7rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.06);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#150077+0,009ec3+100 */
  background: #dedede;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #dedede 0%, #e0e7ec 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#e0e7ec', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  background-size: 138% auto;
  background-blend-mode: luminosity;
  background-position-x: 50%;
  background-position-y: 50%;
  transition: background-color 200ms;
}
.busy-spinner,
.busy-checkout-spinner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  pointer-events: none;
}
.busy .busy-spinner,
.busy-checkout .busy-checkout-spinner {
  opacity: 1;
  pointer-events: all;
}
.card-form-error-message {
  background: #ffebeb;
  border: thin solid #f8cac8;
  color: #d9534e;
  padding: 8px 12px;
  max-width: 450px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  border-radius: 6px;
  display: none;
}
.card-form-header {
  margin-top: 12px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 600px) {
  .card-form-header {
    flex-direction: row;
  }
}
.card-form-header-title {
  font-size: 14px;
  color: #3c434c;
}
.card-form-holder {
  display: grid;
  grid-template-areas: "number number number" "exp cvv zip";
  padding: 8px;
}
.card-input-section {
  padding: 8px;
}
.card-input-section--number {
  grid-area: number;
}
.card-input-section--exp {
  grid-area: exp;
}
.card-input-section--cvv {
  grid-area: cvv;
}
.card-input-section--zip {
  grid-area: zip;
}
.card-input-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #61666b;
  text-shadow: 0px 1px 1px #e6e6e6;
  padding-left: 3px;
  display: flex;
  align-items: center;
}
.card-input {
  background: #fbfbfb;
  border: thin solid #dbdbdb;
  height: 46px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.13);
}
.card-form-actions {
  padding: 0px 16px 0;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.card-form-action-button {
  -webkit-appearance: none;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 3px;
  border: none;
  background: #03a9f4;
  color: #fff;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 200ms;
}
.card-form-action-button:hover {
  background: #00b9ff;
}
.card-form-remove-button {
  -webkit-appearance: none;
  padding: 4px 8px;
  border: thin solid #afafaf;
  border-radius: 3px;
  background: #dfe2e4;
  color: #585858;
  cursor: pointer;
  outline: none;
  margin-top: 20px;
}
.card-form-remove-button:hover {
  background: rgba(255, 255, 255, 0.6);
}
.braintree-badge-holder {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0.9;
  margin-top: 20px;
  transition: all 200ms;
}
@media only screen and (min-width: 600px) {
  .card-form-actions {
    flex-direction: row;
  }
  .braintree-badge-holder {
    margin-top: 0;
    align-items: flex-end;
  }
  .card-form-remove-button {
    margin-top: 0;
  }
  .card-form-action-button {
    width: initial;
  }
}
.braintree-badge-holder:hover {
  opacity: 1;
}
.braintree-badge {
  width: 13rem;
}
.card-logos {
  display: flex;
  margin-top: 12px;
}
.card-logo-holder {
  width: 28px;
  margin: 0 2px;
  transition: all 200ms;
}
@media only screen and (min-width: 600px) {
  .card-logos {
    margin-top: 0;
  }
  .card-logo-holder {
    width: 36px;
  }
}
.card-logo {
  width: 100%;
  height: auto;
}
[data-card-type="visa"] .card-logo-holder:not(.card-logo-holder--visa) {
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
[data-card-type="american-express"] .card-logo-holder:not(.card-logo-holder--american-express) {
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
[data-card-type="maestro"] .card-logo-holder:not(.card-logo-holder--maestro) {
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
[data-card-type="master-card"] .card-logo-holder:not(.card-logo-holder--master-card) {
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
[data-card-type="discover"] .card-logo-holder:not(.card-logo-holder--discover) {
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.new-cc-holder[data-card-type="visa"] {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#150077+0,009ec3+100 */
  background: #2674aa;
  background-image: url("/web-app/img/card_type_logos/visa_bkg.png");
  background-repeat: no-repeat;
  background-size: 99% auto;
  background-blend-mode: luminosity;
  background-position-x: 50%;
  background-position-y: 50%;
}
.new-cc-holder[data-card-type="visa"] .card-form-header-title,
.new-cc-holder[data-card-type="maestro"] .card-form-header-title,
.new-cc-holder[data-card-type="american-express"] .card-form-header-title,
.new-cc-holder[data-card-type="master-card"] .card-form-header-title {
  color: #fff;
}
.new-cc-holder[data-card-type="visa"] .card-input-label,
.new-cc-holder[data-card-type="maestro"] .card-input-label,
.new-cc-holder[data-card-type="american-express"] .card-input-label,
.new-cc-holder[data-card-type="master-card"] .card-input-label {
  color: #fff;
  text-shadow: 0px 1px 1px #555555;
}
.new-cc-holder[data-card-type="maestro"] {
  background: #131f69;
  background-image: url("/web-app/img/card_type_logos/maestro_bkg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-blend-mode: luminosity;
  background-position-x: 50%;
  background-position-y: 50%;
}
.new-cc-holder[data-card-type="american-express"] {
  background: #828d96;
  background-image: url("/web-app/img/card_type_logos/american_express_bkg.jpg");
  background-repeat: no-repeat;
  background-size: 122% auto;
  background-blend-mode: luminosity;
  background-position-x: 50%;
  background-position-y: 50%;
}
.new-cc-holder[data-card-type="master-card"] {
  background: #364856;
  background-image: url("/web-app/img/card_type_logos/master_card_bkg.png");
  background-repeat: no-repeat;
  background-size: 122% auto;
  background-blend-mode: luminosity;
  background-position-x: 50%;
  background-position-y: 50%;
}
.saved-payment-method-holder {
  position: relative;
  width: calc(100% - 40px);
  max-width: 55rem;
  box-sizing: border-box;
  border-radius: 4px;
}
.saved-payment-method-data {
  font-size: 13px;
  color: var(--text-color-secondary);
  fill: var(--icon-color-secondary);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
@media only screen and (min-width: 600px) {
  .saved-payment-method-data {
    flex-direction: row;
  }
}
.saved-payment-method-card-logo {
  min-width: 40px;
  width: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.saved-payment-method-number {
  display: flex;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 14px;
}
@media only screen and (min-width: 600px) {
  .saved-payment-method-number {
    flex-direction: row;
    margin: 0 20px;
    text-align: left;
  }
}
.saved-payment-method-number-lock-icon {
  fill: inherit;
}
.saved-payment-method-number-text {
  margin-left: 5px;
  -ms-word-break: break-word;
  word-break: break-word;
}
.saved-payment-method-remove-button,
.saved-payment-method-update-button {
  -webkit-appearance: none;
  padding: 4px 8px 5px;
  border: none;
  border-radius: 3px;
  color: #fff;
  background: #ff6347;
  cursor: pointer;
  outline: none;
  transition: all 200ms;
  margin-top: 20px;
}
@media only screen and (min-width: 600px) {
  .saved-payment-method-remove-button,
  .saved-payment-method-update-button {
    margin: 0 0 0 12px;
  }
}
.saved-payment-method-update-button {
  background: var(--primary-button-bg);
}
.saved-payment-method-update-button:hover {
  background: var(--primary-button-bg-hover);
}
.saved-payment-method-remove-button:hover {
  background: #dc553d;
}
.confirmation-holder {
  padding: 30px 20px;
  border-radius: 4px;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}
.confirmation-header {
  font-size: 20px;
}
.confirmation-table {
  margin-top: 20px;
}
.confirmation-row {
  margin-top: 9px;
  display: flex;
  justify-content: center;
}
.confirmation-row-label {
  font-weight: bold;
  margin-right: 6px;
  flex: 1;
  text-align: right;
}
.confirmation-row-data {
  flex: 1;
  text-align: left;
}
.confirmation-content--free {
  margin: 20px auto 0;
  width: 80%;
  max-width: 44rem;
  line-height: 1.4em;
}
.card-input-section.has-success .card-input {
  background-image: url("/web-app/img/card_type_logos/valid.png");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-position: right;
  background-position-x: calc(100% - 8px);
}
.card-input-section.has-warning .card-input {
  background-image: url("/web-app/img/card_type_logos/invalid.png");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-position: right;
  background-position-x: calc(100% - 8px);
  background-color: #ffebea;
}
.monthly-card-text {
  margin: 0px auto 23px;
  padding: 0 0.4em;
  display: block;
  max-width: 450px;
  font-size: 1.2rem;
  color: #bcc0c3;
}
.cvv-info-holder {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.cvv-info-icon {
  width: 12px;
  height: 12px;
  line-height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  text-align: center;
  display: flex;
  color: #fff;
  font-size: 8px;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: auto;
  margin-left: 3px;
}
.cvv-info-icon:hover {
  background: rgba(0, 0, 0, 0.5);
}
.cvv-info-popup {
  width: 139px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  -webkit-transform: translateY(-65%);
          transform: translateY(-65%);
  left: 20px;
  border-radius: 6px;
  border: thin solid #bbbbbb;
  overflow: hidden;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
}
.cvv-info-popup img {
  width: 100%;
  display: block;
}
.cvv-info-holder:hover .cvv-info-popup {
  opacity: 1;
}
.admin-container-transactions-header,
.admin-container-transaction-row {
  display: flex;
  justify-content: space-between;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  padding: 4px 0;
}
.admin-container-transactions-header {
  margin-top: 10px;
}
.admin-container-transaction-row {
  padding: 10px 0;
  border-bottom: none;
  align-items: center;
  border-radius: 0.4rem;
  color: var(--text-color-tertiary);
}
.admin-container-transaction-row:nth-child(even) {
  background: color-mix(in srgb, var(--surface-color-2), #000 4%);
}
.admin-container-transactions-header-item {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  flex: 1;
  padding: 0 8px;
  word-break: break-word;
}
.admin-container-transaction-row-item {
  flex: 1;
  font-size: 1.2rem;
  padding: 0 8px;
  word-break: break-word;
}
.admin-container-transaction-row-item-input {
  background: white;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: thin solid #e4e7e9;
  padding: 1rem 0.8rem;
  color: #666;
  border-radius: 0.4rem;
  outline: none;
}
.admin-container-transaction-row-item-input:focus {
  border-color: var(--primary-button-bg);
}
.admin-container-transaction-row-item-input::-webkit-input-placeholder {
  color: #ddd;
}
.admin-container-transaction-row-item-input::-moz-placeholder {
  color: #ddd;
}
.admin-container-transaction-row-item-input::placeholder {
  color: #ddd;
}
.admin-container-transactions-header-item:last-child,
.admin-container-transaction-row-item:last-child {
  text-align: right;
}
.admin-container-transactions-header-item--plan,
.admin-container-transaction-row-item--plan {
  flex: 3;
}
/* Downgrade Plan */
.choose-story-warning {
  font-weight: normal;
  font-size: 14px;
  line-height: 1.6em;
}
.choose-story-list-header {
  font-size: 14px;
  margin-top: 30px;
}
.blocked .choose-story-list-header {
  opacity: 0.3;
}
.choose-story-list {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-top: 8px;
  grid-gap: 10px;
}
@media only screen and (min-width: 420px) {
  .choose-story-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 900px) {
  .choose-story-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.blocked .choose-story-list {
  opacity: 0.3;
  pointer-events: none;
}
.approve-checkbox {
  font-size: 14px;
  margin-top: 16px;
  display: inline-block;
  cursor: pointer;
}
.approve-checkbox input {
  margin-right: 4px;
}
.choose-plan-content-sidebar-section-button--danger {
  background: #d9534f;
}
.choose-plan-content-sidebar-section-button--danger:hover {
  background: #c14441;
}
.choose-plan-promo-code-form {
  margin-top: 12px;
  align-items: center;
  max-width: 40rem;
}
.choose-plan-promo-code-form-input {
  flex: 3;
  padding: 6px;
  outline: none;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  width: 100%;
  border-radius: 0.4rem;
  color: var(--text-color-primary);
  max-width: 200px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 1px 1px 1px transparent;
  border: 0 none;
  background: var(--surface-color-2-hover);
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
.choose-plan-promo-code-form-input.error {
  background: var(--danger-button-bg);
  border-color: var(--danger-button-bg);
}
.choose-plan-promo-code-form-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--secondary-button-bg);
  color: var(--secondary-button-color);
  outline: none;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
}
.choose-plan-promo-code-form-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.choose-plan-promo-code-form--applied {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  gap: 2rem;
  margin-top: 8px;
  background: var(--success-message-bg);
  padding: 1rem;
  border-radius: 6px;
  border: thin solid var(--success-message-border-color);
}
.choose-plan-promo-code-form-body--applied {
  font-size: 14px;
  display: block;
  color: var(--success-message-text-color);
}
.choose-plan-promo-code-form-input:focus {
  box-shadow: 0 0 0 1px var(--primary-button-bg);
}
.summary-body-text {
  margin-top: 18px;
  font-weight: normal;
  font-size: 14px;
  /* background: #fff0d3; */
  /* padding: 8px 10px; */
  max-width: 480px;
}
.no-stories-holder {
  border: thin solid #d8d8d8;
  padding: 50px 35px;
  margin-top: 27px;
  text-align: center;
}
.no-stories-text {
  color: #9e9e9e;
  font-size: 14px;
}
/* Choose Plan and Payment Form Styles */
.discount-text {
  color: var(--danger-text-color);
  margin-right: 5px;
  text-decoration: line-through;
}
.choose-plan-module-holder {
  display: block;
  background-color: var(--surface-color-0);
  min-height: 100vh;
}
.choose-plan-module-wrapper {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
}
.choose-plan-content-header {
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.choose-plan-header-logo {
  width: 160px;
  fill: #3c434c;
}
.choose-plan-content {
  display: block;
}
.choose-plan-logout-link {
  text-decoration: none;
  color: #3c434c;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 4px;
  text-transform: uppercase;
}
.choose-plan-logout-link:hover {
  background: #eaeaea;
}
@media only screen and (min-width: 600px) {
  .choose-plan-module-holder:not(.for-upgrade) .choose-plan-content {
    display: grid;
    grid-template-columns: minmax(55rem, 1fr) minmax(-webkit-min-content, 0fr);
    grid-template-columns: minmax(55rem, 1fr) minmax(min-content, 0fr);
    grid-column-gap: 12px;
  }
}
@media only screen and (min-width: 780px) {
  .for-upgrade .choose-plan-content {
    display: grid;
    grid-template-columns: minmax(55rem, 1fr) minmax(-webkit-min-content, 0fr);
    grid-template-columns: minmax(55rem, 1fr) minmax(min-content, 0fr);
    grid-column-gap: 12px;
  }
}
.choose-plan-content-body,
.choose-plan-content-sidebar {
  min-height: 100px;
  background: var(--surface-color-2);
  margin-top: 12px;
  border-radius: 3px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.choose-plan-content-sidebar {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 31rem;
}
.choose-plan-content-body {
  padding: 2rem 3rem 3rem;
}
.choose-plan-content-body-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  min-height: 28px;
  flex-direction: column-reverse;
}
@media only screen and (min-width: 600px) {
  .choose-plan-content-body-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    min-height: 28px;
  }
}
.choose-plan-progress {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
@media only screen and (min-width: 500px) {
  .choose-plan-progress {
    font-size: 16px;
  }
}
@media only screen and (min-width: 600px) {
  .choose-plan-progress {
    margin-top: 0;
  }
}
.choose-plan-progress-item {
  margin: 0 6px;
  color: var(--text-color-muted);
  fill: var(--text-color-muted);
}
.choose-plan-progress-item.current {
  color: var(--text-color-secondary);
}
.choose-plan-progress-item.current.can-go-back {
  color: var(--primary-text-color);
  cursor: pointer;
}
.choose-plan-progress-item-arrow {
  margin-left: 10px;
}
.choose-plan-progress-item:first-child {
  margin-left: 0;
}
.choose-plan-progress-item-title {
  display: flex;
  align-items: center;
}
.choose-plan-progress-item.current.can-go-back .choose-plan-progress-item-title-text:hover {
  color: var(--primary-text-color-hover);
}
.choose-plan-option.disabled {
  opacity: 0.4;
  -webkit-filter: grayscale(0.6);
          filter: grayscale(0.6);
}
.choose-plan-option--annual {
  display: none;
}
.subscription-restart-info-holder {
  padding: 12px;
  color: #404040;
  border-radius: 4px;
  background: #f0f8fb;
  border: thin solid #d0e4ed;
}
.choose-plan-current-plan {
  color: var(--primary-text-color);
  font-size: 2rem;
  display: block;
}
.choose-plan-options {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media only screen and (min-width: 600px) {
  .choose-plan-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
}
.choose-plan-option {
  border: thin solid var(--surface-color-3-divider-color);
  background: var(--surface-color-3);
  text-align: center;
  padding: 2rem 1rem 5rem;
  border-radius: 0.8rem;
  box-shadow: 0 11px 30px -14px rgba(0, 0, 0, 0.15);
}
.choose-plan-option-title {
  font-size: 3.2rem;
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: #4191bf;
  text-align: center;
  margin-top: 2rem;
}
.choose-plan-option-title--free {
  color: #4191bf;
}
.choose-plan-option-title--premium {
  color: var(--premium-text-color);
}
.choose-plan-option-title--pro {
  color: #03a9f4;
}
.choose-plan-option-title--enterprise {
  color: var(--team-text-color);
}
.choose-plan-option-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}
.choose-plan-price-amount {
  font-size: 4rem;
  font-weight: 600;
  color: var(--text-color-primary);
}
.choose-plan-price-footer {
  font-size: 1.333rem;
  font-style: italic;
  color: #4caf50;
  min-height: 1.4em;
  margin-top: 0.6rem;
}
.choose-plan-price-per-month {
  display: inline-block;
  color: var(--text-color-tertiary);
  max-width: 7rem;
  text-align: left;
  margin: 0 0 0 0.4rem;
  line-height: 1em;
  font-size: 1.333rem;
}
.choose-plan-option-description {
  border-top: thin solid var(--text-color-muted);
  padding-top: 2rem;
  width: calc(100% - 10rem);
  max-width: 22rem;
  margin: 2rem auto 0;
}
.choose-plan-option-description-item {
  font-size: 1.6rem;
  display: block;
  line-height: 1.8em;
  font-weight: bold;
  color: var(--text-color-secondary);
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.choose-plan-option-description-header {
  font-size: 1.6rem;
  display: block;
  line-height: 1.8em;
  font-weight: bold;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.choose-plan-section {
  width: 100%;
}
.features-iframe {
  background: var(--surface-color-2);
}
/* End New Adds */
/* App Container */
#app-container.loading {
  position: relative;
  height: 100%;
  background-color: var(--surface-color-0);
}
#app-container.loading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 100px;
  background-repeat: no-repeat;
  background-image: var(--loading-spinner-image);
  background-position: 50% 50%;
  -webkit-animation: movein 0.5s forwards;
          animation: movein 0.5s forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.account-settings-layout-textarea-wrapper {
  position: relative;
}
.account-settings-layout-textarea-char-counter {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: 12px;
  color: #d32f2f;
}
.account-settings-layout-textarea-char-counter.over-limit {
  color: #d32f2f;
}
/*////////////////////////*/
/*/ /////EDIT PROFILE//////*/
/*////////////////////////*/
.user-about-menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--surface-color-0);
  z-index: 10;
  transition: all 200ms;
  -webkit-transform: translateX(calc(-100% - 2rem));
          transform: translateX(calc(-100% - 2rem));
}
.user-about-menu-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.showing-menu .user-about-menu {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.user-about-pages-holder {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 22rem;
  transition: all 200ms;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.showing-menu .user-about-pages-holder {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .user-about-menu {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  .user-about .settings-header--top {
    display: none;
  }
  .showing-menu .user-about-menu {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .user-about-pages-holder {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .showing-menu .user-about-pages-holder {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    pointer-events: all;
  }
}
.user-about {
  position: relative;
  flex: 1;
  display: grid;
  grid-column-gap: 2rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .user-about {
    grid-template-columns: minmax(-webkit-min-content, 1fr) 3fr;
    grid-template-columns: minmax(min-content, 1fr) 3fr;
  }
  .user-about-menu {
    position: -webkit-sticky;
    position: sticky;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.professional-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem 1rem 2.25rem;
  border-radius: 4rem;
  text-decoration: none;
  font-size: 1.6rem;
  color: var(--text-color-tertiary);
  transition: 200ms;
  border: thin solid transparent;
  fill: transparent;
}
.professional-sidebar-item-text {
  margin-right: 2rem;
}
.professional-sidebar-item-arrow-icon {
  width: 0.55em;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  fill: var(--text-color-tertiary);
  transition: 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-sidebar-item-arrow-icon {
    fill: transparent;
  }
  .professional-sidebar-item:hover {
    background: var(--surface-color-0-hover);
    border-color: var(--surface-color-2-divider-color);
  }
  .professional-sidebar-item.selected {
    color: var(--text-color-primary);
    background: var(--surface-color-2);
    font-weight: bold;
    pointer-events: none;
    box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2);
  }
  .professional-sidebar-item.selected .professional-sidebar-item-arrow-icon {
    fill: var(--icon-color-muted);
  }
}
.user-about-page-header {
  z-index: 5;
}
.user-about-page {
  width: 100%;
}
.user-about-page-content {
  position: relative;
}
[data-mode="saving"] .user-about-busy-spinner-cover {
  opacity: 1;
  pointer-events: all;
}
.user-about-busy-spinner-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 10rem;
  bottom: 10rem;
  z-index: 0;
}
.user-about-page-header,
.user-about-page-content {
  display: none;
}
.user-about-section-button--cancel,
.user-about-section-button--save {
  display: none;
}
[data-mode="saving"] .user-about-section-button {
  pointer-events: none;
  opacity: 0.4;
}
.editing .user-about-section-button--edit {
  display: none;
}
.editing .user-about-section-button--save,
.editing .user-about-section-button--cancel {
  display: block;
}
.edited .user-about-menu-item:not(.selected) {
  opacity: 0.3;
  pointer-events: none;
}
.edited .user-about-menu {
  pointer-events: none;
}
.user-about-image-preview-holder {
  position: relative;
  width: 100%;
  height: 20rem;
  cursor: pointer;
  transition: all 200ms;
}
.editing .user-about-image-preview-holder {
  cursor: default;
}
@media only screen and (min-width: 768px) {
  .user-about-image-preview-holder:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
  .editing .user-about-image-preview-holder:hover {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
.professional-image-preview {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1rem;
  background: var(--surface-color-0);
}
.user-about-image-preview-holder-thumbs {
  position: relative;
  opacity: 0;
  transition: 200ms;
  pointer-events: none;
}
.editing .user-about-image-preview-holder-thumbs {
  opacity: 1;
  pointer-events: all;
}
.professional-image-preview-thumb {
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.3rem;
  width: 4rem;
  height: 4rem;
  background: var(--text-color-muted);
  text-indent: -999999999px;
  transition: all 200ms;
  border: 0.2rem solid var(--surface-color-2-divider-color);
  cursor: pointer;
}
.professional-image-preview-thumb.selected {
  border-color: #03a9f4;
  box-shadow: 0 0 8px 2px #03a9f4;
}
@media only screen and (min-width: 768px) {
  .professional-image-preview-thumb:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-image-preview-thumb--round {
  border-radius: 50%;
}
.professional-image-preview-more-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--surface-color-0);
  border: 0.2rem solid var(--surface-color-0);
  border-radius: 50%;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-image-preview-more-button:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-image-preview-more-button-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--icon-color-tertiary);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-image-preview-more-button-dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: inherit;
  -webkit-transform: translateX(calc(-100% - 0.3rem));
          transform: translateX(calc(-100% - 0.3rem));
}
.professional-image-preview-more-button-dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: inherit;
  -webkit-transform: translateX(calc(100% + 0.3rem));
          transform: translateX(calc(100% + 0.3rem));
}
/* Edit Profile Form Layout Grids */
.user-about-section {
  width: 100%;
}
.profile-settings_visuals_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "background_picture" "custom_url" "is_public";
}
@media only screen and (min-width: 768px) {
  .profile-settings_visuals_grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "background_picture background_picture background_picture background_picture background_picture" "is_public is_public custom_url custom_url custom_url";
  }
}
.general_personal-info_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "profile_picture" "pen_name" "title" "tagline" "location" "phone" "email";
}
@media only screen and (min-width: 768px) {
  .general_personal-info_grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "pen_name pen_name profile_picture profile_picture" "title title profile_picture profile_picture" "tagline tagline tagline tagline" "email email phone phone" "location location location location";
  }
}
.general_work_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "company_name" "position" "industry";
}
@media only screen and (min-width: 768px) {
  .general_work_grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "company_name company_name position position" "industry industry industry industry";
  }
}
.general_connect_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "phone" "email" "facebook" "instagram" "twitter" "linkedin" "youtube" "webpage";
}
@media only screen and (min-width: 768px) {
  .general_connect_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "phone email" "facebook instagram" "twitter linkedin" "youtube webpage";
  }
}
.professional-back-button {
  width: 3.4rem;
  height: 3.4rem;
  background: #f1f1f1;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1.2rem;
  transition: 200ms;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .professional-back-button {
    display: none;
  }
}
.editing .user-about-page-header-back-button {
  width: 0;
  opacity: 0;
  pointer-events: none;
}
.professional-url-prefix {
  font-size: 1.6rem;
  color: var(--text-color-tertiary);
  padding: 1.2rem 0 1rem;
  border: thin solid transparent;
  transition: margin-right 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-url-prefix:hover ~ .professional-text-input-wrapper .professional-text-input--editable:not(:focus) {
    background: var(--surface-color-2-hover);
    padding-left: 1rem;
  }
}
.professional-url-prefix-icon {
  align-self: center;
  margin-right: 1rem;
  width: 1.5rem;
  height: 2.2rem;
}
.editing .professional-url-prefix {
  margin-right: 1rem;
}
.user-about-story-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
  grid-row-gap: calc(1rem + 1rem);
  min-height: 20rem;
}
.user-about-story-list-interaction-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  cursor: pointer;
  opacity: 0;
  background: rgba(177, 177, 177, 0.1);
  border-radius: 1rem;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .user-about-story-list-interaction-layer:hover {
    opacity: 1;
  }
}
.editing .user-about-story-list-interaction-layer {
  opacity: 0;
  pointer-events: none;
}
.user-about-story-list-empty-state {
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 1rem;
  font-size: 1.6rem;
  color: var(--text-color-muted);
}
[data-status="busy"] .user-about-story-list-empty-state {
  display: none;
}
@media only screen and (min-width: 375px) {
  .user-about-story-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 600px) {
  .user-about-story-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1100px) {
  .user-about-story-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.user-about-story-list-check {
  position: absolute;
  opacity: 0;
}
.user-about-story-list-item-select-wrapper {
  display: block;
  height: 100%;
  position: relative;
  border: 0.2rem solid transparent;
  cursor: pointer;
  border-radius: 0.75rem;
  opacity: 0.5;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .user-about-story-list-item-select-wrapper:hover {
    opacity: 0.9;
    -webkit-filter: grayscale(0.75);
            filter: grayscale(0.75);
  }
}
.user-about-story-list-item-select-wrapper-icon-holder {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  background: var(--primary-button-bg);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  transition: 200ms;
}
.user-about-story-list-item-select-wrapper-icon {
  fill: #fff;
  width: 60%;
  height: 60%;
}
.user-about-story-list-check:checked ~ .user-about-story-list-item-select-wrapper {
  border-color: var(--primary-button-bg);
  opacity: 1;
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.user-about-story-list-check:checked ~ .user-about-story-list-item-select-wrapper > .user-about-story-list-item-select-wrapper-icon-holder {
  opacity: 1;
}
.user-about-story-list-item {
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.user-about-story-list-item-image-holder {
  position: relative;
  width: 100%;
  padding-top: 65%;
  overflow: hidden;
  border-radius: 0.5rem;
  border: thin solid var(--surface-color-2-divider-color);
}
.user-about-story-list-item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-color-2-divider-color);
}
.user-about-story-list-item-title {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.2rem;
  margin-top: 0.2rem;
  display: block;
}
.user-about-story-list--available {
  display: none;
}
.editing .user-about-story-list--available {
  display: grid;
}
.editing .user-about-story-list--selected {
  display: none;
}
.professional-text-input--editable::-webkit-input-placeholder {
  opacity: 0;
}
.professional-text-input--editable::-moz-placeholder {
  opacity: 0;
}
.professional-text-input--editable::placeholder {
  opacity: 0;
}
.editing .professional-text-input--editable::-webkit-input-placeholder {
  opacity: 1;
}
.editing .professional-text-input--editable::-moz-placeholder {
  opacity: 1;
}
.editing .professional-text-input--editable::placeholder {
  opacity: 1;
}
.editing .professional-text-input-wrapper--editable::before {
  opacity: 0;
  padding-left: 1rem;
}
.professional-text-input-wrapper-static-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: all 200ms;
}
.professional-text-input-wrapper-static-placeholder::before {
  font-family: "Open Sans", helvetica, sans-serif;
  content: attr(data-empty-placholder);
  position: absolute;
  font-size: 1.333rem;
  color: var(--text-color-muted);
  top: 1.8rem;
  left: 0;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-text-input-wrapper--editable:hover .professional-text-input-wrapper-static-placeholder::before {
    left: 1rem;
  }
}
.professional-text-input--editable:placeholder-shown ~ .professional-text-input-wrapper-static-placeholder {
  opacity: 1;
}
.professional-text-input--editable:not(:placeholder-shown) ~ .professional-text-input-wrapper-static-placeholder,
.editing .professional-text-input--editable:placeholder-shown ~ .professional-text-input-wrapper-static-placeholder,
.editing .professional-text-input--editable:not(:placeholder-shown) ~ .professional-text-input-wrapper-static-placeholder {
  opacity: 0;
  left: 1rem;
}
.form-section {
  border-top: thin solid var(--surface-color-2-divider-color);
  position: relative;
  min-height: 14rem;
}
.form-section:first-child {
  border-top: none;
}
/*////////////////////////*/
/*/ //////MY STORIES///////*/
/*////////////////////////*/
/* User Profile Home View */
.user-masthead {
  width: 100%;
  background: var(--surface-color-1);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2);
}
.user-masthead-background-image {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: blur(2rem);
          filter: blur(2rem);
  position: absolute;
  left: -4rem;
  top: -4rem;
  width: calc(100% + 8rem);
  height: calc(100% + 8rem);
  background: var(--surface-color-0);
}
.user-masthead-background-image--org {
  background: #623ba6;
}
.user-masthead-header {
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 1rem;
  display: none;
}
.user-masthead-content {
  display: grid;
  padding: 2rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "profile-switch profile-link" "profile-stats profile-stats";
}
@media only screen and (min-width: 768px) {
  .user-masthead-content {
    padding-top: 2.5rem;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: "profile-switch profile-stats profile-link";
  }
}
.user-masthead-content-profile-switch {
  grid-area: profile-switch;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.user-masthead-content-profile-link {
  grid-area: profile-link;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.user-masthead-content-stats {
  grid-area: profile-stats;
  margin-top: 2rem;
}
@media only screen and (min-width: 768px) {
  .user-masthead-content-stats {
    margin-top: 0;
  }
}
.user-masthead-content-stat {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  padding: clamp(1.5rem, 2vw, 2rem) clamp(2rem, 2vw, 3rem);
  font-size: 1.333rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.user-masthead-content-stat--large {
  font-size: 2rem;
}
.user-masthead-content-stat-icon {
  margin-right: 0.6em;
  fill: var(--surface-color-0);
  opacity: 0.9;
}
.user-masthead-stat-number {
  margin-right: 0.5rem;
}
.user-masthead-footer {
  border-bottom: thin solid var(--surface-color-2-divider-color);
  background: var(--surface-color-2);
  padding: 1.6rem 1.33333333rem;
  padding: 1.6rem clamp(calc(1.33333333rem * 0.5), 4vw, 1.33333333rem);
  margin-bottom: 0.75rem;
}
.user-masthead-footer-user-info {
  display: none;
  padding: 1.6rem 0;
}
@media only screen and (min-width: 768px) {
  .user-masthead-footer-user-info {
    display: flex;
  }
}
.user-masthead-footer-user-info-text-name {
  font-size: 1.6rem;
  color: var(--text-color-tertiary);
  font-weight: 600;
}
.user-masthead-footer-user-info-text-roles {
  font-size: 1.333rem;
  color: #4caf50;
}
.user-masthead-footer-user-info-text-roles--enterprise {
  color: var(--team-text-color);
}
.user-masthead-footer-user-info-avatar {
  width: 5rem;
  height: 5rem;
  background: #f7f7f7;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-masthead-footer-user-info-avatar--org {
  border: 0.2rem solid var(--team-text-color);
}
.user-masthead-footer-section-menu-nav {
  background: var(--surface-color-2-1);
  border-radius: 5rem;
  padding: 0.4rem;
  border: thin solid var(--surface-color-2-divider-color);
}
.user-masthead-footer-section-menu-nav-item {
  padding: 0.6em 1.3em;
  font-size: 1.333rem;
  font-weight: normal;
  border-radius: 20rem;
  color: var(--text-color-tertiary);
  text-decoration: none;
  transition: 200ms;
}
@media only screen and (min-width: 768px) {
  .user-masthead-footer-section-menu-nav-item {
    white-space: nowrap;
  }
}
.user-masthead-footer-section-menu-nav-item.selected {
  color: var(--text-color-primary);
  pointer-events: none;
  background: var(--surface-color-4);
  box-shadow: 0 0 2px -1px rgba(0, 0, 0, 0.64), 0 2px 4px -3px rgba(0, 0, 0, 0.3);
}
.user-masthead-footer-section-menu-nav-item.selected:only-child,
.user-masthead-footer-section-menu-nav-item:only-child {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.user-masthead-footer:has(.user-masthead-footer-section-menu-nav-item.selected:only-child) {
  display: none;
}
@media only screen and (min-width: 678px) {
  .user-masthead-footer-section-menu-nav-item:hover {
    color: var(--text-color-secondary);
  }
  .user-masthead-footer-section-menu-nav-item:hover::after {
    opacity: 1;
    left: 2rem;
    right: 2rem;
  }
}
.user-masthead-footer-membership-info {
  display: none;
}
@media only screen and (min-width: 768px) {
  .user-masthead-footer-membership-info {
    display: flex;
  }
}
.user-masthead-footer-membership-info-level {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--primary-text-color);
  text-transform: capitalize;
}
.user-masthead-footer-membership-info-level.free {
  color: #4191bf;
}
.user-masthead-footer-membership-info-level.premium {
  color: #22a86d;
}
.user-masthead-footer-membership-info-level.pro {
  color: #03a9f4;
}
.user-masthead-footer-membership-info-level.enterprise {
  color: var(--team-text-color);
}
.user-masthead-footer-membership-info-upgrade-link {
  display: flex;
  align-items: center;
  font-size: 1.333rem;
  text-decoration: none;
  color: var(--text-color-tertiary);
  transition: all 200ms;
}
.user-masthead-footer-membership-info-upgrade-link-icon {
  fill: currentColor;
  margin-left: 0.24em;
}
@media only screen and (min-width: 768px) {
  .user-masthead-footer-membership-info-upgrade-link:hover {
    color: var(--text-color-primary);
  }
}
.user-stories {
  position: relative;
}
.user-stories-loader {
  display: none;
}
[data-mode="loading"] .user-stories-loader {
  display: flex;
}
.user-stories-navigator {
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
[data-mode="moving"] .user-stories-navigator {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}
.user-stories-navigator-header {
  background: var(--surface-color-0);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
  padding: 0 calc(2rem * 0.5) calc(2rem * 0.5);
  padding: 0 clamp(calc(2rem * 0.5), 4vw, 2rem) clamp(calc(2rem * 0.5), 4vw, 2rem);
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  box-sizing: border-box;
  z-index: 110;
}
.user-stories-navigator-header-items {
  margin-top: calc(2rem * 0.5);
  margin-top: clamp(calc(2rem * 0.5), 2vw, 2rem);
}
.user-stories-header-spinner {
  position: absolute;
  margin-top: calc(2rem * 0.5);
  margin-top: clamp(calc(2rem * 0.5), 2vw, 2rem);
  display: none;
}
[data-header-state="moving"] .user-stories-header-spinner {
  display: flex;
}
[data-header-state="moving"] .user-stories-header-action-buttons {
  opacity: 0.2;
}
.user-stories-section {
  padding: calc(2rem * 0.5);
  padding: 1rem clamp(calc(2rem * 0.5), 4vw, 2rem);
}
.user-stories-section-story-list {
  display: grid;
  grid-template-rows: -webkit-min-content;
  grid-template-rows: min-content;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  grid-column-gap: 1rem;
  grid-row-gap: 3rem;
  padding-bottom: 4rem;
  position: relative;
  min-height: 100%;
}
@media only screen and (min-width: 768px) {
  .user-stories-section-story-list {
    grid-column-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  }
}
.user-stories-section-story-list-empty-message {
  position: absolute;
  display: none;
  left: 50%;
  top: calc(50% - 5rem);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 2rem;
  text-align: center;
  color: #d32f2f;
}
.user-stories-section-story-list-empty-message:only-child {
  display: block;
}
.user-stories-section-story-list-empty-options {
  position: absolute;
  left: 50%;
  top: 26vh;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: none;
  width: 100%;
  max-width: 130rem;
  padding-bottom: 4rem;
}
.user-stories-section-story-list-empty-group {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.user-stories-section-story-list-empty-button-wrapper {
  position: relative;
  font-size: 2rem;
  width: 4em;
  height: 4em;
}
.user-stories-section-story-list-empty-button {
  display: flex;
  position: relative;
  font-size: 2rem;
  width: 100%;
  height: 100%;
  background: #05a9f4;
  border-radius: 50%;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
  transition: all 200ms;
}
.user-stories-section-story-list-empty-button::before,
.user-stories-section-story-list-empty-button::after {
  content: "";
  background: var(--surface-color-0);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.user-stories-section-story-list-empty-button::before {
  width: 0.3em;
  height: 1.6em;
}
.user-stories-section-story-list-empty-button::after {
  height: 0.3em;
  width: 1.6em;
}
.user-stories-section-story-list-empty-button-bloom {
  background: rgba(12, 169, 244, 0.06);
  width: 16em;
  height: 16em;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 200ms;
}
.user-stories-section-story-list-empty-button-bloom::after {
  content: "";
  background: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 200ms;
}
.user-stories-section-story-list-empty-format-icon-holder {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8em;
  height: 2.8em;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.user-stories-section-story-list-empty-format-icon-track {
  position: absolute;
  left: 50%;
  top: 50%;
}
.user-stories-section-story-list-empty-format-icon-holder--screenplay {
  left: -96px;
  top: -6px;
  background: #b5d4e3;
  -webkit-transform: rotate(309deg);
          transform: rotate(309deg);
}
.user-stories-section-story-list-empty-format-icon-holder--podcast {
  left: -42px;
  top: -89px;
  background: #dcc8f9;
  -webkit-transform: rotate(338deg);
          transform: rotate(338deg);
}
.user-stories-section-story-list-empty-format-icon-holder--web-video {
  left: 62px;
  top: -89px;
  background: #f9cdcd;
  -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
}
.user-stories-section-story-list-empty-format-icon-holder--storyselling {
  left: 120px;
  top: -6px;
  background: #c4e9be;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.user-stories-section-story-list-empty-format-icon {
  width: 55%;
  height: 55%;
  fill: #fff;
}
.user-stories-section-story-list-empty-title-holder {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 3.4rem 2rem 3rem;
  background: linear-gradient(360deg, #f7f7f7, #f7f7f7 65%, rgba(247, 247, 247, 0));
}
.user-stories-section-story-list-empty-pre-title {
  font-size: 2rem;
  font-weight: bold;
  color: #afafaf;
}
.user-stories-section-story-list-empty-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: #4c4c4c;
  font-size: 3.2rem;
  margin-top: 1.4rem;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .user-stories-section-story-list-empty-button:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .user-stories-section-story-list-empty-group:hover .user-stories-section-story-list-empty-button {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .user-stories-section-story-list-empty-group:hover .user-stories-section-story-list-empty-button-bloom {
    background: rgba(12, 169, 244, 0.1);
  }
  .user-stories-section-story-list-empty-group:hover .user-stories-section-story-list-empty-button-bloom::after {
    background: rgba(12, 169, 244, 0.1);
  }
  .user-stories-section-story-list-empty-group:hover .user-stories-section-story-list-empty-pre-title {
    color: #80c9f6;
  }
  .user-stories-section-story-list-empty-group:hover .user-stories-section-story-list-empty-title {
    color: #3ab8f2;
  }
}
.user-stories-section-story-list-empty-options:only-child {
  display: block;
}
[data-mode="loading"] .user-stories-section-story-list-empty-message:only-child,
[data-mode="loading"] .user-stories-section-story-list-empty-options:only-child {
  display: none;
}
.user-stories-mover {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  min-height: calc(100% - 1rem);
  top: 0;
  height: 0;
  overflow: hidden;
  padding: 0 2rem 2rem;
}
[data-mode="moving"] .user-stories-mover {
  opacity: 1;
  pointer-events: all;
  height: unset;
  overflow: visible;
}
.professional-file-mover {
  width: 100%;
  height: 100%;
  margin-top: 1rem;
  background: var(--surface-color-2);
  border-radius: 1rem;
  border: thin solid var(--surface-color-2-divider-color);
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2);
}
.professional-file-mover-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 2rem;
  background: var(--surface-color-2);
  z-index: 9;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  border-radius: 1rem 1rem 0 0;
}
.professional-file-mover-header-title {
  font-size: 2.4rem;
}
.professional-file-mover-files {
  margin-top: 1rem;
  padding: 2rem;
}
.professional-move-to-folder-item,
.professional-move-to-story-item {
  padding: 2rem 1rem;
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.professional-move-to-folder-item {
  cursor: pointer;
}
.professional-move-to-folder-item:hover {
  background: var(--surface-color-2-hover);
}
.professional-move-to-story-item {
  pointer-events: none;
}
.professional-move-to-item:last-child .professional-move-to-folder-item,
.professional-move-to-item:last-child .professional-move-to-story-item {
  border-bottom: none;
}
.professional-move-to-folder-item-icon,
.professional-move-to-story-item-icon {
  position: relative;
  opacity: 0.3;
  width: 40px;
  height: 28px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  background-color: var(--story-image-bg-color);
}
.professional-move-to-folder-item-icon {
  opacity: 1;
  background-color: var(--folder-flap-bg);
  border-radius: 0 4px 4px;
}
.professional-move-to-folder-item-icon-flap {
  position: absolute;
  background-color: var(--folder-flap-bg);
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 5px;
}
.professional-move-to-folder-item-icon::before {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--folder-bg);
  top: -5px;
  left: 0;
  width: 18px;
  height: 5px;
  border-radius: 4px 0 0;
}
.professional-move-to-folder-item-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: -10px;
  left: 13px;
  border: 5px solid transparent;
  border-bottom-color: var(--folder-bg);
}
.professional-move-to-folder-item-name,
.professional-move-to-story-item-title {
  font-size: 1.333rem;
}
.professional-move-to-story-item-title {
  opacity: 0.3;
}
.professional-icon-button {
  width: 4rem;
  height: 4rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  fill: var(--text-color-tertiary);
  padding: 0.5rem;
  transition: all 200ms;
}
.professional-icon-button.professional-dropdown-selected-item {
  background: #efefef;
}
.professional-icon-button--success {
  fill: #2dd290;
}
.professional-icon-button--danger {
  fill: #d32f2f;
}
.professional-icon-button.selected {
  pointer-events: none;
  fill: var(--primary-button-bg);
}
.professional-icon-button:hover {
  background: #ededee;
}
.professional-icon-button-icon {
  width: 60%;
  height: 60%;
}
.professional-icon-button-spinner {
  width: 100%;
  height: 100%;
  display: none;
}
.professional-icon-button--show-spinner .professional-icon-button-spinner {
  display: block;
}
.professional-icon-button--show-spinner .professional-icon-button-icon {
  display: none;
}
.professional-story-card,
.choose-story-story-item {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--surface-color-2-divider-color);
  background: var(--surface-color-2);
  cursor: pointer;
  isolation: isolate;
  transition: box-shadow 200ms;
}
.choose-story-story-item {
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--surface-color-3-divider-color);
}
.choose-story-story-item.selected {
  box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--primary-text-color);
}
.professional-story-card.locked {
  pointer-events: none;
}
.professional-story-card-content,
.choose-story-story-item-image-holder {
  position: relative;
  background: var(--story-image-bg-color);
  width: 100%;
  padding-top: 60%;
  overflow: hidden;
}
.locked .choose-story-story-item-image-holder {
  background: color-mix(in srgb, var(--story-image-bg-color), #000 25%);
}
.professional-story-card-content-icon-bar {
  position: absolute;
  z-index: 8;
  top: 0;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.professional-story-card-content-icon-bar-public {
  color: #27de43;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.professional-story-card-content-icon-bar-public-dot {
  width: 0.7rem;
  height: 0.7rem;
  display: block;
  background: #27de43;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.professional-story-card-content-icon-bar-public-text {
  line-height: 0;
  opacity: 0.8;
}
.professional-story-card-content-icon-bar-format-icon {
  width: 1.8rem;
  height: 1.8rem;
  box-sizing: content-box;
}
.professional-story-card-content-image,
.choose-story-story-item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-image: var(--story-image-placeholder);
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
  transition: 200ms;
  text-indent: -999999999px;
}
.locked .choose-story-story-item-image {
  -webkit-filter: saturate(0.15);
          filter: saturate(0.15);
  opacity: 0.5;
}
.professional-story-card-content-image.loading {
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
  opacity: 0.5;
}
.professional-story-card-locked-icon-holder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #d4d4d4;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.5);
  max-width: 6rem;
  max-height: 6rem;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: 200ms;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.3);
          transform: translate(-50%, -50%) scale(0.3);
}
.professional-story-card-open-icon-holder--small {
  max-width: 4rem;
  max-height: 4rem;
}
.professional-story-card-content-template-watermark {
  position: absolute;
  color: var(--text-color-primary);
  left: 0.5rem;
  bottom: 0.5rem;
  font-weight: bold;
  font-size: 1.067rem;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.6;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.1em 0.8em;
  border-radius: 2rem;
}
.professional-story-card-footer {
  min-height: 5rem;
}
.professional-story-card-footer-info {
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.75rem 1.25rem;
}
.professional-story-card-footer-title,
.choose-story-story-item-title {
  font-weight: normal;
  color: var(--text-color-secondary);
  font-size: 1.333rem;
  word-break: break-word;
}
.locked .choose-story-story-item-title {
  color: var(--text-color-tertiary);
}
.professional-story-card-footer-meta-holder {
  font-size: 1.2rem;
  color: var(--text-color-muted);
  margin-top: 0.25rem;
}
.professional-story-card-footer-meta--import-message {
  color: var(--primary-button-bg);
}
.locked .professional-story-card-locked-icon-holder {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.locked .professional-story-card-content-image {
  -webkit-filter: brightness(0.4);
          filter: brightness(0.4);
}
.locked .professional-story-card-footer-title {
  color: var(--danger-text-color);
}
@media only screen and (min-width: 768px) {
  .professional-story-card:hover {
    box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--surface-color-2-divider-color);
  }
  .choose-story-story-item:hover {
    box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--surface-color-3-divider-color);
  }
  .choose-story-story-item.selected:hover {
    box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--primary-text-color);
  }
  .professional-story-card:hover .professional-story-card-content-image {
    -webkit-transform: scale(1.075);
            transform: scale(1.075);
  }
}
.professional-story-card-footer-shared-icon {
  fill: var(--icon-color-muted);
  width: 2rem;
  height: 2rem;
}
.professional-story-card-footer-locked-icon {
  fill: var(--success-button-bg);
}
.professional-story-card-footer-more-button {
  flex-shrink: 0;
  position: relative;
  width: 3rem;
  transition: all 200ms;
}
.professional-story-card-footer-more-button-dot {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--icon-color-muted);
  transition: all 200ms;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-dropdown-selected-item .professional-story-card-footer-more-button-dot {
  background: var(--primary-text-color);
}
.professional-story-card-footer-more-button:hover .professional-story-card-footer-more-button-dot {
  background: var(--icon-color-tertiary);
}
.professional-story-card-footer-more-button-dot::before,
.professional-story-card-footer-more-button-dot::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: inherit;
}
.professional-story-card-footer-more-button-dot::before {
  top: 0;
  -webkit-transform: translateY(-0.7rem);
          transform: translateY(-0.7rem);
}
.professional-story-card-footer-more-button-dot::after {
  bottom: 0;
  -webkit-transform: translateY(0.7rem);
          transform: translateY(0.7rem);
}
.choose-story-locked-icon,
.choose-story-unlocked-icon {
  width: 30px;
  fill: var(--icon-color-secondary);
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.locked .choose-story-locked-icon {
  display: block;
}
.locked:hover .choose-story-locked-icon {
  display: none;
}
.locked:hover .choose-story-unlocked-icon {
  display: block;
}
.professional-breadcrumbs {
  position: relative;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.professional-breadcrumbs-back-button {
  width: 3.4rem;
  height: 3.4rem;
  background: var(--secondary-button-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1.2rem;
  transition: 200ms;
}
[data-header-state="moving"] .professional-breadcrumbs-back-button {
  opacity: 0;
  pointer-events: none;
}
.professional-breadcrumbs-back-button:nth-last-child(2) {
  display: none;
}
@media only screen and (min-width: 768px) {
  .professional-breadcrumbs-back-button {
    display: none;
  }
  .professional-breadcrumbs-back-button:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-breadcrumbs-back-button-icon {
  width: 1.4rem;
  height: 1.4rem;
  -webkit-transform: translateX(-0.1rem);
          transform: translateX(-0.1rem);
  fill: var(--text-color-tertiary);
}
.professional-breadcrumbs-item {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--text-color-secondary);
  margin-right: 1rem;
  padding: 0.75rem 2rem 0.75rem 0;
  border-bottom: 0.3rem solid transparent;
  transition: all 200ms;
  cursor: pointer;
  border-radius: 2rem;
}
.professional-breadcrumbs-item-icon-holder {
  margin-right: 0.8rem;
  width: 18px;
  fill: #a1aeb5;
}
[data-header-state="moving"] .professional-breadcrumbs-item {
  opacity: 0;
  pointer-events: none;
}
[drop-state="active"].professional-breadcrumbs-item {
  background: var(--secondary-button-bg-hover);
  color: var(--text-color-secondary);
  padding: 0.75rem 4rem 0.75rem 2rem;
}
.professional-breadcrumbs-item:last-child {
  color: var(--text-color-tertiary);
  pointer-events: none;
  padding-right: 0;
  cursor: default;
}
@media only screen and (min-width: 768px) {
  .professional-breadcrumbs-item-icon-holder {
    display: none;
  }
  .professional-breadcrumbs-item:only-of-type {
    color: var(--text-color-primary);
    pointer-events: none;
  }
  .professional-breadcrumbs-item:not(:only-of-type):last-child {
    color: var(--primary-text-color);
    pointer-events: none;
    padding-right: 0;
    cursor: default;
    display: flex;
  }
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child) {
    display: block !important;
  }
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child):hover {
    color: var(--text-color-tertiary);
  }
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::before,
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.6rem;
    height: 0.2rem;
    background: var(--text-color-tertiary);
    border-radius: 0.1rem;
    transition: all 200ms;
  }
  [drop-state="active"].professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::before,
  [drop-state="active"].professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::after {
    right: 2rem;
  }
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::before {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .professional-breadcrumbs-item:not(:only-of-type):not(:last-child)::after {
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
.professional-breadcrumbs-item:not(:only-of-type):not(:last-child) {
  display: none;
}
.professional-folder-card {
  cursor: pointer;
}
.professional-folder-card-content {
  position: relative;
  background-color: var(--folder-bg);
  margin: 3rem 1.4rem 0.5rem;
  padding-top: 50%;
  border-radius: 0 10px 10px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  transition: 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-folder-card:hover .professional-folder-card-content {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-folder-card-content-flap {
  position: absolute;
  background-color: var(--folder-flap-bg);
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 10px;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  transition: all 100ms;
}
[drop-state="active"] .professional-folder-card-content-flap {
  -webkit-transform: rotateX(-26deg);
          transform: rotateX(-26deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.professional-folder-card-cover {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.professional-folder-card-cover-items {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  padding: calc(1.2rem * 0.5);
  padding: clamp(calc(1.2rem * 0.5), 2vw, 1.2rem);
  grid-gap: 1rem;
}
.professional-folder-card-cover-items-folder-icon-holder {
  position: relative;
}
.professional-folder-card-cover-items-folder-icon {
  position: absolute;
  fill: var(--folder-thumb-bg);
}
[drop-state="busy"].professional-folder-card {
  pointer-events: none;
}
[drop-state="busy"] .professional-folder-card-cover-items {
  opacity: 0.2;
}
[drop-state="deleting"].professional-folder-card {
  pointer-events: none;
  opacity: 0.5;
}
.professional-folder-card-cover-items-story-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  overflow: hidden;
}
.professional-folder-card-cover-items-story-image-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--folder-thumb-bg);
  background-image: var(--story-image-placeholder);
  background-position: center;
  background-size: 50%;
  background-size: clamp(1rem, 50%, 4rem);
  background-repeat: no-repeat;
  text-indent: -999999999px;
}
.professional-folder-card-more-button {
  flex-shrink: 0;
  position: relative;
  width: 3rem;
  background: var(--folder-flap-bg);
  transition: all 200ms;
}
.professional-folder-card-more-button:hover,
.professional-dropdown-selected-item .professional-folder-card-more-button {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.professional-folder-card-more-button-dot {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--icon-color-secondary);
  transition: all 200ms;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-folder-card-more-button:hover .professional-folder-card-more-button-dot {
  background: var(--text-color-tertiary);
}
.professional-dropdown-selected-item .professional-folder-card-more-button-dot {
  background: var(--primary-button-bg);
}
.professional-folder-card-more-button-dot::before,
.professional-folder-card-more-button-dot::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: inherit;
}
.professional-folder-card-more-button-dot::before {
  top: 0;
  -webkit-transform: translateY(-0.7rem);
          transform: translateY(-0.7rem);
}
.professional-folder-card-more-button-dot::after {
  top: 0;
  -webkit-transform: translateY(0.7rem);
          transform: translateY(0.7rem);
}
.professional-folder-card-content::before {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--folder-bg);
  top: -16px;
  left: 0;
  width: 64px;
  height: 16px;
  border-radius: 10px 0 0;
}
.professional-folder-card-content::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: -32px;
  left: 48px;
  border: 16px solid transparent;
  border-bottom-color: var(--folder-bg);
}
.professional-folder-card-spinner-holder {
  display: none;
}
[drop-state="busy"] .professional-folder-card-spinner-holder,
[drop-state="deleting"] .professional-folder-card-spinner-holder {
  display: flex;
}
.professional-folder-card-name-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem 0;
}
.professional-folder-card-shared-icon {
  fill: #a7a7a7;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin-right: 0.75rem;
}
.professional-folder-card-name {
  font-size: 1.333rem;
  text-align: center;
}
/* Library Account Module */
/* Account Settings/Admin Modules */
.account-module-header__sign-out-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
/* New Story and Library thumbnails, containers and skeletons */
.professional-template-item-wrapper {
  width: 100%;
  display: block;
  border-radius: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-template-item-wrapper:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-template-item,
.professional-library-item,
.professional-skeleton-item {
  position: relative;
  display: block;
  padding: 0.2rem;
  text-decoration: none;
}
.professional-skeleton-item--structure {
  padding: 0;
}
.professional-template-item {
  min-width: 18rem;
}
.professional-library-item,
.professional-skeleton-item--library {
  padding: 0 0.57142857rem;
  min-width: 23rem;
}
.professional-library-item,
.professional-skeleton-item {
  cursor: pointer;
}
.professional-skeleton-item {
  cursor: default;
}
.professional-template-item-learn-more {
  background: rgba(0, 0, 0, 0.5);
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  z-index: 9;
  top: -0.8rem;
  right: -1rem;
  padding: 2rem;
  box-sizing: content-box;
  background-clip: content-box;
  transition: opacity 200ms;
}
.professional-template-item-learn-more-icon {
  fill: rgba(255, 255, 255, 0.6);
  transition: fill 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-template-item-learn-more {
    opacity: 0;
    top: 1.2rem;
    right: 1rem;
    padding: 0;
    box-sizing: unset;
    background-clip: unset;
  }
  .professional-template-item-learn-more:hover {
    opacity: 1;
  }
  .professional-template-item:hover .professional-template-item-learn-more {
    opacity: 1;
  }
  .professional-template-item-learn-more:hover .professional-template-item-learn-more-icon {
    fill: #ffffff;
  }
}
.professional-template-item-image-holder,
.professional-library-item-image-holder,
.professional-skeleton-item-image-holder {
  width: 100%;
  position: relative;
  padding-top: 67%;
  overflow: hidden;
  border-radius: 0.5rem;
  background-size: 200%;
  background-position: 100% 0;
  background-color: var(--skeleton-bg-color-stop-1);
  background-image: linear-gradient(120deg, var(--skeleton-bg-color-stop-1) 0%, var(--skeleton-bg-color-stop-1) 30%, var(--skeleton-bg-color-stop-2) 50%, var(--skeleton-bg-color-stop-1) 70%, var(--skeleton-bg-color-stop-1) 100%);
  -webkit-animation: wave 2s infinite linear;
          animation: wave 2s infinite linear;
}
.professional-library-item-image-holder {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.professional-skeleton-item-image-holder {
  border: thin solid transparent;
  background-size: 200%;
  background-position: 100% 0;
  background-color: var(--skeleton-bg-color-stop-1);
  background-image: linear-gradient(120deg, var(--skeleton-bg-color-stop-1) 0%, var(--skeleton-bg-color-stop-1) 30%, var(--skeleton-bg-color-stop-2) 50%, var(--skeleton-bg-color-stop-1) 70%, var(--skeleton-bg-color-stop-1) 100%);
  border-radius: 0.4rem;
  -webkit-animation: wave 2s infinite linear;
          animation: wave 2s infinite linear;
}
.professional-skeleton-item--structure .professional-skeleton-item-image-holder {
  padding-top: 30%;
  min-height: 11rem;
}
.professional-template-item-image-holder {
  padding-top: 133%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.professional-skeleton-item--template .professional-skeleton-item-image-holder {
  padding-top: 133%;
}
.professional-template-item-check {
  position: absolute;
  width: 2rem;
  height: 2rem;
  fill: #05a9f4;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  background: #fff;
  border-radius: 50%;
  transition: all 200ms;
}
.professional-template-item-image-holder-text {
  position: absolute;
  font-weight: bold;
  left: 50%;
  top: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 1.6rem;
  color: #ababab;
}
.professional-template-item-image,
.professional-library-item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.professional-library-item-image {
  transition: all 200ms;
}
.professional-template-item-title,
.professional-library-item-title,
.professional-skeleton-item-title {
  display: block;
  margin-top: 1rem;
  padding: 0.2rem;
  font-size: 1.333rem;
  line-height: 1.3em;
  font-weight: bold;
  text-decoration: none;
  color: var(--text-color-primary);
}
.professional-template-item-meta,
.professional-library-item-meta,
.professional-skeleton-item-meta {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3em;
  text-decoration: none;
  padding: 0.1rem 0.2rem 0;
  color: var(--text-color-primary);
}
.professional-template-item-learn-more-meta {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3em;
  text-decoration: none;
  padding: 0.1rem 0.2rem 0;
  color: var(--text-color-muted);
}
.professional-template-item-learn-more-meta-arrow {
  display: inline-block;
  margin-left: 0.3em;
}
@media only screen and (min-width: 768px) {
  .professional-template-item-learn-more-meta {
    opacity: 0;
    transition: all 200ms;
  }
  .professional-template-item:hover .professional-template-item-learn-more-meta {
    opacity: 1;
  }
  .professional-template-item:hover .professional-template-item-learn-more-meta:hover {
    color: var(--primary-button-bg);
  }
  .professional-template-item-learn-more-meta-arrow {
    transition: all 200ms;
  }
  .professional-template-item:hover .professional-template-item-learn-more-meta:hover .professional-template-item-learn-more-meta-arrow {
    -webkit-transform: translateX(0.3em);
            transform: translateX(0.3em);
  }
}
.professional-library-item-action-button {
  position: absolute;
  z-index: 99;
  right: 0.4rem;
  top: 0.4rem;
  fill: #fff;
  background: black;
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
}
.user-library-masthead-item .professional-library-item-action-button {
  right: 0.8rem;
  top: 0.8rem;
}
@media only screen and (min-width: 768px) {
  .professional-library-item-action-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
  }
  .professional-library-item:hover .professional-library-item-action-button,
  .user-library-masthead-item:hover .professional-library-item-action-button {
    pointer-events: all;
    opacity: 0.7;
  }
  .professional-library-item:hover .professional-library-item-action-button:hover,
  .user-library-masthead-item:hover .professional-library-item-action-button:hover {
    opacity: 1;
  }
}
.template-info-examples-holder .professional-library-item-title {
  color: var(--body-color, #d9d9d9);
}
.professional-skeleton-item-title {
  display: inline-block;
  color: transparent;
  margin-top: 1rem;
  border-radius: 0.3rem;
  width: 70%;
  font-size: 0.933rem;
  background-size: 200%;
  background-position: 100% 0;
  background-color: var(--skeleton-bg-color-stop-1);
  background-image: linear-gradient(120deg, var(--skeleton-bg-color-stop-1) 0%, var(--skeleton-bg-color-stop-1) 30%, var(--skeleton-bg-color-stop-2) 50%, var(--skeleton-bg-color-stop-1) 70%, var(--skeleton-bg-color-stop-1) 100%);
  -webkit-animation: wave 2s infinite linear;
          animation: wave 2s infinite linear;
}
@media only screen and (min-width: 768px) {
  .professional-library-item:hover .professional-library-item-image {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
.new-story-section {
  padding: 0 calc(4rem * 0.25);
  padding: clamp(calc(4rem * 0.25), 3vw, 2rem) clamp(calc(4rem * 0.5), 4vw, 4rem);
  border-top: thin solid var(--surface-color-2-divider-color);
}
.new-story-section:nth-child(even) {
  background: var(--surface-color-1);
}
.new-story-section:first-child {
  border: none;
}
.new-story-section-title {
  font-size: 2.4rem;
  color: var(--text-color-primary);
}
.new-story-section-library-image {
  width: 100%;
  flex: 1;
  max-width: 55rem;
  border-radius: 0.8rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.new-story-subsection {
  width: 100%;
  min-height: 31rem;
}
.new-story-scroller-title {
  font-size: 2rem;
  color: var(--text-color-primary);
}
/*///////////////////////////*/
/*/ /////////LIBRARY//////////*/
/*///////////////////////////*/
.user-library-masthead {
  position: relative;
}
.user-library-masthead-slide-nav-button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: none;
}
@media only screen and (min-width: 768px) {
  .user-library-masthead-slide-nav-button {
    display: block;
  }
}
.user-library-masthead-slide-nav-button--prev {
  left: 1rem;
}
.user-library-masthead-slide-nav-button--next {
  right: 1rem;
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.user-library-masthead-scroller {
  width: 100vw;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}
.user-library-masthead-scroller::-webkit-scrollbar {
  display: none;
}
.user-library-masthead-item {
  scroll-snap-align: center;
  display: inline-flex;
  flex: 1 0;
  flex-basis: calc(100vw - 16rem);
  min-width: 36rem;
  max-width: 130rem;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  padding: 1.75rem 0.5rem;
  padding: clamp(1.75rem, 2vw, 2rem) clamp(0.5rem, 2vw, 1.25rem);
}
.user-library-masthead-item:first-child {
  padding-left: 1rem;
  padding-left: clamp(1rem, 2vw, 2.5rem);
}
.user-library-masthead-item:last-child {
  padding-right: 1rem;
  padding-right: clamp(1rem, 2vw, 2.5rem);
}
.user-library-masthead-item-content {
  position: relative;
  flex: 1;
  padding-top: 54%;
  background: var(--image-bg-color);
  border-radius: 1rem;
  border-radius: clamp(1rem, 1vw, 2rem);
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  transition: all 200ms;
  cursor: pointer;
}
.user-library-masthead-item-content--skeleton {
  box-shadow: none;
  background-size: 200%;
  background-position: 100% 0;
  background-color: var(--skeleton-bg-color-stop-1);
  background-image: linear-gradient(120deg, var(--skeleton-bg-color-stop-1) 0%, var(--skeleton-bg-color-stop-1) 30%, var(--skeleton-bg-color-stop-2) 50%, var(--skeleton-bg-color-stop-1) 70%, var(--skeleton-bg-color-stop-1) 100%);
  -webkit-animation: wave 2s infinite linear;
          animation: wave 2s infinite linear;
}
.skeleton-pulse {
  -webkit-animation: skeleton-pulse infinite 1.75s;
          animation: skeleton-pulse infinite 1.75s;
}
@-webkit-keyframes skeleton-pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes skeleton-pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
.user-library-masthead-item-content-image {
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 400ms;
}
@media only screen and (min-width: 768px) {
  .user-library-masthead-item-content:hover .user-library-masthead-item-content-image {
    -webkit-transform: scale(1.025);
            transform: scale(1.025);
  }
}
.user-library-masthead-item-content-text {
  position: absolute;
  padding: 1rem;
  padding: clamp(1rem, 2vw, 3rem);
  box-sizing: border-box;
  left: 0;
  bottom: 0;
}
.user-library-masthead-item-content-text-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #f9f9f9;
  max-width: 90ch;
}
.user-library-masthead-item-content-text-meta {
  color: #d4d4d4;
  font-size: 1.333rem;
}
.user-library-masthead-nav-item {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--icon-color-muted);
  margin: 0 0.5rem;
  border-radius: 50%;
  transition: all 200ms;
  display: none;
}
.user-library-masthead-nav-item:only-child {
  display: none;
}
@media only screen and (min-width: 768px) {
  .user-library-masthead-nav-item {
    display: block;
  }
  .user-library-masthead-nav-item:hover {
    background: var(--icon-color-primary);
  }
}
.user-library-masthead-nav-item.selected {
  background: var(--primary-button-bg);
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--surface-color-0), 0 0 0 2px rgba(5, 169, 244, 0.75);
}
.user-library-content-sections {
  padding: 0 calc(4rem * 0.5);
  padding: 0 clamp(calc(4rem * 0.5), 4vw, 4rem);
}
.library-subsection {
  width: 100%;
  min-height: 22rem;
}
/*/ //////////////////////////*/
/*/ //////STORY VIEWER///////*/
/*/ /////////////////////////*/
#story-viewer-container {
  display: grid;
  grid-template-rows: -webkit-max-content auto;
  grid-template-rows: max-content auto;
  grid-template-columns: auto;
  height: 100dvh;
  background: var(--surface-color-0);
}
#story-viewer-container[data-story-viewer-status="showing-template"] {
  grid-template-rows: auto;
}
[data-story-viewer-status="loading"] .story-viewer-menu,
[data-story-viewer-status="showing-template"] .story-viewer-menu,
[data-story-viewer-status="showing-template"] .story-viewer-header,
[data-story-viewer-status="loading"] .story-viewer-module,
[data-story-viewer-status="showing-template"] .story-viewer-module {
  display: none;
}
.story-viewer-spinner {
  display: none;
}
[data-story-viewer-status="loading"] .story-viewer-spinner {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10rem;
  height: 10rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: var(--loading-spinner-image);
  background-position: 50% 50%;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
@media (min-width: 768px) {
  #story-viewer-container {
    grid-template-columns: -webkit-max-content auto;
    grid-template-columns: max-content auto;
    grid-template-rows: auto;
  }
  #story-viewer-container[data-story-viewer-status="showing-template"] {
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
}
.story-viewer-header {
  background: var(--surface-color-4);
  border-bottom: thin solid var(--story-viewer-header-border-color);
  max-width: 100dvw;
  color: var(--story-viewer-header-color);
  transition: all;
}
.story-viewer-header:has([data-view="home"].selected) {
  background: var(--story-viewer-header-bg-color--home);
  color: var(--story-viewer-header-color--home);
  border-bottom: thin solid var(--story-viewer-header-border-color--home);
}
@media (min-width: 768px) {
  .story-viewer-header {
    border-bottom: unset;
    max-width: 6.25rem;
    background: var(--story-viewer-header-bg-color);
    border-right: thin solid var(--story-viewer-header-border-color);
    box-shadow: inset -2px 0px 12px -12px rgba(0, 0, 0, 0.4);
  }
  .story-viewer-header:has([data-view="home"].selected) {
    border-right: thin solid var(--story-viewer-header-border-color--home);
  }
}
.story-viewer-header-story-title {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.6rem;
  border-bottom: thin solid var(--story-viewer-header-border-color);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-header-story-title {
  border-bottom: thin solid var(--story-viewer-header-border-color--home);
}
.story-viewer-module-story-title-layout {
  display: none;
}
@media (min-width: 768px) {
  .story-viewer-header-story-title {
    display: none;
  }
  .story-viewer-module-story-title-layout {
    display: flex;
  }
}
.story-viewer-header-layout {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
}
@media (min-width: 768px) {
  .story-viewer-header-layout {
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 0 1.4rem;
    height: 100dvh;
  }
}
.story-viewer-header-logo {
  cursor: pointer;
  fill: var(--story-viewer-header-logo-color);
  opacity: 0.9;
  transition: all 250ms;
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-header-logo {
  fill: var(--story-viewer-header-logo-color--home);
}
.story-viewer-header-logo:hover {
  opacity: 1;
}
.story-viewer-header-logo-icon {
  width: 2.4rem;
  height: 2.4rem;
}
@media (min-width: 768px) {
  .story-viewer-header-logo-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.story-viewer-header-nav-layout {
  display: flex;
  flex: 1;
  padding: 0 1rem;
  overflow-x: auto;
}
@media (min-width: 768px) {
  .story-viewer-header-nav-layout {
    flex-direction: column;
    padding: 1rem 1.4rem;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.story-viewer-header-nav-layout::-webkit-scrollbar {
  display: none;
}
.story-viewer-header-nav {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .story-viewer-header-nav {
    flex-direction: column;
    margin-left: 0;
    gap: 2rem;
  }
}
.story-viewer-header-button {
  font-family: "Open Sans", helvetica, sans-serif;
  position: relative;
  padding: 0.5em;
  aspect-ratio: 1;
  display: flex;
  font-size: 1.333rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4rem;
  color: inherit;
  white-space: nowrap;
  background: transparent;
  transition: all 250ms;
}
.story-viewer-header-button:hover {
  color: var(--story-viewer-header-button-color-hover);
  background: var(--story-viewer-header-button-bg-hover);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0), 0 2px 6px -3px rgba(0, 0, 0, 0);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-header-button:hover {
  color: var(--story-viewer-header-button-color-hover--home);
  background: var(--story-viewer-header-button-bg-hover--home);
}
.story-viewer-header-button:active {
  background: var(--story-viewer-header-button-bg-hover);
}
.story-viewer-header-button--selectable.selected {
  pointer-events: none;
  color: var(--story-viewer-header-button-color-selected);
  background: var(--story-viewer-header-button-bg-selected);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-header-button--selectable.selected {
  background: var(--story-viewer-header-button-bg-selected--home);
}
.story-viewer-header-button.professional-dropdown-selected-item {
  color: var(--story-viewer-header-button-color-selected);
  background: var(--story-viewer-header-button-bg-selected);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-header-button.professional-dropdown-selected-item {
  color: var(--story-viewer-header-button-color-selected);
  background: var(--story-viewer-header-button-bg-selected--home);
}
.story-viewer-header-button > svg:not(.custom-svg) {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  fill: currentColor;
}
.story-viewer-header-button.professional-dropdown-selected-item > svg:not(.custom-svg) {
  opacity: 0.8;
}
.story-viewer-header-button--show-spinner > .story-viewer-header-button-spinner {
  display: block;
}
.story-viewer-header-button-spinner {
  width: 3rem;
  height: 3rem;
  display: none;
}
.story-viewer-header-button--success {
  fill: var(--success-button-bg);
}
.story-viewer-module-header {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem;
  gap: 0.6em;
  background: var(--surface-color-2);
  color: var(--text-color-primary);
  border-bottom: thin solid var(--surface-color-2-divider-color);
  display: none;
}
@media (min-width: 768px) {
  .story-viewer-module-header {
    display: flex;
  }
}
#home-module .story-viewer-module-header {
  color: #efefef;
  background: #0f0f0f;
  border-bottom: thin solid #262626;
}
.story-viewer-module-button {
  border-radius: 0.4rem;
  padding: 0 0.7rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  height: 2.6rem;
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  background: var(--surface-color-3);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11);
  transition: all 100ms;
}
.story-viewer-module-button:disabled {
  opacity: 0.3;
  background: unset;
  pointer-events: none;
  box-shadow: unset;
}
.story-viewer-module-button.professional-dropdown-selected-item {
  box-shadow: inset 0 1px 1px rgba(7, 59, 83, 0.18);
  background: var(--surface-color-2-hover);
  color: var(--text-color-primary);
}
.story-viewer-module-button-icon {
  width: 16px;
  fill: var(--text-color-primary);
  transition: all 100ms;
}
@media only screen and (min-width: 768px) {
  .story-viewer-module-button:hover {
    color: var(--text-color-primary);
    background: var(--surface-color-3-hover);
  }
  .story-viewer-module-button:hover .story-viewer-module-button-icon {
    fill: var(--text-color-primary);
  }
}
.story-viewer-module-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  aspect-ratio: 1;
  color: var(--icon-color-tertiary);
  border-radius: 50%;
  transition: all 250ms;
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button,
#home-module .story-viewer-module-icon-button {
  color: #c7c7c8;
}
.story-viewer-module-icon-button:hover {
  color: var(--icon-color-secondary);
  background: var(--surface-color-3-hover);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button:hover,
#home-module .story-viewer-module-icon-button:hover {
  background: #313439;
}
.story-viewer-module-icon-button:active {
  color: var(--icon-color-secondary);
  background: var(--surface-color-3-hover);
}
.story-viewer-module-icon-button--success {
  color: var(--success-button-bg);
}
.story-viewer-module-icon-button--success:hover {
  color: var(--success-button-bg-hover);
}
.story-viewer-module-icon-button--danger {
  color: var(--danger-button-bg);
}
.story-viewer-module-icon-button--danger:hover {
  color: var(--danger-button-bg-hover);
}
.story-viewer-module-icon-button-icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: currentColor;
}
.story-viewer-module-icon-button:hover .story-viewer-module-icon-button-icon {
  opacity: 1;
}
.story-viewer-module-icon-button.professional-dropdown-selected-item {
  background: var(--surface-color-3-hover);
  color: var(--text-color-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 2px 6px -3px rgba(0, 0, 0, 0.12);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button.professional-dropdown-selected-item,
#home-module .story-viewer-module-icon-button.professional-dropdown-selected-item {
  color: #fff;
  background: #313439;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 2px 6px -3px rgba(0, 0, 0, 0.12);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button--success {
  color: var(--success-button-bg);
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button--success:hover {
  color: var(--success-button-bg-hover);
}
.professional-dropdown-selected-item .story-viewer-module-icon-button-icon {
  opacity: 1;
}
.story-viewer-header:has([data-view="home"].selected) .story-viewer-module-icon-button--success.professional-dropdown-selected-item,
#home-module .story-viewer-module-icon-button--success.professional-dropdown-selected-item {
  color: var(--success-button-bg-hover);
  background: #313439;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 2px 6px -3px rgba(0, 0, 0, 0.12);
}
.story-viewer-module-icon-button:disabled {
  pointer-events: none;
  opacity: 0.25;
}
.story-viewer-module-icon-button--resize {
  display: none;
}
@media only screen and (min-width: 768px) {
  .story-viewer-module-icon-button--resize {
    display: block;
  }
  .full-screen-modal .story-viewer-module-icon-button--resize-enter-full {
    display: none;
  }
  .story-viewer-module-icon-button--resize-exit-full {
    display: none;
  }
  .full-screen-modal .story-viewer-module-icon-button--resize-exit-full {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .story-viewer-module-icon-button--close {
    display: none;
  }
  .full-screen-modal .story-viewer-module-icon-button--close {
    display: block;
  }
}
.story-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .story-viewer-header-actions {
    flex-direction: column;
  }
  .story-viewer-header-actions-menu {
    display: none;
  }
}
.story-viewer-module-story-title {
  white-space: nowrap;
  font-size: 1.333rem;
}
.story-viewer-module-edit-status {
  font-size: 1.2rem;
  white-space: nowrap;
  opacity: 0.8;
  color: inherit;
  min-width: 22ch;
}
.story-viewer-module-drag-item {
  position: relative;
  font-size: 1.333rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  padding: 0.7em 1.2em 0.6em 0.6em;
  gap: 0.4em;
  background: var(--draggable-item-bg);
  color: var(--text-color-secondary);
  box-shadow: var(--draggable-item-shadow);
  cursor: -webkit-grab;
  cursor: grab;
  border-radius: 0.4rem;
  transition: all 250ms;
}
.story-viewer-module-drag-item:disabled {
  opacity: 0.7;
  box-shadow: var(--draggable-item-shadow-disabled);
}
.story-viewer-module-drag-item.dragging-clone {
  box-shadow: none;
  opacity: 0.6;
  box-shadow: var(--draggable-item-dragging-clone-shadow);
}
.story-viewer-module-drag-item.drag-ghost {
  transition: unset;
}
.story-viewer-module-drag-item.drag-ghost .story-viewer-module-drag-item-dropdown-button {
  display: none;
}
.story-viewer-module-drag-item.professional-dropdown-selected-item-container {
  color: var(--primary-text-color);
  box-shadow: 0 0 0 1px var(--primary-text-color);
}
.story-viewer-module-drag-item:has(.story-viewer-module-drag-item-dropdown-button) {
  padding-right: 4rem;
}
.story-viewer-module-drag-item:not(:disabled):hover {
  color: var(--text-color-primary);
  background: var(--draggable-item-bg-hover);
  box-shadow: var(--draggable-item-shadow-hover);
}
.story-viewer-module-drag-item.dragging {
  opacity: 0.5;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.story-viewer-module-drag-item-label {
  pointer-events: none;
}
.story-viewer-module-drag-item-braille {
  pointer-events: none;
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.story-viewer-module-drag-item-dropdown-button {
  cursor: pointer;
  position: absolute;
  color: var(--draggable-item-dropdown-color);
  top: 0;
  right: 0;
  width: 3.5rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.story-viewer-module-drag-item:disabled .story-viewer-module-drag-item-dropdown-button {
  pointer-events: none;
}
.story-viewer-module-drag-item-dropdown-button:hover {
  color: var(--draggable-item-dropdown-color-hover);
  background: var(--draggable-item-dropdown-bg-hover);
}
.story-viewer-module-drag-item-dropdown-button.professional-dropdown-selected-item {
  color: var(--primary-text-color);
}
.story-viewer-module-drag-item-dropdown {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
  opacity: 0.5;
}
.professional-dropdown-selected-item .story-viewer-module-drag-item-dropdown {
  opacity: 1;
}
.story-viewer-modules {
  background: var(--surface-color-0);
}
.story-viewer-module {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--text-color-primary);
  background-color: var(--surface-color-0);
}
#template_info-module {
  z-index: 9999;
}
.app-header-tools-menu:not(.app-header-tools-menu--no-hide) {
  display: none;
}
@media only screen and (min-width: 768px) {
  .app-header-tools-menu:not(.app-header-tools-menu--no-hide) {
    display: flex;
    flex-direction: column;
  }
}
.app-header-signup-cta-holder {
  color: #e7e8e9;
  font-size: 12px;
  margin-left: 12px;
  border-left: 1px solid #333c42;
}
.app-header-signup-cta-text {
  margin-left: 21px;
  display: none;
}
.app-header-icon-section {
  padding: 0 0.6rem;
  border-left: 1px solid #353d47;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .app-header-signup-cta-text {
    display: block;
  }
}
.app-header-signup-cta-button {
  -webkit-appearance: none;
  background: none;
  border: 1px solid #767e86;
  margin-left: 12px;
  color: #ccc;
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms;
}
.app-header-signup-cta-button:hover {
  background: #d8d8d8;
  color: #353b42;
  border-color: transparent;
}
.app-header-signup-cta-button--danger {
  background: #f44336;
  color: #fff;
  border: thin solid #f44336;
}
.app-header-signup-cta-button--danger:hover {
  background: #f44336;
  color: #fff;
  border: thin solid #f44336;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.app-header-signup-cta-button--primary {
  background: #2490c2;
  color: #fff;
  border: thin solid #2490c2;
}
.app-header-signup-cta-button--primary:hover {
  background: #2490c2;
  color: #fff;
  border: thin solid #2490c2;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.app-header-signup-cta-button--success {
  background: var(--primary-button-bg);
  color: #fff;
  border: thin solid var(--primary-button-bg);
}
.app-header-signup-cta-button--success:hover {
  background: var(--primary-button-bg);
  color: #fff;
  border: thin solid var(--primary-button-bg);
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.drop-zone-actions-holder {
  position: absolute;
  right: 0;
  bottom: 0;
  gap: 3rem;
  display: flex;
  align-items: center;
  padding: 2rem 3rem;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  z-index: 99999999;
}
.is-dragging .drop-zone-actions-holder {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.drop-zone-action {
  position: relative;
  width: 6rem;
  display: flex;
  height: 6rem;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  box-shadow: var(--drop-zone-action--shadow);
  z-index: 10;
}
.drop-ready .drop-zone-action {
  z-index: 100;
}
.drop-zone-action-drop-area {
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 0.15rem dashed var(--drop-zone-action--delete-dashed-border-color);
  background: var(--drop-zone-action--delete-bg-color);
  box-shadow: 0 0 0 0 var(--drop-zone-action--delete-static-state-border-color);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 200ms ease-in-out;
}
.drop-ready .drop-zone-action-drop-area {
  border-color: transparent;
  box-shadow: 0 0 0 0.7rem var(--drop-zone-action--delete-drop-state-border-color);
  background: var(--drop-zone-action--delete-drop-state-bg-color);
}
.drop-zone-action-drop-area--delete {
  border-color: var(--drop-zone-action--delete-dashed-border-color);
  background: var(--drop-zone-action--delete-bg-color);
}
.drop-zone-action-icon--delete {
  width: 3.5rem;
  fill: var(--drop-zone-action--delete-icon-color);
  -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
  transition: all 200ms ease-in-out;
}
.drop-ready .drop-zone-action-icon--delete {
  fill: var(--drop-zone-action--delete-drop-state-icon-color);
}
.trash-lid {
  transition: all 200ms ease-in-out;
  -webkit-transform-origin: 490px 188px;
          transform-origin: 490px 188px;
}
.drop-ready .trash-lid {
  -webkit-transform: rotate(29deg) translateY(-5px);
          transform: rotate(29deg) translateY(-5px);
}
.drop-zone-action-icon--archive {
  width: 2.2rem;
  fill: #c8c9cb;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
}
/* Home View*/
#home-module {
  overflow: hidden;
  z-index: 9999;
  background-color: #1c1d20;
}
.home-module__character-list-item {
  float: left;
  margin: 14px 10px 0 0;
  background-color: #3e3e3e;
  border: thin solid rgba(122, 122, 122, 0.3);
}
.home-layout {
  padding: 2rem;
}
.home-layout-gallery-item-slideshow-button {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  opacity: 0;
  transition: opacity 400ms;
}
.emotive-thumbnail--glass-hover:hover .home-layout-gallery-item-slideshow-button {
  opacity: 0.8;
}
.emotive-thumbnail--glass-hover:hover .home-layout-gallery-item-slideshow-button:hover {
  opacity: 1;
}
.home-layout-toggle {
  margin-bottom: 1.4rem;
}
.home-layout-bkg-image {
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center;
  text-indent: -99999999999px;
}
.home-layout-content {
  position: relative;
  padding-bottom: 4rem;
}
.home-layout-content-format-info {
  display: flex;
  align-items: flex-end;
}
.home-layout-content-format-info-text {
  color: var(--text-color-primary);
  font-size: 1.333rem;
  opacity: 0.3;
  text-transform: capitalize;
}
.home-layout-content-actions {
  max-width: 40rem;
}
.home-layout-character-item {
  display: none;
}
.home-layout-character-item:nth-child(-n + 12) {
  display: block;
}
.home-layout-show-hide-characters {
  display: none;
  -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem);
}
.hasTooManyCharacters .home-layout-show-hide-characters {
  display: inline-block;
}
.home-layout-show-hide-characters-checkbox:checked ~ .home-layout-character-items-holder .home-layout-character-item {
  display: block;
}
.home-layout-show-hide-characters-checkbox:checked ~ .home-layout-character-items-holder .home-layout-too-many-characters-indicator {
  display: none;
}
.home-layout-show-hide-scenes {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 2rem 0 4rem;
  width: 100%;
}
.home-layout-scenes-holder {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-padding: 0 50%;
  scroll-snap-type: x mandatory;
  width: 100vw;
  padding: 2rem 0 0 2rem;
  -webkit-transform: translateX(-2rem);
          transform: translateX(-2rem);
}
.home-layout-scenes-holder::-webkit-scrollbar {
  display: none;
}
.home-layout-scene-item {
  scroll-snap-align: center;
  flex: 1 0 90%;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  padding-right: 4rem;
  box-sizing: content-box;
}
.home-layout-scene-section-edit-button-holder {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 99;
}
.home-layout-scene-section-edit-button {
  color: #989492;
  background: #0d0d0d;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  position: absolute;
  border: thin solid #464646;
  right: 0.2rem;
  z-index: 99;
}
.home-layout-scene-section-edit-button.professional-dropdown-selected-item {
  border-color: var(--primary-text-color);
  color: var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .home-layout {
    display: grid;
    grid-template-columns: minmax(200px, 500px) 1fr;
    padding: 4rem;
  }
  .home-layout-scenes-holder {
    scroll-padding: unset;
    scroll-snap-type: unset;
  }
  .home-layout-scene-section-edit-button {
    right: 0.5rem;
  }
}
@media only screen and (min-width: 1000px) {
  .home-layout-scene-section-wrapper {
    position: absolute;
    left: 50%;
    width: 75%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .home-layout-scenes-section {
    position: absolute;
    left: calc(500px + (4rem * 2));
    width: calc((100vw - 500px) - (4rem * 4));
    top: 0;
  }
  .home-layout-show-hide-scenes {
    display: none;
  }
  .hasMinFour .home-layout-show-hide-scenes {
    display: block;
  }
  .home-layout-scenes-holder {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 1.4rem;
    grid-row-gap: 3rem;
    padding: 2rem 0 0 0;
    scroll-padding: unset;
    scroll-snap-type: unset;
    width: 100%;
    overflow-x: unset;
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
  }
  .home-layout-scene-item {
    max-width: unset;
    padding: 0;
    display: none;
  }
  .home-layout-scene-item:nth-child(-n + 3) {
    display: block;
  }
  .home-layout-show-hide-scenes-checkbox:checked ~ .home-layout-scenes-holder .home-layout-scene-item {
    display: block;
  }
  .home-layout-scene-item .emotive-thumbnail-image-wrapper {
    flex: unset;
    min-height: unset;
    padding-top: 54%;
  }
  .no-image .emotive-thumbnail {
    height: 100%;
  }
  .no-image .emotive-thumbnail-image-wrapper {
    padding-top: 4rem;
    height: 100%;
  }
  .no-image .emotive-thumbnail-content-wrapper {
    width: 100%;
  }
}
@media only screen and (min-width: 1230px) {
  .home-layout-show-hide-scenes,
  .hasMinFour .home-layout-show-hide-scenes {
    display: none;
  }
  .hasMinFour.hasMinFive .home-layout-show-hide-scenes {
    display: block;
  }
  .home-layout-scenes-holder {
    grid-template-columns: 1fr 1fr;
  }
  .home-layout-scene-item:nth-child(-n + 4) {
    display: block;
  }
}
@media only screen and (min-width: 1230px) and (min-height: 890px) {
  .home-layout-show-hide-scenes,
  .hasMinFour .home-layout-show-hide-scenes,
  .hasMinFour.hasMinFive .home-layout-show-hide-scenes {
    display: none;
  }
  .hasMinFour.hasMinFive.hasMinSeven .home-layout-show-hide-scenes {
    display: block;
  }
  .home-layout-scenes-holder {
    grid-template-columns: 1fr 1fr;
  }
  .home-layout-scene-item:nth-child(-n + 6) {
    display: block;
  }
}
@media only screen and (min-width: 1560px) {
  .home-layout-show-hide-scenes,
  .hasMinFour .home-layout-show-hide-scenes,
  .hasMinFour.hasMinFive .home-layout-show-hide-scenes {
    display: none;
  }
  .hasMinFour.hasMinFive.hasMinSeven .home-layout-show-hide-scenes {
    display: block;
  }
  .home-layout-scenes-holder {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2.4rem;
    grid-row-gap: 3.5rem;
  }
  .home-layout-scene-item:nth-child(-n + 6) {
    display: block;
  }
}
@media only screen and (min-width: 1560px) and (min-height: 890px) {
  .home-layout-show-hide-scenes,
  .hasMinFour .home-layout-show-hide-scenes,
  .hasMinFour.hasMinFive.hasMinSeven .home-layout-show-hide-scenes {
    display: none;
  }
  .hasMinFour.hasMinFive.hasMinSeven.hasMinTen .home-layout-show-hide-scenes {
    display: block;
  }
  .home-layout-scenes-holder {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2.4rem;
    grid-row-gap: 3.5rem;
  }
  .home-layout-scene-item:nth-child(-n + 9) {
    display: block;
  }
}
.home-layout-empty-section-holder {
  width: 100%;
  min-height: 220px;
  border: 2px dashed #262626;
  border-radius: 0.8rem;
  background: rgba(0, 0, 0, 0.54);
  text-align: center;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Home Filters */
.home-layout-filter-button {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  z-index: 9;
}
[data-home-filter]:not([data-home-filter=""]) .home-layout-filter-button {
  border-color: #ff5d52;
  background: #ff5d52;
}
[data-home-filter]:not([data-home-filter=""]) .home-layout-filter-button > svg {
  fill: #000000;
}
/* Timeline */
.bool-cell-wrapper--text {
  display: none;
}
.bool-cell-wrapper--character {
  display: none;
}
.table-cell--section-header.marker-cell {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 500;
}
.drop-zone-cell {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 9999;
}
.header-cell {
  position: -webkit-sticky;
  position: sticky;
  top: 34px;
  z-index: 520;
  background: #ffffff;
}
.header-cell.cell-content.heading {
  padding: 0;
}
.marker-spacer-cell,
.drop-zone-cell,
.table-cell--section-header--side,
.table-cell--section--side,
.timeline-module-new-scene-button,
.timeline-module__scene-swapping-ghost,
.side-legend__footer,
.side-legend__settings-menu,
.timeline__toggle-sections-dropdown-menu {
  display: none;
}
@media only screen and (min-width: 768px) {
  .marker-spacer-cell,
  .drop-zone-cell,
  .table-cell--section-header--side,
  .table-cell--section--side,
  .characters-cell,
  .connections-cell,
  .theme-cell,
  .buffer-cell,
  .timeline-module-new-scene-button,
  .timeline-module__scene-swapping-ghost,
  .side-legend__settings-menu,
  .timeline__toggle-sections-dropdown-menu,
  .table-cell--section-header:not(.marker-cell),
  .table-cell.empty.action,
  .table-cell.empty.notes,
  .table-cell.empty.character-group-cell,
  .table-cell.empty.featured_image-cell {
    display: flex;
  }
  .side-legend__footer {
    display: flex;
  }
  .timeline-module-new-scene-button--mobile {
    display: none;
  }
}
.timeline-module-new-scene-button--mobile {
  position: absolute;
  z-index: 9999;
  bottom: 50px;
  left: calc(100% - 75px);
}
.adding-new-scene-mode .timeline-module-new-scene-button--mobile {
  pointer-events: none;
  opacity: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .timeline-module-new-scene-button--mobile {
    display: block;
  }
  .timeline-module-new-scene-button,
  .timeline-module__scene-swapping-ghost {
    display: none;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
  .timeline-module-new-scene-button--mobile {
    display: block;
  }
  .timeline-module-new-scene-button,
  .timeline-module__scene-swapping-ghost {
    display: none;
  }
}
.table-cell--section-header--side.scene_info {
  z-index: 570;
}
.table-cell--section--side,
.table-cell--section-header--side,
.table-cell--section-header--side.characters {
  z-index: 560;
}
.table-cell--section-header.marker-cell {
  z-index: 540;
}
.header-cell {
  z-index: 530;
}
.notes .text-cell-wra {
  white-space: pre-wrap;
}
.text-cell-wrapper {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 20;
}
.text-cell-wrapper--tag {
  background: var(--tag-display-bg);
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 2rem;
}
/* Editor JS Legacy Styles - for non upgraded stories */
.timeline-text-item {
  font-size: 1.2rem;
}
.timeline-text-item.timeline-heading-item {
  font-size: 1.3rem;
}
.timeline-text-item--paragraph {
  margin-top: 1rem;
}
.timeline-text-item--list {
  margin-top: 1rem;
  padding-left: 2.4rem;
}
.pensive-modal-section-wrapper a[href] {
  color: var(--primary-button-bg);
}
.timeline-text-item > a {
  color: var(--primary-button-bg);
  text-decoration: none;
}
.timeline-text-item > a:hover {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
[data-can-edit="no"] .pensive-modal-section-wrapper a:hover {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
/* Slideshow View */
.slideshow-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 9999999;
  background: transparent;
  background: var(--surface-color-2-divider-color) 0;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  transition: all 200ms;
}
.showing-slideshow .slideshow-modal {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.slides-modal {
  background: #121212;
}
.slides-modal-header {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: "title title title" "buttons-left buttons-left buttons-right";
  position: fixed;
  width: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem 1rem 0.2rem 1rem;
}
.slides-modal-header-title {
  text-align: center;
  font-size: 1.6rem;
  padding: 0.2em 0 0.8em 0;
  border-bottom: thin solid rgba(255, 255, 255, 0.15);
  grid-area: title;
  max-width: 100%;
  margin-bottom: 0.25em;
}
.slides-modal-header-buttons-wrapper {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.slides-modal-header-buttons-wrapper--left {
  grid-area: buttons-left;
}
.slides-modal-header-buttons-wrapper--right {
  grid-area: buttons-right;
}
@media only screen and (min-width: 768px) {
  .slides-modal-header {
    display: flex;
    padding: 1rem;
  }
  .slides-modal-header-title {
    font-size: 2.4rem;
    padding: 0;
    margin: 0;
    border-bottom: none;
  }
  .slides-modal-header-buttons-wrapper {
    min-width: 15rem;
  }
}
.slides-modal-header-show-slides-button {
  padding: 0.5rem;
}
.slides-modal-header-show-characters-button {
  padding: 0.8rem;
}
.slideshow-scroller-holder {
  display: none;
}
.slideshow-scroller-layout {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.slideshow-scroller-layout::-webkit-scrollbar {
  display: none;
}
.slideshow-scroller-layout-item {
  scroll-snap-align: center;
  display: inline-flex;
  flex: 1 0 100%;
  justify-content: center;
  height: 100%;
  min-width: 100vw;
  box-sizing: border-box;
  position: relative;
  padding: 0;
}
.slideshow-scroller-layout-progress-holder {
  position: absolute;
  height: 30px;
  width: 100%;
  left: 0;
  bottom: 0;
}
.slideshow-scroller-empty-state {
  display: none;
  pointer-events: none;
}
.empty .slideshow-scroller-empty-state {
  display: flex;
  pointer-events: all;
}
.slideshow-menu-scroller-holder {
  display: none;
}
.slideshow-menu-scroller-layout--characters,
[data-scene-image-orientation="portrait"] .slideshow-menu-scroller-layout--scenes,
[data-scene-image-orientation="square"] .slideshow-menu-scroller-layout--scenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
  grid-auto-rows: minmax(min-content, max-content);
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}
.slideshow-menu-scroller-item.no-image .emotive-thumbnail-content-wrapper {
  width: 100%;
}
.slideshow-menu-scroller-item {
  padding-top: 1rem;
}
.slides-modal-slide-menu-holder {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 10;
  width: 100vw;
  max-width: 400px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #1c1d20;
  transition: all 400ms cubic-bezier(0.4, 0.31, 0.32, 0.99);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.showing-slides-menu .slides-modal-slide-menu-holder {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slides-modal-slide-menu-buttons-holder {
  min-height: 70px;
  border-bottom: thin solid #232528;
  background: #222326;
  overflow: hidden;
}
.slides-modal-slide-menu-button {
  margin-right: 1rem;
}
.slides-modal-slide-menu-button:last-child {
  margin-right: 0;
}
.slides-modal-slide-menu-button-icon {
  width: 80%;
}
.slides-modal-slide-menu-button-icon--scenes {
  width: 90%;
}
.slides-modal-slide-menu-scrollers-holder {
  flex: 1;
  position: relative;
}
.slides-modal-slide-scrollers-holder {
  transition: -webkit-filter 400ms;
  transition: filter 400ms;
  transition: filter 400ms, -webkit-filter 400ms;
}
.showing-slides-menu .slides-modal-slide-scrollers-holder {
  -webkit-filter: brightness(0.45);
          filter: brightness(0.45);
}
.slides-modal-next-slide-button {
  padding: 0.8rem;
  position: fixed;
  right: 1rem;
  top: 50%;
}
.slides-modal-prev-slide-button {
  padding: 0.8rem;
  position: fixed;
  left: 1rem;
  top: 50%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.slides-modal-next-slide-button,
.slides-modal-prev-slide-button {
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .slides-modal-next-slide-button,
  .slides-modal-prev-slide-button {
    visibility: visible;
  }
}
/* Reading Slide */
.reading-slide-layout-wrapper {
  flex: 1;
  position: relative;
}
.reading-slide-layout {
  overflow: hidden;
}
.reading-slide-layout-scroller {
  padding: 2rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.reading-slide-layout-image {
  background: rgba(36, 114, 143, 0.46);
  background: linear-gradient(-325deg, rgba(36, 114, 143, 0.46), rgba(34, 152, 147, 0.55));
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  will-change: transform;
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
.reading-slide-layout-image--obscured {
  -webkit-filter: blur(4px) brightness(0.25);
          filter: blur(4px) brightness(0.25);
}
.reading-slide-layout-image--extra-obscured {
  -webkit-filter: blur(20px) brightness(0.25);
          filter: blur(20px) brightness(0.25);
}
.reading-slide-layout-image--dynamic {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 6%;
     object-position: center 6%;
  max-width: 72rem;
  margin-left: 50%;
  -webkit-transform: translateX(-50%) translateZ(0);
          transform: translateX(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
[data-is-embedded="true"] .reading-slide-layout-image--dynamic {
  max-width: 54rem;
}
.reading-slide-layout-image.loading {
  background-color: rgba(36, 114, 143, 0.46);
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
@media only screen and (min-width: 768px) {
}
.reading-slide-layout-header-title {
  position: -webkit-sticky;
  position: sticky;
  top: 0.57142857rem;
  padding-right: 4rem;
}
.reading-slide-bottom-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 56%, rgba(0, 0, 0, 0.9) 100%);
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  /* IE6-9 */
}
.reading-slide-layout-content {
  margin: 8rem auto;
  width: 100%;
  font-size: 1.6rem;
  max-width: 35em;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  opacity: 1;
}
.reading-slide-layout-content--with-image {
  margin: 2rem auto;
  display: block;
}
.reading-slide-layout-content--character {
  margin: 2rem auto;
  width: 100%;
  font-size: 1.6rem;
  max-width: 35em;
  opacity: 1;
}
.reading-slide-layout-content--pushdown {
  margin-top: 65vh;
}
@media only screen and (min-width: 768px) {
  .reading-slide-layout-content {
    font-size: 1.8em;
    max-width: 86rem;
    padding: 0 6rem;
  }
  .reading-slide-layout-content--character {
    font-size: 1.8em;
    max-width: 72rem;
    padding: 0 4rem;
  }
  .reading-slide-layout-content--pushdown {
    margin-top: 78vh;
  }
}
.reading-slide-layout-content-title-meta {
  font-size: 1.333rem;
  text-transform: uppercase;
  color: #d4d4d4;
}
.reading-slide-layout-content-title {
  font-size: 2rem;
  color: #e6e6e6;
  font-weight: normal;
  text-transform: uppercase;
}
.reading-slide-layout-content-duration {
  font-size: 1.6rem;
  color: #4caf50;
}
.reading-slide-layout-content-text-item {
  display: block;
  color: #e6e6e6;
  font-size: inherit;
  line-height: 1.55em;
  white-space: break-spaces;
}
.reading-slide-layout-content-text-item--pre {
  white-space: pre-line;
}
.reading-slide-layout-content-text-item--list {
  padding-left: 4rem;
}
.reading-slide-layout-content-text-item--list-item {
  display: list-item;
}
.reading-slide-layout-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.reading-slide-layout-info-grid-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 2rem 0 0;
  box-sizing: border-box;
}
.reading-slide-layout-info-grid-item:first-child {
  padding-left: 0;
}
.reading-slide-layout-info-grid-item-label {
  font-size: 1.2rem;
  color: #b3b3b3;
}
.reading-slide-layout-info-grid-item-data {
  font-size: 1.6rem;
  color: #e6e6e6;
  margin-top: 0.57142857rem;
  text-transform: capitalize;
}
.reading-slide-layout-content-text-item > a {
  color: var(--primary-button-bg);
  text-decoration: none;
}
.reading-slide-layout-content-text-item--character {
  text-transform: uppercase;
  padding-left: 37%;
}
.reading-slide-layout-content-text-item--parenthetical {
  margin-left: 30%;
  margin-right: 30%;
  position: relative;
  margin-top: 0;
}
.reading-slide-layout-content-text-item--parenthetical::before {
  content: "(";
  display: inline-block;
}
.reading-slide-layout-content-text-item--parenthetical::after {
  content: ")";
  position: absolute;
  bottom: 0;
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}
.reading-slide-layout-content-text-item--dialogue {
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 0;
}
.reading-slide-layout-content-text-item--transition {
  margin-top: 2rem;
  text-align: right;
  text-transform: uppercase;
}
.reading-slide-layout-content-text-item--heading {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0.4em;
}
.reading-slide-layout-content-text-item--indented {
  text-indent: 1.8em;
}
.reading-slide-layout-content-text-item--list::before {
  content: "\2022";
  position: absolute;
  -webkit-transform: translateX(-14px);
          transform: translateX(-14px);
}
.reading-slide-layout-content-text-item--numbered {
  padding-left: 4rem;
}
.reading-slide-layout-content-text-item--numbered:first-child,
.reading-slide-layout-content-text-item:not(.reading-slide-layout-content-text-item--numbered) + .reading-slide-layout-content-text-item--numbered {
  counter-reset: list-counter;
}
.reading-slide-layout-content-text-item--numbered::before {
  counter-increment: list-counter;
  content: counter(list-counter) ".";
  position: absolute;
  text-align: right;
  -webkit-transform: translateX(calc(-100% - 0.4rem));
          transform: translateX(calc(-100% - 0.4rem));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.reading-slide-scroll-gradient {
  display: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(4rem * 2);
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}
.scroll-overflow .reading-slide-scroll-gradient {
  display: block;
}
@media only screen and (min-width: 768px) {
  .reading-slide-scroll-gradient {
    width: calc(100% - 10px);
  }
}
/* Slideshow Filters */
[data-slideshow-filter]:not([data-slideshow-filter=""]) .slideshow-filter-button {
  opacity: 1;
}
[data-slideshow-filter]:not([data-slideshow-filter=""]) .slideshow-filter-button > svg {
  fill: #ff5d52;
}
/* Character Menu Thumbnails */
[data-slideshow-filter~="characters_media"] .slideshow-menu-scroller-character-thumbnail-wrapper,
[data-slideshow-presentation-filter~="characters_media"] .slideshow-menu-scroller-character-thumbnail-wrapper {
  padding-top: 0;
}
[data-slideshow-filter~="characters_media"] .reading-slide-layout-content--pushdown,
[data-slideshow-presentation-filter~="characters_media"] .reading-slide-layout-content--pushdown {
  margin-top: 10rem;
}
/*//////////////////////////////*/
/* STORY VIEWER CONTENT DISPLAY */
/*//////////////////////////////*/
/* Emotive */
.emotive-h1 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  color: #f7f7f7;
  max-width: 35em;
  word-break: break-word;
}
.emotive-h1--larger {
  font-size: 4.8rem;
}
.emotive-h2 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2.4rem;
  color: #f7f7f7;
  max-width: 35em;
}
.emotive-h3 {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: #f7f7f7;
  max-width: 35em;
}
.emotive-h4 {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: #e6e6e6;
  max-width: 35em;
}
.emotive-p {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  font-weight: 300;
  line-height: 1.6em;
  color: #f7f7f7;
  max-width: 35em;
  white-space: pre-line;
  word-break: break-word;
  max-inline-size: -webkit-fit-content;
  max-inline-size: -moz-fit-content;
  max-inline-size: fit-content;
  -webkit-writing-mode: lr;
          writing-mode: lr;
}
.emotive-links-holder {
  opacity: 0.8;
}
.emotive-link {
  position: relative;
  display: block;
  font-family: "Open Sans", helvetica, sans-serif;
  text-decoration: none;
  font-size: 1.333rem;
  font-weight: 300;
  line-height: 1.6em;
  color: #f7f7f7;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  transition: all 200ms;
}
.emotive-link.bold {
  font-weight: bold;
}
.emotive-link.underline {
  text-decoration: underline;
}
.emotive-link[target="_blank"]::after {
  content: url(/web-app/img/external_link.svg);
  vertical-align: middle;
  margin-left: 0.1em;
  opacity: 0.7;
}
.emotive-link.youtube::after,
.emotive-link.vimeo::after {
  content: url(/web-app/img/video_link.svg);
}
pre.emotive-p > .emotive-link {
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .emotive-link:hover {
    text-decoration: underline;
    color: var(--text-color-primary);
  }
  .emotive-link:hover::after {
    opacity: 1;
  }
}
.emotive-p--larger {
  font-size: 2rem;
  font-weight: 400;
}
.emotive-meta {
  display: block;
  font-weight: 300;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #a3a3a3;
  max-width: 35em;
}
.emotive-empty-state-title {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #737373;
}
.emotive-empty-state-description {
  font-size: 1.6rem;
  color: #737373;
}
.emotive-tag {
  display: inline-block;
  font-size: 1.2rem;
  padding: 0.8em 1.4em;
  background: rgba(0, 0, 0, 0.3);
  border: thin solid rgba(255, 255, 255, 0.2);
  color: hsl(0, 0%, 80%);
  font-weight: bold;
  border-radius: 3rem;
}
.emotive-editable-item {
  position: relative;
  cursor: pointer;
}
.emotive-editable-item > * {
  position: relative;
}
.emotive-editable-item::before {
  content: "";
  opacity: 0;
  position: absolute;
  left: -1rem;
  top: -0.5rem;
  width: calc(100% + 2rem);
  height: calc(100% + 1rem);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  border: thin solid rgba(128, 128, 128, 0.4);
  transition: opacity 200ms;
  z-index: 0;
}
[data-can-edit="yes"] .emotive-editable-item::after {
  content: "";
  position: absolute;
  right: -2.25rem;
  top: -1.5rem;
  width: 2.8rem;
  background: #d4d4d4;
  height: 2.8rem;
  z-index: 1;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 50%;
  background-position: center;
  background-image: url(/web-app/img/dropdown_menu_icons/edit_details.svg);
  transition: opacity 200ms;
}
.emotive-editable-item:hover::before,
.emotive-editable-item:hover::after {
  opacity: 1;
}
/* Emotive Ghost Button */
/* Static */
.emotive-ghost-button {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  color: #d4d4d4;
  fill: #e6e6e6;
  transition: all 200ms;
}
.emotive-ghost-button-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: thin solid #262626;
  border-radius: 50%;
  transition: inherit;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
}
.emotive-ghost-button--medium .emotive-ghost-button-icon-wrapper {
  width: 6rem;
  height: 6rem;
}
.emotive-ghost-button--small .emotive-ghost-button-icon-wrapper {
  width: 4rem;
  height: 4rem;
}
.emotive-ghost-button--add-icon .emotive-ghost-button-icon-wrapper {
  border-style: dashed;
}
.emotive-ghost-button--add-icon .emotive-ghost-button-icon-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5%;
  min-width: 3px;
  max-width: 6px;
  height: 40%;
  background: currentColor;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.emotive-ghost-button--add-icon .emotive-ghost-button-icon-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 5%;
  min-height: 3px;
  max-height: 6px;
  width: 40%;
  background: currentColor;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.emotive-ghost-button-label {
  font-size: 1.2rem;
  margin-top: 1em;
  color: currentColor;
  transition: inherit;
}
/* Hover */
.emotive-ghost-button:hover .emotive-ghost-button-icon-wrapper {
  background: rgba(44, 52, 61, 0.6);
  fill: #fff;
  color: #fff;
}
.emotive-ghost-button:hover .emotive-ghost-button-label {
  color: #fff;
}
/* Disabled */
.emotive-ghost-button:disabled {
  pointer-events: none;
  opacity: 0.4;
}
/* Emotive Admin Button */
.emotive-ghost-text-button {
  font-size: 1.333rem;
  display: flex;
  align-items: center;
  color: #d4d4d4;
  padding: 0.57em 1.05em 0.44em;
  line-height: 1.4em;
  border: thin solid #737373;
  border-radius: 0.3em;
  text-decoration: none;
  transition: all 200ms;
}
.emotive-ghost-text-button--small {
  font-size: 1.2rem;
}
.emotive-ghost-text-button:hover {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.emotive-ghost-text-button-icon {
  fill: currentColor;
  margin-right: 0.8em;
}
.emotive-ghost-text-button-icon--link {
  fill: currentColor;
  margin-left: 0.8em;
}
.emotive-ghost-text-button--opaque {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(255, 255, 255, 0.4);
  color: #d4d4d4;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .emotive-ghost-text-button--opaque:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f7f7f7;
    border-color: rgba(255, 255, 255, 0.85);
  }
  .emotive-ghost-text-button--opaque:hover .emotive-ghost-text-button-icon {
    fill: currentColor;
  }
}
/* Emotive OR Dividers */
.emotive-or-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 29rem;
}
.emotive-or-divider--vertical {
  flex-direction: column;
  height: 100%;
  max-height: 25rem;
}
.emotive-or-divider-line {
  width: 1px;
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.4);
}
.emotive-or-divider-text-holder {
  width: 3.6rem;
  position: relative;
  height: 3.6rem;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  color: var(--surface-color-2-divider-color);
  justify-content: center;
  border: thin solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
}
/* Emotive Toggle */
.emotive-show-more-less-toggle-checkbox {
  display: none;
  position: absolute;
  bottom: 12px;
  z-index: 9999999999999;
}
.emotive-show-more-less-toggle-label {
  text-align: center;
  color: #f7f7f7;
  font-size: 1.333rem;
  padding: 1rem 2rem;
  opacity: 0.6;
  cursor: pointer;
  background: transparent;
  border-radius: 0.57142857rem;
}
.emotive-show-more-less-toggle-label:hover {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.3);
}
.emotive-show-more-less-toggle-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 2px solid var(--text-color-muted);
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 2px;
  margin-right: 1rem;
  -webkit-transform: translateY(-3px) rotate(45deg);
          transform: translateY(-3px) rotate(45deg);
}
.emotive-show-more-less-toggle-checkbox:checked ~ .emotive-show-more-less-toggle-label::before {
  -webkit-transform: translateY(3px) rotate(225deg);
          transform: translateY(3px) rotate(225deg);
}
.emotive-show-more-less-toggle-label::after {
  content: "Show " attr(data-more-count) " More";
}
.emotive-show-more-less-toggle-checkbox:checked ~ .emotive-show-more-less-toggle-label::after {
  content: "Show Less";
}
/* Emotive Close Button */
.emotive-close-button {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  opacity: 0.6;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  transition: all 200ms;
}
.emotive-close-button:hover {
  opacity: 1;
}
.emotive-close-button-icon-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5%;
  min-width: 3px;
  max-width: 6px;
  height: 60%;
  background: #e6e6e6;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.emotive-close-button-icon-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 5%;
  min-height: 3px;
  max-height: 6px;
  width: 60%;
  background: #e6e6e6;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
/* Emotive Icon Button */
/* Static */
.emotive-icon-button {
  display: flex;
  flex-shrink: 0;
  opacity: 0.5;
  width: 4rem;
  height: 4rem;
  transition: all 200ms;
}
.emotive-icon-button--round {
  border-radius: 50%;
}
.emotive-icon-button--auto-width {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.professional-dropdown-selected-item.emotive-icon-button {
  opacity: 0.8;
}
.emotive-icon-button--smaller {
  width: 3.4rem;
  height: 3.4rem;
}
.emotive-icon-button--extra-small {
  width: 3rem;
  height: 3rem;
}
.emotive-icon-button--super-small {
  width: 2.2rem;
  height: 2.2rem;
}
.emotive-icon-button--opaque {
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.8;
}
.emotive-icon-button-icon {
  width: 100%;
  height: 100%;
  fill: #e6e6e6;
  cursor: pointer;
}
.emotive-icon-button-icon--exit-fullscreen {
  display: none;
}
.is-fullscreen .emotive-icon-button-icon--exit-fullscreen {
  display: block;
}
.is-fullscreen .emotive-icon-button-icon--enter-fullscreen {
  display: none;
}
.professional-dropdown-selected-item .emotive-icon-button-icon {
  fill: #4ec6fd;
}
/* Static Selected */
.emotive-icon-button.selected {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
.emotive-icon-button.selected .emotive-icon-button-icon {
  fill: #4ec6fd;
}
/* Static Danger */
.emotive-icon-button--danger {
  background: #d32f2f;
}
@media only screen and (min-width: 768px) {
  /* Hover */
  .emotive-icon-button:hover {
    opacity: 1;
  }
}
/* Disabled */
.emotive-icon-button:disabled {
  opacity: 0.3;
  pointer-events: none;
}
/* Emotive Header Button */
.emotive-header-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: #d4d4d4;
  color: #d4d4d4;
  background: transparent;
  min-width: 70px;
  padding: 1rem 2rem;
  cursor: pointer;
}
.emotive-header-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--primary-button-bg);
}
.emotive-header-button.selected {
  color: #4ec6fd;
  fill: #4ec6fd;
  pointer-events: none;
}
.emotive-header-button.selected::after {
  height: 0.2rem;
}
.emotive-header-button:hover {
  background: rgba(0, 0, 0, 0.05);
}
.emotive-header-button-icon {
  transition: all 200ms;
}
.emotive-header-button-text {
  font-size: 1.333rem;
  color: inherit;
  margin-left: 1rem;
  transition: all 200ms;
}
.emotive-header-button:hover .emotive-header-button-icon,
.emotive-header-button:hover .emotive-header-button-text {
  color: #f7f7f7;
  fill: #f7f7f7;
}
.emotive-header-button.selected .emotive-header-button-icon,
.emotive-header-button.selected .emotive-header-button-text {
  color: #4ec6fd;
  fill: #4ec6fd;
}
/* Emotive Toggle */
.emotive-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.emotive-toggle.is-toggling {
  pointer-events: none;
}
.emotive-toggle-spinner-holder {
  width: 26px;
  position: relative;
  height: 14px;
  display: none;
}
.emotive-toggle-spinner {
  position: absolute;
  width: 26px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.5;
}
.emotive-toggle-track {
  width: 26px;
  height: 16px;
  border-radius: 20px;
  background: #43a047;
  position: relative;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.13);
  transition: all 100ms;
}
.toggle-off .emotive-toggle-track {
  background: #525252;
}
.emotive-toggle-knob {
  width: 12px;
  height: 12px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 12px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 100ms;
}
.toggle-off .emotive-toggle-knob {
  left: 2px;
  background: #fff;
}
.emotive-toggle-message {
  font-size: 1.333rem;
  margin-left: 8px;
  display: none;
  transition: color 200ms;
}
@media only screen and (min-width: 768px) {
  .emotive-toggle:hover .emotive-toggle-message {
    color: #fff;
  }
}
.emotive-toggle-message--small {
  font-size: 1.2rem;
  font-weight: bold;
}
.toggle-off .emotive-toggle-message {
  color: #a3a3a3;
}
.toggle-on .emotive-toggle-message {
  color: #d4d4d4;
}
.toggle-off .emotive-toggle-message--lighter {
  color: #d4d4d4;
}
.toggle-on .emotive-toggle-message--lighter {
  color: #e6e6e6;
}
.toggle-on .emotive-toggle-message--primary {
  color: #03a9f4;
}
.toggle-off .emotive-toggle-message--off {
  display: block;
}
.toggle-on .emotive-toggle-message--on {
  display: block;
}
.is-toggling .emotive-toggle-track {
  display: none;
}
.is-toggling .emotive-toggle-spinner-holder {
  display: block;
}
/* Emotive Slideshow Progress */
.emotive-slideshow-progress {
  display: flex;
  justify-content: center;
  align-items: center;
}
.emotive-slideshow-progress-button {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
  outline: none;
}
.emotive-slideshow-progress-button:only-child {
  display: none;
}
.emotive-slideshow-progress-button.selected {
  pointer-events: none;
}
.emotive-slideshow-progress-button::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: #a3a3a3;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 100ms;
}
.emotive-slideshow-progress-button.selected::after {
  background: #4ec6fd;
}
.emotive-slideshow-progress-button:hover::after {
  background: #f7f7f7;
  width: 70%;
  height: 70%;
}
/* Emotive Avatar */
.emotive-avatar {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
  width: 9rem;
  height: 9rem;
  background: #525252;
  text-indent: -999999999px;
}
.emotive-avatar--medium {
  width: 6rem;
  height: 6rem;
}
.emotive-avatar--small {
  width: 4rem;
  height: 4rem;
}
.emotive-avatar--round {
  border-radius: 50%;
}
.emotive-avatar--image-tooltip::before {
  content: "";
  background-image: var(--background-image);
  background-size: cover;
  background-position: center center;
  width: 7rem;
  position: absolute;
  height: 7rem;
  border-radius: 50%;
}
/* Emotive Card */
.emotive-card {
  position: relative;
  background: var(--text-color-tertiary);
  overflow: hidden;
  border-radius: 1rem;
  flex: 1;
}
.emotive-card-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  text-indent: -999999999px;
}
.emotive-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
}
.emotive-card-content-wrapper {
  padding: 1.3rem 1.6rem 1.6rem;
  background: rgba(25, 25, 25, 0.66);
}
.emotive-card-content-title {
  display: block;
  color: #4caf50;
  font-size: 1.333rem;
  margin-top: 0.2rem;
  text-transform: uppercase;
}
/* stylelint-disable */
.emotive-card-content-description {
  display: -webkit-box;
  font-size: 1.2rem;
  margin-top: 0.2rem;
  color: var(--text-color-muted);
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow: hidden;
  -webkit-line-clamp: 3;
}
/* stylelint-enable */
.emotive-card-content-meta {
  display: block;
  font-weight: 300;
  font-size: 0.933rem;
  text-transform: uppercase;
  color: #d32f2f;
}
/* Emotive Thumbnail */
.emotive-thumbnail {
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  overflow: hidden;
  flex: 1;
}
.emotive-thumbnail--clickable {
  cursor: pointer;
  transition: all 200ms;
}
.emotive-thumbnail-actions {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.emotive-thumbnail:hover .emotive-thumbnail-actions {
  pointer-events: all;
  opacity: 1;
}
.emotive-thumbnail-image-wrapper {
  position: relative;
  min-height: 200px;
  flex: 1;
  border-radius: 1rem;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.15);
}
[data-scene-image-orientation="square"] .emotive-thumbnail-image-wrapper {
  min-height: unset;
}
.emotive-thumbnail-image-wrapper--tall {
  position: relative;
  flex: 1;
  border-radius: 0.57142857rem;
  overflow: hidden;
  padding-top: 145%;
}
.emotive-thumbnail-image {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  width: calc(100% + 0.4rem);
  height: calc(100% + 0.4rem);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1rem;
  overflow: hidden;
  pointer-events: none;
  text-indent: -99999999px;
  background-image: var(--emotive-scene-image-placeholder);
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
}
.emotive-thumbnail-image.loaded-error {
  background-color: rgba(24, 28, 32, 0.9);
  border: thin solid #2a2a2a;
}
.emotive-thumbnail-image.loading {
  background-color: rgba(36, 114, 143, 0.46);
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
.emotive-thumbnail--clickable .emotive-thumbnail-image {
  -webkit-transform: scale(1.0001);
          transform: scale(1.0001);
  transition: all 400ms;
}
.emotive-thumbnail-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
}
.emotive-thumbnail-content-wrapper {
  padding: 1rem 0.2rem 1.6rem;
}
/* stylelint-disable */
.emotive-thumbnail-content-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #f7f7f7;
  font-size: 1.333rem;
  margin-top: 0.2rem;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
/* stylelint-enable */
/* stylelint-disable */
.emotive-thumbnail-content-description {
  display: -webkit-box;
  font-size: 1.2rem;
  margin-top: 0.2rem;
  color: #d4d4d4;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow: hidden;
  -webkit-line-clamp: 3;
}
/* stylelint-enable */
.emotive-thumbnail-content-meta {
  display: block;
  font-weight: 300;
  font-size: 0.933rem;
  text-transform: uppercase;
  color: #d4d4d4;
}
/* Emotive Snap Scroll */
.emotive-snap-scroll {
  display: flex;
  overflow-x: scroll;
  padding: 2rem 4rem 0;
  scroll-padding: 0 50%;
  scroll-snap-type: x mandatory;
}
.emotive-snap-scroll-item {
  scroll-snap-align: center;
  display: inline-flex;
  flex: 1 0 90%;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  padding-right: 4rem;
  box-sizing: content-box;
}
/* Reading Slide Header */
.reading-slide-header {
  position: relative;
}
.emotive-lighter {
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
}
.emotive-overlay--subtle-radial-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3;
  background: rgba(0, 0, 0, 0.4) radial-gradient(ellipse at center, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.83) 99%, rgba(0, 0, 0, 0.84) 100%);
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#1c000000', endColorstr='#d6000000', GradientType=1);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#1c000000', endColorstr='#d6000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.emotive-overlay--subtle-bottom-linear-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 60%;
  bottom: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0) 90%);
}
.emotive-overlay--subtle-top-linear-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 40%;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 90%);
}
.emotive-overlay--subtle-linear-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0) 100%);
}
.emotive-overlay--super-subtle-linear-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.emotive-overlay--subtle-linear-dark-dip::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 49%, rgb(0 0 0) 100%);
}
.emotive-overlay--strong-radial-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 80%, #000000 100%);
  -webkit-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#1c000000', endColorstr='#d6000000', GradientType=1);
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#1c000000', endColorstr='#d6000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.emotive-overlay--subtle-solid-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.4);
}
.emotive-overlay--strong-solid-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.8);
}
.emotive-overlay--solid-dark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(0, 0, 0, 0.8);
}
.emotive-overlay--subtle-solid-dark-gray::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgba(39, 39, 39, 0.6);
}
/* Emotive Scrollbar */
.emotive-scroller::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: absolute;
}
.emotive-scroller::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #292c30;
  margin: 1px;
}
.emotive-scroller::-webkit-scrollbar-track:vertical {
  border: thin solid #222;
  border-right: transparent;
  border-bottom: transparent;
  border-radius: 0;
  background: #161719;
}
.emotive-scroller::-webkit-scrollbar-track:horizontal {
  border: thin solid #222;
  border-bottom: transparent;
  border-left: transparent;
  border-radius: 0;
  margin-left: 200px;
}
.emotive-scroller::-webkit-scrollbar-thumb:hover {
  border-radius: 0;
  background: #5f5f5f;
  margin: 1px;
}
.emotive-choose-structure-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.6rem;
  overflow: hidden;
  min-height: 11rem;
  padding: 3rem 2rem;
  height: 100%;
  cursor: pointer;
  transition: all 200ms;
}
.emotive-choose-structure-item.selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .emotive-choose-structure-item:not(.selected) {
    opacity: 0.6;
  }
  .emotive-choose-structure-item:not(.selected):hover {
    opacity: 1;
  }
}
.emotive-choose-structure-item-thumbnail {
  -webkit-filter: brightness(0.55);
          filter: brightness(0.55);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom right;
     object-position: bottom right;
}
.emotive-choose-structure-item-overlay {
  opacity: 0.2;
}
.emotive-choose-structure-item-title {
  color: #fff;
  font-family: "Open Sans", helvetica, sans-serif;
  font-weight: bold;
  font-size: 2rem;
  text-shadow: 0 5px 12px rgb(0 0 0%);
}
.emotive-choose-structure-item-learn-more {
  font-size: 1.3rem;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  background: transparent;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .emotive-choose-structure-item-learn-more {
    opacity: 0;
    margin-top: -2rem;
  }
  .emotive-choose-structure-item:hover .emotive-choose-structure-item-learn-more {
    margin-top: 0.2em;
    opacity: 0.8;
  }
  .emotive-choose-structure-item:hover .emotive-choose-structure-item-learn-more:hover {
    opacity: 1;
  }
}
.emotive-choose-structure-item-learn-more-arrow {
  display: inline-block;
  margin-left: 0.2em;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.emotive-choose-structure-item:hover .emotive-choose-structure-item-learn-more:hover .emotive-choose-structure-item-learn-more-arrow {
  -webkit-transform: translateX(0.4em);
          transform: translateX(0.4em);
}
.emotive-choose-structure-item-check {
  position: absolute;
  fill: #fff;
  width: 2.6rem;
  height: 2.6rem;
  right: 0.4rem;
  top: 0.7rem;
  opacity: 0;
  transition: opacity 200ms;
}
.selected .emotive-choose-structure-item-check {
  opacity: 1;
}
.emotive-structure-info-card-scroller {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  background-color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
  .emotive-structure-info-card-scroller {
    border-radius: 1rem;
    margin: 3rem;
  }
}
.emotive-structure-info-card {
  color: var(--text-color-primary);
  font-size: 1.333rem;
  padding: 3rem 3rem 3rem;
}
.emotive-structure-info-card-utility-menu {
  position: -webkit-sticky;
  position: sticky;
  top: 3rem;
}
.emotive-utility-menu-button {
  fill: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  font-size: 1.333rem;
  padding: 0.4em 0.8em;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.4em;
  cursor: pointer;
}
.emotive-utility-menu-button-icon {
  height: 1.6em;
  width: 1.6em;
}
.emotive-utility-menu-button.selected {
  color: #ffffff;
}
.emotive-utility-menu-button--icon-left .emotive-utility-menu-button-icon {
  margin-left: -0.2em;
}
.emotive-utility-menu-button.selected .emotive-utility-menu-button-icon {
  fill: #ffffff;
}
.emotive-utility-menu-button--round {
  padding: 0.4em;
  justify-content: center;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .emotive-utility-menu-button {
    transition: color 200ms;
  }
  .emotive-utility-menu-button:hover {
    color: #ffffff;
  }
  .emotive-utility-menu-button-icon {
    transition: fill 200ms;
  }
  .emotive-utility-menu-button:hover .emotive-utility-menu-button-icon {
    fill: #ffffff;
  }
}
.emotive-structure-info-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
  background: var(--background-color, black);
}
.emotive-structure-info-card-title {
  font-size: 3.2rem;
  font-family: "Work Sans", "Open Sans", sans-serif;
}
.emotive-structure-info-card-description {
  font-size: 1.333rem;
  line-height: 1.5em;
}
.emotive-structure-info-card-acts-holder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 3rem;
}
.emotive-structure-info-card-act-title {
  font-size: 2rem;
  display: flex;
}
.emotive-structure-info-card-act-title::before {
  content: attr(data-act-number);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 0.7em;
  height: 0.8em;
  text-align: center;
  font-size: 0.6em;
  margin-top: 0.3em;
  padding: 0.4em;
  font-weight: bold;
  border-radius: 50%;
  background-color: var(--act-color);
}
.emotive-structure-info-card-act-description {
  line-height: 1.6em;
}
.pensive-gauge {
  position: relative;
  width: 3rem;
  height: 3rem;
}
.pensive-gauge-bkg {
  stroke: var(--chart-color-bkg);
}
.pensive-gauge-fill {
  position: absolute;
  stroke: var(--chart-color);
  left: 0;
  top: 0;
}
.pensive-gauge-start-line-holder {
  position: absolute;
  width: 100%;
  padding-top: 100%;
  left: 0;
  top: 0;
}
.pensive-gauge-start-line {
  width: 2%;
  min-width: 1px;
  position: absolute;
  background: var(--surface-color-3-divider-color);
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.page-scene-featured-image-holder {
  position: relative;
  overflow: hidden;
  border-radius: 0.3rem;
  padding-top: 54%;
  background: var(--image-bg-color);
}
.cards-module__scene-card__content:hover .page-scene-featured-image-holder,
.page-module__page-scene:hover .page-scene-featured-image-holder {
  background: var(--image-bg-color-hover);
}
/* Connections */
.pensive-connection-wrapper {
  margin-top: 0.6rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.pensive-scene-card .pensive-connection-wrapper {
  width: unset;
}
.pensive-connection-wrapper:first-child {
  margin-top: 0;
}
.connection-jump {
  -webkit-animation: connection-jump 400ms forwards cubic-bezier(0.84, -0.54, 0.31, 1.19);
          animation: connection-jump 400ms forwards cubic-bezier(0.84, -0.54, 0.31, 1.19);
}
.pensive-connection {
  position: relative;
  display: inline-flex;
  color: var(--text-color-primary);
  font-size: 1.2rem;
}
.pensive-scene-card .pensive-connection {
  display: flex;
}
.pensive-connection-content {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  overflow: hidden;
}
.page-scene-connection-title {
  position: relative;
  padding: 0.4rem 0.8rem 0;
  color: var(--text-color-primary);
  opacity: 0.6;
}
.pensive-connection-content-text {
  display: block;
  padding: 0 0.8rem 0.6rem;
  opacity: 0.9;
}
.pensive-connection-content-text:only-child {
  padding-top: 0.4rem;
}
.pensive-connection-content-button {
  min-width: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  cursor: pointer;
}
.pensive-connection-content-button--previous {
  border-right: thin solid rgba(0, 0, 0, 0.05);
}
.pensive-connection-content-button--next {
  border-left: thin solid rgba(0, 0, 0, 0.05);
}
.pensive-connection-content-button-icon {
  pointer-events: none;
  height: 1.4rem;
  width: 1.4rem;
  fill: var(--text-color-primary);
  opacity: 0.5;
  transition: fill 100ms;
}
.pensive-connection-content-button-icon--previous {
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media only screen and (min-width: 768px) {
  .pensive-connection-content-button:hover .pensive-connection-content-button-icon {
    opacity: 0.8;
  }
}
.pensive-connection-bkg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.3rem;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2) var(--connection-color-dilution));
}
.pensive-connections-summary-icon {
  border: thin solid transparent;
  background: transparent;
  border-radius: 0.6rem;
  padding: 0.4rem;
  width: 4rem;
  display: none;
}
.showing-connections .pensive-connections-summary-icon,
.pensive-connections-summary:hover .pensive-connections-summary-icon {
  background: var(--surface-color-3-hover);
  border: thin solid var(--surface-color-3-divider-color);
}
#card_footer .pensive-connections-summary-icon {
  display: block;
}
.pensive-connections-summary-tooltip {
  padding-bottom: 1rem;
}
#card_footer .pensive-connections-summary-tooltip {
  position: absolute;
  background: var(--dragging-item-bg);
  border: thin solid var(--surface-color-3-divider-color);
  padding: 1rem;
  box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
  bottom: calc(100% + 5px);
  left: 50%;
  z-index: 9999999999;
  border-radius: 0.6rem;
  pointer-events: none;
  width: 100vw;
  max-width: 32rem;
  -webkit-transform: translate(-50%, 1rem);
          transform: translate(-50%, 1rem);
  opacity: 0;
  cursor: default;
  transition: opacity 200ms, -webkit-transform 200ms;
  transition: opacity 200ms, transform 200ms;
  transition: opacity 200ms, transform 200ms, -webkit-transform 200ms;
}
#card_footer .pensive-connections-summary-tooltip::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3rem;
  left: 0;
  top: 100%;
}
.showing-connections #card_footer .pensive-connections-summary-tooltip,
#card_footer .pensive-connections-summary:hover .pensive-connections-summary-tooltip {
  opacity: 1;
  -webkit-transform: translate(calc(-50% + var(--offset)), 0);
          transform: translate(calc(-50% + var(--offset)), 0);
  pointer-events: all;
}
.scene-card__scene-connections-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 30px;
}
.scene-card__scene-connections-holder__connection {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 1px;
}
.scene-card__scene-connections-holder__connection__current {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2) var(--chart-color-dilution));
}
.scene-card__scene-connections-holder__connection__current.hasPrevious {
  border-radius: 0 2px 2px 0;
}
.scene-card__scene-connections-holder__connection__current.hasNext {
  border-radius: 2px 0 0 2px;
}
.scene-card__scene-connections-holder__connection__current.hasPrevious.hasNext {
  border-radius: 0;
}
.scene-card__scene-connections-holder__connection__current::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  background-color: rgba(0, 0, 0, 0.4);
}
.scene-card__scene-connections-holder__connection__prev {
  visibility: hidden;
  width: 10px;
  height: 6px;
  border-radius: 3px 0 0 3px;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2) var(--chart-color-dilution));
}
.scene-card__scene-connections-holder__connection__prev.hasPrevious {
  visibility: visible;
}
.scene-card__scene-connections-holder__connection__next {
  visibility: hidden;
  width: 10px;
  height: 6px;
  border-radius: 0 3px 3px 0;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2) var(--chart-color-dilution));
}
.scene-card__scene-connections-holder__connection__next.hasNext {
  visibility: visible;
}
/* Pensive Styles */
.subtle-icon-button {
  color: var(--text-color-muted);
  width: 2.4rem;
  height: 2.4rem;
  transition: all 100ms;
}
@media only screen and (min-width: 768px) {
  .subtle-icon-button:hover {
    color: #b3b3b3;
  }
}
.subtle-icon-button-icon {
  width: 100%;
  height: 100%;
  transition: all 100ms;
}
.professional-dropdown-selected-item.subtle-icon-button {
  color: var(--primary-button-bg);
}
.pensive-modal-section-wrapper:first-child .pensive-modal-section-header {
  border-top: none;
}
@media only screen and (min-width: 768px) {
  .full-screen-modal .pensive-modal-header--resizable {
    border-radius: 0;
  }
}
.pensive-modal-header-button {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  color: inherit;
  padding: 0 1.6rem;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: #d32f2f;
  background-color: inherit;
  transition: fill 200ms;
}
.pensive-modal-header-button:disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-header-button:hover {
    fill: var(--surface-color-0);
  }
}
.pensive-modal-header-button.professional-dropdown-selected-item {
  fill: var(--primary-button-bg);
}
[data-stories_edit_modal-filter]:not([data-stories_edit_modal-filter=""]) .pensive-modal-header-button--stories-filter > svg,
[data-scenes_edit_modal-filter]:not([data-scenes_edit_modal-filter=""]) .pensive-modal-header-button--scenes-filter > svg,
[data-characters_edit_modal-filter]:not([data-characters_edit_modal-filter=""]) .pensive-modal-header-button--characters-filter > svg {
  fill: #ff5d52;
}
@media only screen and (min-width: 768px) {
  [data-stories_edit_modal-filter]:not([data-stories_edit_modal-filter=""]) .pensive-modal-header-button--filter:hover > svg,
  [data-scenes_edit_modal-filter]:not([data-scenes_edit_modal-filter=""]) .pensive-modal-header-button--filter:hover > svg,
  [data-characters_edit_modal-filter]:not([data-characters_edit_modal-filter=""]) .pensive-modal-header-button--filter:hover > svg {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.pensive-modal-header-marker-icon:not(:only-child) {
  margin-right: 0.7rem;
}
/* Pensive Modal Media Section */
.pensive-modal-media-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (min-width: 768px) {
  .pensive-modal-media-list {
    grid-template-columns: repeat(7, 1fr);
  }
}
[data-can-edit="no"] .pensive-modal-media-list {
  pointer-events: all;
}
.pensive-modal-media-list-item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-top: 100%;
  position: relative;
  opacity: 0.9;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: opacity 200ms;
}
.pensive-modal-media-list-item:hover {
  opacity: 1;
}
.pensive-modal-media-list-item.selected {
  opacity: 1;
  box-shadow: 0 0 0 1px #fff, 0 0 3px 4px #00a9f4;
}
.pensive-modal-media-list-item-wrapper {
  z-index: 999999999;
  border-radius: 0.6rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0);
}
.pensive-modal-media-list-item-wrapper.dragging {
  position: absolute;
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.dragging .pensive-modal-media-list-item {
  width: 100%;
  z-index: 99999999999;
}
.pensive-modal-media-list-item-wrapper.clone {
  background: var(--surface-color-1);
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.2);
  border: thin solid var(--draggable-item-drop-zone-border-color);
}
.showing-media-preview .pensive-modal-media-list-item:not(.selected) {
  opacity: 0.3;
}
.showing-media-preview .pensive-modal-media-list-item:not(.selected):hover {
  opacity: 1;
}
.pensive-modal-media-list-item-image {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.6rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.clone .pensive-modal-media-list-item-image {
  opacity: 0;
}
.pensive-modal-media-list-item-image-primary-tag-button {
  position: absolute;
  z-index: 999;
  top: 0.4rem;
  right: 0.4rem;
  width: 30%;
  max-width: 1.6rem;
  opacity: 0;
  transition: opacity 100ms;
}
[data-can-edit="no"] .pensive-modal-media-list-item-image-primary-tag-button {
  display: none;
}
.is-primary .pensive-modal-media-list-item-image-primary-tag-button,
.pensive-modal-media-list-item:hover .pensive-modal-media-list-item-image-primary-tag-button {
  opacity: 0.8;
}
.pensive-modal-media-list-item-image-primary-tag-button-icon {
  width: 100%;
  fill: rgba(255, 255, 255, 0.6);
  stroke-width: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.is-primary .pensive-modal-media-list-item-image-primary-tag-button-icon {
  fill: var(--primary-button-bg);
}
.pensive-modal-media-preview-image-wrapper {
  position: relative;
  padding-top: 0;
  opacity: 0;
  background: #000;
  margin-bottom: 0;
  border-radius: 0.8rem;
  overflow: hidden;
  transition: margin-bottom 400ms, padding-top 400ms, opacity 400ms;
}
.showing-primary .pensive-modal-media-preview-image-wrapper::before {
  content: "Primary";
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.41);
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.933rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 999999;
  top: 1rem;
  left: 1rem;
}
.pensive-modal-media-preview-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  opacity: 0;
  transition: opacity 200ms;
  transition-delay: 200ms;
  text-indent: -9999999px;
}
.pensive-modal-media-list-item-image.loading,
.pensive-modal-media-preview-image.loading {
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
.showing-media-preview .pensive-modal-media-preview-image {
  opacity: 1;
}
.showing-media-preview .pensive-modal-media-preview-image-wrapper {
  padding-top: 36vh;
  margin-bottom: 2rem;
  opacity: 1;
}
.pensive-modal-media-preview-image-bkg {
  position: absolute;
  left: -15px;
  top: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.3;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  text-indent: -9999999px;
}
.pensive-modal-media-preview-actions {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3rem;
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 200ms;
  transition-delay: 200ms;
}
.showing-media-preview .pensive-modal-media-preview-actions {
  opacity: 1;
  pointer-events: all;
}
[data-can-edit="no"] .pensive-modal-media-preview-actions {
  display: none;
}
.showing-primary .modal-image-input-make-primary-button .emotive-icon-button-icon {
  fill: var(--primary-button-bg);
}
.pensive-modal-media-preview-slide-nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 99999;
}
[data-can-edit="no"] .pensive-modal-media-preview-slide-nav {
  pointer-events: all;
}
.pensive-modal-media-preview-slide-nav--prev {
  left: 1rem;
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.pensive-modal-media-preview-slide-nav--next {
  right: 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.pensive-modal-media-list-item:hover .pensive-modal-media-list-item-image-primary-tag-button:hover {
  opacity: 1;
}
.pensive-new-media-button {
  display: flex;
  position: relative;
  padding-top: 100%;
  width: 100%;
  background: var(--add-item-button-bg);
  border: thin dashed var(--add-item-button-border-color);
  color: var(--add-item-button-text-color);
  font-size: 2rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 100ms;
}
[data-can-edit="no"] .pensive-new-media-button-wrapper {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pensive-new-media-button:hover {
    background: var(--add-item-button-bg-hover);
    border-color: var(--add-item-button-border-color);
  }
}
.pensive-new-media-button::before {
  content: "";
  max-width: 0.3rem;
  width: 5%;
  max-height: 1.8rem;
  height: 24%;
  background: var(--add-item-button-text-color);
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-new-media-button::after {
  content: "";
  max-height: 0.3rem;
  height: 5%;
  max-width: 1.8rem;
  width: 24%;
  background: var(--add-item-button-text-color);
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-modal-links-list-holder {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pensive-modal-links-list-holder-empty-message {
  color: var(--text-color-muted);
  font-size: 1.6rem;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 2rem;
}
.pensive-modal-link-item {
  padding: 1rem 0 2rem;
  border-top: thin solid #f1f1f1;
}
.pensive-modal-link-item:first-child {
  border-top: none;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-link-item:hover .pensive-item-remove {
    pointer-events: all;
    opacity: 1;
    background-clip: padding-box;
  }
}
.icon-active {
  fill: var(--primary-text-color);
}
.pensive-icon-button {
  width: 6rem;
  height: 6rem;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: transparent;
  box-sizing: border-box;
  color: var(--text-color-secondary);
  fill: var(--icon-color-secondary);
  transition: all 200ms;
}
.pensive-icon-button--opaque {
  background: #fff;
}
.pensive-icon-button--round {
  border-radius: 50%;
}
.pensive-icon-button--bordered {
  border: thin solid #d1d1d1;
}
.pensive-icon-button--shadowed {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pensive-icon-button--small {
  width: 3.5rem;
  height: 3.5rem;
}
.pensive-icon-button--extra-small {
  width: 2.2rem;
  height: 2.2rem;
}
.pensive-icon-button--extra-extra-small {
  width: 2rem;
  height: 2rem;
}
.pensive-icon-button--danger {
  fill: #d32f2f;
}
.pensive-icon-button.professional-dropdown-selected-item {
  color: var(--primary-text-color);
  background: var(--surface-color-3-hover);
}
.pensive-icon-button--bordered.professional-dropdown-selected-item {
  border-color: var(--primary-text-color);
}
@media only screen and (min-width: 768px) {
  .pensive-icon-button:hover {
    background: var(--surface-color-3-hover);
  }
}
.pensive-icon-button-icon {
  width: 55%;
  height: 55%;
  transition: all 200ms;
}
.pensive-icon-button--small .pensive-icon-button-icon {
  width: 60%;
  height: 60%;
}
.pensive-icon-button--extra-small .pensive-icon-button-icon {
  width: 1.9rem;
  height: 1.9rem;
}
.pensive-icon-button--extra-extra-small .pensive-icon-button-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.professional-dropdown-selected-item .pensive-icon-button-icon {
  fill: var(--primary-text-color);
}
.pensive-tag {
  background: var(--surface-color-2-divider-color);
  color: #d32f2f;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  font-size: 1.2rem;
  display: inline-block;
}
.pensive-scene-image-slide-icon {
  fill: var(--text-color-muted);
  border-radius: 0.2rem;
  opacity: 0.5;
}
.featured-image-holder-slide-icon {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 1.8rem;
  z-index: 10;
}
/*//////////////////////////*/
/*/ //////STORY MODALS///////*/
/*//////////////////////////*/
.writing-modal-footer {
  background: var(--surface-color-2);
  min-height: 45px;
  border-top: thin solid var(--surface-color-2-divider-color);
  border-radius: 0px 0px 2px 2px;
}
.writing-modal-footer-btn {
  border-radius: 0px;
  background: transparent;
}
.writing-modal-footer-btn-success {
  fill: #4caf50;
}
.writing-modal-footer-btn-success:hover {
  background: #a5d6a7;
}
.writing-modal-footer-btn-secondary {
  fill: #d32f2f;
}
.writing-modal-footer-btn-secondary:hover {
  background: #d32f2f;
}
.writing-modal-footer-btn-danger {
  fill: #d32f2f;
}
.writing-modal-footer-btn-danger:hover {
  background: #d32f2f;
}
.app-modal:empty {
  background-color: transparent;
  pointer-events: none;
}
.app-modal-content {
  width: 100%;
  background: var(--surface-color-0);
}
@media only screen and (min-width: 768px) {
  .app-modal-content {
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--surface-color-0);
  }
}
.app-modal-content--grow {
  width: 100%;
  background: var(--surface-color-0);
  position: relative;
  padding-bottom: 45px;
}
.app-modal-content--expand-outer {
  transition: all 200ms;
}
.app-modal-content--expand-inner {
  height: 91px;
  overflow: hidden;
  background: var(--surface-color-0);
  transition: all 200ms;
}
.showing-dropdown .app-modal-content--expand-inner {
  height: 182px;
}
@media only screen and (min-width: 768px) {
  .app-modal-content--expand-outer {
    height: 170px;
  }
  .showing-dropdown .app-modal-content--expand-outer {
    height: 261px;
  }
}
.app-modal-content-scroller {
  top: 36px;
  left: 0;
  right: 0;
  bottom: 45px;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .app-modal-content-scroller {
    position: absolute;
    overflow-y: scroll;
  }
}
/* Pensive Modal Plot Threads */
.pensive-modal-plot-threads-holder {
  padding-bottom: 2rem;
}
.pensive-modal-plot-threads-new-search {
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(calc(6rem * 0.2), 6vw, 6rem);
}
.pensive-modal-plot-threads-new-search-input {
  width: 100%;
  padding: 1rem;
  background: var(--form-text-input-bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.4rem;
  font-size: 1.333rem;
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  outline: none;
  border: thin solid var(--form-text-input-border-color);
  transition: all 200ms;
}
.pensive-modal-plot-threads-new-search-input:focus {
  border: thin solid var(--form-text-input-border-color-focus);
}
.pensive-modal-plot-threads-new-search-input::-webkit-input-placeholder {
  color: var(--text-color-muted);
}
.pensive-modal-plot-threads-new-search-input::-moz-placeholder {
  color: var(--text-color-muted);
}
.pensive-modal-plot-threads-new-search-input::placeholder {
  color: var(--text-color-muted);
}
[data-can-edit="no"] .pensive-modal-plot-threads-new-search-input {
  display: none;
}
.pensive-modal-plot-threads-new-search-input:not(:focus):hover {
  background: var(--form-text-input-bg-hover);
}
[data-can-edit="no"] .pensive-modal-plot-thread-content-header-action-button {
  display: none;
}
.pensive-modal-plot-threads-new-search-button-wrapper {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 100ms;
}
.pensive-modal-plot-threads-new-search-input:not(:placeholder-shown) ~ .pensive-modal-plot-threads-new-search-button-wrapper {
  opacity: 1;
  max-height: 6rem;
  pointer-events: all;
}
.pensive-modal-plot-threads-new-search-button {
  margin-top: 1rem;
  width: 100%;
}
.pensive-modal-plot-threads-list:empty::after {
  content: "None added.";
  color: hsl(0, 0%, 80%);
  font-size: 1.6rem;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 2rem;
}
.pensive-modal-plot-thread-holder {
  display: grid;
  grid-template-columns: clamp(calc(6rem * 0.2), 6vw, 6rem) auto clamp(calc(6rem * 0.2), 6vw, 6rem);
  margin-top: 1rem;
}
.pensive-modal-plot-thread-holder.hidden {
  display: none;
}
[data-can-edit="no"] .pensive-modal-plot-thread-holder {
  pointer-events: none;
}
[data-can-edit="no"] .pensive-modal-plot-thread-holder:not(.active) {
  display: none;
}
.pensive-modal-plot-threads-none-found {
  display: block;
  padding: 5rem;
  text-align: center;
  font-size: 2rem;
  max-width: 30rem;
  margin: 0 auto;
  color: var(--text-color-primary);
}
.pensive-modal-plot-threads-none-found strong {
  color: var(--text-color-primary);
}
.pensive-modal-plot-threads-none-found-icon {
  fill: var(--text-color-primary);
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  box-sizing: content-box;
}
.pensive-modal-plot-thread-content-holder {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
}
.start .pensive-modal-plot-thread-content-holder {
  border-left: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
}
.end .pensive-modal-plot-thread-content-holder {
  border-right: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
}
.open .pensive-modal-plot-thread-content-holder {
  cursor: default;
}
.pensive-modal-plot-thread-content {
  position: relative;
}
.pensive-modal-plot-thread-content-header {
  padding: 1rem;
  cursor: pointer;
}
.pensive-modal-plot-thread-content-header:focus-within {
  pointer-events: none;
}
.pensive-modal-plot-add-story-event-icon {
  fill: color-mix(in srgb, var(--color), var(--text-color-primary) 60%);
  opacity: 0.75;
  width: 2.6rem;
  height: 2.6rem;
  transition: opacity 200ms;
}
.active .pensive-modal-plot-add-story-event-icon,
.open .pensive-modal-plot-add-story-event-icon {
  display: none;
}
[data-can-edit="no"] .pensive-modal-plot-add-story-event-icon {
  display: none;
}
.pensive-modal-plot-thread-toggle-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: color-mix(in srgb, var(--color), var(--text-color-primary) 70%);
  transition: opacity 200ms;
}
.open .pensive-modal-plot-thread-toggle-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
[data-can-edit="no"] .pensive-modal-plot-thread-toggle-icon,
.pensive-modal-plot-thread-holder:not(.active):not(.open) .pensive-modal-plot-thread-toggle-icon {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-toggle-icon {
    opacity: 0;
  }
  .pensive-modal-plot-thread-content-header:hover .pensive-modal-plot-thread-toggle-icon {
    opacity: 1;
  }
  .pensive-modal-plot-thread-content-header:hover .pensive-modal-plot-add-story-event-icon {
    fill: color-mix(in srgb, var(--color), var(--text-color-primary) 70%);
  }
}
.pensive-modal-plot-thread-content-header-content {
  pointer-events: none;
}
.pensive-modal-plot-thread-content-header-title {
  pointer-events: none;
}
.pensive-modal-plot-thread-content-header-title-input {
  font-family: "Open Sans", helvetica, sans-serif;
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1.333rem;
  border: thin solid transparent;
  padding: 0.4rem 0.6rem 0.3rem;
  color: var(--text-color-primary);
  outline: none;
  width: calc(100% - 1rem);
  max-width: 34rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 0.6rem;
  pointer-events: none;
  transition: all 100ms;
}
.pensive-modal-plot-thread-content-header-title-text {
  display: inline-block;
  padding: 0.4rem 0.6rem 0.3rem;
  font-size: 0;
  color: var(--text-color-primary);
  border: thin solid transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  pointer-events: none;
  transition: background-color 200ms;
}
.pensive-modal-plot-thread-content-header-title-text-item {
  font-size: 1.333rem;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--color), var(--text-color-primary) 70%);
  font-weight: bold;
}
.open .pensive-modal-plot-thread-content-header-title-text-item {
  color: unset;
  -webkit-filter: unset;
          filter: unset;
}
.pensive-modal-plot-thread-content-header-title-text-item.bold {
  font-weight: bold;
  color: #000;
}
.open .pensive-modal-plot-thread-content-header-title-text {
  pointer-events: all;
}
[data-can-edit="no"] .open .pensive-modal-plot-thread-content-header-title-text {
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-content-header-title-text:hover {
    background: color-mix(in srgb, var(--color), var(--story-event-input-bg-hover) var(--story-event-input-bg-dilution-hover));
  }
}
.pensive-modal-plot-thread-content-header-title-input:focus {
  background: color-mix(in srgb, var(--color), var(--story-event-input-bg-focus) var(--story-event-input-bg-dilution-focus));
  border: thin solid color-mix(in srgb, var(--color), var(--surface-color-2) var(--story-event-input-border-dilution-focus));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, var(--story-event-input-shadow-opacity-focus));
}
.pensive-modal-plot-thread-content-header-title:focus-within .pensive-modal-plot-thread-content-header-title-input {
  position: relative;
  opacity: 1;
  pointer-events: all;
}
.pensive-modal-plot-thread-content-header-title:focus-within .pensive-modal-plot-thread-content-header-title-text {
  display: none;
}
.pensive-modal-plot-thread-content-header-search-result {
  padding: 0 0.6rem;
  font-size: 0;
  color: var(--text-color-primary);
  overflow: hidden;
}
.open .pensive-modal-plot-thread-content-header-search-result {
  height: 0;
}
.pensive-modal-plot-thread-content-header-search-result-text {
  display: inline;
  font-size: 1.2rem;
  white-space: pre-wrap;
}
.pensive-modal-plot-thread-content-header-search-result-text.bold {
  font-weight: bold;
}
.pensive-modal-plot-thread-content-header-action-button {
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  fill: color-mix(in srgb, var(--color), var(--text-color-primary) 50%);
  pointer-events: all;
  transition: all 200ms;
}
.pensive-modal-plot-thread-content-header-action-button.professional-dropdown-selected-item {
  background: color-mix(in srgb, var(--color) 80%, var(--surface-color-2) 20%);
  fill: color-mix(in srgb, var(--color), var(--text-color-primary) 50%);
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-content-header-action-button:hover {
    background: color-mix(in srgb, var(--color) 80%, var(--surface-color-2) 20%);
    color: color-mix(in srgb, var(--color) 80%, var(--surface-color-2) 20%);
  }
}
.pensive-modal-plot-thread-content-header-add-button {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: thin solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 200ms;
  pointer-events: none;
  cursor: pointer;
}
.open .pensive-modal-plot-thread-content-header-add-button {
  pointer-events: all;
  border: thin solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-content-header-add-button:hover {
    border: thin solid rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
  }
}
.pensive-modal-plot-thread-content-header-add-button::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  background: currentColor;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 200ms;
}
.pensive-modal-plot-thread-content-header-add-button::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 50%;
  background: currentColor;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all 200ms;
}
.open .pensive-modal-plot-thread-content-header-add-button::after {
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-holder:not(.open):hover .pensive-modal-plot-thread-content-header-add-button {
    border: thin solid rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.3);
  }
}
.pensive-modal-plot-thread-content-events-holder {
  overflow: hidden;
}
.pensive-modal-plot-thread-content-event-list-toggle-button {
  display: flex;
  align-items: center;
  font-size: 1.333rem;
  margin: 0.6rem 0 0 0.6rem;
  color: var(--text-color-primary);
  transition: all 100ms;
}
[data-can-edit="no"] .pensive-modal-plot-thread-content-event-list-toggle-button {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-content-event-list-toggle-button:hover {
    color: var(--text-color-primary);
  }
}
.pensive-modal-plot-thread-content-event-list-toggle-button::before {
  content: "Show events";
  color: inherit;
}
.pensive-modal-plot-thread-content-event-list-toggle-button::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.6em;
  border: 0 solid transparent;
  border-right: 0.1em solid currentColor;
  border-bottom: 0.1em solid currentColor;
  display: inline-block;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-25%) rotate(45deg);
          transform: translateY(-25%) rotate(45deg);
}
.list-open .pensive-modal-plot-thread-content-event-list-toggle-button::before {
  content: "Hide events";
  color: inherit;
}
.list-open .pensive-modal-plot-thread-content-event-list-toggle-button::after {
  -webkit-transform: translateY(25%) rotate(225deg);
          transform: translateY(25%) rotate(225deg);
}
.pensive-modal-plot-thread-content-event-list-holder {
  overflow: hidden;
}
.pensive-modal-plot-thread-content-events-holder-inner {
  padding: 1.2rem;
  box-sizing: border-box;
  border-top: thin solid rgba(0, 0, 0, 0.1);
}
.pensive-modal-plot-thread-content-event-list-item {
  display: grid;
  grid-template-columns: 2.4rem auto;
  grid-column-gap: 0.6rem;
  font-size: 0;
  color: var(--text-color-primary);
  padding: 0.4rem 0;
  width: 100%;
}
.pensive-modal-plot-thread-content-event-list-item-text {
  display: inline;
  font-size: 1.2rem;
  white-space: pre-wrap;
}
.pensive-modal-plot-thread-content-event-list-item-text.bold {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  background: rgba(255, 255, 255, 0.5);
  padding: 0.1em 0.1em 0.2em;
  border-radius: 0.3em;
}
.pensive-modal-plot-thread-content-event {
  display: grid;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  grid-column-gap: 0.6rem;
  padding-right: 0.6rem;
}
.pensive-modal-plot-thread-content-event-scene-number {
  display: inline;
  position: relative;
  white-space: pre-wrap;
  font-size: 1.2rem;
  color: var(--text-color-primary);
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 200ms;
}
.list-open .pensive-modal-plot-thread-content-event-scene-number {
  width: 2.4rem;
  opacity: 1;
}
.pensive-modal-plot-thread-content-event-textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  color: var(--text-color-primary);
  resize: none;
  width: 100%;
  background: color-mix(in srgb, var(--color), var(--story-event-input-bg) var(--story-event-input-bg-dilution));
  border: thin solid transparent;
  padding: 1rem;
  outline: none;
  border-radius: 0.6rem;
  transition: all 400ms;
}
.pensive-modal-plot-thread-content-event-textarea::-webkit-input-placeholder {
  color: var(--text-color-primary);
}
.pensive-modal-plot-thread-content-event-textarea::-moz-placeholder {
  color: var(--text-color-primary);
}
.pensive-modal-plot-thread-content-event-textarea::placeholder {
  color: var(--text-color-primary);
}
.pensive-modal-plot-thread-content-event-textarea:hover {
  background: color-mix(in srgb, var(--color), var(--story-event-input-bg-hover) var(--story-event-input-bg-dilution-hover));
}
[data-can-edit="no"] .pensive-modal-plot-thread-content-event-textarea {
  pointer-events: none;
}
.pensive-modal-plot-thread-content-event-textarea:focus {
  background: color-mix(in srgb, var(--color), var(--story-event-input-bg-focus) var(--story-event-input-bg-dilution-focus));
  border: thin solid color-mix(in srgb, var(--color), var(--surface-color-2) var(--story-event-input-border-dilution-focus));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, var(--story-event-input-shadow-opacity-focus));
}
.pensive-modal-plot-thread-bkg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: -webkit-filter 100ms;
  transition: filter 100ms;
  transition: filter 100ms, -webkit-filter 100ms;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  background-color: color-mix(in srgb, var(--color), var(--surface-color-2) var(--connection-color-dilution));
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-holder:not(.open):hover .pensive-modal-plot-thread-bkg {
    -webkit-filter: brightness(0.98);
            filter: brightness(0.98);
  }
}
.start .pensive-modal-plot-thread-bkg {
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
}
.end .pensive-modal-plot-thread-bkg {
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
}
.pensive-modal-plot-thread-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: none;
}
.pensive-modal-plot-thread-bumper {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--color), var(--surface-color-2) 40%);
}
.pensive-modal-plot-thread-bumper-bkg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 100ms;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  background-color: color-mix(in srgb, var(--color), var(--surface-color-2) 80%);
}
@media only screen and (min-width: 768px) {
  .pensive-modal-plot-thread-holder:not(.open):hover .pensive-modal-plot-thread-bumper-bkg {
    -webkit-filter: brightness(0.98);
            filter: brightness(0.98);
  }
}
.pensive-modal-plot-thread-bumper-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  display: none;
}
.start .pensive-modal-plot-thread-bumper--left {
  visibility: hidden;
}
.end .pensive-modal-plot-thread-bumper--right {
  visibility: hidden;
}
.pensive-pensive-modal-plot-threads-new-search-menu-inner {
  padding: 1rem;
}
/*///////////////////////////*/
/*/ //////IMAGE MODALS////////*/
/*///////////////////////////*/
/* Change Image Modal */
.organized-image-search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--surface-color-0);
}
.modal__content-wrapper--change-image .modal__container {
  overflow: visible;
  overflow-y: visible;
  top: 0;
  bottom: 0;
}
.modal__content-wrapper--change-image__saved-image-holder {
  position: absolute;
  top: 8rem;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
}
.modal__content-wrapper--change-image__saved-image-holder__header {
  position: absolute;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-color-primary);
  top: -53px;
  left: 63px;
}
.saved-image-list {
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--surface-color-0);
  top: 84px;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  pointer-events: none;
  z-index: 999;
}
.showing-saved .modal__content-wrapper--change-image__saved-image-holder {
  opacity: 1;
  pointer-events: all;
}
.showing-saved .modal__container__api-search-header__input,
.showing-saved .modal__container__api-search-header__search-icon {
  visibility: hidden;
}
.showing-saved .js-saved-images .modal__container__api-search-header__action-button__icon {
  fill: var(--icon-color-secondary);
}
.showing-saved .saved-image-list {
  display: block;
  pointer-events: all;
}
.modal__container__api-search-holder {
  padding-bottom: 46px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--surface-color-0);
}
.modal__container__api-search-header {
  height: 8rem;
  display: flex;
  align-items: stretch;
  background: var(--surface-color-2);
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.modal_container__api-search-header__spinner {
  position: absolute;
  z-index: 999;
  width: 40px;
  height: 40px;
  top: 22px;
  right: 1.5rem;
  display: none;
}
.modal__container__api-search-header__action-button--saved-images {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  min-width: 7rem;
}
.modal__container__api-search-header__action-button__icon {
  fill: var(--icon-color-secondary);
  opacity: 0.8;
}
.modal__container__api-search-header__action-button:hover .modal__container__api-search-header__action-button__icon,
.modal__container__api-search-header__action-button--saved-images:hover .modal__container__api-search-header__action-button__icon,
.modal__container__api-search-header__close-button:hover .modal__container__api-search-header__close-button__icon {
  opacity: 1;
}
.modal__container__api-search-header__input {
  background: var(--text-input-bg);
  width: calc(100% - 1rem);
  font-size: 18px;
  border-radius: 62px;
  padding: 10px 42px 10px 45px;
  color: var(--text-color-primary);
  outline: none;
  border: 0 none;
  position: absolute;
  top: 20px;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 1px 1px 1px transparent;
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
@media only screen and (min-width: 768px) {
  .modal__container__api-search-header__input:hover {
    box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 1px 1px 1px var(--surface-color-2-divider-color);
  }
}
.modal__container__api-search-header__search-icon {
  position: absolute;
  width: 3rem;
  height: 3rem;
  left: 0.8rem;
  top: 2.6rem;
  fill: var(--icon-color-muted);
  pointer-events: none;
}
.modal__container__api-search-header__input:focus + .modal__container__api-search-header__search-icon {
  fill: var(--icon-color-tertiary);
}
.modal__container__api-search-header__input::-webkit-input-placeholder {
  /* Chrome */
  color: var(--text-color-tertiary);
}
.modal__container__api-search-header__input:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--text-color-tertiary);
}
.modal__container__api-search-header__input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--text-color-tertiary);
  opacity: 1;
}
.modal__container__api-search-header__input:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: var(--text-color-tertiary);
  opacity: 1;
}
.modal__container__api-search-header__input:focus {
  box-shadow: 0 0 0 1px var(--primary-button-bg);
}
.modal__container__api-search-header__action-button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  min-width: 7rem;
}
.modal__container__api-search-header__action-button--saved-images {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  min-width: 7rem;
}
.modal__container__api-search-header__close-button {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  min-width: 7rem;
}
.modal__container__api-search-header__close-button__icon {
  fill: var(--icon-color-secondary);
  opacity: 0.8;
  transition: all 200ms;
}
.dark-overlay-modal-close-icon {
  fill: #f9f9f9;
  opacity: 0.8;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .dark-overlay-modal-close-icon:hover {
    opacity: 1;
  }
}
.modal__container__change-image-instructions {
  font-size: 24px;
  color: var(--text-color-tertiary);
  text-align: center;
  position: absolute;
  font-weight: 400;
  left: 50%;
  top: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 998;
}
.modal__container__change-image-instructions__browse-files {
  color: var(--primary-button-bg);
  cursor: pointer;
}
.modal__container__change-image-instructions__browse-files:hover {
  color: var(--primary-button-bg-hover);
}
.image-list {
  list-style: none;
  padding: 12px;
  padding-top: 0;
  position: absolute;
  top: 81px;
  bottom: 0px;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.image-list.showing {
  display: block;
  background: var(--surface-color-1);
  opacity: 1;
  pointer-events: all;
}
/*---------------------------*/
.grid-search-item--tmdb {
  padding: 0;
  background: none;
  width: 100%;
  float: left;
  position: relative;
  cursor: pointer;
}
.grid-search-item--tmdb:hover .grid-search-item--tmdb__thumb-holder {
  opacity: 0.8;
}
.grid-search-item--tmdb__thumb-holder {
  overflow: hidden;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.grid-search-item--tmdb__thumb-holder::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
  display: block;
  left: 0;
  top: 0;
}
.grid-search-item--tmdb__name {
  vertical-align: top;
  line-height: 18px;
  font-size: 14px;
  text-align: center;
  position: absolute;
  z-index: 9999;
  bottom: 16px;
  left: 18px;
  right: 18px;
  color: var(--text-color-primary);
}
.grid-search-item--tmdb__thumb-holder__thumb {
  width: 100%;
  height: 100%;
  user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.grid-search-item--tmdb__thumb-holder__thumb.loading {
  background-color: var(--image-bg-color);
  background-size: 40%;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/image_search_input_spinner.gif);
  background-position: center 40px;
}
/*---------------------------*/
.image-list__column,
.saved-image-list__column {
  float: left;
}
.image-list__grid-item,
.saved-image-list__grid-item {
  width: 100%;
  cursor: pointer;
}
.image-list__grid-item__thumb-holder,
.saved-image-list__grid-item__thumb-holder {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
}
.image-list__grid-item__thumb-holder__thumb,
.saved-image-list__grid-item__thumb-holder__thumb {
  display: block;
  width: 100%;
  min-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  transition: all 200ms;
}
.image-list__grid-item__thumb-holder__thumb.loading,
.saved-image-list__grid-item__thumb-holder__thumb.loading {
  background-color: var(--surface-color-1);
  background-size: 20%;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/image_search_input_spinner.gif);
  background-position: center 69px;
}
.image-list__grid-item__user-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 5px;
  opacity: 1;
  transition: all 200ms;
}
@media only screen and (min-width: 600px) {
  .image-list__grid-item__thumb-holder:hover .image-list__grid-item__thumb-holder__thumb,
  .saved-image-list__grid-item__thumb-holder:hover .saved-image-list__grid-item__thumb-holder__thumb {
    opacity: 0.8;
  }
  .image-list__grid-item__user-info {
    opacity: 0;
  }
  .image-list__grid-item__thumb-holder:hover .image-list__grid-item__user-info {
    opacity: 1;
  }
}
.image-list__grid-item__user-info__link {
  text-decoration: none;
  color: #fff;
  user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.image-list__grid-item__user-info__image {
  width: 26px;
  user-drag: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--image-bg-color);
  border-radius: 50%;
}
.image-list__grid-item__user-info__name {
  line-height: 30px;
  vertical-align: bottom;
  font-size: 14px;
  color: #fff;
  margin-left: 5px;
}
.image-list__grid-item__user-info__name:hover {
  text-decoration: underline;
}
.modal__content-wrapper--change-image__drop-zone {
  position: absolute;
  background: var(--surface-color-0);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}
.modal__content-wrapper--change-image__drop-zone__content {
  position: absolute;
  left: 50%;
  top: 50%;
  padding-bottom: 121px;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal__content-wrapper--change-image__drop-zone__content__icon {
  fill: var(--primary-button-bg);
  display: block;
  margin: auto;
}
.modal__content-wrapper--change-image__drop-zone__content__text {
  display: block;
  text-align: center;
  color: var(--text-color-primary);
  font-size: 36px;
}
.modal__content-wrapper--change-image__drop-zone.dragged-over {
  opacity: 1;
  pointer-events: all;
}
/* TMDB Character Image Modal */
.tmdb .modal__container__api-search-header__action-button--saved-images {
  visibility: hidden;
  width: 0;
  margin: 9px 0 0;
}
.modal__container__api-search-header__input.tmdb {
  background-image: url("/web-app/img/tmdb_attribution.png");
  background-repeat: no-repeat;
  background-size: 82px;
  background-position: calc(100% - 12px) 16px;
}
.modal__container__change-image-instructions__tmdb-attribution {
  height: 40px;
  vertical-align: text-bottom;
  margin: 0 6px 0 11px;
}
.tmdb .image-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.3rem;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
}
@media only screen and (min-width: 400px) {
  .tmdb .image-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 700px) {
  .tmdb .image-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 1000px) {
  .tmdb .image-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}
@media only screen and (min-width: 1300px) {
  .tmdb .image-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
}
/*////////////////////////////////*/
/*SHARE STORY MODAL - DEPERECATED?*/
/*////////////////////////////////*/
.share-options-modal-link-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: -200px;
}
.share-options-modal-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: rgba(0, 0, 0, 0.8);
}
.share-options-modal-share-icons-section {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20vh 20px 0;
  flex-direction: column;
}
.share-options-modal-story-title {
  color: #fff;
  font-size: 34px;
  text-align: center;
}
.share-options-modal-story-title-share-text {
  display: block;
  font-size: 19px;
  color: #8a8a8a;
  text-transform: uppercase;
}
.share-options-modal-share-icons-section-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  align-items: center;
  margin: 3rem auto 0;
}
.share-options-modal-share-icon-holder {
  display: flex;
  flex-direction: column;
  min-width: 14%;
  width: 12vw;
  max-width: 30px;
  margin: 20px 20px 20px;
  align-items: center;
  cursor: pointer;
}
@media only screen and (min-width: 600px) {
  .share-options-modal-share-icon-holder {
    margin: 30px 40px 30px;
  }
  .share-options-modal-share-icons-section {
    justify-content: center;
    padding: 20px;
  }
  .share-options-modal-story-title {
    font-size: 40px;
  }
}
.share-options-modal-share-icon {
  width: 100%;
  max-width: 9rem;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .share-options-modal-share-icon-holder:hover .share-options-modal-share-icon {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
.share-options-modal-share-icon-label {
  font-size: 14px;
  color: #fff;
  margin-top: 12px;
  text-align: center;
  white-space: nowrap;
}
.share-options-modal-share-link-copied,
.share-options-modal-share-code-copied {
  position: absolute;
  pointer-events: none;
  left: 50%;
  text-align: center;
  padding: 15px 20px;
  border-radius: 7px;
  font-size: 16px;
  background: #479c47;
  color: #fff;
  opacity: 0;
  -webkit-transform: translate(-50%, -120%);
          transform: translate(-50%, -120%);
  transition: all 400ms;
  box-shadow: 0px 7px 11px rgba(69, 112, 69, 0.4);
}
.showing-copy-link-notification .share-options-modal-share-link-copied {
  opacity: 1;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.showing-copy-code-notification .share-options-modal-share-code-copied {
  opacity: 1;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
/*/ ///////////////////////////////*/
/*///REFER MODAL - DEPERECATED?///*/
/*/ ///////////////////////////////*/
.refer-options-modal-wrapper {
  background: #fcfcfc;
  min-height: calc(100% + 150px);
}
@media only screen and (min-width: 768px) {
  .refer-options-modal-wrapper {
    background: #ffffff;
    max-width: initial;
    min-height: initial;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 970px;
    width: calc(100% - 40px);
    border-radius: 6px;
    background-size: 38%;
    background-position-x: 30%;
    background-position-y: 90%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
.refer-options-modal-close-button {
  position: absolute;
  right: 17px;
  top: 16px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  background: rgba(0, 0, 0, 0.48);
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.refer-options-modal-sections-holder {
  display: flex;
  flex-direction: column;
}
.refer-options-modal-section-how-it-works-items-holder {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 500px) {
  .refer-options-modal-section-how-it-works-items-holder {
    flex-direction: row;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .refer-options-modal-sections-holder {
    flex-direction: row;
  }
  .refer-options-modal-section refer-options-modal-section--graphic {
    flex-basis: 345px;
  }
  .refer-options-modal-info-sections-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
.refer-options-modal-graphic-title {
  font-family: "Work Sans";
  font-size: 40px;
  margin-top: 20px;
  line-height: 1.1em;
}
.refer-options-modal-graphic-subtitle {
  margin-top: 24px;
  display: block;
  font-size: 24px;
}
.refer-options-modal-graphic-subtitle-punch {
  font-size: 34px;
  display: block;
  font-weight: bold;
  line-height: 1.2em;
}
.refer-options-modal-prewrite-icon {
  fill: white;
  width: 72px;
  margin-top: 20px;
}
.refer-options-modal-section--graphic {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2c3135+0,556069+51,2c3135+100 */
  background: #2c3135;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: url("/web-app/img/share_bkg_dark.jpg"), linear-gradient(135deg, #2c3135 0%, #556069 51%, #2c3135 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c3135', endColorstr='#2c3135', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  -o-object-fit: cover;
     object-fit: cover;
  color: #fff;
  font-size: 24px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .refer-options-modal-section--graphic {
    flex-basis: 288px;
    /*border: thin solid #4d555d;*/
    /*border-radius: 6px 0 0 6px;*/
  }
}
.refer-options-modal-section {
  padding: 20px 20px 20px;
}
.refer-options-modal-section-how-it-works-title {
  font-family: "Work Sans", sans-serif;
  font-size: 30px;
  text-align: center;
  color: #82848a;
  margin-top: 20px;
}
.refer-options-modal-section-how-it-works-item {
  position: relative;
  margin: 30px auto 20px;
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 250px;
}
.refer-options-modal-section-how-it-works-item-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: block;
  fill: #727a81;
}
.refer-options-modal-section-how-it-works-item-icon--share {
  width: 52px;
}
.refer-options-modal-section-how-it-works-item-icon--save {
  width: 47px;
}
.refer-options-modal-section-how-it-works-item-icon-wrapper {
  position: relative;
  background: #f2f2f2;
  border-radius: 12px;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: thin solid #e1e1e1;
}
.refer-options-modal-section-how-it-works-item-icon-wrapper::before {
  content: attr(data-step-number);
  position: absolute;
  left: -12px;
  top: -10px;
  width: 24px;
  height: 24px;
  background: #b1b2b5;
  line-height: 24px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.refer-options-modal-section-how-it-works-item-icon--save {
  height: 50px;
}
.refer-options-modal-section-how-it-works-item-text {
  margin-top: 14px;
  /* text-transform: uppercase; */
  font-size: 14px;
  padding: 0px 16px;
}
.refer-options-modal-share-icons-section {
  padding: 0 20px 20px;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .refer-options-modal-share-icons-section {
    /*margin-top: 20px;*/
  }
}
.refer-options-modal-share-icons-section-wrapper {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: thin solid #cacaca;
  border-radius: 15px;
  padding: 16px 20px 20px;
}
@media only screen and (min-width: 768px) {
  /*.refer-options-modal-share-icons-section-wrapper {*/
  /*flex-flow: row;*/
  /*}*/
}
.refer-options-modal-share-title {
  position: absolute;
  top: 0;
  background: #fcfcfc;
  padding: 0 15px;
  text-transform: uppercase;
  font-size: 16px;
  text-align: center;
  color: #82848a;
  -webkit-transform: translateY(-56%);
          transform: translateY(-56%);
}
.refer-options-modal-share-icon-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 22px;
  align-items: center;
  cursor: pointer;
}
.refer-options-modal-share-icon {
  width: 80px;
  height: 50px;
  transition: all 200ms;
}
.refer-options-modal-share-icon-holder:hover .refer-options-modal-share-icon {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
.refer-options-modal-share-icon-label {
  font-size: 12px;
  display: block;
  margin-top: 0.9em;
}
.refer-options-modal-section-fine-print {
  font-size: 12px;
  text-align: center;
  padding: 0 40px 20px;
  display: block;
  color: #7d7d7d;
  line-height: 1.6em;
}
/*//////////////////////////////*/
/*/ ////////TIMELINE VIEW////////*/
/*//////////////////////////////*/
/* Side Legend Cells */
.table-cell--section-header--side {
  height: 20px;
}
.table-cell--section--side {
  position: relative;
  vertical-align: top;
  cursor: default !important;
}
/* Character Side Cells */
.table-cell--section-header--side.characters {
  position: relative;
  cursor: pointer;
}
.characters.empty-section,
.characters-cell.empty-section {
  color: var(--text-color-muted);
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-characters .table-cell--section-header--side.characters {
  pointer-events: none;
  cursor: default;
}
.table-cell--section-header--side.characters:hover {
  background: var(--surface-color-2-hover);
}
.table-cell--section-header--side.characters::after {
  content: "";
  width: 6px;
  height: 2px;
  position: absolute;
  background: var(--icon-color-muted);
  right: 10px;
  border-radius: 0 4px 4px 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: translate(0px, 1px) rotate(-35deg);
          transform: translate(0px, 1px) rotate(-35deg);
}
.table-cell--section-header--side.characters::before {
  content: "";
  width: 6px;
  height: 2px;
  position: absolute;
  background: var(--icon-color-muted);
  right: 16px;
  border-radius: 4px 0 0 4px;
  top: 50%;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: translate(1px, 1px) rotate(35deg);
          transform: translate(1px, 1px) rotate(35deg);
}
.no-characters .table-cell--section-header--side.characters::before,
.no-characters .table-cell--section-header--side.characters::after {
  display: none;
}
/* Plot Thread Side Cells */
.connections-cell.cell-content,
.table-cell--section--side.connections-cell .cell-content {
  min-height: 32px;
  padding: 6px 12px;
}
.table-cell--section--side.connections-cell .cell-content {
  display: flex;
  align-items: start;
  height: 99%;
  width: 100%;
}
.connections.color-thumb {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 2px;
  margin: 3px 8px 0 0;
  vertical-align: middle;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2-hover) var(--connection-color-dilution));
}
.connections.connection-abbr {
  font-size: 12px;
  width: calc(100% - 23px);
}
.connections.connection-abbr:empty::before {
  content: "No events";
}
#shadow {
  position: absolute;
  pointer-events: none;
  width: 4px;
  top: 0;
  z-index: 30;
  left: 200px;
  height: calc(100vh - 42px);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=1);
  /* IE6-9 */
  display: none;
}
@media only screen and (min-width: 600px) {
  #shadow {
    display: block;
  }
}
.cell-content.blank {
  padding: 6px 0;
}
.characters-grouped .character-group-cell.cell-content {
  padding: 6px 12px 8px;
  min-height: 46px;
  max-height: inherit;
  overflow: initial;
}
.character-group-cell.cell-content.blank {
  padding: 6px 0 8px;
}
.table-cell.character-group-cell {
  border-bottom: none;
}
.featured_image-cell.cell-content {
  position: relative;
  padding: 0px;
  min-height: 160px;
}
.featured_image-cell__image-thumb {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}
.featured_image-cell__image-thumb.loading {
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
.table-cell,
.table-cell--section-header,
.buffer-cell {
  cursor: pointer;
}
.table-cell--section-header.marker-cell {
  cursor: default;
}
.js-timeline-tooltip {
  cursor: pointer;
}
.buffer-cell {
  border-bottom: none;
  min-height: 10rem;
}
.buffer-cell {
  border-bottom: none;
}
.character-group-cell.cell-content {
  padding: 0 12px !important;
  min-height: 0px;
  max-height: 0px;
  overflow: hidden;
}
.cell-character__item {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
}
.characters-grouped .cell-character__item {
  margin: 6px 0;
}
.cell-character__image-holder {
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.cell-character__image {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  text-indent: -99999999999px;
}
.cell-character_first-name {
  line-height: 16px;
  margin: 0;
  padding: 0 0 0 10px;
  vertical-align: top;
}
/* STATES */
/* Character Cells */
.grouped-cell {
  background-image: none;
  background-size: 33px;
  background-repeat: no-repeat;
  background-position: center;
  border-bottom: none;
}
.table-cell--section--side.grouped-cell {
  padding: 0 12px;
  min-height: 0px;
  max-height: 0px;
  overflow: hidden;
  border-bottom: none;
}
.characters-grouped .character-group-cell,
.characters-grouped .table-cell--section--side.grouped-cell {
  padding: 6px 12px 8px;
  min-height: 46px;
  max-height: inherit;
  overflow: initial;
  border-bottom: thin solid var(--table-cell-border-color);
}
.characters-grouped .character-group-cell.cell-content.blank,
.character-group-cell.cell-content.blank {
  padding: 0;
  height: 0;
}
.characters-grouped .table-cell--section--side.characters-cell .cell-content {
  padding: 0 12px;
  min-height: 0px;
  max-height: 0px;
  overflow: hidden;
}
.characters-grouped .characters-cell.cell-content {
  padding: 0 12px;
  min-height: 0px;
  max-height: 0px;
  overflow: hidden;
}
.characters-grouped .table-cell.empty.character-group-cell {
  border-bottom: thin solid rgba(0, 0, 0, 0);
}
.characters-grouped .table-cell.characters-cell,
.characters-grouped .table-cell--section--side.characters-cell {
  border-bottom: none;
}
.characters-grouped .can-sort {
  pointer-events: none;
}
.characters-grouped .table-cell--section-header--side.characters::after {
  -webkit-transform: translate(0px, -50%) rotate(0deg);
          transform: translate(0px, -50%) rotate(0deg);
}
.characters-grouped .table-cell--section-header--side.characters::before {
  -webkit-transform: translate(0px, -50%) rotate(0deg);
          transform: translate(0px, -50%) rotate(0deg);
}
.characters-grouped.no-characters .character-group-cell,
.no-characters .character-group-cell,
.no-characters .grouped-cell {
  height: 0 !important;
  visibility: hidden;
  border: none !important;
  padding: 0 12px !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden;
}
.timeline-initializing ~ .timeline-module-new-scene-button--mobile,
.timeline-initializing ~ .timeline-module-new-scene-button {
  display: none;
}
@-webkit-keyframes grid-skeleton-bkg-animation {
  0% {
    background-position: 133% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes grid-skeleton-bkg-animation {
  0% {
    background-position: 133% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.timeline-column-drop-indicator {
  position: absolute;
  left: 0;
  top: 14px;
  width: 4px;
  height: calc(100dvh - 140px);
  background: var(--primary-button-bg);
  z-index: 9999999999;
  pointer-events: none;
  -webkit-transform: translateX(-2px);
          transform: translateX(-2px);
}
.timeline-column-drop-indicator.move-right {
  left: unset;
  right: -4px;
}
[data-drop-state="hidden"].timeline-column-drop-indicator {
  opacity: 0;
}
.timeline-column-drop-indicator::before {
  border: solid 8px transparent;
  z-index: 2;
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  border-top-color: var(--primary-button-bg);
  top: 0;
  right: auto;
  left: -6px;
  pointer-events: none;
}
.timeline-column-drop-indicator::after {
  z-index: 2;
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  border: 8px solid transparent;
  border-bottom-color: var(--primary-button-bg);
  bottom: 0;
  right: auto;
  left: -6px;
  pointer-events: none;
}
[data-drop-state="right"].timeline-column-drop-indicator {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
[data-drop-state="right"].timeline-column-drop-indicator::before {
  top: 0;
  width: 0;
  height: 0;
  left: 2px;
  border-left: 0 solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid transparent;
  border-top-color: var(--primary-button-bg);
}
[data-drop-state="right"].timeline-column-drop-indicator::after {
  bottom: 0;
  width: 0;
  height: 0;
  left: 2px;
  border-left: 0 solid transparent;
  border-right: 8px solid transparent;
  border-top: 0 solid transparent;
  border-top-color: var(--primary-button-bg);
}
[data-drop-state="left"].timeline-column-drop-indicator {
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
}
[data-drop-state="left"].timeline-column-drop-indicator::before {
  top: 0;
  width: 0;
  height: 0;
  left: -6px;
  border-left: 8px solid transparent;
  border-right: 0 solid transparent;
  border-top: 8px solid transparent;
  border-top-color: var(--primary-button-bg);
}
[data-drop-state="left"].timeline-column-drop-indicator::after {
  bottom: 0;
  width: 0;
  height: 0;
  left: -6px;
  border-left: 8px solid transparent;
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
  border-top-color: var(--primary-button-bg);
}
/* Empty Scene Drop Zone */
.empty.header-cell {
  position: -webkit-sticky;
  position: sticky;
  top: 34px;
  height: auto;
  overflow: visible;
}
.table-cell--add-new-column {
  position: -webkit-sticky;
  position: sticky;
  min-height: unset;
  height: 0;
  border: none !important;
  padding: 0;
  top: 35px;
  z-index: 550;
}
.bool-cell-wrapper {
  text-align: left;
}
.bool-cell-marker {
  text-align: center;
  margin-top: 5px;
  display: none;
}
.text-icon {
  width: 20px;
}
.heading-icon {
  width: 20px;
}
.character-icon {
  border: 1px solid #d7d7d7;
  border-radius: 50%;
  width: 18px;
  -webkit-filter: hue-rotate(240deg) saturate(3.3);
}
.bool-icon {
  /*fill: #9fa4aa;*/
  fill: var(--text-color-tertiary);
}
.bool-cell-wrapper--text {
  display: none;
}
.bool-cell-wrapper--character {
  display: none;
}
.table-cell.dialogue .text-icon {
  display: none;
}
.timeline-insert-scene-mobile-button {
  position: absolute;
}
.timeline-insert-scene-mobile-button--before {
  left: 0px;
  top: 0;
  -webkit-transform: translate(-50%, calc(50vh - 80px));
          transform: translate(-50%, calc(50vh - 80px));
  opacity: 0;
  display: none;
  pointer-events: none;
}
.timeline-insert-scene-mobile-button--after {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.timeline-insert-scene-mobile-button {
  opacity: 0;
  pointer-events: none;
}
.adding-new-scene-mode .timeline-insert-scene-mobile-button {
  opacity: 1;
  pointer-events: all;
}
.adding-new-scene-mode .timeline-insert-scene-mobile-button--before,
.adding-new-scene-mode .last-scene-in-act + .table-cell--add-new-column .timeline-insert-scene-mobile-button--after {
  opacity: 1;
  display: block;
  pointer-events: all;
}
.adding-new-scene-mode .table-cell:not(.table-cell--add-new-column) {
  opacity: 0.55;
}
.first-scene-in-act + .table-cell--add-new-column .timeline-insert-scene-mobile-button--before {
  -webkit-transform: translate(0, calc(50vh - 80px));
          transform: translate(0, calc(50vh - 80px));
  border-radius: 0px 4rem 4rem 0px;
  padding-left: 2.4rem;
  border-left: thin solid rgba(255, 255, 255, 0.7);
}
.last-scene-in-act + .table-cell--add-new-column .timeline-insert-scene-mobile-button--after {
  right: 0;
  top: 0;
  -webkit-transform: translate(0, calc(50vh - 80px));
          transform: translate(0, calc(50vh - 80px));
  border-radius: 4rem 0px 0px 4rem;
  padding-right: 2.4rem;
}
.action .text-cell-wrapper {
  white-space: pre-wrap;
}
.table-cell.dialogue .timeline-dialogue-item {
  display: none;
}
.table-cell.dialogue .timeline-dialogue-item:nth-child(-n + 6) {
  display: block;
}
.table-cell {
  background-color: var(--table-cell-bg);
  color: var(--text-color-primary);
  border-right: thin solid var(--table-cell-border-color);
  border-bottom: thin solid var(--table-cell-border-color);
}
.table-cell.co.drag-hidden:not(.table-cell--act-header, .table-cell--marker) {
  background-color: var(--table-cell-bg-hover);
}
.table-cell.co.drag-hidden:not(.table-cell--act-header, .table-cell--marker) > * {
  opacity: 0.25;
}
.table-cell.sticky,
.table-cell.cell-content.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--sticky-top));
  z-index: calc(var(--sticky-z-index));
}
.table-cell--section--side.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--sticky-top));
  z-index: calc(var(--sticky-z-index) + 100);
}
.table-cell.connections-cell {
  position: relative;
  padding: 0;
}
.table-cell--section-header {
  background-color: var(--table-cell-header-bg);
  text-transform: uppercase;
  padding: 0 1rem;
  font-size: 0.933rem;
  align-items: center;
  border-right: thin solid var(--table-cell-border-color);
  border-bottom: thin solid var(--table-cell-border-color);
}
.cell-wrapper--heading {
  display: block;
  font-weight: bold;
}
.cell-wrapper-podcast--heading {
  display: block;
  margin: 6px 12px;
  font-weight: bold;
}
.table-cell--section-header.structure {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 580;
  cursor: default;
  background-color: var(--table-cell-structure-side-header-bg);
  border-bottom: thin solid var(--marker-cell-border-color);
}
.table-cell--section--side {
  padding: 1rem;
  font-size: 1.2rem;
}
.characters-grouped .table-cell--section--side.characters-cell {
  padding: 0;
}
.table-cell--section--side,
.table-cell--section--side.connections-cell,
.table-cell--section-header--side,
.table-cell--section-header--side.characters {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
.table-cell--section-header--side {
  padding: 0 1rem;
  align-items: center;
  color: var(--text-color-secondary);
}
.table-cell.co:not(.table-cell--act-header, .table-cell--marker) {
  background: var(--table-cell-bg-hover);
}
.table-cell.dr:not(.table-cell--act-header, .table-cell--marker) {
  background: var(--table-cell-bg-drop-ready);
}
.table-cell.co:not(.table-cell--act-header, .table-cell--marker) {
  background: var(--table-cell-bg-hover);
}
.table-cell.press {
  background-color: #edf6ff;
}
.table-cell.character-group-cell.press {
  background: #23272f;
}
.buffer-cell.press {
  background: #23272f;
}
.table-cell--section-header:not(.marker-cell).co {
  background-color: var(--table-cell-header-bg-hover);
}
.table-cell--section-header:not(.marker-cell).dr {
  background-color: var(--table-cell-bg-drop-ready);
}
.table-cell--section-header:not(.marker-cell).co.drag-hidden {
  background-color: var(--table-cell-bg-hover);
}
.table-cell--section-header:not(.marker-cell).press {
  background: #23272f;
}
.featured_image-cell.co {
  background: #23272f;
}
.featured_image-cell.press {
  background: #23272f;
}
.table-cell--range {
  min-height: 100px;
  position: relative;
}
.table-cell--range::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  height: 1px;
  border-top: thin dashed var(--surface-color-2-divider-color);
}
.table-cell--range + .table-cell--range::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: 0.3rem;
  background: linear-gradient(360deg, #eeeeee, transparent);
}
.characters-grouped .grouped-cell {
  background-image: var(--grouped-characters-icon);
}
.expandable::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 70px;
  z-index: 1;
  transition: all 1000ms;
}
.table-cell .expandable:before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg) 0%, transparent 90%) 0%, color-mix(in srgb, var(--table-cell-bg) 100%, transparent 20%) 74%, var(--table-cell-bg) 100%);
}
.table-cell.co .expandable-content.expandable::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg-hover) 0%, transparent 90%) 0%, color-mix(in srgb, var(--table-cell-bg-hover) 100%, transparent 20%) 74%, var(--table-cell-bg-hover) 100%);
}
.table-cell.dr .expandable-content.expandable::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg-drop-ready) 0%, transparent 90%) 0%, color-mix(in srgb, var(--table-cell-bg-drop-ready) 100%, transparent 20%) 74%, var(--table-cell-bg-drop-ready) 100%);
}
.drag-hidden .expandable-content.expandable::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg) 0%, transparent 100%) 0%, color-mix(in srgb, var(--table-cell-bg) 100%, transparent 0%) 74%, var(--table-cell-bg) 100%);
}
.cards-module__scene-card__content .expandable::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card-bg) 0%, transparent 90%) 0%, color-mix(in srgb, var(--card-bg) 100%, transparent 20%) 74%, var(--card-bg) 100%);
}
.cards-module__scene-card__content.dr .expandable::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg-drop-ready) 0%, transparent 90%) 0%, color-mix(in srgb, var(--table-cell-bg-drop-ready) 100%, transparent 20%) 74%, var(--table-cell-bg-drop-ready) 100%);
}
.cards-module__scene-card__content:hover .expandable-content.expandable::before {
  /* Using linear gradients with the same style as var(--surface-color-2-hover) */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card-bg-hover) 0%, transparent 90%) 0%, color-mix(in srgb, var(--card-bg-hover) 100%, transparent 20%) 74%, var(--card-bg-hover) 100%);
}
.expandable.expanded::before,
.expandable.expanded::after {
  display: none;
}
.timeline-grid-wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: auto -webkit-min-content;
  grid-template-rows: auto min-content;
}
.timeline-grid-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.timeline-grid {
  display: grid;
  grid-auto-flow: column;
  background-color: var(--surface-color-0);
  position: relative;
  outline: none;
  height: auto;
  overflow: auto;
  width: 100%;
  overscroll-behavior-x: none;
  counter-reset: scene-counter;
  -webkit-overflow-scrolling: touch;
  /* Lets it scroll lazy */
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: scroll-position;
}
.table-cell--marker {
  counter-increment: scene-counter;
  text-transform: uppercase;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  height: 14px;
  font-size: 0.933rem;
  font-weight: bold;
  background-color: var(--marker-cell-bg);
  border-color: var(--marker-cell-border-color);
  border-bottom: thin solid var(--marker-cell-border-color);
  padding: 0 0.4rem;
  z-index: 9999;
}
.table-cell--marker-text {
  color: color-mix(in srgb, var(--marker-text-color) 100%, var(--marker-cell-text-mixin) var(--marker-cell-text-mixin-dilution));
}
.marker-spacer-cell {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  left: 0;
  height: 14px;
  border-bottom: thin solid var(--marker-cell-border-color);
  background-color: var(--marker-cell-bg);
  border-color: var(--marker-cell-border-color);
  z-index: 10000;
}
.table-cell--marker::before {
  content: counter(scene-counter);
  color: var(--text-color-secondary);
}
.table-cell--act-header {
  display: flex;
  color: saturate(color-mix(in srgb, #000 100%, var(--act-color) 60%), 20%);
  background-color: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-header-color-dilution));
  border: none;
  border-bottom: 0.2rem solid color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-header-border-color-dilution));
}
.table-cell--act-header-layout {
  display: flex;
  word-wrap: break-word;
  text-transform: uppercase;
  pointer-events: none;
}
.table-cell--act-header-label-layout {
  display: flex;
  align-items: center;
  pointer-events: none;
}
.table-cell--act-header-label {
  cursor: default;
  color: currentColor;
  font-size: 0.933rem;
  text-transform: uppercase;
  margin-left: 0.6rem;
  font-weight: 400;
  vertical-align: text-bottom;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-filter: saturate(2);
          filter: saturate(2);
}
.table-cell--act-header.first-scene-in-act {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  height: 20px;
  z-index: 510;
}
.table-cell--act-header:not(.first-scene-in-act) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 20px;
  z-index: 580;
}
@media only screen and (min-width: 768px) {
  .table-cell--act-header.first-scene-in-act {
    left: 200px;
  }
  .table-cell--act-header:not(.first-scene-in-act) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 20px;
    z-index: 520;
  }
}
.table-cell--act-header.first-scene-in-act {
  z-index: 550;
}
.table-cell--act-header.first-scene-in-act .table-cell--act-header-label::before,
.table-cell--act-header::before {
  content: attr(data-timeline-act-auto-label-prefix);
}
.table-cell--act-header.left-selected {
  border-right: 3px solid var(--primary-button-bg);
  z-index: 101;
}
.table-cell--act-header.right-selected {
  border-left: 3px solid var(--primary-button-bg);
  z-index: 101;
}
.table-cell--act-header.act-drag-start:not(.right-selected)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 2px dashed rgba(0, 0, 0, 0.2);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
.act-header-label {
  margin-left: 0;
}
.act-header-label--larger {
  font-size: 12px;
}
.table-cell--act-header-more-info-icon,
.act-header-more-info-icon {
  fill: currentColor;
  opacity: 0.8;
  margin-left: 6px;
  cursor: pointer;
  min-width: 12px;
  pointer-events: all;
}
.table-cell--act-header-more-info-icon {
  display: none;
  pointer-events: none;
}
.first-scene-in-act .table-cell--act-header-more-info-icon {
  display: block;
  pointer-events: all;
}
.table-cell--act-header-more-info-icon:hover {
  opacity: 1;
}
.timeline-controls {
  display: flex;
  font-weight: 600;
  background: var(--surface-color-0);
  z-index: 1012;
  transition: all 400ms;
}
.timeline-controls-scenes {
  flex: 1;
  display: flex;
}
.timeline-controls-zoom {
  display: none;
}
@media only screen and (min-width: 768px) {
  .timeline-controls-zoom {
    display: flex;
  }
}
.timeline-controls-zoom-button {
  padding: 0 1rem;
  background: var(--surface-color-2);
  color: var(--icon-color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-controls-zoom-button:last-child {
  border-left: thin solid var(--surface-color-2-divider-color);
}
.timeline-controls-zoom-button:disabled {
  cursor: default;
  background: initial;
}
.timeline-controls-zoom-button:disabled:hover {
  background: initial;
}
.timeline-controls-zoom-button:disabled .timeline-controls-zoom-button-icon {
  color: var(--icon-color-disabled);
}
.timeline-controls-zoom-button:hover {
  background: var(--surface-color-2-hover);
  color: var(--icon-color-tertiary);
}
.timeline-controls-zoom-button-icon {
  fill: currentColor;
}
.table-cell.cell-content {
  position: relative;
  font-size: 1.2rem;
  padding: 0.6em 1.2em;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}
.timeline-scene-image-holder {
  position: relative;
  padding-top: 54%;
  min-height: 4rem;
  opacity: 1;
  overflow: hidden;
}
.co .timeline-scene-image-holder {
  background-color: var(--table-cell-bg-hover);
}
.dr .timeline-scene-image-holder {
  opacity: 0.9;
}
.timeline-scene-image.loading {
  background-size: 40px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
.timeline-scene-image-bkg {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: -2rem;
  top: -2rem;
  width: calc(100% + 4rem);
  height: calc(100% + 4rem);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -9999999px;
  -webkit-filter: blur(1.2rem) brightness(0.5);
          filter: blur(1.2rem) brightness(0.5);
  display: none;
}
.timeline-scene-image {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: -0.2rem;
  top: -0.2rem;
  width: calc(100% + 0.4rem);
  height: calc(100% + 0.4rem);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999999px;
  background-image: var(--scene-image-placeholder);
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
}
.emotional-value-box__bar {
  position: absolute;
  width: 60%;
  left: 20%;
  bottom: 50%;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  pointer-events: none;
  border-radius: 4px 4px 0px 0px;
  background-color: color-mix(in srgb, var(--chart-color), var(--surface-color-2) var(--chart-color-dilution));
}
.table-cell .emotional-value-box__bar {
  width: 25%;
  left: 37.5%;
}
/*Timeline Expandable Scenes */
.expandable-content {
  overflow: hidden;
  position: relative;
}
.expandable-content .pensive-text-item:first-child {
  margin-top: 0.4rem;
}
.expandable-content-checkbox {
  display: none;
  position: absolute;
  bottom: 12px;
  z-index: 9999999999999;
}
.expandable-content-toggle-button {
  display: none;
  border: none;
  border: thin solid var(--surface-color-2-divider-color);
  font-size: 1.067rem;
  text-align: center;
  color: var(--text-color-primary);
  white-space: nowrap;
  background: var(--surface-color-2);
  z-index: 2;
  padding: 0.4rem 0.9rem;
  float: right;
  border-radius: 1.2rem;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 200ms;
}
.expandable-content-toggle-button--floating {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}
.expandable-content-toggle-button:hover {
  background: var(--surface-color-2-hover);
}
.expandable ~ .expandable-content-toggle-button,
.expandable .expandable-content-toggle-button {
  display: inline-block;
}
.expandable {
  max-height: 300px;
}
.expandable-content-checkbox:checked ~ .expandable {
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.expandable-content-checkbox:checked ~ .expandable::before {
  display: none;
}
.expandable-content-checkbox ~ .expandable-content-toggle-button::after,
.expandable .expandable-content-toggle-button::after {
  content: "More";
}
.expandable-content-checkbox:checked ~ .expandable-content-toggle-button::after,
.expandable.expanded .expandable-content-toggle-button::after {
  content: "Less";
}
/* Connections */
.connections-cell .text-cell-wrapper {
  position: relative;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}
.connection-cell-event-text {
  flex: 1 0;
  padding: 0.2rem 0.6rem;
}
.start .connection-cell-event-text {
  padding-left: 2rem;
}
.start.single .connection-cell-event-text {
  padding: 0.2rem 1rem;
}
.end .connection-cell-event-text {
  padding-right: 2rem;
}
.cell_content__color-bkg {
  position: absolute;
  left: 2px;
  right: -1px;
  top: 2px;
  bottom: 2px;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2) var(--connection-color-dilution));
}
.co .cell_content__color-bkg {
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2-hover) var(--connection-color-dilution));
}
.connection-cell-nav-button {
  background: none;
  position: relative;
  margin: 0px 3px;
  outline: none;
  border: none;
  width: 22px;
  flex: 0 0 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .connection-cell-nav-button {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
.co .connection-cell-nav-button {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.connections-cell:hover .connection-cell-nav-button {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.connection-cell-nav-button-bkg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: color-mix(in srgb, var(--connection-color), var(--surface-color-2-hover) var(--connection-color-dilution));
}
.connection-cell-nav-button svg {
  position: relative;
  opacity: var(--connection-nav-opacity);
}
.connection-cell-nav-button--prev svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.connection-cell-nav-button:hover svg {
  opacity: var(--connection-nav-opacity-hover);
}
.connection-cell-nav-button--next {
  right: 0;
}
.single.connection-cell-nav-button {
  display: none;
}
.start.cell_content__color-bkg {
  border-radius: 2rem 3rem 3rem 2rem;
}
.start:not(.is-content-before-blank).cell_content__color-bkg {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.start.single.cell_content__color-bkg {
  right: 2px;
  border-radius: 2rem;
}
.end.single.cell_content__color-bkg {
  right: 2px;
  border-radius: 2rem;
}
.connector.cell_content__color-bkg {
  left: 0;
  top: 2px;
  bottom: 2px;
}
.connector:not(.is-content).cell_content__color-bkg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% - 0.75rem);
  bottom: 0;
  background-color: var(--table-cell-bg);
}
.connector:not(.is-content).cell_content__color-bkg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% - 0.75rem);
  top: 0;
  background-color: var(--table-cell-bg);
}
.co .connector:not(.is-content).cell_content__color-bkg::before,
.co .connector:not(.is-content).cell_content__color-bkg::after {
  background-color: var(--table-cell-bg-hover);
}
.connector.is-blank-before-content.cell_content__color-bkg::before {
  border-top-right-radius: 30% calc(100% - 2rem);
}
.connector.is-blank-before-content.cell_content__color-bkg::after {
  border-bottom-right-radius: 30% calc(100% - 2rem);
}
.connector.is-blank-after-content.cell_content__color-bkg::before {
  border-top-left-radius: 30% calc(100% - 2rem);
}
.connector.is-blank-after-content.cell_content__color-bkg::after {
  border-bottom-left-radius: 30% calc(100% - 2rem);
}
.connector.is-content.cell_content__color-bkg {
  bottom: 2px;
}
.connector.is-content-before-blank.cell_content__color-bkg,
.connector.is-content-after-blank.cell_content__color-bkg {
  left: 0;
  right: -1px;
  top: 2px;
  bottom: 2px;
  border-radius: 3rem 3rem 3rem 3rem;
}
.connector.is-content-after-blank:not(.is-content-before-blank).cell_content__color-bkg {
  border-radius: 3rem 0 0 3rem;
}
.connector.is-content-before-blank:not(.is-content-after-blank).cell_content__color-bkg {
  border-radius: 0 3rem 3rem 0;
}
.end.cell_content__color-bkg {
  left: 0;
  right: 2px;
  border-radius: 0 2rem 2rem 0;
}
.end.is-content-after-blank.cell_content__color-bkg {
  border-radius: 3rem 2rem 2rem 3rem;
}
.connections-cell.start:not(.single),
.connections-cell.connector {
  border-right: thin solid rgba(0, 0, 0, 0);
}
.connection-cell__icon {
  width: 70%;
  left: 15%;
  top: 12px;
  position: absolute;
  z-index: 9;
  height: 5px;
  background: #cccccc;
  border-radius: 2px;
  display: none;
}
[data-timeline-cell-type="connections"].cell-content {
  padding: 0.6em;
}
[data-timeline-cell-type="connections"]:has(.is-content).cell-content {
  min-height: 12rem;
}
/* Timeline Module Dragging Ghost */
.timeline-module-dragging-ghost {
  position: absolute;
  height: auto;
  pointer-events: none;
  opacity: 0;
  z-index: 999999;
}
.drag-ready.timeline-module-dragging-ghost {
  cursor: pointer;
  pointer-events: all;
}
.dragging.timeline-module-dragging-ghost {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  pointer-events: all;
}
.timeline-module-dragging-ghost-template-holder {
  position: relative;
  padding: 0.1rem;
  opacity: 0;
  z-index: 1;
  transition: opacity 150ms;
  transition-delay: 150ms;
}
.dragging .timeline-module-dragging-ghost-template-holder {
  opacity: 1;
}
.timeline-module-dragging-ghost-bkg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.timeline-module-dragging-ghost-bkg::after {
  content: "";
  background-color: var(--dragging-item-bg);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  width: var(--startWidth);
  height: 100%;
  height: var(--startHeight);
  opacity: 0;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.2);
  border: thin solid transparent;
  border-radius: 0.4rem;
  box-sizing: border-box;
  -webkit-transform: var(--startTransform);
          transform: var(--startTransform);
}
@-webkit-keyframes show-ghost {
  to {
    opacity: 1;
    height: 100%;
    width: 100%;
    border-color: var(--surface-color-3-divider-color);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes show-ghost {
  to {
    opacity: 1;
    height: 100%;
    width: 100%;
    border-color: var(--surface-color-3-divider-color);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.dragging .timeline-module-dragging-ghost-bkg::after {
  -webkit-animation-duration: 150ms;
          animation-duration: 150ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: show-ghost;
          animation-name: show-ghost;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
/* Scene Swapping Ghost */
.scene-swapping-ghost-holder {
  pointer-events: none;
  padding: 0.8rem;
  min-height: 4rem;
}
.scene-swapping-ghost-image-holder {
  position: relative;
  width: 100%;
  padding-top: 55%;
  margin-bottom: 0.8rem;
  border-radius: 0.2rem;
  overflow: hidden;
  background-color: var(--image-bg-color);
}
.scene-swapping-ghost-image-holder--character {
  padding-top: 130%;
}
.scene-swapping-ghost-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-image: var(--scene-image-placeholder);
  pointer-events: none;
  text-indent: -99999999px;
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
}
.scene-swapping-ghost-image--character {
  background-size: cover;
  background-image: var(--character-image-placeholder);
}
.scene-swapping-ghost-heading {
  font-size: 12px;
  color: var(--text-color-primary);
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 0.3rem;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.scene-swapping-ghost-zombie-holder {
  padding: 0 3px 3px;
}
.scene-swapping-ghost-zombie-top {
  width: 100%;
  background: var(--surface-color-2-hover);
  margin-top: 10px;
  height: 12px;
}
.scene-swapping-ghost-zombie-bottom {
  width: 68%;
  background: var(--surface-color-2-hover);
  margin-top: 6px;
  height: 12px;
}
/* Timeline Act Styles */
.timeline-module-act-draggers-holder {
  position: fixed;
  min-width: 100vw;
  min-height: 2rem;
  left: 0;
  top: 6.75rem;
  pointer-events: none;
  z-index: 40;
}
.timeline-module-act-dragger {
  position: absolute;
  pointer-events: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  left: -50rem;
  -webkit-transform: translate(-50%, -0.5rem);
          transform: translate(-50%, -0.5rem);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 5;
}
.timeline-module-act-dragger-face {
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
  background: radial-gradient(#fff, #efefef);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.6);
          transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  transition: opacity 200ms, -webkit-transform 200ms;
  transition: transform 200ms, opacity 200ms;
  transition: transform 200ms, opacity 200ms, -webkit-transform 200ms;
}
.placed .timeline-module-act-dragger-face {
  pointer-events: all;
  width: 3rem;
  height: 3rem;
}
.timeline-module-act-dragger.dragging .timeline-module-act-dragger-face,
.timeline-module-act-dragger:hover .timeline-module-act-dragger-face {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.timeline-module-act-dragger.dragging .timeline-module-act-dragger-face {
  opacity: 0.7;
}
.show-left .timeline-module-act-dragger-face::before {
  content: "";
  position: absolute;
  border: 6px solid transparent;
  border-right-width: 7px;
  border-right-color: var(--primary-button-bg);
  border-left-width: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 6px;
}
.show-left:not(.show-right) .timeline-module-act-dragger-face::before {
  left: 11px;
}
.show-right .timeline-module-act-dragger-face::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
  border-left-width: 7px;
  border-left-color: var(--primary-button-bg);
  border-right-width: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 6px;
}
.show-right:not(.show-left) .timeline-module-act-dragger-face::after {
  left: 13px;
}
.timeline-module-act-drop-indicator {
  position: absolute;
  left: -50rem;
  width: 0.5rem;
  height: 2rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: var(--primary-button-bg);
  z-index: 1;
}
.timeline-module-act-start-indicator {
  position: absolute;
  left: -50rem;
  width: 0;
  height: 2rem;
  border-left: 2px dashed rgba(0, 0, 0, 0.3);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
.timeline-grid {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (max-width: 768px) {
  .timeline-grid {
    grid-template-columns: initial !important;
    grid-auto-columns: calc(100% - 150px) !important;
  }
}
/*//////////////////////////////*/
/*/ /////////CARDS VIEW//////////*/
/*//////////////////////////////*/
.cards-module {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-color-0);
}
.cards-module__cards-holder {
  display: grid;
  grid-template-columns: 1fr;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.cards-module__act-container {
  display: flex;
  flex-direction: column;
}
.cards-module__act-container__cards-holder {
  flex: 1;
  position: relative;
  display: grid;
  padding: 2.2rem 2.2rem 3rem;
  grid-template-columns: 1fr;
  grid-gap: 1.6rem;
  min-height: 170px;
}
@media only screen and (min-width: 320px) {
  .cards-module__act-container__cards-holder {
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 420px) {
  .cards-module__act-container__cards-holder {
    grid-template-columns: 1fr 1fr;
  }
  .scene-card__content__image-thumb {
    max-height: calc(100vw * 0.24);
  }
}
@media only screen and (min-width: 540px) {
  .cards-module__act-container__cards-holder {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .scene-card__content__image-thumb {
    max-height: calc(100vw * 0.18);
  }
}
@media only screen and (min-width: 800px) {
  .cards-module__act-container__cards-holder {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .scene-card__content__image-thumb {
    max-height: calc(100vw * 0.13);
  }
}
@media only screen and (min-width: 1500px) {
  .cards-module__act-container__cards-holder {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .scene-card__content__image-thumb {
    max-height: calc(100vw * 0.1);
  }
}
.scene-card__content-skeleton-text {
  width: 100%;
  height: 14px;
  border-radius: 0.4rem;
}
.scene-card__content-skeleton-text--meta {
  height: 10px;
  width: 33%;
}
.scene-card__content-skeleton-text--heading {
  height: 18px;
  width: 75%;
}
.scene-card__content-skeleton-text--short {
  height: 14px;
  width: 40%;
}
.scene-card__content-marker {
  display: flex;
  align-items: center;
}
.cards-module__scene-card-heading {
  font-size: 12px;
  font-weight: bold;
}
.scene-card__content-marker-text {
  font-size: 0.933rem;
  color: var(--marker-text-color);
  text-transform: uppercase;
  -webkit-filter: brightness(0.7) saturate(2.5);
          filter: brightness(0.7) saturate(2.5);
}
.act-header-label::before {
  content: attr(data-timeline-act-auto-label-prefix);
}
/* Cards View */
.cards-module__act-container-header,
.page-module__act-container-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  color: var(--text-color-primary);
  cursor: initial;
  font-size: 12px;
  text-transform: uppercase;
  /* margin-left: 6px; */
  font-weight: 400;
  vertical-align: text-bottom;
  background-color: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-header-color-dilution));
  border-bottom: 0.2rem solid color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-header-border-color-dilution));
  padding: 4px 17px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
}
.cards-module__scene-card {
  font-size: 1.2rem;
  position: relative;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.cards-module__scene-card.empty-card {
  position: absolute;
  inset: 0;
}
.cards-module__scene-card__content {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--text-color-primary);
  padding: 1.2rem;
  background: var(--card-bg);
  border-radius: 0.8rem;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 2px 2px rgba(0, 0, 0, 0.12);
  transition: box-shadow 100ms ease-in-out, -webkit-transform 100ms;
  transition: box-shadow 100ms ease-in-out, transform 100ms;
  transition: box-shadow 100ms ease-in-out, transform 100ms, -webkit-transform 100ms;
  z-index: 0;
}
.cards-module__scene-card__content.dr {
  background: var(--table-cell-bg-drop-ready);
}
.empty-card .cards-module__scene-card__content {
  cursor: default;
  position: absolute;
  inset: 0;
  background: none;
  box-shadow: none;
}
.drop-highlight-left .cards-module__scene-card__content {
  -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem);
}
.drop-highlight-right .cards-module__scene-card__content {
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}
.cards-module__scene-card__content:hover {
  background-color: var(--card-bg-hover);
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.empty-card .cards-module__scene-card__content:hover {
  background-color: unset;
  box-shadow: none;
}
.cards-module__scene-card__content:not(:has(.expandable)) .cards-module__scene-card-action {
  max-height: 15rem;
}
.cards-module__scene-card-action {
  position: relative;
  overflow: hidden;
  padding-bottom: 10px;
}
.cards-module__scene-card__content--skeleton {
  pointer-events: none;
}
.cards-module__scene-card__content.dragging {
  opacity: 0.25;
  pointer-events: none;
}
.scene-card__content-skeleton {
  background-size: 200%;
  background-position: 100% 0;
  background-color: var(--skeleton-bg-color-stop-1);
  background-image: linear-gradient(120deg, var(--skeleton-bg-color-stop-1) 0%, var(--skeleton-bg-color-stop-1) 30%, var(--skeleton-bg-color-stop-2) 50%, var(--skeleton-bg-color-stop-1) 70%, var(--skeleton-bg-color-stop-1) 100%);
  border-radius: 0.4rem;
}
.scene-card__content-skeleton-image {
  width: 100%;
  padding-top: 52%;
}
.skeleton-wave > * {
  -webkit-animation: wave 2s infinite linear;
          animation: wave 2s infinite linear;
}
.pensive-scene-card {
  z-index: 0;
}
.pensive-scene-card:hover {
  z-index: 10;
}
.pensive-scene-card.showing-connections {
  z-index: 20;
}
.drop-indicator {
  width: 3px;
  background: var(--primary-button-bg);
  position: absolute;
  z-index: 999999;
  pointer-events: none;
}
.drop-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  left: 0;
  -webkit-transform: translate(-4px, -4px);
          transform: translate(-4px, -4px);
  border: 4px solid transparent;
  border-top-width: 5px;
  border-top-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--vertical::before {
  -webkit-transform: translate(-3px, -2.5px);
          transform: translate(-3px, -2.5px);
  border: 4px solid transparent;
  border-left-width: 5px;
  border-left-color: var(--primary-button-bg);
}
.drop-indicator::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  left: 0;
  -webkit-transform: translate(-4px, 4px);
          transform: translate(-4px, 4px);
  border: 4px solid transparent;
  border-bottom-width: 5px;
  border-bottom-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--vertical::after {
  top: 0;
  right: 0;
  left: unset;
  bottom: unset;
  -webkit-transform: translate(3px, -2.5px);
          transform: translate(3px, -2.5px);
  border: 4px solid transparent;
  border-right-width: 5px;
  border-right-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--first::before {
  -webkit-transform: translate(0, -4px);
          transform: translate(0, -4px);
  border-left-width: 0;
}
.drop-indicator.drop-indicator--first.drop-indicator--vertical::before {
  -webkit-transform: translate(-4px, 0);
          transform: translate(-4px, 0);
  border: 7px solid transparent;
  border-left-width: 9px;
  border-top-width: 0;
  border-left-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--first::after {
  -webkit-transform: translate(0, 4px);
          transform: translate(0, 4px);
  border-left-width: 0;
}
.drop-indicator.drop-indicator--first.drop-indicator--vertical::after {
  top: 0;
  right: 0;
  left: unset;
  bottom: unset;
  -webkit-transform: translate(4px, 0);
          transform: translate(4px, 0);
  border: 7px solid transparent;
  border-right-width: 9px;
  border-top-width: 0;
  border-right-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--last::before {
  -webkit-transform: translate(-4px, -4px);
          transform: translate(-4px, -4px);
  border-right-width: 0;
}
.drop-indicator.drop-indicator--last.drop-indicator--vertical::before {
  -webkit-transform: translate(-4px, -4px);
          transform: translate(-4px, -4px);
  border: 7px solid transparent;
  border-left-width: 9px;
  border-bottom-width: 0;
  border-left-color: var(--primary-button-bg);
}
.drop-indicator.drop-indicator--last::after {
  -webkit-transform: translate(-4px, 4px);
          transform: translate(-4px, 4px);
  border-right-width: 0;
}
.drop-indicator.drop-indicator--last.drop-indicator--vertical::after {
  top: 0;
  right: 0;
  left: unset;
  bottom: unset;
  -webkit-transform: translate(4px, -4px);
          transform: translate(4px, -4px);
  border: 7px solid transparent;
  border-right-width: 9px;
  border-bottom-width: 0;
  border-right-color: var(--primary-button-bg);
}
/*///////////////////*/
/*/ ////PAGE VIEW/////*/
/*///////////////////*/
.page-module {
  background: var(--surface-color-0);
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
/* Scene Nav Holder */
.page-editor-navigator {
  display: none;
  min-width: 13rem;
  max-height: calc(100vh - 14rem);
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  z-index: 9999;
}
@media only screen and (min-width: 768px) {
  .page-editor-navigator {
    display: flex;
  }
}
.page-editor-top-buffer {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-color-0);
  min-height: 3rem;
  cursor: default;
}
.page-editor-top-buffer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--surface-color-0);
}
.page-editor-top-buffer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1rem;
  width: calc(100% + 2rem);
  height: 100%;
  background: transparent;
  box-shadow: inset 0 -0.9rem 0.9rem -1.1rem var(--pages-top-shadow-color);
}
.page-editor-overlays,
.page-right-buffer {
  display: none;
  position: relative;
  margin-top: 3rem;
  min-width: 10rem;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .page-editor-overlays,
  .page-right-buffer {
    display: block;
  }
}
.page-editor-overlays {
  counter-reset: scene-overlay-counter;
}
.page-editor-scene-overlay {
  counter-increment: scene-overlay-counter;
  width: 100%;
  height: 100%;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding: 0 1rem;
  color: #969696;
  font-size: 0.933rem;
}
/* Page Views Holder */
.page-editor-page {
  /* stylelint-disable */
  container-type: inline-size;
  /* stylelint-enable */
  position: relative;
  width: 100%;
  max-width: calc(82 * 1rem);
  min-height: 90%;
  padding: 0;
  background: var(--surface-color-2);
  border-radius: 2px;
  overflow: clip;
}
.page-editor-page--hidden-layout {
  position: absolute;
  width: calc(82 * 1rem);
}
[data-page-mode="page_editor"] .page-editor-page {
  cursor: text;
  padding-bottom: 5rem;
}
.page-editor-page::before {
  content: "";
  position: absolute;
  left: 0;
  top: 79px;
  width: 0.3rem;
  bottom: 0;
  background: color-mix(in srgb, var(--last-act-color), var(--surface-color-2) var(--act-color-dilution));
}
/* Page Editor View */
[data-page-mode="page_editor"] .page-editor-wrapper {
  opacity: 1;
  pointer-events: unset;
  height: auto;
}
[data-page-mode="page_editor"] .page-viewer-menu-item {
  display: none;
}
[data-page-mode="page_editor"] .switch-page-view-button-label::before {
  content: "Text Editor";
}
.text-item-text-input {
  position: relative;
  color: var(--text-color-primary);
  text-align: left;
  font-size: 1.333rem;
  min-width: 1rem;
  min-height: 2.4rem;
  line-height: 20px;
  width: 100%;
  border-radius: 0;
  box-sizing: content-box;
  padding-top: 0;
  padding-bottom: 0;
  /* stylelint-disable */
  /* stylelint-enable */
  display: block;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}
[data-font-style="traditional"] .text-item-text-input {
  font-family: "Courier Final Draft", "Courier Prime", "Courier New", monospace;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1em;
  min-height: 1em;
  color: var(--text-color-primary);
}
[data-font-style="traditional"] .switch-page-font-family-button-label::before {
  content: "Courier";
}
[data-font-style="modern"] .switch-page-font-family-button-label::before {
  content: "Open Sans";
}
[data-edit-mode="collection"] .text-item-text-input {
  border-left: 0.3rem solid color-mix(in srgb, var(--text-item-act-color), var(--surface-color-2) var(--act-color-dilution));
}
[data-edit-mode="collection"] .text-item-text-input.first-text-item {
  border-top: thin dashed var(--surface-color-3-divider-color);
}
.text-item-text-input.removing {
  -webkit-animation: remove-text 0.2s ease-in-out;
          animation: remove-text 0.2s ease-in-out;
}
.h-inset--page .text-item-text-input[style*="--data-padding-bottom"]:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 8px);
  height: 23px;
  background: var(--surface-color-0);
  -webkit-transform: translate(-4px, 0);
          transform: translate(-4px, 0);
  z-index: 99;
  box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.1);
}
@-webkit-keyframes remove-text {
  0% {
    background: transparent;
  }
  30% {
    background: #fbe9e9;
  }
  100% {
    background: transparent;
  }
}
@keyframes remove-text {
  0% {
    background: transparent;
  }
  30% {
    background: #fbe9e9;
  }
  100% {
    background: transparent;
  }
}
.text-item-text-input.merging {
  -webkit-animation: merge-text 0.6s forwards ease-in-out;
          animation: merge-text 0.6s forwards ease-in-out;
}
@-webkit-keyframes merge-text {
  0% {
    border-top-color: transparent;
  }
  33% {
    border-top-color: #f7d4d3;
  }
  66% {
    border-top-color: transparent;
  }
  100% {
    border-top-color: #f7d4d3;
  }
}
@keyframes merge-text {
  0% {
    border-top-color: transparent;
  }
  33% {
    border-top-color: #f7d4d3;
  }
  66% {
    border-top-color: transparent;
  }
  100% {
    border-top-color: #f7d4d3;
  }
}
.text-item-text-input.changing {
  -webkit-animation: change-text 0.1s forwards ease-in-out;
          animation: change-text 0.1s forwards ease-in-out;
}
@-webkit-keyframes change-text {
  0% {
    background: transparent;
  }
  30% {
    background: var(--surface-color-2-hover);
  }
  100% {
    background: transparent;
  }
}
@keyframes change-text {
  0% {
    background: transparent;
  }
  30% {
    background: var(--surface-color-2-hover);
  }
  100% {
    background: transparent;
  }
}
/* Scenes Overview View */
.page-editor-wrapper,
.page-scene-overview-wrapper {
  opacity: 0;
  pointer-events: none;
  height: 0;
}
[data-page-mode="page_viewer"] .page-scene-overview-wrapper {
  opacity: 1;
  pointer-events: unset;
  height: auto;
}
[data-page-mode="page_viewer"] .page-editor-menu-item {
  display: none;
}
[data-page-mode="page_editor"] [data-drag-items] {
  display: none;
}
[data-page-mode="page_viewer"] .page-editor-scene-overlay {
  padding-top: 3.6rem;
}
[data-page-mode="page_viewer"] .switch-page-view-button-label::before {
  content: "Overview";
}
.page-module__scene-container {
  width: 100%;
  max-width: 900px;
  margin: 4rem auto;
  min-height: 90%;
  padding: 0;
  background: var(--surface-color-2);
  border-radius: 2px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  cursor: text;
  overflow: clip;
}
.page-module__act-container__scenes-holder {
  position: relative;
  background: var(--surface-color-2);
}
.page-module__act-container__scenes-holder:first-child {
  padding-top: 2rem;
}
.page-module__act-container__scenes-holder:last-child {
  padding-bottom: 2rem;
}
.page-module__act-container__scenes-holder::before {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 3px;
  opacity: 0.75;
  background: var(--act-color);
}
.page-module__page-scene {
  position: relative;
  margin: 2rem auto 0;
  max-width: 64rem;
}
.page-module__page-scene-content {
  padding: 2rem;
  border-radius: 0.8rem;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 4px 12px rgba(0, 0, 0, 0);
  border: thin solid transparent;
  font-size: 1.2rem;
  background-color: var(--page-scene-bg);
  color: var(--text-color-primary);
  transition: box-shadow 100ms ease-in-out, -webkit-transform 100ms;
  transition: box-shadow 100ms ease-in-out, transform 100ms;
  transition: box-shadow 100ms ease-in-out, transform 100ms, -webkit-transform 100ms;
}
.page-module__page-scene.drop-highlight-above .page-module__page-scene-content {
  -webkit-transform: translateY(-1rem);
          transform: translateY(-1rem);
}
.page-module__page-scene.drop-highlight-below .page-module__page-scene-content {
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}
.page-module__page-scene.dr .page-module__page-scene-content {
  background: var(--table-cell-bg-drop-ready);
}
.page-module__page-scene.dragging {
  opacity: 0.25;
  pointer-events: none;
}
.page-module__page-scene:not(.empty-card):hover .page-module__page-scene-content {
  cursor: pointer;
  background-color: var(--page-scene-bg-hover);
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 4px 12px rgba(0, 0, 0, 0.12);
}
.page-module__page-scene.empty-card {
  box-shadow: none;
  height: 20rem;
}
.page-module__page-scene:first-child {
  margin-top: 0;
}
.page-module__page-scene--empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
  color: var(--text-color-muted);
  border: 2px dashed var(--draggable-item-drop-zone-border-color);
  border-radius: 6px;
}
.empty-card .page-module__page-scene--empty {
  height: 100%;
  min-height: unset;
}
.drop-highlight-empty .page-module__page-scene--empty {
  background-color: var(--draggable-item-drop-target-bg);
  border-color: var(--primary-button-bg);
  color: var(--primary-button-bg);
}
.page-scene-empty-message {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  color: var(--text-color-muted);
}
.page-module__page-scene:last-child .page-scene__content {
  border-bottom: none;
}
.page-scene-label {
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
}
.page-scene-heading {
  font-size: 1.2rem;
  text-transform: uppercase;
}
.page-scene-body,
.page-scene-summary {
  font-size: 1.2rem;
}
.page-scene__content__heading__scene-number {
  color: var(--text-color-primary);
}
.page-scene-body-text {
  color: var(--text-color-primary);
  font-size: 1.2rem;
  line-height: 1.65em;
  margin-top: 0.2rem;
}
.page-scene__content__dialogue-name {
  margin: 12px 0 0 34%;
}
.page-scene__content__dialogue-line {
  margin: 4px 0 0 14%;
  width: 65%;
}
.page-scene__notes-text {
  font-size: 1.2rem;
  color: #8c8c8c;
  background: #f9f9f9;
  display: block;
  box-sizing: border-box;
  padding: 12px;
  border: thin solid #efede1;
  border-radius: 3px;
}
.page-scene-emotional-value {
  color: var(--text-color-primary);
  display: block;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.page-scene-emotional-value-shift {
  font-weight: 600;
  display: inline-block;
}
.page-scene-marker {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}
.page-scene-marker-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.page-scene-marker-text {
  font-size: 10px;
  margin-left: 5px;
  color: var(--text-color-primary);
  text-transform: uppercase;
}
.page-scene__content-theme {
  display: flex;
  align-items: center;
}
.page-scene__content-theme-icon {
  fill: green;
}
.page-scene__content-theme-text {
  font-size: 10px;
  color: var(--text-color-primary);
  text-transform: uppercase;
}
.page-scene-characters {
  margin-top: 1rem;
}
.page-scene__character-image-holder {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  position: relative;
  margin-right: -10px;
}
.page-scene__character-image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--image-bg-color);
  text-indent: -99999999999px;
  overflow: hidden;
}
.page-module-scene-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}
.page-module__page-scene .pensive-story-events-wrapper {
  position: relative;
  background: var(--page-scene-bg);
  padding-bottom: 1rem;
}
.page-module__page-scene.dr .pensive-story-events-wrapper {
  background: var(--table-cell-bg-drop-ready);
}
.page-module__page-scene .pensive-story-events-wrapper::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 2rem;
  z-index: 2;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page-scene-bg) 0%, transparent 90%) 0%, color-mix(in srgb, var(--page-scene-bg) 100%, transparent 20%) 74%, var(--page-scene-bg) 100%);
}
.page-module__page-scene:hover .pensive-story-events-wrapper::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 2rem;
  z-index: 2;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page-scene-bg-hover) 0%, transparent 90%) 0%, color-mix(in srgb, var(--page-scene-bg-hover) 100%, transparent 20%) 74%, var(--page-scene-bg-hover) 100%);
}
.page-module__page-scene.dr .pensive-story-events-wrapper::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 2rem;
  z-index: 2;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--table-cell-bg-drop-ready) 0%, transparent 90%) 0%, color-mix(in srgb, var(--table-cell-bg-drop-ready) 100%, transparent 20%) 74%, var(--table-cell-bg-drop-ready) 100%);
}
@media only screen and (min-width: 768px) {
  .page-module__page-scene:hover .pensive-story-events-wrapper {
    background: var(--page-scene-bg-hover);
  }
  .page-module__page-scene:hover .page-module__page-scene .pensive-story-events-wrapper {
    background: var(--page-scene-bg-hover);
  }
}
/* Page Editor View */
.page-editor {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-height: 90vh;
}
/* Page Editor Markers */
.page-editor-scene-overlay-marker {
  display: flex;
  align-items: center;
  justify-content: start;
  background: var(--page-editor-marker-bg);
  color: var(--text-color-primary);
  font-size: 0.933rem;
  min-height: 2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.1rem 0.8rem 0.1rem 0.8rem;
  position: -webkit-sticky;
  position: sticky;
  text-transform: uppercase;
  top: 4rem;
  border-radius: 0.3rem;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color);
  -webkit-transform: translateY(calc(-50% + 0.5px));
          transform: translateY(calc(-50% + 0.5px));
}
.page-editor-scene-overlay-marker:not(.no-hover):hover {
  background: var(--page-editor-marker-bg-hover);
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), -3px 6px 12px -4px rgba(95, 95, 95, 0.12);
}
.professional-dropdown-selected-item.page-editor-scene-overlay-marker {
  background: var(--surface-color-2-hover);
  color: var(--primary-button-bg);
  box-shadow: 0 0 0 1px var(--primary-button-bg);
}
.page-editor-scene-overlay-marker::before {
  content: counter(scene-overlay-counter);
  color: inherit;
}
.page-editor-scene-overlay-marker::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: inherit;
  border: thin solid transparent;
  position: absolute;
  left: 0;
  border-left: thin solid var(--surface-color-2-divider-color);
  border-bottom: thin solid var(--surface-color-2-divider-color);
  top: 50%;
  border-radius: 0 0 0 0.2rem;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.professional-dropdown-selected-item.page-editor-scene-overlay-marker::after {
  border-left: thin solid var(--primary-button-bg);
  border-bottom: thin solid var(--primary-button-bg);
}
/* Page Editor Page Break Overlays */
.page-break-overlays {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--page-height) - var(--page-break-height)), var(--page-break-shadow-top-color) calc(var(--page-height) - var(--page-break-height)), var(--surface-color-0) calc(var(--page-height) - calc(var(--page-break-height) - 4px)), var(--surface-color-0) calc(var(--page-height) - 3px), var(--page-break-shadow-bottom-color) var(--page-height));
  font-size: 0.933rem;
  pointer-events: none;
  max-width: calc(82 * 1rem);
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .page-break-overlays {
    display: block;
  }
}
/* stylelint-enable */
.page-break-overlay {
  position: absolute;
  width: 100%;
  height: var(--page-break-height);
  display: flex;
  align-items: center;
  z-index: 1;
}
.page-break-overlay::before {
  content: attr(data-page-number);
  font-size: 1.333rem;
  margin-left: auto;
  margin-right: clamp(calc(5rem * 0.2), 6vw, 6rem);
  color: var(--text-color-primary);
  -webkit-transform: translateY(7rem);
          transform: translateY(7rem);
}
/* stylelint-disable */
.page-editor-overlay-utility-button {
  fill: #969696;
  aspect-ratio: 1;
  width: 2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.7rem;
  margin-right: -0.1rem;
}
/* stylelint-enable */
.professional-dropdown-selected-item .page-editor-overlay-utility-button {
  fill: var(--primary-button-bg);
}
.page-editor-overlay-utility-button.professional-dropdown-selected-item {
  background: #caced1;
  fill: #828282;
}
.page-editor-overlay-marker {
  white-space: nowrap;
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
  margin-left: 0.6rem;
}
.professional-dropdown-selected-item .page-editor-overlay-marker {
  -webkit-filter: brightness(1);
          filter: brightness(1);
  color: inherit !important;
}
/*/////////////////////*/
/*/ ///CHARACTERS VIEW///*/
/*/////////////////////*/
.home-module__character-list-item--clickable {
  cursor: pointer;
}
.characters-module__cards-scroller {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  background: var(--surface-color-0);
  -webkit-overflow-scrolling: touch;
}
.characters-module__cards-holder {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
  grid-auto-rows: minmax(min-content, max-content);
  grid-gap: 2rem;
  padding: 2.2rem 2.2rem 9rem;
  outline: none;
}
.characters-module_cards-holder-empty-dropzone {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 2.2rem;
  z-index: 1;
  border-radius: 0.8rem;
  font-size: 1.333rem;
  color: var(--text-color-muted);
  transition: all 150ms;
  border: 2px dashed var(--draggable-item-drop-zone-border-color);
}
.drop-highlight-empty.characters-module_cards-holder-empty-dropzone {
  background-color: var(--draggable-item-drop-target-bg);
  border-color: var(--primary-button-bg);
  color: var(--primary-button-bg);
}
.characters-module_cards-holder-empty-dropzone-message {
  font-size: 1.333rem;
  font-weight: 600;
  transition: all 150ms;
}
@media only screen and (min-width: 600px) {
  .characters-module__cards-holder {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 800px) {
  .characters-module__cards-holder {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1000px) {
  .characters-module__cards-holder {
    grid-template-columns: repeat(4, 1fr);
  }
}
.characters-module__new-character-button {
  position: absolute;
  bottom: 22px;
  right: 30px;
}
[data-can-edit="no"] .character-module-editor-only {
  display: none;
}
.character-card {
  position: relative;
  cursor: pointer;
  padding: 1rem;
  height: 100%;
  background: var(--card-bg);
  border-radius: 0.8rem;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 2px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: box-shadow 100ms, -webkit-transform 100ms;
  transition: box-shadow 100ms, transform 100ms;
  transition: box-shadow 100ms, transform 100ms, -webkit-transform 100ms;
}
.character-card > * {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.character-card.dragging {
  opacity: 0.25;
  pointer-events: none;
}
.drop-highlight-left .character-card {
  -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem);
}
.drop-highlight-right .character-card {
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}
@media only screen and (min-width: 768px) {
  .character-card:hover {
    background: var(--card-bg-hover);
    box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}
.character-card-masthead {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding-top: 62%;
  background: linear-gradient(45deg, #5e6671, #8b939e);
  overflow: hidden;
}
.character-card-cover-image {
  background-color: var(--image-bg-color);
  background-repeat: no-repeat;
  background-image: url(/web-app/img/image_search_input_spinner.gif);
  background-position: center center;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: saturate(0.5);
          filter: saturate(0.5);
}
.character-card-image-spacer {
  padding-top: 4%;
  width: 100%;
}
/* stylelint-disable */
.character-card-headshot {
  position: relative;
  width: 50%;
  aspect-ratio: 0.7;
  min-width: 8rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.1rem;
  margin: 0 auto;
  display: block;
  -o-object-position: center 25%;
     object-position: center 25%;
  background: var(--image-bg-color);
  border: clamp(0.2rem, 1vw, 0.3rem) solid var(--surface-color-2-divider-color);
  box-sizing: content-box;
  box-shadow: 0 11px 18px rgba(0, 0, 0, 0.075);
}
/* stylelint-enable */
.character-card-title {
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  color: var(--text-color-primary);
  margin-top: 1.4rem;
  display: block;
}
.character-card-subtitle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.933rem;
  color: var(--text-color-primary);
  opacity: 0.8;
  text-transform: uppercase;
  margin: 0.8rem 0 1rem;
}
.character-card-info-tags {
  display: flex;
  gap: 1rem;
  margin: 2rem 0 1.2rem;
  align-items: center;
  justify-content: center;
}
.character-card-info-tags:empty {
  display: none;
}
.character-card-info-tag {
  font-size: 1.2rem;
  padding: 0.4em 0.8em;
  border-radius: 0.4rem;
  color: var(--text-color-primary);
}
.character-card-info-tag--blue {
  background: var(--character-scene-count-tag-bg);
}
.character-card-info-tag--green {
  background: var(--character-line-count-tag-bg);
}
.sortable-placeholder {
  display: inline-block;
  background: rgba(0, 0, 0, 0.15);
  min-width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*//////////////////////*/
/*/ //STORY STATS VIEW///*/
/*//////////////////////*/
.stats-module__overview-container__graph-holder-limit-checkbox {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.stats-module__overview-container__graph-holder-limit-label {
  display: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.2em 1.2em 0.18em 1em;
  background: #f0f0f0;
  border-radius: 3em;
  color: #8e8e8e;
  margin: 1.2rem 0.4rem;
  cursor: pointer;
  font-size: 0.933rem;
  color: #a4a4a4;
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
.stats-module__overview-container__graph-holder-limit-label::before {
  content: "+ More";
}
.stats-module__overview-container__graph-holder-limit-label:hover {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.graph-legend-label-holder--limit ~ .stats-module__overview-container__graph-holder-limit-label {
  display: block;
}
.stats-module__overview-container__graph-holder-limit-checkbox:checked ~ .stats-module__overview-container__graph-holder-limit-label::before {
  content: "- Less";
}
.graph-legend-label-holder--limit .graph-legend-label-holder {
  display: none;
}
.graph-legend-label-holder:nth-child(-n + 4) {
  display: flex;
}
.stats-module__overview-container__graph-holder-limit-checkbox:checked ~ .graph-legend-label-holder--limit .graph-legend-label-holder {
  display: flex;
}
.stats-module-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.stats-module__stats-holder {
  background: var(--surface-color-0);
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "overview" "lists" "charts";
  grid-gap: 40px;
  flex: 1;
}
@media only screen and (min-width: 600px) {
  .stats-module__stats-holder {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "overview overview overview overview" "lists lists charts charts";
  }
}
.stats-module__overview-holder {
  grid-area: overview;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  grid-template-rows: auto;
  grid-gap: 40px;
}
.stats-module__characters-holder {
  grid-area: characters;
}
.stats-module__charts-holder {
  grid-area: charts;
}
.stats-module__charts-holder--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin-bottom: 12px;
}
.stats-module__chart-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}
.stats-module__stats-container,
.stats-module__overview-container,
.stats-module__list-item-container {
  display: flex;
  margin-top: 8px;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0px 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 400ms;
}
.stats-module__stats-container {
  background: var(--surface-color-2);
  margin-top: 0;
}
.stats-module__list-item-container {
  background: var(--surface-color-2);
}
.is-showing-side-panel .stats-module__overview-container,
.is-showing-side-panel .stats-module__list-item-container {
  opacity: 0.3;
  pointer-events: none;
}
.stats-module__overview-container {
  position: relative;
  min-height: 180px;
  height: 100%;
  margin-top: 0;
}
.stats-module__stats-container__no-data-warning-holder {
  position: relative;
  width: 100%;
  min-height: 150px;
}
.stats-module__overview-container__no-data-warning,
.stats-module__stats-container__no-data-warning,
.stats-module__list-container__no-data-warning {
  position: absolute;
  top: calc(50% + 12px);
  text-align: center;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 14px;
  color: var(--text-color-muted);
}
.stats-module__stats-container__no-data-warning,
.stats-module__list-container__no-data-warning {
  top: 50%;
}
.stats-module__list-container__no-data-warning-holder {
  border: thin dashed var(--surface-color-2-divider-color);
  min-height: 150px;
  margin-top: 9px;
  position: relative;
}
/* Bar charts */
.stats-module__stats-container-tooltip-holder {
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 300px;
  min-height: 20px;
  opacity: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface-color-2) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--text-color-secondary);
  font-size: 12px;
  padding: 12px;
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 4px;
  z-index: 10010;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.stats-module__stats-container-tooltip-title-holder {
  border-bottom: thin solid var(--surface-color-3-divider-color);
  padding-bottom: 5px;
}
.stats-module__stats-container-tooltip-title {
  font-weight: bold;
  margin-top: 2px;
  text-transform: uppercase;
  display: -webkit-box;
  font-size: 1.2rem;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow: hidden;
  max-width: 30rem;
  -webkit-line-clamp: 1;
}
.stats-container-tooltip-title__index {
  color: var(--text-color-secondary);
}
.stats-module__stats-container-tooltip-info-holder {
  margin-top: 6px;
}
.stats-module__stats-container-tooltip-label {
  font-size: 14px;
  color: var(--text-color-secondary);
}
.stats-module__stats-container-tooltip-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color-secondary);
}
.stats-module__stats-container-label {
  font-size: 12px;
  color: var(--text-color-secondary);
  font-weight: 600;
  padding: 0 0 0.8rem 0;
}
#stats_overviews .stats-module__stats-container-label {
  padding: 0.8rem 1.2rem;
}
#stats_lists .stats-module__stats-container-label {
  padding: 0;
}
.stats-module__stats-container-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.stats-module__stats-container-instructions {
  font-size: 12px;
  color: var(--text-color-muted);
}
.stats-module__stats-container-instructions--charts-holder {
  position: absolute;
  right: 0;
}
.stats-module__overview-wrapper {
  position: relative;
  margin-top: initial;
}
.stats-module__overview-wrapper--list {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
#stats_charts {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
.stats-module__overview-container {
  flex-direction: column;
}
.stats-module__overview-container__header {
  width: 100%;
  padding: 8px 12px;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  background: var(--surface-color-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#stats_charts .stats-module__overview-container__header {
  padding: 0 0 0.8rem 0;
  background: transparent;
}
.stats-module__overview-container__header__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color-secondary);
}
.stats-module__overview-container__header__sub-label {
  font-size: 12px;
  color: var(--text-color-primary);
}
.stats-module__overview-container {
  position: relative;
}
.stats-module__overview-container__content {
  background: var(--surface-color-2);
  flex: 1;
  display: flex;
}
.stats-module__overview-container__content-wrapper {
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  align-self: center;
}
.stats-module__overview-container__graph-holder {
  display: inherit;
  height: 12rem;
}
#stats_charts .stats-module__overview-container__graph-holder {
  height: 11rem;
}
.graph-legend-label-holder {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.graph-legend-label-holder:first-child {
  margin-top: 0;
}
.graph-legend-color-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-basis: auto;
  margin: 2px 5px;
  background: color-mix(in srgb, var(--bar-color), var(--surface-color-2) var(--stats-color-dilution));
}
.graph-legend-label-items {
  display: flex;
  flex-direction: column;
}
.graph-legend-label-top {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-color-secondary);
}
.graph-legend-label-bottom {
  font-size: 11px;
  color: var(--text-color-primary);
  line-height: 12px;
}
/* Binary Comparison */
.binary-comparison-chart__figure {
  display: flex;
  flex-direction: row;
  padding: 3px;
}
.binary-comparison-chart__figure--top {
  align-items: flex-end;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  color: color-mix(in srgb, var(--max-color, #6dcd80), var(--surface-color-2) var(--stats-color-dilution));
}
.binary-comparison-chart__figure--bottom {
  align-items: flex-start;
  color: color-mix(in srgb, var(--min-color, #f07b75), var(--surface-color-2) var(--stats-color-dilution));
}
.binary-comparison-chart__figure__value {
  font-size: 44px;
  line-height: 44px;
  font-weight: 800;
  display: flex;
}
.binary-comparison-chart__figure__value__percent {
  font-size: 20px;
  line-height: 27px;
  vertical-align: text-top;
}
.binary-comparison-chart__figure__label-holder {
  margin-left: 8px;
}
.binary-comparison-chart__figure__label-text {
  font-size: 11px;
  text-transform: uppercase;
}
.binary-comparison-chart__figure__label-icon {
  font-size: 11px;
}
.binary-comparison-chart__bar-chart-holder {
  padding: 0 16px;
  margin-left: 16px;
}
.binary-comparison-chart__bars-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.binary-comparison-chart__bar-holder {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(50% - 10px);
}
.binary-comparison-chart__bar {
  position: relative;
  width: 1.2rem;
  height: 100%;
}
.binary-comparison-chart__value {
  position: absolute;
  font-size: 0.933rem;
  font-weight: 600;
  left: calc(100% + 0.5rem);
}
.binary-comparison-chart__bar-holder--top .binary-comparison-chart__value {
  top: 0.2rem;
}
.binary-comparison-chart__bar-holder--bottom .binary-comparison-chart__value {
  bottom: 0.2rem;
}
.binary-comparison-chart__bar-holder--top {
  align-items: flex-end;
  color: color-mix(in srgb, var(--max-color, #6dcd80), var(--surface-color-2) var(--stats-color-dilution));
}
.binary-comparison-chart__bar-holder--top .binary-comparison-chart__bar {
  background: color-mix(in srgb, var(--max-color, #6dcd80), var(--surface-color-2) var(--stats-color-dilution));
  border-radius: 1.2rem 1.2rem 0 0;
}
.binary-comparison-chart__bar--border-bottom {
  border-bottom: thin solid var(--surface-color-2);
}
.binary-comparison-chart__bar-holder--bottom {
  align-items: flex-start;
  color: color-mix(in srgb, var(--min-color, #f07b75), var(--surface-color-2) var(--stats-color-dilution));
}
.binary-comparison-chart__bar-holder--bottom .binary-comparison-chart__bar {
  background: color-mix(in srgb, var(--min-color, #f07b75), var(--surface-color-2) var(--stats-color-dilution));
  border-radius: 0 0 1.2rem 1.2rem;
}
.binary-comparison-chart__bar-chart-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-color-primary);
  margin-top: -8px;
  display: none;
}
.bar-chart-focus {
  fill: var(--surface-color-2-hover);
}
.barchart-bar {
  fill: color-mix(in srgb, var(--bar-color), var(--surface-color-2) var(--stats-color-dilution));
}
.horizontal-stacked-barchart--bar {
  fill: color-mix(in srgb, var(--bar-color), var(--surface-color-2) var(--stats-color-dilution));
}
.piechart-bar {
  stroke: var(--surface-color-2);
  fill: color-mix(in srgb, var(--bar-color), var(--surface-color-2) var(--stats-color-dilution));
}
.horizontal-stacked-barchart--label {
  font-size: 1.067rem;
  fill: var(--text-color-secondary);
}
/* Lists */
.stats-module__lists-holder {
  grid-area: lists;
}
.stats-module__list-wrapper {
  height: 100%;
  margin: 18px 0 12px;
}
.stats-module__list-container {
  height: 100%;
}
.stats-module__list-item-container {
  border: thin solid transparent;
  padding: 8px;
  transition: all 200ms;
  cursor: pointer;
}
.stats-module__list-item-container.selected {
  border: thin solid var(--primary-button-bg);
}
.stats-module__list-item-container.deselected {
  opacity: 0.3;
}
.stats-module__list-item-container.deselected:hover {
  opacity: 0.6;
}
.stats-module__list-item-container:hover {
  border: thin solid var(--primary-button-bg);
}
.stats-module__list-item-thumbnail {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.stats-module__list-item-thumbnail__image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.stats-module__list-item-label {
  margin-left: 12px;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-color-primary);
}
.stats-module__list-item-detail {
  margin-right: 8px;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-color-tertiary);
}
/* Side Panel */
.stats-module__side-panel {
  background: var(--surface-color-2);
  width: calc(100vw - 40px);
  top: 20px;
  bottom: 20px;
  left: -100%;
  opacity: 0;
  min-height: 200px;
  max-width: 69rem;
  position: absolute;
  border-radius: 2px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 400ms;
}
.stats-module__side-panel__hide-button {
  position: absolute;
  padding: 12px 12px;
  width: 100%;
  bottom: 0;
  font-size: 14px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: var(--surface-color-2);
  color: var(--text-color-primary);
  outline: none;
  cursor: pointer;
  transition: all 200ms;
}
.stats-module__side-panel__hide-button:hover {
  background: var(--surface-color-2-hover);
  color: var(--text-color-primary);
}
.is-showing-side-panel .stats-module__side-panel {
  left: 20px;
  opacity: 1;
}
.stats-module__side-panel__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0;
  background: var(--surface-color-2);
  text-transform: uppercase;
}
.stats-module__side-panel-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 40px;
  overflow-x: hidden;
  overflow-y: auto;
}
.stats-module__side-panel-text-items-wrapper {
  width: 100%;
  max-width: 500px;
  padding-top: 20px;
  margin: 0 auto;
}
@media only screen and (min-width: 700px) {
  .stats-module__side-panel {
    width: calc(50vw - 20px);
  }
  .stats-module__side-panel__hide-button {
    display: none;
  }
  .stats-module__side-panel-content {
    bottom: 0;
  }
}
.stats-module__side-panel-content--top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--surface-color-2);
  z-index: 2;
  padding: 0 6rem;
}
.stats-module__side-panel__scene-content {
  padding: 0 6rem;
  font-size: 1.2rem;
  color: var(--text-color-primary);
}
.stats-module__side-panel__scene-footer {
  padding: 0 6rem;
}
.stats-module__side-panel-content__scene-stats-summary-header {
  font-size: 1.333rem;
  color: var(--text-color-primary);
  font-weight: 600;
}
.stats-module__side-panel__header__act-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 0.3rem;
}
.stats-module__side-panel__header__scene-number {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-color-primary);
  font-weight: 600;
}
.stats-module__side-panel__header__scene-heading {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-color-primary);
  font-weight: 600;
}
.stats-module__side-panel__header__act-label {
  margin-left: 7px;
  color: var(--text-color-primary);
}
.stats-module__side-panel-content__scene-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 10px;
  margin-top: 12px;
  padding: 3rem 6rem 1rem;
}
.stats-module__side-panel-content__scene-stat-holder {
  background: var(--surface-color-2);
  border-radius: 4px;
  height: 100%;
}
.stats-module__side-panel-content__scene-stat-holder__header-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color-primary);
  padding: 6px 8px;
}
.stats-module__side-panel-content__scene-stat-holder__content {
  padding: 0 8px 8px;
  min-height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.stats-module__side-panel-content__scene-stat-holder__figure--primary {
  font-size: 3.2rem;
  line-height: 2.8rem;
  font-weight: 400;
  color: var(--text-color-primary);
}
.stats-module__side-panel-content__scene-stat-holder__description {
  font-weight: bold;
  color: var(--text-color-primary);
  font-size: 14px;
}
.scene-stat-holder__content__item__figure-box {
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 8px;
  border-radius: 4px;
}
.scene-stat-holder--plot-threads {
  background: color-mix(in srgb, #5d91ed, var(--surface-color-2) var(--stats-color-dilution));
}
.scene-stat-holder--character-intros {
  background: color-mix(in srgb, #71b3dc, var(--surface-color-2) var(--stats-color-dilution));
}
.scene-stat-holder--emotional-weight {
  background: color-mix(in srgb, #37bc7c, var(--surface-color-2) var(--stats-color-dilution));
}
.stats-module__side-panel__scene-action {
  margin-top: 8px;
  font-size: 12px;
}
.stats-module__marker-and-theme-holder {
  margin-top: 8px;
}
.stats-module__side-panel__scene-characters {
  margin-top: 12px;
}
.stats-module__side-panel__character-holder {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.stats-module__side-panel__character-name {
  margin-left: 12px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-color-primary);
}
.stats-module__side-panel__image-thumb {
  margin-top: 12px;
  width: 33.333%;
  max-height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  opacity: 0.9;
}
.stats-module__side-panel__scene-content__section-label {
  margin-top: 26px;
  display: block;
  font-size: 12px;
  color: var(--text-color-primary);
  font-weight: 600;
}
.stats-module__side-panel__scene-content__emotional-value-holder {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.stats-module__side-panel__scene-content__emotional-value-shift {
  font-size: 22px;
  font-weight: 600;
}
.stats-module__side-panel__scene-content__emotional-value-shift--normalized {
  margin-left: 10px;
  font-size: 14px;
  color: var(--text-color-primary);
  font-weight: 600;
}
/*//////////////////////////*/
/*/ ////SCENE NAVIGATOR//////*/
/*//////////////////////////*/
/* Scene Navigator */
.scene-navigator {
  display: none;
  min-width: 13rem;
  max-height: calc(100vh - 14rem);
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  z-index: 9999;
  background-color: #222428;
}
@media only screen and (min-width: 768px) {
  .scene-navigator {
    display: flex;
  }
}
.scene-navigator-wrapper {
  position: relative;
}
.horizontal.scene-navigator-wrapper {
  width: 100%;
}
.scene-navigator-location-marker-wrapper {
  width: 1rem;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  bottom: 0;
  right: 100%;
  pointer-events: none;
}
.horizontal .scene-navigator-location-marker-wrapper {
  width: 100%;
  height: 1rem;
  top: 0;
  left: 0;
  right: unset;
  bottom: unset;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.scene-navigator-location-marker {
  position: absolute;
  width: 0.2rem;
  border-left: 0.7rem solid var(--primary-text-color);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  top: 0;
  right: 3px;
  box-sizing: content-box;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: top 200ms, left 200ms;
}
.horizontal .scene-navigator-location-marker {
  width: 0.2rem;
  border-top: 0.7rem solid color-mix(in srgb, var(--primary-text-color), var(--surface-color-2) var(--scene-navigator-marker-dilution));
  border-right: 0.6rem solid transparent;
  border-left: 0.6rem solid transparent;
  left: unset;
  top: 0.05rem;
  bottom: unset;
  right: unset;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: top, left 200ms;
  display: none;
}
.scene-navigator-items {
  position: relative;
  max-width: 5rem;
  counter-reset: scene;
  margin-left: 1rem;
}
.horizontal .scene-navigator-items {
  width: 100%;
  max-height: unset;
  max-width: unset;
  margin-left: 0;
}
.scene-navigator-items-scroller::-webkit-scrollbar {
  display: none;
}
.scene-navigator-scenes-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 14rem);
}
.horizontal .scene-navigator-scenes-wrapper {
  flex-direction: row;
  width: 100%;
  height: 3rem;
}
.scene-navigator-item {
  flex: 1;
  position: relative;
  counter-increment: scene;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
}
.horizontal .scene-navigator-item {
  height: 100%;
  width: auto;
}
.bkg-elements {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bkg-layer {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--act-color), var(--scene-navigator-bg) var(--scene-navigator-dilution));
}
.scene-navigator-item:hover .bkg-layer {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.scene-navigator-item-label {
  position: absolute;
  z-index: 1;
  color: var(--text-color-secondary);
}
.scene-navigator-item .scene-navigator-item-label::before {
  content: counter(scene);
  opacity: 1;
}
.compressed .scene-navigator-item .scene-navigator-item-label::before {
  content: "•";
}
.scene-navigator-item:first-child .scene-navigator-item-label::before {
  content: counter(scene);
  opacity: 1;
}
.compressed .scene-navigator-item:nth-of-type(5n) .scene-navigator-item-label::before {
  content: counter(scene);
  opacity: 1;
}
.rounded-corners .scene-navigator-item:first-child {
  padding-top: 1.6rem;
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
}
.rounded-corners .scene-navigator-item:last-child {
  padding-bottom: 1.6rem;
  border-radius: 0 0 2rem 2rem;
  overflow: hidden;
}
.scene-navigator-tooltip {
  opacity: 0;
  position: absolute;
  width: 20rem;
  padding: 0.8rem;
  background: var(--dragging-item-bg);
  z-index: 100;
  top: 0;
  border-radius: 0.4rem;
  left: calc(100% + 1rem);
  /* stylelint-disable */
  -webkit-transform: translateY(calc(-50% + calc(var(--offsetTop, 0px) + var(--offsetShift, 0px))));
          transform: translateY(calc(-50% + calc(var(--offsetTop, 0px) + var(--offsetShift, 0px))));
  /* stylelint-enable */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.horizontal .scene-navigator-tooltip {
  bottom: calc(100% + 1rem);
  left: 0;
  top: unset;
  -webkit-transform: translateX(calc(-50% + calc(var(--offsetLeft, 0px) + var(--offsetShiftLeft, 0px))));
          transform: translateX(calc(-50% + calc(var(--offsetLeft, 0px) + var(--offsetShiftLeft, 0px))));
}
.scene-navigator-tooltip-arrow {
  width: 1.2rem;
  height: 1.2rem;
  background: var(--dragging-item-bg);
  position: absolute;
  left: -1px;
  top: 50%;
  border-left: thin solid var(--surface-color-3-divider-color);
  border-bottom: thin solid var(--surface-color-3-divider-color);
  /* stylelint-disable */
  -webkit-transform: translate(-50%, calc(-50% - var(--offsetShift, 0px))) rotate(45deg);
          transform: translate(-50%, calc(-50% - var(--offsetShift, 0px))) rotate(45deg);
  /* stylelint-enable */
}
.horizontal .scene-navigator-tooltip-arrow {
  bottom: 0;
  top: unset;
  left: 50%;
  -webkit-transform: translate(calc(-50% - var(--offsetShiftLeft, 0px)), 50%) rotate(-45deg);
          transform: translate(calc(-50% - var(--offsetShiftLeft, 0px)), 50%) rotate(-45deg);
}
.scene-navigator-tooltip-image {
  position: relative;
  width: 100%;
  padding-top: 63%;
  margin-bottom: 0.6rem;
  background-image: var(--scene-image-placeholder);
  background-color: var(--image-bg-color);
  background-repeat: no-repeat;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-position: center center;
}
.scene-navigator-tooltip-image::before {
  content: "";
  background-image: var(--image);
  background-repeat: no-repeat;
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: 0.2rem;
  background-size: cover;
  background-position: center center;
  z-index: 9999999;
}
.scene-navigator-tooltip-summary {
  overflow: hidden;
  margin-top: 0.2rem;
}
.scene-navigator-tooltip-summary::before {
  content: attr(data-tooltip-summary);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-color-primary);
  text-overflow: clip;
  line-height: 1.3em;
  /* stylelint-disable */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* stylelint-enable */
  max-height: 2.8em;
}
.scene-navigator-tooltip-meta {
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.1rem;
  -webkit-column-gap: 0.3rem;
     -moz-column-gap: 0.3rem;
          column-gap: 0.3rem;
  color: var(--text-color-primary);
}
.scene-navigator-tooltip-act::before {
  content: attr(data-tooltip-act-label);
}
.scene-navigator-tooltip-scene-label::before {
  content: attr(data-tooltip-scene-label);
  font-weight: bold;
}
.scene-navigator-tooltip-marker::before {
  content: attr(data-tooltip-marker-text);
  color: var(--marker-color, var(--text-color-primary));
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
}
.scene-navigator-tooltip-page-range::before {
  content: attr(data-tooltip-page-range);
}
.scene-navigator-item-marker {
  width: 0.7rem;
  height: 0.7rem;
  position: absolute;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
  left: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.horizontal .scene-navigator-item-marker {
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.rounded-corners .scene-navigator-item:first-child .scene-navigator-item-marker {
  top: unset;
  bottom: 0;
  -webkit-transform: translate(-50%, 0) rotate(45deg);
          transform: translate(-50%, 0) rotate(45deg);
}
.rounded-corners .scene-navigator-item:last-child .scene-navigator-item-marker {
  top: 2px;
  -webkit-transform: translate(-50%, 0) rotate(45deg);
          transform: translate(-50%, 0) rotate(45deg);
}
/*///////////////////////////*/
/*/ ///SCREENPLAY IMPORTER////*/
/*///////////////////////////*/
.modal__content-wrapper--import-screenplay {
  background: #f2f2f2;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.import-screenplay-header {
  height: 0px;
  min-height: 56px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99999;
  width: 100%;
  padding: 0px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: thin solid #efefef;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.01);
}
.import-screenplay-header-left,
.import-screenplay-header-right {
  display: flex;
  height: 100%;
}
.import-screenplay-header-left {
  align-items: center;
  padding-left: 12px;
}
.import-screenplay-header-logo-icon {
  fill: #555;
}
.import-screenplay-header-title {
  font-size: 18px;
  color: #565656;
  margin-left: 12px;
  height: 100%;
  border-right: thin solid #e6e6e6;
}
.import-screenplay-header-button {
  display: flex;
  align-items: center;
  padding: 0px 25px;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #7c8796;
  font-size: 15px;
  outline: none;
  cursor: pointer;
}
.import-screenplay-header-buttonwrap--single {
  border-left: thin solid #e6e6e6;
}
.import-screenplay-header-menu-wrapper {
  display: flex;
  border-left: thin solid #e6e6e6;
}
.import-screenplay-header-menu-wrapper:first-child:not(:only-child) {
  border-left: none;
}
.import-screenplay-header-button:hover {
  background: #f9f9f9;
}
.import-screenplay-header-button-text {
  margin-left: 8px;
  padding: 0 0 1px;
}
.import-screenplay-header-button {
  fill: #7c8896;
}
.import-screenplay-header-button--save {
  fill: #54c184;
}
.import-screenplay-header-button--save:hover {
  background: #f2faf5;
}
.import-screenplay-body {
  width: calc(100% - 20px);
  display: flex;
  background: #fff;
  margin: 0px auto 40px;
  border: thin solid #efefef;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.01);
}
.import-screenplay-header-title-input {
  font-size: 16px;
  height: 100%;
  color: #565656;
  padding: 6px 8px 3px;
  border: none;
  border-bottom: 2px solid transparent;
  outline: none;
  width: 300px;
  text-transform: capitalize;
  transition: all 200ms;
}
.import-screenplay-header-title-input:hover {
  background: #f9f9f9;
}
.import-screenplay-header-title-input:focus {
  border-bottom: 4px solid #03a9f4;
  padding-bottom: 1px;
  background: #f9f9f9;
}
.import-screenplay-act-structures-list-holder {
  position: relative;
  height: 100%;
  display: flex;
}
.import-screenplay-act-structures-list-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
.import-screenplay-act-structures-list-button {
  position: relative;
  height: 55px;
  -webkit-appearance: none;
  background: #fff;
  border: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: left;
  padding: 0px 44px 0 18px;
  font-size: 16px;
  color: #7b8996;
  outline: none;
  border-bottom: thin solid transparent;
  white-space: nowrap;
}
.showing-list .import-screenplay-act-structures-list-button {
  background: #f9f9f9;
}
.import-screenplay-act-structures-list-button:hover {
  background: #f9f9f9;
}
.import-screenplay-act-structures-list-button::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid #d8d8d8;
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: calc(50% + -3px);
  right: 17px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.showing-list .import-screenplay-act-structures-list-button::after {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translateY(-2%) rotate(225deg);
          transform: translateY(-2%) rotate(225deg);
}
.import-screenplay-act-structures-list {
  background: #fff;
  overflow: hidden;
  max-height: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
  transition: all 200ms;
}
.showing-list .import-screenplay-act-structures-list {
  max-height: 500px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.18);
}
.import-screenplay-act-structures-list-item {
  color: #7b8896;
  cursor: pointer;
}
.import-screenplay-act-structures-list-item.selected {
  color: #03a9f4;
  cursor: default;
}
.import-screenplay-act-structures-list-item:first-child {
  border-top: thin solid #e6e6e6;
}
.import-screenplay-act-structures-list-item-input {
  display: none;
}
.import-screenplay-act-structures-list-item-label {
  white-space: nowrap;
  display: flex;
  padding: 13px 18px;
  font-size: 14px;
}
.import-screenplay-act-structures-list-item-label:hover {
  background: #f4f3f4;
}
.import-screenplay-scenes,
.import-screenplay-characters {
  width: 100%;
}
.import-screenplay-scenes > div {
  border-bottom: 5px solid #f2f2f2;
}
.import-screenplay-characters > div {
  border-bottom: 10px solid #f2f2f2;
}
.import-screenplay-scenes > div:last-child,
.import-screenplay-characters > div:last-child {
  border-bottom: none;
}
.import-screenplay-scene {
  display: grid;
  grid-template-columns: 3fr minmax(200px, 1fr);
}
.import-screenplay-character {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 4fr);
}
.import-screenplay-scene-content-sections {
  border-right: 5px solid #f8f8f8;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: auto;
}
.import-screenplay-scene-content-section,
.import-screenplay-scene-data-section {
  position: relative;
}
.import-screenplay-scene-content-section--content {
  font-family: "Courier Final Draft", "Courier New", Courier, monospace;
  padding: 20px 40px 20px 55px;
}
.import-screenplay-scene:first-child .import-screenplay-scene-content-section--content {
  padding-top: 15px;
}
.import-screenplay-scene-text {
  display: block;
  font-size: 16px;
  line-height: 1.15em;
}
.import-screenplay-scene-text--heading {
  text-transform: uppercase;
  margin-top: 20px;
}
.import-screenplay-scene-text--action {
  margin-top: 20px;
  max-width: 600px;
}
.import-screenplay-scene-text--character {
  text-transform: uppercase;
  margin-top: 20px;
  padding-left: 34%;
}
.import-screenplay-scene-text--parenthetical {
  padding-left: 27%;
  padding-right: 27%;
}
.import-screenplay-scene-text--dialogue {
  padding-left: 14%;
  padding-right: 21%;
}
.import-screenplay-scene-text--transition {
  margin-top: 20px;
  text-transform: uppercase;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.import-screenplay-scene-text--transition .content {
  max-width: 25%;
}
.import-screenplay-scene-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-weight: bold;
  font-size: 12px;
  color: #949494;
  pointer-events: none;
  z-index: 3;
}
.import-screenplay-scene-content-section--notes {
  border-top: thin solid #efefef;
}
.import-screenplay-scene-content-section--notes .import-screenplay-scene-label {
  top: 8px;
  left: 20px;
}
.import-screenplay-scene-content-section-textarea--notes {
  resize: none;
  -webkit-appearance: none;
  border: none;
  width: 100%;
  display: block;
  outline: none;
  height: 100%;
  min-height: 120px;
  padding: 29px 11px 13px 8px;
  font-size: 14px;
  color: #03a9f4;
  white-space: pre-wrap;
  transition: all 200ms;
}
.import-screenplay-scene-content-section-textarea--notes:hover,
.import-screenplay-scene-content-section-textarea--notes:focus {
  color: #888;
  background: #fafafa;
}
.import-screenplay-scene-content-section-textarea--notes:not(:focus):hover {
  background: rgba(245, 245, 245, 0.41);
}
.import-screenplay-scene-data-sections {
  display: flex;
  flex-direction: column;
}
.import-screenplay-scene-data-section {
  border-top: thin solid #efefef;
}
.import-screenplay-scene-data-section:first-child {
  border-top: none;
}
.import-screenplay-scene-data-section:first-child > label {
  padding-top: 6px;
}
.import-screenplay-scene-data-section--notes {
  flex: 1;
}
.import-screenplay-scene-select-wrapper {
  position: relative;
}
.import-screenplay-scene-select-wrapper::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 2px solid #d8d8d8;
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: calc(50% + 4px);
  right: 20px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  pointer-events: none;
}
.import-screenplay-scene-select {
  -webkit-appearance: none;
  border: none;
  background: none;
  font-size: 14px;
  color: #bababa;
  outline: none;
  box-sizing: border-box;
  border-radius: 0;
  transition: all 200ms;
  width: 100%;
  min-height: 91px;
  display: block;
  padding: 30px 14px 10px;
  font-weight: 400;
  background-color: #ffffff;
}
.import-screenplay-scene-select.selected {
  color: #03a9f4;
}
.import-screenplay-scene-select:hover {
  color: #888;
  background: rgba(245, 245, 245, 0.41);
}
.import-screenplay-scene-list {
  font-size: 12px;
  list-style: none;
  margin-top: 28px;
  padding: 0 8px 10px;
  color: #bababa;
}
.import-screenplay-scene-list-item {
  line-height: 2em;
}
.import-screenplay-scene-list-item-radio {
  display: none;
}
.import-screenplay-scene-list-item-radio:checked + label {
  color: #03a9f4;
}
.import-screenplay-scene-list-item-radio-label {
  padding-left: 5px;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  border-radius: 3px;
  transition: all 200ms;
}
.import-screenplay-scene-list-item-radio-label:hover {
  color: #888;
  background: #f4f3f4;
}
.import-screenplay-scene-list-item-radio-icon {
  fill: #03a9f4;
  visibility: hidden;
  opacity: 0;
  margin-right: 1px;
  transition: all 200ms;
}
.import-screenplay-scene-list-item-radio:checked + label > svg {
  visibility: visible;
  opacity: 1;
}
.import-screenplay-scene-data-section--emotional-value {
  display: flex;
  justify-content: center;
}
.import-screenplay-emotional-value-component-wrapper {
  width: 100%;
  position: relative;
  height: 25px;
  margin: 40px 0 12px;
  overflow: hidden;
}
.import-screenplay-emotional-value-component {
  width: calc(100% - 16px);
  position: relative;
  height: 25px;
  margin: 0 8px;
  overflow: hidden;
  border-bottom: thin solid #ccc;
  background: #fafafa;
}
.import-screenplay-emotional-value-component-hash-marks {
  position: absolute;
  height: 5px;
  width: 133%;
  background: repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 12.5%);
  bottom: 0;
  pointer-events: none;
  z-index: 9;
}
.import-screenplay-emotional-value-component::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  border-left: thin dashed #ccc;
}
.import-screenplay-emotional-value-component-bar,
.import-screenplay-emotional-value-component-bar--value {
  position: absolute;
  width: 0%;
  left: 50%;
  height: 100%;
  pointer-events: none;
  -webkit-transform-origin: left;
          transform-origin: left;
  opacity: 0.15;
}
.import-screenplay-emotional-value-component-bar--value {
  opacity: 1;
}
.import-screenplay-scene-act-menu-button {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  border: none;
  height: 100%;
  z-index: 999;
  outline: none;
  opacity: 0.7;
  cursor: pointer;
  transition: all 200ms;
}
.import-screenplay-scene-act-menu-button:hover {
  opacity: 1;
}
.showing-act-menu .import-screenplay-scene-act-menu-button {
  opacitiy: 1;
}
.import-screenplay-scene-act-menu-button-label {
  display: block;
  white-space: nowrap;
  pointer-events: none;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.import-screenplay-scene-set-act-menu-holder {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 9999;
  background: #03a9f4;
  border: none;
  -webkit-appearance: none;
  padding: 6px;
  border-radius: 3px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 200ms;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.showing-act-menu .import-screenplay-scene-set-act-menu-holder {
  opacity: 1;
  pointer-events: all;
}
.import-screenplay-scene-set-act-menu-holder::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #03a9f4;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.import-screenplay-scene-set-act-menu-list {
  list-style: none;
  padding: 0;
  font-size: 12px;
}
.import-screenplay-scene-set-act-menu-list-item {
  line-height: 26px;
  display: block;
  padding: 2px 8px 0;
  border-radius: 3px;
  cursor: pointer;
  transition: all 200ms;
}
.import-screenplay-scene-set-act-menu-list-item:hover {
  background: rgba(99, 186, 255, 0.5);
  color: #fff;
}
.first-scene-in-act:first-of-type .import-screenplay-scene-act-menu-button {
  pointer-events: none;
}
.first-scene-in-act.last-scene-in-act .import-screenplay-scene-act-menu-button {
  pointer-events: none;
}
.last-scene-in-act:last-of-type .import-screenplay-scene-act-menu-button {
  pointer-events: none;
}
.first-scene-in-act .import-screenplay-scene-set-act-menu-list-item--next {
  display: none;
}
.last-scene-in-act .import-screenplay-scene-set-act-menu-list-item--prev {
  display: none;
}
.import-screenplay-modal {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  transition: all 200ms;
}
.is-saving .import-screenplay-modal,
.is-canceling .import-screenplay-modal,
.is-initializing .import-screenplay-modal,
.is-altering-acts .import-screenplay-modal {
  opacity: 1;
  pointer-events: all;
}
.import-screenplay-modal-bkg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.import-screenplay-modal-content-wrapper {
  width: calc(100% - 40px);
  max-width: 540px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
}
.is-saving .import-screenplay-modal-content-wrapper--save {
  display: block;
}
.is-canceling .import-screenplay-modal-content-wrapper--cancel {
  display: block;
}
.is-initializing .import-screenplay-modal-content-wrapper--init {
  display: block;
}
.is-altering-acts .import-screenplay-modal-content-wrapper--alter-acts {
  display: block;
}
.import-screenplay-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 20px 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 2px 86px rgba(0, 0, 0, 0.13);
}
.import-screenplay-modal-content-or {
  font-size: 12px;
  color: #a0a0a0;
  padding-top: 2px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: thin solid #d8d8d8;
  border-radius: 50%;
  margin: 25px auto 18px;
  position: relative;
  line-height: 36px;
}
.import-screenplay-modal-content-or::before {
  content: "";
  width: 120px;
  height: 0px;
  border-top: thin solid #d8d8d8;
  position: absolute;
  left: 100%;
  top: 50%;
}
.import-screenplay-modal-content-or::after {
  content: "";
  width: 120px;
  height: 0px;
  border-top: thin solid #d8d8d8;
  position: absolute;
  right: 100%;
  top: 50%;
}
.import-screenplay-modal-content-option-message {
  font-weight: bold;
  text-align: center;
  margin: 0 20px;
  font-size: 18px;
  color: #5f5f5f;
}
.import-screenplay-modal-content-option-message-body {
  text-align: center;
  margin: 8px 40px 0px;
  font-size: 14px;
  color: #7f7f7f;
}
.import-screenplay-modal-content-button {
  margin-top: 20px;
}
.import-screenplay-scene-text.highlighted {
  background: #e7f7fe;
}
.import-screenplay-module {
  position: absolute;
  left: 0;
  top: 56px;
  right: 0;
  bottom: 0;
  padding-bottom: 40px;
  overflow: auto;
  display: none;
}
.import-screenplay-content-grid {
  display: grid;
  padding: 20px;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  align-items: start;
  grid-column-gap: 12px;
  max-width: 1140px;
  margin: 0 auto;
}
[data-current-module-id="content"] [data-module-button-id="content"],
[data-current-module-id="characters"] [data-module-button-id="characters"] {
  border-bottom: 4px solid #03a9f4;
  padding-top: 4px;
  fill: #03a9f4;
  pointer-events: none;
}
[data-current-module-id="content"] [data-module-section-id="content"],
[data-current-module-id="characters"] [data-module-section-id="characters"] {
  display: grid;
}
.import-screenplay-module-control-panel {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  min-height: 60px;
  background: #f9f9f9;
  top: 0;
  z-index: 99999;
  border-bottom: thin solid #e4e4e4;
  border-top: thin solid white;
}
.screenplay-import-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}
.screenplay-import-sidebar-items-holder {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}
.screenplay-import-sidebar-item {
  background: #fff;
}
.screenplay-import-sidebar-items-holder > div {
  margin-top: 12px;
}
.screenplay-import-sidebar-items-holder > div:first-child {
  margin-top: 0;
}
.screenplay-import-sidebar-item-header {
  font-weight: bold;
  font-size: 12px;
  padding: 8px;
  color: #949494;
  border-bottom: thin solid #efefef;
}
.screenplay-import-sidebar-item-content {
  padding: 8px;
  min-height: 60px;
}
.screenplay-import-sidebar-item-chart-wrapper {
  display: flex;
  flex-flow: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.screenplay-import-sidebar-item-chart-wrapper > .stats-module__overview-container__graph-legend-holder {
  margin: 10px 14px 10px 0;
}
.screenplay-import-sidebar-item-chart-wrapper > .stats-module__overview-container__graph-holder {
  height: auto;
  min-height: 100px;
  margin: 8px 5px 8px 0;
}
.screenplay-import-sidebar-empty-label {
  margin: 4px 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  text-align: left;
  color: #bababa;
}
.import-screenplay-no-characters-wrapper {
  width: 100%;
  min-height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bababa;
  font-size: 14px;
}
.import-screenplay-modal-analyze-text-input-holder {
  margin-top: 14px;
  font-size: 12px;
  color: #8a8a8a;
}
.import-screenplay-modal-analyze-text-input-label-text {
  padding-left: 6px;
}
.import-screenplay-sidebar-emotional-value-range-text-holder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
}
.import-screenplay-sidebar-emotional-value-range-text {
  text-align: center;
  font-size: 14px;
  padding: 4px 0 8px;
  margin: 0;
}
.import-screenplay-sidebar-emotional-value-range-text--down {
  color: #e27c78;
}
.import-screenplay-sidebar-emotional-value-range-text--up {
  border-left: thin solid #efefef;
  color: #64c972;
}
.import-screenplay-sidebar-emotional-value-range-wrapper {
  width: 100%;
  position: relative;
  height: 10px;
  margin: 5px 0 0;
  overflow: hidden;
}
.import-screenplay-sidebar-emotional-value-range {
  width: 100%;
  position: relative;
  height: 10px;
  margin: 0;
  overflow: hidden;
  background: #f1f1f1;
}
.import-screenplay-sidebar-emotional-value-range::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  border-left: thin solid #efefef;
}
.import-screenplay-sidebar-emotional-value-range-bar--value {
  position: absolute;
  width: 0%;
  left: 50%;
  height: 100%;
  pointer-events: none;
  -webkit-transform-origin: left;
          transform-origin: left;
  opacity: 0.15;
}
.import-screenplay-sidebar-emotional-value-range-bar--down-value {
  background: #e27c78;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.import-screenplay-sidebar-emotional-value-range-bar--up-value {
  background: #64c972;
}
.import-screenplay-sidebar-emotional-value-range-bar--value {
  opacity: 1;
}
.import-screenplay-sidebar-analyze-text-buttons-holder {
  margin-top: 12px;
  display: flex;
}
.import-screenplay-sidebar-analyze-text-button {
  -webkit-appearance: none;
  border: thin solid #e0e0e0;
  background: #f7f7f7;
  color: #656565;
  padding: 6px 9px;
  font-size: 12px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.import-screenplay-sidebar-analyze-text-button:hover {
  background: #fafafa;
  color: #42a5f5;
}
.import-screenplay-sidebar-whats-this-button {
  flex: 1;
  margin: 0 9px;
  border: none;
  color: #4fa7f5;
  background: none;
  outline: none;
  cursor: pointer;
}
.import-screenplay-sidebar-whats-this-button:hover {
  text-decoration: underline;
  color: #42a5f5;
}
.import-screenplay-sidebar-text-analyzed {
  font-size: 12px;
  text-align: left;
  width: 100%;
  color: #9e9e9e;
}
.sidebar-beat-label {
  padding: 3px 8px;
  font-size: 12px;
  color: #969696;
  border-left-width: 5px;
  border-left-style: solid;
  cursor: pointer;
}
.sidebar-beat-label:hover {
  background: #f4f3f4;
}
.sidebar-beat-label:hover span {
  color: #2296f3;
}
.sidebar-skipper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sidebar-skipper-dots {
  display: flex;
  flex-direction: column;
}
.sidebar-skipper-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dcdcdc;
  margin: 1px 0px;
}
.sidebar-skipper-top-dot--middle {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.sidebar-skipper-scene-count {
  font-size: 9px;
  text-transform: uppercase;
  color: #bdbdbd;
  padding-left: 4px;
}
.screenplay-import-sidebar-theme-list {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  grid-row-gap: 6px;
  margin: 4px 0;
  font-size: 12px;
  list-style: none;
  color: #969696;
}
.screenplay-import-sidebar-theme-list-value {
  text-align: center;
  padding-left: 4px;
}
.screenplay-import-sidebar-theme-list-item-label {
  padding-left: 5px;
  display: flex;
  align-items: center;
  width: 100%;
}
/* Import Screenplay Upload Modal */
.import-screenplay-upload-modal-wrapper {
  background: #ededed;
  background-image: url(/web-app/img/importer_background_logo.png);
  background-repeat: no-repeat;
  background-size: 49%;
  background-position-x: 90%;
  background-position-y: 8%;
  max-width: initial;
}
.import-screenplay-upload-modal-wrapper .modal-close-button {
  display: none;
}
[data-upload-state="ready"] .modal-close-button,
[data-upload-state="failure"] .modal-close-button {
  display: block;
}
@media only screen and (min-width: 600px) {
  .import-screenplay-upload-modal-wrapper {
    width: 100%;
    border-radius: 6px;
    background-size: 38%;
    background-position-x: 30%;
    background-position-y: 90%;
  }
}
.import-screenplay-upload-failure-title {
  font-size: 18px;
  margin-top: 8px;
  color: #656565;
  text-align: center;
}
.import-screenplay-upload-failure--text.js-upload-failure-text {
  margin-top: 12px;
  font-size: 14px;
  color: #8c8c8c;
  text-align: center;
}
.import-screenplay-upload-failure-try-again-button {
  margin-top: 20px;
}
.import-screenplay-upload-spinner {
  width: 60px;
  height: 60px;
  position: relative;
}
.import-screenplay-upload-spinner .path {
  stroke: #03a9f4;
}
.import-screenplay-upload-modal-content {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.import-screenplay-upload-modal-content-text-holder {
  flex: 5;
  color: #252525;
  padding: 8px 43px 23px 13px;
  flex-basis: 320px;
}
.import-screenplay-upload-modal-content-text-title {
  font-size: 24px;
  display: inline-block;
  position: relative;
  letter-spacing: -0.01em;
}
.beta-text {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  -webkit-transform: translate(100%, -28%);
          transform: translate(100%, -28%);
}
.import-screenplay-upload-modal-content-text-body {
  margin-top: 8px;
  line-height: 1.4em;
  font-size: 15px;
  color: #6f6f6f;
}
.import-screenplay-upload-modal-content-text-list-title {
  font-weight: normal;
  font-size: 18px;
  margin-top: 25px;
}
.import-screenplay-upload-modal-content-text-list {
  color: #6f6f6f;
  font-size: 15px;
  padding-left: 18px;
  margin-top: 10px;
}
.import-screenplay-upload-modal-content-text-list-item {
  margin-top: 12px;
  line-height: 1.4em;
}
.import-screenplay-upload-modal-content-upload-holder {
  position: relative;
  flex: 5;
  border: 2px dashed #c8c8c8;
  min-height: 100px;
  background: #f4f4f4;
  border-radius: 12px;
  flex-basis: 320px;
  min-height: 275px;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.08);
}
.import-screenplay-upload-modal-content-upload-holder.highlight {
  border-color: #03a9f4;
  background: #ffffff;
}
.import-screenplay-upload-state--ready,
.import-screenplay-upload-state--melting,
.import-screenplay-upload-state--parsing,
.import-screenplay-upload-state--failure,
.import-screenplay-upload-state--canceling {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
}
[data-upload-state="ready"] .import-screenplay-upload-state--ready {
  display: flex;
}
[data-upload-state="melting"] .import-screenplay-upload-state--melting {
  display: flex;
}
[data-upload-state="parsing"] .import-screenplay-upload-state--parsing {
  display: flex;
}
[data-upload-state="failure"] .import-screenplay-upload-state--failure {
  display: flex;
}
[data-upload-state="canceling"] .import-screenplay-upload-state--canceling {
  display: flex;
}
.import-screenplay-upload-spinner-text {
  max-width: 80%;
  margin-top: 14px;
  font-size: 16px;
  color: #888;
}
.import-screenplay-upload-progress-text {
  max-width: 80%;
  margin-top: 12px;
  font-size: 10px;
  min-height: 14px;
  color: #666;
  font-family: "Courier Final Draft", Courier monospace !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-screenplay-upload-progress-bar-frame {
  width: 70%;
  height: 12px;
  border: thin solid gainsboro;
  margin-top: 16px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.import-screenplay-upload-progress-bar {
  position: absolute;
  background: #03a9f4;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
}
.import-screenplay-upload-modal-content-upload-icon {
  fill: #d9d9d9;
  margin-top: 10px;
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
}
.highlight .import-screenplay-upload-modal-content-upload-icon {
  fill: #03a9f4;
}
.import-screenplay-upload-modal-content-upload-types-text {
  font-size: 14px;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
  color: #c7c7c7;
}
.highlight .import-screenplay-upload-modal-content-upload-types-text {
  color: #03a9f4;
}
.import-screenplay-upload-modal-content-upload-or-drag-text {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-top: 35px;
  color: #9d9d9d;
}
.import-screenplay-upload-modal-content-upload-drop-text {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-top: 35px;
  color: #9d9d9d;
  display: none;
}
.highlight .import-screenplay-upload-modal-content-upload-or-drag-text {
  pointer-events: none;
  display: none;
}
.highlight .import-screenplay-upload-modal-content-upload-drop-text {
  display: block;
}
.import-screenplay-upload-modal-content-upload-button {
  color: #3ba1dc;
  cursor: pointer;
}
.import-screenplay-upload-modal-content-upload-button:hover {
  color: #338cbf;
  cursor: pointer;
}
.import-screenplay-upload-modal-content-text-list-item-external-link {
  color: #3ba1dc;
  text-decoration: none;
}
.import-screenplay-upload-modal-content-text-list-item-external-link:hover {
  color: #338cbf;
}
.import-screenplay-upload-modal-content-text-list-item-external-link::after {
  opacity: 0.5;
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
.import-screenplay-character-static-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  border-right: 5px solid #f8f8f8;
}
.import-screenplay-character-static-info-name {
  text-transform: uppercase;
  font-size: 16px;
  word-break: break-word;
}
.import-screenplay-character-static-info-scenes {
  font-weight: 400;
  font-size: 12px;
  margin-top: 4px;
  color: #a5a5a5;
}
.import-screenplay-character-dynamic-info-item-wrapper,
.import-screenplay-character-dynamic-info-item-wrapper--select {
  position: relative;
  border-left: thin solid #efefef;
}
.import-screenplay-character-dynamic-info-item.selected {
  color: #03a9f4;
}
.import-screenplay-character-dynamic-info-item-wrapper:first-child {
  border-left: none;
}
.import-screenplay-character-dynamic-info {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr 4fr;
  grid-template-areas: "age race gender archetype" "want want want want" "need need need need";
}
.grid-area--age {
  grid-area: age;
}
.grid-area--race {
  grid-area: race;
}
.grid-area--gender {
  grid-area: gender;
}
.grid-area--archetype {
  grid-area: archetype;
}
.grid-area--want {
  grid-area: want;
  border-left: none;
  border-top: thin solid #efefef;
}
.grid-area--need {
  grid-area: need;
  border-left: none;
  border-top: thin solid #efefef;
}
.import-screenplay-character-dynamic-info-item-wrapper--select::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 2px solid #c3c3c3;
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: 50%;
  right: 20px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  pointer-events: none;
}
.import-screenplay-character-dynamic-info-item {
  width: 100%;
  min-height: 91px;
  display: block;
  padding: 24px 14px 10px;
  color: #bababa;
  font-weight: 400;
  background-color: #ffffff;
  font-size: 14px;
  transition: background-color 200ms, color 200ms;
  outline: none;
  border: none;
  border-radius: 0px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: "Open Sans", sans-serif;
}
.import-screenplay-character-dynamic-info-item:hover,
.import-screenplay-character-dynamic-info-item:focus {
  color: #888;
  background-color: rgba(245, 245, 245, 0.41);
}
.import-screenplay-character-dynamic-info-item-label {
  font-weight: 400;
  font-size: 12px;
  color: #a5a5a5;
  position: absolute;
  z-index: 10;
  left: 13px;
  top: 10px;
  pointer-events: none;
}
.import-screenplay-character-dynamic-info-item--input {
  color: #03a9f4;
}
.import-screenplay-character-dynamic-info-item--input-custom-select {
  text-transform: capitalize;
  padding-right: 51px;
  color: #03a9f4;
}
.import-screenplay-character-dynamic-info-item--input-autocomplete {
  position: absolute;
  text-transform: capitalize;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #656565;
  opacity: 0.4;
  padding-right: 51px;
  pointer-events: none;
  background: transparent;
}
.import-screenplay-character-dynamic-info-item--select-custom {
  position: absolute;
  top: 0;
  right: 0;
  left: calc(100% - 51px);
  width: 51px;
  border-left: thin solid #f1f1f1;
  text-indent: -9999999px;
}
.import-screenplay-character-dynamic-info-item--input-autogrow {
  padding-top: 32px;
  color: #03a9f4;
}
.modal-close-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 30px;
  height: 30px;
  background: #262626;
  border: 2px solid #f7f7f7;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  outline: none;
  cursor: pointer;
  -webkit-transform: translate(50%, -50%) rotate(45deg);
          transform: translate(50%, -50%) rotate(45deg);
}
.modal-close-button::before {
  content: "";
  position: absolute;
  background: #f7f7f7;
  width: 60%;
  height: 3px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal-close-button::after {
  content: "";
  position: absolute;
  background: #f7f7f7;
  width: 3px;
  height: 60%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal-close-button:hover {
  background: #333333;
}
.menu-prompt {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #707684;
  fill: #707684;
  cursor: pointer;
  border-radius: 3px;
  background: #eff2f5;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1000;
}
.menu-prompt:hover {
  background: #e4e6e9;
}
/*//////////////////////////*/
/*/ /////KNOWLEDGE BASE//////*/
/*//////////////////////////*/
.knowledge-base-view-account-module-wrapper {
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  bottom: 0;
}
@media only screen and (min-width: 600px) {
  .knowledge-base-view-account-module-wrapper {
    top: 0px;
    left: 240px;
  }
}
#knowledge-base-overlay {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  z-index: 999999999;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
  transition: all 500ms;
}
#knowledge-base-overlay.showing-knowledge {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: all;
}
#knowledge-base-pushout-container {
  position: fixed;
  right: 20px;
  width: calc(100vw - 40px);
  max-width: 440px;
  height: calc(100% - 40px);
  top: 20px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.5);
  -webkit-transform: translateX(calc(100% + 50px));
          transform: translateX(calc(100% + 50px));
  background: var(--surface-color-2);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all 500ms;
}
.knowledge-base-pushout-container-frame-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 50px);
}
.knowledge-base-pushout-container-hide-button {
  position: fixed;
  padding: 12px 12px;
  width: 100%;
  height: 50px;
  bottom: 0;
  font-size: 14px;
  -webkit-appearance: none;
  border: none;
  background: #f3f3f3;
  color: #5f5f5f;
  outline: none;
  cursor: pointer;
  transition: all 200ms;
}
.knowledge-base-pushout-container-hide-button:hover {
  background: #f9f9f9;
  color: #1d7fd1;
}
.showing-knowledge #knowledge-base-pushout-container {
  pointer-events: all;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media only screen and (min-width: 600px) {
  .knowledge-base-pushout-container-frame-holder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .knowledge-base-pushout-container-hide-button {
    display: none;
  }
}
/*/ ///////////////////////*/
/*//////PRODUCT TOUR//////*/
/*/ ///////////////////////*/
.product-tour-overlay {
  width: 100vw;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 999999999999999999;
}
.product-tour-overlay.show {
  pointer-events: all;
}
.product-tour-overlay-bkg {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
}
.show .product-tour-overlay-bkg {
  opacity: 1;
}
.product-tour-overlay-popup-holder {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.walkthrough-spotlight-overlay {
  position: absolute;
}
.walkthrough-spotlight-overlay.showing-example::before {
  content: "Showing example story data";
  color: #cacbcc;
  font-size: 12px;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  -webkit-transform: translateY(calc(-100% - 5px));
          transform: translateY(calc(-100% - 5px));
}
.walkthrough-spotlight-overlay.floating {
  width: 100vw;
  height: 100%;
  border-color: transparent;
}
.walkthrough-spotlight-overlay-popup-holder {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100px;
  border-radius: 6px;
  padding: 18px 24px;
  box-sizing: border-box;
  font-size: 14px;
  color: #1b1e24;
  background: #d2d4d8;
  text-align: center;
  width: 340px;
}
.walkthrough-spotlight-overlay-popup-holder.floating {
  width: calc(100vw - 60px);
  max-width: 600px;
  left: 50%;
  top: 50%;
  box-shadow: 0 0px 1px 9px rgba(0, 0, 0, 0.45);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.walkthrough-popup-header {
  font-size: 18px;
  font-weight: bold;
  margin-top: 3px;
}
.walkthrough-popup-header-complete-check {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  background: #1ab63a;
  margin-right: 3px;
  vertical-align: bottom;
}
.walkthrough-popup-header-complete-check:before {
  content: "";
  width: 4px;
  height: 9px;
  display: block;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(7.5px, 4.5px) rotate(45deg);
          transform: translate(7.5px, 4.5px) rotate(45deg);
}
.walkthrough-premium-only {
  background: #30b67b;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 3px;
  font-weight: bold;
  margin-bottom: 4px;
  display: inline-block;
}
.walkthrough-popup-body {
  font-size: 14px;
  color: #555;
  display: block;
  margin-top: 6px;
}
.walkthrough-popup-link {
  text-decoration: none;
  color: #2977b5;
}
.walkthrough-popup-link:hover {
  color: #039be5;
}
.floating .walkthrough-popup-body {
  margin: 6px auto 0;
  max-width: calc(100% - 60px);
  font-size: 16px;
}
.walkthrough-popup-image {
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}
.walkthrough-popup-video {
  width: 100%;
  max-width: 400px;
  margin-top: 20px;
}
.walkthrough-popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: thin solid #bdbdbd;
  padding-top: 12px;
}
.walkthrough-popup-nav-buttons-holder {
  display: flex;
  justify-content: flex-end;
}
.walkthrough-popup-button {
  -webkit-appearance: none;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  margin: 0;
  display: flex;
  cursor: pointer;
  background: #efefef;
  transition: all 200ms;
}
.walkthrough-popup-button:hover {
  background: #fff;
}
.walkthrough-popup-button--back,
.walkthrough-popup-button--next {
  background: #03a9f4;
  color: #fff;
}
.walkthrough-popup-button--back:hover,
.walkthrough-popup-button--next:hover {
  background: #03b0fe;
  color: #fff;
}
.walkthrough-popup-button--back {
  border-radius: 3px 0 0 3px;
  border-right: thin solid rgba(255, 255, 255, 0.5);
}
.walkthrough-popup-button--back:only-child {
  border-radius: 3px;
  border-right: none;
}
.walkthrough-popup-button--next {
  border-radius: 0 3px 3px 0;
}
.walkthrough-popup-button--next:only-child {
  border-radius: 3px;
}
.walkthrough-popup-button--back .nav-arrow {
  margin-right: 6px;
}
.walkthrough-popup-button--next .nav-arrow {
  margin-left: 6px;
}
.top .walkthrough-popup-arrow {
  position: absolute;
  bottom: 0;
  left: calc(50% - 10px);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.top .walkthrough-popup-arrow:before {
  border: solid 12px transparent;
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-width: 10px;
  border-top-color: #d2d4d8;
  pointer-events: none;
}
.bottom .walkthrough-popup-arrow {
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.bottom .walkthrough-popup-arrow:before {
  border: solid 12px transparent;
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-width: 10px;
  border-bottom-color: #d2d4d8;
  pointer-events: none;
}
.left .walkthrough-popup-arrow {
  position: absolute;
  top: calc(50% - 10px);
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.left .walkthrough-popup-arrow:before {
  border: solid 12px transparent;
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-width: 10px;
  border-left-color: #d2d4d8;
  pointer-events: none;
}
.right .walkthrough-popup-arrow {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.right .walkthrough-popup-arrow:before {
  border: solid 12px transparent;
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-width: 10px;
  border-right-color: #d2d4d8;
  pointer-events: none;
}
.walkthrough-popup-progress {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.walkthrough-popup-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a6a8ab;
  margin: 0 2px;
}
.walkthrough-popup-progress-dot.selected {
  background: #696a6c;
}
.walkthrough-popup-desktop-warning {
  font-size: 12px;
  font-weight: bold;
}
.walkthrough-popup-transition-button {
  margin-top: 18px;
  padding: 22px 20px 15px;
  -webkit-appearance: none;
  border: none;
  background: #efefef;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  border: 2px solid transparent;
  width: 100%;
  max-width: 320px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
  transition: all 200ms;
}
.walkthrough-popup-transition-button:hover {
  background: #f5f5f5;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);
}
.walkthrough-popup-transition-button-image {
  width: 85%;
}
.walkthrough-popup-transition-button-cta {
  display: block;
  font-size: 16px;
  margin-top: 12px;
  white-space: pre-wrap;
}
.product-tour-icon {
  vertical-align: bottom;
  margin-right: 9px;
}
/*/////////////////////////*/
/*/ ///RICH TEXT EDITOR/////*/
/*/////////////////////////*/
.rich-text-editor-menu {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: inherit;
  color: inherit;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transform: translate(var(--xOffset, 0), var(--yOffset, 0));
          transform: translate(var(--xOffset, 0), var(--yOffset, 0));
  z-index: 999999;
}
.rich-text-editor-menus-holder {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  border-radius: 0.6rem;
}
[data-menu-style="static"] .rich-text-editor-menus-holder {
  overflow: visible;
}
[data-menu-style="floating"] .rich-text-editor-menus-holder {
  box-shadow: var(--dropdown-shadow);
  background: var(--dropdown-items-bg);
}
[data-menu-style="floating"].showing-formats .rich-text-editor-menus-holder {
  border-top: thin solid #f1f1f1;
}
.rich-text-editor-menu.above-text {
  -webkit-transform: translate(var(--xOffset, 0), calc(-100% + var(--yOffset, 0) - var(--lineHeight, 0) - var(--lineHeight, 1rem)));
          transform: translate(var(--xOffset, 0), calc(-100% + var(--yOffset, 0) - var(--lineHeight, 0) - var(--lineHeight, 1rem)));
}
.rich-text-editor-menu.below-text {
  -webkit-transform: translate(var(--xOffset, 0), calc(calc(0% + var(--yOffset, 0)) + 0.5rem));
          transform: translate(var(--xOffset, 0), calc(calc(0% + var(--yOffset, 0)) + 0.5rem));
}
.rich-text-editor-menu-arrow {
  position: absolute;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}
.rich-text-editor-menu-arrow::before {
  content: "";
  position: absolute;
  width: calc(100% * 1.5);
  height: calc(100% * 2);
  background-color: inherit;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: center right;
          transform-origin: center right;
  -webkit-transform: translate(-100%, -50%) rotate(45deg);
          transform: translate(-100%, -50%) rotate(45deg);
}
.showing-formats .rich-text-editor-menu-arrow {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: #fafafa;
  -webkit-transform-origin: center;
          transform-origin: center;
  left: 50%;
  -webkit-transform: translate(calc(-50% + calc(var(--arrowOffsetX, 0)) * -1), calc(-50% - 1px)) rotate(45deg);
          transform: translate(calc(-50% + calc(var(--arrowOffsetX, 0)) * -1), calc(-50% - 1px)) rotate(45deg);
  border: thin solid transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), 16px 16px 18px -5px rgba(110, 127, 135, 0.18);
}
[data-menu-style="static"] .rich-text-editor-menu-arrow {
  display: none;
}
.showing-formats.showing-list.below-text .rich-text-editor-menu-arrow {
  display: none;
}
.showing-formats.showing-list.above-text .rich-text-editor-menu-arrow,
.showing-formats.showing-link-panel.above-text .rich-text-editor-menu-arrow {
  background: #fff;
}
.transition .rich-text-editor-menu {
  transition: -webkit-transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
.rich-text-editor-open-formats-button {
  position: absolute;
  display: flex;
  inset: 0;
  width: 100%;
  color: #c4c4c4;
  align-items: center;
  justify-content: center;
  border-bottom: thin solid #f1f1f1;
  transition: all 100ms ease-in-out;
}
.rich-text-editor-open-formats-button:hover {
  background: #f4f5f6;
  color: #00a4f0;
}
.rich-text-editor-open-formats-button.focused {
  background: #00a4f0;
}
.showing-formats .rich-text-editor-open-formats-button {
  pointer-events: none;
  border-bottom: none;
  opacity: 0;
}
.rich-text-editor-open-formats-button-icon {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  background-color: #c4c4c4;
  border-radius: 50%;
  transition: all 100ms ease-in-out;
}
.focused .rich-text-editor-open-formats-button-icon {
  background-color: #f4f5f6;
}
.rich-text-editor-open-formats-button-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c4c4c4;
  border-radius: 50%;
  -webkit-transform-origin: right;
          transform-origin: right;
  transition: all var(--speed) ease-in-out;
  -webkit-transform: translate(-210%, 0);
          transform: translate(-210%, 0);
}
.focused .rich-text-editor-open-formats-button-icon::before {
  background-color: #f4f5f6;
}
.rich-text-editor-open-formats-button-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c4c4c4;
  border-radius: 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: all var(--speed) ease-in-out;
  -webkit-transform: translate(110%, 0);
          transform: translate(110%, 0);
}
.focused .rich-text-editor-open-formats-button-icon::after {
  background-color: #f4f5f6;
}
.rich-text-editor-menu-formats-wrapper {
  min-height: 1.4rem;
  position: relative;
}
.rich-text-editor-menu-formats {
  position: relative;
  z-index: 10;
  display: flex;
  padding: 0;
  opacity: 0;
  scale: 0;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  transition: all 100ms ease-in-out;
}
[data-menu-style="floating"] .rich-text-editor-menu-formats {
  background: #fafafa;
}
.showing-formats .rich-text-editor-menu-formats {
  opacity: 1;
  scale: 1;
}
[data-menu-style="floating"].showing-formats .rich-text-editor-menu-formats {
  padding: 0.7rem 0.7rem 0.6rem;
}
.rich-text-editor-menu-formats-group {
  display: flex;
  padding: 0;
  gap: 0.2rem;
  transition: padding 100ms ease-in-out;
}
.showing-formats .rich-text-editor-menu-formats-group {
  padding: 0 0.6rem;
}
.rich-text-editor-menu-formats-group:first-child {
  padding-left: 0;
}
.rich-text-editor-menu-formats-group:last-child {
  padding-right: 0;
  border-right: none;
}
.rich-text-editor-menu-format-button {
  position: relative;
  width: 0;
  display: flex;
  height: 0;
  fill: var(--text-color-primary);
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  transition: all 100ms ease-in-out;
}
.rich-text-editor-menu-format-button:hover {
  fill: var(--text-color-primary);
  color: var(--marker-text-color);
  background: var(--surface-color-3-hover);
}
.showing-formats .rich-text-editor-menu-format-button {
  width: 3rem;
  height: 2.6rem;
}
.showing-formats .rich-text-editor-menu-format-button.dropdown {
  width: 4.5rem;
  height: 2.6rem;
}
.pensive-text-format-icon {
  width: 60%;
  height: 60%;
}
.rich-text-editor-menu-format-button.selected {
  background: var(--text-editor-button-bg-selected);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  fill: var(--text-color-primary);
}
.rich-text-editor-menu-format-button.selected:hover {
  background: color-mix(in srgb, var(--surface-color-3-1) 100%, var(--surface-color-2) 50%);
}
.rich-text-editor-menu-format-button.selected-value {
  fill: red;
}
.rich-text-editor-menu-format-button.format-disabled,
.deactivated .rich-text-editor-menu-format-button {
  opacity: 0.3;
  background: unset;
  pointer-events: none;
  box-shadow: unset;
  fill: #6e6e6e;
}
.rich-text-editor-menu-format-button.focused:not(.selected) {
  background: #00a9f4;
  color: #fff;
  fill: #fff;
}
.rich-text-editor-menu-format-button.selected.focused::before {
  opacity: 1;
}
.rich-text-editor-menu-format-button-dropdown-arrow {
  width: 0;
  height: 0;
  border: 0.4rem solid transparent;
  border-top: 0.5rem solid var(--text-color-secondary);
  margin-top: 0.5rem;
  margin-left: -0.2rem;
  margin-right: 0.5rem;
  opacity: 0.8;
}
.rich-text-editor-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  border-top: thin solid var(--surface-color-2-divider-color);
}
[data-menu-style="static"] .rich-text-editor-menu-list {
  padding: 0.4rem;
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 0.6rem;
  box-shadow: var(--dropdown-shadow);
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  background: white;
}
.showing-list .rich-text-editor-menu-list {
  opacity: 1;
  padding: 0.4rem;
  height: auto;
  pointer-events: all;
}
[data-menu-style="static"].showing-list .rich-text-editor-menu-list {
  overflow: visible;
}
.rich-text-editor-menu-list-item-button {
  position: relative;
  z-index: 10;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  font-size: 1.333rem;
  padding: 0.3em 1em 0.3em 0.7em;
  border-radius: 0.3rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}
.rich-text-editor-menu-list-item-button-subtitle {
  font-size: 0.8em;
  text-transform: uppercase;
  opacity: 0.8;
}
.rich-text-editor-menu-list-item-button-hotkey {
  min-width: 1.3rem;
  text-align: center;
}
.showing-formats .rich-text-editor-menu-list-item-button-hotkey {
  display: none;
}
.rich-text-editor-menu-list-item-button:not(.focused):hover {
  background: var(--dropdown-items-bg-hover);
}
.rich-text-editor-menu-list-item-button.focused {
  background: var(--primary-button-bg);
  color: #fff;
}
.rich-text-editor-menu-list-item-button:not(.focused).selected {
  color: var(--primary-button-bg);
}
.rich-text-editor-link-panel {
  height: 0;
  overflow: hidden;
  padding: 0 0.7rem;
  border-top: thin solid transparent;
  position: relative;
  z-index: 1;
}
.showing-link-panel .rich-text-editor-link-panel {
  padding: 0.7rem 0.7rem 0.6rem;
  height: auto;
  border-top: thin solid var(--surface-color-3);
}
[data-menu-style="static"] .rich-text-editor-link-panel {
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  height: auto;
  padding: 0.7rem 0.7rem 0.6rem;
  border-radius: 0.6rem;
  max-width: 20vw;
  width: 100vw;
  border-top: none;
  min-width: 100%;
  background: var(--surface-color-3);
  box-shadow: var(--dropdown-shadow);
}
[data-menu-style="static"].showing-link-panel .rich-text-editor-link-panel {
  opacity: 1;
  pointer-events: all;
}
.rich-text-editor-link-panel-arrow {
  position: absolute;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  top: -1rem;
  right: 2.4rem;
}
.rich-text-editor-link-panel-arrow::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--surface-color-3);
  left: 50%;
  top: 50%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(0, 0) rotate(225deg);
          transform: translate(0, 0) rotate(225deg);
  border: thin solid transparent;
  border-right-color: var(--surface-color-3);
  border-bottom-color: var(--surface-color-3);
}
.rich-text-editor-menu-list-arrow {
  position: absolute;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  top: -11px;
  right: 81px;
}
[data-menu-style="floating"] .rich-text-editor-menu-list-arrow {
  display: none;
}
.rich-text-editor-menu-list-arrow::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(0, 0) rotate(225deg);
          transform: translate(0, 0) rotate(225deg);
  border: thin solid transparent;
  border-right-color: #e3e3e3;
  border-bottom-color: #e3e3e3;
}
.text-measuring-container {
  position: absolute;
  width: calc(100% - 2rem);
  z-index: 9999999999;
  background: #f4f4f4;
  pointer-events: none;
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.temp-link {
  background-color: #d4d5d6;
}
/*/ /////////////////////////*/
/*///////ORG SETTINGS///////*/
/*/ /////////////////////////*/
.edit-permissions-button-wrapper {
  min-width: 7rem;
  display: flex;
  margin-left: 1rem;
  justify-content: center;
  align-items: center;
}
[data-can-edit="no"] .edit-permissions-button-wrapper {
  display: none;
}
.edit-permissions-add-user-button {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  position: relative;
  background: var(--primary-button-bg);
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .edit-permissions-add-user-button:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.edit-permissions-locked-icon {
  fill: #e4e4e4;
}
.edit-permissions-add-user-button:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.edit-permissions-add-user-button::before,
.edit-permissions-add-user-button::after {
  position: absolute;
  content: "";
  width: 56%;
  height: 0.4rem;
  background: var(--surface-color-0);
  left: 50%;
  top: 50%;
  border-radius: 0.1rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.edit-permissions-add-user-button::after {
  width: 0.4rem;
  height: 56%;
}
.edit-permissions-remove-user-button {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  position: relative;
  background: transparent;
  color: var(--icon-color-tertiary);
  cursor: pointer;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .edit-permissions-remove-user-button:hover {
    background: color-mix(in srgb, var(--surface-color-2) 100%, var(--danger-button-bg) 50%);
    color: var(--icon-color-secondary);
  }
}
.edit-permissions-remove-user-button::before,
.edit-permissions-remove-user-button::after {
  position: absolute;
  content: "";
  width: 56%;
  height: 0.3rem;
  background: currentColor;
  left: 50%;
  top: 50%;
  border-radius: 0.1rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.edit-permissions-remove-user-button::after {
  width: 0.3rem;
  height: 56%;
}
/*//////////////////////////////////////*/
/*/ ////////USER COMMUNITY PROFILE///////*/
/*//////////////////////////////////////*/
.user-community-profile-not-found-holder {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.user-community-profile-not-found-content {
  max-width: 40rem;
}
.user-community-profile-not-found-content-title {
  font-size: 3.2rem;
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: var(--text-color-tertiary);
}
.user-community-profile-not-found-content-image {
  fill: var(--text-color-muted);
}
.user-community-profile-wrapper {
  padding: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: 4rem;
  margin-top: 0;
  margin-top: clamp(0.1rem, 1vw, 2rem);
}
.user-community-profile-bkg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-color-0);
  pointer-events: none;
}
.user-community-profile-bkg-backdrop-filter {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(1rem);
          backdrop-filter: blur(1rem);
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.user-community-profile-masthead {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
}
/* Profile Skeletons */
.user-community-profile-skeleton-masthead {
  padding: 4rem;
  border-radius: 1rem;
  min-height: 27rem;
  background: color-mix(in srgb, lightgray 90%, var(--surface-color-0) 40%);
}
.user-community-profile-skeleton-h2 {
  height: 4rem;
  max-width: 40rem;
  width: calc(100% - 4rem);
  margin: 3rem auto 0;
  border-radius: 0.5rem;
  background: color-mix(in srgb, lightgray 90%, var(--surface-color-0) 40%);
}
.user-community-profile-featured-story-skeleton {
  padding-top: 59%;
  border-radius: 1rem;
  background: color-mix(in srgb, lightgray 90%, var(--surface-color-0) 40%);
}
.user-community-profile-skeleton-text {
  height: 2.2rem;
  display: block;
  border-radius: 0.4rem;
  margin: 1.4rem auto 0;
  max-width: 80rem;
  width: calc(100% - 6rem);
  background: color-mix(in srgb, lightgray 90%, var(--surface-color-0) 40%);
}
.user-community-profile-masthead-header {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 2rem 2rem 0;
}
.user-community-profile-masthead-header-social-icon {
  display: flex;
  fill: #e6e6e6;
  transition: all 200ms;
  margin: 0 2.2rem 0 0;
}
.user-community-profile-masthead-header-social-icon:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .user-community-profile-masthead-header-social-icon:hover {
    fill: #f7f7f7;
  }
}
.user-community-profile-masthead-image-holder {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.user-community-profile-masthead-image {
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--surface-color-0);
}
.user-community-profile-masthead-user-info {
  width: 100%;
  text-align: center;
  padding: 4rem;
}
.user-community-profile-masthead-user-info-avatar {
  width: 16rem;
  height: 16rem;
  box-shadow: 0 0 82px rgba(0, 0, 0, 0.7);
}
.user-community-profile-masthead-user-info-pen-name {
  font-size: 3.2rem;
  letter-spacing: 0.025em;
  color: #f7f7f7;
  text-transform: uppercase;
  font-family: "Work Sans", "Open Sans", sans-serif;
}
.user-community-profile-masthead-empty-text {
  font-size: 2rem;
  color: var(--text-color-primary);
  opacity: 0.9;
  font-style: italic;
}
.user-community-profile-empty-text {
  font-size: 2rem;
  color: var(--text-color-muted);
  opacity: 0.9;
  font-style: italic;
  display: block;
  text-align: center;
}
.user-community-profile-masthead-user-info-title {
  font-size: 1.6rem;
  color: #d4d4d4;
  opacity: 0.9;
}
.user-community-profile-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 86rem;
  margin: 0 auto;
}
.user-community-profile-section-header-icon {
  fill: var(--icon-color-secondary);
  opacity: 0.9;
}
.user-community-profile-section-header-title {
  font-size: 3.2rem;
  text-align: center;
  margin-top: 1rem;
}
.user-community-profile-section-featured-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  max-width: 100rem;
  margin: 4rem auto 0;
  width: calc(100% - 6rem);
  grid-gap: 1rem;
}
.user-community-profile-featured-story {
  cursor: pointer;
  padding: 1rem;
  border-radius: 1rem;
  transition: all 200ms;
}
.user-community-profile-featured-story-image-holder {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.user-community-profile-featured-story-image {
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 200ms;
  background: var(--surface-color-0);
}
@media only screen and (min-width: 768px) {
  .user-community-profile-featured-story:hover {
    background-color: var(--surface-color-3);
  }
  .user-community-profile-featured-story:hover .user-community-profile-featured-story-image {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
.user-community-profile-featured-story-title {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  color: var(--text-color-primary);
  font-weight: bold;
  padding: 1rem 0.2rem;
}
.user-community-profile-content-tagline {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  padding: 2rem 2rem 1rem;
  margin: 0 auto;
  font-size: 2.4rem;
  color: var(--text-color-secondary);
  text-align: center;
  font-style: italic;
}
.user-community-profile-section-text {
  font-size: 1.6rem;
  line-height: 1.8em;
  max-width: 95rem;
  padding: 0 3rem;
  display: block;
  margin: 0 auto;
  color: var(--text-color-tertiary);
  white-space: pre-line;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.user-community-profile-section--buckets {
  display: flex;
  width: 100%;
  max-width: 95rem;
  margin: 0 auto;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 3rem;
}
.user-community-profile-bucket {
  flex: 1 0 28rem;
}
.user-community-profile-bucket-header-title {
  font-size: 2rem;
  text-align: center;
}
.user-community-profile-footer {
  padding: 1rem 1rem 0.2rem;
  border-top: 1px solid var(--text-color-disabled);
  width: calc(100% - 2rem);
  max-width: 95rem;
  margin: 6rem auto 0;
  -webkit-column-gap: 3rem;
     -moz-column-gap: 3rem;
          column-gap: 3rem;
}
.user-community-profile-footer-name {
  color: var(--text-color-tertiary);
  font-size: 1.6rem;
  text-transform: uppercase;
  font-family: "Work Sans", "Open Sans", sans-serif;
}
.user-community-profile-footer-title {
  font-size: 1.2rem;
  color: var(--text-color-muted);
}
.user-community-profile-footer-phone {
  font-size: 1.2rem;
  fill: var(--icon-color-tertiary);
  text-decoration: none;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .user-community-profile-footer-phone:hover {
    fill: var(--icon-color-secondary);
  }
}
.user-community-profile-footer-social-icon {
  display: flex;
  fill: var(--icon-color-tertiary);
  transition: all 200ms;
  margin: 0 1.8rem 0 0;
}
.user-community-profile-footer-social-icon:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .user-community-profile-footer-social-icon:hover {
    fill: var(--icon-color-secondary);
  }
}
.jump {
  -webkit-animation: jump 400ms forwards cubic-bezier(0.84, -0.54, 0.31, 1.19);
          animation: jump 400ms forwards cubic-bezier(0.84, -0.54, 0.31, 1.19);
}
@-webkit-keyframes jump {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  50% {
    -webkit-transform: translateY(-0.75em);
            transform: translateY(-0.75em);
  }
}
@keyframes jump {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  50% {
    -webkit-transform: translateY(-0.75em);
            transform: translateY(-0.75em);
  }
}
/*/////////////////////////////////////////////*/
/*/ ////CRITICAL LAYOUT AND SPACING CLASSES/////*/
/*/////////////////////////////////////////////*/
.pensive-modal-character-masthead {
  overflow: hidden;
  position: relative;
  border-radius: 1rem;
}
.pensive-modal-character-masthead-cover-image-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, hsl(202deg 63% 39%) 0%, #114381 100%);
}
.pensive-modal-character-masthead-cover-image {
  text-indent: -99999999px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pensive-modal-character-masthead-content-holder {
  position: relative;
}
.pensive-modal-character-masthead-headshot-image-holder {
  position: relative;
  width: 25%;
  min-width: 15rem;
  min-height: 23rem;
  padding-top: 33%;
  margin: 1rem;
  flex-shrink: 0;
}
.pensive-modal-character-masthead-headshot-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.8rem;
  border: 0.3rem solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 33px 52px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.45);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/web-app/img/no_character_images_placeholder.png);
  text-indent: -99999999999px;
  cursor: pointer;
  background-clip: padding-box;
  transition: border 200ms;
}
.pensive-modal-character-masthead-headshot-image.loading {
  background-size: 60px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-character-masthead-headshot-image-holder:hover .pensive-modal-character-masthead-headshot-image {
    border-color: rgba(255, 255, 255, 0.4);
  }
}
.pensive-modal-character-masthead-headshot-edit-button {
  position: absolute;
  bottom: 5px;
  right: 9px;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-character-masthead-headshot-image-holder:hover .pensive-modal-character-masthead-headshot-edit-button {
    opacity: 1;
  }
}
.pensive-modal-character-masthead-edit-cover-image-button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
[data-can-edit="no"] .pensive-modal-character-masthead-headshot-edit-button,
[data-can-edit="no"] .pensive-modal-character-masthead-edit-cover-image-button {
  display: none;
}
.pensive-modal-character-masthead-name {
  word-break: keep-all;
}
.pensive-modal-character-masthead-name:empty::before {
  font-family: "Open Sans", helvetica, sans-serif;
  content: "No name added";
  font-style: italic;
  font-size: 3.2rem;
  color: rgba(255, 255, 255, 0.6);
}
.pensive-modal-image-input-holder {
  width: 100%;
}
.pensive-modal-image-input {
  position: relative;
  padding-top: 45%;
  overflow: hidden;
  border-radius: 0.6rem;
  cursor: pointer;
}
[data-has-image-path="true"] .pensive-modal-image-input {
  cursor: default;
}
.pensive-modal-image-input-thumbnail {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999px;
  background-color: #f5f5f5;
  transition: background-color 200ms;
}
.pensive-modal-image-input:hover .pensive-modal-image-input-thumbnail {
  background-color: #f0f8ff;
}
.pensive-modal-image-input-thumbnail.loading {
  background-color: #fefefe;
  background-size: 60px;
  background-repeat: no-repeat;
  background-image: url(/web-app/img/update_image_thumb_spinner.gif);
  background-position: center center;
}
.pensive-modal-image-input-buttons-holder {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  transition: all 200ms;
}
.showing-edit-buttons .pensive-modal-image-input-buttons-holder {
  opacity: 1;
  pointer-events: all;
}
.pensive-modal-image-input-buttons-holder > button {
  display: block;
  margin-top: 12px;
}
.pensive-modal-section-wrapper:not(.h-inset--wide) .pensive-modal-section-header {
  margin-left: clamp(calc(5rem * 0.2), 4vw, 5rem);
  margin-right: clamp(calc(5rem * 0.2), 4vw, 5rem);
}
.pensive-modal-subsection-wrapper.children-fit-content {
  background: #fff;
}
.pensive-modal-section-header + .pensive-modal-subsection-wrapper {
  padding-top: 0;
}
.h-inset--page .pensive-modal-subsection-item-wrapper {
  background: unset;
}
[data-can-edit="no"] .pensive-modal-subsection-item-wrapper.no-value {
  display: none;
}
.pensive-modal-utility-menu-layout {
  gap: 1rem;
  background: #fff;
}
.pensive-modal-utility-menu-layout .pensive-modal-subsection-item-wrapper {
  flex-basis: unset;
  flex-grow: 0;
}
.pensive-modal-subsection-item-wrapper.full {
  flex-basis: 100%;
  flex-grow: 1;
}
.pensive-modal-subsection-item-wrapper.half {
  flex-basis: calc(calc(calc(76.8rem / 2) - 100%) * 999);
  min-width: calc(76.8rem / 3);
  flex-grow: 1;
}
.pensive-modal-subsection-item-wrapper.third {
  flex-basis: calc(calc(calc(76.8rem / 3) - 100%) * 999);
  min-width: calc(76.8rem / 4);
  flex-grow: 1;
}
.pensive-modal-input-header {
  padding: 1rem 0 0.5rem;
  margin: 0;
}
.pensive-modal-input-holder {
  position: relative;
  flex: 1;
}
.v-inset--normal {
  margin-top: clamp(calc(2rem * 0.2), 3vw, 2rem);
  margin-bottom: clamp(calc(2rem * 0.2), 3vw, 2rem);
}
.h-inset--normal {
  margin-left: clamp(calc(2rem * 0.2), 3vw, 2rem);
  margin-right: clamp(calc(2rem * 0.2), 3vw, 2rem);
}
.h-inset--wide {
  margin-left: clamp(calc(5rem * 0.2), 4vw, 5rem);
  margin-right: clamp(calc(5rem * 0.2), 4vw, 5rem);
}
.h-inset--wide .pensive-modal-input--textarea,
.h-inset--wide .pensive-modal-input {
  padding-left: calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
  padding-right: calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
  -webkit-transform: translate(calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * -1), 0);
          transform: translate(calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * -1), 0);
  width: calc(100% + calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * 2));
}
.h-inset--normal .pensive-modal-input--textarea,
.h-inset--normal .pensive-modal-input {
  padding-left: calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
  padding-right: calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
  -webkit-transform: translate(calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * -1), 0);
          transform: translate(calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * -1), 0);
  width: calc(100% + calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * 2));
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) .pensive-modal-input--textarea,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) .pensive-modal-input {
  padding-left: 1rem;
  padding-right: 1rem;
  width: calc(100% + 2rem);
  -webkit-transform: translate(-1rem, 0);
          transform: translate(-1rem, 0);
}
.pensive-modal-input--auto-complete-ghost {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  color: #d5d5d5;
  z-index: 0;
}
.pensive-modal-input-select-button {
  text-align: left;
  display: flex;
  width: 100%;
  font-size: 1.333rem;
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  min-height: 6rem;
  margin-bottom: 1rem;
  padding: 0 0.4rem;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding-right: 1rem;
  transition: padding-left 100ms;
}
.pensive-modal-input-select-button.professional-dropdown-selected-item,
.pensive-modal-input-select-button:focus-visible {
  color: var(--primary-button-bg);
}
.pensive-modal-input-select-button-text:empty::before {
  content: "Select...";
  color: var(--text-color-muted);
}
.professional-dropdown-selected-item .pensive-modal-input-select-button-text:empty::before,
.pensive-modal-input-select-button:focus-visible .pensive-modal-input-select-button-text:empty::before {
  color: var(--primary-button-bg);
}
.pensive-modal-input-select-button-arrow {
  width: 0.6em;
  height: 0.6em;
  border: 0.2rem solid var(--text-color-muted);
  border-radius: 0.2rem;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-0.1em) rotate(45deg);
          transform: translateY(-0.1em) rotate(45deg);
  margin-left: 0.6em;
}
[data-can-edit="no"] .pensive-modal-input-select-button-arrow {
  display: none;
}
.professional-dropdown-selected-item .pensive-modal-input-select-button-arrow,
.pensive-modal-input-select-button:focus-visible .pensive-modal-input-select-button-arrow {
  border: 0.2rem solid var(--primary-button-bg);
  border-top-color: transparent;
  border-left-color: transparent;
}
.pensive-modal-utility-menu {
  padding: 1.4rem 0;
}
.pensive-text-item-menu {
  position: absolute;
  display: flex;
  top: 11px;
  right: 12px;
}
.text-items-holder {
  outline: none;
  text-rendering: optimizeSpeed;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  width: 100%;
  min-height: 100px;
  padding: 0 0 3rem;
  cursor: text;
  margin-top: 2rem;
}
[data-edit-mode="collection"] .text-items-holder {
  padding: 0;
  margin-top: 0;
  contain: paint;
  min-height: calc(var(--page-height) - 80px);
}
#page-module .h-inset--page .text-items-holder {
  counter-reset: page-counter;
}
.inputs-holder {
  position: absolute;
}
.text-item {
  position: relative;
  color: #5f5f5f;
  font-weight: 400;
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  padding: 0;
  justify-content: flex-start;
  cursor: text;
}
.text-item:first-child {
  padding-top: 7px;
}
.text-item:only-child {
  min-height: 100px;
}
.text-item-text-input-holder {
  position: relative;
}
[data-text-type] .text-item-text-input-holder {
  width: 100%;
}
.selected .text-item-text-input-holder::after {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0;
  right: -0.4rem;
  bottom: 0;
  border-radius: 0.3rem;
  background: rgba(3, 169, 244, 0.13);
  pointer-events: none;
}
/* stylelint-disable */
.story-viewer-modules .text-item-text-input {
  content-visibility: visible;
  contain-intrinsic-size: 1px var(--data-height, 16px);
}
.story-viewer-modules .text-item-text-input.first-text-item {
  content-visibility: visible;
  contain-intrinsic-size: 1px calc(var(--data-height, 16px) - 1px);
}
[data-align="center"].text-item-text-input {
  text-align: center;
}
[data-align="right"].text-item-text-input {
  text-align: right;
}
.text-items-act-cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  width: 3px;
  height: 100%;
  border-radius: 0.2rem;
  -webkit-transform: translate(calc(calc(clamp(calc(calc(calc(13.5 * 1) * 1rem) * 0.2), 8vw, calc(calc(13.5 * 1) * 1rem))) * -1), 0);
          transform: translate(calc(calc(clamp(calc(calc(calc(13.5 * 1) * 1rem) * 0.2), 8vw, calc(calc(13.5 * 1) * 1rem))) * -1), 0);
}
.h-inset--page .text-item-text-input {
  padding-left: calc((calc(13.5 * 1) / 82) * 100%);
  padding-right: calc((calc(11.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(13.5 * 1) / 82) * 100%) + calc((calc(11.5 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page .text-item-text-input {
    padding-left: calc(calc(13.5 * 1) * 1rem);
    padding-right: calc(calc(11.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide .text-item-text-input {
  width: calc(100% + calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * 2));
  padding-left: calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
  padding-right: calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
  -webkit-transform: translate(calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * -1), 0);
          transform: translate(calc(calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)) * -1), 0);
}
.h-inset--normal .text-item-text-input {
  width: calc(100% + calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * 2));
  padding-left: calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
  padding-right: calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
  -webkit-transform: translate(calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * -1), 0);
          transform: translate(calc(calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)) * -1), 0);
}
.text-item-text-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
[data-text-type="scene_heading"] .text-item-text-input,
[data-text-type="scene_heading"].text-item-text-input {
  text-transform: uppercase;
}
[data-text-type="character"] .text-item-text-input,
[data-text-type="character"].text-item-text-input {
  text-transform: uppercase;
  padding-left: 36%;
  padding-right: 3%;
}
[data-text-type="dialogue"] .text-item-text-input,
[data-text-type="dialogue"].text-item-text-input {
  padding-left: 17%;
  padding-right: 17%;
}
[data-text-type="parenthetical"] .text-item-text-input,
[data-text-type="parenthetical"].text-item-text-input {
  padding-left: 29%;
  padding-right: 29%;
}
[data-text-type="transition"] .text-item-text-input,
[data-text-type="transition"].text-item-text-input {
  text-transform: uppercase;
  text-align: right;
}
[data-text-type="list"] .text-item-text-input,
[data-text-type="list"].text-item-text-input {
  padding-left: 5%;
  padding-right: 15%;
}
[data-text-type="numbered"] .text-item-text-input,
[data-text-type="numbered"].text-item-text-input {
  padding-left: 5%;
  padding-right: 15%;
}
[data-text-type="heading"] .text-item-text-input,
[data-text-type="heading"].text-item-text-input {
  font-size: 16px;
  font-weight: 600;
}
[data-text-type="cta"] .text-item-text-input,
[data-text-type="cta"].text-item-text-input {
  padding-left: 2rem;
  padding-right: 0;
  font-weight: 600;
}
[data-text-type="cta"] .text-item-text-input::before,
[data-text-type="cta"].text-item-text-input::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -0.07em;
  top: 0.2em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/web-app/img/text_type_icons/cta.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
[data-text-type="time"] .text-item-text-input,
[data-text-type="time"].text-item-text-input {
  padding-left: 2rem;
  padding-right: 0;
  font-weight: 600;
}
[data-text-type="time"] .text-item-text-input::before,
[data-text-type="time"].text-item-text-input::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -0.07em;
  top: 0.25em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/web-app/img/text_type_icons/time.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
[data-text-type="title"] .text-item-text-input {
  padding-left: 2rem;
  padding-right: 0;
  font-weight: 600;
}
[data-text-type="title"].text-item-text-input,
[data-text-type="time"].text-item-text-input,
[data-text-type="camera"].text-item-text-input,
[data-text-type="sponsor"].text-item-text-input,
[data-text-type="cta"].text-item-text-input {
  padding-top: 0.3em;
  font-weight: bold;
}
[data-text-type="title"].text-item-text-input::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -0.07em;
  top: 0.25em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/web-app/img/text_type_icons/title.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
[data-text-type="title"].text-item-text-input.first-text-item::before,
[data-text-type="camera"].text-item-text-input.first-text-item::before,
[data-text-type="sponsor"].text-item-text-input.first-text-item::before,
[data-text-type="time"].text-item-text-input.first-text-item::before,
[data-text-type="cta"].text-item-text-input.first-text-item::before {
  top: 1.7em;
}
[data-text-type="camera"] .text-item-text-input,
[data-text-type="camera"].text-item-text-input {
  padding-left: 2rem;
  padding-right: 0;
  font-weight: 600;
}
[data-text-type="camera"] .text-item-text-input::before,
[data-text-type="camera"].text-item-text-input::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -0.07em;
  top: 0.25em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/web-app/img/text_type_icons/camera.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
[data-text-type="sponsor"] .text-item-text-input,
[data-text-type="sponsor"].text-item-text-input {
  padding-left: 2rem;
  padding-right: 0;
  font-weight: 600;
}
[data-text-type="sponsor"] .text-item-text-input::before,
[data-text-type="sponsor"].text-item-text-input::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -0.07em;
  top: 0.3em;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(/web-app/img/text_type_icons/sponsor.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
[data-edit-mode="collection"] .text-item-text-input:first-child {
  border-top: none;
}
.text-item.selected .text-item-text-input-holder::after {
  top: 0.2rem;
  bottom: 0.2rem;
}
.text-item[data-text-type="action"] .text-item-text-input,
.text-item[data-text-type="general"] .text-item-text-input,
.text-item[data-text-type="paragraph"] .text-item-text-input {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
[data-text-type="action"].text-item-text-input::before,
[data-text-type="general"].text-item-text-input::before,
[data-text-type="transition"].text-item-text-input::before,
[data-text-type="paragraph"].text-item-text-input::before {
  content: "\200B";
  line-height: 2em;
  display: inline-table;
  height: 0;
  width: 0;
  vertical-align: bottom;
}
[data-text-type="action"].text-item-text-input:empty,
[data-text-type="general"].text-item-text-input:empty,
[data-text-type="transition"].text-item-text-input:empty,
[data-text-type="paragraph"].text-item-text-input:empty {
  padding-top: 0;
  line-height: 3em;
  height: 2em;
}
.text-item[data-text-type="scene_heading"] .text-item-text-input::before,
[data-text-type="scene_heading"].text-item-text-input::before {
  content: "\200B";
  line-height: 2.4em;
  display: inline-table;
  height: 0;
  width: 0;
  vertical-align: bottom;
}
.text-item[data-text-type="character"] .text-item-text-input::before,
[data-text-type="character"].text-item-text-input::before {
  content: "\200B";
  line-height: 2em;
  display: inline-table;
  height: 0;
  width: 0;
  vertical-align: bottom;
}
.text-item[data-text-type="transition"] .text-item-text-input {
  text-transform: uppercase;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.text-item[data-text-type="paragraph"] .text-item-text-input,
.text-item[data-text-type="indented"] .text-item-text-input {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.text-item[data-text-type="list"] .text-item-text-input,
[data-text-type="list"].text-item-text-input {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.text-item[data-text-type="numbered"] .text-item-text-input,
[data-text-type="numbered"].text-item-text-input {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.text-item[data-text-type="numbered"]:first-child,
.text-item[data-text-type]:not(.text-item[data-text-type="numbered"]) + .text-item[data-text-type="numbered"],
.text-item-text-input[data-text-type="numbered"]:first-child,
.text-item-text-input[data-text-type]:not(.text-item-text-input[data-text-type="numbered"]) + .text-item-text-input[data-text-type="numbered"] {
  counter-reset: list-counter;
}
.text-item[data-text-type="numbered"] .text-item-text-input::before,
[data-text-type="numbered"].text-item-text-input::before {
  counter-increment: list-counter;
  content: counter(list-counter) ".";
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.text-item[data-text-type="heading"] .text-item-text-input::before,
[data-text-type="heading"].text-item-text-input::before {
  content: "\200B";
  line-height: 2em;
  display: inline-table;
  height: 0;
  width: 0;
  vertical-align: bottom;
}
.text-item[data-text-type="camera"] .text-item-text-input,
.text-item[data-text-type="cta"] .text-item-text-input,
.text-item[data-text-type="sponsor"] .text-item-text-input,
.text-item[data-text-type="time"] .text-item-text-input,
.text-item[data-text-type="title"] .text-item-text-input {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.text-item[data-text-type="action"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="general"].selected .text-item-text-input-holder::after {
  top: 0.6rem;
  bottom: 0.6rem;
}
.text-item[data-text-type="scene_heading"].selected .text-item-text-input-holder::after {
  top: 1.2rem;
  bottom: 0.2rem;
}
.text-item[data-text-type="character"].selected .text-item-text-input-holder::after {
  top: 1.2rem;
  bottom: 0.2rem;
}
.text-item[data-text-type="paragraph"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="indented"].selected .text-item-text-input-holder::after {
  top: 0.6rem;
  bottom: 0.6rem;
}
.text-item[data-text-type="list"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="numbered"].selected .text-item-text-input-holder::after {
  top: 0.2rem;
  bottom: 0.2rem;
}
.text-item[data-text-type="heading"].selected .text-item-text-input-holder::after {
  top: 1.3rem;
  bottom: 1.3rem;
}
.text-item[data-text-type="camera"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="cta"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="sponsor"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="time"].selected .text-item-text-input-holder::after,
.text-item[data-text-type="title"].selected .text-item-text-input-holder::after {
  top: 0.6rem;
  bottom: 0.6rem;
}
.selected .text-item-text-input::-moz-selection {
  background: transparent;
}
.selected .text-item-text-input::selection {
  background: transparent;
}
.text-item[data-text-type="indented"] .text-item-text-input {
  text-indent: 3rem;
}
.text-item[data-text-type="parenthetical"] .text-item-text-input::before,
.text-item-text-input[data-text-type="parenthetical"]::before {
  content: "(";
  position: absolute;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.text-item[data-text-type="parenthetical"] .text-item-text-input::after,
.text-item-text-input[data-text-type="parenthetical"] > *:first-child::after {
  content: ")";
  position: absolute;
}
.text-item[data-text-type="list"] .text-item-text-input::before,
[data-text-type="list"].text-item-text-input::before {
  content: "\2022";
  position: absolute;
  -webkit-transform: translate(-10px, 1px);
          transform: translate(-10px, 1px);
}
.text-item-hidden-input {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
.text-item-text-autofill {
  text-transform: capitalize;
  width: 400px;
  pointer-events: none;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0, 0, 0, 0.3);
}
[data-text-type="character"] .text-item-text-autofill {
  text-transform: uppercase;
  left: 36%;
  top: 1.25rem;
}
.h-inset--page [data-text-type="character"] .text-item-text-input,
.h-inset--page [data-text-type="character"].text-item-text-input {
  padding-left: calc((calc(33 * 1) / 82) * 100%);
  padding-right: calc((calc(13.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(33 * 1) / 82) * 100%) + calc((calc(13.5 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="character"].text-item-text-input {
    padding-left: calc(calc(33 * 1) * 1rem);
    padding-right: calc(calc(13.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="character"] .text-item-text-input,
.h-inset--wide [data-text-type="character"].text-item-text-input {
  padding-left: calc(36% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(6% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  max-width: 58%;
}
.h-inset--normal [data-text-type="character"] .text-item-text-input,
.h-inset--normal [data-text-type="character"].text-item-text-input {
  padding-left: calc(36% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(6% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  max-width: 58%;
}
.h-inset--page [data-text-type="dialogue"] .text-item-text-input,
.h-inset--page [data-text-type="dialogue"].text-item-text-input {
  padding-left: calc((calc(23 * 1) / 82) * 100%);
  padding-right: calc((calc(26 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(23 * 1) / 82) * 100%) + calc((calc(26 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="dialogue"].text-item-text-input {
    padding-left: calc(calc(23 * 1) * 1rem);
    padding-right: calc(calc(26 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="dialogue"] .text-item-text-input,
.h-inset--wide [data-text-type="dialogue"].text-item-text-input {
  padding-left: calc(21% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(21% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  max-width: 57%;
}
.h-inset--normal [data-text-type="dialogue"] .text-item-text-input,
.h-inset--normal [data-text-type="dialogue"].text-item-text-input {
  padding-left: calc(17% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(17% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  max-width: 57%;
}
.h-inset--page [data-text-type="parenthetical"] .text-item-text-input,
.h-inset--page [data-text-type="parenthetical"].text-item-text-input {
  padding-left: calc((calc(28 * 1) / 82) * 100%);
  padding-right: calc((calc(28 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(28 * 1) / 82) * 100%) * 2));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="parenthetical"].text-item-text-input {
    padding-left: calc(calc(28 * 1) * 1rem);
    padding-right: calc(calc(28 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="parenthetical"] .text-item-text-input,
.h-inset--wide [data-text-type="parenthetical"].text-item-text-input {
  padding-left: calc(29% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(29% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  max-width: 42%;
}
.h-inset--normal [data-text-type="parenthetical"] .text-item-text-input,
.h-inset--normal [data-text-type="parenthetical"].text-item-text-input {
  padding-left: calc(29% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(29% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  max-width: 42%;
}
.h-inset--page [data-text-type="transition"] .text-item-text-input,
.h-inset--page [data-text-type="transition"].text-item-text-input {
  padding-left: calc((calc(45 * 1) / 82) * 100%);
  padding-right: calc((calc(13.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(45 * 1) / 82) * 100%) + calc((calc(13.5 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="transition"].text-item-text-input {
    padding-left: calc(calc(45 * 1) * 1rem);
    padding-right: calc(calc(13.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="transition"] .text-item-text-input,
.h-inset--wide [data-text-type="transition"].text-item-text-input {
  padding-left: calc(67% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
  max-width: 33%;
}
.h-inset--normal [data-text-type="transition"] .text-item-text-input,
.h-inset--normal [data-text-type="transition"].text-item-text-input {
  padding-left: calc(67% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
  max-width: 33%;
}
.h-inset--page [data-text-type="list"] .text-item-text-input,
.h-inset--page [data-text-type="list"].text-item-text-input {
  padding-left: calc((17 / 82) * 100%);
  padding-right: calc((calc(13.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((17 / 82) * 100%) + calc((calc(13.5 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="list"].text-item-text-input {
    padding-left: calc(17 * 1rem);
    padding-right: calc(calc(13.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="list"] .text-item-text-input,
.h-inset--wide [data-text-type="list"].text-item-text-input {
  padding-left: calc(5% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(15% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  max-width: 80%;
}
.h-inset--normal [data-text-type="list"] .text-item-text-input,
.h-inset--normal [data-text-type="list"].text-item-text-input {
  padding-left: calc(5% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(15% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  max-width: 80%;
}
.h-inset--page [data-text-type="numbered"] .text-item-text-input,
.h-inset--page [data-text-type="numbered"].text-item-text-input {
  padding-left: calc((15 / 82) * 100%);
  padding-right: calc((calc(13.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((15 / 82) * 100%) + calc((calc(13.5 * 1) / 82) * 100%)));
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="numbered"].text-item-text-input {
    padding-left: calc(15 * 1rem);
    padding-right: calc(calc(13.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="numbered"] .text-item-text-input,
.h-inset--wide [data-text-type="numbered"].text-item-text-input {
  padding-left: calc(5% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(15% + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  max-width: 80%;
}
.h-inset--normal [data-text-type="numbered"] .text-item-text-input,
.h-inset--normal [data-text-type="numbered"].text-item-text-input {
  padding-left: calc(5% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(15% + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  max-width: 80%;
}
#page-module .text-item-text-input[style*="--data-padding-top"] {
  padding-top: 4rem;
}
#page-module .text-items-holder .text-item-text-input[style*="--data-padding-top"] {
  counter-increment: page-counter;
}
.h-inset--page .text-item-text-input[style*="--data-padding-bottom"]:not(:last-child) {
  padding-bottom: 6rem;
}
#page-module .text-items-holder .text-item-text-input:first-child::after,
#page-module .text-items-holder .text-item-text-input[style*="--data-padding-bottom"] + .text-item-text-input::after {
  content: counter(page-counter) ".";
  pointer-events: none;
  position: absolute;
  right: 1.75rem;
  top: 1.75rem;
  text-align: right;
  font-size: 1.333rem;
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page .text-item-text-input[style*="--data-padding-bottom"] {
    padding-bottom: unset;
  }
  .h-inset--page .text-item-text-input[style*="--data-padding-bottom"]::after {
    display: none;
  }
  .h-inset--page .text-item-text-input {
    padding-top: calc(var(--data-padding-top, 0px)) !important;
    padding-bottom: calc(var(--data-padding-bottom, 0px)) !important;
  }
  .h-inset--page .text-item-text-input:last-child {
    padding-bottom: calc(var(--data-document-padding-bottom, 0px)) !important;
  }
  .h-inset--page .text-item-text-input:first-child {
    padding-top: calc(var(--data-document-padding-top, 0px)) !important;
  }
  .h-inset--page .text-item-text-input:first-child::after,
  .text-item-text-input[style*="--data-padding-bottom"] + .text-item-text-input::after {
    display: none;
  }
}
/* stylelint-enable */
.h-inset--page [data-text-type="cta"] .text-item-text-input,
.h-inset--page [data-text-type="cta"].text-item-text-input,
.h-inset--page [data-text-type="time"] .text-item-text-input,
.h-inset--page [data-text-type="time"].text-item-text-input,
.h-inset--page [data-text-type="title"] .text-item-text-input,
.h-inset--page [data-text-type="title"].text-item-text-input,
.h-inset--page [data-text-type="camera"] .text-item-text-input,
.h-inset--page [data-text-type="camera"].text-item-text-input,
.h-inset--page [data-text-type="sponsor"] .text-item-text-input,
.h-inset--page [data-text-type="sponsor"].text-item-text-input {
  line-height: 2rem;
  min-height: 2rem;
  padding-left: calc(2rem + calc((calc(13.5 * 1) / 82) * 100%));
  padding-right: calc((calc(13.5 * 1) / 82) * 100%);
  max-width: calc(100% - calc(calc((calc(13.5 * 1) / 82) * 100%) * 2) - 2rem);
}
/* stylelint-disable */
@container (min-width: calc(82 * 1rem)) {
  .h-inset--page [data-text-type="cta"].text-item-text-input,
  .h-inset--page [data-text-type="time"].text-item-text-input,
  .h-inset--page [data-text-type="title"].text-item-text-input,
  .h-inset--page [data-text-type="camera"].text-item-text-input,
  .h-inset--page [data-text-type="sponsor"].text-item-text-input {
    padding-left: calc(2rem + calc(calc(13.5 * 1) * 1rem));
    padding-right: calc(calc(13.5 * 1) * 1rem);
  }
}
/* stylelint-enable */
.h-inset--wide [data-text-type="cta"] .text-item-text-input,
.h-inset--wide [data-text-type="cta"].text-item-text-input,
.h-inset--wide [data-text-type="time"] .text-item-text-input,
.h-inset--wide [data-text-type="time"].text-item-text-input,
.h-inset--wide [data-text-type="title"] .text-item-text-input,
.h-inset--wide [data-text-type="title"].text-item-text-input,
.h-inset--wide [data-text-type="camera"] .text-item-text-input,
.h-inset--wide [data-text-type="camera"].text-item-text-input,
.h-inset--wide [data-text-type="sponsor"] .text-item-text-input,
.h-inset--wide [data-text-type="sponsor"].text-item-text-input {
  padding-left: calc(2rem + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
  padding-right: calc(-1rem + clamp(calc(5rem * 0.2), 4vw, 5rem));
}
.h-inset--normal [data-text-type="cta"] .text-item-text-input,
.h-inset--normal [data-text-type="cta"].text-item-text-input,
.h-inset--normal [data-text-type="time"] .text-item-text-input,
.h-inset--normal [data-text-type="time"].text-item-text-input,
.h-inset--normal [data-text-type="title"] .text-item-text-input,
.h-inset--normal [data-text-type="title"].text-item-text-input,
.h-inset--normal [data-text-type="camera"] .text-item-text-input,
.h-inset--normal [data-text-type="camera"].text-item-text-input,
.h-inset--normal [data-text-type="sponsor"] .text-item-text-input,
.h-inset--normal [data-text-type="sponsor"].text-item-text-input {
  padding-left: calc(2rem + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
  padding-right: calc(-1rem + clamp(calc(2rem * 0.2), 3vw, 2rem));
}
.h-inset--page [data-text-type="cta"] .text-item-text-input::before,
.h-inset--page [data-text-type="cta"].text-item-text-input::before,
.h-inset--page [data-text-type="time"] .text-item-text-input::before,
.h-inset--page [data-text-type="time"].text-item-text-input::before,
.h-inset--page [data-text-type="title"] .text-item-text-input::before,
.h-inset--page [data-text-type="title"].text-item-text-input::before,
.h-inset--page [data-text-type="camera"] .text-item-text-input::before,
.h-inset--page [data-text-type="camera"].text-item-text-input::before,
.h-inset--page [data-text-type="sponsor"] .text-item-text-input::before,
.h-inset--page [data-text-type="sponsor"].text-item-text-input::before {
  top: 0.1em;
  left: calc(-0.07em + calc((calc(13.5 * 1) / 82) * 100%));
}
.h-inset--wide [data-text-type="cta"] .text-item-text-input::before,
.h-inset--wide [data-text-type="cta"].text-item-text-input::before,
.h-inset--wide [data-text-type="time"] .text-item-text-input::before,
.h-inset--wide [data-text-type="time"].text-item-text-input::before,
.h-inset--wide [data-text-type="title"] .text-item-text-input::before,
.h-inset--wide [data-text-type="title"].text-item-text-input::before,
.h-inset--wide [data-text-type="camera"] .text-item-text-input::before,
.h-inset--wide [data-text-type="camera"].text-item-text-input::before,
.h-inset--wide [data-text-type="sponsor"] .text-item-text-input::before,
.h-inset--wide [data-text-type="sponsor"].text-item-text-input::before {
  left: calc(-0.07em + calc(1rem + clamp(calc(5rem * 0.2), 4vw, 5rem)));
}
.h-inset--normal [data-text-type="cta"] .text-item-text-input::before,
.h-inset--normal [data-text-type="cta"].text-item-text-input::before,
.h-inset--normal [data-text-type="time"] .text-item-text-input::before,
.h-inset--normal [data-text-type="time"].text-item-text-input::before,
.h-inset--normal [data-text-type="title"] .text-item-text-input::before,
.h-inset--normal [data-text-type="title"].text-item-text-input::before,
.h-inset--normal [data-text-type="camera"] .text-item-text-input::before,
.h-inset--normal [data-text-type="camera"].text-item-text-input::before,
.h-inset--normal [data-text-type="sponsor"] .text-item-text-input::before,
.h-inset--normal [data-text-type="sponsor"].text-item-text-input::before {
  left: calc(-0.07em + calc(1rem + clamp(calc(2rem * 0.2), 3vw, 2rem)));
}
.text-item:last-child .text-item-text-input {
  padding-bottom: 2.5rem;
}
.text-item:last-child:is(.selected) .text-item-text-input-holder::after {
  bottom: 2.5rem;
}
.text-item[data-text-type="heading"] .text-item-text-input:empty,
[data-text-type="heading"].text-item-text-input:empty {
  line-height: 3em;
  height: 2em;
}
.text-item[data-text-type="scene_heading"] .text-item-text-input:empty,
[data-text-type="scene_heading"].text-item-text-input:empty {
  line-height: 3.8em;
  height: 2.4em;
}
.text-item[data-text-type="character"] .text-item-text-input:empty,
[data-text-type="character"].text-item-text-input:empty {
  line-height: 3em;
  height: 2em;
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) .text-item-text-input {
  padding-left: 1rem;
  padding-right: 1rem;
  width: calc(100% + 2rem);
  -webkit-transform: translate(-1rem, 0);
          transform: translate(-1rem, 0);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="character"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="character"].text-item-text-input {
  padding-left: calc(36% + 1rem);
  padding-right: calc(6% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="parenthetical"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="parenthetical"].text-item-text-input {
  padding-left: calc(29% + 1rem);
  padding-right: calc(29% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="dialogue"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="dialogue"].text-item-text-input {
  padding-left: calc(17% + 1rem);
  padding-right: calc(17% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="transtion"] .text-item-text-input {
  padding-left: calc(67% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="list"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="list"].text-item-text-input {
  padding-left: calc(5% + 1rem);
  padding-right: calc(15% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="numbered"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="numbered"].text-item-text-input {
  padding-left: calc(5% + 1rem);
  padding-right: calc(15% + 1rem);
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="cta"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="cta"].text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="time"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="time"].text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="title"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="title"].text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="camera"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="camera"].text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="sponsor"] .text-item-text-input,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="sponsor"].text-item-text-input {
  padding-left: 3rem;
}
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="cta"] .text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="cta"].text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="time"] .text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="time"].text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="title"] .text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="title"].text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="camera"] .text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="camera"].text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="sponsor"] .text-item-text-input::before,
.pensive-modal-section-wrapper:not(.h-inset--normal):not(.h-inset--wide):not(.h-inset--page) [data-text-type="sponsor"].text-item-text-input::before {
  left: 0.07em;
}
#page-module .text-items-holder .text-item-text-input:first-child {
  counter-increment: page-counter;
}
@-webkit-keyframes story-viewer-slide-up {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes story-viewer-slide-up {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 1;
  }
}
[data-story-viewer-status="showing-template"] .story-viewer-modules,
[data-story-viewer-status="loading"] .story-viewer-modules {
  top: 0;
}
[data-story-viewer-status="showing-template"] #template_info-module {
  display: block;
}
[data-can-edit="no"] .home-view-add-character-button {
  display: none;
}
[data-can-edit="no"] .home-view-edit-story-details-button {
  display: none;
}
[data-can-edit="no"] .home-view-profile-toggle {
  display: none;
}
[data-can-edit="no"] .act-header__add-scene-drop-zone {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}
.expandable-content-checkbox-label {
  pointer-events: all;
}
[data-can-edit="no"] .app-modal-save-button {
  display: none;
}
/* Story Text Content Styles */
[data-align="center"].pensive-text-item {
  text-align: center;
}
[data-align="right"].pensive-text-item {
  text-align: right;
}
.reading-slide-layout-content .pensive-text-item {
  color: #e6e6e6;
  font-size: 2rem;
  line-height: 1.5em;
}
.page-module .pensive-text-item,
.stats-module .pensive-text-item {
  line-height: 1.6em;
}
.pensive-text-item:first-child {
  margin-top: 0.4em;
}
.timeline-module.lt80 .pensive-text-item {
  font-size: 0.2rem;
}
.pensive-text-item--scene_heading,
.pensive-text-item--action,
.pensive-text-item--general,
.pensive-text-item--paragraph,
.pensive-text-item--dialogue,
.pensive-text-item--indented {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.pensive-text-item--indented {
  text-indent: 1.4em;
}
.pensive-text-item--list {
  margin-left: 10%;
  margin-right: 5%;
  position: relative;
  margin-bottom: 0.3em;
}
.pensive-text-item--list::before {
  content: "\2022";
  font-weight: bold;
  position: absolute;
  -webkit-transform: translateX(-13px);
          transform: translateX(-13px);
}
.reading-slide-layout-content .pensive-text-item--list::before {
  -webkit-transform: translateX(-18px);
          transform: translateX(-18px);
}
.pensive-text-item--numbered {
  margin-left: 10%;
  margin-right: 15%;
  position: relative;
  margin-bottom: 0.3em;
}
.pensive-text-item--numbered::before {
  counter-increment: list-counter;
  content: counter(list-counter) ".";
  position: absolute;
  text-align: right;
  -webkit-transform: translateX(calc(-100% - 0.4em));
          transform: translateX(calc(-100% - 0.4em));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.pensive-text-item--heading {
  font-size: 1.333rem;
  font-weight: bold;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.pensive-text-item--character {
  text-transform: uppercase;
  margin-left: 38%;
}
.pensive-text-item--scene_heading {
  text-transform: uppercase;
}
.pensive-text-item--parenthetical {
  margin-left: 26%;
  margin-right: 26%;
  position: relative;
  margin-top: 0;
}
.pensive-text-item--parenthetical::before {
  content: "(";
  display: inline-block;
}
.pensive-text-item--parenthetical::after {
  content: ")";
  position: absolute;
  bottom: 0;
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}
.pensive-text-item--dialogue {
  margin-top: 0;
  margin-left: 15%;
  margin-right: 15%;
}
.page-module .pensive-text-item--dialogue {
  margin-left: 20%;
  margin-right: 20%;
}
.pensive-text-item--transition {
  text-align: right;
  text-transform: uppercase;
  margin-left: 40%;
  font-weight: bold;
  color: #c8c8c8;
}
.pensive-text-item--action:first-child,
.pensive-text-item--general:first-child,
.pensive-text-item--paragraph:first-child,
.pensive-text-item--list:first-child,
.pensive-text-item--heading:first-child,
.pensive-text-item--numbered:first-child,
.pensive-text-item--transition:first-child,
.pensive-text-item--character:first-child {
  margin-top: 0.2em;
}
.pensive-text-item--numbered + .pensive-text-item:not(.pensive-text-item--numbered),
.pensive-text-item--list + .pensive-text-item:not(.pensive-text-item--list) {
  margin-top: 0.6em;
}
.pensive-text-item--numbered:first-child,
.pensive-text-item:not(.pensive-text-item--numbered) + .pensive-text-item--numbered {
  counter-reset: list-counter;
}
.pensive-text-item:not(.pensive-text-item--numbered) + .pensive-text-item--numbered,
.pensive-text-item:not(.pensive-text-item--list) + .pensive-text-item--list {
  margin-top: 0.3em;
}
.pensive-text-item:not(.pensive-text-item--dialogue) + .pensive-text-item--character {
  margin-top: 1em;
}
.pensive-text-item--dialogue + .pensive-text-item:not(.pensive-text-item--dialogue):not(.pensive-text-item--parenthetical) {
  margin-top: 1em;
}
.pensive-text-item--camera,
.pensive-text-item--cta,
.pensive-text-item--sponsor,
.pensive-text-item--time,
.pensive-text-item--title {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0.2em 0;
}
.pensive-text-item--camera::before,
.pensive-text-item--cta::before,
.pensive-text-item--sponsor::before,
.pensive-text-item--time::before,
.pensive-text-item--title::before {
  content: "";
  margin-right: 0.4em;
  margin-top: 0.16em;
  pointer-events: none;
  width: 1.3rem;
  height: 1.3rem;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  flex-shrink: 0;
}
.pensive-text-item--camera::before {
  background-image: url(/web-app/img/text_type_icons/camera.svg);
}
.pensive-text-item--cta::before {
  background-image: url(/web-app/img/text_type_icons/cta.svg);
}
.pensive-text-item--sponsor::before {
  background-image: url(/web-app/img/text_type_icons/sponsor.svg);
}
.pensive-text-item--time::before {
  background-image: url(/web-app/img/text_type_icons/time.svg);
}
.pensive-text-item--title::before {
  background-image: url(/web-app/img/text_type_icons/title.svg);
}
.reading-slide-layout-content .pensive-text-item--camera::before,
.reading-slide-layout-content .pensive-text-item--cta::before,
.reading-slide-layout-content .pensive-text-item--sponsor::before,
.reading-slide-layout-content .pensive-text-item--time::before,
.reading-slide-layout-content .pensive-text-item--title::before {
  margin-top: 0.28em;
  margin-right: 0.6em;
  width: 1em;
  height: 1em;
}
.reading-slide-layout-content .pensive-text-item--camera::before {
  background-image: url(/web-app/img/text_type_icons/camera_dark_theme.svg);
}
.reading-slide-layout-content .pensive-text-item--cta::before {
  background-image: url(/web-app/img/text_type_icons/cta_dark_theme.svg);
}
.reading-slide-layout-content .pensive-text-item--sponsor::before {
  background-image: url(/web-app/img/text_type_icons/sponsor_dark_theme.svg);
}
.reading-slide-layout-content .pensive-text-item--time::before {
  background-image: url(/web-app/img/text_type_icons/time_dark_theme.svg);
}
.reading-slide-layout-content .pensive-text-item--title::before {
  background-image: url(/web-app/img/text_type_icons/title_dark_theme.svg);
}
.page-module .pensive-text-item--camera::before,
.page-module .pensive-text-item--cta::before,
.page-module .pensive-text-item--sponsor::before,
.page-module .pensive-text-item--time::before,
.page-module .pensive-text-item--title::before {
  margin-top: 0.25em;
}
.pensive-text-item-link {
  color: var(--primary-button-bg);
  cursor: pointer;
  transition: color 200ms;
}
.pensive-text-item-link:hover {
  color: var(--primary-button-bg) hover;
}
.video-wrapper {
  display: flex;
  margin: auto;
  align-items: center;
  width: calc(100vw - 10rem);
  max-width: 120rem;
  height: 100%;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  width: 100%;
  height: 0;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.3);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Template Landing Page Styles */
.template-info-landing-page {
  background-color: var(--background-color, #16191c);
}
.template-info-content-wrapper {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 4rem);
}
.template-info-utility-button {
  color: var(--body-color, rgba(255, 255, 255, 0.9));
  text-decoration: none;
  padding: 1rem 0;
  cursor: pointer;
  display: inline-flex;
  opacity: 0.6;
  align-items: center;
  border-radius: 2rem;
  font-size: 1.333rem;
  font-weight: bold;
  margin-bottom: 1rem;
  transition: opacity 200ms;
}
@media only screen and (min-width: 768px) {
  .template-info-utility-button {
    margin-top: -2rem;
  }
}
.template-info-utility-button-icon {
  fill: currentColor;
  width: 1.4em;
  will-change: transform, opacity;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.template-info-utility-button-text {
  margin-left: 0.15em;
}
@media only screen and (min-width: 768px) {
  .template-info-utility-button:hover {
    opacity: 0.9;
  }
  .template-info-utility-button:hover .template-info-utility-button-icon {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
}
.template-info-masthead {
  position: relative;
  width: 100%;
  min-height: 20rem;
  border-radius: clamp(0.6rem, 2vw, 2rem);
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .template-info-masthead {
    padding-top: 40%;
  }
}
.template-info-masthead-content {
  position: relative;
  color: var(--body-color, #d9d9d9);
  padding: clamp(1rem, 2vw, 4rem);
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .template-info-masthead-content {
    margin-top: calc(-40% + 2rem);
    width: 50%;
    margin-bottom: 0;
  }
}
.template-info-masthead-content-logo {
  width: 100%;
  max-width: 14rem;
  margin-top: 1rem;
  -webkit-filter: var(--body-logo-color, unset);
          filter: var(--body-logo-color, unset);
}
.template-info-masthead-content-logo.missing {
  display: none;
}
@media only screen and (min-width: 768px) {
  .template-info-masthead-content-logo {
    margin-top: 0;
    -webkit-filter: var(--masthead-logo-color, unset);
            filter: var(--masthead-logo-color, unset);
  }
}
.template-info-masthead-content-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 4rem;
  max-width: 35em;
  word-break: break-word;
  color: var(--body-color, #fff);
}
@media only screen and (min-width: 768px) {
  .template-info-masthead-content-title {
    color: var(--masthead-header-color, #fff);
  }
}
/* stylelint-disable */
.template-info-masthead-content-description {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4em;
  white-space: pre-line;
  word-break: break-word;
  max-inline-size: -webkit-fit-content;
  max-inline-size: -moz-fit-content;
  max-inline-size: fit-content;
  -webkit-writing-mode: lr;
  writing-mode: lr;
  color: var(--body-color, #fff);
}
/* stylelint-enable */
@media only screen and (min-width: 768px) {
  .template-info-masthead-content-description {
    color: var(--masthead-color, #fff);
  }
}
.template-info-masthead-button {
  background: var(--body-cta-background, #03a9f4);
  padding: 0.8em 1.2em 0.7em;
  border-radius: 1.8em;
  font-size: 2rem;
  font-weight: bold;
  color: var(--body-cta-color, #fff);
}
@media only screen and (min-width: 768px) {
  .template-info-masthead-button {
    background: var(--masthead-cta-background, #03a9f4);
    color: var(--masthead-cta-color, #fff);
    transition: -webkit-filter 200ms, -webkit-transform 200ms;
    transition: filter 200ms, transform 200ms;
    transition: filter 200ms, transform 200ms, -webkit-filter 200ms, -webkit-transform 200ms;
  }
  .template-info-masthead-button:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
  }
}
.template-info-masthead-bkg {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: clamp(0.6rem, 2vw, 2rem);
  text-indent: -99999999px;
}
@media only screen and (min-width: 768px) {
  .template-info-masthead-bkg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.template-info-tabs {
  color: var(--body-color, #d9d9d9);
  list-style: none;
  font-size: 1.333rem;
  font-weight: bold;
  text-transform: uppercase;
  align-items: center;
  justify-content: flex-start;
  display: none;
}
@media only screen and (min-width: 768px) {
  .tabbed .template-info-tabs {
    display: flex;
  }
}
.template-info-tab {
  position: relative;
  cursor: pointer;
  opacity: 0.6;
  padding: 2rem;
  transition: opacity 100ms;
}
.template-info-tab:first-child {
  padding-left: 0;
}
.template-info-tab.selected {
  opacity: 1;
}
.template-info-tab:hover {
  opacity: 0.8;
}
.template-info-tab .template-info-tab-text {
  position: relative;
}
.template-info-tab .template-info-tab-text::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.2em);
  left: 50%;
  height: 0.2em;
  width: 0%;
  border-radius: 1rem;
  max-height: 3px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: currentColor;
  transition: opacity 100ms, width 100ms;
}
.template-info-tab:hover span::after {
  width: 100%;
}
.template-info-tab.selected span::after {
  width: 100%;
}
.template-info-section {
  position: relative;
  color: var(--body-color, #d9d9d9);
  padding: 2rem clamp(1rem, 2vw, 4rem);
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .template-info-section {
    padding: 2rem 0;
  }
  .tabbed .template-info-section {
    display: none;
  }
  .tabbed .template-info-section.selected {
    display: block;
  }
}
.template-info-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-top: thin solid var(--body-color, #d9d9d9);
  opacity: 0.3;
}
@media only screen and (min-width: 768px) {
  .template-info-section::before {
    display: none;
  }
}
.template-info-section-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  margin-top: 1rem;
  margin-bottom: 4rem;
  display: block;
  color: var(--body-header-color);
}
@media only screen and (min-width: 768px) {
  .tabbed .template-info-section-title {
    display: none;
  }
}
.template-info-section-content {
  margin-top: 2rem;
}
.template-info-section-content--grid-column-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50ch, 1fr));
  grid-gap: 6rem;
}
.template-info-subsection-item {
  color: var(--body-color, #d9d9d9);
}
.template-info-subsection-icon {
  position: relative;
  width: 9rem;
  height: 9rem;
  opacity: 0.75;
  text-indent: -9999999999px;
  -webkit-filter: var(--body-icon-color, unset);
          filter: var(--body-icon-color, unset);
}
.template-info-subsection-title {
  display: flex;
  align-items: flex-start;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 2.4rem;
}
.template-info-subsection-title.structure::before {
  content: attr(data-act-number);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 0.7em;
  height: 0.8em;
  text-align: center;
  font-size: 0.6em;
  margin-top: 0.3em;
  padding: 0.4em;
  font-weight: bold;
  border-radius: 50%;
  background-color: var(--act-color);
}
.template-info-subsection-subtitle {
  display: block;
  opacity: 0.8;
  font-size: 1.6rem;
  margin-top: 0.2em;
}
.template-info-subsection-meta {
  display: block;
  opacity: 0.4;
  font-size: 1.333rem;
  margin-top: 0.3em;
}
.template-info-subsection-description {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.7em;
  max-width: 60ch;
  white-space: pre-wrap;
}
.template-info-subsection-link {
  font-size: 1.6rem;
  line-height: 1.7em;
  text-decoration: none;
  color: var(--body-link-color, #03a9f4);
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
.template-info-subsection-link--block {
  display: block;
  color: var(--body-color, #d9d9d9);
  transition: all 200ms;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 768px) {
  .template-info-subsection-link:hover {
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
  }
  .template-info-subsection-link--block:hover {
    text-decoration: underline;
  }
}
@media only screen and (min-width: 768px) {
  .template-info-section-content--text-column-2 .template-info-subsection-description {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 6rem;
       -moz-column-gap: 6rem;
            column-gap: 6rem;
    text-align: justify;
    max-width: unset;
  }
}
.template-info-subsection-description--full-width {
  max-width: unset;
  min-width: 36ch;
}
.template-info-subsection-description .bullet {
  display: block;
}
.template-info-subsection-description .bullet::before {
  content: "•";
  padding: 0 1rem;
  font-weight: bold;
}
.template-info-act-number {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--act-color);
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
}
.template-info-author-bio-image {
  border-radius: 50%;
  width: 28rem;
  height: 28rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2rem solid rgba(0, 0, 0, 0.3);
  margin-top: -2rem;
  box-sizing: content-box;
}
.template-info-author-bio-image.no-border {
  border: none;
  border-radius: 0;
  padding: 0 2rem;
}
.template-info-author-bio-image.contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.template-info-author-bio-image.missing {
  display: none;
}
.template-info-examples-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 1.5rem;
  grid-gap: clamp(1.5rem, 2vw, 2rem);
}
@media only screen and (min-width: 768px) {
  .template-info-examples-holder {
    grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  }
}
.scene-card__content__image-thumb-holder {
  width: 100%;
  position: relative;
  padding-top: 54%;
  overflow: hidden;
  background: #efefef;
  border-radius: 0.2rem;
  border: thin solid #efefef;
  text-indent: -9999999px;
}
.reading-slide-layout-content-image-holder {
  position: relative;
  margin: 7rem 0 3rem;
  padding-top: 54%;
  overflow: hidden;
  border-radius: 0.57142857rem;
}
.reading-slide-layout-content-image-holder--collapsed {
  padding-top: 0 !important;
}
@media only screen and (min-width: 768px) {
  .reading-slide-layout-content-image-holder {
    margin: 10rem 0 3rem;
  }
}
[data-scene-image-orientation="landscape"] .home-layout-scene-item .emotive-thumbnail-image-wrapper,
[data-scene-image-orientation="landscape"] .slideshow-menu-scroller-scene-thumbnail-wrapper,
[data-scene-image-orientation="landscape"] .timeline-scene-image-holder,
[data-scene-image-orientation="landscape"] .scene-card__content__image-thumb-holder,
[data-scene-image-orientation="landscape"] .page-scene-featured-image-holder,
[data-scene-image-orientation="landscape"] .reading-slide-layout-content-image-holder {
  padding-top: 54%;
}
[data-scene-image-orientation="portrait"] .home-layout-scene-item .emotive-thumbnail-image-wrapper,
[data-scene-image-orientation="portrait"] .slideshow-menu-scroller-scene-thumbnail-wrapper,
[data-scene-image-orientation="portrait"] .timeline-scene-image-holder,
[data-scene-image-orientation="portrait"] .scene-card__content__image-thumb-holder,
[data-scene-image-orientation="portrait"] .page-scene-featured-image-holder,
[data-scene-image-orientation="portrait"] .reading-slide-layout-content-image-holder {
  padding-top: 170%;
}
[data-scene-image-orientation="square"] .home-layout-scene-item .emotive-thumbnail-image-wrapper,
[data-scene-image-orientation="square"] .slideshow-menu-scroller-scene-thumbnail-wrapper,
[data-scene-image-orientation="square"] .timeline-scene-image-holder,
[data-scene-image-orientation="square"] .scene-card__content__image-thumb-holder,
[data-scene-image-orientation="square"] .page-scene-featured-image-holder,
[data-scene-image-orientation="square"] .reading-slide-layout-content-image-holder {
  padding-top: 100%;
}
[data-scene-image-orientation="portrait"] .page-scene-featured-image-wrapper {
  max-width: 28rem;
}
[data-scene-image-orientation="square"] .stats-side-panel-featured-image-wrapper,
[data-scene-image-orientation="portrait"] .stats-side-panel-featured-image-wrapper {
  max-width: 18rem;
}
.reading-slide-layout-content-image-wrapper {
  background: rgba(0, 0, 0, 0.56);
  border-radius: 1rem;
}
[data-is-embedded="true"] .reading-slide-layout-content-image-wrapper {
  width: 75%;
  margin: 0 auto;
}
[data-scene-image-orientation="square"] .reading-slide-layout-content-image-wrapper {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
[data-scene-image-orientation="portrait"] .reading-slide-layout-content-image-wrapper {
  max-width: 31rem;
  margin-left: auto;
  margin-right: auto;
}
[data-scene-image-orientation="square"] [data-is-embedded="true"] .reading-slide-layout-content-image-wrapper {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}
[data-scene-image-orientation="portrait"] [data-is-embedded="true"] .reading-slide-layout-content-image-wrapper {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}
.scene-card-image {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: -0.2rem;
  top: -0.2rem;
  width: calc(100% + 0.4rem);
  height: calc(100% + 0.4rem);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999999px;
  background-image: url(/web-app/img/empty_image_placeholders/no_scene_image_darker.png);
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
}
.media-scroller {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-align: center;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: none;
}
.media-scroller::-webkit-scrollbar {
  display: none;
}
.media-scroller-nav-bar {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 100;
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: white;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
  justify-content: center;
  padding: 0 0.4rem;
}
@media only screen and (min-width: 768px) {
  .media-scroller-nav-holder {
    opacity: 0;
    transition: opacity 100ms ease-in-out;
  }
  .media-scroller-holder:hover .media-scroller-nav-holder,
  .reading-slide-layout-content-image-wrapper:hover .media-scroller-nav-holder {
    opacity: 1;
  }
}
.media-scroller-nav-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}
.media-scroller-nav-bar-item-inner {
  background: #9e9e9e;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  transition: background 100ms ease-in-out;
}
.media-scroller-nav-bar-item:hover .media-scroller-nav-bar-item-inner {
  background: rgba(255, 255, 255, 0.9);
}
.media-scroller-nav-bar-item.selected {
  cursor: default;
}
.media-scroller-nav-bar-item.selected .media-scroller-nav-bar-item-inner {
  border: 0.1rem solid rgba(0, 0, 0, 0.5);
  background: #ffffff;
  box-shadow: 0 0 0 0.09rem rgba(255, 255, 255, 0.55);
}
.media-scroller-increment-button {
  position: absolute;
  z-index: 100;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.media-scroller-increment-button--prev {
  left: 1rem;
}
.media-scroller-increment-button--next {
  right: 1rem;
}
.media-scroller-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: var(--offset, 0);
  overflow: hidden;
  scroll-snap-align: center;
}
.media-image {
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  width: calc(100% + 0.4rem);
  height: calc(100% + 0.4rem);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  text-indent: -99999999px;
  background-image: var(--scene-image-placeholder);
  background-position: center;
  background-size: 20%;
  background-size: clamp(1rem, 25%, 4rem);
  background-repeat: no-repeat;
}
.reading-slide-layout-content-image {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-scene-image-framing="cover"] .home-layout-scene-item .emotive-thumbnail-image,
[data-scene-image-framing="cover"] .slideshow-menu-scroller-scene-thumbnail-wrapper .emotive-thumbnail-image,
[data-scene-image-framing="cover"] .timeline-scene-image,
[data-scene-image-framing="cover"] .scene-card-image,
[data-scene-image-framing="cover"] .page-scene-featured-image,
[data-scene-image-framing="cover"] .reading-slide-layout-content-image {
  -o-object-fit: cover;
     object-fit: cover;
}
[data-scene-image-framing="cover"] .timeline-scene-image-bkg {
  display: none;
}
[data-scene-image-framing="contain"] .home-layout-scene-item .emotive-thumbnail-image,
[data-scene-image-framing="contain"] .slideshow-menu-scroller-scene-thumbnail-wrapper .emotive-thumbnail-image,
[data-scene-image-framing="contain"] .timeline-scene-image,
[data-scene-image-framing="contain"] .scene-card-image,
[data-scene-image-framing="contain"] .page-scene-featured-image,
[data-scene-image-framing="contain"] .reading-slide-layout-content-image {
  -o-object-fit: contain;
     object-fit: contain;
}
[data-scene-image-framing="contain"] .timeline-scene-image-bkg {
  display: block;
}
[data-slideshow-filter~="scenes_media"] .reading-slide-layout-content--with-image,
[data-slideshow-presentation-filter~="scenes_media"] .reading-slide-layout-content--with-image {
  margin: 8rem auto;
  display: flex;
}
[data-slideshow-filter~="scenes_media"] .reading-slide-layout-content-image-holder,
[data-slideshow-presentation-filter~="scenes_media"] .reading-slide-layout-content-image-holder {
  padding-top: 0 !important;
}
/* Menu Thumbnails */
[data-slideshow-filter~="scenes_media"] .slideshow-menu-scroller-scene-thumbnail-wrapper,
[data-slideshow-presentation-filter~="scenes_media"] .slideshow-menu-scroller-scene-thumbnail-wrapper {
  height: 0;
  min-height: unset;
  padding: 0;
  border: none;
  background: none;
}
.slideshow-menu-scroller-layout .emotive-thumbnail--clickable {
  cursor: pointer;
}
.emotive-thumbnail--clickable:hover .emotive-thumbnail-image,
.slideshow-menu-scroller-layout .emotive-thumbnail--clickable:hover .emotive-thumbnail-image {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.emotive-thumbnail--glass-hover {
  border: thin solid transparent;
  padding: 0.8rem 0.8rem 0.2rem;
  transition: all 400ms;
}
.emotive-thumbnail--glass-hover:hover {
  border: thin solid rgba(61, 61, 61, 0.54);
  border-radius: 1.5rem;
  transition: inherit;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
}
[data-can-edit="no"] [data-timeline-cell-type~="pw_guidance"] {
  height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border-bottom-width: 0 !important;
}
[data-can-edit="no"] .pensive-modal-section-wrapper.pw_guidance {
  display: none;
}
.pw_guidance-cell .text-cell-wrapper {
  background: #f1f9ff;
  border: thin solid hsl(207deg 90% 87%);
  border-radius: 0.6rem;
  padding: 1rem;
}
.table-cell.pw_guidance-cell {
  padding: 12px;
}
/* Homer Styles */
#homer {
  background: transparent;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  pointer-events: none;
}
.homer-modal {
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  transition: opacity 200ms;
}
.showing-homer-modal .homer-modal {
  opacity: 1;
  pointer-events: all !important;
}
.homer-modal-wrapper {
  font-family: "Poppins", sans-serif;
  background: #fbfefe;
  overflow: hidden;
  position: absolute;
  width: calc(100% - 6rem);
  max-width: 100rem;
  z-index: 10;
  height: calc(100vh - 6rem);
  max-height: clamp(27rem, 70vh, 69rem);
  border-radius: 1.2rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.homer-modal-bkg {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
:root {
  --header-height: 8.6rem;
}
.homer-modal-layout {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas: "grid-menu grid-header" "grid-menu grid-content";
}
.homer-modal-layout-menu {
  grid-area: grid-menu;
  z-index: 9999999999;
}
.homer-modal-layout-header {
  color: #353b42c7;
  grid-area: grid-header;
  padding: 3.6rem 1.2rem 3rem;
  display: flex;
  font-size: 2.4rem;
  align-items: center;
  margin: 0 4rem;
  border-bottom: 1px solid #efefef;
  text-align: center;
}
.homer-modal-header-holder {
  opacity: 0;
}
.homer-modal-layout-content {
  grid-area: grid-content;
}
.homer-modal-menu-holder {
  border-right: thin solid var(--surface-color-2-divider-color);
  width: 9rem;
  padding-left: 0.2rem;
  padding-top: 1rem;
  height: 100%;
  opacity: 0;
  background: #f8f9f9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.homer-modal-menu-sections-holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.homer-modal-menu-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.homer-modal-menu-section--story {
  color: #ff506b;
}
.homer-modal-menu-section--characters {
  color: #46d1a6;
}
.homer-modal-menu-section--beats {
  color: #c583cd;
}
.homer-modal-menu-section-launch-button {
  display: flex;
  align-items: center;
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  justify-content: center;
  border: thin solid #eee;
  border-radius: 50%;
  background: transparent;
  margin: 0.8rem 0 0;
  color: inherit;
  fill: #d32f2f;
  transition: all 200ms;
}
.homer-modal-menu-section-launch-button::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background: #fcfefe;
  border: thin solid var(--surface-color-2-divider-color);
  border-right-color: transparent;
  position: absolute;
  border-bottom-color: transparent;
  opacity: 0;
  pointer-events: none;
  color: inherit;
  -webkit-transform: translateX(4.425rem) rotate(-45deg);
          transform: translateX(4.425rem) rotate(-45deg);
}
.homer-modal-menu-section-launch-button.selected::after {
  opacity: 1;
}
.homer-modal-menu-section-launch-button:hover,
.homer-modal-menu-section-launch-button.selected {
  background: #fff;
  fill: currentColor;
}
.homer-modal-menu-section-launch-button.selected {
  background: #fff;
  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.05);
}
.homer-modal-menu-section-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  transition: all 200ms;
}
.homer-modal-menu-section-launch-button.selected ~ .homer-modal-menu-section-steps {
  padding: 1.4rem 0 0.8rem;
  opacity: 1;
  pointer-events: all;
}
.homer-modal-menu-section-step-holder {
  width: 100%;
  height: 0;
  border-radius: 50%;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  transition: all 200ms;
}
.homer-modal-menu-section-launch-button.selected ~ .homer-modal-menu-section-steps .homer-modal-menu-section-step-holder {
  height: 2.4rem;
}
.homer-modal-menu-section-step {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  background: #d8d8d8;
  border-radius: 50%;
  transition: all 200ms;
}
.homer-modal-menu-section-step-holder.in-active {
  pointer-events: none;
  cursor: default;
}
.homer-modal-menu-section-step-holder.selected {
  pointer-events: none;
}
.homer-modal-menu-section-step-holder.selected .homer-modal-menu-section-step {
  position: relative;
  pointer-events: none;
  background: currentColor;
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  box-shadow: 0 0 0 1px #f8f9f9, 0 0 0 1.5px currentColor;
}
.homer-modal-menu-section-step-holder.complete .homer-modal-menu-section-step {
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  background: currentColor;
}
.homer-modal-menu-section-step-holder.in-active .homer-modal-menu-section-step {
  border: thin solid #d8d8d8;
  background: transparent;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.homer-modal-menu-section-step-holder.complete:not(.selected):hover .homer-modal-menu-section-step {
  -webkit-transform: scale(2.2);
          transform: scale(2.2);
}
.homer-modal-menu-section-step-holder:not(.complete):not(.selected):hover .homer-modal-menu-section-step {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
  background: currentColor;
}
.homer-modal-menu-section-step-check {
  position: absolute;
  opacity: 0;
  width: 31%;
  height: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-44%, -57%) rotate(45deg) scale(0);
          transform: translate(-44%, -57%) rotate(45deg) scale(0);
  transition: opacity 200ms 200ms, -webkit-transform 200ms;
  transition: opacity 200ms 200ms, transform 200ms;
  transition: opacity 200ms 200ms, transform 200ms, -webkit-transform 200ms;
}
.homer-modal-menu-section-step-check::before {
  content: "";
  position: absolute;
  width: 0.1rem;
  height: 100%;
  background: #fff;
  right: 0;
  bottom: 0;
}
.homer-modal-menu-section-step-check::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;
  background: #fff;
  right: 0;
  bottom: 0;
}
.homer-modal-menu-section-step-holder.complete:not(.in-active) .homer-modal-menu-section-step-check {
  opacity: 1;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
  -webkit-transform: translate(-44%, -57%) rotate(45deg) scale(1);
          transform: translate(-44%, -57%) rotate(45deg) scale(1);
}
.homer-modal-content {
  padding: 0 clamp(1rem, 9vw, 11rem) 0 clamp(1rem, 4vw, 5rem);
  font-size: 3.2rem;
  font-weight: 400;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text-color-primary);
}
.homer-modal-content::-webkit-scrollbar {
  display: none;
}
.homer-modal-content-shadow-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 7rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #fbfefe, transparent);
  transition: opacity 200ms;
}
.homer-step {
  outline: none;
  min-height: clamp(calc(27rem - var(--header-height)), 70vh, calc(69rem - calc(var(--header-height) + 0.2rem)));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.homer-step-content {
  padding: var(--top-padding) 0 var(--bottom-padding);
}
.homer-message {
  color: #36495e;
  margin: 2rem 0;
}
.homer-inquiry {
  color: #586a7e;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fafefe;
  padding: 2rem 0 0.57142857rem 5rem;
  display: block;
  box-shadow: 0 5px 22px 9px #fafefe;
}
.homer-element--user-response {
  padding: 3rem 0 2rem 5rem;
  line-height: 1.9em;
  position: relative;
}
.homer-subtext {
  font-size: 0.6em;
  display: block;
  margin-top: 0.4em;
}
.homer-step-navigation {
  display: block;
  min-height: 5rem;
  margin-top: 3rem;
}
.homer-element--inline-text:not(:first-child)::before {
  content: "   ";
}
.homer-element {
  opacity: 0;
  position: relative;
}
.homer-element--block {
  display: block;
}
.homer-element--image img {
  width: 100%;
  max-width: 10rem;
}
.homer-element--homer-icon {
  width: 3.6rem;
  height: 3.6rem;
  position: absolute !important;
  left: 0;
  top: calc(2rem + 0.2rem);
  display: inline-flex;
  align-items: center;
  vertical-align: text-top;
  margin-right: 1rem;
}
.homer-element--homer-icon .homer-icon {
  width: 90%;
  height: 90%;
  opacity: 0.8;
}
.homer-element--user-icon {
  width: 3.2rem;
  height: 0.9em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute !important;
  left: 0;
  top: 4.1rem;
  -webkit-transform: translateY(0.09em);
          transform: translateY(0.09em);
}
.homer-user-icon {
  background: #ebecec;
}
.homer-element--user-icon .homer-user-icon {
  width: 0.9em;
  height: 0.9em;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
}
.homer-element--text-input,
.homer-element--textarea {
  background-color: rgba(20, 181, 255, 0.1);
  padding: 0.2em 0.4em 0.2em;
  outline: none;
  position: relative;
  border-radius: 0.5rem;
  background-image: linear-gradient(to right, transparent, transparent), linear-gradient(to right, #ff0000, #ff00b4, #0064c8);
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  margin-right: 0.15em;
  box-shadow: 0 0 0 rgba(26, 92, 129, 0);
  cursor: text;
  transition: background-size 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.homer-element--textarea {
  display: block;
  margin-top: 3rem;
  min-height: 5em;
}
.homer-element--text-input:focus-within,
.homer-element--textarea:focus-within {
  background-size: 0 0.1em, 100% 0.1em;
  box-shadow: 0 2px 1px rgba(26, 92, 129, 0.16);
}
.homer-element--text-input.homer-element--valid,
.homer-element--textarea.homer-element--valid {
  padding-right: 0;
}
.homer-element--text-placeholder {
  color: #bac0c4;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
}
.homer-element--textarea [contenteditable="true"]:empty ~ .homer-element--text-placeholder,
.homer-element--text-input [contenteditable="true"]:empty ~ .homer-element--text-placeholder {
  display: inline;
}
.homer-element--text-continue-button {
  font-size: 0.8em;
  color: inherit;
  cursor: pointer;
  width: 0;
  height: 1.5em;
  border-radius: 50%;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 100ms ease-out, width 100ms ease-out;
}
.homer-element--valid:focus-within .homer-element--text-continue-button {
  opacity: 1;
  width: 1.5em;
}
@media only screen and (min-width: 768px) {
  .homer-element--text-continue-button:hover,
  .homer-element--text-continue-button:focus {
    background: #c4e9fd;
  }
}
.homer-element--show {
  opacity: 1;
}
.homer-char {
  opacity: 0;
  -webkit-animation-duration: var(--presentation-speed);
          animation-duration: var(--presentation-speed);
}
.homer-fade {
  -webkit-animation-name: homerFade;
          animation-name: homerFade;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: var(--presentation-speed, 400ms);
          animation-duration: var(--presentation-speed, 400ms);
}
.homer-fade-out {
  -webkit-animation-name: homerFadeOut;
          animation-name: homerFadeOut;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: var(--fade-speed, 400ms);
          animation-duration: var(--fade-speed, 400ms);
}
.homer-submit-button {
  padding: 0.6em 1.4em 0.5em;
  color: #ff01b4;
  border: 2px solid #ff01b4;
  font-size: 2rem;
  font-family: inherit;
  border-radius: 3.3em;
  will-change: transform, opacity;
  transition: all 200ms;
  -webkit-animation-duration: var(--presentation-speed);
          animation-duration: var(--presentation-speed);
}
@media only screen and (min-width: 768px) {
  .homer-submit-button:hover {
    background: #feeaf3;
  }
  .homer-submit-button:active {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}
.homer-submit-button-next-arrow {
  display: inline-block;
  -webkit-transform: translateX(0.3em);
          transform: translateX(0.3em);
  -webkit-animation: ping-pong 1200ms infinite;
          animation: ping-pong 1200ms infinite;
}
@-webkit-keyframes ping-pong {
  0% {
    -webkit-transform: translateX(0.15em);
            transform: translateX(0.15em);
  }
  50% {
    -webkit-transform: translateX(0.45em);
            transform: translateX(0.45em);
  }
  100% {
    -webkit-transform: translateX(0.15em);
            transform: translateX(0.15em);
  }
}
@keyframes ping-pong {
  0% {
    -webkit-transform: translateX(0.15em);
            transform: translateX(0.15em);
  }
  50% {
    -webkit-transform: translateX(0.45em);
            transform: translateX(0.45em);
  }
  100% {
    -webkit-transform: translateX(0.15em);
            transform: translateX(0.15em);
  }
}
.homer-element [contenteditable="true"] {
  outline: none;
}
.homer-element--text-input [contenteditable="true"] {
  padding-right: var(--padding-right, 100px);
}
.homer-element--text-input [contenteditable="true"]:empty {
  padding-right: calc(var(--padding-right, 100px) + 7px);
}
.homer-element--text-input:not(:focus-within):hover,
.homer-element--textarea:not(:focus-within):hover {
  box-shadow: 0 2px 1px rgba(26, 92, 129, 0.16);
}
.homer-next-button,
.homer-next-step-button {
  font-size: 2.4rem;
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  opacity: 1;
  color: #ff00b4;
  background-image: linear-gradient(50deg, #ff3168, #ff00b4);
  will-change: transform, opacity;
  transition: all 200ms;
}
.homer-next-step-button {
  margin-top: 3rem;
}
.homer-next-button-inner {
  background: #fff;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transition: all 200ms;
}
.homer-element:not(.homer-element--valid) .homer-next-button,
.homer-step:not(.homer-step--valid) .homer-next-step-button {
  pointer-events: none;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .homer-next-step-button:hover .homer-next-button-inner,
  .homer-next-button:hover .homer-next-button-inner {
    background: rgba(252, 254, 254, 0.9);
  }
  .homer-next-button:active,
  .homer-next-step-button:active {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
.homer-next-button:focus .homer-next-button-inner,
.homer-next-step-button:focus .homer-next-button-inner {
  background: rgba(252, 254, 254, 0.9);
}
.homer-element--selectable-tags {
  margin-top: 1.2rem;
}
.homer-selectable-tag {
  font-size: 1.45rem;
  line-height: 1.6em;
  position: relative;
  cursor: pointer;
}
.homer-selectable-tag-checkbox {
  position: absolute;
  visibility: hidden;
}
.homer-selectable-tag-label {
  display: inline-block;
  padding: 0.2em 1em 0.16em;
  border-radius: 1.4em;
  border: thin solid #59697e;
  background: #fff;
  opacity: 0.8;
  transition: all 100ms;
}
.homer-selectable-tag-label:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.homer-selectable-tag-checkbox:checked ~ .homer-selectable-tag-label {
  background-image: linear-gradient(50deg, #ff3168, #ff00b4);
  border-color: transparent;
  color: #fff;
  opacity: 1;
  box-shadow: 0 5px 23px rgba(127, 11, 82, 0.2);
}
@media only screen and (min-width: 768px) {
  .homer-selectable-tag-checkbox:not(:checked) ~ .homer-selectable-tag-label:hover {
    opacity: 1;
    color: #ff00b4;
    border-color: #ff00b4;
    transition: all 100ms, color 200ms, border-color 200ms;
  }
}
.homer-element--template-list {
  margin-top: 0.2rem;
  display: block;
  min-height: 29rem;
}
.homer-template-item-radio-input {
  display: none;
}
.homer-template-item-wrapper {
  width: 100%;
  display: block;
}
.homer-template-item {
  position: relative;
  padding: 0.8rem;
  display: block;
  margin: 0.2rem;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 0.2rem transparent;
  cursor: pointer;
  transition: all 100ms;
}
@media only screen and (min-width: 768px) {
  .homer-template-item:active {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
  }
  .homer-template-item:hover {
    background-color: #e8eeee;
    box-shadow: 0 0 0 0.2rem #e8eeee;
  }
}
.homer-template-item-radio-input:checked ~ .homer-template-item {
  pointer-events: none;
  box-shadow: 0 0 0 0.2rem #ff01b4;
  background-color: #fff;
}
.homer-template-item-image-holder {
  width: 100%;
  position: relative;
  padding-top: 128%;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f7f7f7;
}
.homer-template-item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.homer-template-item-title {
  display: block;
  margin-top: 1rem;
  padding: 0.2rem;
  font-size: 1.333rem;
  line-height: 1.3em;
  font-weight: bold;
  text-decoration: none;
  color: var(--text-color-primary);
}
.homer-template-item-check {
  position: absolute;
  width: 2rem;
  height: 2rem;
  fill: #ff05b4;
  right: 1.6rem;
  top: 1.6rem;
  opacity: 0;
  background: #fff;
  border-radius: 50%;
  transition: all 100ms;
}
.homer-template-item-radio-input:checked ~ .homer-template-item .homer-template-item-check {
  opacity: 1;
}
.professional-structure-item-radio-input {
  display: none;
}
.professional-structure-item-wrapper {
  width: 100%;
  display: block;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 200ms;
}
.professional-structure-item {
  position: relative;
  padding: 0.2rem;
}
.professional-structure-item-check {
  position: absolute;
  width: 2rem;
  height: 2rem;
  fill: #fff;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  transition: all 200ms;
}
.professional-structure-item-text-holder {
  width: 100%;
  position: relative;
  display: flex;
  min-height: 12rem;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
}
.professional-structure-item-text {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: bold;
  text-align: center;
  font-size: 1.333rem;
  padding: 2rem;
  width: 100%;
  color: var(--text-color-primary);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-structure-item-learn-more-icon {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 1.6rem;
  height: 1.6rem;
  fill: #fff;
  opacity: 1;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-structure-item-wrapper:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
  .professional-structure-item-learn-more-icon {
    opacity: 0;
    pointer-events: none;
  }
  .professional-structure-item-wrapper:hover .professional-structure-item-learn-more-icon {
    opacity: 1;
    pointer-events: all;
  }
}
.professional-structure-item-radio-input:checked ~ .professional-structure-item-wrapper .professional-structure-item-check {
  opacity: 1;
}
@-webkit-keyframes homerFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes homerFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes homerFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes homerFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Interactive Tour Stuff */
#interactive-tour {
  position: fixed;
  z-index: 99999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Welcome screen */
.interactive-tour-welcome-screen {
  opacity: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: all;
  transition: all var(--transition-speed, 200ms);
}
.interactive-tour-welcome-screen-cover {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.interactive-tour-welcome-screen-modal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: calc(100vw - 8rem);
  height: calc(100% - 4rem);
  max-height: 53rem;
  max-width: 88rem;
  background: #050505;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 0.8rem;
  border: thin solid #212039;
  box-shadow: 0 12px 112px -60px rgba(0, 0, 0, 0.65);
}
.interactive-tour-welcome-screen-modal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/web-app/img/prewrite_inpsiration_gradient_cropped.jpg);
  background-position: left bottom;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.7;
}
.emotive-modal-close-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  opacity: 0.7;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.23);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  outline: none;
  cursor: pointer;
  transition: all 200ms;
  z-index: 99;
}
@media only screen and (min-width: 768px) {
  .emotive-modal-close-button:hover {
    background: #1e2229;
    opacity: 1;
  }
}
.emotive-modal-close-button::before {
  content: "";
  position: absolute;
  background: #fff;
  width: 60%;
  height: 3px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.emotive-modal-close-button::after {
  content: "";
  position: absolute;
  background: #fff;
  width: 3px;
  height: 60%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.interactive-tour-welcome-screen-modal-header {
  padding: 3.8rem 0 0 3.6rem;
  flex-basis: 40%;
  flex-shrink: 1;
}
.interactive-tour-welcome-screen-modal-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  color: #f2f3f3;
  font-size: 4rem;
  letter-spacing: 0.0125em;
}
.interactive-tour-welcome-screen-modal-message {
  color: #fff;
  font-size: 2rem;
  line-height: 1.45em;
  margin-top: 2.6rem;
  text-shadow: 0 0 22px black;
  padding-right: 4em;
}
.interactive-tour-welcome-screen-modal-content {
  overflow-y: auto;
  max-height: 100%;
  flex-basis: 60%;
  flex-shrink: 1;
  padding: 3rem;
  box-sizing: border-box;
  border-radius: 0 0.8rem 0.8rem 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.1), transparent);
}
/* Scrollbar */
.interactive-tour-welcome-screen-modal-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: absolute;
}
.interactive-tour-welcome-screen-modal-content::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #2e343e;
  margin: 1px;
}
.interactive-tour-welcome-screen-modal-content::-webkit-scrollbar-track:vertical {
  border: thin solid transparent;
  border-radius: 0;
  background: transparent;
}
.interactive-tour-welcome-screen-modal-content::-webkit-scrollbar-track:horizontal {
  border: thin solid #222;
  border-bottom: transparent;
  border-left: transparent;
  border-radius: 0;
  margin-left: 200px;
}
.interactive-tour-welcome-screen-modal-content::-webkit-scrollbar-thumb:hover {
  border-radius: 0;
  background: #343b46;
  margin: 1px;
}
.interactive-tour-welcome-screen-modal-content-group {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  margin-top: 2rem;
}
.interactive-tour-welcome-screen-modal-group-title {
  font-size: 2rem;
  color: #ddd;
  text-align: left;
  margin: 4rem 0 2rem;
  padding-left: 1.6rem;
}
.interactive-tour-welcome-screen-modal-group-title:first-child {
  margin-top: 1.6rem;
}
.interactive-tour-welcome-screen-tour-item {
  position: relative;
  display: flex;
  gap: 2rem;
  padding: 1.6rem;
  text-align: left;
  cursor: pointer;
  border: thin solid transparent;
  border-radius: 0.8rem;
  transition: all 150ms;
}
.interactive-tour-welcome-screen-tour-item::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0;
  width: calc(100% - 3.2rem);
  height: 1px;
  background: #162234;
  transition: background 150ms;
}
.interactive-tour-welcome-screen-tour-item:first-child::before {
  background: transparent;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-welcome-screen-tour-item:hover {
    background: #121e30;
    border: thin solid #1b2e46;
  }
  .interactive-tour-welcome-screen-tour-item:hover::before {
    background: transparent;
  }
  .interactive-tour-welcome-screen-tour-item:hover + .interactive-tour-welcome-screen-tour-item::before {
    background: transparent;
  }
}
.interactive-tour-welcome-screen-tour-item-icon-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.8rem;
  background-image: linear-gradient(225deg, rgba(103, 58, 183, 0.25), rgba(29, 131, 211, 0.25));
  border: thin solid rgba(255, 255, 255, 0.05);
  -webkit-filter: brightness(1);
          filter: brightness(1);
  transition: -webkit-filter 150ms;
  transition: filter 150ms;
  transition: filter 150ms, -webkit-filter 150ms;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-welcome-screen-tour-item:hover .interactive-tour-welcome-screen-tour-item-icon-holder {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
}
.interactive-tour-welcome-screen-tour-item-icon {
  width: 55%;
  height: 55%;
  fill: url(#my-cool-gradient) #8467dd;
  -webkit-filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}
.interactive-tour-welcome-screen-tour-item-image-holder {
  position: relative;
  border-radius: 0.4rem;
  overflow: hidden;
  margin-right: 1rem;
  flex: 2;
}
.interactive-tour-welcome-screen-tour-item-image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.interactive-tour-welcome-screen-tour-item-content {
  position: relative;
  flex: 4;
}
.interactive-tour-welcome-screen-tour-item-start-icon {
  width: 2.3rem;
  height: 2.3rem;
  position: absolute;
  fill: #244b6c;
  right: 1rem;
  top: 1rem;
  opacity: 0;
  transition: all 150ms;
}
.interactive-tour-welcome-screen-tour-item-learned-icon {
  width: 2.2rem;
  height: 2.2rem;
  position: absolute;
  fill: #6e50b0;
  right: 1rem;
  top: 1rem;
  opacity: 0.4;
  transition: all 150ms;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-welcome-screen-tour-item:hover .interactive-tour-welcome-screen-tour-item-start-icon {
    opacity: 1;
  }
  .interactive-tour-welcome-screen-tour-item:hover .interactive-tour-welcome-screen-tour-item-learned-icon {
    opacity: 0.8;
  }
}
.interactive-tour-welcome-screen-tour-item-title {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.8);
}
.interactive-tour-welcome-screen-tour-item-description {
  font-size: 1.333rem;
  font-weight: normal;
  line-height: 1.5em;
  color: rgba(255, 255, 255, 0.45);
  display: block;
}
.interactive-tour-step-spotlight {
  position: absolute;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  border-radius: var(--spotlight-border-radius, 0.8rem);
  z-index: 0;
  will-change: left, right, top, bottom, width, height, opacity, border-radius;
  box-shadow: 0 0 0 117vmax rgba(100, 61, 185, 0.15), 0 0 0 0.3rem #5a4dbf, 0 0 52px rgba(0, 0, 0, 0.15);
  transition: all var(--spotlight-transition-speed) cubic-bezier(0.06, 0.975, 0.195, 0.985);
}
.interactive-tour-step-spotlight.halo-hidden {
  box-shadow: 0 0 0 117vmax rgba(100, 61, 185, 0.15);
}
.interactive-tour-steps-holder {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.interactive-tour-step {
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--step-transition-speed);
}
.interactive-tour-step.interactive-tour-step--showing {
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--step-transition-speed);
}
.interactive-tour-step-tooltip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 22rem;
  max-width: 32rem;
  background: #eee;
  background: #0288d1;
  background: linear-gradient(45deg, #673ab7, #1d83d3);
  background-size: calc(100% + 1.4rem) calc(100% + 1.4rem);
  background-position: -0.7rem -0.7rem;
  position: absolute;
  border-radius: 0.8rem;
  padding: 0.8rem 0.8rem 1.6rem;
  pointer-events: all;
  box-shadow: 0 9px 17px -5px rgba(52, 27, 121, 0.3);
  color: #fff;
}
.interactive-tour-step-tooltip::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: #eee;
  background: #0288d1;
  background: linear-gradient(45deg, #673ab7, #1d83d3);
  background-size: calc(var(--tooltip-width, 100%) + 1.4rem) calc(var(--tooltip-height, 100%) + 1.4rem);
  border-radius: 0 0 0 0.2rem;
  position: absolute;
  z-index: 0;
}
.interactive-tour-step-tooltip--primary {
  background: var(--primary-button-bg);
  background: linear-gradient(45deg, #673ab7, #1d83d3);
  color: var(--surface-color-2-divider-color);
}
.interactive-tour-step-tooltip-close-button {
  position: absolute;
  cursor: pointer;
  width: 2.6rem;
  height: 2.6rem;
  right: 0.6rem;
  top: 0.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  transition: all 100ms;
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-step-tooltip-close-button:hover {
    background: #dfdfdf;
    background: #0096e5;
    background: rgba(0, 0, 0, 0.16);
    fill: #383838;
    fill: #fff;
  }
}
.interactive-tour-step-tooltip-close-button-icon {
  width: 1rem;
  height: 1rem;
}
/* stylelint-disable */
.interactive-tour-step-tooltip.above::before {
  left: calc(50% + var(--h-offset, 0px));
  top: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(315deg);
          transform: translate(-50%, -50%) rotate(315deg);
  background: linear-gradient(135deg, #673ab7, #1d83d3);
  background-size: calc(var(--tooltip-width) + 1.4rem) calc(var(--tooltip-height) + 1.4rem);
  background-position-x: calc(calc(var(--tooltip-width) / 2) - var(--h-offset, 0px));
  background-position-y: calc(var(--tooltip-height) + 1.4rem);
}
.interactive-tour-step-tooltip.right::before {
  left: 0;
  top: calc(50% + var(--v-offset, 0px));
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #673ab7, #1d83d3);
  background-size: calc(var(--tooltip-width, 100%) + 1.4rem) calc(var(--tooltip-height, 100%) + 1.4rem);
  background-position-y: calc(calc(-50% + 0.7rem) + var(--v-offset, 0px));
}
.interactive-tour-step-tooltip.left::before {
  left: 100%;
  top: calc(50% + var(--v-offset, 0px));
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
          transform: translate(-50%, -50%) rotate(225deg);
  background: linear-gradient(135deg, #673ab7, #1d83d3);
  background-size: calc(var(--tooltip-width, 100%) + 1.4rem) calc(var(--tooltip-height, 100%) + 1.4rem);
  background-position-x: 1.4rem;
  background-position-y: calc(calc(-50% + 0.7rem) + var(--v-offset, 0px));
}
.interactive-tour-step-tooltip.below::before {
  left: calc(50% + var(--h-offset, 0px));
  top: 0;
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
  background: linear-gradient(315deg, #673ab7, #1d83d3);
  background-size: calc(var(--tooltip-width, 100%) + 1.4rem) calc(var(--tooltip-height, 100%) + 1.4rem);
  background-position-x: calc(calc(-50% + 0.7rem) + var(--h-offset, 0px));
}
/* stylelint-enable */
.interactive-tour-step-tooltip.interactive-tour-step-tooltip--no-element::before {
  display: none;
}
.interactive-tour-step-tooltip-image-holder {
  width: 100%;
  padding: 30%;
  margin-bottom: 0.6rem;
  background: #c6caca;
  border-radius: 0.6rem 0.6rem;
}
.interactive-tour-step-tooltip-content {
  font-size: 1.333rem;
  padding: 0.8rem 2.4rem 0 1rem;
  line-height: 1.4em;
}
.interactive-tour-step-tooltip-steps {
  font-size: 1.333rem;
  margin-bottom: 0.3rem;
  display: block;
  opacity: 0.6;
}
.interactive-tour-step-tooltip-title {
  font-size: 1.6rem;
  margin: 1.2rem 0 1rem;
}
.interactive-tour-step-tooltip-message {
  display: inline-block;
  line-height: 1.6em;
  margin-top: 0.6rem;
}
.interactive-tour-step-tooltip-steps + .interactive-tour-step-tooltip-message {
  margin-top: 0;
}
.interactive-tour-step-tooltip-link {
  display: inline-block;
  cursor: pointer;
  opacity: 0.6;
  transition: all 100ms;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-step-tooltip-link:hover {
    opacity: 1;
  }
}
.interactive-tour-step-tooltip-message-text {
  display: block;
  margin-top: 1rem;
}
.interactive-tour-step-tooltip-message-text:only-child {
  margin-top: 0;
}
.interactive-tour-step-tooltip-footer {
  padding: 2.2rem 1rem 0;
}
.interactive-tour-step-spotlight-blocker {
  position: absolute;
  pointer-events: all;
  min-width: 10rem;
  min-height: 10rem;
}
.interactive-tour-step-spotlight-blocker--left {
  left: 0;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  height: 200vh;
  width: 200vw;
}
.interactive-tour-step-spotlight-blocker--top {
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  width: 200vw;
  height: 200vh;
}
.interactive-tour-step-spotlight-blocker--right {
  left: 100%;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  height: 200vh;
  width: 200vw;
}
.interactive-tour-step-spotlight-blocker--bottom {
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 200vw;
  height: 200vh;
}
.interactive-tour-step-tooltip-button {
  outline: none;
  display: inline-block;
  position: relative;
  font-size: 1.333rem;
  padding: 0.7em 1em 0.6em;
  cursor: pointer;
  min-width: 7rem;
  text-decoration: none;
  border-radius: 3px;
  color: #fff;
  transition: all 100ms;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
  background: rgba(0, 0, 0, 0.14);
  border: thin solid #6e85d4;
}
.interactive-tour-step-tooltip-button:disabled {
  pointer-events: none;
  opacity: 0.4;
}
@media only screen and (min-width: 768px) {
  .interactive-tour-step-tooltip-button:hover {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
}
.interactive-tour-step-tooltip-button-wrapper {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.interactive-tour-step-tooltip-button-wrapper:has(.attention)::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  top: 0;
  left: 100%;
  position: absolute;
  border: thin solid rgba(255, 255, 255, 0.2);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9999999;
  -webkit-animation: tour-tooltip-coach-mark-pulse infinite 750ms ease-out;
          animation: tour-tooltip-coach-mark-pulse infinite 750ms ease-out;
}
.interactive-tour-step-tooltip-valid-icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: rgba(255, 255, 255, 0.6);
  position: absolute;
  right: -3.8rem;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.interactive-tour-coach-mark {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #416cca;
  background: #6c54df;
  top: 13rem;
  left: 40rem;
  position: absolute;
  border: thin solid rgba(255, 255, 255, 0.2);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9999999;
  -webkit-animation: tour-coach-mark-pulse infinite 750ms ease-out;
          animation: tour-coach-mark-pulse infinite 750ms ease-out;
}
@-webkit-keyframes tooltip-bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -7px, 0);
            transform: translate3d(0, -7px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
  }
}
@keyframes tooltip-bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -7px, 0);
            transform: translate3d(0, -7px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -2px, 0);
            transform: translate3d(0, -2px, 0);
  }
}
.tooltip-bouncer {
  -webkit-animation-name: tooltip-bounce;
          animation-name: tooltip-bounce;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 600ms;
          animation-duration: 600ms;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
@-webkit-keyframes tour-coach-mark-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    box-shadow: 0 0 0 0 rgba(82, 87, 194, 0.6);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
  }
  90% {
    box-shadow: 0 0 0 20px rgba(82, 87, 194, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
}
@keyframes tour-coach-mark-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    box-shadow: 0 0 0 0 rgba(82, 87, 194, 0.6);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
  }
  90% {
    box-shadow: 0 0 0 20px rgba(82, 87, 194, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
}
@-webkit-keyframes tour-tooltip-coach-mark-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
  }
  90% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
}
@keyframes tour-tooltip-coach-mark-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
  }
  90% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
  }
}
[data-interactive-tour-id="make_new_story"] .professional-template-item:hover .professional-template-item-learn-more-meta {
  opacity: 0;
  pointer-events: none;
}
[data-interactive-tour-id="make_new_story"] .new-story-section--suggest-one {
  pointer-events: none;
}
[data-interactive-tour-id="make_new_story"] .professional-modal-template-masthead-content-learn-more,
[data-interactive-tour-id="make_new_story"] .js-cancel {
  display: none;
}
[data-interactive-tour-id="import_screenplay"] .import-screenplay-modal button,
[data-interactive-tour-id="import_screenplay"] .import-screenplay-modal .import-screenplay-modal-analyze-text-input-holder {
  pointer-events: none;
}
[data-interactive-tour-id="import_screenplay"] .import-screenplay-modal button[data-tour-item-id="review_screenplay_button"],
[data-interactive-tour-id="import_screenplay"] .import-screenplay-modal button[data-tour-item-id="save_review_progress"],
[data-interactive-tour-id="import_screenplay"] .import-screenplay-modal button[data-tour-item-id="save_as_prewrite"] {
  pointer-events: all;
}
[data-interactive-tour-id="add_plot_thread"] .app-modal-component-content--scroll {
  pointer-events: none;
}
[data-interactive-tour-id="add_plot_thread"] .app-modal-component-content--scroll > * {
  pointer-events: all;
}
.interactive-tour-icon-holder {
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1em;
  fill: currentColor;
  margin: 0 0.2em;
}
.interactive-tour-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.interactive-tour-icon--click-drag {
  width: 128%;
  height: 132%;
  left: 41%;
  top: 53%;
}
.interactive-tour-icon--hand-drag {
  width: 128%;
  height: 132%;
  left: 41%;
  top: 53%;
}
.interactive-tour-icon--click {
  width: 95%;
  height: 95%;
  left: 51%;
  top: 55%;
}
.interactive-tour-icon--enter-text {
  left: 48%;
  top: 66%;
  width: 115%;
  height: 115%;
}
/* Spotlight Targets */
.timeline-spotlight-target {
  position: fixed;
  left: 0;
  top: 1.4rem;
  pointer-events: none;
  opacity: 0;
  width: 100%;
  height: calc(100% - 4.4rem);
}
.timeline-sidebar-spotlight-target {
  position: fixed;
  left: 0;
  top: 1.4rem;
  pointer-events: none;
  opacity: 0;
  width: 200px;
  height: calc(100% - 4.4rem);
}
.timeline-dropzone-spotlight-target {
  position: fixed;
  left: 200px;
  top: 1.4rem;
  pointer-events: none;
  opacity: 0;
  width: calc(100vw - 200px);
  height: calc(100% - 4.4rem);
}
.timeline-structure-spotlight-target {
  position: fixed;
  left: 200px;
  top: 6.4rem;
  pointer-events: none;
  opacity: 0;
  width: calc(100% - 200px);
  height: 20px;
}
.timeline-scene-spotlight-target {
  position: absolute;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  left: 0;
  top: 0;
  height: calc(100vh - 110px);
}
/* View Placement Styles */
/* CARDS */
[data-view-placement~="card_content"][data-view-placement~="card_character_list"] {
  width: 100%;
}
#card_footer {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
[data-view-placement~="card_image"],
[data-view-placement~="card_theme"] {
  width: 100%;
}
[data-view-placement~="card_footer"][data-view-placement~="card_character_list"] {
  flex: 3;
}
/* MODALS */
[data-view-placement-children~="marker"] [data-view-placement~="marker"] {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-basis: unset;
  flex-grow: 0;
}
[data-view-placement-children~="is_slide"] [data-view-placement~="is_slide"] {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-basis: unset;
  flex-grow: 0;
}
.app-modal-component-content-items-wrapper > [data-view-placement-children~="character_masthead_content"]:first-child .pensive-modal-subsection-wrapper > [data-view-placement~="character_masthead_content"]:first-child {
  padding-top: 2.6rem;
}
/* Character Card */
[data-view-placement~="character_card_meta"] + [data-view-placement~="character_card_meta"] > *::before {
  content: "•";
  padding: 0 0.2em;
  opacity: 0;
}
/* Find and Replace */
.replace-text-items-header-grid {
  border: thin solid var(--surface-color-3-divider-color);
  border-radius: 0.4rem;
  overflow: hidden;
}
.replace-text-items-header {
  position: -webkit-sticky;
  position: sticky;
  top: -2px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  border: thin solid var(--surface-color-3-divider-color);
  border-bottom: none;
  border-top: thin solid var(--surface-color-3-divider-color);
  cursor: pointer;
  z-index: 10;
}
.professional-dropdown-selected-item-container.replace-text-items-header {
  color: #069ee5;
}
.replace-text-items-header::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;
  height: 1.75rem;
  background: linear-gradient(180deg, #051b2c, transparent);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.replace-text-items-header.first {
  border-top: thin solid var(--surface-color-3-divider-color);
}
.replace-text-items-header.showing::after {
  opacity: 0.025;
}
.replace-text-items-header-item {
  font-size: 1.333rem;
  background: var(--surface-color-2);
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-left: 1.4rem;
}
.professional-dropdown-selected-item-container .replace-text-items-header-item,
.replace-text-items-header:hover .replace-text-items-header-item {
  background: var(--surface-color-2-hover);
}
.replace-text-items-header-item-count {
  color: var(--text-color-secondary);
}
.replace-text-items-header-item--to {
  position: relative;
  border-left: thin solid var(--surface-color-3-divider-color);
  padding-left: 2.4rem;
}
.replace-text-items-header-item-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: thin solid var(--surface-color-3-divider-color);
  background: var(--surface-color-3);
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.professional-dropdown-selected-item-container .replace-text-items-header-item-arrow {
  border-color: #069ee5;
}
.professional-dropdown-selected-item-container .replace-text-items-header-item-arrow,
.replace-text-items-header:hover .replace-text-items-header-item-arrow {
  background: var(--surface-color-3);
}
.replace-text-items-header-item-arrow-icon {
  width: 80%;
  height: 80%;
  fill: var(--icon-color-secondary);
}
.professional-dropdown-selected-item-container .replace-text-items-header-item-arrow-icon {
  fill: var(--primary-text-color);
}
.replace-text-items-header-item-dropdown-button {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  display: flex;
  font-weight: normal;
  padding: 0.4em 0.7em 0.35em 0.8em;
  border-radius: 0.4rem;
  align-items: center;
  gap: 0.6rem;
  color: #444;
  cursor: pointer;
  transition: all 200ms;
}
.replace-text-items-header-item-dropdown-button:hover {
  background: #d6f0ff;
  color: #333;
}
.professional-dropdown-selected-item.replace-text-items-header-item-dropdown-button {
  background: #d6f0ff;
  color: #0697db;
}
.replace-text-items-header-item-dropdown-button-arrow {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #969696;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
  border-width: 6px 5px 0;
}
.professional-dropdown-selected-item .replace-text-items-header-item-dropdown-button-arrow {
  border-top-color: #069ee5;
}
.replace-text-list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
  border-top: thin solid var(--surface-color-2-divider-color);
}
.showing + .replace-text-list {
  grid-template-rows: 1fr;
}
.replace-text-list-wrapper {
  overflow: hidden;
}
.find-replace-spinner {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.57142857rem;
  fill: var(--text-color-primary);
}
.replace-text-list-items {
  border: thin solid var(--surface-color-3-divider-color);
  border-top: none;
  background: var(--search-result-bg);
}
.replace-text-list-item {
  font-size: 1.2rem;
  padding: 0.2rem 0.3rem 0.2rem 1.2rem;
  color: var(--text-color-primary);
}
.replace-text-list-item:nth-child(even) {
  background: var(--search-result-bg--even);
}
.result {
  color: var(--search-result-highlight-color);
  font-weight: bold;
  background: var(--search-result-highlight-bg);
  padding: 0 0.3em 0.1em;
  border-radius: 0.4rem;
}
/* Document Measuring Container */
#page-metrics-view {
  width: 100vw;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 9999999999999999999;
}
/* Professional - Components - Dropdown Menu */
.professional-floating-dropdown-menu {
  pointer-events: all;
  color: var(--text-color-primary);
}
.professional-dropdown-menu-level-header {
  display: flex;
  align-items: center;
  border-bottom: thin solid var(--surface-color-4-divider-color);
}
.professional-dropdown-menu-level-header-back {
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  cursor: pointer;
}
.professional-dropdown-menu-level-header-back-icon {
  width: 1rem;
  height: 1rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  fill: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .professional-dropdown-menu-level-header-back-icon {
    transition: fill 200ms, -webkit-transform 200ms;
    transition: fill 200ms, transform 200ms;
    transition: fill 200ms, transform 200ms, -webkit-transform 200ms;
  }
  .professional-dropdown-menu-level-header-back:hover .professional-dropdown-menu-level-header-back-icon {
    fill: var(--text-color-primary);
    -webkit-transform: rotate(180deg) translateX(0.3rem);
            transform: rotate(180deg) translateX(0.3rem);
  }
}
.professional-dropdown-menu-level-header-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1.2rem 1.2rem 1.2rem 0.3rem;
  font-size: 1.333rem;
  color: var(--text-color-primary);
  white-space: nowrap;
}
.professional-dropdown-menu-content-holder {
  position: relative;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
[data-menu-level] {
  flex-shrink: 0;
  width: 100vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  [data-menu-level] {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 22rem;
  }
}
.professional-floating-dropdown-menu-group-title {
  display: block;
  border-top: thin solid var(--surface-color-4-divider-color);
  padding: 1em 1.8em 0.75rem 1.6em;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-muted);
}
.professional-floating-dropdown-menu-group:first-of-type {
  border-top: none;
}
.professional-floating-dropdown-menu-group:first-of-type .professional-floating-dropdown-menu-group-title {
  border-top: none;
}
.professional-dropdown-menu-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
}
/* Overlay Transitions - Mobile */
.professional-dropdown-menu-overlay.reveal {
  -webkit-animation: professional-dropdown-overlay-reveal 400ms forwards;
          animation: professional-dropdown-overlay-reveal 400ms forwards;
}
.professional-dropdown-menu-overlay.hide {
  -webkit-animation: professional-dropdown-overlay-hide 400ms forwards;
          animation: professional-dropdown-overlay-hide 400ms forwards;
}
.professional-dropdown-menu-nav {
  position: fixed;
  left: 0;
  top: 100%;
  width: 100vw;
  background: var(--dropdown-items-bg);
  max-height: calc(100vh - 22rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (min-width: 768px) {
  .professional-dropdown-menu-nav {
    position: absolute;
  }
}
.professional-dropdown-menu-nav-link {
  text-decoration: none;
  color: inherit;
}
/* Menu Transitions - Mobile */
.professional-dropdown-menu-nav.reveal {
  -webkit-animation: professional-dropdown-menu-nav-reveal 200ms forwards;
          animation: professional-dropdown-menu-nav-reveal 200ms forwards;
}
.professional-dropdown-menu-nav.hide {
  -webkit-animation: professional-dropdown-menu-nav-hide 200ms forwards;
          animation: professional-dropdown-menu-nav-hide 200ms forwards;
}
@-webkit-keyframes professional-dropdown-menu-nav-reveal {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes professional-dropdown-menu-nav-reveal {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes professional-dropdown-menu-nav-hide {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes professional-dropdown-menu-nav-hide {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.professional-floating-dropdown-menu-header {
  font-family: "Work Sans", "Open Sans", sans-serif;
  padding: 2rem;
  font-size: 2rem;
  border-bottom: thin solid var(--story-viewer-divider-color);
  background: var(--dropdown-items-bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
}
.professional-floating-dropdown-menu-items {
  font-size: 1.333rem;
  list-style: none;
  padding: 0.7rem 0;
  color: var(--text-color-primary);
}
.professional-floating-dropdown-menu-items.grid-auto {
  display: grid;
  padding: 1.2rem 1.2rem 1.5rem;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.professional-floating-dropdown-menu-items.grid-auto.layout-2-column {
  width: 50rem;
}
.professional-floating-dropdown-menu-items.grid-auto.layout-3-column {
  width: 62rem;
}
.professional-floating-dropdown-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.45em 1.2em 0.45em 1em;
  cursor: pointer;
  background: var(--dropdown-items-bg);
}
[data-menu-item-type="radio"].professional-floating-dropdown-menu-item {
  padding-right: 1.1em;
}
[data-menu-item-type="draggable"].professional-floating-dropdown-menu-item {
  cursor: default;
  padding: 0;
}
.professional-floating-dropdown-menu-item-button {
  width: 100%;
  margin: 1.2rem;
  text-align: left;
}
[data-menu-item-type="radio"].selected,
[data-menu-item-type="pickable"].selected {
  color: var(--primary-text-color);
}
[data-menu-item-type="selectable"]:not(.selected) {
  color: var(--text-color-primary);
  opacity: 0.4;
}
.professional-floating-dropdown-menu-item-arrow {
  width: 1rem;
  height: 1rem;
  fill: var(--text-color-primary);
  -webkit-transform: translateX(0.4rem);
          transform: translateX(0.4rem);
}
@media only screen and (min-width: 768px) {
  .professional-floating-dropdown-menu-item-arrow {
    transition: -webkit-transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, -webkit-transform 200ms;
  }
  .professional-floating-dropdown-menu-item:hover .professional-floating-dropdown-menu-item-arrow {
    -webkit-transform: translateX(0.6rem);
            transform: translateX(0.6rem);
  }
}
.professional-floating-dropdown-menu-item-check {
  width: 1rem;
  background: var(--text-color-primary);
  opacity: 0;
  margin-left: 1.4rem;
  -webkit-transform: translateX(-0.5rem) rotate(45deg);
          transform: translateX(-0.5rem) rotate(45deg);
}
[data-menu-item-type="radio"].selected .professional-floating-dropdown-menu-item-check,
[data-menu-item-type="pickable"].selected .professional-floating-dropdown-menu-item-check {
  opacity: 1;
  background: var(--primary-text-color);
}
[data-menu-item-type="selectable"].selected .professional-floating-dropdown-menu-item-check {
  opacity: 1;
}
.professional-floating-dropdown-menu-item-check::before {
  content: "";
  width: 0.15rem;
  height: 0.9rem;
  background: inherit;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
.professional-floating-dropdown-menu-item-check::after {
  content: "";
  width: 0.5rem;
  height: 0.15rem;
  background: inherit;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
.professional-floating-dropdown-menu-link {
  text-decoration: none;
  color: inherit;
}
.professional-floating-dropdown-menu-item.danger {
  color: #d8767d;
}
.menu-item-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.professional-floating-dropdown-menu-item:last-child {
  border-bottom: none;
}
.professional-floating-dropdown-menu-item:not(.no-hover)::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0;
  width: calc(100% - 1.4rem);
  height: 100%;
  z-index: 0;
  border-radius: 0.4rem;
  background: var(--dropdown-items-bg-hover);
  opacity: 0;
  pointer-events: none;
}
.professional-floating-dropdown-menu-item.danger:not(.no-hover)::before {
  background: color-mix(in srgb, #d8767d 30%, var(--dropdown-items-bg) 70%);
}
@media only screen and (min-width: 768px) {
  .professional-floating-dropdown-menu-item:not(.no-hover):hover::before {
    opacity: 1;
  }
}
.professional-floating-dropdown-menu-item-inner {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  gap: 1em;
  z-index: 1;
}
.professional-floating-dropdown-menu-item-image-icon-wrapper {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.professional-floating-dropdown-menu-item-image-icon {
  width: 100%;
  height: 100%;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
  text-indent: -99999999999px;
  background: var(--image-bg-color);
}
.professional-floating-dropdown-menu-item-inner > svg {
  width: 1.8rem;
  margin-top: 0.175rem;
  fill: var(--icon-color-tertiary);
}
[data-menu-item-type="radio"].selected .professional-floating-dropdown-menu-item-inner > svg {
  fill: var(--primary-button-bg);
}
.professional-floating-dropdown-menu-item-image-holder {
  pointer-events: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--image-bg-color);
  display: inline-block;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.professional-floating-dropdown-menu-item-scene-image-holder {
  pointer-events: none;
  width: 8rem;
  height: 6rem;
  border-radius: 0.4rem;
  background: var(--image-bg-color);
  display: inline-block;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.professional-floating-dropdown-menu-item-image {
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-clip: padding-box;
  text-indent: -99999999999px;
}
.professional-floating-dropdown-menu-item-image--scene {
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--scene-image-placeholder);
}
.professional-floating-dropdown-menu-item-subscription-tag {
  font-size: 0.8em;
  color: var(--text-color-primary);
  padding: 0.2em 0.4em;
  border-radius: 0.3rem;
  background: var(--primary-button-bg);
}
.professional-floating-dropdown-menu-color-picker {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(8, 1fr);
}
.professional-floating-dropdown-menu-color-picker-thumb {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: thin solid var(--story-viewer-divider-color);
  opacity: 0.8;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-floating-dropdown-menu-color-picker-thumb:hover {
    opacity: 1;
  }
}
.professional-floating-dropdown-menu-color-picker-thumb:last-child {
  margin-right: 0;
}
.professional-floating-dropdown-menu-color-picker-thumb.selected {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .professional-dropdown-menu-overlay {
    background: transparent;
    pointer-events: none;
  }
  .professional-dropdown-menu-nav {
    left: unset;
    top: unset;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-transform: unset;
            transform: unset;
    overflow: hidden;
    max-height: 0;
    min-width: 18rem;
    border-radius: 0.5rem;
    box-shadow: var(--dropdown-shadow);
  }
  @-webkit-keyframes professional-dropdown-menu-nav-reveal {
    from {
      max-height: 0;
      opacity: 0;
    }
    to {
      max-height: calc(100vh - 52px);
      opacity: 1;
      overflow-y: auto;
    }
  }
  @keyframes professional-dropdown-menu-nav-reveal {
    from {
      max-height: 0;
      opacity: 0;
    }
    to {
      max-height: calc(100vh - 52px);
      opacity: 1;
      overflow-y: auto;
    }
  }
  @-webkit-keyframes professional-dropdown-menu-nav-hide {
    from {
      opacity: 1;
    }
    to {
      max-height: 0;
    }
  }
  @keyframes professional-dropdown-menu-nav-hide {
    from {
      opacity: 1;
    }
    to {
      max-height: 0;
    }
  }
  .professional-floating-dropdown-menu-header {
    display: none;
  }
  .professional-floating-dropdown-menu-group-title {
    padding: 1em 1.8em 0 1.2em;
    font-size: 1.2rem;
  }
  .professional-floating-dropdown-menu-group-title:empty {
    padding-top: 0;
  }
  .professional-floating-dropdown-menu-items {
    font-size: 1.333rem;
  }
  .professional-scrollbar .professional-floating-dropdown-menu-items {
    padding-right: 0.8rem;
  }
  .professional-floating-dropdown-menu-item--padding-even {
    padding: 0.8em 1.2em 0.8em 1.2em;
  }
  .professional-floating-dropdown-menu-item-inner > svg {
    width: 1.3rem;
    fill: var(--icon-color-tertiary);
  }
  .professional-floating-dropdown-menu-item-text {
    white-space: nowrap;
  }
  .professional-floating-dropdown-menu-item-text--scene {
    white-space: unset;
    max-width: 18rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .professional-floating-dropdown-menu-item-image-icon + .professional-floating-dropdown-menu-item-text {
    margin-left: 0.9rem;
  }
  .professional-floating-dropdown-menu-item-text:empty::before {
    font-family: "Open Sans", helvetica, sans-serif;
    content: "No name added";
    font-style: italic;
    color: var(--text-color-primary);
    opacity: 0.4;
  }
}
.professional-dropdown-selected-item-container {
  pointer-events: none !important;
}
.professional-floating-dropdown-menu-item-detail {
  display: block;
  font-size: 1.2rem;
  color: var(--text-color-primary);
  opacity: 0.8;
  margin-top: 0.1rem;
  max-width: 23rem;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  [data-menu-item-id="print-story"],
  [data-menu-item-id="share"],
  [data-menu-item-id="find-and-replace"],
  [data-menu-item-id="sharing-and-permissions"] {
    display: none;
  }
}
/* Modals */
.app-modal {
  position: absolute;
  width: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: all;
  z-index: 99999999;
  height: 100%;
  transition: background-color 200ms;
}
.showing-modal .modal,
.showing-app-modal .app-modal,
.showing-error-modal .error-modal,
.showing-plan-modal .plan-modal {
  pointer-events: all;
}
.app-modal-parent {
  position: absolute;
  top: 0;
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .app-modal-parent {
    align-items: center;
  }
}
.app-modal-close-bkg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
/* Until it has a presenting class, it is darker hidden and does not receive pointer events */
.app-modal-wrapper {
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
  will-change: transform, opacity;
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.full-screen-modal .app-modal-wrapper--resizeable {
  max-width: unset;
  width: 100%;
  height: 100%;
  transition: unset;
}
.app-modal-wrapper--full {
  width: 100%;
  min-height: 100vh;
}
.app-modal-wrapper--dynamic-height {
  height: 100vh;
  margin-top: 10vh;
}
.app-modal-wrapper--fit-height {
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
.app-modal-wrapper.presenting {
  opacity: 1;
}
/* If it's the last modal parent in the stack, it has scale 1, pointer-events all, brightness 1 */
.app-modal-parent:last-child > .app-modal-wrapper {
  pointer-events: all;
  max-height: initial;
  overflow: visible;
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
/* On mobile, this shrinks down the closest model so you can still see the others behind it */
.app-modal-parent:not(:only-child):not(:first-child) > .app-modal-wrapper:not(.app-modal-wrapper--full) {
  width: calc(100vw - 20px);
  margin: 10px;
  outline: 10px solid rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 768px) {
  .app-modal-wrapper {
    width: calc(100vw - 100px);
    min-height: 50vh;
  }
  .app-modal-wrapper--fit-height {
    min-height: -webkit-fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
  .app-modal-wrapper.app-modal-wrapper--full {
    width: 100%;
    min-height: 100vh;
  }
  .app-modal-parent > .app-modal-wrapper {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  .app-modal-wrapper.presenting {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .app-modal-parent:only-child > .app-modal-wrapper {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  .app-modal-parent:only-child > .app-modal-wrapper.presenting {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .app-modal-parent:not(:only-child):last-child > .app-modal-wrapper {
    -webkit-transform: scale(1.025);
            transform: scale(1.025);
  }
  /* Don't need to see the other modals behind closest on desktop. */
  .app-modal-parent:not(:only-child):not(:first-child) > .app-modal-wrapper,
  .app-modal-parent:not(:only-child):not(:first-child) > .app-modal-wrapper:not(.app-modal-wrapper--full) {
    width: 100vw;
    margin: 0;
    outline: none;
  }
  .app-modal-parent:not(:only-child):last-child > .app-modal-wrapper.presenting {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .app-modal-parent:not(:only-child):not(:last-child) > .app-modal-wrapper.presenting {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}
.app-modal-component {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  background: var(--surface-color-2);
  overflow: hidden;
  border-radius: 0.6rem;
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.5);
}
.app-modal-component--warning {
  padding: 1.4rem;
  border-radius: 0.8rem;
}
.app-modal-component--overflow-visible {
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  .app-modal-component {
    max-height: calc(100vh - 100px);
  }
  .full-screen-modal .app-modal-component--resizable {
    max-height: unset;
    border-radius: 0;
  }
}
.app-modal-component-header {
  position: relative;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pensive-modal-header {
  background: var(--surface-color-2);
  width: 100%;
  height: 5rem;
  border-radius: 0.6rem 0.6rem 0 0;
  position: relative;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  padding: 0.75rem 0;
}
.pensive-modal-header-title-holder:only-child {
  padding: 0 2rem;
}
.pensive-modal-header-title-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  background-color: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-color-dilution));
}
.pensive-modal-header-title-text {
  font-size: 1.333rem;
  margin-left: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--text-color-primary);
}
.pensive-modal-header-title-text:only-child {
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .full-screen-modal .pensive-modal-header--resizable {
    border-radius: 0;
  }
}
.app-modal-component-content {
  position: relative;
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  background: var(--surface-color-2);
}
.full-screen-modal .app-modal-component-content--resizable {
  background: var(--surface-color-0);
}
.app-modal-component-content-items-wrapper {
  padding-bottom: 2rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.full-screen-modal .app-modal-component-content-items-wrapper {
  max-width: 78.6rem;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  background: var(--surface-color-2);
  overflow: auto;
}
/* Modal Components */
.pensive-modal-section-header {
  border-top: thin solid var(--surface-color-2-divider-color);
  align-items: center;
  padding: 1.8rem 1rem 0.5rem;
  margin: 0 0 1rem;
}
.pensive-modal-section-header-label {
  position: relative;
  display: flex;
  color: var(--writing-section-label-color);
  font-size: 1.6rem;
}
.pensive-modal-section-header-label::before {
  content: "";
  position: absolute;
  left: calc(1.4rem * -1);
  width: 0.6rem;
  height: calc(100% - 0.5rem);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.83;
  background: var(--surface-color-2-divider-color);
}
.pensive-modal-subsection-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--surface-color-2);
  padding: 0;
}
.pensive-modal-subsection-item-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-color-2);
  flex-basis: 100%;
  flex-grow: 1;
  max-width: 100%;
}
.pensive-modal-input-wrapper {
  position: relative;
  padding: 0 1rem 0;
}
.h-inset--page .pensive-modal-input-wrapper {
  padding: 0;
}
.pensive-modal-input-label {
  display: flex;
  font-family: "Open Sans", helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.333rem;
  color: var(--writing-input-label-color);
  pointer-events: none;
}
.pensive-modal-subsection-item-wrapper:focus-within .pensive-modal-input-label {
  color: var(--primary-text-color);
}
.writing-form-box__info-rollover {
  fill: var(--text-color-muted);
  margin-left: 0.4rem;
  pointer-events: all;
  display: none;
}
.writing-form-box__info-rollover.is-link {
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .writing-form-box__info-rollover.is-link:hover {
    fill: var(--text-color-tertiary);
  }
}
@media only screen and (min-width: 600px) {
  .writing-form-box__info-rollover {
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  .pensive-modal-subsection-item-wrapper.focus-over.no-content:not(:focus-within),
  .pensive-modal-subsection-item-wrapper.focus-over.no-content:not(:focus-within) * {
    cursor: pointer;
  }
  .pensive-modal-subsection-item-wrapper.focus-over::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0.2rem;
    top: 0.4rem;
    width: calc(100% - 0.6rem);
    height: calc(100% - 1rem);
    border-radius: 0.6rem;
    opacity: 0;
    background: var(--surface-color-2-hover);
    z-index: 0;
    border: thin solid var(--surface-color-2-divider-color);
    transition: opacity 200ms;
  }
  .pensive-modal-subsection-item-wrapper.focus-over.no-content:not(:focus-within):hover::before {
    opacity: 1;
  }
  [data-can-edit="no"] .pensive-modal-subsection-item-wrapper.focus-over.no-content:not(:focus-within):hover::before {
    opacity: 0;
  }
}
.pensive-modal-input {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  position: relative;
  width: 100%;
  min-height: 6rem;
  margin-bottom: 1rem;
  line-height: 1.6em;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--text-color-primary);
  outline: none;
  background: transparent;
  z-index: 1;
}
.pensive-modal-input--uppercase {
  text-transform: uppercase;
}
.pensive-modal-input--textarea {
  padding: 1rem 0;
  resize: none;
}
.pensive-modal-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
}
.pensive-modal-radio-input {
  display: flex;
  align-items: center;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  color: var(--text-color-tertiary);
  box-sizing: border-box;
  padding: 2rem 4rem 2rem 0;
  cursor: pointer;
}
.pensive-modal-radio-input-native-control {
  width: 0;
  height: 0;
  opacity: 0;
}
.pensive-modal-radio-input-custom-control {
  fill: var(--text-color-tertiary);
  opacity: 0;
  transition: all 200ms;
}
.pensive-modal-radio-input-native-control:checked ~ .pensive-modal-radio-input-custom-control {
  opacity: 0.7;
  fill: var(--primary-text-color);
}
.pensive-modal-radio-input-label {
  margin-left: 0.5rem;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .pensive-modal-radio-input:hover .pensive-modal-radio-input-label {
    color: var(--text-color-primary);
  }
  .pensive-modal-radio-input:hover .pensive-modal-radio-input-native-control:not(:checked) ~ .pensive-modal-radio-input-custom-control {
    fill: var(--text-color-primary);
  }
}
.pensive-modal-radio-input-native-control:checked ~ .pensive-modal-radio-input-label {
  color: var(--primary-text-color);
}
.pensive-modal-grid-three {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  background: var(--surface-color-2);
  grid-gap: 1rem;
  padding: 2rem 0;
  min-height: 6rem;
}
.pensive-modal-grid-three:empty::after {
  content: "None added.";
  position: absolute;
  color: var(--text-color-muted);
  font-size: 1.6rem;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-modal-change-name-text {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.4rem;
  position: relative;
  width: 100%;
  min-height: 6rem;
  margin-bottom: 1rem;
  line-height: 1.6em;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--text-color-primary);
  outline: none;
  z-index: 1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
}
.pensive-character-item {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 1rem;
  width: 100%;
  border-radius: 6px;
  border: thin solid transparent;
  transition: background-color 200ms, border 200ms;
}
@media only screen and (min-width: 768px) {
  .pensive-character-item:hover {
    border: thin solid var(--surface-color-2-divider-color);
    background: var(--surface-color-2-hover);
  }
}
.pensive-item-remove {
  position: absolute;
  width: 18px;
  top: -19px;
  right: -19px;
  border-radius: 50%;
  height: 18px;
  background: #e57373;
  border: 1rem solid transparent;
  box-sizing: content-box;
  background-clip: padding-box;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .pensive-item-remove {
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
  }
  .pensive-character-item:hover .pensive-item-remove {
    pointer-events: all;
    opacity: 1;
    background-clip: padding-box;
  }
}
.pensive-item-remove:hover {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.pensive-item-remove-icon {
  fill: #e6e6e6;
}
.pensive-character-item-image {
  display: block;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  margin-right: 1.2rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  background: var(--image-bg-color);
  text-indent: -99999999999px;
}
.pensive-character-item-name {
  display: block;
  font-size: 1.333rem;
  color: var(--text-color-secondary);
  text-align: left;
}
.pensive-character-item-name:empty::before,
.stats-module__list-item-label--character:empty::before,
.table-cell--section--side.characters-cell .cell-content:empty::before,
.cell-character_first-name:empty::before {
  content: "No Name Added";
  font-style: italic;
  font-weight: normal;
  color: var(--text-color-muted);
}
.pensive-character-item-role {
  font-size: 0.933rem;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 0.4rem;
  color: var(--text-color-tertiary);
  text-align: left;
}
/* Scene Content Text Editor Styles */
.pensive-modal-sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  z-index: 999999;
  background: var(--surface-color-2);
  width: 100%;
  height: 39px;
  margin-top: 5px;
  transition: background 200ms;
}
.pensive-modal-sticky-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.4rem;
  width: calc(100% + 0.8rem);
  height: 100%;
  background: inherit;
  z-index: -2;
}
[data-edit-mode="collection"] .pensive-modal-sticky-header {
  display: none;
}
@media only screen and (min-width: 768px) {
  .focus-over.no-content:not(:focus-within):hover .pensive-modal-sticky-header {
    background: #f0f6f9;
    cursor: pointer;
  }
}
.pensive-modal-sticky-header-label {
  font-family: "Open Sans", helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #a5a5a5;
  z-index: 10;
  left: 5rem;
  pointer-events: none;
}
.pensive-modal-utility-menu-button {
  font-family: "Open Sans", helvetica, sans-serif;
  color: var(--text-color-primary);
  font-size: 1.333rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-height: 7rem;
}
.pensive-modal-utility-menu-button-icon {
  flex-shrink: 0;
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
.pensive-modal-utility-menu-button-text {
  margin-left: 0.8rem;
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
.is-off .pensive-modal-utility-menu-button-text {
  color: var(--text-color-secondary);
}
.is-off .pensive-modal-utility-menu-button-icon {
  fill: var(--text-color-tertiary);
}
.pensive-modal-utility-menu-button:hover > * {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
[data-view-placement~="marker"]::after,
[data-view-placement~="is_slide"]::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--surface-color-2);
}
[data-can-edit="no"] .app-modal-component-input,
[data-can-edit="no"] .bootstrap-tagsinput [data-role="remove"] {
  visibility: hidden;
  pointer-events: none;
}
[data-can-edit="no"] .bootstrap-tagsinput [data-role="remove"] {
  width: 0;
}
.pensive-range-slider-input-holder {
  position: relative;
  min-height: 6rem;
  margin-bottom: 2rem;
}
.pensive-range-slider-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-range-slider-input:focus {
  outline: none;
}
.pensive-range-slider-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 1.4rem;
  cursor: pointer;
  background: transparent;
  border-radius: 2rem;
}
.pensive-range-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  height: 2.4rem;
  width: 2.4rem;
  opacity: 0;
  cursor: pointer;
}
.pensive-range-slider-input-custom-tracks-holder {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  height: 1.6rem;
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05);
  border-bottom: thin solid var(--surface-color-2-divider-color);
  background: var(--slider-input-track-bg);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: -webkit-filter 200ms;
  transition: filter 200ms;
  transition: filter 200ms, -webkit-filter 200ms;
}
@media only screen and (min-width: 768px) {
  .pensive-range-slider-input:hover ~ .pensive-range-slider-input-custom-tracks-holder {
    background: var(--slider-input-track-bg-hover);
  }
}
.pensive-range-slider-input-negative-track {
  position: absolute;
  height: 100%;
  right: 50%;
  width: 0;
  background: #f44336;
}
.pensive-range-slider-input-positive-track {
  position: absolute;
  -webkit-transform-origin: left;
          transform-origin: left;
  height: 100%;
  left: 50%;
  width: 0;
  background: #4caf50;
}
.pensive-range-slider-input-markers-holder {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  height: 1.6rem;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-range-slider-marker-holder {
  position: absolute;
  top: 100%;
}
.pensive-range-slider-marker-line {
  margin-top: 5px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-bottom-color: var(--text-color-tertiary);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pensive-range-slider-marker-title {
  display: block;
  color: var(--text-color-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.933rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pensive-range-slider-input-values-holder {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  height: 1.4rem;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pensive-range-slider-input-value {
  position: absolute;
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 50%;
  font-size: 1.2rem;
  text-align: center;
  line-height: 2.6rem;
  font-weight: bold;
  background: var(--draggable-item-bg-hover);
  color: var(--text-color-primary);
  -webkit-transform: translate(-50%, -0.5rem);
          transform: translate(-50%, -0.5rem);
  cursor: pointer;
  box-shadow: var(--draggable-item-shadow-hover);
}
@media only screen and (min-width: 768px) {
  .pensive-range-slider-input-value:hover {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
  .pensive-range-slider-input:hover ~ .pensive-range-slider-input-values-holder .pensive-range-slider-input-value {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.pensive-range-slider-input-value-compare {
  position: absolute;
  top: 25px;
  background: var(--surface-color-2);
  padding: 0 6px 0 12px;
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.933rem;
  -webkit-transform: translateX(calc(-50% + 1px));
          transform: translateX(calc(-50% + 1px));
}
.pensive-range-slider-input-value-compare.up {
  color: #4caf50;
}
.pensive-range-slider-input-value-compare.up::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 0;
  height: 0;
  top: 1px;
  border: 4px solid transparent;
  border-bottom-color: #4caf50;
}
.pensive-range-slider-input-value-compare.down {
  color: #f44336;
}
.pensive-range-slider-input-value-compare.down::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 0;
  height: 0;
  top: 6px;
  border: 4px solid transparent;
  border-top-color: #f44336;
}
.app-modal-component-content--dummy {
  position: absolute;
  z-index: 999999999999999;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 90px);
  opacity: 0;
  pointer-events: none;
}
.app-modal-component-delete-cover {
  background: #f44336;
  position: fixed;
  z-index: 999999999999999999;
  left: 0;
  top: 50px;
  width: 100%;
  bottom: 44px;
  opacity: 0;
  pointer-events: none;
}
.app-modal-component-busy-cover {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  background: color-mix(in srgb, var(--surface-color-2-hover), transparent 10%);
  transition: all 200ms;
}
[data-status="busy"] .app-modal-component-busy-cover {
  pointer-events: all;
  opacity: 1;
}
.professional-busy-spinner-cover {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  border-radius: 0.4rem;
  inset: 0;
  transition: all 200ms;
  background: color-mix(in srgb, var(--surface-color-2), transparent 10%);
}
.professional-busy-spinner-cover--transparent {
  background: transparent;
}
.professional-busy-spinner-cover-frame {
  background: var(--surface-color-2);
  padding: 2rem;
  border-radius: 0.8rem;
  border: thin solid var(--surface-color-2-divider-color);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.09);
}
[data-status="busy"].professional-busy-spinner-cover,
[data-status="busy"] .professional-busy-spinner-cover {
  opacity: 1;
  pointer-events: all;
}
.professional-busy-spinner,
.professional-busy-spinner::after {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.professional-busy-spinner--small,
.professional-busy-spinner--small::after {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.professional-busy-spinner,
.professional-busy-spinner--small {
  -webkit-transform-origin: center center;
          transform-origin: center center;
  font-size: 30px;
  text-indent: -9999em;
  will-change: transform, opacity;
  border-top: 5px solid var(--primary-button-bg);
  border-right: 5px solid color-mix(in srgb, var(--text-color-primary), transparent 90%);
  border-bottom: 5px solid color-mix(in srgb, var(--text-color-primary), transparent 90%);
  border-left: 5px solid color-mix(in srgb, var(--text-color-primary), transparent 90%);
  -webkit-animation: professional-spin 0.5s infinite linear;
          animation: professional-spin 0.5s infinite linear;
}
.professional-busy-spinner-text {
  text-transform: uppercase;
  font-size: 1.067rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
}
.app-modal-component--overflow-visible .app-modal-component-content {
  overflow-x: visible;
}
.app-modal-component-content--scroll {
  overflow-y: visible;
}
@media only screen and (min-width: 768px) {
  .app-modal-component-content--scroll {
    overflow-y: auto;
  }
}
.app-modal-component-footer {
  position: relative;
  width: 100%;
}
.pensive-modal-footer {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--surface-color-2);
  border-top: thin solid var(--surface-color-2-divider-color);
}
.pensive-modal-footer--hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.pensive-modal-footer-tooltip-wrapper {
  position: relative;
  width: 100%;
  padding: 0;
}
.pensive-modal-footer-nav {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  height: 4rem;
}
.pensive-modal-footer-nav::-webkit-scrollbar {
  display: none;
}
.pensive-modal-footer-nav-hash {
  position: relative;
  min-width: 2rem;
  min-height: 2rem;
  color: var(--text-color-primary);
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font-size: 0.933rem;
  cursor: pointer;
}
.pensive-modal-footer-nav-hash.selected {
  font-weight: bold;
  color: #fff;
}
.pensive-modal-footer-nav-hash:first-child {
  padding-left: 1rem;
}
.pensive-modal-footer-nav-hash:last-child {
  padding-right: 1rem;
}
.pensive-modal-footer-nav-hash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  background: var(--story-viewer-header-button-bg-hover);
  border-radius: 50%;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 100ms;
}
.pensive-modal-footer-nav-hash:first-child::before {
  left: calc(50% + 0.5rem);
}
.pensive-modal-footer-nav-hash:last-child::before {
  left: calc(50% - 0.5rem);
}
.pensive-modal-footer-nav-hash:hover::before {
  opacity: 1;
}
.pensive-modal-footer-nav-hash.selected::before {
  background: var(--primary-button-bg);
  opacity: 1;
}
.pensive-modal-footer-nav-hash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: color-mix(in srgb, var(--color), var(--surface-color-2) 75%);
}
.pensive-modal-footer-nav-hash-content {
  position: relative;
  z-index: 1;
}
/* stylelint-disable */
[data-modal-scenes-tooltip]::before {
  content: attr(data-modal-tooltip-text);
  position: absolute;
  bottom: 5rem;
  left: var(--offset);
  background: var(--surface-color-2-hover);
  box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  overflow: hidden;
  width: 20rem;
  opacity: 0;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  font-size: 1.067rem;
  font-weight: bold;
  color: var(--text-color-primary);
  height: 2.8em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  border: 0.8rem solid var(--surface-color-2-hover);
  border-top-width: 12rem;
  z-index: 9999999999999999;
  transition: opacity 100ms;
}
/* stylelint-enable */
[data-scenes_edit_modal-filter="scenes_media"] [data-modal-scenes-tooltip]::before {
  border-top-width: 1rem;
}
[data-modal-scenes-tooltip]:hover::before {
  opacity: 1;
}
[data-modal-scenes-tooltip]::after {
  content: "";
  background-image: var(--image);
  height: 10.75rem;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  bottom: 9.4rem;
  width: 20.2rem;
  left: var(--offset);
  border-radius: 0.2rem;
  background-size: cover;
  background-position: center center;
  background-color: var(--image-bg-color);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 9999999999999999;
  transition: opacity 100ms;
}
[data-scenes_edit_modal-filter="scenes_media"] [data-modal-scenes-tooltip]::after {
  display: none;
}
[data-modal-scenes-tooltip]:hover::after {
  opacity: 1;
}
/* stylelint-disable */
[data-modal-characters-tooltip]::before {
  content: attr(data-modal-tooltip-text);
  position: absolute;
  bottom: 5rem;
  left: var(--offset);
  background: var(--surface-color-2-hover);
  box-shadow: 0 3px 40px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  overflow: hidden;
  width: 12rem;
  opacity: 0;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  font-size: 1.067rem;
  font-weight: bold;
  color: var(--text-color-primary);
  height: 2.8em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  border: 0.8rem solid var(--surface-color-2-hover);
  border-top-width: 18rem;
  z-index: 9999999;
  transition: opacity 100ms;
}
/* stylelint-enable */
[data-modal-characters-tooltip]:hover::before {
  opacity: 1;
}
[data-modal-characters-tooltip]::after {
  content: "";
  background-image: var(--image);
  height: 16.75rem;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  bottom: 9.4rem;
  width: 12.2rem;
  left: var(--offset);
  border-radius: 0.2rem;
  background-size: cover;
  background-position: center center;
  background-color: var(--image-bg-color);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 9999999;
  transition: opacity 100ms;
}
[data-modal-characters-tooltip]:hover::after {
  opacity: 1;
}
/* Professional Modal */
.professional-modal {
  position: relative;
  width: 100%;
  background: var(--surface-color-2);
  border-radius: 0.8rem;
  box-shadow: 0 0 0 1px var(--surface-color-2-divider-color), 0 0 72px rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.professional-modal-header {
  border-bottom: thin solid var(--surface-color-2-divider-color);
}
.professional-modal-header-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
.professional-modal-header-meta {
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-tertiary);
}
.professional-modal-header--tabs {
  padding: 0;
}
.professional-modal-content--scroller {
  overflow-x: hidden;
  overflow-y: auto;
}
.professional-modal-content-section {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.professional-modal-sidebar {
  display: flex;
  flex-basis: 30%;
  padding: 0 3rem 0;
  border-right: thin solid var(--surface-color-2-divider-color);
  background: var(--surface-color-2);
}
.professional-modal-sidebar-label-holder {
  margin: 1.8rem 0 0.2rem 0.4rem;
}
.professional-modal-sidebar-label-holder:first-child {
  margin-top: 0;
}
.professional-modal-sidebar-label {
  display: block;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
.professional-modal-sidebar-description {
  font-size: 1.333rem;
  line-height: 1.6em;
  color: var(--text-color-primary);
  border-radius: 0.6rem;
  border: thin solid transparent;
  background: transparent;
  transition: all 200ms;
}
.professional-modal-sidebar-description::-webkit-scrollbar {
  display: none;
}
.professional-modal-sidebar-description--editable {
  font-family: "Open Sans", helvetica, sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  resize: none;
  padding: 1rem;
  margin-left: -1rem;
  width: calc(100% - 2rem);
  width: 100%;
  outline: none;
}
.professional-modal-sidebar-description--editable:focus {
  background: var(--surface-color-2-hover);
  border: thin solid var(--primary-button-bg);
}
.professional-modal-sidebar-description--editable:not(:focus) {
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .professional-modal-sidebar-description--editable:not(:focus):hover {
    background: var(--surface-color-2-hover);
  }
}
.professional-modal-sidebar-new-custom-feature-button {
  position: absolute;
  right: 3rem;
  top: 3.2rem;
}
.professional-modal-sidebar-back-button {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  border: thin solid var(--surface-color-2-divider-color);
  color: var(--text-color-primary);
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 4rem;
  flex-shrink: 0;
  justify-content: center;
  border-radius: 4rem;
  fill: var(--text-color-secondary);
  padding: 0.5rem 2rem 0.4rem 1.2rem;
  transition: all 200ms;
  position: -webkit-sticky;
  position: sticky;
  top: 2.6rem;
  z-index: 999;
  background: var(--surface-color-2);
}
@media only screen and (min-width: 768px) {
  .professional-modal-sidebar-back-button:hover {
    background: var(--surface-color-2-hover) !important;
  }
}
.professional-modal-sidebar-back-button-icon {
  fill: currentColor;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.3em;
  transition: all 200ms;
}
.professional-modal-sidebar-back-button-text {
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
}
.professional-modal-sidebar-sticky-back-button {
  position: -webkit-sticky;
  position: sticky;
  background: var(--surface-color-2) !important;
  top: 2.5rem;
  margin-top: -0.5rem;
  z-index: 999;
}
@media only screen and (min-width: 768px) {
  .professional-modal-sidebar-sticky-back-button:hover {
    background: var(--surface-color-2-hover) !important;
  }
  .professional-modal-sidebar-back-button:hover {
    color: var(--text-color-primary);
  }
  .professional-modal-sidebar-back-button:hover .professional-modal-sidebar-back-button-icon {
    -webkit-transform: translateX(-0.2em);
            transform: translateX(-0.2em);
  }
}
.professional-modal-sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  top: 2rem;
  align-self: start;
  height: 100%;
}
.professional-modal-sidebar-content-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 8rem;
}
.professional-modal-sidebar-title-editor {
  position: relative;
  width: calc(100% + 2rem);
}
.professional-modal-sidebar-title {
  font-family: "Work Sans", "Open Sans", sans-serif;
  font-size: 3.2rem;
  color: var(--text-color-primary);
  padding: 0.4rem 1rem 0.3rem;
  margin-left: -1rem;
  border: thin solid transparent;
  width: calc(100% - 2rem);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background 200ms;
}
.professional-modal-sidebar-title:empty::before {
  content: "Untitled";
}
@media only screen and (min-width: 768px) {
  .professional-modal-sidebar-title:hover {
    background: rgba(112, 112, 112, 0.1);
  }
}
.professional-modal-sidebar-title--editable {
  position: absolute;
  opacity: 0;
  padding: 0.4rem 1rem 0.3rem;
  margin-left: -1rem;
  width: calc(100% - 2rem);
  border: thin solid transparent;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.6rem;
  outline: none;
  resize: none;
  pointer-events: none;
  transition: all 200ms;
}
.professional-modal-sidebar-title--editable:focus {
  background: var(--surface-color-2);
  border: thin solid var(--primary-button-bg);
  pointer-events: all;
}
.professional-modal-sidebar-title-editor:focus-within .professional-modal-sidebar-title {
  opacity: 0;
  position: absolute;
}
.professional-modal-sidebar-title-editor:focus-within .professional-modal-sidebar-title--editable {
  opacity: 1;
  position: relative;
}
.professional-modal-content-section-header {
  display: flex;
}
.professional-modal-content-section-header--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  z-index: 99;
  background: transparent;
  border: thin solid transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}
.professional-modal-content-section-header.scrolled {
  background: var(--surface-color-2);
  -webkit-backdrop-filter: blur(0.4rem);
          backdrop-filter: blur(0.4rem);
  border-bottom-color: #eee;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.07);
}
.professional-modal-content-section-header-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text-color-secondary);
}
.professional-modal-content-section-header-subtitle {
  margin-top: 0;
  padding-left: 2rem;
  margin-left: 2rem;
  border-left: thin solid var(--surface-color-2-divider-color);
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5em;
  color: var(--text-color-primary);
  opacity: 0;
  display: block;
}
.scrolled .professional-modal-content-section-header-subtitle {
  opacity: 1;
}
.professional-modal-content-section-subheader-title {
  font-size: 1.333rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: bold;
  color: var(--text-color-secondary);
}
.professional-modal-main-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-color-2);
  position: -webkit-sticky;
  position: sticky;
  top: -0.8rem;
  z-index: 10;
  min-height: 8rem;
  padding: 2.4rem 3rem 1.6rem 3rem;
}
.professional-modal-main-content-header.scrolled {
  background: var(--surface-color-2);
}
.professional-modal-main-content-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 12px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent);
}
.professional-modal-main-content-header.scrolled::after {
  opacity: 1;
}
.professional-modal-footer {
  border-top: thin solid var(--surface-color-2-divider-color);
}
.professional-modal-story-thumbnail,
.professional-modal-template-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 54%;
  border: thin solid var(--surface-color-2-divider-color);
  border-radius: 0.4rem;
  overflow: hidden;
}
.professional-modal-template-thumbnail {
  padding-top: 42%;
  border: none;
}
.professional-modal-story-thumbnail-image,
.professional-modal-template-thumbnail-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--image-bg-color);
}
.professional-modal-template-thumbnail-image {
  background: none;
}
.professional-form-instructions {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--text-color-tertiary);
  line-height: 160%;
  display: block;
}
.professional-form-instructions--small {
  font-size: 1.2rem;
  line-height: 1.4em;
}
.professional-form-instructions--medium {
  font-size: 1.3rem;
  line-height: 1.4em;
}
.professional-form-instructions--info {
  background: color-mix(in srgb, #b3e6fe, var(--surface-color-2) 80%);
  color: var(--text-color-primary);
  border-radius: 0.4rem;
  padding: 1.4rem 1.4rem;
  margin-bottom: 1rem;
}
.professional-form-instructions--warning {
  background: var(--message-container-bg--warning);
  color: var(--text-color-primary);
  border: thin solid var(--message-container-border-color--warning);
  border-radius: 0.4rem;
  padding: 1.4rem 1.4rem;
  margin-bottom: 1rem;
}
.professional-form-instructions-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  text-decoration: none;
  cursor: pointer;
  color: var(--primary-button-bg);
}
@media only screen and (min-width: 769px) {
  .professional-form-instructions-link:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
  }
}
.professional-form-instructions--info.disabled {
  display: none;
}
.professional-label {
  display: block;
  font-size: 1.333rem;
  color: var(--text-color-secondary);
  transition: all 200ms;
}
.professional-text-input {
  font-family: "Open Sans", helvetica, sans-serif;
  font-size: 1.333rem;
  padding: 1.1rem 1rem 1rem;
  width: 100%;
  border-radius: 0.4rem;
  color: var(--text-color-primary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  box-shadow: 0 0 0 1px var(--form-text-input-border-color), 0 1px 1px 1px transparent;
  border: 0 none;
  background: var(--form-text-input-bg);
  transition-property: box-shadow, background, color;
  transition-duration: 200ms;
}
.professional-text-input:hover {
  background: var(--form-text-input-bg-hover);
  box-shadow: 0 0 0 1px var(--form-text-input-border-color);
}
.professional-text-input:disabled {
  opacity: 0.8;
  color: var(--text-color-primary);
}
.professional-text-input:focus {
  background: var(--form-text-input-bg-focus);
  box-shadow: 0 0 0 1px var(--form-text-input-border-color-focus);
}
.professional-text-input::-webkit-input-placeholder {
  color: var(--text-color-muted);
  font-size: 1.333rem;
}
.professional-text-input::-moz-placeholder {
  color: var(--text-color-muted);
  font-size: 1.333rem;
}
.professional-text-input::placeholder {
  color: var(--text-color-muted);
  font-size: 1.333rem;
}
.editing .professional-label--editable {
  color: var(--text-color-tertiary);
}
.professional-text-input--editable {
  width: 100%;
  min-width: unset;
  border: thin solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-color-tertiary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  padding-left: 0;
  transition: all 200ms;
  cursor: default;
  box-shadow: unset;
  resize: none;
}
.professional-text-input--editable:hover {
  background: var(--surface-color-2-hover);
  padding-left: 1rem;
}
.editing .professional-text-input--editable {
  padding-left: 1rem;
  background: var(--surface-color-2-hover);
  pointer-events: all;
  box-shadow: inherit;
  cursor: text;
}
.editing .professional-text-input--editable:focus {
  box-shadow: 0 0 0 1px var(--primary-button-bg);
}
.editing .professional-text-input--editable:not(:focus):hover {
  border-color: var(--surface-color-2-divider-color);
}
.professional-custom-text-select-input {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}
.professional-text-input-icon-button {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  min-width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  fill: var(--icon-color-tertiary);
  transition: all 200ms;
}
.professional-text-input-icon-button:hover {
  background: var(--surface-color-3-hover);
  fill: var(--icon-color-secondary);
}
.professional-text-input-icon-button.selected {
  background: var(--surface-color-3);
  fill: var(--primary-text-color);
}
.professional-text-input-icon-button.selected:hover {
  background: var(--surface-color-3-hover);
  fill: var(--primary-text-color);
}
.professional-text-input-icon-button-icon {
  width: 48%;
  height: 48%;
}
.professional-custom-text-select-input::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 2px solid var(--icon-color-muted);
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: 50%;
  right: 2rem;
  z-index: 3;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.professional-custom-text-select-input.no-options::after,
.professional-custom-text-select-input.hide-options::after {
  opacity: 0;
  pointer-events: none;
}
.professional-custom-text-select-input-bkg {
  background: var(--form-text-input-bg);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1.2rem 1rem 1rem;
  min-width: 100%;
  border: 1px solid var(--form-text-input-border-color);
  border-radius: 0.4rem;
  color: var(--text-color-primary);
  transition: border-color 200ms;
}
.professional-custom-text-select-input:focus-within .professional-custom-text-select-input-bkg {
  border-color: var(--form-text-input-border-color-focus);
}
.professional-custom-text-select-input:not(:focus-within):hover .professional-custom-text-select-input-bkg {
  background: var(--form-text-input-bg-hover);
}
.professional-custom-text-select-input-text-field {
  font-family: "Open Sans", helvetica, sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  background: transparent;
  color: var(--text-color-primary);
  font-size: 1.333rem;
  padding: 1.2rem 1rem 1rem;
  border: thin solid transparent;
  height: 100%;
  z-index: 1;
  outline: none;
}
.professional-custom-text-select-input-text-field::-webkit-input-placeholder {
  color: var(--text-color-muted);
}
.professional-custom-text-select-input-text-field::-moz-placeholder {
  color: var(--text-color-muted);
}
.professional-custom-text-select-input-text-field::placeholder {
  color: var(--text-color-muted);
}
.professional-custom-text-select-input-select-wrapper {
  position: relative;
  height: 100%;
  z-index: 1;
}
.professional-custom-text-select-input-select {
  font-family: "Open Sans", helvetica, sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  height: 100%;
  padding: 0.7rem 2.65em 0.5rem 1em;
  color: var(--text-color-secondary);
  font-size: 1.333rem;
  z-index: 1;
  outline: none;
  border-radius: 0 0.4rem 0.4rem 0;
  border: thin solid transparent;
  margin-right: 0.5rem;
  cursor: pointer;
  border-left: thin solid var(--surface-color-2-divider-color);
  transition: all 200ms;
}
.professional-custom-text-select-input-select:hover {
  color: var(--text-color-primary);
}
.professional-custom-text-select-input-select:focus {
  background: var(--surface-color-2-hover);
  border-radius: 0.4rem;
  border-left-color: transparent;
}
.no-options .professional-custom-text-select-input-select {
  opacity: 0;
  pointer-events: none;
  width: 0;
  padding: 0;
  margin-right: 0;
}
.hide-options .professional-custom-text-select-input-select {
  display: none;
}
/* Profeessional Loading Cover */
.professional-loading-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--surface-color-2), transparent 10%);
  pointer-events: none;
  transition: all 300ms;
  opacity: 0;
  z-index: 9;
}
.saving .professional-loading-cover,
.busy .professional-loading-cover {
  pointer-events: all;
  opacity: 1;
  z-index: 99999;
}
.settings-module__subsection__loader {
  width: 60px;
  height: 60px;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
}
.settings-module__subsection__loader .path {
  stroke: #2ea5d8;
}
/* Professional Toggle */
.professional-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  padding: 1.2rem 0;
  width: 100%;
}
.professional-toggle--disabled {
  pointer-events: none;
  opacity: 0.6;
}
.professional-toggle-track {
  width: 26px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 20px;
  background: var(--toggle-inactive-bg);
  position: relative;
  cursor: pointer;
  transition: all 200ms;
}
.is-toggling .professional-toggle-track {
  display: none;
}
.professional-toggle--editable .professional-toggle-track {
  opacity: 0.4;
  -webkit-filter: saturate(0);
          filter: saturate(0);
}
.disabled .professional-toggle-track {
  background: var(--surface-color-2);
}
.professional-toggle-message {
  align-self: self-start;
  font-size: 1.333rem;
  white-space: break-spaces;
  color: var(--text-color-primary);
  display: block;
  transition: color 100ms;
}
.professional-toggle-message--on {
  display: none;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-message--on {
  display: block;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-message,
.professional-toggle-checkbox:checked ~ .professional-toggle-message-holder .professional-toggle-message {
  color: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .professional-toggle:hover .professional-toggle-checkbox:not(:disabled):checked ~ .professional-toggle-message {
    color: var(--text-color-primary);
  }
}
@media only screen and (min-width: 768px) {
  .professional-toggle:hover .professional-toggle-message {
    color: var(--text-color-primary);
  }
  .professional-toggle--checkmark:hover .professional-toggle-message {
    color: var(--text-color-primary);
  }
}
.professional-toggle-instructions {
  font-size: 1.2rem;
  color: var(--text-color-secondary);
  display: block;
  margin-top: 0.2rem;
  transition: color 100ms;
}
.professional-toggle--disabled .professional-toggle-instructions {
  color: var(--text-color-primary);
}
.professional-toggle-checkbox:checked ~ .professional-toggle-instructions,
.professional-toggle-checkbox:checked ~ .professional-toggle-message-holder .professional-toggle-instructions {
  color: var(--text-color-primary);
}
@media only screen and (min-width: 768px) {
  .professional-toggle:hover .professional-toggle-instructions {
    color: var(--text-color-primary);
  }
}
.professional-toggle-knob {
  width: 12px;
  height: 12px;
  background: var(--surface-color-4);
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: all 100ms;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-track .professional-toggle-knob {
  left: 12px;
  background: var(--surface-color-2);
}
.professional-toggle-checkmark-holder {
  position: relative;
  width: 1.8em;
  height: 1.8em;
  margin-right: 1rem;
  background: var(--radio-inactive-bg);
  border-radius: 50%;
  flex-shrink: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: background 200ms;
}
.professional-toggle:hover .professional-toggle-checkmark-holder {
  background: var(--radio-inactive-bg-hover);
}
.professional-toggle--checkmark {
  justify-content: flex-start;
  padding: 0.6rem 0;
}
.professional-toggle-checkbox:checked ~ .professional-toggle-checkmark-holder {
  background: var(--radio-active-bg);
}
.professional-toggle-checkbox:disabled ~ .professional-toggle-checkmark-holder {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.professional-toggle-checkmark {
  width: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--surface-color-2);
  opacity: 0;
  -webkit-transform: translateX(-9.25px) rotate(45deg);
          transform: translateX(-9.25px) rotate(45deg);
  transition: opacity 200ms;
}
.professional-toggle-checkbox:checked ~ .professional-selection-grid-item {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #03a9f4, 0 4px 2px -1px rgba(0, 77, 112, 0.15), 0 14px 10px -5px rgba(0, 77, 112, 0.07);
  border-color: #fff;
}
[data-can-edit="no"] .professional-toggle {
  pointer-events: none;
}
.professional-toggle:has(.professional-toggle-checkbox:disabled) {
  pointer-events: none;
  cursor: default;
}
[data-can-edit="no"] .professional-toggle-track,
[data-can-edit="no"] .professional-toggle--checkmark,
[data-can-edit="no"] .professional-structure-item-wrapper {
  opacity: 0.5;
  pointer-events: none;
}
.editing .professional-toggle--editable .professional-toggle-track {
  opacity: 1;
}
.professional-selection-grid-item-example-holder {
  background: red;
  min-height: 8rem;
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  padding: 1rem 2rem 1rem;
}
.professional-selection-grid-item-label-holder {
  background: red;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.professional-selection-grid-item-label {
  display: block;
  padding: 1rem 1rem 0.8rem;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
  transition: color 100ms;
}
.professional-toggle-checkbox:checked ~ .professional-selection-grid-item .professional-toggle-checkmark-holder {
  background: var(--primary-button-bg);
}
.professional-toggle-checkbox:checked ~ .professional-selection-grid-item .professional-toggle-checkmark {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .professional-selection-grid-item:hover .professional-selection-grid-item-label {
    color: var(--text-color-primary);
  }
}
.professional-toggle-checkbox:checked ~ .professional-selection-grid-item .professional-selection-grid-item-label {
  color: var(--text-color-primary);
}
.professional-toggle-checkbox:checked ~ .professional-toggle-track {
  background: var(--toggle-active-bg);
}
.disabled .professional-toggle-checkbox:checked ~ .professional-toggle-track {
  background: color-mix(in srgb, var(--toggle-active-bg), var(--surface-color-2) 80%);
}
.professional-toggle:hover:has(.professional-toggle-checkbox:checked) .professional-toggle-track {
  background: var(--toggle-active-bg-hover);
}
.professional-toggle:hover:has(.professional-toggle-checkbox:not(:checked)) .professional-toggle-track {
  background: var(--toggle-inactive-bg-hover);
}
/* Select Inputs */
.professional-list-row-select-input-wrapper {
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 2px 6px -3px rgba(0, 0, 0, 0.12);
}
.professional-list-row-select-input-wrapper::after {
  content: "";
  width: 4px;
  height: 4px;
  border: 1.5px solid var(--text-color-primary);
  border-radius: 2px;
  position: absolute;
  border-left-color: transparent;
  border-top-color: transparent;
  top: 45%;
  right: 1rem;
  opacity: 0.6;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.professional-list-row-select-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-transform: capitalize;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 0.4rem 0.4rem;
  border: thin solid var(--surface-color-3);
  min-width: 11rem;
  padding: 0.5rem 2.25em 0.4rem 0.6em;
  background: var(--surface-color-3);
  font-size: 1.333rem;
  color: var(--text-color-primary);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-list-row-select-input:hover {
    -webkit-filter: brightness(0.95);
            filter: brightness(0.95);
  }
}
.professional-list-row-select-input-wrapper .professional-list-row-select-input {
  height: 100%;
}
.professional-list-row-select-input:disabled {
  text-transform: capitalize;
  border: thin solid var(--surface-color-2-divider-color);
  background: none;
  color: var(--text-color-disabled);
  font-style: italic;
}
.professional-list-row-select-input:focus {
  outline: none;
  border-color: var(--primary-button-bg);
}
/* Tabs */
.professional-tab-items {
  display: flex;
  padding: 0;
  gap: 1.2rem;
  list-style: none;
  font-weight: bold;
  font-size: 1.333rem;
  color: var(--text-color-secondary);
  transition: all 200ms;
}
.professional-tab-items--vertical {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  flex-direction: column;
  gap: 0.4rem;
}
.professional-tab-item {
  display: flex;
  align-items: center;
  padding: 0.7em 1em 0.6em;
  border-bottom: 0.2rem solid transparent;
  cursor: pointer;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-tab-item:hover {
    color: var(--text-color-primary);
  }
}
.professional-tab-item.selected {
  border-bottom-color: var(--primary-button-bg);
  color: var(--primary-text-color);
  font-weight: bold;
  pointer-events: none;
}
.professional-tab-item--vertical.selected {
  border-bottom-color: transparent;
  color: var(--primary-button-bg);
  font-weight: bold;
  pointer-events: none;
}
/* Feature Cards */
/* stylelint-disable */
.professional-feature-layout-card {
  position: relative;
  display: flex;
  fill: var(--icon-color-muted);
  aspect-ratio: 1.4;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: var(--draggable-item-bg);
  padding: 1.4rem;
  cursor: pointer;
  border-radius: 1rem;
  box-shadow: var(--draggable-item-shadow);
  height: 100%;
  transition: all 200ms;
}
/* stylelint-enable */
@media only screen and (min-width: 768px) {
  .professional-feature-layout-card:hover {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.professional-feature-layout-card-title {
  font-size: 1.333rem;
  color: var(--text-color-secondary);
  margin-top: 1.6rem;
  text-align: center;
}
.professional-labeling-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem;
  align-items: center;
  row-gap: 1rem;
  padding: 2.4rem;
  border-radius: 0.6rem;
  background: var(--surface-color-3);
  box-shadow: 0 0 0 1px var(--surface-color-3-divider-color), 0 14px 25px -6px rgba(0, 0, 0, 0.05);
  margin-bottom: 3rem;
  max-width: 60rem;
}
/* Professional Form Section */
.professional-form-section {
  position: relative;
}
.professional-form-section--top-border::before {
  content: "";
  position: absolute;
  left: -4rem;
  top: 0.6rem;
  width: calc(100% + 8rem);
  height: 100%;
  z-index: 0;
  border-top: thin solid var(--surface-color-2-divider-color);
}
.professional-form-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  padding: 1rem 0.5rem 0.5rem;
  margin-top: 1rem;
  border-radius: 0.3rem 0.3rem 0 0;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
.professional-form-section--top-border .professional-form-section-header {
  border-bottom: none;
}
.professional-form-section-header-icon > svg {
  fill: currentColor;
  opacity: 0.8;
}
/* Professional Form Card */
.professional-form-card {
  padding: 1rem 2rem 2rem;
  background: var(--surface-color-3);
  box-shadow: 0 0 0 1px var(--surface-color-3-divider-color), 0 4px 5px rgba(0, 0, 0, 0.05);
  margin-top: 2rem;
  border-radius: 0.6rem;
}
.professional-form-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: thin solid var(--surface-color-2-divider-color);
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
}
.professional-form-section.section-off .professional-form-section-header,
.professional-form-card.section-off .professional-form-section-header {
  color: var(--text-color-primary);
  opacity: 0.5;
}
.professional-form-card.section-off {
  box-shadow: 0 0 0 1px var(--surface-color-3-divider-color);
  background-color: var(--surface-color-2);
}
.professional-form-card.section-off .professional-form-section-content {
  pointer-events: none;
  opacity: 0.3;
}
/* Professional Headers */
.professional-h3 {
  font-size: 1.6rem;
  color: var(--text-color-primary);
}
.professional-h4 {
  font-size: 1.333rem;
  color: var(--text-color-primary);
}
/* Professional Paragraph */
.professional-p {
  font-size: 1.333rem;
  color: var(--text-color-primary);
}
.professional-p--light {
  color: var(--text-color-primary) !important;
  opacity: 0.8;
}
.professional-p--lighter {
  color: var(--text-color-primary) !important;
  opacity: 0.6;
}
/* Structure Act Cards */
.professional-structure-act-info-card {
  position: relative;
  padding: 2rem 2rem 2.2rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
.professional-structure-act-info-card::before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-color-dilution));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
.professional-structure-act-info-card-title {
  font-size: 1.6rem;
  color: var(--text-color-primary);
}
.professional-structure-act-info-card-title.numbered::before {
  content: attr(data-act-number);
  margin-right: 0.6em;
}
.professional-structure-act-info-card-description {
  color: var(--text-color-primary);
  font-size: 1.333rem;
  margin-top: 1rem;
  line-height: 1.6em;
}
.professional-structure-acts-list {
  padding: 0 3rem 3rem 3rem;
  flex: 1;
  counter-reset: act-list-counter;
}
.professional-structure-act-item {
  position: relative;
  margin: 1rem 0;
  overflow: hidden;
  border-radius: 0.6rem;
  transition: all 200ms;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
  counter-increment: act-list-counter;
}
.professional-structure-act-item::before {
  content: "";
  position: absolute;
  background-color: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-color-dilution));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.8;
}
.professional-structure-act-item:hover {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.professional-structure-act-item-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 1.6rem 0 0;
}
.professional-structure-act-item-header-title,
.professional-structure-act-item-header-auto-title {
  color: var(--text-color-primary);
  font-size: 1.6rem;
  width: 60%;
  max-width: 50ch;
  font-family: "Open Sans", helvetica, sans-serif;
  margin-left: -1rem;
  padding: 0.4rem 1rem;
  font-weight: bold;
  background: transparent;
  border: thin solid transparent;
  border-radius: 0.6rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  pointer-events: none;
  transition: all 200ms;
}
.auto-label .professional-structure-act-item-header-title {
  display: none;
}
.professional-structure-act-item-header-auto-title {
  pointer-events: none;
  display: none;
  cursor: default;
}
.auto-label .professional-structure-act-item-header-auto-title {
  display: block;
}
.auto-label .professional-structure-act-item-header-auto-title::before {
  content: attr(data-act-auto-label-prefix);
}
.auto-label .professional-structure-act-item-header-auto-title::after,
.auto-label.roman .professional-structure-act-item-header-auto-title::after {
  content: counter(act-list-counter, upper-roman);
  padding-left: 0.25em;
}
.auto-label.numbers .professional-structure-act-item-header-auto-title::after {
  content: counter(act-list-counter);
  padding-left: 0.25em;
}
.professional-structure-act-item-grab-here-wrapper {
  color: var(--text-color-primary);
  padding: 1.6rem;
  opacity: 0.6;
  pointer-events: none;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-structure-act-item-grab-here-wrapper:hover {
    opacity: 1;
  }
}
.professional-structure-act-item-grab-here {
  pointer-events: none;
  width: 2rem;
  height: 2rem;
}
.professional-structure-act-item-header-toggle {
  width: 2rem;
  height: 2rem;
}
.professional-structure-act-item-header-actions-button {
  margin-left: auto;
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  fill: var(--text-color-primary);
  opacity: 0;
  transition: all 200ms;
}
.professional-structure-act-item-header-actions-button.professional-dropdown-selected-item {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  fill: var(--primary-button-bg);
}
@media only screen and (min-width: 768px) {
  .professional-structure-act-item-header-actions-button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color-primary);
  }
  .professional-structure-act-item-header:hover .professional-structure-act-item-header-actions-button {
    opacity: 1;
  }
}
.professional-structure-act-item-content {
  position: relative;
  max-height: 0;
  opacity: 0;
  padding: 0 4rem 0;
  transition: opacity 200ms, max-height 200ms, padding 200ms;
}
/* Act Drag Items */
.professional-drag-new-item {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: 0.8rem;
  font-size: 1.333rem;
  min-height: 5.2rem;
  font-weight: 600;
  color: var(--text-color-primary);
  padding: 0 2.4rem 0 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--draggable-item-bg);
  border-radius: 0.6rem;
  cursor: -webkit-grab;
  cursor: grab;
  box-shadow: var(--draggable-item-shadow);
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-drag-new-item:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.professional-drag-new-item-label {
  pointer-events: none;
}
.professional-drag-new-item-grab-here {
  width: 2rem;
  height: 2rem;
  opacity: 0.4;
  padding: 0.8rem 0;
  box-sizing: content-box;
  pointer-events: none;
}
.professional-act-item-drag-ghost {
  display: flex;
  padding: 1.6rem 3rem 1.6rem 1rem;
  gap: 1rem;
  align-items: center;
  border: thin solid var(--draggable-item-border-color);
  min-height: 5.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: color-mix(in srgb, var(--act-color), var(--surface-color-2) var(--act-color-dilution));
  border-radius: 0.6rem;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
  -webkit-transform: rotate(-2.5deg);
          transform: rotate(-2.5deg);
  cursor: -webkit-grabbing;
  cursor: grabbing;
  z-index: 99999999999999999999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.professional-act-item-drag-ghost-handle {
  color: var(--text-color-primary);
  width: 2rem;
  height: 2rem;
}
.professional-act-item-drag-ghost-label {
  font-weight: bold;
  color: var(--text-color-primary);
  font-size: 1.6rem;
}
.browser-refresh-message {
  position: relative;
  display: none;
  background: color-mix(in srgb, #ffecc0, var(--surface-color-2) 20%);
  padding: 1rem 1.5rem;
  border-radius: 0.6rem;
  color: color-mix(in srgb, #ffecc0, #000 70%);
}
.browser-refresh-message::before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, #ffecc0, var(--surface-color-2) 20%);
  width: 1rem;
  height: 1rem;
  left: 0.2rem;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scaleY(0.8) rotate(45deg);
          transform: translate(-50%, -50%) scaleY(0.8) rotate(45deg);
}
.story-changed .browser-refresh-message {
  display: flex;
}
.new-section-feature-icon {
  margin-right: 1.4rem;
  color: var(--icon-color-primary);
}
.professional-story-feature-list-item {
  position: relative;
  border-radius: 0.6rem;
  background: var(--draggable-item-bg);
  box-shadow: var(--draggable-item-shadow);
  cursor: -webkit-grab;
  cursor: grab;
  transition: all 100ms;
  height: 4.9rem;
}
@media only screen and (min-width: 768px) {
  .professional-story-feature-list-item:hover {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.professional-story-feature-list-item-header {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
}
.professional-story-feature-list-item-header-icon-holder {
  position: relative;
  width: 2.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  pointer-events: none;
}
.professional-story-feature-list-item-header-icon-holder::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
}
.professional-story-feature-list-item-title {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.333rem;
  color: var(--text-color-secondary);
  padding: 0 1.4rem 0 0;
  display: flex;
  white-space: nowrap;
  pointer-events: none;
  align-items: center;
}
.professional-story-feature-list-item-title-text {
  max-width: 36ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.professional-story-feature-list-item-title-text-alternate {
  font-weight: normal;
  font-size: 0.9em;
  opacity: 0.65;
  margin-left: 0.3em;
}
.professional-story-feature-list-item:hover .professional-story-feature-list-item-header-actions-button,
.professional-feature-list-section-header:hover .professional-story-feature-list-item-header-actions-button {
  opacity: 1;
}
.professional-story-feature-list-item-remove {
  display: flex;
  align-items: center;
  width: 2.4rem;
  justify-content: center;
  opacity: 0.7;
  margin-left: auto;
  margin-right: 1rem;
  transition: all 200ms;
}
.professional-story-feature-list-item-remove-icon {
  width: 1.5rem;
  height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .professional-story-feature-list-item-remove {
    opacity: 0;
  }
  .professional-available-story-feature-list-item:hover .professional-story-feature-list-item-remove {
    opacity: 0.7;
  }
  .professional-available-story-feature-list-item:hover .professional-story-feature-list-item-remove:hover {
    opacity: 1;
  }
}
.professional-story-feature-list-item-grab-here-wrapper {
  color: var(--text-color-primary);
  width: 4rem;
  display: flex;
  align-items: center;
  padding-top: 0.4rem;
  justify-content: center;
  pointer-events: none;
  cursor: move;
}
.professional-available-story-feature-list-item .professional-story-feature-list-item-grab-here-wrapper {
  pointer-events: none;
}
.professional-story-feature-list-item-grab-here {
  width: 2rem;
  opacity: 0.3;
  transition: all 200ms;
}
.professional-available-story-feature-list-item {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 4.9rem;
  border-radius: 0.6rem;
  cursor: -webkit-grab;
  cursor: grab;
  background: var(--draggable-item-bg);
  box-shadow: var(--draggable-item-shadow);
  transition: all 100ms;
}
@media only screen and (min-width: 768px) {
  .professional-available-story-feature-list-item:hover {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.professional-story-feature-list-item-info-link {
  margin-left: auto;
  align-self: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  padding-right: 1rem;
  transition: all 200ms;
}
.professional-story-feature-list-item-info-link-icon {
  display: block;
  fill: var(--icon-color-muted);
  transition: all 200ms;
}
.professional-story-feature-list-item-info-link-icon:hover {
  fill: var(--icon-color-tertiary);
}
.professional-story-feature-list-item-header-actions-button {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.8rem;
  align-self: center;
  margin-right: 1rem;
  fill: var(--icon-color-muted);
  display: flex;
  background: transparent;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 200ms;
}
@media only screen and (min-width: 768px) {
  .professional-story-feature-list-item-header-actions-button {
    opacity: 0;
  }
  .professional-story-feature-list-item-header-actions-button:hover {
    fill: var(--icon-color-tertiary);
  }
}
.feature-icon {
  fill: var(--icon-color-muted);
  pointer-events: none;
}
.professional-feature-item-drag-ghost {
  display: flex;
  padding: 0 2.2rem 0 1rem;
  height: 4.9rem;
  gap: 0.6rem;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 18rem;
  background: var(--surface-color-3);
  border-radius: 0.6rem;
  box-shadow: var(--draggable-item-shadow-hover);
  -webkit-transform: rotate(-2.5deg);
          transform: rotate(-2.5deg);
  cursor: -webkit-grabbing;
  cursor: grabbing;
  z-index: 99999999999999999999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  border: thin solid var(--primary-button-bg);
}
.professional-feature-item-drag-ghost-handle {
  width: 2rem;
  height: 2rem;
  opacity: 1;
  color: var(--primary-button-bg);
}
.professional-feature-item-drag-ghost-label {
  font-weight: bold;
  color: var(--primary-text-color);
  font-size: 1.333rem;
}
.professional-feature-item-drag-ghost-icon-holder .feature-icon {
  fill: var(--primary-text-color);
}
.professional-feature-item-drop-target-icon .feature-icon {
  fill: currentColor;
}
.professional-feature-list-section {
  border: thin solid transparent;
  margin: 2.4rem 3rem 2rem 3rem;
  border-radius: 0.6rem;
  background: var(--draggable-item-bg);
  box-shadow: var(--draggable-item-shadow);
  transition: all 200ms;
}
.professional-feature-list-section:first-child {
  margin-top: 0;
}
.professional-feature-list-section-header {
  display: flex;
  align-items: center;
  min-height: 5rem;
  border-bottom: thin solid var(--surface-color-3-divider-color);
}
.draggable .professional-feature-list-section-header {
  display: flex;
  cursor: -webkit-grab;
  cursor: grab;
  border-bottom: none;
}
@media only screen and (min-width: 768px) {
  .professional-feature-list-section.draggable:has(.professional-feature-list-section-header:hover) {
    background: var(--draggable-item-bg-hover);
    box-shadow: var(--draggable-item-shadow-hover);
  }
}
.professional-feature-list-section-header-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text-color-secondary);
  padding: 0 1.8rem 0 0;
  display: block;
  pointer-events: none;
}
.professional-feature-list-section-header-title:first-child {
  padding-left: 2rem;
}
.professional-feature-list-section-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.3rem 1.2rem;
  margin: 1.2rem;
  min-height: 7.9rem;
  border: 0.2rem dashed var(--draggable-item-drop-zone-border-color);
  border-radius: 0.8rem;
  background: var(--draggable-item-drop-zone-bg);
}
.professional-feature-list-section-items:not(.over).empty::after {
  content: "Drag features here.";
  position: absolute;
  font-size: 1.333rem;
  text-align: center;
  font-weight: normal;
  line-height: 1.5em;
  color: var(--text-color-primary);
  display: block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.professional-feature-list-section-items.story-level {
  background: transparent;
  border: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.333rem;
  color: var(--text-color-primary);
}
[data-feature-drop-zone]:has(.professional-feature-item-drop-target),
[data-feature-drop-zone].over:has(.dragging) {
  border-color: color-mix(in srgb, var(--primary-button-bg), var(--draggable-item-drop-zone-bg) 20%);
}
[data-feature-drop-zone]:has(.professional-feature-item-drop-target) > .dragging {
  display: none;
}
.professional-section-item-drop-target {
  display: flex;
  align-items: center;
  font-size: 1.333rem;
  font-weight: bold;
  color: var(--text-color-primary);
  position: relative;
  width: calc(100% - 6rem);
  margin-left: 3rem;
  height: 4.9rem;
  opacity: 0.5;
  border-radius: 0.6rem;
  border: 0.1rem solid var(--draggable-item-border-color);
  background: var(--draggable-item-bg);
}
.professional-section-item-drop-target:last-child {
  margin-bottom: 2rem;
}
[data-remove-item-drop-zone]::before {
  content: "";
  position: absolute;
  border-radius: 0.6rem;
  background: transparent;
  outline: 2px dashed transparent;
  left: -1rem;
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: all 100ms;
}
[data-remove-item-drop-zone].can-drag-over::before {
  background: var(--draggable-item-drop-zone-bg);
  outline: 0.2rem dashed var(--draggable-item-drop-zone-border-color);
}
[data-remove-item-drop-zone].over::before {
  outline: 0.2rem dashed color-mix(in srgb, var(--primary-button-bg), var(--surface-color-2-1) 40%);
}
[data-remove-item-drop-zone].over-delete::before {
  background: #f8f4f8;
  outline: 0.2rem dashed #e57373;
  z-index: 99;
}
[data-remove-item-drop-zone].can-drag-over::before,
[data-remove-item-drop-zone].over::before,
[data-remove-item-drop-zone].over-delete::before {
  opacity: 1;
}
[data-remove-item-drop-zone]::after {
  content: "Drop to remove section";
  position: absolute;
  font-size: 1.333rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #e57373;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms;
}
[data-remove-item-drop-zone].over-delete::after {
  opacity: 1;
  z-index: 999;
}
[data-remove-item-drop-zone].over-delete > .professional-available-story-feature-list-item {
  opacity: 0.3;
  pointer-events: none;
}
.professional-color-picker-button {
  width: 3.2rem;
  height: 3.2rem;
  background: #f07b75;
  border-radius: 50%;
  border: 4px solid var(--surface-color-2-hover);
  box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.professional-dropdown-selected-item.professional-color-picker-button {
  outline-color: var(--primary-button-bg);
}
.timeline-grid-skeleton-bkg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--table-loading-gradient);
  z-index: 0;
  opacity: 0.4;
  background-size: 400% 100%;
  background-position: 46% 0%;
  -webkit-animation: grid-skeleton-bkg-animation infinite 3s linear;
          animation: grid-skeleton-bkg-animation infinite 3s linear;
}
.timeline-grid-skeleton-cell {
  background: color-mix(in srgb, var(--surface-color-0), transparent 50%);
  position: relative;
}
.act-header__add-scene-drop-zone-wrapper {
  position: absolute;
  background: var(--surface-color-2);
  bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  opacity: 0;
  border-right: thin solid var(--surface-color-2-divider-color);
  height: calc(100vh - 140px);
  pointer-events: none;
  transition: opacity 250ms;
  z-index: 550;
}
@media only screen and (min-width: 600px) {
  .act-header__add-scene-drop-zone-wrapper {
    height: calc(100vh - 142px);
  }
}
.empty .act-header__add-scene-drop-zone-wrapper {
  opacity: 1;
  pointer-events: all;
}
.timeline--busy .empty .act-header__add-scene-drop-zone-wrapper {
  pointer-events: none;
}
.act-header__add-scene-drop-zone {
  position: absolute;
  background: var(--surface-color-0);
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border: 2px dashed var(--surface-color-2-divider-color);
  border-radius: 6px;
  cursor: pointer;
}
.act-header__add-scene-drop-zone {
  top: 22px;
  bottom: 22px;
  left: 22px;
  right: 22px;
}
.act-header__add-scene-drop-zone__content {
  position: relative;
  left: 50%;
  top: 44%;
  width: 70%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.act-header__add-scene-drop-zone__content__icon {
  fill: var(--text-color-muted);
  width: 3rem;
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  transition: all 200ms;
  display: none;
}
.act-header__add-scene-drop-zone__content__text {
  display: none;
  color: var(--text-color-muted);
  font-size: 1.333rem;
  font-weight: 600;
  transition: all 150ms;
}
.act-header__add-scene-drop-zone__content__text--mobile {
  font-size: 1.3rem;
  display: block;
  color: var(--text-color-muted);
  margin-top: 0.2rem;
  transition: all 200ms;
}
.act-header__add-scene-drop-zone__content {
  position: absolute;
}
.act-header__add-scene-drop-zone__content__icon {
  display: inline-block;
}
.act-header__add-scene-drop-zone__content__text {
  display: block;
}
.act-header__add-scene-drop-zone__content__text--mobile {
  display: none;
}
.act-header__add-scene-drop-zone:hover .act-header__add-scene-drop-zone__content__icon,
.dragged-over .act-header__add-scene-drop-zone__content__icon,
.do .act-header__add-scene-drop-zone__content__icon {
  fill: var(--primary-button-bg);
}
.act-header__add-scene-drop-zone:hover,
.dragged-over .act-header__add-scene-drop-zone,
.do .act-header__add-scene-drop-zone {
  border: 2px dashed var(--primary-button-bg);
}
.lt80 .act-header__add-scene-drop-zone__content__text,
.lt200 .act-header__add-scene-drop-zone__content__text {
  display: none;
}
.lt80 .act-header__add-scene-drop-zone__content__icon,
.lt200 .act-header__add-scene-drop-zone__content__icon {
  width: 35px;
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}
.act-header__add-scene-drop-zone:hover .act-header__add-scene-drop-zone__content__text,
.dragged-over .act-header__add-scene-drop-zone__content__text,
.do .act-header__add-scene-drop-zone__content__text {
  color: var(--primary-button-bg);
}
@keyframes grid-skeleton-bkg-animation {
  0% {
    background-position: 133% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Animations */
@-webkit-keyframes wave {
  100% {
    background-position: -100% 0;
  }
}
@keyframes wave {
  100% {
    background-position: -100% 0;
  }
}
@-webkit-keyframes movein {
  from {
    background-position: 50% 60%;
    opacity: 0;
  }
  to {
    background-position: 50% 50%;
    opacity: 1;
  }
}
@keyframes movein {
  from {
    background-position: 50% 60%;
    opacity: 0;
  }
  to {
    background-position: 50% 50%;
    opacity: 1;
  }
}
@-webkit-keyframes professional-dropdown-overlay-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes professional-dropdown-overlay-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes professional-dropdown-overlay-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes professional-dropdown-overlay-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes connection-jump {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  8% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  40% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
}
@keyframes connection-jump {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  8% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  40% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
}
.hi {
  position: relative;
}
.hi::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 100%;
  height: calc(100% - 2rem);
  opacity: 0;
  pointer-events: none;
  background: #c4e3ed;
  mix-blend-mode: multiply;
  border-radius: 1rem;
  z-index: 9999999999;
  -webkit-animation: opacity-jump 300ms forwards;
          animation: opacity-jump 300ms forwards;
}
.hi--slow::after {
  -webkit-animation: opacity-jump 1.5s forwards;
          animation: opacity-jump 1.5s forwards;
}
@-webkit-keyframes opacity-jump {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.6;
  }
}
@keyframes opacity-jump {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.6;
  }
}
@keyframes connection-jump {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  8% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  40% {
    -webkit-transform: scale(1.0275);
            transform: scale(1.0275);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
}
/* Scrollbar Styling */
.show-scrollbar::-webkit-scrollbar,
.professional-scrollbar::-webkit-scrollbar,
.timeline-grid::-webkit-scrollbar,
.add-plot-thread__plot-threads-holder::-webkit-scrollbar,
.cards-module__cards-holder::-webkit-scrollbar,
.characters-module__cards-scroller::-webkit-scrollbar,
.stats-module__stats-holder::-webkit-scrollbar,
.stats-module__side-panel-content::-webkit-scrollbar,
.page-module::-webkit-scrollbar {
  background: var(--scrollbar-bg);
  width: 10px;
  height: 10px;
}
.show-scrollbar::-webkit-scrollbar-track:vertical,
.professional-scrollbar::-webkit-scrollbar-track:vertical,
.timeline-grid::-webkit-scrollbar-track:vertical,
.add-plot-thread__plot-threads-holder::-webkit-scrollbar-track:vertical,
.cards-module__cards-holder::-webkit-scrollbar-track:vertical,
.characters-module__cards-scroller::-webkit-scrollbar-track:vertical,
.stats-module__stats-holder::-webkit-scrollbar-track:vertical,
.stats-module__side-panel-content::-webkit-scrollbar-track:vertical,
.page-module::-webkit-scrollbar-track:vertical {
  border: thin solid var(--surface-color-0-divider-color);
  border-right: transparent;
  border-radius: 0;
}
.show-scrollbar::-webkit-scrollbar-track:horizontal,
.professional-scrollbar::-webkit-scrollbar-track:horizontal,
.timeline-grid::-webkit-scrollbar-track:horizontal,
.add-plot-thread__plot-threads-holder::-webkit-scrollbar-track:horizontal,
.characters-module__cards-scroller::-webkit-scrollbar-track:horizontal,
.cards-module__cards-holder::-webkit-scrollbar-track:horizontal {
  border: thin solid var(--surface-color-0-divider-color);
  border-left: transparent;
  border-radius: 0;
}
.show-scrollbar::-webkit-scrollbar-thumb,
.professional-scrollbar::-webkit-scrollbar-thumb,
.timeline-grid::-webkit-scrollbar-thumb,
.add-plot-thread__plot-threads-holder::-webkit-scrollbar-thumb,
.cards-module__cards-holder::-webkit-scrollbar-thumb,
.characters-module__cards-scroller::-webkit-scrollbar-thumb,
.stats-module__stats-holder::-webkit-scrollbar-thumb,
.stats-module__side-panel-content::-webkit-scrollbar-thumb,
.page-module::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--scrollbar-thumb-bg);
  margin: 1px;
}
.show-scrollbar::-webkit-scrollbar-thumb:hover,
.professional-scrollbar::-webkit-scrollbar-thumb:hover,
.timeline-grid::-webkit-scrollbar-thumb:hover,
.add-plot-thread__plot-threads-holder::-webkit-scrollbar-thumb:hover,
.cards-module__cards-holder::-webkit-scrollbar-thumb:hover,
.characters-module__cards-scroller::-webkit-scrollbar-thumb:hover,
.stats-module__stats-holder::-webkit-scrollbar-thumb:hover,
.stats-module__side-panel-content::-webkit-scrollbar-thumb:hover,
.page-module::-webkit-scrollbar-thumb:hover {
  border-radius: 0;
  background: var(--scrollbar-thumb-bg-hover);
  margin: 1px;
}
.timeline-grid::-webkit-scrollbar-corner {
  background: var(--scrollbar-bg);
}
/*////////////////////////*/
/*/ //JSON EDITOR PLUGIN///*/
/*////////////////////////*/
.jsoneditor input,
.jsoneditor input:not([type]),
.jsoneditor input[type="text"],
.jsoneditor input[type="search"],
.jsoneditor-modal input,
.jsoneditor-modal input:not([type]),
.jsoneditor-modal input[type="text"],
.jsoneditor-modal input[type="search"] {
  height: auto;
  border: inherit;
  box-shadow: none;
  font-size: inherit;
  box-sizing: inherit;
  padding: inherit;
  font-family: inherit;
  transition: none;
  line-height: inherit;
}
.jsoneditor input:focus,
.jsoneditor input:not([type]):focus,
.jsoneditor input[type="text"]:focus,
.jsoneditor input[type="search"]:focus,
.jsoneditor-modal input:focus,
.jsoneditor-modal input:not([type]):focus,
.jsoneditor-modal input[type="text"]:focus,
.jsoneditor-modal input[type="search"]:focus {
  border: inherit;
  box-shadow: inherit;
}
.jsoneditor textarea,
.jsoneditor-modal textarea {
  height: inherit;
}
.jsoneditor select,
.jsoneditor-modal select {
  display: inherit;
  height: inherit;
}
.jsoneditor label,
.jsoneditor-modal label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.jsoneditor table,
.jsoneditor-modal table {
  border-collapse: collapse;
  width: auto;
}
.jsoneditor td,
.jsoneditor th,
.jsoneditor-modal td,
.jsoneditor-modal th {
  padding: 0;
  display: table-cell;
  text-align: left;
  vertical-align: inherit;
  border-radius: inherit;
}
.jsoneditor .autocomplete.dropdown {
  position: absolute;
  background: #ffffff;
  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
  border: 1px solid #d3d3d3;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: default;
  margin: 0;
  padding: 5px;
  text-align: left;
  outline: 0;
  font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace;
  font-size: 14px;
}
.jsoneditor .autocomplete.dropdown .item {
  color: #1a1a1a;
}
.jsoneditor .autocomplete.dropdown .item.hover {
  background-color: #ebebeb;
}
.jsoneditor .autocomplete.hint {
  color: #a1a1a1;
  top: 4px;
  left: 4px;
}
.jsoneditor-contextmenu-root {
  position: relative;
  width: 0;
  height: 0;
}
.jsoneditor-contextmenu {
  position: absolute;
  box-sizing: content-box;
  z-index: 2;
}
.jsoneditor-contextmenu .jsoneditor-menu {
  position: relative;
  left: 0;
  top: 0;
  width: 128px;
  height: auto;
  background: #ffffff;
  border: 1px solid #d3d3d3;
  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.jsoneditor-contextmenu .jsoneditor-menu button {
  position: relative;
  padding: 0 8px 0 0;
  margin: 0;
  width: 128px;
  height: auto;
  border: none;
  cursor: pointer;
  color: #4d4d4d;
  background: transparent;
  font-size: 14px;
  font-family: arial, sans-serif;
  box-sizing: border-box;
  text-align: left;
}
.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default {
  width: 96px;
}
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
  float: right;
  width: 32px;
  height: 24px;
  border-left: 1px solid #e5e5e5;
}
.jsoneditor-contextmenu .jsoneditor-menu li {
  overflow: hidden;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul {
  display: none;
  position: relative;
  left: -10px;
  top: 0;
  border: none;
  box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
  padding: 0 10px;
  transition: all 0.3s ease-out;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon {
  margin-left: 24px;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul li button {
  padding-left: 24px;
  -webkit-animation: all ease-in-out 1s;
          animation: all ease-in-out 1s;
}
.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 4px 0 0;
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: 0 -72px;
}
.jsoneditor-contextmenu .jsoneditor-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  margin: 0;
  background-image: url("../img/jsoneditor-icons.svg");
}
.jsoneditor-contextmenu .jsoneditor-text {
  padding: 4px 0 4px 24px;
  word-wrap: break-word;
}
.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin {
  padding-right: 24px;
}
.jsoneditor-contextmenu .jsoneditor-separator {
  height: 0;
  border-top: 1px solid #e5e5e5;
  padding-top: 5px;
  margin-top: 5px;
}
.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon {
  background-position: -24px 0;
}
.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon {
  background-position: 0 0;
}
.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon {
  background-position: 0 0;
}
.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon {
  background-position: -48px 0;
}
.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon {
  background-position: -168px 0;
}
.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon {
  background-position: -192px 0;
}
.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon {
  background-position: -216px 0;
}
.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon {
  background-position: 0 -24px;
}
.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon {
  background-position: -144px 0;
}
.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon {
  background-position: -120px 0;
}
.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon {
  background-position: -72px 0;
}
.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon {
  background-position: -96px 0;
}
.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon {
  background-image: none;
  width: 6px;
}
.jsoneditor-contextmenu ul,
.jsoneditor-contextmenu li {
  box-sizing: content-box;
  position: relative;
}
.jsoneditor-contextmenu .jsoneditor-menu button:hover,
.jsoneditor-contextmenu .jsoneditor-menu button:focus {
  color: #1a1a1a;
  background-color: #f5f5f5;
  outline: none;
}
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus {
  color: #ffffff;
  background-color: #ee422e;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover,
.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus {
  background-color: #f5f5f5;
}
.jsoneditor-modal {
  max-width: 95%;
  border-radius: 2px !important;
  padding: 45px 15px 15px 15px !important;
  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
  color: #4d4d4d;
  line-height: 1.3em;
}
.jsoneditor-modal.jsoneditor-modal-transform {
  width: 600px !important;
}
.jsoneditor-modal .pico-modal-header {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  font-family: arial, sans-serif;
  font-size: 11pt;
  background: #3883fa;
  color: #ffffff;
}
.jsoneditor-modal table {
  width: 100%;
}
.jsoneditor-modal table td {
  padding: 3px 0;
}
.jsoneditor-modal table td.jsoneditor-modal-input {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}
.jsoneditor-modal table td.jsoneditor-modal-actions {
  padding-top: 15px;
}
.jsoneditor-modal table th {
  vertical-align: middle;
}
.jsoneditor-modal p:first-child {
  margin-top: 0;
}
.jsoneditor-modal a {
  color: #3883fa;
}
.jsoneditor-modal .jsoneditor-jmespath-block {
  margin-bottom: 10px;
}
.jsoneditor-modal .pico-close {
  background: none !important;
  font-size: 24px !important;
  top: 7px !important;
  right: 7px !important;
  color: #ffffff;
}
.jsoneditor-modal input {
  padding: 4px;
}
.jsoneditor-modal input[type="text"] {
  cursor: inherit;
}
.jsoneditor-modal input[disabled] {
  background: #d3d3d3;
  color: #808080;
}
.jsoneditor-modal .jsoneditor-select-wrapper {
  position: relative;
  display: inline-block;
}
.jsoneditor-modal .jsoneditor-select-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  position: absolute;
  right: 8px;
  top: 14px;
  pointer-events: none;
}
.jsoneditor-modal select {
  padding: 3px 24px 3px 10px;
  min-width: 180px;
  max-width: 350px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-indent: 0;
  text-overflow: "";
  font-size: 14px;
  line-height: 1.5em;
}
.jsoneditor-modal select::-ms-expand {
  display: none;
}
.jsoneditor-modal .jsoneditor-button-group input {
  padding: 4px 10px;
  margin: 0;
  border-radius: 0;
  border-left-style: none;
}
.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-left-style: solid;
}
.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.jsoneditor-modal .jsoneditor-transform-preview {
  background: #f5f5f5;
  height: 200px;
}
.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error {
  color: #ee422e;
}
.jsoneditor-modal .jsoneditor-jmespath-wizard {
  line-height: 1.2em;
  width: 100%;
  padding: 0;
  border-radius: 3px;
}
.jsoneditor-modal .jsoneditor-jmespath-label {
  font-weight: bold;
  color: dodgerblue;
  margin-top: 20px;
  margin-bottom: 5px;
}
.jsoneditor-modal .jsoneditor-jmespath-wizard-table {
  width: 100%;
  border-collapse: collapse;
}
.jsoneditor-modal .jsoneditor-jmespath-wizard-label {
  font-style: italic;
  margin: 4px 0 2px 0;
}
.jsoneditor-modal .jsoneditor-inline {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}
.jsoneditor-modal .jsoneditor-inline:not(:last-child) {
  padding-right: 2px;
}
.jsoneditor-modal .jsoneditor-jmespath-filter {
  display: flex;
  flex-wrap: wrap;
}
.jsoneditor-modal .jsoneditor-jmespath-filter-field {
  width: 180px;
}
.jsoneditor-modal .jsoneditor-jmespath-filter-relation {
  width: 100px;
}
.jsoneditor-modal .jsoneditor-jmespath-filter-value {
  min-width: 180px;
  flex: 1;
}
.jsoneditor-modal .jsoneditor-jmespath-sort-field {
  width: 170px;
}
.jsoneditor-modal .jsoneditor-jmespath-sort-order {
  width: 150px;
}
.jsoneditor-modal .jsoneditor-jmespath-select-fields {
  width: 100%;
}
.jsoneditor-modal .selectr-selected {
  border-color: #d3d3d3;
  padding: 4px 28px 4px 8px;
}
.jsoneditor-modal .selectr-selected .selectr-tag {
  background-color: #3883fa;
  border-radius: 5px;
}
.jsoneditor-modal table th,
.jsoneditor-modal table td {
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
  color: #4d4d4d;
  border-spacing: 0;
  border-collapse: collapse;
}
.jsoneditor-modal select,
.jsoneditor-modal textarea,
.jsoneditor-modal input,
.jsoneditor-modal input[type="text"],
.jsoneditor-modal input[type="text"]:focus,
.jsoneditor-modal #query {
  background: #ffffff;
  border: 1px solid #d3d3d3;
  color: #4d4d4d;
  border-radius: 3px;
  padding: 4px;
}
.jsoneditor-modal,
.jsoneditor-modal table td,
.jsoneditor-modal table th,
.jsoneditor-modal select,
.jsoneditor-modal option,
.jsoneditor-modal textarea,
.jsoneditor-modal input,
.jsoneditor-modal input[type="text"],
.jsoneditor-modal #query {
  font-size: 10.5pt;
  font-family: arial, sans-serif;
}
.jsoneditor-modal #query,
.jsoneditor-modal .jsoneditor-transform-preview {
  font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.jsoneditor-modal input[type="button"],
.jsoneditor-modal input[type="submit"] {
  background: #f5f5f5;
  padding: 4px 20px;
}
.jsoneditor-modal select,
.jsoneditor-modal input {
  cursor: pointer;
}
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
  background: #3883fa;
  border-color: #3883fa;
  color: #ffffff;
}
.jsoneditor {
  color: #1a1a1a;
  border: thin solid #3883fa;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  line-height: 100%;
}
div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor-readonly,
div.jsoneditor-default {
  border: 1px solid transparent;
  min-height: 16px;
  min-width: 32px;
  line-height: 16px;
  padding: 2px;
  margin: 1px;
  word-wrap: break-word;
  float: left;
}
div.jsoneditor-field p,
div.jsoneditor-value p {
  margin: 0;
}
div.jsoneditor-value {
  word-break: break-word;
}
div.jsoneditor-value.jsoneditor-empty::after {
  content: "value";
}
div.jsoneditor-value.jsoneditor-string {
  color: #006000;
}
div.jsoneditor-value.jsoneditor-number {
  color: #ee422e;
}
div.jsoneditor-value.jsoneditor-boolean {
  color: #ff8c00;
}
div.jsoneditor-value.jsoneditor-null {
  color: #004ed0;
}
div.jsoneditor-value.jsoneditor-color-value {
  color: #1a1a1a;
}
div.jsoneditor-value.jsoneditor-invalid {
  color: #1a1a1a;
}
div.jsoneditor-readonly {
  min-width: 16px;
  color: #808080;
}
div.jsoneditor-empty {
  border-color: #d3d3d3;
  border-style: dashed;
  border-radius: 2px;
}
div.jsoneditor-field.jsoneditor-empty::after {
  content: "field";
}
div.jsoneditor td {
  vertical-align: top;
}
div.jsoneditor td.jsoneditor-separator {
  padding: 3px 0;
  vertical-align: top;
  color: #808080;
}
div.jsoneditor td.jsoneditor-tree {
  vertical-align: top;
}
div.jsoneditor.busy pre.jsoneditor-preview {
  background: #f5f5f5;
  color: #808080;
}
div.jsoneditor.busy div.jsoneditor-busy {
  display: inherit;
}
div.jsoneditor code.jsoneditor-preview {
  background: none;
}
div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 2px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
div.jsoneditor-default {
  color: #808080;
  padding-left: 10px;
}
div.jsoneditor-tree {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  background: #ffffff;
}
div.jsoneditor-tree button.jsoneditor-button {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: url("../img/jsoneditor-icons.svg");
}
div.jsoneditor-tree button.jsoneditor-button:focus {
  background-color: #f5f5f5;
  outline: #e5e5e5 solid 1px;
}
div.jsoneditor-tree button.jsoneditor-collapsed {
  background-position: 0 -48px;
}
div.jsoneditor-tree button.jsoneditor-expanded {
  background-position: 0 -72px;
}
div.jsoneditor-tree button.jsoneditor-contextmenu-button {
  background-position: -48px -72px;
}
div.jsoneditor-tree button.jsoneditor-invisible {
  visibility: hidden;
  background: none;
}
div.jsoneditor-tree button.jsoneditor-dragarea {
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -72px -72px;
  cursor: move;
}
div.jsoneditor-tree *:focus {
  outline: none;
}
div.jsoneditor-tree div.jsoneditor-show-more {
  display: inline-block;
  padding: 3px 4px;
  margin: 2px 0;
  background-color: #e5e5e5;
  border-radius: 3px;
  color: #808080;
  font-family: arial, sans-serif;
  font-size: 14px;
}
div.jsoneditor-tree div.jsoneditor-show-more a {
  display: inline-block;
  color: #808080;
}
div.jsoneditor-tree div.jsoneditor-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 4px;
  border: 1px solid #808080;
  cursor: pointer;
}
div.jsoneditor-tree div.jsoneditor-date {
  background: #a1a1a1;
  color: #ffffff;
  font-family: arial, sans-serif;
  border-radius: 3px;
  display: inline-block;
  padding: 3px;
  margin: 0 3px;
}
div.jsoneditor-tree table.jsoneditor-tree {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
div.jsoneditor-tree .jsoneditor-button {
  display: block;
}
div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 4px 0 0;
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -168px -48px;
  background-color: transparent;
}
div.jsoneditor-outer {
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div.jsoneditor-outer.has-nav-bar {
  margin-top: -26px;
  padding-top: 26px;
}
div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
  margin-top: -61px;
  padding-top: 61px;
}
div.jsoneditor-outer.has-status-bar {
  margin-bottom: -26px;
  padding-bottom: 26px;
}
div.jsoneditor-outer.has-main-menu-bar {
  margin-top: -35px;
  padding-top: 35px;
}
div.jsoneditor-busy {
  position: absolute;
  top: 15%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  display: none;
}
div.jsoneditor-busy span {
  background-color: #ffffab;
  border: 1px solid #ffee00;
  border-radius: 3px;
  padding: 5px 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
div.jsoneditor-field.jsoneditor-empty::after,
div.jsoneditor-value.jsoneditor-empty::after {
  pointer-events: none;
  color: #d3d3d3;
  font-size: 8pt;
}
div.jsoneditor-value.jsoneditor-url,
a.jsoneditor-value.jsoneditor-url {
  color: #006000;
  text-decoration: underline;
}
a.jsoneditor-value.jsoneditor-url {
  display: inline-block;
  padding: 2px;
  margin: 2px;
}
a.jsoneditor-value.jsoneditor-url:hover,
a.jsoneditor-value.jsoneditor-url:focus {
  color: #ee422e;
}
div.jsoneditor-field[contenteditable="true"]:focus,
div.jsoneditor-field[contenteditable="true"]:hover,
div.jsoneditor-value[contenteditable="true"]:focus,
div.jsoneditor-value[contenteditable="true"]:hover,
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-value.jsoneditor-highlight {
  background-color: #ffffab;
  border: 1px solid #ffee00;
  border-radius: 2px;
}
div.jsoneditor-field.jsoneditor-highlight-active,
div.jsoneditor-field.jsoneditor-highlight-active:focus,
div.jsoneditor-field.jsoneditor-highlight-active:hover,
div.jsoneditor-value.jsoneditor-highlight-active,
div.jsoneditor-value.jsoneditor-highlight-active:focus,
div.jsoneditor-value.jsoneditor-highlight-active:hover {
  background-color: #ffee00;
  border: 1px solid #ffc700;
  border-radius: 2px;
}
div.jsoneditor-value.jsoneditor-object,
div.jsoneditor-value.jsoneditor-array {
  min-width: 16px;
}
div.jsoneditor-tree button.jsoneditor-contextmenu-button:hover,
div.jsoneditor-tree button.jsoneditor-contextmenu-button:focus,
div.jsoneditor-tree button.jsoneditor-contextmenu-button.jsoneditor-selected,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button {
  background-position: -48px -48px;
}
div.jsoneditor-tree div.jsoneditor-show-more a:hover,
div.jsoneditor-tree div.jsoneditor-show-more a:focus {
  color: #ee422e;
}
textarea.jsoneditor-text,
.ace-jsoneditor {
  min-height: 150px;
}
textarea.jsoneditor-text.ace_editor,
.ace-jsoneditor.ace_editor {
  font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace;
}
textarea.jsoneditor-text {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  outline-width: 0;
  border: none;
  background-color: #ffffff;
  resize: none;
}
tr.jsoneditor-highlight,
tr.jsoneditor-selected {
  background-color: #d3d3d3;
}
tr.jsoneditor-selected button.jsoneditor-dragarea,
tr.jsoneditor-selected button.jsoneditor-contextmenu-button {
  visibility: hidden;
}
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button {
  visibility: visible;
}
div.jsoneditor-tree button.jsoneditor-dragarea:hover,
div.jsoneditor-tree button.jsoneditor-dragarea:focus,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea {
  background-position: -72px -48px;
}
div.jsoneditor tr,
div.jsoneditor th,
div.jsoneditor td {
  padding: 0;
  margin: 0;
}
div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor td,
div.jsoneditor th,
div.jsoneditor textarea,
pre.jsoneditor-preview,
.jsoneditor-schema-error,
.jsoneditor-popover {
  font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace;
  font-size: 14px;
  color: #1a1a1a;
}
.jsoneditor-schema-error {
  cursor: default;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: center;
  width: 24px;
}
.jsoneditor-popover {
  background-color: #4c4c4c;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 7px 10px;
  position: absolute;
  cursor: auto;
  width: 200px;
}
.jsoneditor-popover.jsoneditor-above {
  bottom: 32px;
  left: -98px;
}
.jsoneditor-popover.jsoneditor-above:before {
  border-top: 7px solid #4c4c4c;
  bottom: -7px;
}
.jsoneditor-popover.jsoneditor-below {
  top: 32px;
  left: -98px;
}
.jsoneditor-popover.jsoneditor-below:before {
  border-bottom: 7px solid #4c4c4c;
  top: -7px;
}
.jsoneditor-popover.jsoneditor-left {
  top: -7px;
  right: 32px;
}
.jsoneditor-popover.jsoneditor-left:before {
  border-left: 7px solid #4c4c4c;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  content: "";
  top: 19px;
  right: -14px;
  left: inherit;
  margin-left: inherit;
  margin-top: -7px;
  position: absolute;
}
.jsoneditor-popover.jsoneditor-right {
  top: -7px;
  left: 32px;
}
.jsoneditor-popover.jsoneditor-right:before {
  border-right: 7px solid #4c4c4c;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  content: "";
  top: 19px;
  left: -14px;
  margin-left: inherit;
  margin-top: -7px;
  position: absolute;
}
.jsoneditor-popover:before {
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: "";
  display: block;
  left: 50%;
  margin-left: -7px;
  position: absolute;
}
.jsoneditor-text-errors tr.jump-to-line:hover {
  text-decoration: underline;
  cursor: pointer;
}
.jsoneditor-schema-error:hover .jsoneditor-popover,
.jsoneditor-schema-error:focus .jsoneditor-popover {
  display: block;
  -webkit-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
          animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* JSON schema errors displayed at the bottom of the editor in mode text and code */
.jsoneditor .jsoneditor-validation-errors-container {
  max-height: 130px;
  overflow-y: auto;
}
.jsoneditor .jsoneditor-validation-errors {
  width: 100%;
  overflow: hidden;
}
.jsoneditor .jsoneditor-additional-errors {
  position: absolute;
  margin: auto;
  bottom: 31px;
  left: calc(50% - 92px);
  color: #808080;
  background-color: #ebebeb;
  padding: 7px 15px;
  border-radius: 8px;
}
.jsoneditor .jsoneditor-additional-errors.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.jsoneditor .jsoneditor-additional-errors.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
.jsoneditor .jsoneditor-text-errors {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ffc700;
}
.jsoneditor .jsoneditor-text-errors td {
  padding: 3px 6px;
  vertical-align: middle;
}
.jsoneditor .jsoneditor-text-errors td pre {
  margin: 0;
  white-space: pre-wrap;
}
.jsoneditor .jsoneditor-text-errors tr {
  background-color: #ffffab;
}
.jsoneditor .jsoneditor-text-errors tr.parse-error {
  background-color: #ee2e2e70;
}
.jsoneditor-text-errors .jsoneditor-schema-error {
  border: none;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 4px 0 0;
  cursor: pointer;
}
.jsoneditor-text-errors tr .jsoneditor-schema-error {
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -168px -48px;
  background-color: transparent;
}
.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error {
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -25px 0px;
  background-color: transparent;
}
.jsoneditor-anchor {
  cursor: pointer;
}
.jsoneditor-anchor .picker_wrapper.popup.popup_bottom {
  top: 28px;
  left: -10px;
}
.fadein {
  -webkit-animation: fadein 0.3s;
          animation: fadein 0.3s;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.jsoneditor-modal input[type="search"].selectr-input {
  border: 1px solid #d3d3d3;
  width: calc(100% - 4px);
  margin: 2px;
  padding: 4px;
  box-sizing: border-box;
}
.jsoneditor-modal button.selectr-input-clear {
  right: 8px;
}
.jsoneditor-menu {
  width: 100%;
  height: 35px;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
  color: #ffffff;
  background-color: #3883fa;
  border-bottom: 1px solid #3883fa;
}
.jsoneditor-menu > button,
.jsoneditor-menu > .jsoneditor-modes > button {
  width: 26px;
  height: 26px;
  margin: 2px;
  padding: 0;
  border-radius: 2px;
  border: 1px solid transparent;
  background-color: transparent;
  background-image: url("../img/jsoneditor-icons.svg");
  color: #ffffff;
  opacity: 0.8;
  font-family: arial, sans-serif;
  font-size: 14px;
  float: left;
}
.jsoneditor-menu > button:hover,
.jsoneditor-menu > .jsoneditor-modes > button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.jsoneditor-menu > button:focus,
.jsoneditor-menu > button:active,
.jsoneditor-menu > .jsoneditor-modes > button:focus,
.jsoneditor-menu > .jsoneditor-modes > button:active {
  background-color: rgba(255, 255, 255, 0.3);
}
.jsoneditor-menu > button:disabled,
.jsoneditor-menu > .jsoneditor-modes > button:disabled {
  opacity: 0.5;
  background-color: transparent;
  border: none;
}
.jsoneditor-menu > button.jsoneditor-collapse-all {
  background-position: 0 -96px;
}
.jsoneditor-menu > button.jsoneditor-expand-all {
  background-position: 0 -120px;
}
.jsoneditor-menu > button.jsoneditor-sort {
  background-position: -120px -96px;
}
.jsoneditor-menu > button.jsoneditor-transform {
  background-position: -144px -96px;
}
.jsoneditor.jsoneditor-mode-view > .jsoneditor-menu > button.jsoneditor-sort,
.jsoneditor.jsoneditor-mode-form > .jsoneditor-menu > button.jsoneditor-sort,
.jsoneditor.jsoneditor-mode-view > .jsoneditor-menu > button.jsoneditor-transform,
.jsoneditor.jsoneditor-mode-form > .jsoneditor-menu > button.jsoneditor-transform {
  display: none;
}
.jsoneditor-menu > button.jsoneditor-undo {
  background-position: -24px -96px;
}
.jsoneditor-menu > button.jsoneditor-undo:disabled {
  background-position: -24px -120px;
}
.jsoneditor-menu > button.jsoneditor-redo {
  background-position: -48px -96px;
}
.jsoneditor-menu > button.jsoneditor-redo:disabled {
  background-position: -48px -120px;
}
.jsoneditor-menu > button.jsoneditor-compact {
  background-position: -72px -96px;
}
.jsoneditor-menu > button.jsoneditor-format {
  background-position: -72px -120px;
}
.jsoneditor-menu > button.jsoneditor-repair {
  background-position: -96px -96px;
}
.jsoneditor-menu > .jsoneditor-modes {
  display: inline-block;
  float: left;
}
.jsoneditor-menu > .jsoneditor-modes > button {
  background-image: none;
  width: auto;
  padding-left: 6px;
  padding-right: 6px;
}
.jsoneditor-menu > button.jsoneditor-separator,
.jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-separator {
  margin-left: 10px;
}
.jsoneditor-menu a {
  font-family: arial, sans-serif;
  font-size: 14px;
  color: #ffffff;
  opacity: 0.8;
  vertical-align: middle;
}
.jsoneditor-menu a:hover {
  opacity: 1;
}
.jsoneditor-menu a.jsoneditor-poweredBy {
  font-size: 8pt;
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}
.jsoneditor-navigation-bar {
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
  color: #808080;
  background-color: #ebebeb;
  overflow: hidden;
  font-family: arial, sans-serif;
  font-size: 14px;
}
.jsoneditor-search {
  font-family: arial, sans-serif;
  position: absolute;
  right: 4px;
  top: 4px;
  border-collapse: collapse;
  border-spacing: 0;
  display: flex;
}
.jsoneditor-search input {
  color: #1a1a1a;
  width: 120px;
  border: none;
  outline: none;
  margin: 1px;
  line-height: 20px;
  font-family: arial, sans-serif;
}
.jsoneditor-search button {
  width: 16px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: url("../img/jsoneditor-icons.svg");
  vertical-align: top;
}
.jsoneditor-search button:hover {
  background-color: transparent;
}
.jsoneditor-search button.jsoneditor-refresh {
  width: 18px;
  background-position: -99px -73px;
}
.jsoneditor-search button.jsoneditor-next {
  cursor: pointer;
  background-position: -124px -73px;
}
.jsoneditor-search button.jsoneditor-next:hover {
  background-position: -124px -49px;
}
.jsoneditor-search button.jsoneditor-previous {
  cursor: pointer;
  background-position: -148px -73px;
  margin-right: 2px;
}
.jsoneditor-search button.jsoneditor-previous:hover {
  background-position: -148px -49px;
}
.jsoneditor-results {
  font-family: arial, sans-serif;
  color: #ffffff;
  padding-right: 5px;
  line-height: 26px;
}
.jsoneditor-frame {
  border: 1px solid transparent;
  background-color: #ffffff;
  padding: 0 2px;
  margin: 0;
}
.jsoneditor-statusbar {
  line-height: 26px;
  height: 26px;
  color: #808080;
  background-color: #ebebeb;
  border-top: 1px solid #d3d3d3;
  box-sizing: border-box;
  font-size: 14px;
}
.jsoneditor-statusbar > .jsoneditor-curserinfo-val {
  margin-right: 12px;
}
.jsoneditor-statusbar > .jsoneditor-curserinfo-count {
  margin-left: 4px;
}
.jsoneditor-statusbar > .jsoneditor-validation-error-icon {
  float: right;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-top: 1px;
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -168px -48px;
  cursor: pointer;
}
.jsoneditor-statusbar > .jsoneditor-validation-error-count {
  float: right;
  margin: 0 4px 0 0;
  cursor: pointer;
}
.jsoneditor-statusbar > .jsoneditor-parse-error-icon {
  float: right;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 1px;
  background-image: url("../img/jsoneditor-icons.svg");
  background-position: -25px 0px;
}
.jsoneditor-statusbar .jsoneditor-array-info a {
  color: inherit;
}
div.jsoneditor-statusbar > .jsoneditor-curserinfo-label,
div.jsoneditor-statusbar > .jsoneditor-size-info {
  margin: 0 4px;
}
.jsoneditor-treepath {
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
}
.jsoneditor-treepath.show-all {
  word-wrap: break-word;
  white-space: normal;
  position: absolute;
  background-color: #ebebeb;
  z-index: 1;
  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
}
.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn {
  display: none;
}
.jsoneditor-treepath div.jsoneditor-contextmenu-root {
  position: absolute;
  left: 0;
}
.jsoneditor-treepath .jsoneditor-treepath-show-all-btn {
  position: absolute;
  background-color: #ebebeb;
  left: 0;
  height: 20px;
  padding: 0 3px;
  cursor: pointer;
}
.jsoneditor-treepath .jsoneditor-treepath-element {
  margin: 1px;
  font-family: arial, sans-serif;
  font-size: 14px;
}
.jsoneditor-treepath .jsoneditor-treepath-seperator {
  margin: 2px;
  font-size: 9pt;
  font-family: arial, sans-serif;
}
.jsoneditor-treepath span.jsoneditor-treepath-element:hover,
.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover {
  cursor: pointer;
  text-decoration: underline;
}
/*!
 * Selectr 2.4.0
 * https://github.com/Mobius1/Selectr
 *
 * Released under the MIT license
 */
.selectr-container {
  position: relative;
}
.selectr-container li {
  list-style: none;
}
.selectr-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0 none;
}
.selectr-visible {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 11;
}
.selectr-desktop.multiple .selectr-visible {
  display: none;
}
.selectr-desktop.multiple.native-open .selectr-visible {
  top: 100%;
  min-height: 200px !important;
  height: auto;
  opacity: 1;
  display: block;
}
.selectr-container.multiple.selectr-mobile .selectr-selected {
  z-index: 0;
}
.selectr-selected {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 28px 7px 14px;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 3px;
  background-color: #ffffff;
}
.selectr-selected::before {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  content: "";
  -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
          transform: rotate(0deg) translate3d(0px, -50%, 0px);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: #6c7a86 transparent transparent;
}
.selectr-container.open .selectr-selected::before,
.selectr-container.native-open .selectr-selected::before {
  border-width: 0 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent #6c7a86;
}
.selectr-label {
  display: none;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.selectr-placeholder {
  color: #6c7a86;
}
.selectr-tags {
  margin: 0;
  padding: 0;
  white-space: normal;
}
.has-selected .selectr-tags {
  margin: 0 0 -2px;
}
.selectr-tag {
  list-style: none;
  position: relative;
  float: left;
  padding: 2px 25px 2px 8px;
  margin: 0 2px 2px 0;
  cursor: default;
  color: #ffffff;
  border: medium none;
  border-radius: 10px;
  background: #acb7bf none repeat scroll 0 0;
}
.selectr-container.multiple.has-selected .selectr-selected {
  padding: 5px 28px 5px 5px;
}
.selectr-options-container {
  position: absolute;
  z-index: 10000;
  top: calc(100% - 1px);
  left: 0;
  display: none;
  box-sizing: border-box;
  width: 100%;
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: transparent #999999 #999999;
  border-radius: 0 0 3px 3px;
  background-color: #ffffff;
}
.selectr-container.open .selectr-options-container {
  display: block;
}
.selectr-input-container {
  position: relative;
  display: none;
}
.selectr-clear,
.selectr-input-clear,
.selectr-tag-remove {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  -webkit-transform: translate3d(0px, -50%, 0px);
          transform: translate3d(0px, -50%, 0px);
  border: medium none;
  background-color: transparent;
  z-index: 11;
}
.selectr-clear,
.selectr-input-clear {
  display: none;
}
.selectr-container.has-selected .selectr-clear,
.selectr-input-container.active .selectr-input-clear {
  display: block;
}
.selectr-selected .selectr-tag-remove {
  right: 2px;
}
.selectr-clear::before,
.selectr-clear::after,
.selectr-input-clear::before,
.selectr-input-clear::after,
.selectr-tag-remove::before,
.selectr-tag-remove::after {
  position: absolute;
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  content: " ";
  background-color: #6c7a86;
}
.selectr-tag-remove::before,
.selectr-tag-remove::after {
  top: 4px;
  width: 3px;
  height: 12px;
  background-color: #ffffff;
}
.selectr-clear:before,
.selectr-input-clear::before,
.selectr-tag-remove::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.selectr-clear:after,
.selectr-input-clear::after,
.selectr-tag-remove::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.selectr-input-container.active,
.selectr-input-container.active .selectr-clear {
  display: block;
}
.selectr-input {
  top: 5px;
  left: 5px;
  box-sizing: border-box;
  width: calc(100% - 30px);
  margin: 10px 15px;
  padding: 7px 30px 7px 9px;
  border: 1px solid #999999;
  border-radius: 3px;
}
.selectr-notice {
  display: none;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  border-top: 1px solid #999999;
  border-radius: 0 0 3px 3px;
  background-color: #ffffff;
}
.selectr-container.notice .selectr-notice {
  display: block;
}
.selectr-container.notice .selectr-selected {
  border-radius: 3px 3px 0 0;
}
.selectr-options {
  position: relative;
  top: calc(100% + 2px);
  display: none;
  overflow-x: auto;
  overflow-y: scroll;
  max-height: 200px;
  margin: 0;
  padding: 0;
}
.selectr-container.open .selectr-options,
.selectr-container.open .selectr-input-container,
.selectr-container.notice .selectr-options-container {
  display: block;
}
.selectr-option {
  position: relative;
  display: block;
  padding: 5px 20px;
  list-style: outside none none;
  cursor: pointer;
  font-weight: normal;
}
.selectr-options.optgroups > .selectr-option {
  padding-left: 25px;
}
.selectr-optgroup {
  font-weight: bold;
  padding: 0;
}
.selectr-optgroup--label {
  font-weight: bold;
  margin-top: 10px;
  padding: 5px 15px;
}
.selectr-match {
  text-decoration: underline;
}
.selectr-option.selected {
  background-color: #ddd;
}
.selectr-option.active {
  color: #ffffff;
  background-color: #5897fb;
}
.selectr-option.disabled {
  opacity: 0.4;
}
.selectr-option.excluded {
  display: none;
}
.selectr-container.open .selectr-selected {
  border-color: #999999 #999999 transparent #999999;
  border-radius: 3px 3px 0 0;
}
.selectr-container.open .selectr-selected::after {
  -webkit-transform: rotate(180deg) translate3d(0px, 50%, 0px);
          transform: rotate(180deg) translate3d(0px, 50%, 0px);
}
.selectr-disabled {
  opacity: 0.6;
}
.selectr-empty,
.has-selected .selectr-placeholder {
  display: none;
}
.has-selected .selectr-label {
  display: block;
}
/* TAGGABLE */
.taggable .selectr-selected {
  padding: 4px 28px 4px 4px;
}
.taggable .selectr-selected::after {
  display: table;
  content: " ";
  clear: both;
}
.taggable .selectr-label {
  width: auto;
}
.taggable .selectr-tags {
  float: left;
  display: block;
}
.taggable .selectr-placeholder {
  display: none;
}
.input-tag {
  float: left;
  min-width: 90px;
  width: auto;
}
.selectr-tag-input {
  border: medium none;
  padding: 3px 10px;
  width: 100%;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}
.selectr-input-container.loading::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  content: "";
  -webkit-transform: translate3d(0px, -50%, 0px);
          transform: translate3d(0px, -50%, 0px);
  -webkit-transform-origin: 50% 0 0;
          transform-origin: 50% 0 0;
  -webkit-animation: 500ms linear 0s normal forwards infinite running selectr-spin;
          animation: 500ms linear 0s normal forwards infinite running selectr-spin;
  border-width: 3px;
  border-style: solid;
  border-color: #aaa #ddd #ddd;
  border-radius: 50%;
}
@-webkit-keyframes selectr-spin {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
    transform: rotate(0deg) translate3d(0px, -50%, 0px);
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
    transform: rotate(360deg) translate3d(0px, -50%, 0px);
  }
}
@keyframes selectr-spin {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px);
    transform: rotate(0deg) translate3d(0px, -50%, 0px);
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px);
    transform: rotate(360deg) translate3d(0px, -50%, 0px);
  }
}
.selectr-container.open.inverted .selectr-selected {
  border-color: transparent #999999 #999999;
  border-radius: 0 0 3px 3px;
}
.selectr-container.inverted .selectr-options-container {
  border-width: 1px 1px 0;
  border-color: #999999 #999999 transparent;
  border-radius: 3px 3px 0 0;
  background-color: #ffffff;
}
.selectr-container.inverted .selectr-options-container {
  top: auto;
  bottom: calc(100% - 1px);
}
.selectr-container ::-webkit-input-placeholder {
  color: #6c7a86;
  opacity: 1;
}
.selectr-container ::-moz-placeholder {
  color: #6c7a86;
  opacity: 1;
}
.selectr-container :-ms-input-placeholder {
  color: #6c7a86;
  opacity: 1;
}
.selectr-container ::placeholder {
  color: #6c7a86;
  opacity: 1;
}