:root {
--pale-green: #b6d7a8;
--pale-green-dark: #326800;
--pale-green-darker: #163d00;
--button-hover-green: #9abe8b;
--button-green-dark: #142900;
--button-green: #77b052;
--button-green-hover: #5a8a3d;
--button-violet: #3f51b5;
--button-violet-hover: #28358a;
--darkest-grey: #161616;
--dark-grey: #232323;
--semi-dark-grey: #343434;
--medium-dark-grey: #5f5f5f;
--medium-grey: #bcbcbc;
--light-grey: #eaeaea;
--lightest-grey: #f7f7f7;
--medium-light-grey: #d4d4d4;
--error-red: #ff0000;
--error-red-dark: #b30000;
--error-red-darker: #800000;
--error-red-light: #ffcccc;
--warning-yellow: #ffc107;
--info-blue: #2196f3;
--info-blue-hover: #1976d2;
--pale-green-light: #e8f5e8;
--icon-purple: #af3fb5;
--icon-orange: #e68a00;
--font-family: 'Roboto', sans-serif !important;
--font-family-title: 'Montserrat', sans-serif !important;
--spacing-xs: 3px;
--spacing-sm: 5px;
--spacing-md: 10px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--border-radius-sm: 4px;
--border-radius-md: 5px;
--border-radius-lg: 8px;
--border-radius-full: 100%;
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-spinner: 1065;
--z-index-tooltip: 1070;
--z-index-toast: 1080;
--transition-fast: 0.1s ease-in-out;
--transition-normal: 0.2s ease-in-out;
--transition-slow: 0.3s ease-in-out;
--mobile-breakpoint: 750px;
--tablet-breakpoint: 1024px;
--desktop-breakpoint: 1200px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.left-align {
text-align: left !important;
}
.right-align {
text-align: right !important;
}
.center-align {
text-align: center !important;
}
.dark-mode {
--background-color: var(--darkest-grey);
--text-color: var(--light-grey);
--border-color: var(--medium-dark-grey);
--input-background: var(--darkest-grey);
--input-text: var(--light-grey);
--input-border: var(--darkest-grey);
background-color: var(--darkest-grey) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
}
.light-mode {
--background-color: #8d2c2c;
--text-color: var(--dark-grey);
--border-color: var(--medium-grey);
--input-background: #fff;
--input-text: var(--dark-grey);
--input-border: var(--medium-grey);
background-color: #f7f7f7 !important;
background: none;
} 
* {
position: relative;
text-align: left;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0px;
gap: 10px;
background-color: #f7f7f7 !important;
min-height: unset !important;
font-family: var(--font-family);
color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dark-mode {
background-color: var(--darkest-grey) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
color: var(--light-grey);
}
.light-mode {
background-color: #f7f7f7 !important;
color: var(--dark-grey);
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 40px 102px;
padding: 20px 0 0 0;
max-width: 1800px;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
.hidden {
display: none;
position: absolute;
}
.pointer {
cursor: pointer;
}
.fa-sign-out {
color: your-new-color;
}
.fa-sign-out:hover {
color: your-hover-color;
} 
body #app_ {
font-family: var(--font-family);
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}
body.mobile #app_ {
font-size: 15px;
}
body #app_ h1 {
color: #333;
font-size: 30px;
font-family: var(--font-family-title);
}
body #app_ h2 {
font-size: 22px;
}
body #app_ h3 {
font-size: 20px;
}
body #app_ .guestView h1 {
font-size: 60px;
font-family: var(--font-family-title);
}
.containerDiv h1,
.containerDiv h2,
.containerDiv h3,
.containerDiv h4,
.containerDiv h5,
.containerDiv h6 {
margin-top: 5px;
}
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
color: white;
}
.dark-mode h1,
.dark-mode h2,
.dark-mode .template-card-title {
background: linear-gradient(to bottom, #ffffff, #8e8e8e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.light-mode h1,
.light-mode h2,
.light-mode .template-card-title {
background: linear-gradient(to bottom, #000000, #666666);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p, ul li, ol li {
color: var(--darker-grey);
font-size: 12px;
}
body.mobile #app_ p, 
body.mobile #app_ ul li, 
body.mobile #app_ ol li {
font-size: 15px;
}
.dark-mode p, 
.dark-mode ul li, 
.dark-mode ol li {
color: var(--light-grey);
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
color: var(--dark-grey);
}
.dark-mode label:not(.amplify-label) {
color: var(--medium-grey);
}
.tinylabel {
font-size: 12px;
line-height: 12px;
color: #333;
padding: 0;
margin: 0;
}
.text-success {
color: var(--pale-green-dark);
}
.dark-mode .text-success {
color: var(--pale-green);
}
body.mobile #app_ .guestView h1 {
font-size: 30px;
}
body.mobile #app_ .guestView p.description {
font-size: 12px;
margin-left: 100px;
margin-right: 100px;
} 
.vertical {
display: flex;
flex-direction: column;
}
.vertical * {
text-align: center;
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 75vh;
}
.left {
text-align: left;
justify-content: left;
}
.right {
position: absolute;
right: 10px;
}
.justifyLeft {
justify-content: left;
}
.marginBottom10px {
margin-bottom: 10px !important;
display: inline-block;
}
.margin-top-50px {
margin-top: 50px !important;
}
.margin-top-150px {
margin-top: 150px !important;
}
.margin-top-20px {
margin-top: 20px;
}
.margin-top-0px {
margin-top: 0px !important;
}
.margin-bottom-50px {
margin-bottom: 50px;
}
.max-width-95 {
max-width: 95%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
.window-height {
height: 100vh;
}
.overflow {
height: calc(100vh - 200px);
overflow: auto;
}
.showOnHover * {
visibility: hidden;
}
.showOnHover:hover * {
visibility: visible;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #495057;
}
.dark-mode .form-group label {
color: var(--pale-green);
}
.flex.notFound {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--medium-grey);
font-size: 1.2rem;
text-align: center;
padding: 2rem;
flex-direction: column;
}
.notFound h3,
.notFound p {
margin: 0;
margin-bottom: 10px;
line-height: 1.5;
text-align: center;
}
.notFound p {
margin-bottom: 20px;
}
.dark-mode .notFound {
color: var(--light-grey);
}
.dot {
font-size: 24px;
line-height: .2;
}
.dot_1 {
animation: blink1 2s infinite;
}
.dot_2 {
animation: blink2 2s infinite;
}
.dot_3 {
animation: blink3 2s infinite;
}
@keyframes blink1 {
0%, 1% { opacity: 0; }
20%, 30% { opacity: 1; }
}
@keyframes blink2 {
0%, 1% { opacity: 0; }
50%, 60% { opacity: 1; }
}
@keyframes blink3 {
0%, 1% { opacity: 0; }
80%, 90% { opacity: 1; }
}
.pointer {
cursor: pointer;
}
.smallBtn_wrapper {
position: absolute;
top: 0px;
right: 0px;
}
.hidden {
visibility: hidden;
}
body.mobile .simply-explain {
margin-top: 0;
}
body.mobile .simply-explain-layout {
flex-direction: column;
gap: 20px;
}
body.mobile .simply-explain-column {
min-height: auto;
width: 100%;
padding: 0;
margin-top: 20px;
}
body.mobile .simply-explain-astronaut-icon {
font-size: 60px;
}
body.mobile .simply-explain-example-box,
body.mobile .simply-explain-description-box {
padding: 20px;
}
body.mobile .simply-explain-description-box {
border-right: none;
}
body.mobile .simply-explain-description-box.no-padding-in-mobile {
padding: 0;
}
body.mobile .simply-explain-example-section {
padding-left: 0;
margin-top: 30px;
}
body.mobile .simply-explain-workflow {
padding: 0;
margin-bottom: 20px;
}
body.mobile .reduce-padding-in-mobile {
padding: 5px 0 0px;
}
body.mobile .simply-explain-method .template-step-circle {
position: absolute;
left: 5px;
top: 5px;
transform: translateX(-50%);
z-index: 1;
}
body.mobile .simply-explain-method-content {
padding-left: 20px;
padding-right: 20px;
}
body.mobile .social-media-channels {
gap: 8px;
}
body.mobile .social-channel {
min-width: 80px;
max-width: none;
}
body.mobile .hus-case-study {
margin-top: 0;
}
body.mobile .hus-case-link {
top: unset;
right: unset;
bottom: -35px;
margin-top: 0px;
width: 100%;
}
body.mobile .hus-logo {
top: -20px;
left: 20px;
}
body.mobile #app_ h2.example-templates-title {
font-size: 22px;
}
body.mobile .welcome-header h1 {
font-size: 1.8em;
}
body.mobile .stats-section .flex,
body.mobile .activity-section .flex {
flex-direction: column;
align-items: center;
}
body.mobile .no-activity-card {
margin: 0 var(--spacing-md);
padding: var(--spacing-lg);
}
body.mobile .guestView {
margin-top: 20px;
margin-bottom: 100px;
}
body.mobile .dashbtns {
left: 70px;
right: 10px;
font-size: 12px;
position: relative;
width: calc(100vw - 80px);
top: -50px;
}
body.mobile .dashLinks {
gap: 15px;
}
body.mobile .dashLink {
text-align: center;
margin: 0;
}
body.mobile .dashSocial {
width: 50px;
position: fixed;
bottom: 15px;
right: 5px;
left: unset;
flex-direction: column;
gap: 5px;
border-left: 1px solid var(--pale-green);
display: none;
}
body.mobile .dashSocial i {
font-size: 15px;
}
body.mobile .info-section p {
width: calc(100vw - 100px);
}
body.mobile .hus-case-study {
padding: 0 20px;
margin: 60px 0;
}
body.mobile .hus-case-content {
padding: 25px;
flex-direction: column;
gap: 20px;
text-align: center;
}
body.mobile .hus-logo {
width: 60px;
align-self: center;
}
body.mobile .hus-case-quote {
padding: 15px;
font-size: 14px;
}
body.mobile .hus-case-attribution {
text-align: center;
}
body.mobile header {
width: 100vw;
position: relative;
height: 0px;
}
body.mobile .logo {
width: 60px;
height: 60px;
padding: 2px;
margin: 0;
left: 0;
top: 0;
position: relative;
}
body.mobile .logo img {
width: 50px;
height: auto;
}
body.mobile .navbar {
position: fixed !important;
top: unset;
bottom: 0;
left: 0;
width: 100vw;
height: 70px;
padding-top: 2px;
row-gap: 10px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 100;
padding-right: 135px;
margin-bottom: 0px !important;
border-top: 1px solid var(--pale-green) !important;
overflow-y: auto;
}
body.mobile .guest .navbar {
padding-right: 0px;
}
body.mobile .navbar a {
font-size: 9px;
padding: 0 0 0 0;
margin: 0;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
line-height: 1.1;
white-space: normal;
word-break: break-word;
min-width: 50px;
}
body.mobile .navbar a i {
font-size: 18px;
margin-bottom: 0px;
margin-top: 2px;
}
body.mobile .navbar a br {
display: none;
}
body.mobile .navbar a span, 
body.mobile .navbar a {
text-align: center;
width: 100%;
display: block;
}
body.mobile .navbar a.last {
margin-right: 15px;
}
body.mobile .navbar-serviceText {
font-size: 9px;
margin-top: 5px;
}
body.mobile .breadcrumbTopContainer {
margin-left: 60px;
width: calc(100vw - 60px);
}
.view-userSettings.mobile .breadcrumbTopContainer {
display: none;
}
body.mobile .user_info {
width: 135px;
height: 50px;
bottom: 13px;
top: unset;
left: unset;
right: 0;
z-index: 100;
border-left: 1px solid var(--pale-green);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0px;
background-color: white;
}
body.mobile.dark-mode .user_info {
background-color: black;
}
body.mobile .user_info .name {
font-size: 8px;
}
body.mobile .user_info .organisationName {
font-size: 6px;
}
body.mobile .userCircle {
width: 25px;
height: 25px;
margin-left: calc(50% - 12.5px);
margin-bottom: 0px;
}
body.mobile #signOut {
display: block;
position: relative !important;
right: unset;
top: unset;
width: 40px;
padding-left: 10px;
}
body.mobile #signOut i {
font-size: 20px;
}
body.mobile .darkModeTab {
display: none;
left: 3px;
width: 55px;
top: 70px;
}
body.mobile .darkModeTab .tab-container {
width: 55px;
}
body.mobile .darkModeTab .tab-container i {
font-size: 9px;
}
body.mobile .darkModeTab .tab {
width: 20px;
min-width: 20px;
}
body.mobile .dashSocial_ {
flex: 1 0 135px;
border-left: 1px solid var(--pale-green);
display: flex;
flex-direction: row;
align-items: center;
gap: 0px;
padding-left: 10px;
padding-right: 10px;
height: 50px;
}
body.mobile .btn {
font-size: 10px;
}
.mobile .form-group label {
font-size: 12px !important;
}
.mobile .form-group input,
.mobile .form-group select,
.mobile .form-group textarea {
font-size: 12px !important;
}
.mobile .form-group.checkbox label {
font-size: 12px !important;
}
.mobile .data-table-wrapper .list-footer {
text-align: left;
}
body.mobile .data-table th,
body.mobile .data-table td {
min-width: 120px;
word-break: break-word;
white-space: normal;
padding: 8px 6px;
}
body.mobile .data-table-wrapper {
overflow-x: auto;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
body.mobile .data-table {
width: max-content;
min-width: 100%;
border-collapse: collapse;
box-sizing: border-box;
}
body.mobile .mobile-cards-wrapper {
width: 100%;
max-width: 100vw;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile .mobile-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.mobile .mobile-card-title {
font-weight: 600;
font-size: 16px;
color: var(--dark-grey);
line-height: 1.3;
flex: 1;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-width: 0;
}
body.mobile.dark-mode .mobile-card-title {
color: var(--light-grey);
}
body.mobile .mobile-card-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
}
body.mobile .mobile-card-actions i {
font-size: 16px;
padding: 8px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
body.mobile .mobile-card-actions i:hover {
background-color: var(--light-grey);
}
body.mobile.dark-mode .mobile-card-actions i:hover {
background-color: var(--dark-grey);
}
body.mobile .mobile-card-details {
display: grid;
gap: 8px;
}
body.mobile .mobile-card-detail {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 6px 0;
border-bottom: 1px solid var(--lightest-gray);
gap: 8px;
width: 100%;
box-sizing: border-box;
}
body.mobile .mobile-card-detail:last-child {
border-bottom: none;
}
body.mobile.dark-mode .mobile-card-detail {
border-bottom: 1px solid var(--dark-grey);
}
body.mobile .mobile-card-label {
font-weight: 500;
color: var(--medium-grey);
font-size: 14px;
line-height: 1.4;
flex: 1;
min-width: 0;
max-width: 50%;
word-break: break-word;
overflow-wrap: break-word;
text-align: left !important;
}
body.mobile.dark-mode .mobile-card-label {
color: var(--medium-dark-grey);
}
body.mobile .mobile-card-value {
font-size: 14px;
color: var(--dark-grey);
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 50%;
text-align: right !important;
}
body.mobile.dark-mode .mobile-card-value {
color: var(--light-grey);
}
body.mobile .mobile-cards-wrapper .list-footer {
margin-top: 20px;
padding: 15px;
background: var(--lightest-gray);
border: 1px solid var(--medium-grey);
border-radius: 8px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
body.mobile .data-table-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .data-table-wrapper table.data-table {
width: 100%;
table-layout: fixed;
}
body.mobile .data-table-wrapper .data-table th,
body.mobile .data-table-wrapper .data-table td {
padding: 12px 8px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
body.mobile .data-table-wrapper .data-table th:first-child,
body.mobile .data-table-wrapper .data-table td:first-child {
width: 50%;
font-weight: 500;
text-align: left !important;
padding-right: 8px;
}
body.mobile .data-table-wrapper .data-table th:last-child,
body.mobile .data-table-wrapper .data-table td:last-child {
width: 50%;
text-align: left !important;
padding-left: 8px;
}
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > *,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > div,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > span {
text-align: left !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table .verification-buttons {
text-align: right !important;
margin-top: 8px !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table .verification-buttons .btn {
font-size: 10px !important;
padding: 4px 8px !important;
margin-left: 4px !important;
text-align: center !important; 
}
body.mobile .view-userSettings .data-table-wrapper .list-footer {
margin-top: 15px;
padding: 12px;
background: var(--lightest-gray);
border: 1px solid var(--medium-grey);
border-radius: 8px;
text-align: center;
}
body.mobile.dark-mode .view-userSettings .data-table-wrapper .list-footer {
background: var(--darkest-grey);
border: 1px solid var(--dark-grey);
}
body.mobile.dark-mode .mobile-cards-wrapper .list-footer {
background: var(--darkest-grey);
border: 1px solid var(--dark-grey);
}
body.mobile .view-userSettings .mobile-card-actions .fa-gear {
color: var(--pale-green-dark);
}
body.mobile .view-userSettings .mobile-card-actions .fa-trash {
color: var(--error-red-dark);
}
body.mobile.dark-mode .view-userSettings .mobile-card-actions .fa-gear {
color: var(--pale-green);
}
body.mobile.dark-mode .view-userSettings .mobile-card-actions .fa-trash {
color: var(--error-red-light);
}
.mobile .modal-header .modal-title {
font-size: 14px !important;
}
.mobile .modal .compare-count h2 {
font-size: 14px !important;
}
.mobile .modal .sub-text {
font-size: 10px !important;
}
body.mobile .modal .compare-item {
padding: 0 5px !important;
gap: 10px;
}
body.mobile .modal .compare-item .compare-content:first-of-type {
margin-left: 0 !important;
padding-right: 8px !important;
padding-left: 5px !important;
}
body.mobile .modal .compare-item .compare-content:nth-of-type(2) {
margin-right: 0 !important;
padding-left: 8px !important;
padding-right: 5px !important;
}
body.mobile .modal .compare-item .compare-content:last-of-type {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 8px !important;
padding-right: 5px !important;
}
body.mobile .modal .compare-item .compare-content {
padding-top: 15px !important;
min-width: 0 !important;
flex: 1 !important;
}
body.mobile .modal .compare-item .compare-content label {
padding-bottom: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.mobile .modal .compare-item .compare-content div[contenteditable] {
font-size: 13px !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body.mobile .modal-dialog.xl .modal .compare-item {
padding: 0 5px !important;
}
body.mobile .navbar .vue-tooltip {
display: none !important;
}
body.mobile .vue-tooltip {
font-size: 11px;
line-height: 11px;
height: 20px;
padding: 3px 6px;
}
.mobile .step-tools {
margin: 10px 0 0 0;
position: relative !important;
z-index: 3 !important;
}
body.mobile.view-processes .breadcrumbTopContainer {
display: none;
}
body.mobile.view-processes .containerDiv {
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
body.mobile.view-processes .flex {
width: 100%;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
body.mobile .messageColumn {
max-width: 100% !important;
margin-top: 10px;
}
body.mobile .step-circle-indicator {
display: none;
}
body.mobile .flex {
flex-direction: column;
}
body.mobile .runNavigation {
flex-basis: auto;
width: 100%;
margin-bottom: 20px;
}
body.mobile .process-steps-vertical-wrapper {
margin: 10px 0;
}
body.mobile .process-steps-vertical {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 30px;
padding: 40px 10px 10px 10px;
margin-bottom: 10px;
position: relative;
}
body.mobile .step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: auto;
margin: 0 0px;
min-height: 75px;
position: relative;
width: 37px;
}
body.mobile .step-circle {
position: relative;
z-index: 2;
}
body.mobile .step-arrow {
width: 50px;
margin: 0 5px;
align-self: center;
position: absolute;
top: 17px;
right: -27px;
height: 1px;
}
body.mobile .step-arrow::after {
left: 100%;
top: 50%;
bottom: auto;
transform: translateY(-50%);
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent var(--process-arrow-light);
}
body.mobile .step-details {
position: relative;
top: 8px;
margin-top: 0;
left: 50%;
transform: translateX(-50%);
min-width: 0;
max-width: 100px;
text-align: center;
white-space: nowrap;
display: none;
}
body.mobile .step-details.active {
display: block;
}
body.mobile .step-circle-wrapper .rerunBtn {
position: absolute;
left: 40%;
top: -40px;
width: 25px;
min-width: 0;
max-width: 25px;
height: 25px;
transform: translateX(-50%);
z-index: 3;
font-size: 14px;
padding: 2px 0;
box-sizing: border-box;
text-align: center;
line-height: 21px;
}
body.mobile .step-circle.active:before {
left: 50%;
top: 38px;
transform: translateX(-50%);
}
body.mobile .process-steps-vertical-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0;
}
body.mobile .helpColumn-container {
width: 100%;
margin-top: 10px;
}
body.mobile .helpColumn {
width: 100%;
}
body.mobile .helpColumn-stable-wrapper {
width: 100%;
left: 0;
z-index: 10 !important;
}
body.mobile .helpColumn-content {
z-index: 10 !important;
}
body.mobile .helpColumn {
z-index: 10 !important;
}
body.mobile .sub-chat-input-tools {
z-index: 10 !important;
}
body.mobile .sub-chat {
z-index: 10 !important;
}
body.mobile .tiptap-container {
z-index: 10 !important;
}
body.mobile .tiptap-container-right {
z-index: 10 !important;
}
body.mobile .tiptap-container .context-menu {
z-index: 150 !important;
}
body.mobile.dark-mode .step-arrow::after {
border-color: transparent transparent transparent var(--process-arrow-dark);
}
body.mobile .runNavigation.runNavigation-collapsed {
flex-basis: auto;
}
body.mobile .process-steps-vertical.collapsed {
flex-direction: row;
justify-content: center;
}
body.mobile .process-steps-vertical.collapsed .step-circle-wrapper {
margin: 0 2px;
}
body.mobile .process-steps-vertical.collapsed .step-details,
body.mobile .process-steps-vertical.collapsed .step-arrow {
display: none;
}
.view-userSettings.mobile .userSettingsContainer {
padding-bottom: 300px;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn {
padding-top: 80px !important;
position: fixed;
bottom: 70px;
left: 0px;
width: calc(100vw - 0px) !important;
height: fit-content;
z-index: 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 10px;
border-top: 1px solid var(--medium-grey);
border-radius: 0px;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn > div {
flex: 1 1 40% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn > div > .btn {
min-width: unset !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .settings-buttons-user {
flex: 1 1 40% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .settings-buttons-organisation {
flex: 1 1 60% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .active-organisation {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
z-index: 100;
margin-top: 0px !important;
padding: 10px;
display: grid;
grid-template-columns: auto 1fr;
gap: 5px 10px;
align-items: center;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .active-organisation > span {
font-size: 10px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.view-userSettings.mobile .formColumn {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.view-userSettings.mobile .formColumn h3 {
left: 50px;
width: calc(100% - 100px);
text-align: center;
}
.view-userSettings.mobile .formColumn .settings-list > .list-header,
.view-userSettings.mobile .formColumn .settings-list > .list-footer {
padding: 0;
border: none;
background: none;
border-radius: 0;
}
.view-userSettings.mobile .formColumn .settings-list > .list-header {
display: contents;
}
.view-userSettings.mobile .formColumn .settings-list .list-header .list-item-field {
background-color: black;
font-weight: bold;
border-bottom: 1px solid var(--medium-dark-grey);
padding: 8px 10px;
}
.view-userSettings.mobile .formColumn .settings-list .list-item-field {
padding: 8px 10px;
white-space: normal;
word-break: break-all;
border-bottom: 1px solid var(--medium-dark-grey);
background-color: var(--dark-grey);
}
.view-userSettings.mobile .formColumn .settings-list .list-item-field:first-child {
border-right: 1px solid var(--medium-dark-grey);
}
.view-userSettings.mobile .formColumn .settings-list > .list-item:has(+ .list-footer) .list-item-field {
border-bottom: none;
}
.view-userSettings.mobile .formColumn .settings-list > .list-footer {
grid-column: 1 / -1;
display: flex;
padding: 8px 10px;
background-color: black !important;
border-top: 1px solid var(--medium-dark-grey) !important;
}
.view-userSettings.mobile .formColumn .settings-list > .list-footer .btn {
margin: 0;
}
.view-userSettings.mobile .formColumn .legacy-organization-grid {
display: grid;
grid-template-columns: 1fr auto;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
overflow: hidden;
}
body.mobile .view-userSettings [storage-key="user-settings-table"] .data-table,
body.mobile .view-userSettings [storage-key="chrome-extension-table"] .data-table,
body.mobile .view-userSettings [storage-key="organisation-settings-table"] .data-table,
body.mobile .view-userSettings [storage-key="subscription-table"] .data-table {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important;
border-spacing: 0 !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:first-child {
width: 50% !important;
text-align: left !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:first-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:last-child {
width: 50% !important;
text-align: right !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:last-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-container {
display: block !important;
grid-template-columns: none !important;
}
.view-userSettings .formColumn .list-item .list-btn, 
.view-userSettings.mobile .formColumn .list-item .list-btn {
flex: 0 0 auto !important;
width: auto !important;
min-width: 60px;
}
.view-userSettings.mobile .formColumn .organisation-list .list-item-field:last-child {
border-right: none;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-header,
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 0 !important;
overflow: hidden !important;
padding: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
flex-direction: unset !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-header {
background-color: black !important;
font-weight: bold !important;
border-bottom: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px 5px 0 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item {
background-color: var(--dark-grey) !important;
border-top: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item:last-of-type {
border-radius: 0 0 5px 5px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field {
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
text-overflow: unset !important;
overflow: visible !important;
border-bottom: 1px solid var(--medium-dark-grey) !important;
background-color: inherit !important;
flex: none !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
vertical-align: top !important;
border-right: 1px solid var(--medium-dark-grey) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field:first-child {
border-right: 1px solid var(--medium-dark-grey) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field:last-child,
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field.no-border-right {
border-right: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item:last-of-type .list-item-field {
border-bottom: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field div {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field div:last-child {
margin-bottom: 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight {
display: flex !important;
gap: 10px !important;
margin-top: 8px !important;
justify-content: flex-start !important;
align-items: center !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight div {
display: inline-block !important;
margin-bottom: 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight i {
padding: 8px !important;
cursor: pointer !important;
border-radius: 4px !important;
font-size: 14px !important;
transition: background-color 0.2s ease !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight i:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight .fa-gear {
color: var(--pale-green) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight .fa-trash {
color: var(--error-red-light) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a {
color: var(--pale-green) !important;
text-decoration: none !important;
font-size: 14px !important;
display: inline-block !important;
margin-bottom: 8px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a:hover {
text-decoration: underline !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a i {
margin-right: 5px !important;
}
.view-userSettings.mobile .formColumn .legacy-table-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
overflow: hidden;
}
body.mobile .assistant-edit-layout {
flex-direction: column;
gap: 10px !important;
}
body.mobile .assistant-settings-column {
flex: 1 1 auto !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.mobile .assistant-settings-column .active-organisation-role {
word-wrap: break-word !important;
white-space: normal !important;
max-width: 100% !important;
}
body.mobile .assistant-training-column {
flex: 1 1 100% !important;
max-width: 100% !important;
}
body.mobile.view-dashBoard .containerDiv .template-card,
body.mobile .containerDiv.guestView .template-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 0 0 15px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
flex: none; 
margin: 10px 0; 
}
body.mobile.view-dashBoard .containerDiv .template-card:hover,
body.mobile .containerDiv.guestView .template-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card,
body.mobile.dark-mode .containerDiv.guestView .template-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile.view-dashBoard .containerDiv .template-card-body,
body.mobile .containerDiv.guestView .template-card-body {
position: relative;
padding: 0;
align-items: flex-start;
text-align: left;
margin-bottom: -35px;
}
body.mobile.view-dashBoard .containerDiv .template-card-title,
body.mobile .containerDiv.guestView .template-card-title {
font-weight: 600;
font-size: 16px;
color: var(--dark-grey);
line-height: 1.3;
text-align: left;
margin-bottom: 8px;
margin-top: 0;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-title,
body.mobile.dark-mode .containerDiv.guestView .template-card-title {
color: var(--light-grey);
}
body.mobile.view-dashBoard .containerDiv .template-card-text,
body.mobile .containerDiv.guestView .template-card-text {
font-size: 14px;
color: var(--medium-grey);
text-align: left;
line-height: 1.4;
margin-bottom: 8px;
}
body.mobile.view-dashBoard .containerDiv .template-card-btns,
body.mobile .containerDiv.guestView .template-card-btns {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
margin: 0;
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
body.mobile.view-dashBoard .containerDiv .template-card-btns .btn,
body.mobile .containerDiv.guestView .template-card-btns .btn {
font-size: 12px !important;
padding: 6px 12px !important;
margin: 0 !important;
flex: 0 0 auto;
min-width: 60px;
}
body.mobile.view-dashBoard .containerDiv .template-card-tag,
body.mobile .containerDiv.guestView .template-card-tag,
body.mobile.view-dashBoard .containerDiv .template-card-tag[class*="status-"],
body.mobile .containerDiv.guestView .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-tag,
body.mobile.dark-mode .containerDiv.guestView .template-card-tag,
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-tag[class*="status-"],
body.mobile.dark-mode .containerDiv.guestView .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-body {
text-align: center !important;
padding: 20px 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-title,
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-text {
text-align: center !important;
width: 100% !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .stat-number {
font-size: 28px !important;
font-weight: bold !important;
color: var(--pale-green-dark) !important;
margin-bottom: 8px !important;
display: block !important;
text-align: center !important;
width: 100% !important;
line-height: 1.2 !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .stat-card .stat-number {
color: var(--pale-green) !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-btns {
justify-content: center !important;
width: 100% !important;
margin-top: 15px !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-btns .btn {
margin: 0 auto !important;
text-align: center !important;
}
body.mobile.view-dashBoard .containerDiv .activity-card .template-card-tag,
body.mobile.view-dashBoard .containerDiv .activity-card .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .template-card-tag,
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard .containerDiv .activity-card .activity-meta {
font-size: 12px;
color: var(--medium-grey);
margin-top: 5px;
display: block;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .activity-meta {
color: var(--medium-dark-grey);
}
body.mobile.view-dashBoard .containerDiv .flex {
flex-direction: column;
gap: 0;
}
body.mobile.view-dashBoard .containerDiv .stats-section .flex,
body.mobile.view-dashBoard .containerDiv .activity-section .flex {
flex-direction: column;
align-items: stretch;
width: 100%;
}
body.mobile.view-dashBoard .containerDiv .stats-section,
body.mobile.view-dashBoard .containerDiv .activity-section {
margin-bottom: 30px;
}
body.mobile.view-dashBoard .containerDiv .stats-section h3,
body.mobile.view-dashBoard .containerDiv .activity-section h3 {
margin-bottom: 15px;
text-align: center;
font-size: 18px;
}
body.mobile.view-dashBoard .containerDiv .welcome-header {
text-align: center;
margin-bottom: 30px;
}
body.mobile.view-dashBoard .containerDiv .welcome-header h1 {
font-size: 20px;
margin-bottom: 10px;
}
body.mobile.view-dashBoard .containerDiv {
padding-bottom: 100px;
}
body.mobile .subchat-help-column-button {
display: none !important;
}
body.mobile .mark-as-ready-container {
position: relative !important;
z-index: 1 !important;
margin-bottom: 10px !important;
min-height: 40px !important;
}
body.mobile .step-tools {
position: relative !important;
z-index: 3 !important;
margin: 15px 0 10px 0 !important;
bottom: auto !important;
}
body.mobile .step-tools[style*="marginTop: '5px'"] {
margin-top: 20px !important;
clear: both !important;
}
body.mobile .copy-as-wrapper {
bottom: 40px !important;
}
body.mobile .tiptap-container .copy-as-wrapper {
bottom: 42px !important;
}
body.mobile .containerDiv.guestView {
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
body.mobile .containerDiv.guestView .additional-info {
padding-left: 20px;
padding-right: 20px;
margin-top: 50px;
}
body.mobile .containerDiv.guestView .info-section {
text-align: center !important;
margin-bottom: 40px;
}
body.mobile .containerDiv.guestView .info-section h2 {
text-align: center !important;
font-size: 1.2rem;
margin-bottom: 10px;
}
body.mobile .containerDiv.guestView .info-section p {
text-align: center !important;
width: 100% !important;
margin: 0 auto 15px;
line-height: 1.4;
}
body.mobile .containerDiv.guestView .template-card {
text-align: center !important;
margin: 10px auto !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-body {
text-align: center !important;
padding: 10px 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-title,
body.mobile .containerDiv.guestView .template-card .template-card-text {
text-align: center !important;
width: 100% !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-btns {
justify-content: center !important;
width: 100% !important;
margin-top: 15px !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-btns .btn {
margin: 0 auto !important;
text-align: center !important;
}
body.mobile .containerDiv.guestView .feature-card {
text-align: center;
margin: 10px auto;
}
body.mobile .containerDiv.guestView .features {
margin-top: 50px;
}
body.mobile .dashbtns {
position: relative !important;
top: -50px !important;
left: 70px !important;
right: 10px !important;
width: calc(100vw - 80px) !important;
padding: 5px 10px;
margin-bottom: -50px;
justify-content: space-between;
align-items: center;
}
body.mobile .dashLinksLeft {
gap: 15px;
}
body.mobile .dashLinks {
gap: 10px;
}
body.mobile .dashLink {
margin: 0;
text-align: center;
}
body.mobile .template-card {
flex: 0 1 200px;
}
body.mobile .tabs {
justify-content: center;
width: 100%;
}
body.mobile .process-runs-container {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 15px !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
body.mobile .process-runs-container[style] {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container > * {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .process-runs-container .data-table-container {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
display: block !important;
}
body.mobile .process-runs-container .data-table-container[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
padding: 0 0 80px 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
display: block !important;
flex: none !important;
flex-basis: auto !important;
flex-grow: 0 !important;
flex-shrink: 1 !important;
position: relative !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper > *,
body.mobile .process-runs-container .data-table-container > * {
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
width: 100% !important;
}
body.mobile .process-runs-container table,
body.mobile .process-runs-container .data-table,
body.mobile .process-runs-container .data-table-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
table-layout: fixed !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .containerDiv:has(.process-runs-container) {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body.mobile.view-processes .containerDiv {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
z-index: 0;
}
body.mobile .process-runs-container .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: calc(100% - 2px) !important;
max-width: calc(100% - 2px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.mobile .process-runs-container .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .process-runs-container .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile .process-runs-container .mobile-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .process-runs-container .mobile-card-title {
font-weight: 600;
font-size: 13px;
color: var(--pale-green-dark);
line-height: 1.2;
flex: 1;
min-width: 0;
max-width: calc(100% - 60px);
font-family: monospace;
overflow: hidden;
}
body.mobile.dark-mode .process-runs-container .mobile-card-title {
color: var(--pale-green);
}
body.mobile .process-runs-container .mobile-card-title .copy-cell-container {
width: 100%;
max-width: 100%;
justify-content: flex-start;
text-align: left;
overflow: hidden;
}
body.mobile .process-runs-container .mobile-card-title .copy-cell-container a,
body.mobile .process-runs-container .mobile-card-title .copy-cell-container span {
color: var(--pale-green-dark);
font-family: monospace;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
body.mobile.dark-mode .process-runs-container .mobile-card-title .copy-cell-container a,
body.mobile.dark-mode .process-runs-container .mobile-card-title .copy-cell-container span {
color: var(--pale-green);
}
body.mobile .process-runs-container .mobile-card-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
align-items: center;
width: 50px;
justify-content: flex-end;
}
body.mobile .process-runs-container .mobile-card-actions i {
font-size: 14px;
padding: 6px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
color: var(--error-red-dark);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .process-runs-container .mobile-card-actions i:hover {
background-color: var(--light-grey);
}
body.mobile.dark-mode .process-runs-container .mobile-card-actions i {
color: var(--error-red-light);
}
body.mobile.dark-mode .process-runs-container .mobile-card-actions i:hover {
background-color: var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-details {
display: grid !important;
gap: 8px;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .process-runs-container .mobile-card-detail {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 5px 0;
border-bottom: 1px solid var(--lightest-gray);
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
min-height: 24px;
}
body.mobile .process-runs-container .mobile-card-detail:last-child {
border-bottom: none;
}
body.mobile.dark-mode .process-runs-container .mobile-card-detail {
border-bottom: 1px solid var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-label {
font-weight: 500;
color: var(--medium-grey);
font-size: 13px;
line-height: 1.3;
flex: 0 0 35%;
min-width: 0;
max-width: 35%;
word-break: break-word;
overflow-wrap: break-word;
text-align: left !important;
padding-right: 6px;
}
body.mobile.dark-mode .process-runs-container .mobile-card-label {
color: var(--medium-dark-grey);
}
body.mobile .process-runs-container .mobile-card-value {
font-size: 13px;
color: var(--dark-grey);
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 65%;
text-align: right !important;
padding-left: 6px;
}
body.mobile.dark-mode .process-runs-container .mobile-card-value {
color: var(--light-grey);
}
body.mobile .process-runs-container .mobile-cards-wrapper .list-footer {
position: fixed;
bottom: 70px;
margin: 0;
padding: 15px;
background: var(--lightest-gray);
border-top: 1px solid var(--medium-grey);
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 0;
text-align: center;
width: 100vw;
box-sizing: border-box;
z-index: 50;
}
body.mobile.dark-mode .process-runs-container .mobile-cards-wrapper .list-footer {
background: var(--darkest-grey);
border-top: 1px solid var(--dark-grey);
}
body.mobile .process-runs-container .copy-cell-container {
width: 100%;
max-width: 100%;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
overflow: hidden;
}
body.mobile .process-runs-container .copy-cell-container a {
font-family: monospace;
font-size: 11px;
word-break: break-all;
color: var(--pale-green-dark);
text-decoration: underline;
cursor: pointer;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.mobile.dark-mode .process-runs-container .copy-cell-container a {
color: var(--pale-green);
}
body.mobile .process-runs-container .copy-cell-container span {
font-family: monospace;
font-size: 11px;
word-break: break-all;
color: var(--dark-grey);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.mobile.dark-mode .process-runs-container .copy-cell-container span {
color: var(--light-grey);
}
body.mobile .process-runs-container .copy-icon {
font-size: 11px;
cursor: pointer;
color: var(--medium-grey);
flex-shrink: 0;
padding: 3px;
border-radius: 3px;
transition: all 0.2s ease;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .process-runs-container .copy-icon:hover {
color: var(--pale-green-dark);
background-color: var(--lightest-gray);
}
body.mobile.dark-mode .process-runs-container .copy-icon:hover {
color: var(--pale-green);
background-color: var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-detail .copy-cell-container {
justify-content: flex-end;
text-align: right;
}
body.mobile .process-runs-container .mobile-card-value {
font-size: 14px;
color: var(--dark-grey);
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 50%;
text-align: right !important;
}
body.mobile .process-runs-container .mobile-card-detail:has(.mobile-card-label:contains('Status')) .mobile-card-value {
font-weight: 500;
text-transform: capitalize;
}
body.mobile .process-runs-container .mobile-card-detail .mobile-card-value {
font-size: 13px;
line-height: 1.3;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:nth-child(2) .mobile-card-value {
font-weight: 500;
text-transform: capitalize;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:nth-child(n+3) .mobile-card-value {
font-variant-numeric: tabular-nums;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 12px;
line-height: 1.2;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:first-child .mobile-card-value {
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
white-space: normal;
}
body.mobile .process-runs-container .mobile-card * {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
body.mobile .containerDiv.breadcrumbTopContainer {
width: 100vw;
margin: 0;
padding: 10px 20px;
height: auto;
border-bottom: none;
}
body.mobile .containerDiv.breadcrumbTopContainer .breadcrumbTop {
position: relative;
margin: 0;
display: inline-block;
}
body.mobile .alert-area {
position: relative !important;
margin: 10px auto 20px auto !important;
max-width: calc(100vw - 40px) !important;
width: calc(100vw - 40px) !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: 10 !important;
padding: 10px 15px !important;
box-sizing: border-box !important;
overflow: hidden !important;
min-height: auto !important;
max-height: 80px !important;
line-height: 1.4 !important;
display: flex !important;
align-items: center !important;
}
body.mobile.view-processes .alert-area {
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
padding: 10px 15px !important;
max-height: 80px !important;
min-height: auto !important;
display: flex !important;
align-items: center !important;
}
body.mobile.view-dashBoard .alert-area {
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
padding: 10px 15px !important;
max-height: 80px !important;
min-height: auto !important;
display: flex !important;
align-items: center !important;
}
body.mobile .amplify-authenticator__column {
width: 100%;
}
body.mobile .loginPage .auth-wrapper {
height: calc(100vh - 300px) !important;
}
body.mobile [data-amplify-authenticator] {
width: 100% !important;
}
body.mobile [data-amplify-container] {
width: 100% !important;
}
body.mobile .run-name,
body.mobile .run-name-title {
display: none !important;
}
body.mobile .run-stage-toggle {
display: none !important;
}
body.mobile .comment-view ~ * .navbar,
body.mobile .comment-view .navbar,
body.mobile .navbar {
display: none !important;
}
body.mobile .comment-view {
padding: 0;
min-height: 100vh;
}
body.mobile .comment-view .containerDiv {
padding: var(--spacing-md);
max-width: 100%;
}
body.mobile .comment-view .main-content-area {
flex-direction: column;
gap: 0;
}
body.mobile .comment-view .document-content {
max-width: 100%;
margin-bottom: var(--spacing-lg);
}
body.mobile .comment-view .sidebar-wrapper {
display: none;
}
body.mobile .comment-view .comment-instruction-tag {
font-size: 9px;
padding: 3px 6px;
top: var(--spacing-sm);
right: var(--spacing-sm);
}
body.mobile .comment-view .content-display {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
body.mobile .mobile-comment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: flex;
align-items: flex-end;
}
body.mobile .mobile-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
body.mobile .mobile-modal-content {
position: relative;
width: 100%;
background: white;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
max-height: 70vh;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
body.mobile .mobile-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
body.mobile .mobile-modal-header h3 {
margin: 0;
font-size: 1.1em;
color: var(--dark-grey);
}
body.mobile .mobile-close-btn {
background: none;
border: none;
font-size: 1.5em;
color: var(--medium-dark-grey);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .mobile-modal-body {
padding: var(--spacing-lg);
max-height: 50vh;
overflow-y: auto;
}
body.mobile .mobile-paragraph-preview {
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm);
background: var(--pale-green-light);
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--pale-green);
}
body.mobile .mobile-target-text {
font-size: 0.9em;
color: var(--medium-dark-grey);
margin-top: var(--spacing-xs);
line-height: 1.4;
}
body.mobile .mobile-comment-textarea {
width: 100%;
min-height: 120px;
padding: var(--spacing-md);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
font-family: var(--font-family);
font-size: 16px; 
resize: vertical;
}
body.mobile .mobile-modal-actions {
padding: var(--spacing-lg);
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
border-top: 1px solid var(--medium-grey);
flex-wrap: wrap;
}
body.mobile .mobile-modal-actions .btn {
margin: 0;
flex: 0 0 auto;
min-width: 80px;
}
body.mobile.dark-mode .mobile-modal-content {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
body.mobile.dark-mode .mobile-modal-header {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
body.mobile.dark-mode .mobile-modal-header h3 {
color: var(--light-grey);
}
body.mobile.dark-mode .mobile-close-btn {
color: var(--medium-grey);
}
body.mobile.dark-mode .mobile-paragraph-preview {
background: rgba(182, 215, 168, 0.1);
border-color: var(--pale-green-dark);
}
body.mobile.dark-mode .mobile-target-text {
color: var(--medium-grey);
}
body.mobile.dark-mode .mobile-comment-textarea {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
body.mobile.dark-mode .mobile-modal-actions {
border-color: var(--medium-dark-grey);
} 
.btn {
color: var(--dark-grey);
margin: 5px;
border-radius: 5px;
font-size: 12px;
padding: 5px 10px;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
text-align: center;
color: black;
}
.btn.active {
background-color: var(--button-green) !important;
}
.dark-mode .btn.active {
background-color: var(--pale-green) !important;
}
.dark-mode .btn {
color: black;
}
.btn-primary {
background-color: var(--info-blue) !important;
color: var(--light-grey) !important;
}
.light-mode .btn-primary {
background-color: var(--info-blue) !important;
color: white !important;
}
.btn-default {
background-color: var(--light-grey) !important;
color: var(--dark-grey) !important;
}
.btn-danger {
color: var(--light-grey) !important;
background-color: var(--error-red-dark) !important;
}
.btn-success {
color: var(--light-grey) !important;
background-color: var(--button-green) !important;
}
.btn-violet {
color: white !important;
background-color: var(--button-violet) !important;
}
.btn-danger:hover {
background-color: var(--error-red-darker) !important;
}
.btn-success:hover {
background-color: var(--button-green-hover) !important;
}
.btn-primary:hover {
background-color: var(--info-blue-hover) !important;
}
.btn-violet:hover {
color: white !important;
background-color: var(--button-violet-hover) !important;
}
.btn-violet:focus {
background-color: var(--button-violet-hover) !important;
}
.btn-counter {
width: 100%;
padding: 1rem 1.5rem;
border-radius: 12px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.5rem 0 !important;
background: #fff;
border: 1px solid var(--medium-grey);
transition: all 0.2s ease-in-out;
}
.btn-counter:hover {
background-color: var(--lightest-grey);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark-mode .btn-counter {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .btn-counter:hover {
background: var(--semi-dark-grey);
}
.btn-counter-pricing {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5rem;
border-radius: 8px;
background: #fff;
border: 1px solid var(--medium-grey);
transition: all 0.2s ease-in-out;
}
.dark-mode .btn-counter-pricing {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .btn {
width: 32px;
height: 32px;
padding: 0;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 500;
color: var(--dark-grey) !important;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.dark-mode .btn-counter-pricing .btn {
color: var(--light-grey) !important;
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .btn:hover {
background: var(--medium-light-grey);
transform: translateY(-1px);
}
.dark-mode .btn-counter-pricing .btn:hover {
background: var(--semi-dark-grey);
}
.btn-counter-pricing .pricing-count {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.1rem;
color: #333;
}
.dark-mode .btn-counter-pricing .pricing-count {
color: var(--light-grey);
}
.btn-counter-pricing .count-label {
font-weight: 500;
}
.btn-counter-pricing .plan-input {
width: 70px;
text-align: right;
font-size: 1.1rem;
margin: 0 0.5em;
border-radius: 6px;
border: 1px solid #ccc;
padding: 0.2em 0.5em;
}
.dark-mode .btn-counter-pricing .plan-input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .count-value {
font-weight: 700;
color: var(--button-green);
min-width: 32px;
text-align: left;
}
.dark-mode .btn-counter-pricing .count-value {
color: var(--pale-green);
}
.smallBtn {
padding: 0px 5px !important;
font-size: 12px !important;
}
.addBtn {
background: linear-gradient(to right, var(--button-green), var(--button-green-hover));
color: white;
border: 1px solid var(--pale-green-dark);
font-size: 20px;
line-height: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
.addBtn i {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.addBtn:hover {
transform: scale(1.05);
transition: transform 0.1s ease-in-out;
background: linear-gradient(to right, var(--button-green), var(--pale-green-dark));
}
.addBtn.fixed {
position: fixed;
top: 40px;
left: 0px;
}
.gray-small-btn {
background-color: #f4f4f4;
color: #333;
padding: 2px 7px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ddd;
position: absolute;
right: 0px;
top: 0px;
}
.btn-group {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.dark-mode .btn-group {
color: var(--light-grey);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
} 
.btn:disabled {
cursor: not-allowed !important;
opacity: 0.8 !important;
}
.form-group {
margin-bottom: 1rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dark-grey);
font-size: 14px;
}
.dark-mode .form-group label {
color: var(--pale-green);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
background-color: var(--lightest-grey);
color: var(--dark-grey);
transition: var(--transition-normal);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
border-color: var(--medium-dark-grey);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--pale-green);
box-shadow: 0 0 0 2px var(--pale-green-light);
}
.form-group.checkbox {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
.form-group.checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: var(--pale-green);
}
.form-group.checkbox label {
margin: 0 !important;
font-size: 14px;
cursor: pointer;
flex: 1;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
}
.dark-mode input:not(.amplify-input, .color-picker) {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode textarea {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode input::placeholder {
color: var(--medium-grey);
}
.dark-mode select {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode select option {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.secret-input-group .secret-input-wrapper {
display: flex;
align-items: center;
}
.secret-input-group .secret-eye-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
height: 38px;
width: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0;
margin-left: 0;
background: #222;
}
.secret-input-group .secret-eye-btn i {
color: #fff;
}
.secret-input-group .secret-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
flex: 1 1 auto;
width: 100%;
}
select.locked {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
select.locked option {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.form-group .lock-icon {
position: absolute;
right: 20px;
top: 35px;
cursor: pointer;
z-index: 1;
}
select.locked:disabled {
background-color: var(--medium-grey);
color: var(--dark-grey);
border: 1px solid var(--medium-grey) !important;
}
select.locked:disabled option {
background-color: var(--medium-grey);
color: var(--dark-grey);
}
.dark-mode select.locked:disabled {
background-color: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode select.locked:disabled option {
background-color: var(--dark-grey);
color: var(--light-grey);
} 
.input-tools {
border-top: 1px solid var(--medium-grey);
gap: 5px !important;
padding-top: 10px;
margin-top: 10px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.input-tools-header {
margin-left: 10px;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.dark-mode .input-tools {
border-top: 1px solid var(--pale-green);
}
.input-tools-prompt {
display: block;
}
.input-tools-prompt-item {
padding: 0px;
height: auto;
}
.input-tools-prompt-item textarea {
background-color: white;
color: black;
min-height: 150px;
width: 100%;
font-size: 14px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
box-sizing: border-box;
height: fit-content;
resize: none;
}
.dark-mode .input-tools-prompt-item textarea {
background-color: black;
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey) !important;
}
.input-tools-prompt-btns {
margin-top: 30px;
}
.input-tools-wrapper .template-card {
flex: 0 1 350px;
}
.input-tools-wrapper .template-card-body {
padding-top: 20px;
}
.input-tools-prompt-item textarea:focus,
.input-tools-prompt-item textarea:active {
outline: none !important;
box-shadow: none !important;
}
.input-tools-item {
flex: 1 1 calc(33.333% - 5px);
min-width: 280px;
border: 1px solid var(--medium-grey);
padding: 5px 10px 5px 10px;
border-radius: 5px;
}
.dark-mode .input-tools-item {
border: 1px solid var(--medium-dark-grey);
}
.input-tools-item label {
margin-top: 0px !important;
}
.input-tools-item-files {
padding-bottom: 10px;
border-bottom: 1px solid var(--medium-grey);
}
.input-tools-item-upload {
padding-top: 10px;
}
.website-url-input-wrapper {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.website-url-input-wrapper .form-control {
flex: 1;
}
.website-url-input-wrapper .btn {
white-space: nowrap;
min-width: 40px;
}
@media (max-width: 768px) {
.input-tools-item {
flex: 1 1 100%;
min-width: auto;
margin-bottom: 10px;
}
.website-url-input-wrapper {
flex-direction: column;
gap: 0.5rem;
}
.website-url-input-wrapper .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.input-tools-item {
flex: 1 1 calc(50% - 5px);
min-width: 240px;
}
}
.uploadedFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.uploadedFiles:first-of-type {
margin-top: 10px;
}
.uploadedFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .uploadedFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .uploadedFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.uploadedFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uploadedFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.uploadedFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.uploadedFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .uploadedFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .uploadedFiles .remove-file-btn:hover {
background: var(--error-red);
}
.auto-grow-wrapper {
width: 100%;
padding: 0;
box-sizing: border-box;
border: none;
border-radius: 0;
background: none;
}
.auto-grow-textarea {
width: 100%;
min-height: 150px;
background-color: var(--lightest-grey);
color: var(--light-grey);
font-size: 14px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
box-sizing: border-box;
height: fit-content;
resize: none;
padding: 20px;
outline: none;
transition: border-color 0.2s;
overflow: hidden;
margin-bottom: 10px;
}
.no-margin-top .auto-grow-textarea {
margin-top: 0px !important;
}
.auto-grow-textarea:focus,
.auto-grow-textarea:active {
outline: none !important;
box-shadow: none !important;
}
.dark-mode .auto-grow-textarea {
background-color: black;
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.assistant-selector {
position: sticky;
top: 0;
z-index: 200;
background-color: rgba(255, 255, 255, 0.5);
padding: 30px 0 10px;
margin-top: 0px;
height: 67px;
}
.assistant-selector-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.assistant-selector .btns {
z-index: 3;
margin-top: 35px;
}
.assistant-btns-container {
position: relative;
overflow: hidden;
max-height: 40px; 
transition: max-height 0.3s ease, padding 0.3s ease;
}
.assistant-btns-container.expanded {
max-height: 200px; 
overflow: visible;
padding: 10px; 
background: var(--input-background);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 200; 
position: absolute; 
}
.assistant-btns-container.has-hidden {
cursor: pointer;
}
.assistant-btn.hidden-assistant {
display: none;
}
.assistant-btns-container.expanded .assistant-btn.hidden-assistant {
display: inline-block;
}
.hidden-assistants-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--medium-grey);
color: var(--text-color);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
margin-left: 8px;
transition: background-color 0.2s ease;
vertical-align: top;
}
.hidden-assistants-indicator:hover {
background: var(--dark-grey);
}
.hidden-assistants-indicator .fa-ellipsis-h {
font-size: 10px;
}
.hidden-count {
font-weight: 600;
font-size: 11px;
}
.light-mode .assistant-btns-container.expanded {
background: var(--input-background);
border-color: var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark-mode .assistant-btns-container.expanded {
background: var(--input-background);
border-color: var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark-mode .hidden-assistants-indicator {
background: var(--medium-dark-grey);
color: var(--light-text-color);
}
.dark-mode .hidden-assistants-indicator:hover {
background: var(--dark-grey);
}
@media (max-width: 768px) {
.assistant-btns-container.expanded {
max-height: 160px; 
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.hidden-assistants-indicator {
padding: 4px 8px;
font-size: 11px;
}
.hidden-count {
font-size: 10px;
}
}
@media (hover: none) and (pointer: coarse) {
.assistant-btns-container:hover {
max-height: 40px; 
}
}
.assistant-btns-container.read-only {
opacity: 0.7;
cursor: default;
}
.assistant-btns-container.read-only .btn {
cursor: default;
opacity: 0.6;
}
.readonly-indicator {
background-color: var(--medium-grey) !important;
color: var(--light-grey) !important;
cursor: default !important;
}
.readonly-indicator:hover {
background-color: var(--medium-grey) !important;
}
.dark-mode .readonly-indicator {
background-color: var(--medium-dark-grey) !important;
color: var(--light-text-color) !important;
}
.dark-mode .readonly-indicator:hover {
background-color: var(--medium-dark-grey) !important;
}
.previous-step-subchats-available {
text-align: center;
padding: 20px;
background: var(--light-background);
border-radius: 8px;
margin: 20px;
border: 1px solid var(--border-color);
}
.previous-step-subchats-available p {
margin-bottom: 15px;
color: var(--text-color);
font-size: 14px;
}
.previous-step-subchats-available .btn {
min-width: 200px;
}
.dark-mode .previous-step-subchats-available {
background: var(--dark-background);
border-color: var(--dark-border-color);
}
.dark-mode .previous-step-subchats-available p {
color: var(--light-text-color);
}
.dark-mode .assistant-selector {
background-color: rgba(0, 0, 0, 0.5);
}
.assistant-selector .template-card-tag {
top: 10px !important;
color: var(--light-grey)!important;
background-color: var(--dark-grey)!important;
border: 1px solid var(--dark-grey)!important;
}
.assistant-selector:after {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(5px);
z-index: -1;
}
.sub-chat-input-tools {
position: sticky;
bottom: 0;
z-index: 2;
padding: 10px 0 10px;
margin-top: 0px;
height: 67px;
height: fit-content;
box-sizing: border-box;
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
}
.sub-chat-input-tools:empty {
display: none;
}
.sub-chat-input-tools:after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
z-index: -1;
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dark-mode .sub-chat-input-tools:after {
background-color: rgba(0, 0, 0, 0.5);
}
.character-counter, .sub-chat-input-buttons, .sub-chat-input-buttons-special {
padding-left: 20px;
font-size: 10px;
}
.character-counter.main-chat {
padding-left: 0px;
margin-bottom: 50px;
top: -10px;
}
.character-counter.main-chat div {
display: inline-block;
}
.sub-chat-input-buttons-special {
display: flex;
gap: 5px;
align-items: center;
}
.sub-chat-input-buttons {
padding-left: 20px;
font-size: 10px;
display: flex;
gap: 0px;
}
.sub-chat-input-buttons .btn {
display: flex;
align-items: center;
gap: 5px;
}
.check-all {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
z-index: 10;
padding: 4px 0 4px 0;
width: 50%;
}
.check-all input {
top: 30px;
right: 14px;
}
.message-checkbox label,
.check-all label {
margin-left: 4px;
margin-bottom: 0;
font-size: 13px;
font-weight: 400;
cursor: pointer;
}
.prompt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.prompt-tools {
display: flex;
gap: 5px;
align-items: center;
height: 10px;
}
.prompt-tools-inner {
position: absolute;
top: 0px;
left: 15px;
z-index: 1;
width: 400px;
}
.suggest-btn, .restore-btn {
font-size: 11px;
padding: 4px 8px;
border-radius: var(--border-radius-sm);
white-space: nowrap;
}
.suggest-btn i, .restore-btn i {
margin-right: 4px;
}
.suggestion-counter {
margin-left: 4px;
font-size: 10px;
opacity: 0.8;
font-weight: normal;
}
@media (max-width: 768px) {
.prompt-header {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.prompt-tools {
align-self: flex-end;
}
}
.subchat-tools {
display: flex;
gap: 5px;
align-items: center;
height: 10px;
margin-bottom: 10px;
}
.subchat-tools-inner {
position: absolute;
top: 0px;
left: 15px;
z-index: 2;
width: 400px;
} 
.list-header {
display: flex;
background-color: var(--light-grey);
font-weight: bold;
padding: 10px 150px 10px 0;
border-radius: 5px 5px 0 0;
border: 1px solid var(--medium-grey);
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .list-header {
background-color: black;
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.list-footer {
padding: 10px;
text-align: right;
background: var(--light-grey);
border-radius: 0px 0px 5px 5px;
border: 1px solid var(--medium-grey);
}
.list-footer .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.list-footer .btn i {
font-size: 0.9em;
}
.list-item {
display: flex;
padding: 8px 150px 8px 0;
border: 1px solid var(--medium-grey);
cursor: default;
border-radius: 0px;
border-top: none !important;
position: relative;
}
.dark-mode .list-item {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.list-item.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.dark-mode .list-item.active {
background-color: var(--pale-green-dark) !important;
color: var(--light-grey) !important;
}
.list-item-field {
flex: 1 1 100px;
padding: 0 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid var(--medium-grey);
white-space: nowrap;
}
.dark-mode .list-item-field {
border-right: 1px solid var(--medium-dark-grey);
}
.list-item-field.no-border-right {
border-right: none !important;
}
.list-btn {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
display: flex;
align-items: center;
padding: 0 10px;
}
.list-btn i {
cursor: pointer;
margin-left: 5px;
color: var(--dark-grey);
}
.dark-mode .list-btn i {
color: var(--light-grey);
}
.list-btn:empty {
display: none;
}
.list-group-item {
list-style: none !important;
}
.list-group-item:first-of-type {
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
.list-group-item:last-of-type {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
.list-item:nth-child(even) {
background-color: #f9f9f9;
}
.list-item:nth-child(odd) {
background-color: #fff;
}
.dark-mode .list-item:nth-child(even),
.dark-mode .list-item:nth-child(odd) {
background-color: var(--dark-grey);
}
.drag .handle, .handle_ {
float: left;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
cursor: move;
}
.drag .close {
position: absolute;
top: 8px;
right: 8px;
}
.drag .text {
margin-left: 20px;
}
.drag .list-group {
margin-bottom: 0px !important;
}
.drag .list-group-item {
display: flex !important;
align-items: center !important;
cursor: pointer;
min-height: 40px;
}
.list-group-item button.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.drag .rerunBtn {
position: absolute;
right: 0;
top: 0;
display: none;
}
.drag .list-group-item:hover .rerunBtn {
display: block;
}
.drag .list-group-item.currentstep:after {
content: '';
position: absolute;
top: 16px;
left: 15px;
width: 10px;
height: 10px;
background-color: lightgreen;
border-radius: 50%;
}
.drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--dark-grey);
cursor: default;
}
.light-mode .drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--pale-green);
}
.light-mode .drag .list-group-item {
background-color: var(--light-grey) !important;
border: 1px solid var(--medium-grey) !important;
}
.dark-mode .drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--pale-green);
}
.dark-mode .drag .list-group-item {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.dark-mode .list-group-item  {
background-color: var(--darkest-grey) !important;
color: var(--light-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.list-group-item .btn:not(.removeImgBtn,.noMrginLeft) {
margin-left: 30px !important;
}
.dark-mode .list-group-item .btn:not(.removeImgBtn, .active) {
color: var(--light-grey) !important;
background-color: black !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.dark-mode .list-group-item .btn:not(.removeImgBtn,.active):hover {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.process-steps-list .list-group-item.notStarted {
opacity: 0.7;
cursor: not-allowed;
}
.data-table-container {
width: 100%;
overflow-x: auto;
}
.data-table-wrapper {
border-radius: 5px;
overflow: hidden; 
border: 1px solid var(--medium-grey); 
}
.dark-mode .data-table-wrapper {
border: 1px solid var(--medium-dark-grey);
}
.data-table {
width: 100%;
table-layout: fixed;
overflow: hidden;    
}
.data-table th,
.data-table td {
padding: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid var(--medium-grey);
border-right: 1px solid var(--medium-grey);
width: var(--column-width);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table th:last-child,
.data-table td:last-child {
border-right: none;
}
.data-table th {
font-weight: bold;
background-color: var(--light-grey);
}
.dark-mode .data-table th,
.dark-mode .data-table td {
border-color: var(--medium-dark-grey);
}
.dark-mode .data-table th {
background-color: var(--background-color);
}
.dark-mode .data-table td {
background-color: var(--dark-grey);
}
.resize-handle {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 2;
background: transparent;
transition: background-color 0.2s;
}
.resize-handle:hover {
background: var(--medium-grey);
}
.text-center {
text-align: center;
}
.copy-cell-container {
position: relative;
padding-right: 25px; 
}
.copy-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: var(--dark-grey);
}
.dark-mode .copy-icon {
color: var(--light-grey);
}
.data-table-wrapper .list-footer {
padding: 10px;
text-align: right;
background: var(--light-grey);
border-top: 1px solid var(--medium-grey);
border-right: none;
border-bottom: none;
border-left: none;
}
.dark-mode .data-table-wrapper .list-footer {
border-top: 1px solid var(--medium-dark-grey);
background-color: black;
}
.data-table-wrapper .list-footer .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.data-table-wrapper .list-footer .btn i {
font-size: 0.9em;
}
.draggable-list-container {
padding: 20px;
}
.draggable-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.draggable-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
border-radius: 4px;
cursor: move;
}
.draggable-item:hover {
background: var(--medium-grey);
color: white;
}
.drag-handle {
cursor: move;
color: var(--medium-dark-grey);
}
.draggable-item:hover .drag-handle {
color: white;
}
.item-name {
font-weight: 500;
flex: 1;
}
.item-label {
color: var(--medium-dark-grey);
}
.draggable-item:hover .item-label {
color: white;
}
.message-box {
border: 1px solid #ddd;
padding: 10px 15px 0px;
border-radius: 5px;
background-color: #f9f9f9;
margin-bottom: 10px;
position: relative;
}
.message-box.expanded, .message-box.bottomPadding {
padding-bottom: 25px;
}
.dark-mode .message-box {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
color: var(--light-grey) !important;
}
.message-content-text {
margin-top: 10px;
max-height: 200px;
overflow: hidden;
transition: max-height 0.3s ease;
line-height: 1.6;
}
.message-content-text.expanded, .message-content-text.bottomPadding {
padding-bottom: 25px;
}
.message-content-text * {
text-wrap: auto;
}
.message-content-text.expanded {
max-height: none;
}
.message-content-text img {
max-width: 100%;
height: auto;
}
.message-content-text td,
.message-content-text th {
vertical-align: top;
padding: 3px 5px;
}
.light-mode .message-content-text pre {
border: 1px solid var(--light-grey);
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
.dark-mode .message-content-text pre {
border: 1px solid var(--medium-dark-grey);
background-color: rgb(25, 25, 25);
color: rgb(226, 226, 226);
}
.message-toggle-btn {
cursor: pointer;
position: absolute;
bottom: 0px;
left: 0;
height: 40px;
width: 100%;
display: flex;
justify-content: flex-start;
padding-left: 15px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.527), transparent);
align-content: flex-end;
flex-wrap: wrap;
}
.message-toggle-btn > button {
cursor: pointer;
}
.dark-mode .message-toggle-btn {
background: linear-gradient(to top, rgba(0, 0, 0, 0.527), transparent);
}
.message-toggle-btn .gray-small-btn {
position: relative;
background-color: var(--pale-green);
border-radius: 5px 5px 0 0;
box-shadow: 0 0 10px 0 #00000016;
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.message-toggle-btn .gray-small-btn i {
font-size: 12px;
}
.message-box.user-message-collapsed {
height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
opacity: 0;
overflow: hidden;
border: 0 !important;
transition: height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, margin-bottom 0.3s, padding 0.3s, border 0.3s;
}
.message-box.user {
border-radius: 5px 5px 0 0;
margin-bottom: 0;
}
.message-box.assistant {
border-radius: 0 0 5px 5px;
margin-bottom: 10px;
}
.message-box.user.paired {
border-bottom: none;
}
.message-box.assistant.paired {
border-top: none !important;
}
.message-box.user:not(.paired), .message-box.assistant:not(.paired) {
border-radius: 5px;
margin-bottom: 10px;
}
.dark-mode .message-box.user {
background-color: #111 !important;
color: var(--light-grey) !important;
}
.message-checkbox {
position: absolute;
top: 8px;
right: 12px;
z-index: 1;
}
.version-navigation {
position: absolute;
top: 4px;
right: 4px;
padding: 4px 4px;
background-color: var(--lightest-grey);
border-radius: 3px;
border: 1px solid var(--medium-grey);
z-index: 2;
max-width: fit-content;
white-space: nowrap;
}
.dark-mode .version-navigation {
background-color: var(--darkest-grey);
border-color: var(--medium-dark-grey);
}
.json-version-navigation {
position: absolute;
top: -50px;
right: 10px; 
z-index: 1000;
}
.version-controls {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.version-arrow-btn {
background: none;
border: 1px solid var(--medium-grey);
border-radius: 2px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
color: var(--dark-grey);
transition: all 0.2s ease;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.version-arrow-btn:hover:not(:disabled) {
background-color: var(--light-grey);
border-color: var(--dark-grey);
}
.version-arrow-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dark-mode .version-arrow-btn {
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .version-arrow-btn:hover:not(:disabled) {
background-color: var(--semi-dark-grey);
border-color: var(--light-grey);
}
.version-remove-btn {
background: none;
border: 1px solid var(--medium-grey);
border-radius: 2px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
color: var(--error-red);
transition: all 0.2s ease;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.version-remove-btn:hover {
background-color: var(--error-red);
color: white;
border-color: var(--error-red);
}
.dark-mode .version-remove-btn {
border-color: var(--medium-dark-grey);
color: var(--error-red-light);
}
.dark-mode .version-remove-btn:hover {
background-color: var(--error-red-dark);
color: white;
border-color: var(--error-red-dark);
}
.version-info {
flex: 1;
text-align: center;
color: var(--dark-grey);
font-weight: 500;
font-size: 12px;
white-space: nowrap;
}
.dark-mode .version-info {
color: var(--light-grey);
}
.current-version-badge {
color: var(--success-color);
font-weight: 600;
font-size: 11px;
}
.save-as-current-btn {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 3px;
padding: 4px 8px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 3px;
height: 24px;
}
.save-as-current-btn:hover {
background-color: var(--primary-color-dark);
}
.save-as-current-btn i {
font-size: 10px;
}
body #app_  .tiptap-container .editor-container p,
body #app_  .tiptap-container .editor-container h1,
body #app_  .tiptap-container .editor-container h2,
body #app_  .tiptap-container .editor-container h3,
body #app_  .tiptap-container .editor-container h4,
body #app_  .tiptap-container .editor-container h5,
body #app_  .tiptap-container .editor-container h6,
body #app_  .tiptap-container .editor-container ul,
body #app_  .tiptap-container .editor-container ol,
body #app_  .tiptap-container .editor-container li,
body #app_ .modal .compare-content p,
body #app_ .modal .compare-content h1,
body #app_ .modal .compare-content h2,
body #app_ .modal .compare-content h3,
body #app_ .modal .compare-content h4,
body #app_ .modal .compare-content h5,
body #app_ .modal .compare-content h6,
body #app_ .modal .compare-content ul,
body #app_ .modal .compare-content ol,
body #app_ .modal .compare-content li,
body #app_ .modal .compare-content .grabText p,
body #app_ .modal .compare-content .grabText h1,
body #app_ .modal .compare-content .grabText h2,
body #app_ .modal .compare-content .grabText h3,
body #app_ .modal .compare-content .grabText h4,
body #app_ .modal .compare-content .grabText h5,
body #app_ .modal .compare-content .grabText h6,
body #app_ .modal .compare-content .grabText ul,
body #app_ .modal .compare-content .grabText ol,
body #app_ .modal .compare-content .grabText li,
body #app_ .process-run-webpage p,
body #app_ .process-run-webpage h1,
body #app_ .process-run-webpage h2,
body #app_ .process-run-webpage h3,
body #app_ .process-run-webpage h4,
body #app_ .process-run-webpage h5,
body #app_ .process-run-webpage h6,
body #app_ .process-run-webpage ul,
body #app_ .process-run-webpage ol,
body #app_ .process-run-webpage li,
body #app_ .content-styles p,
body #app_ .content-styles h1,
body #app_ .content-styles h2,
body #app_ .content-styles h3,
body #app_ .content-styles h4,
body #app_ .content-styles h5,
body #app_ .content-styles h6,
body #app_ .content-styles ul,
body #app_ .content-styles ol,
body #app_ .content-styles li,
body #app_ .content-display p,
body #app_ .content-display h1,
body #app_ .content-display h2,
body #app_ .content-display h3,
body #app_ .content-display h4,
body #app_ .content-display h5,
body #app_ .content-display h6,
body #app_ .content-display ul,
body #app_ .content-display ol,
body #app_ .content-display li {
margin: 0;
margin-bottom: 10px;
color: var(--dark-grey);
background: unset;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: unset;
}
body.dark-mode #app_  .tiptap-container .editor-container p,
body.dark-mode #app_ .tiptap-container .editor-container h1,
body.dark-mode #app_ .tiptap-container .editor-container h2,
body.dark-mode #app_ .tiptap-container .editor-container h3,
body.dark-mode #app_ .tiptap-container .editor-container h4,
body.dark-mode #app_ .tiptap-container .editor-container h5,
body.dark-mode #app_ .tiptap-container .editor-container h6,
body.dark-mode #app_ .tiptap-container .editor-container ul,
body.dark-mode #app_ .tiptap-container .editor-container ol,
body.dark-mode #app_ .tiptap-container .editor-container li,
body.dark-mode #app_ .modal .compare-content p,
body.dark-mode #app_ .modal .compare-content h1,
body.dark-mode #app_ .modal .compare-content h2,
body.dark-mode #app_ .modal .compare-content h3,
body.dark-mode #app_ .modal .compare-content h4,
body.dark-mode #app_ .modal .compare-content h5,
body.dark-mode #app_ .modal .compare-content h6,
body.dark-mode #app_ .modal .compare-content ul,
body.dark-mode #app_ .modal .compare-content ol,
body.dark-mode #app_ .modal .compare-content li,
body.dark-mode #app_ .modal .compare-content .grabText p,
body.dark-mode #app_ .modal .compare-content .grabText h1,
body.dark-mode #app_ .modal .compare-content .grabText h2,
body.dark-mode #app_ .modal .compare-content .grabText h3,
body.dark-mode #app_ .modal .compare-content .grabText h4,
body.dark-mode #app_ .modal .compare-content .grabText h5,
body.dark-mode #app_ .modal .compare-content .grabText h6,
body.dark-mode #app_ .modal .compare-content .grabText ul,
body.dark-mode #app_ .modal .compare-content .grabText ol,
body.dark-mode #app_ .modal .compare-content .grabText li,
body.dark-mode #app_ .process-run-webpage p,
body.dark-mode #app_ .process-run-webpage h1,
body.dark-mode #app_ .process-run-webpage h2,
body.dark-mode #app_ .process-run-webpage h3,
body.dark-mode #app_ .process-run-webpage h4,
body.dark-mode #app_ .process-run-webpage h5,
body.dark-mode #app_ .process-run-webpage h6,
body.dark-mode #app_ .process-run-webpage ul,
body.dark-mode #app_ .process-run-webpage ol,
body.dark-mode #app_ .process-run-webpage li,
body.dark-mode #app_ .content-styles p,
body.dark-mode #app_ .content-styles h1,
body.dark-mode #app_ .content-styles h2,
body.dark-mode #app_ .content-styles h3,
body.dark-mode #app_ .content-styles h4,
body.dark-mode #app_ .content-styles h5,
body.dark-mode #app_ .content-styles h6,
body.dark-mode #app_ .content-styles ul,
body.dark-mode #app_ .content-styles ol,
body.dark-mode #app_ .content-styles li,
body.dark-mode #app_ .content-display p,
body.dark-mode #app_ .content-display h1,
body.dark-mode #app_ .content-display h2,
body.dark-mode #app_ .content-display h3,
body.dark-mode #app_ .content-display h4,
body.dark-mode #app_ .content-display h5,
body.dark-mode #app_ .content-display h6,
body.dark-mode #app_ .content-display ul,
body.dark-mode #app_ .content-display ol,
body.dark-mode #app_ .content-display li {
color: var(--light-grey);
}
body #app_  .tiptap-container .editor-container ul li::marker,
body #app_  .tiptap-container .editor-container ol li::marker,
.modal .compare-content ul li::marker,
.modal .compare-content ol li::marker,
.modal .compare-content .grabText ul li::marker,
.modal .compare-content .grabText ol li::marker,
body #app_ .process-run-webpage ul li::marker,
body #app_ .process-run-webpage ol li::marker,
body #app_ .content-styles ul li::marker,
body #app_ .content-styles ol li::marker,
body #app_ .content-display ul li::marker,
body #app_ .content-display ol li::marker {
color: var(--dark-grey);
}
body.dark-mode #app_  .tiptap-container .editor-container ul li::marker,
body.dark-mode #app_  .tiptap-container .editor-container ol li::marker,
.dark-mode .modal .compare-content ul li::marker,
.dark-mode .modal .compare-content ol li::marker,
.dark-mode .modal .compare-content .grabText ul li::marker,
.dark-mode .modal .compare-content .grabText ol li::marker,
body.dark-mode #app_ .process-run-webpage ul li::marker,
body.dark-mode #app_ .process-run-webpage ol li::marker,
body.dark-mode #app_ .content-styles ul li::marker,
body.dark-mode #app_ .content-styles ol li::marker,
body.dark-mode #app_ .content-display ul li::marker,
body.dark-mode #app_ .content-display ol li::marker {
color: var(--light-grey);
}
body #app_  .tiptap-container .editor-container hr,
.modal .compare-content hr,
.modal .compare-content .grabText hr,
body #app_ .process-run-webpage hr,
body #app_ .content-styles hr,
body #app_ .content-display hr {
border: none;
border-top: 1px solid var(--dark-grey);
}
body.dark-mode #app_  .tiptap-container .editor-container hr,
.dark-mode .modal .compare-content hr,
.dark-mode .modal .compare-content .grabText hr,
body.dark-mode #app_ .process-run-webpage hr,
body.dark-mode #app_ .content-styles hr,
body.dark-mode #app_ .content-display hr {
border-top: 1px solid var(--medium-dark-grey);
}
body #app_  .tiptap-container .editor-container table,
body #app_  .tiptap-container .editor-container table th,
body #app_  .tiptap-container .editor-container table td,
.modal .compare-content .table-content table,
.modal .compare-content .table-content table th,
.modal .compare-content .table-content table td,
.modal .compare-content .grabText .table-content table,
.modal .compare-content .grabText .table-content table th,
.modal .compare-content .grabText .table-content table td,
body #app_ .process-run-webpage table,
body #app_ .process-run-webpage table th,
body #app_ .process-run-webpage table td,
body #app_ .content-styles table,
body #app_ .content-styles table th,
body #app_ .content-styles table td,
body #app_ .content-display table,
body #app_ .content-display table th,
body #app_ .content-display table td {
border: 1px solid var(--medium-grey);
}
body #app_ .process-run-webpage table {
display: table !important;
width: 100% !important;
border-collapse: collapse !important;
margin: 1rem 0 !important;
}
body #app_ .process-run-webpage table th,
body #app_ .process-run-webpage table td {
display: table-cell !important;
padding: 8px 12px !important;
vertical-align: top !important;
}
body.dark-mode #app_  .tiptap-container .editor-container table,
body.dark-mode #app_  .tiptap-container .editor-container table th,
body.dark-mode #app_  .tiptap-container .editor-container table td,
.dark-mode .modal .compare-content .table-content table,
.dark-mode .modal .compare-content .table-content table th,
.dark-mode .modal .compare-content .table-content table td,
.dark-mode .modal .compare-content .grabText .table-content table,
.dark-mode .modal .compare-content .grabText .table-content table th,
.dark-mode .modal .compare-content .grabText .table-content table td,
body.dark-mode #app_ .process-run-webpage table,
body.dark-mode #app_ .process-run-webpage table th,
body.dark-mode #app_ .process-run-webpage table td,
body.dark-mode #app_ .content-styles table,
body.dark-mode #app_ .content-styles table th,
body.dark-mode #app_ .content-styles table td,
body.dark-mode #app_ .content-display table,
body.dark-mode #app_ .content-display table th,
body.dark-mode #app_ .content-display table td {
border: 1px solid var(--medium-dark-grey);
}
.ProseMirror {
min-height: 150px;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.ProseMirror:focus-visible {
outline: none;
}
.ProseMirror ul,
.ProseMirror ol,
.modal .compare-content ul,
.modal .compare-content ol,
.modal .compare-content .grabText ul,
.modal .compare-content .grabText ol,
.process-run-webpage ul,
.process-run-webpage ol,
.content-styles ul,
.content-styles ol,
.content-display ul,
.content-display ol {
padding-left: 1.5rem !important;
margin: 0.5rem 0 !important;
}
.ProseMirror ul,
.modal .compare-content ul,
.modal .compare-content .grabText ul,
.process-run-webpage ul,
.content-styles ul,
.content-display ul {
list-style-type: disc !important;
}
.ProseMirror ol,
.modal .compare-content ol,
.modal .compare-content .grabText ol,
.process-run-webpage ol,
.content-styles ol,
.content-display ol {
list-style-type: decimal !important;
}
.ProseMirror li,
.modal .compare-content li,
.modal .compare-content .grabText li,
.process-run-webpage li,
.content-styles li,
.content-display li {
display: list-item !important;
margin: 0.25rem 0 !important;
}
.ProseMirror ul ul,
.modal .compare-content ul ul,
.modal .compare-content .grabText ul ul,
.process-run-webpage ul ul,
.content-styles ul ul,
.content-display ul ul {
list-style-type: circle !important;
}
.ProseMirror ul ul ul,
.modal .compare-content ul ul ul,
.modal .compare-content .grabText ul ul ul,
.process-run-webpage ul ul ul,
.content-styles ul ul ul,
.content-display ul ul ul {
list-style-type: square !important;
}
.ProseMirror .task-list,
.content-styles .task-list,
.content-display .task-list {
list-style-type: none !important;
padding-left: 1rem !important;
}
.ProseMirror .task-list-item,
.content-styles .task-list-item,
.content-display .task-list-item {
display: flex !important;
align-items: flex-start !important;
gap: 0.5rem !important;
}
.ProseMirror .task-list-item input[type="checkbox"],
.content-styles .task-list-item input[type="checkbox"],
.content-display .task-list-item input[type="checkbox"] {
margin: 0 !important;
margin-top: 0.125rem !important;
}
.ProseMirror .tableWrapper {
overflow-x: auto;
margin: 0; 
}
.ProseMirror table,
.modal .compare-content .table-content table,
.modal .compare-content .grabText .table-content table,
body #app_ .content-styles table,
body #app_ .content-display table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0; 
}
.ProseMirror table td,
.ProseMirror table th,
.modal .compare-content .table-content table td,
.modal .compare-content .table-content table th,
.modal .compare-content .grabText .table-content table td,
.modal .compare-content .grabText .table-content table th {
border: 1px solid var(--medium-dark-grey, #ccc);
padding: 2px 5px;
text-align: left;
vertical-align: top;
min-width: 25px;
}
.ProseMirror table th,
.modal .compare-content .table-content table th,
.modal .compare-content .grabText .table-content table th,
body #app_ .process-run-webpage table th,
body #app_ .content-styles table th,
body #app_ .content-display table th {
background-color: var(--light-grey, #f5f5f5);
color: var(--dark-grey);
font-weight: bold;
}
.dark-mode .ProseMirror table th,
.dark-mode .modal .compare-content .table-content table th,
.dark-mode .modal .compare-content .grabText .table-content table th,
body.dark-mode #app_ .process-run-webpage table th,
body.dark-mode #app_ .content-styles table th,
body.dark-mode #app_ .content-display table th {
background-color: var(--dark-grey) !important;
color: var(--light-grey) !important;
}
.dark-mode .ProseMirror table th p,
.dark-mode .modal .compare-content .table-content table th p,
.dark-mode .modal .compare-content .grabText .table-content table th p,
body.dark-mode #app_ .process-run-webpage table th p,
body.dark-mode #app_ .content-styles table th p,
body.dark-mode #app_ .content-display table th p {
color: var(--light-grey) !important;
}
body #app_ .tiptap-container .editor-container h1,
body #app_ .modal .compare-content h1,
body #app_ .modal .compare-content .grabText h1,
.tiptap-container .tiptap.ProseMirror h1,
body #app_ .process-run-webpage h1,
body #app_ .content-styles h1,
body #app_ .content-display h1 {
font-size: 25px;
}
body #app_ .tiptap-container .editor-container h2,
body #app_ .modal .compare-content h2,
body #app_ .modal .compare-content .grabText h2,
.tiptap-container .tiptap.ProseMirror h2,
body #app_ .process-run-webpage h2,
body #app_ .content-styles h2,
body #app_ .content-display h2 {
font-size: 23px;
}
body #app_ .tiptap-container .editor-container h3,
body #app_ .modal .compare-content h3,
body #app_ .modal .compare-content .grabText h3,
.tiptap-container .tiptap.ProseMirror h3,
body #app_ .process-run-webpage h3,
body #app_ .content-styles h3,
body #app_ .content-display h3 {
font-size: 21px;
}
body #app_ .tiptap-container .editor-container h4,
body #app_ .modal .compare-content h4,
body #app_ .modal .compare-content .grabText h4,
.tiptap-container .tiptap.ProseMirror h4,
body #app_ .process-run-webpage h4,
body #app_ .content-styles h4,
body #app_ .content-display h4 {
font-size: 19px;
}
body #app_ .tiptap-container .editor-container h5,
body #app_ .modal .compare-content h5,
body #app_ .modal .compare-content .grabText h5,
.tiptap-container .tiptap.ProseMirror h5,
body #app_ .process-run-webpage h5,
body #app_ .content-styles h5,
body #app_ .content-display h5 {
font-size: 17px;
}
body #app_ .tiptap-container .editor-container h6,
body #app_ .modal .compare-content h6,
body #app_ .modal .compare-content .grabText h6,
.tiptap-container .tiptap.ProseMirror h6,
body #app_ .process-run-webpage h6,
body #app_ .content-styles h6,
body #app_ .content-display h6 {
font-size: 15px;
}
.tiptap-container .tiptap.ProseMirror h1, 
.tiptap-container .tiptap.ProseMirror h2, 
.tiptap-container .tiptap.ProseMirror h3, 
.tiptap-container .tiptap.ProseMirror h4, 
.tiptap-container .tiptap.ProseMirror h5, 
.tiptap-container .tiptap.ProseMirror h6 {
margin-top: 20px;
}
.tiptap-container .tiptap.ProseMirror > *:first-child {
margin-top: 0;
}
.tiptap-container th p, 
.tiptap-container td p,
.modal .compare-content .table-content table th p,
.modal .compare-content .table-content table td p,
.modal .compare-content .grabText .table-content table th p,
.modal .compare-content .grabText .table-content table td p {
margin: 0;
margin-top: 10px;
}
.tiptap-container th p:first-of-type, 
.tiptap-container td p:first-of-type,
.modal .compare-content .table-content table th p:first-of-type,
.modal .compare-content .table-content table td p:first-of-type,
.modal .compare-content .grabText .table-content table th p:first-of-type,
.modal .compare-content .grabText .table-content table td p:first-of-type {
margin-top: 0;
}
.tiptap-container img,
.modal .compare-content img,
.modal .compare-content .grabText img {
max-width: 100%;
min-width: 200px;
height: auto;
}
.MainTextEditor img {
max-width: 100%;
height: auto;
}
.MainTextEditor td, 
.MainTextEditor th {
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--medium-grey);
}
.tip-tap-selection {
background: var(--pale-green);
color: black;
}
.tip-tap-selection.is-active {
background: var(--pale-green);
color: black;
}
.tiptap-container ::selection {
background: var(--pale-green);
color: black;
}
.tiptap-container .marker,
.modal .compare-content .marker,
.modal .compare-content .grabText .marker {
padding: 2px 5px;
border-radius: 5px;
cursor: grab;
display: inline-block;
font-size: 10px;
text-transform: uppercase;
border: 1px solid var(--medium-dark-grey);
color: black !important;
background-color: var(--light-grey) !important;
}
.tiptap-container .marker i,
.modal .compare-content .marker i,
.modal .compare-content .grabText .marker i {
margin-right: 3px; 
}
.dark-mode .tiptap-container .marker,
.dark-mode .modal .compare-content .marker,
.dark-mode .modal .compare-content .grabText .marker {
border: 1px solid var(--medium-grey);
background-color: black !important;
color: var(--light-grey) !important;
}
.persistent-selection {
background-color: rgba(0, 123, 255, 0.3); 
border-radius: 3px;
}
.modal .compare-content,
.modal .compare-content .grabText,
.modal .compare-content div[contenteditable],
.modal .compare-content span[contenteditable] {
font-family: var(--font-family-base);
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
}
.dark-mode .modal .compare-content,
.dark-mode .modal .compare-content .grabText,
.dark-mode .modal .compare-content div[contenteditable],
.dark-mode .modal .compare-content span[contenteditable] {
color: var(--light-grey);
}
.modal .compare-content .table-content,
.modal .compare-content .grabText .table-content {
display: block;
width: 100%;
margin: 10px 0;
}
body #app_ .content-styles,
body #app_ .content-display {
line-height: 1.6;
}
code,
pre,
.modal .compare-content code,
.modal .compare-content pre,
.modal .compare-content .grabText code,
.modal .compare-content .grabText pre,
body #app_ .process-run-webpage code,
body #app_ .process-run-webpage pre,
body #app_ .content-styles code,
body #app_ .content-styles pre,
body #app_ .content-display code,
body #app_ .content-display pre {
background-color: var(--lightest-grey);
color: var(--dark-grey);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
pre,
.modal .compare-content pre,
.modal .compare-content .grabText pre,
body #app_ .content-styles pre,
body #app_ .content-display pre {
padding: 10px;
margin: 10px 0;
overflow-x: auto;
}
.dark-mode code,
.dark-mode pre,
.dark-mode .modal .compare-content code,
.dark-mode .modal .compare-content pre,
.dark-mode .modal .compare-content .grabText code,
.dark-mode .modal .compare-content .grabText pre,
body.dark-mode #app_ .content-styles code,
body.dark-mode #app_ .content-styles pre,
body.dark-mode #app_ .content-display code,
body.dark-mode #app_ .content-display pre {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.ProseMirror blockquote,
.tiptap-container .editor-container blockquote,
blockquote,
.modal .compare-content blockquote,
.modal .compare-content .grabText blockquote,
body #app_ .process-run-webpage blockquote,
body #app_ .content-styles blockquote,
body #app_ .content-display blockquote {
margin: 1rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid var(--pale-green);
background-color: var(--lightest-grey);
color: var(--dark-grey);
font-style: italic;
position: relative;
}
.dark-mode .ProseMirror blockquote,
.dark-mode .tiptap-container .editor-container blockquote,
.dark-mode blockquote,
.dark-mode .modal .compare-content blockquote,
.dark-mode .modal .compare-content .grabText blockquote,
body.dark-mode #app_ .process-run-webpage blockquote,
body.dark-mode #app_ .content-styles blockquote,
body.dark-mode #app_ .content-display blockquote {
border-left-color: var(--pale-green);
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.ProseMirror q,
.tiptap-container .editor-container q,
q,
.modal .compare-content q,
.modal .compare-content .grabText q {
font-style: italic;
color: var(--dark-grey);
quotes: '"' '"' "'" "'";
}
.dark-mode .ProseMirror q,
.dark-mode .tiptap-container .editor-container q,
.dark-mode q,
.dark-mode .modal .compare-content q,
.dark-mode .modal .compare-content .grabText q {
color: var(--light-grey);
}
.ProseMirror blockquote cite,
.tiptap-container .editor-container blockquote cite,
blockquote cite {
display: block;
margin-top: 0.5rem;
font-style: normal;
font-size: 0.875rem;
color: var(--medium-grey);
text-align: right;
}
.dark-mode .ProseMirror blockquote cite,
.dark-mode .tiptap-container .editor-container blockquote cite,
.dark-mode blockquote cite {
color: var(--medium-dark-grey);
}
.ProseMirror blockquote cite::before,
.tiptap-container .editor-container blockquote cite::before,
blockquote cite::before {
content: "— ";
}
.quote-emphasis {
border-left: 4px solid var(--pale-green-dark);
background-color: rgba(76, 175, 80, 0.05);
font-weight: 500;
}
.dark-mode .quote-emphasis {
border-left-color: var(--pale-green);
background-color: rgba(76, 175, 80, 0.1);
}
.quote-warning {
border-left: 4px solid #ff9800;
background-color: rgba(255, 152, 0, 0.05);
}
.dark-mode .quote-warning {
background-color: rgba(255, 152, 0, 0.1);
}
.quote-info {
border-left: 4px solid #2196f3;
background-color: rgba(33, 150, 243, 0.05);
}
.dark-mode .quote-info {
background-color: rgba(33, 150, 243, 0.1);
}
.pull-quote {
margin: 2rem 0;
padding: 1.5rem;
text-align: center;
font-size: 1.25rem;
font-weight: 500;
border: 2px solid var(--pale-green);
border-radius: 8px;
background-color: var(--lightest-grey);
color: var(--dark-grey);
}
.dark-mode .pull-quote {
border-color: var(--pale-green);
background-color: var(--darkest-grey);
color: var(--light-grey);
}
body #app_ .modal .tiptap-container .menu-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px;
background: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
margin-bottom: 10px;
padding-right: 80px;
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
body #app_ .modal .tiptap-container .menu-bar button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 2px 8px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
gap: 5px;
height: 30px;
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar button {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
body #app_ .modal .tiptap-container .menu-bar button:hover {
background: var(--medium-light-grey);
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar button:hover {
background: var(--medium-dark-grey);
}
body #app_ .modal .tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: white;
}
body #app_ .modal .tiptap-container .menu-bar .heading-selector {
max-width: 100px;
width: auto;
min-width: 60px;
padding: 4px 8px;
font-size: 14px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
background: var(--lightest-grey);
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar .heading-selector {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.modal {
display: flex !important;
background-color: rgba(0, 0, 0, 0.5) !important;
overflow: auto !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-index-modal);
align-items: flex-start;
justify-content: center;
padding: 20px 0;
}
.modal-content {
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px !important;
overflow: hidden !important;
background-color: var(--lightest-grey);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
max-height: 100%;
}
.dark-mode .modal {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 1px solid var(--medium-dark-grey);
}
.modal-dialog {
height: fit-content;
width: calc(100vw - 50px) !important;
margin: auto;
position: relative;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.modal-dialog:not(.xl) {
max-width: 1000px;
}
.modal-header {
padding: 5px 10px !important;
background-color: var(--lightest-grey);
flex-shrink: 0;
}
.modal-body {
padding: 5px 10px !important;
background-color: var(--lightest-grey);
flex: 1;
overflow-y: auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--medium-grey) var(--light-grey);
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: var(--light-grey);
}
.modal-body::-webkit-scrollbar-thumb {
background: var(--medium-grey);
border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: var(--medium-dark-grey);
}
.dark-mode .modal-body {
background-color: var(--dark-grey);
color: var(--light-grey);
border-bottom: 1px solid var(--medium-dark-grey);
scrollbar-color: var(--medium-dark-grey) var(--dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-track {
background: var(--dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-thumb {
background: var(--medium-dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--medium-grey);
}
.dark-mode .modal-header {
background-color: black;
}
.light-mode .modal-header {
background-color: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
}
.modal-footer {
padding: 5px !important;
background-color: var(--light-grey);
border-top: 1px solid var(--medium-grey);
display: flex;
justify-content: flex-end;
gap: 0px;
flex-shrink: 0;
}
.dark-mode .modal-footer {
background-color: black;
border-top: 1px solid black;
}
.modal-header .modal-title {
margin-top: 0px !important;
font-size: 18px;
font-weight: 500;
margin-bottom: 0px;
}
.modal-body label {
margin: 5px 0 0 0 !important;
color: var(--dark-grey);
}
.dark-mode .modal-body label {
color: var(--light-grey);
}
.modal-open .modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-index-modal-backdrop);
}
.close {
display: none;
}
.modal .compare-group {
display: flex;
flex-direction: column;
margin-top: 5px;
}
.modal .compare-item {
display: flex;
justify-content: space-evenly;
max-height: calc(100vh - 250px);
overflow: auto;
}
.modal-dialog.xl .modal .compare-item {
padding: 0 100px;
}
.modal .compare-item div:not(.compare-buttons) {
flex: 1;
}
.modal .compare-item .compare-content:first-of-type {
border-right: 1px solid var(--medium-grey);
padding-right: 25px;
padding-bottom: 20px;
margin-left: 100px;
}
.modal .compare-item .compare-content:nth-of-type(2) {
padding-left: 25px;
margin-right: 100px;
}
.modal .compare-item .compare-content {
padding-top: 25px;
height: fit-content;
}
.modal .compare-item .compare-content label {
padding-bottom: 15px;
font-weight: 500;
}
.modal .compare-item .compare-content p {
margin-top: 0px;
}
.modal .compare-item .compare-content:last-of-type {
padding-left: 25px;
border-left: 1px solid var(--medium-grey);
margin-left: -1px;
margin-right: 100px;
}
.modal .compare-count {
border-bottom: 1px solid var(--medium-grey);
position: relative;
padding: 10px 0;
}
.modal .compare-item div:first-of-type {
min-height: 150px;
overflow: hidden;
}
.modal .compare-item div:first-of-type span {
display: inline-block;
}
.modal .compare-count .fa-arrow-left {
position: absolute;
left: 10px;
top: 15px;
cursor: pointer;
z-index: 1;
color: var(--dark-grey);
}
.modal .compare-count .fa-arrow-right {
position: absolute;
right: 10px;
top: 15px;
cursor: pointer;
z-index: 1;
color: var(--dark-grey);
}
.dark-mode .modal .compare-count .fa-arrow-left,
.dark-mode .modal .compare-count .fa-arrow-right {
color: var(--light-grey);
}
.modal .compare-count h2 {
text-align: center;
margin: 0;
font-size: 18px;
}
.modal .compare-buttons {
margin-bottom: -5px;
position: sticky;
top: 20px;
right: 0px;
height: 100px;
width: 0px;
overflow: visible;
flex: none;
}
.modal .compare-buttons .btn {
position: absolute;
top: 0px;
right: 20px;
width: 32px;
height: 32px;
}
.modal .sub-text {
font-size: 12px;
color: var(--medium-grey);
margin-top: 0px;
}
.createNew {
flex-direction: column;
align-items: center;
min-height: 300px;
}
.createNew input {
min-width: 250px;
margin-bottom: 10px;
}
.dark-mode .createNew input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey);
}
.pricing-modal-table {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 1rem 0;
}
.pricing-column {
flex: 1;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
padding: 0.5rem 1rem 0.5rem 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 220px;
}
.dark-mode .pricing-column {
background: black;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
border: 1px solid var(--medium-dark-grey);
}
.pricing-header {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #2a2a2a;
margin-top: 0;
}
.dark-mode .pricing-header {
color: var(--light-grey);
}
.pricing-price {
font-size: 1.5rem;
font-weight: 700;
color: #2a2a2a;
margin-bottom: 0.5rem;
display: flex;
align-items: baseline;
justify-content: flex-start;
}
.price-currency {
font-size: 1.5rem;
margin-left: 0.25rem;
margin-right: 0;
}
.price-period {
font-size: 1rem;
color: #666;
margin-left: 0.25rem;
font-weight: normal;
}
.dark-mode .price-period {
color: var(--medium-grey);
}
.price-amount {
line-height: 1;
}
.dark-mode .pricing-price {
color: var(--light-grey);
}
.pricing-desc {
font-size: 1rem;
color: #666;
margin-bottom: 1rem;
text-align: left;
}
.dark-mode .pricing-desc {
color: var(--medium-grey);
}
.pricing-count {
font-size: 1.1rem;
margin-top: 1rem;
color: #333;
display: flex;
align-items: center;
gap: 0.5em;
}
.dark-mode .pricing-count {
color: var(--light-grey);
}
.plan-input {
width: 70px;
text-align: right;
font-size: 1.1rem;
margin-left: 0.5em;
margin-right: 0.5em;
border-radius: 6px;
border: 1px solid #ccc;
padding: 0.2em 0.5em;
}
.dark-mode .plan-input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.count-label {
font-weight: 500;
}
.dark-mode .count-label {
color: var(--light-grey);
}
.count-value {
font-weight: 700;
color: #1976d2;
min-width: 32px;
text-align: left;
}
.dark-mode .count-value {
color: var(--light-grey);
}
.pricing-capabilities {
margin-top: 2rem;
width: 100%;
}
.pricing-capabilities ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-capabilities li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}
.pricing-capabilities li::before {
content: "✓";
color: var(--primary-color);
font-weight: bold;
}
.dark-mode .pricing-capabilities li {
color: var(--medium-grey);
} 
.modal-body label {
width: calc(100% - 20px);
}
.form-check.custom-control.custom-radio {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.form-check.custom-control.custom-radio input[type="radio"] {
margin: 0;
flex-shrink: 0;
}
.form-check.custom-control.custom-radio label {
margin: 0;
width: auto;
flex: 1;
cursor: pointer;
}
.sitemap-url-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.sitemap-url-option:hover {
background-color: var(--lightest-grey);
}
.dark-mode .sitemap-url-option:hover {
background-color: var(--semi-dark-grey);
}
.plan-selected-start {
border: 2px solid var(--button-green) !important;
box-shadow: 0 2px 12px rgba(119, 176, 82, 0.15) !important;
}
.dark-mode .plan-selected-start {
border: 2px solid var(--pale-green) !important;
box-shadow: 0 2px 12px rgba(182, 215, 168, 0.15) !important;
}
.plan-selected-higher {
border: 2px solid var(--button-green) !important;
box-shadow: 0 2px 12px rgba(119, 176, 82, 0.15) !important;
}
.dark-mode .plan-selected-higher {
border: 2px solid var(--pale-green) !important;
box-shadow: 0 2px 12px rgba(182, 215, 168, 0.15) !important;
}
.plan-disabled-start {
opacity: 0.5;
border: 1px solid var(--medium-grey) !important;
}
.dark-mode .plan-disabled-start {
opacity: 0.5;
border: 1px solid var(--medium-dark-grey) !important;
}
.multi-select-component {
position: relative;
width: 100%;
}
.multi-select-label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.search-container {
position: relative;
}
.search-input {
width: 100%;
padding-right: 30px;
}
.search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--medium-grey);
pointer-events: none;
}
.dropdown-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid var(--medium-grey);
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 250px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.suggestions-header {
padding: 6px 12px;
background-color: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
font-size: 0.85em;
color: var(--medium-grey);
font-weight: 500;
}
.dark-mode .dropdown-suggestions {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .suggestions-header {
background-color: var(--medium-dark-grey);
border-color: var(--dark-grey);
color: var(--light-grey);
}
.suggestion-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--light-grey);
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.dark-mode .suggestion-item {
border-color: var(--medium-dark-grey);
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover {
background-color: var(--light-grey);
}
.dark-mode .suggestion-item:hover {
background-color: var(--medium-dark-grey);
}
.suggestion-item.already-selected {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--light-grey);
}
.dark-mode .suggestion-item.already-selected {
background-color: var(--medium-dark-grey);
}
.option-name {
font-weight: 500;
flex: 1;
}
.option-native {
color: var(--medium-grey);
font-style: italic;
}
.dark-mode .option-native {
color: var(--light-grey);
}
.option-code {
color: var(--medium-grey);
font-size: 0.9em;
}
.dark-mode .option-code {
color: var(--light-grey);
}
.selected-check {
color: var(--pale-green);
font-weight: bold;
}
.selected-items {
margin-top: 15px;
}
.selected-items-header {
margin-bottom: 8px;
}
.selected-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.selected-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background-color: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
}
.dark-mode .selected-item {
background-color: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.selected-item.is-default {
border-color: var(--pale-green);
background-color: var(--pale-green-light);
}
.dark-mode .selected-item.is-default {
border-color: var(--pale-green-dark);
background-color: var(--pale-green-darker);
}
.item-info {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.default-badge {
background-color: var(--pale-green);
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75em;
font-weight: 500;
}
.item-actions {
display: flex;
gap: 5px;
}
.set-default-btn {
background-color: #333 !important;
border-color: #333 !important;
color: #ffd700 !important; 
padding: 2px 6px;
font-size: 0.75em;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.set-default-btn:hover {
background-color: #000 !important;
border-color: #000 !important;
color: #ffd700 !important;
}
.dark-mode .set-default-btn {
background-color: #222 !important;
border-color: #222 !important;
color: #ffd700 !important;
}
.dark-mode .set-default-btn:hover {
background-color: #111 !important;
border-color: #111 !important;
color: #ffd700 !important;
}
.remove-btn {
padding: 2px 6px;
font-size: 0.75em;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.no-selections {
margin-top: 10px;
padding: 12px;
background-color: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
color: var(--medium-grey);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.dark-mode .no-selections {
background-color: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
:root {
--pale-green-light: #e8f5e8;
--pale-green-darker: #2d5a2d;
}
.comments-display {
padding: var(--spacing-md);
}
.comments-header {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
}
.comments-header h4 {
margin: 0 0 var(--spacing-sm) 0;
color: var(--dark-grey);
font-weight: 600;
}
.comments-message {
color: var(--medium-dark-grey);
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.5;
}
.comments-meta {
font-size: 0.9em;
color: var(--medium-grey);
}
.comments-summary {
margin-bottom: var(--spacing-lg);
}
.summary-stats {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-sm);
background: var(--lightest-grey);
border-radius: var(--border-radius-sm);
min-width: 80px;
}
.stat-item strong {
font-size: 1.5em;
color: var(--info-blue);
font-weight: 700;
}
.stat-item span {
font-size: 0.8em;
color: var(--medium-grey);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.invitees-list h5 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
font-weight: 600;
}
.invitee-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
transition: background-color 0.2s ease;
}
.invitee-item:hover {
background: var(--pale-green-light);
}
.invitee-info {
display: flex;
flex-direction: column;
}
.invitee-info strong {
color: var(--dark-grey);
margin-bottom: var(--spacing-xs);
}
.invite-date {
font-size: 0.8em;
color: var(--medium-grey);
}
.invitee-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-xs);
}
.approval-status {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 600;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: 0.9em;
}
.approval-status.status-approved {
color: var(--success-green);
background: rgba(76, 175, 80, 0.1);
}
.approval-status.status-rejected {
color: var(--danger-red);
background: rgba(244, 67, 54, 0.1);
}
.approval-status.status-pending {
color: var(--warning-yellow);
background: rgba(255, 193, 7, 0.1);
}
.comments-count {
font-size: 0.8em;
color: var(--info-blue);
font-weight: 500;
}
.dark-mode .comments-header h4,
.dark-mode .invitees-list h5,
.dark-mode .invitee-info strong {
color: var(--light-grey);
}
.dark-mode .comments-message {
color: var(--medium-grey);
}
.dark-mode .stat-item {
background: var(--semi-dark-grey);
}
.dark-mode .invitee-item {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .invitee-item:hover {
background: rgba(182, 215, 168, 0.1);
}
.comment-modal-draggable {
position: fixed;
background: var(--lightest-grey);
border: 2px solid var(--medium-grey);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
font-family: inherit;
min-width: 280px;
max-width: 400px;
}
.comment-modal-draggable .template-card-tag {
top: 4px;
right: 5px;
}
.dark-mode .comment-modal-draggable .template-card-tag {
background: black;
border: 1px solid var(--medium-dark-grey);
}
.comment-modal-header {
background: var(--pale-green);
padding: 8px 12px;
border-radius: 6px 6px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
}
.comment-modal-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--dark-grey);
}
.comment-modal-header-actions {
display: flex;
gap: 4px;
}
.comment-modal-close-btn {
background: none;
border: none;
font-size: 18px;
color: var(--medium-grey);
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.comment-modal-close-btn:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--dark-grey);
}
.comment-modal-content {
padding: 12px;
}
.comment-modal-content-preview {
margin-bottom: 8px;
}
.comment-modal-target-text {
font-size: 12px;
color: var(--medium-grey);
font-style: italic;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.comment-modal-commenter-info {
margin-bottom: 8px;
}
.comment-modal-display {
margin-bottom: 12px;
margin-top: 20px;
}
.comment-modal-text {
background: var(--pale-green-light);
border: 1px solid var(--pale-green);
padding: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--dark-grey);
min-height: 60px;
white-space: pre-wrap;
}
.comment-modal-actions {
display: flex;
justify-content: flex-end;
}
.comment-modal-resolve-btn {
background: var(--success-color);
color: white;
border: none;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.comment-modal-resolve-btn:hover:not(:disabled) {
background: var(--success-color-dark);
}
.comment-modal-resolve-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.dark-mode .comment-modal-draggable {
background: var(--darkest-grey);
border: 2px solid var(--medium-dark-grey);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dark-mode .comment-modal-header {
background: var(--pale-green-dark);
}
.dark-mode .comment-modal-header h3 {
color: var(--light-grey);
}
.dark-mode .comment-modal-close-btn {
color: var(--light-grey);
}
.dark-mode .comment-modal-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--lightest-grey);
}
.dark-mode .comment-modal-target-text {
color: var(--medium-light-grey);
}
.dark-mode .comment-modal-text {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain {
margin: 50px 0 0 0;
padding: 20px;
text-align: center;
}
.simply-explain-main-title {
color: var(--pale-green-dark);
margin: 0;
font-size: 1.8rem;
font-weight: bold;
}
.dark-mode .simply-explain-main-title {
color: var(--pale-green);
}
.simply-explain-layout {
align-items: stretch;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.simply-explain-column {
flex: 1;
display: flex;
flex-direction: column;
min-height: 400px;
max-width: 500px;
}
.simply-explain-workflow-right p,
.simply-explain-workflow-right span,
.simply-explain-workflow-right div,
.simply-explain-workflow-right h1,
.simply-explain-workflow-right h2,
.simply-explain-workflow-right h3,
.simply-explain-workflow-right h4,
.simply-explain-workflow-right h5,
.simply-explain-workflow-right h6,
.simply-explain-right p,
.simply-explain-right span,
.simply-explain-right div,
.simply-explain-right h1,
.simply-explain-right h2,
.simply-explain-right h3,
.simply-explain-right h4,
.simply-explain-right h5,
.simply-explain-right h6 {
text-align: left !important;
}
.simply-explain-header,
.simply-explain-header *,
.simply-explain-main-title,
.simply-explain-icon-wrapper,
.simply-explain-slider-controls,
.simply-explain-slider-controls * {
text-align: center !important;
}
.simply-explain-left {
text-align: center;
justify-content: center;
gap: 30px;
}
.simply-explain-example-section {
text-align: left;
display: flex;
align-items: center;
flex: 1;
padding-left: 50px;
}
.simply-explain-slider {
width: 100%;
}
.simply-explain-slider-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.simply-explain-slider-btn {
background: var(--pale-green-dark);
color: white;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.simply-explain-slider-btn:hover:not(:disabled) {
background: var(--pale-green-darker);
transform: scale(1.1);
}
.simply-explain-slider-btn:disabled {
background: var(--medium-grey);
cursor: not-allowed;
opacity: 0.5;
}
.dark-mode .simply-explain-slider-btn {
background: var(--pale-green);
}
.dark-mode .simply-explain-slider-btn:hover:not(:disabled) {
background: var(--pale-green-dark);
}
.dark-mode .simply-explain-slider-btn:disabled {
background: var(--medium-dark-grey);
}
.simply-explain-slider-indicator {
font-size: 14px;
font-weight: 600;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-slider-indicator {
color: var(--pale-green);
}
.simply-explain-slider-content {
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
}
.dark-mode .simply-explain-slider-content {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-slider-content h4 {
color: white;
margin-bottom: 15px;
font-size: 1.2rem;
text-align: center;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
}
.dark-mode .simply-explain-slider-content h4 {
color: white;
background: none;
text-shadow: 1px 1px 3px rgba(0, 0, 0.9, 0.1);
padding-top: 20px;
margin-bottom: 10px;
}
.simply-explain-files-section {
margin-top: 25px;
}
.simply-explain-files-section h5 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1rem;
text-align: center;
}
.dark-mode .simply-explain-files-section h5 {
color: var(--pale-green);
}
.simply-explain-file-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.simply-explain-file-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 10px;
background: var(--lightest-grey);
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--medium-grey);
text-align: center;
}
.dark-mode .simply-explain-file-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain-file-item i {
color: var(--pale-green-dark);
width: 14px;
text-align: center;
font-size: 11px;
}
.dark-mode .simply-explain-file-item i {
color: var(--pale-green);
}
.simply-explain-example-code {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
}
.dark-mode .simply-explain-example-code {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.simply-explain-example-code i {
color: var(--pale-green-dark);
margin: 0 5px;
}
.dark-mode .simply-explain-example-code i {
color: var(--pale-green);
}
.simply-explain-header {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.simply-explain-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-astronaut-icon {
font-size: 50px;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-astronaut-icon {
color: var(--pale-green);
}
.simply-explain-right {
text-align: left;
}
.simply-explain-description-box {
background: var(--white);
border-radius: 8px;
padding: 35px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-right: 4px solid var(--pale-green-dark);
position: sticky;
top: 20px;
}
.dark-mode .simply-explain-description-box {
background: var(--darkest-grey);
border-right-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-description-box h4 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1.2rem;
}
.dark-mode .simply-explain-description-box h4 {
color: var(--pale-green);
}
.simply-explain-description-box p {
line-height: 1.6;
margin-bottom: 20px;
}
.simply-explain-methods {
display: flex;
flex-direction: column;
gap: 0px;
margin-top: 20px;
}
.simply-explain-method {
padding: 20px 0 15px;
border-bottom: 1px solid var(--medium-grey);
position: relative;
cursor: pointer;
outline: none;
}
.simply-explain-method:focus {
outline: none;
}
.simply-explain-method.active { 
cursor: not-allowed;
}
.dark-mode .simply-explain-method {
border-bottom-color: var(--medium-dark-grey);
}
.simply-explain-method:last-child {
border-bottom: none;
}
.simply-explain-workflow .simply-explain-method:not(:last-child)::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--medium-grey);
z-index: 1;
}
.dark-mode .simply-explain-workflow .simply-explain-method:not(:last-child)::after {
border-top-color: var(--medium-dark-grey);
}
.simply-explain-workflow .simply-explain-method.active:not(:last-child)::after {
border-top-color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow .simply-explain-method.active:not(:last-child)::after {
border-top-color: var(--pale-green);
}
.simply-explain-method-content {
padding-left: 50px;
padding-right: 50px;
}
.simply-explain-method-content h6 {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.simply-explain-method-content h6 i {
color: var(--pale-green-dark);
font-size: 18px;
width: 20px;
text-align: center;
}
.dark-mode .simply-explain-method-content h6 i {
color: var(--pale-green);
}
.simply-explain-method-content p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--dark-grey);
}
.dark-mode .simply-explain-method-content p {
color: var(--light-grey);
}
.simply-explain-workflow {
margin: 0;
padding: 20px;
}
.simply-explain-workflow-layout {
align-items: stretch;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.simply-explain-workflow-left {
flex: 1;
padding: 20px;
}
.simply-explain-workflow-right {
flex: 1;
padding: 20px;
justify-content: center;
}
.simply-explain-workflow-description-box {
background: var(--white);
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-right: 4px solid var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow-description-box {
background: var(--darkest-grey);
border-right-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-workflow-icon {
font-size: 50px;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow-icon {
color: var(--pale-green);
}
.simply-explain-workflow .simply-explain-method.active {
background: var(--pale-green);
}
.dark-mode .simply-explain-workflow .simply-explain-method.active {
background: var(--dark-grey);
}
.simply-explain-workflow .simply-explain-method.active .simply-explain-method-content {
transform: scale(1.02);
}
.simply-explain-workflow .simply-explain-method.active .simply-explain-method-content h6 {
color: var(--dark-grey);
font-weight: bold;
}
.dark-mode .simply-explain-workflow .simply-explain-method.active .simply-explain-method-content h6 {
color: var(--light-grey);
}
.simply-explain-workflow .simply-explain-method-content h6 .template-step-circle {
width: 18px;
height: 18px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
margin-right: 10px;
background: none;
border: none;
}
.simply-explain-workflow .template-step-circle.step-assistant i {
color: var(--info-blue);
}
.simply-explain-workflow .template-step-circle.step-textEditor i {
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow .template-step-circle.step-textEditor i {
color: var(--pale-green);
}
.simply-explain-workflow .template-step-circle.step-convert i {
color: var(--icon-purple);
}
.simply-explain-workflow .template-step-circle.step-input i {
color: var(--icon-orange);
}
.process-step-circle-wrapper {
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
padding: 15px;
border-radius: 8px;
position: relative;
}
.process-step-circle-wrapper:hover {
background: var(--lightest-grey);
}
.dark-mode .process-step-circle-wrapper:hover {
background: var(--dark-grey);
}
.process-step-circle-wrapper.active {
background: var(--pale-green);
}
.dark-mode .process-step-circle-wrapper.active {
background: var(--dark-grey);
}
.process-step-row {
display: flex;
align-items: center;
gap: 15px;
}
.process-step-circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
margin-bottom: 10px;
}
.step-assistant {
background: var(--pale-green-dark);
}
.step-textEditor {
background: #3b82f6;
}
.step-convert {
background: #f59e0b;
}
.step-api {
background: #8b5cf6;
}
.step-Browsing {
background: #10b981;
}
.step-default {
background: var(--medium-grey);
}
.process-step-label {
font-size: 14px;
font-weight: 600;
color: var(--dark-grey);
flex: 1;
}
.dark-mode .process-step-label {
color: var(--light-grey);
}
.process-step-circle-wrapper.active .process-step-label {
color: var(--pale-green-dark);
font-weight: bold;
}
.dark-mode .process-step-circle-wrapper.active .process-step-label {
color: var(--pale-green);
}
.process-step-arrow {
position: absolute;
left: 25px;
bottom: -10px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid var(--medium-grey);
}
.process-step-circle-wrapper.active .process-step-arrow {
border-top-color: var(--pale-green-dark);
}
.dark-mode .process-step-arrow {
border-top-color: var(--medium-dark-grey);
}
.dark-mode .process-step-circle-wrapper.active .process-step-arrow {
border-top-color: var(--pale-green);
}
.simply-explain-workflow-details {
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
height: fit-content;
position: relative;
}
.dark-mode .simply-explain-workflow-details {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.workflow-assistant-tag {
position: absolute;
top: -8px;
right: -8px;
z-index: 10;
}
.simply-explain-workflow-details h4 {
color: white;
margin-bottom: 15px;
font-size: 1.2rem;
text-align: center;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
}
.dark-mode .simply-explain-workflow-details h4 {
color: white;
background: none;
padding-top: 20px;
margin-bottom: 0px;
}
.simply-explain-workflow-details p {
line-height: 1.6;
margin-bottom: 20px;
}
.simply-explain-workflow-input,
.simply-explain-workflow-output,
.simply-explain-workflow-section {
margin: 20px 0;
}
.simply-explain-workflow-output-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
line-height: 1.6;
font-size: 14px;
white-space: pre-line;
text-align: left;
}
.simply-explain-workflow-output-content h3 {
font-size: 14px !important;
}
.simply-explain-workflow-output-content p {
font-size: 11px !important;
}
.dark-mode .simply-explain-workflow-output-content {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain-blog-title {
font-size: 18px;
font-weight: bold;
color: var(--dark-grey);
margin: 0 0 15px 0;
line-height: 1.4;
}
.dark-mode .simply-explain-blog-title {
color: var(--light-grey);
}
.simply-explain-workflow-output-content p {
margin: 0;
color: var(--dark-grey);
}
.dark-mode .simply-explain-workflow-output-content p {
color: var(--light-grey);
}
.simply-explain-workflow-attachments {
margin-top: 15px;
}
.simply-explain-editor-container {
position: relative;
display: inline-block;
width: 100%;
}
.simply-explain-editor-image {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 8px;
border: 1px solid var(--medium-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 20px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.simply-explain-editor-image:hover {
filter: brightness(0.8);
}
.simply-explain-editor-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
}
.simply-explain-editor-container::before {
content: '\f065';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 11;
}
.simply-explain-editor-container:hover::after,
.simply-explain-editor-container:hover::before {
opacity: 1;
}
.dark-mode .simply-explain-editor-image {
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.editor-feature-indicator {
position: absolute;
width: 30px;
height: 30px;
background: var(--pale-green-darker);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
z-index: 5;
}
.dark-mode .editor-feature-indicator {
background: var(--pale-green-darker);
}
.feature-number {
color: white;
font-weight: bold;
font-size: 14px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.editor-features-list {
margin-top: 30px;
}
.editor-feature-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: flex-start;
}
.feature-number-label {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 16px;
min-width: 25px;
}
.dark-mode .feature-number-label {
color: var(--pale-green);
}
.feature-content h6 {
color: var(--pale-green-dark);
margin: 0 0 5px 0;
font-size: 14px;
font-weight: 600;
}
.dark-mode .feature-content h6 {
color: var(--pale-green);
}
.feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.simply-explain-image-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
overflow: hidden;
}
.simply-explain-modal-content {
position: relative;
max-width: 75vw;
max-height: 75vh;
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-modal-close {
position: absolute;
top: -80px;
right: -80px;
width: 40px;
height: 40px;
background: #3b82f6;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 1001;
}
.simply-explain-modal-close:hover {
background: #2563eb;
}
.simply-explain-modal-image-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-modal-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
object-fit: contain;
}
.editor-feature-indicator.modal-indicator {
cursor: pointer;
background: var(--pale-green-dark);
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.editor-feature-indicator.modal-indicator:hover {
background: var(--pale-green) !important;
animation: none !important;
}
.dark-mode .editor-feature-indicator.modal-indicator {
background: var(--pale-green-dark);
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.dark-mode .editor-feature-indicator.modal-indicator:hover {
background: var(--pale-green) !important;
}
@keyframes modalPulseGlow {
0%, 100% {
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 30px rgba(144, 238, 144, 1),
0 0 15px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.editor-feature-indicator.modal-indicator {
animation: none !important;
}
}
.modal-feature-tooltip {
position: absolute;
background: var(--darkest-grey);
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
min-width: 200px;
max-width: 300px;
z-index: 20;
border: 2px solid var(--pale-green);
color: var(--light-grey);
}
.modal-indicator .modal-feature-tooltip {
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.modal-feature-tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--pale-green);
}
.modal-feature-tooltip h6 {
color: var(--pale-green);
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
}
.modal-feature-tooltip p {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--light-grey);
}
.modal-feature-explanation {
position: absolute;
bottom: -120px;
left: 50%;
transform: translateX(-50%);
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
max-width: 400px;
width: 100%;
}
.dark-mode .modal-feature-explanation {
background: var(--darkest-grey);
color: var(--light-grey);
}
.modal-feature-content {
display: flex;
gap: 15px;
align-items: flex-start;
}
.modal-feature-number {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 16px;
min-width: 25px;
}
.dark-mode .modal-feature-number {
color: var(--pale-green);
}
.modal-feature-content h6 {
color: var(--pale-green-dark);
margin: 0 0 5px 0;
font-size: 14px;
font-weight: 600;
}
.dark-mode .modal-feature-content h6 {
color: var(--pale-green);
}
.modal-feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--dark-grey);
}
.dark-mode .modal-feature-content p {
color: var(--light-grey);
}
.simply-explain-url-link {
text-decoration: none;
color: inherit;
}
.simply-explain-url-link span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
display: inline-block;
}
.simply-explain-url-content {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
text-align: center;
}
.simply-explain-url-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.simply-explain-url-display {
font-size: 11px;
font-family: 'Courier New', monospace;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
box-sizing: border-box;
}
.simply-explain-workflow-input h5,
.simply-explain-workflow-output h5,
.simply-explain-workflow-section h5 {
color: white;
margin-bottom: 15px;
font-size: 14px;
font-weight: 600;
text-align: left !important;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 5px -20px;
}
.dark-mode .simply-explain-workflow-input h5,
.dark-mode .simply-explain-workflow-output h5,
.dark-mode .simply-explain-workflow-section h5 {
color: white;
background: none;
padding-top: 20px;
}
.simply-explain-workflow-input-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin-bottom: 15px;
}
.dark-mode .simply-explain-workflow-input-content {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.simply-explain-workflow-input-content i {
color: var(--pale-green-dark);
margin: 0 5px;
}
.dark-mode .simply-explain-workflow-input-content i {
color: var(--pale-green);
}
.features {
margin-top: 100px;
}
.feature-card {
background: var(--white);
border-radius: 8px;
padding: 20px;
margin: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1;
min-width: 250px;
max-width: 350px;
}
.dark-mode .feature-card {
background: var(--darkest-grey);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.feature-icon {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 30px;
}
.dark-mode .feature-icon {
color: var(--pale-green);
}
.feature-card-title {
color: var(--pale-green-dark);
margin-bottom: 10px;
font-weight: bold;
}
.dark-mode .feature-card-title {
color: var(--pale-green);
}
.feature-card-text {
font-size: 14px;
line-height: 1.5;
}
.social-media-channels {
display: flex;
gap: 10px;
margin: 15px 0;
justify-content: space-between;
}
.social-channel {
flex: 1;
max-width: 120px;
min-width: 100px;
background: var(--white);
border-radius: 6px;
border: 1px solid var(--medium-grey);
overflow: hidden;
}
.dark-mode .social-channel {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.social-channel-header {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
background: var(--lightest-grey);
border-bottom: 1px solid var(--medium-grey);
font-weight: 600;
font-size: 10px;
}
.dark-mode .social-channel-header {
background: var(--darkest-grey);
border-bottom-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.social-channel-header i {
font-size: 12px;
}
.social-channel:nth-child(1) .social-channel-header i {
color: #0077b5; 
}
.social-channel:nth-child(2) .social-channel-header i {
color: #1da1f2; 
}
.social-channel:nth-child(3) .social-channel-header i {
color: #e4405f; 
}
.social-channel-post {
padding: 12px 8px;
min-height: 80px;
}
.mock-post-line {
background: var(--light-grey);
height: 10px;
margin-bottom: 8px;
border-radius: 2px;
opacity: 0.7;
width: 100%;
}
.dark-mode .mock-post-line {
background: var(--light-grey);
}
.social-channel-post .mock-post-line:nth-child(1),
.social-channel-post .mock-post-line:nth-child(2) {
width: 100%; 
}
.social-channel-post .mock-post-line:nth-child(3) {
width: 65%; 
}
.social-media-description {
margin-top: 20px;
font-style: italic;
text-align: center;
color: var(--dark-grey);
}
.dark-mode .social-media-description {
color: var(--light-grey);
}
.workflow-convert-tag {
background: var(--icon-purple);
}
.loading {
position: fixed;
width: 100%;
height: 100%;
background-color: #f4f4f465;
z-index: var(--z-index-spinner);
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.loading .spinner-border {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 24px;
}
@media (min-width: 751px) {
.loading .spinner-border {
margin-left: 40px;
}
}
.dark-mode .loading {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .loading span,
.dark-mode .loading i {
color: var(--pale-green) !important;
} 
.tabs {
display: flex;
}
.tabs > .btn {
margin: 0px !important;
border-radius: 0px;
border: solid 1px #8d8d8d;
border-left: none;
text-transform: uppercase;
}
.tabs > .btn.first {
border-radius: 5px 0px 0px 5px;
border-left: solid 1px #8d8d8d;
order: 1;
}
.tabs > .btn.last {
border-radius: 0px 5px 5px 0px;
border-right: solid 1px #8d8d8d;
order: 10;
}
.tabs > .btn.selected {
background-color: #ffffff;
cursor: default;
}
.tabs > .btn .fa-check {
display: none;
}
.tabs > .btn.selected .fa-check {
display: inline;
color: green;
}
.tabs > .btn:focus, .tabs > .btn:focus-visible, .tabs > .btn:active {
outline: none !important;
box-shadow: none !important;
}
.light-mode .darkModeTab .tab:last-child {
background-color: var(--pale-green) !important;
color: #222 !important;
} 
.light-mode .settingsColumn > div > .btn  {
border: solid 1px #8d8d8d;
min-width: 200px;
background-color: var(--lightest-gray) !important;
color: var(--dark-grey) !important;
border: 1px solid var(--button-green) !important;
}
.settings-buttons-user > .btn:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.settings-buttons-user > .btn {
background-color: #ffffff;
}
.dark-mode .settings-buttons-user > .btn.selected i {
color: var(--pale-green-dark);
}
.dark-mode .settings-buttons-organisation > .btn {
background-color: var(--medium-grey);
}
.dark-mode .settings-buttons-organisation > .btn {
border: solid 1px var(--dark-grey);
background-color: #2a2a2a;
}
.settings-buttons-organisation > .btn.selected i {
color: var(--dark-grey) !important;
}
.dark-mode .settings-buttons-organisation > .btn.selected i {
color: white !important;
}
.dark-mode .settings-buttons-organisation > .btn.selected {
color: var(--pale-green);
}
.settingsColumn .btn.selected {
background-color: #ffffff;
cursor: default;
}
.settingsColumn .btn.selectedButActive i {
color: var(--pale-green) !important;
}
.settingsColumn .btn:focus, .settingsColumn .btn:focus-visible, .settingsColumn .btn:active {
outline: none !important;
box-shadow: none !important;
}
.settingsColumn .btn {
margin: 5px 0px 0px !important;
width: 100%;
}
.dark-mode .settingsColumn .btn.dark {
background-color: var(--dark-grey) !important;
color: white !important;
}
.settingsColumn .btn.dark.selected i {
color: var(--pale-green);
}
.settingsColumn .btn.dark i {
color: var(--dark-grey);
position: absolute;
left: 10px;
top: 8px;
}
.settings-buttons-user .btn i {
position: absolute;
left: 10px;
top: 8px;
color: var(--pale-green-dark);
}
.light-mode .settings-buttons-user .btn i {
color: var(--pale-green-dark);
}
.dark-mode .settings-buttons-user .btn i {
color: var(--pale-green-dark);
}
.settings-buttons-user .btn.selected i {
color: black !important;
}
.dark-mode .settings-buttons-user .btn.selected i {
color: black !important;
}
.settings-buttons-user .btn,
.settings-buttons-organisation .btn {
position: relative;
padding-left: 35px !important;
padding-right: 35px !important;
text-align: center;
}
.light-mode .settingsColumn .btn.dark i {
color: var(--pale-green-dark);
}
.dark-mode .settingsColumn .btn.dark i {
color: var(--pale-green);
}
.light-mode .settings-buttons-organisation .btn.dark {
background-color: var(--lightest-gray) !important; 
color: var(--dark-grey) !important;           
border: 1px solid var(--button-green) !important; 
}
.light-mode .settingsColumn .btn.dark:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.dark-mode .settingsColumn .btn.dark:hover {
background-color: var(--darkest-grey) !important;
color: white !important;
}
.settingsColumn label {
margin: 0px !important;
}
.settingsColumn .active-organisation {
font-size: 12px;
color: var(--dark-grey);
margin-top: 20px;
margin-bottom: 10px;
padding-left: 5px;
overflow: hidden;
}
.dark-mode .settingsColumn .active-organisation {
color: var(--light-grey);
}
.settingsColumn .active-organisation-label {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 10px;
display: block;
}
.dark-mode .settingsColumn .active-organisation-label {
color: var(--pale-green);
}
.userSettingsContainer .formColumn {
flex: 1 1 auto;
min-width: 0;
padding-left: 20px;
max-width: calc(100% - 260px);
}
.userSettingsContainer .forceRight {
position: absolute;
right: 10px;
top: 3px;
cursor: pointer;
display: flex;
gap: 5px;
}
.userSettingsContainer .teamManagementColumn .list-header,
.userSettingsContainer .teamManagementColumn .list-item {
padding-top: 0px;
padding-bottom: 0px;
}
.userSettingsContainer .teamManagementColumn .list-item-field {
padding-top: 10px;
padding-bottom: 10px;
}
.team-member-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
}
.delete-member-container {
position: relative;
cursor: pointer;
margin-left: 8px;
display: inline-block;
}
.userSettingsContainer .settingsColumn {
margin-top: 0px;
flex: 0 0 250px;
}
.userSettingsContainer .settingsColumn button:first-of-type {
margin-top: 0px !important;
}
.view-userSettings .formColumn .user-management-list .email-column {
flex: 2 1 200px;
}
.header-container {
margin-bottom: 40px;
}
.editable-title {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px 10px;
border-radius: 4px;
width: 100%;
display: inline-block;
}
.editable-description {
font-size: 14px;
color: var(--dark-grey);
margin: 0;
width: 100%;
display: inline-block;
text-align: left;
padding-left: 10px;
}
.editable-title i {
font-size: 14px;
display: inline-block;
margin-left: 10px;
}
.editable-title:hover i {
opacity: 1;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.header h3 {
margin: 0;
font-size: 18px;
font-weight: bold;
}
.button-group-detail {
margin-top: 0;
}
.table-container {
position: relative;
margin-top: 40px;
}
.usage-low {
color: #ff4444;
}
.plan-usage-section {
margin-bottom: 2rem;
}
.usage-summary-section {
margin-bottom: 2rem;
}
.usage-details-section {
margin-bottom: 2rem;
}
.usage-section-title {
color: var(--pale-green-dark);
margin-bottom: 1rem;
font-size: 1.1em;
font-weight: 600;
}
.dark-mode .usage-section-title {
color: var(--pale-green);
}
.selected-month-indicator {
color: var(--dark-grey);
font-weight: normal;
font-size: 0.9em;
}
.dark-mode .selected-month-indicator {
color: var(--light-grey);
}
.month-link {
color: var(--pale-green-dark);
cursor: pointer;
text-decoration: underline;
font-weight: 600;
}
.month-link:hover {
color: var(--pale-green-darker);
}
.dark-mode .month-link {
color: var(--pale-green);
}
.dark-mode .month-link:hover {
color: var(--pale-green);
opacity: 0.8;
}
.no-usage-data {
text-align: center;
padding: 2rem;
color: #666;
font-style: italic;
}
.copy-cell-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.copy-icon {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.copy-icon:hover {
opacity: 1;
}
.tool-type-subChat {
background-color: #e3f2fd;
color: #1565c0;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.tool-type-processStep {
background-color: #f3e5f5;
color: #7b1fa2;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.tool-type-textEditor {
background-color: #e8f5e8;
color: #2e7d32;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.MainTextEditor .editor-container {
min-height: 50vh;
max-height: calc(100vh - 300px);
overflow-y: auto;
}
.tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 380px); 
}
.MainTextEditor .tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 380px);
}
.tiptap-container {
flex: 1;
position: relative;
}
.autosaving-indicator {
position: absolute;
top: -25px;
right: 10px;
font-size: 11px;
padding: 2px 6px;
border-radius: var(--border-radius-sm);
background-color: var(--medium-grey);
color: var(--dark-grey);
opacity: 0.7;
transition: all 0.3s ease-in-out; 
z-index: 10;
cursor: pointer;
user-select: none;
}
.autosaving-indicator:hover {
opacity: 1;
background-color: var(--dark-grey);
color: var(--light-grey);
}
.autosaving-indicator.saving {
background-color: var(--button-green);
color: white;
opacity: 1;
cursor: default;
}
.autosaving-indicator.saving:hover {
background-color: var(--button-green); 
}
.dark-mode .autosaving-indicator {
background-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .autosaving-indicator:hover {
background-color: var(--lightest-grey);
color: var(--dark-grey);
}
.dark-mode .autosaving-indicator.saving {
background-color: var(--button-green);
color: white;
}
.breakpoints-indicator {
position: absolute !important;
top: -25px;
left: 10px;
font-size: 11px;
z-index: 10;
width: fit-content;
}
.breakpoints-header {
padding: 2px 6px;
border-radius: var(--border-radius-sm);
background-color: var(--medium-grey);
color: var(--dark-grey);
opacity: 0.7;
transition: all 0.3s ease-in-out;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
}
.breakpoints-header:hover {
opacity: 1;
background-color: var(--dark-grey);
color: var(--light-grey);
}
.breakpoints-header .fa-caret-down {
transition: transform 0.2s ease;
}
.breakpoints-header .fa-caret-down.rotated {
transform: rotate(180deg);
}
.breakpoints-count {
font-weight: bold;
margin-left: 2px;
}
.breakpoints-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 450px;
max-width: 600px;
background: #ffffff;
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--border-radius, 8px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
padding: 5px;
padding-bottom: 0px;
margin-top: 4px;
z-index: 1000;
}
.breakpoints-actions {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.breakpoints-actions .btn {
background: var(--primary-color, #3b82f6);
color: white;
border: none;
border-radius: var(--border-radius-sm, 6px);
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.breakpoints-actions .btn:hover:not(:disabled) {
background: var(--primary-color-dark, #2563eb);
transform: translateY(-1px);
}
.breakpoints-actions .btn:disabled {
background: var(--medium-grey, #9ca3af);
cursor: not-allowed;
transform: none;
}
.breakpoints-items {
max-height: 80vh;
height: fit-content;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-color, #e2e8f0) transparent;
}
.breakpoints-items::-webkit-scrollbar {
width: 6px;
}
.breakpoints-items::-webkit-scrollbar-track {
background: transparent;
}
.breakpoints-items::-webkit-scrollbar-thumb {
background: var(--border-color, #e2e8f0);
border-radius: 3px;
}
.breakpoint-item {
display: flex;
flex-direction: column;
padding: 12px;
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--border-radius-sm, 6px);
margin-bottom: 8px;
cursor: pointer;
position: relative;
background: #ffffff;
}
.breakpoint-item:hover {
background: var(--hover-bg, #f8fafc);
border-color: var(--primary-color, #3b82f6);
}
.breakpoint-item.active {
background: var(--primary-color-light, #eff6ff);
border-color: var(--primary-color, #3b82f6);
}
.breakpoint-name {
font-weight: 600;
font-size: 13px;
color: var(--text-color, #1f2937);
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
.breakpoint-name-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breakpoint-timestamp {
font-size: 10px;
font-weight: 400;
color: var(--text-muted, #6b7280);
white-space: nowrap;
flex-shrink: 0;
}
.breakpoint-preview {
font-size: 12px;
color: var(--text-muted, #6b7280);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.breakpoint-remove-btn.remove-file-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
opacity: 0;
}
.breakpoint-remove-btn.remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
opacity: 1;
}
.breakpoint-remove-btn.remove-file-btn i {
font-size: 14px;
}
.breakpoint-item:hover .breakpoint-remove-btn {
opacity: 1;
}
.no-breakpoints {
text-align: center;
color: var(--text-muted, #6b7280);
font-size: 13px;
padding: 24px 16px;
font-style: italic;
background: var(--background-light, #f9fafb);
border-radius: var(--border-radius-sm, 6px);
border: 1px dashed var(--border-color, #e2e8f0);
margin-bottom: 5px;
}
.dark-mode .breakpoints-header {
background-color: var(--medium-dark-grey, #4a5568);
color: var(--light-grey, #f7fafc);
}
.dark-mode .breakpoints-header:hover {
background-color: var(--lightest-grey, #718096);
color: var(--dark-grey, #2d3748);
}
.dark-mode .breakpoints-dropdown {
background: #000000;
border-color: var(--border-color-dark, #4a5568);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
.dark-mode .breakpoints-actions {
border-bottom-color: var(--border-color-dark, #4a5568);
}
.dark-mode .breakpoint-remove-btn.remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .breakpoint-remove-btn.remove-file-btn:hover {
background: var(--error-red);
}
.dark-mode .breakpoints-actions .btn {
background: var(--primary-color, #3b82f6);
}
.dark-mode .breakpoints-actions .btn:hover:not(:disabled) {
background: var(--primary-color-dark, #2563eb);
}
.dark-mode .breakpoints-actions .btn:disabled {
background: var(--medium-dark-grey, #4a5568);
}
.dark-mode .breakpoint-item {
background: #000000;
border-color: var(--border-color-dark, #4a5568);
}
.dark-mode .breakpoint-item:hover {
background: var(--hover-bg-dark, #374151);
border-color: var(--primary-color, #3b82f6);
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}
.dark-mode .breakpoint-item.active {
background: var(--primary-color-dark-light, #1e3a8a);
border-color: var(--primary-color, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.dark-mode .breakpoint-name {
color: var(--text-color-dark, #f7fafc);
}
.dark-mode .breakpoint-timestamp {
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .breakpoint-preview {
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .no-breakpoints {
background: var(--background-dark-light, #374151);
border-color: var(--border-color-dark, #4a5568);
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .breakpoints-items::-webkit-scrollbar-thumb {
background: var(--border-color-dark, #4a5568);
}
.dark-mode .autosaving-indicator.saving:hover {
background-color: var(--button-green); 
}
.tiptap-container .copy-as-wrapper {
bottom: 1px !important;
}
.tiptap-container-right {
flex: 0 0 200px;
}
.tiptap-container-right button {
padding: 1px 4px;
font-size: 12px;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
text-wrap-mode: nowrap;
}
.tiptap-container-right-textarea {
min-height: 80px;
border: 1px solid var(--medium-grey);
padding: 5px;
border-radius: 5px;
color: var(--dark-grey);
font-size: 12px;
margin-bottom: 10px;
}
.dark-mode .tiptap-container-right-textarea {
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container-right-textarea:focus {
outline: none;
}
.tiptap-container-right-open-ended-tools {
font-size: 10px;
padding-bottom: 5px;
padding-top: 5px;
}
.tiptap-container-right-open-ended-tools select {
width: 100%;
height: 20px !important;
}
.tiptap-container-right-open-ended-checkbox {
display: flex;
align-content: center;
gap: 5px;
}
.tiptap-container-right-open-ended-checkbox input {
margin-top: 0px !important;
}
.tiptap-container .menu-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px;
background: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
margin-bottom: 10px;
padding-right: 80px;
}
.dark-mode .tiptap-container .menu-bar {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container .menu-bar button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 2px 8px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
gap: 5px;
height: 30px;
}
.dark-mode .tiptap-container .menu-bar button {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.tiptap-container .menu-bar button:hover {
background: var(--medium-light-grey);
}
.dark-mode .tiptap-container .menu-bar button:hover {
background: var(--medium-dark-grey);
}
.tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: var(--dark-grey);
border-color: var(--pale-green);
}
.dark-mode .tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: var(--dark-grey);
border-color: var(--pale-green);
}
.tiptap-container .menu-bar .marker-labels-container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 4px;
}
.tiptap-container .menu-bar .marker-labels-container button {
padding: 2px 6px;
font-size: 10px;
white-space: nowrap;
}
.tiptap-container .menu-bar.marker-labels-container button i {
font-size: 10px;
}
.marker-dropdown-container {
position: relative;
display: inline-block;
}
.marker-toggle-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 10px;
white-space: nowrap;
cursor: pointer;
min-width: auto;
}
.marker-toggle-btn .fa-chevron-down {
transition: transform 0.2s ease;
font-size: 8px;
}
.marker-toggle-btn .fa-chevron-down.rotated {
transform: rotate(180deg);
}
.marker-dropdown-overlay {
position: absolute;
top: 100%;
left: 0;
min-width: 120px;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.dark-mode .marker-dropdown-overlay {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.marker-dropdown-overlay button {
padding: 4px 8px;
font-size: 10px;
white-space: nowrap;
text-align: left;
background: transparent;
border: none;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: background-color 0.2s ease;
}
.marker-dropdown-overlay button:hover {
background: var(--medium-light-grey);
}
.dark-mode .marker-dropdown-overlay button:hover {
background: var(--medium-dark-grey);
}
.marker-dropdown-overlay button i {
font-size: 9px;
}
.tiptap-container .editor-container {
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
padding: 10px;
min-height: 250px;
background: var(--lightest-grey);
position: relative; 
border-radius: 5px;
}
.modal-body .tiptap-container .editor-container {
min-height: 150px;
}
.dark-mode .tiptap-container .editor-container {
color: var(--light-grey);
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container .context-menu {
position: fixed;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
padding: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
list-style: none;
margin: 0;
padding: 5px 0;
z-index: 1000;
}
.dark-mode .tiptap-container .context-menu {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.tiptap-container .context-menu li {
padding: 8px 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.tiptap-container .context-menu li:hover {
background: var(--medium-light-grey);
}
.tiptap-container .heading-selector {
height: 30px !important;
margin: 0px !important;
}
.dark-mode .tiptap-container .heading-selector {
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px !important;
}
.color-container {
position: relative;
display: inline-block;
}
.color-button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
}
.color-button i {
font-size: 16px;
}
.color-button:hover {
background: var(--medium-light-grey);
}
.tiptap-container input.color-picker {
border: none;
width: 34px;
height: 30px;
cursor: pointer;
background: none;
border-radius: 5px;
padding: 0;
border: 1px solid var(--medium-dark-grey) !important;
}
.aiBtns-container {
display: flex;
flex-direction: column;
align-items: flex-start;
border-top: 1px solid var(--medium-grey);
padding-top: 5px;
margin-top: 5px;
}
.aiBtns-container .list-group {
width: 100%;
}
.dark-mode .aiBtns-container {
border-top: 1px solid var(--medium-dark-grey);
}
.aiBtnsEdit {
position: absolute;
right: 5px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
.dark-mode .aiBtnsEdit {
color: var(--light-grey);
}
.aiBtnsEdit div {
text-align: right;
}
.add-ai-btn {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-size: 12px;
color: var(--dark-grey);
padding: 5px 10px;
}
.dark-mode .add-ai-btn {
color: var(--light-grey);
}
.aiBtns-container .list-group .handle {
color: var(--dark-grey);
}
.dark-mode .aiBtns-container .list-group .handle {
color: var(--light-grey);
}
.vue-tooltip {
position: absolute;
left: 0;
background-color: #262626 !important;
border: #606060 solid 1px;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 12px;
z-index: 1000;
white-space: nowrap;
height: 22px;
font-weight: 400;
width: fit-content;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.tooltip-help-div {
position: absolute !important;
width: 100%;
height: 100%;
z-index: 1;
cursor: not-allowed;
}
.select-to-activate {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
margin-left: 5px;
}
.tiptap-container-right > div > .select-to-activate:not(.aiBtns-container .select-to-activate) {
margin-bottom: -10px;
}
.dark-mode .select-to-activate {
color: var(--light-grey);
}
.btn-group {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.btn-group-header {
font-size: 8px;
color: var(--medium-grey);
margin-bottom: 5px;
text-transform: uppercase;
}
.btn-group-name {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.btn-group-name-edit {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.dark-mode .btn-group {
color: var(--light-grey);
}
.dark-mode .btn-group-header {
color: var(--medium-grey);
}
.dark-mode .btn-group-name {
color: var(--light-grey);
cursor: pointer;
}
.dark-mode .btn-group-name-edit {
color: var(--light-grey);
}
.collaboration-cursor__caret {
position: relative;
display: inline-block;
vertical-align: text-top;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: -1px;
margin-right: -1px;
height: 1.1em;
word-break: normal;
pointer-events: none;
border-color: var(--user-color, black);
}
.dark-mode .collaboration-cursor__caret {
border-color: var(--user-contrast-color, white);
}
.collaboration-cursor__label {
position: absolute;
top: -1.45em;
left: -1px;
font-size: 11px;
font-weight: 600;
line-height: normal;
white-space: nowrap;
padding: 3px 6px;
border-radius: 4px 4px 4px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background-color: var(--user-color, grey);
color: var(--user-contrast-color, white);
user-select: none;
pointer-events: none;
z-index: 10;
}
@keyframes collaboration-cursor-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes downloadButtonAppear {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.8);
}
50% {
opacity: 1;
transform: translateY(-2px) scale(1.1);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes downloadButtonPulse {
0%, 100% {
transform: scale(1);
background-color: var(--medium-grey);
box-shadow: 0 0 5px rgba(28, 167, 61, 0.3);
}
50% {
transform: scale(1.05);
background-color: rgba(28, 167, 61, 0.8);
box-shadow: 0 0 15px rgba(28, 167, 61, 0.6);
}
}
.copy-as-wrapper {
position: absolute;
right: 6px;
bottom: 0px;
border-bottom-right-radius: 4px;
display: flex;
gap: 5px;
height: 20px;
flex-direction: row;
width: 250px;
justify-content: end;
}
.download-as-docx, .download-as-excel, .copy-as-html, .copy-as-text, .replace-original-text {
cursor: pointer;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
padding: 0 8px;
font-size: 10px;
background-color: var(--medium-grey);
color: var(--dark-grey);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
white-space: nowrap;
transition: all 0.3s ease;
}
.download-as-docx, .download-as-excel, .replace-original-text {
animation: downloadButtonAppear 0.6s ease-out, downloadButtonPulse 0.6s ease-in-out 0.6s 3;
}
.dark-mode .download-as-docx, .dark-mode .download-as-excel, .dark-mode .copy-as-html, .dark-mode .copy-as-text, .dark-mode .replace-original-text {
background-color: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode .download-as-docx, .dark-mode .download-as-excel, .dark-mode .replace-original-text {
animation: downloadButtonAppear 0.6s ease-out, downloadButtonPulseDark 0.6s ease-in-out 0.6s 3;
}
@keyframes downloadButtonPulseDark {
0%, 100% {
transform: scale(1);
background-color: var(--dark-grey);
box-shadow: 0 0 5px rgba(28, 167, 61, 0.4);
}
50% {
transform: scale(1.05);
background-color: rgba(28, 167, 61, 0.3);
box-shadow: 0 0 15px rgba(28, 167, 61, 0.8);
}
}
.tiptap-container-right-textarea[data-placeholder]:empty::before,
.tiptap-container-right-textarea.is-empty::before {
position: absolute;
content: attr(data-placeholder);
color: #999;
cursor: text;
}
.clear-icon {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: var(--pale-green-dark);
}
.dark-mode .clear-icon {
color: var(--pale-green);
}
.is-ready {
cursor: not-allowed;
}
.menu-bar.is-ready {
opacity: 0.5;
}
.menu-bar.is-ready:after, 
.editor-container.is-ready div:first-of-type:after, 
.tiptap-container-right.is-ready:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: not-allowed;
z-index: 1000;
}
.editor-container.is-ready div:first-of-type {
user-select: none; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
}
.tiptap-container-right > div > .button-container:not(.aiBtns-container .button-container) {
margin-top: 15px;
}
.button-container .remove-btn {
width: 24px;
height: 100%;
padding: 0;
}
.button-container .remove-btn:hover {
background-color: var(--error-red);
color: white;
}
.dark-mode .button-container .remove-btn {
background-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .button-container .remove-btn:hover {
background-color: var(--error-red);
color: white;
}
.mark-as-ready-container {
width: 100%;
position: absolute;
right:0px;
z-index: 1001;
height: 0px;
}
.subchat-help-column-button {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.comments-status-container {
display: flex;
align-items: center;
gap: 8px;
padding: 0 0 0 5px;
background: var(--pale-green-light);
border: 2px solid var(--pale-green);
border-radius: var(--border-radius-md);
margin-bottom: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.comments-status {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.comments-status-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 5px 0px;
}
.comments-status-icon.status-pending {
background: #ffc107;
color: #212529;
}
.comments-status-icon.status-has-comments {
background: #ffc107;
color: #212529;
}
.comments-status-icon.status-approved {
background: #28a745;
color: white;
}
.comments-status-icon.status-rejected {
background: #dc3545;
color: white;
}
.comments-status-text {
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
}
.comments-status-label {
font-weight: 500;
color: var(--dark-grey);
font-size: 14px;
}
.comments-status-details {
font-size: 12px;
color: var(--dark-grey);
margin-left: 4px;
}
.approval-count-container {
position: relative;
margin-left: 8px;
display: inline-block;
}
.approval-count-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
padding: 2px 6px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 12px;
white-space: nowrap;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.approval-count-tag:hover {
background-color: #c3e6cb;
}
.approval-count-tag i {
font-size: 9px;
}
.approval-hover-modal {
position: absolute;
top: 100%;
left: 0;
background: white;
border: 1px solid #ddd;
border-radius: 6px;
z-index: 1000;
min-width: 200px;
max-width: 300px;
margin-top: 4px;
overflow: hidden;
}
.approval-hover-header {
padding: 8px 12px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
font-weight: 600;
font-size: 11px;
color: #495057;
}
.approval-hover-emails {
max-height: 200px;
overflow-y: auto;
}
.approval-hover-email {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 11px;
color: #155724;
border-bottom: 1px solid #f1f3f4;
}
.approval-hover-email:last-child {
border-bottom: none;
}
.approval-hover-email i {
font-size: 10px;
color: #28a745;
}
.dark-mode .approval-hover-modal {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.dark-mode .approval-hover-header {
background-color: var(--darkest-grey);
border-bottom: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .approval-hover-email {
color: var(--light-grey); 
}
.comments-toggle-btn {
background-color: #f4f4f4 !important;
color: #333 !important;
border: 1px solid #ddd !important;
font-size: 12px;
padding: 4px 8px;
}
.comments-toggle-btn:hover:not(.btn-primary) {
background-color: #e9e9e9 !important;
}
.comments-toggle-btn.btn-primary {
background-color: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
}
.comments-toggle-btn.btn-primary:hover {
background-color: var(--primary-color-dark) !important;
}
.dark-mode .comments-status-container {
background: rgba(182, 215, 168, 0.15);
border: 2px solid var(--pale-green-dark);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dark-mode .comments-status-label {
color: var(--light-grey);
}
.dark-mode .comments-status-details {
color: var(--medium-grey);
}
@media (max-width: 768px) {
.comments-status-container {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.comments-status {
justify-content: center;
}
.comments-status-text {
align-items: center;
text-align: center;
}
.tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 420px); 
}
.MainTextEditor .tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 420px);
}
}
.main-action-buttons-wrapper {
display: flex;
gap: 0px;
position: absolute;
justify-content: flex-end;
width: 50%;
right: 0px;
}
.continue-editing-btn {
position: absolute;
right: 0;
}
.tiptap-content .has-comment {
position: relative;
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
padding-left: calc(var(--spacing-sm) + 3px);
margin-left: -3px;
cursor: pointer;
transition: all 0.2s ease;
}
.tiptap-content .has-comment:hover {
background-color: rgba(33, 150, 243, 0.1);
border-left-color: var(--info-blue-hover, #1976d2);
}
.tiptap-content .has-comment::after {
content: "💬";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--info-blue);
font-size: 14px;
opacity: 0.8;
pointer-events: none;
}
.tiptap-content .has-orphaned-comment {
border-left: 3px solid var(--warning-yellow);
background-color: rgba(255, 193, 7, 0.05);
}
.tiptap-content .has-orphaned-comment:hover {
background-color: rgba(255, 193, 7, 0.1);
}
.tiptap-content .has-orphaned-comment::after {
content: "⚠️";
color: var(--warning-yellow);
}
.dark-mode .tiptap-content .has-comment {
background-color: rgba(33, 150, 243, 0.1);
border-left-color: var(--info-blue);
}
.dark-mode .tiptap-content .has-comment:hover {
background-color: rgba(33, 150, 243, 0.15);
}
.dark-mode .tiptap-content .has-orphaned-comment {
background-color: rgba(255, 193, 7, 0.1);
}
.dark-mode .tiptap-content .has-orphaned-comment:hover {
background-color: rgba(255, 193, 7, 0.15);
}
.tiptap-content .has-comment:active {
background-color: rgba(33, 150, 243, 0.15);
transform: translateX(2px);
}
@media (max-width: 768px) {
.tiptap-content .has-comment::after {
right: 4px;
font-size: 12px;
}
}
.vue-tooltip {
position: absolute;
left: 0;
background-color: #262626 !important;
border: #606060 solid 1px;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 12px;
z-index: 1000;
white-space: nowrap;
height: 22px;
font-weight: 400;
width: fit-content;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.tooltip-help-div {
position: absolute !important;
width: 100%;
height: 100%;
z-index: 1;
cursor: not-allowed;
}
.dark-mode .vue-tooltip {
background-color: #1a1a1a !important;
border-color: #404040;
}
.Vue-Toastification__container {
z-index: var(--z-index-toast) !important;
}
.Vue-Toastification__toast--success {
background-color: var(--button-green-hover) !important;
}
.Vue-Toastification__toast--error {
background-color: var(--error-red-dark) !important;
}
.Vue-Toastification__toast--warning {
background-color: var(--warning-yellow) !important;
}
.Vue-Toastification__toast--info {
background-color: var(--info-blue) !important;
}
.Vue-Toastification__toast--default {
background-color: var(--info-blue) !important;
}
body.mobile .Vue-Toastification__container.bottom-center {
bottom: 80px !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
max-width: 100vw !important;
width: 100vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
body.mobile .Vue-Toastification__toast {
margin: 0 0 10px 0 !important;
max-width: none !important;
width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
box-sizing: border-box !important;
}
body.mobile.view-dashBoard .Vue-Toastification__toast {
max-width: none !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
box-sizing: border-box !important;
}
body.mobile.view-dashBoard .Vue-Toastification__container.bottom-center {
left: 0 !important;
right: 0 !important;
transform: none !important;
max-width: 100vw !important;
width: 100vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
.view-processes .data-table-container {
min-width: 1200px;
}
#readyImg {
display: flex;
gap: 10px;
overflow: auto;
padding-bottom: 10px;
padding-top: 10px;
}
#readyImg:empty {
display: none;
}
#readyImg img {
height: 100px;
object-fit: contain;
border: 1px solid gray;
max-width: 300px;
}
.removeImgBtn {
position: absolute;
z-index: 1;
text-align: center;
bottom: 10px;
width: 80px;
left: calc(50% - 40px);
margin: 0px !important;
display: none;
}
#readyImg:hover .removeImgBtn {
display: block;
}
#screenshots {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000000;
padding: 30px 30px 30px 200px;
}
.dark-mode #screenshots {
background-color: rgba(0, 0, 0, 1) !important;
}
#screenshotBtns {
position: absolute;
left: 10px;
top: 0px;
height: 100vh;
display: flex;
width: 180px;
flex-direction: column;
justify-content: center;
}
.cropper-container,
.screenshot-container {
height: 100%;
width: 100%;
border: dashed 1px var(--medium-dark-grey);
}
.screenshot-container>img {
width: 100%;
height: 100%;
object-fit: contain;
}
.process-runs-container {
width: 100%;
overflow-x: auto;
}
.subchat-navigation {
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
position: relative;
}
.subchat-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
padding-right: 40px; 
}
.subchat-tab {
padding: 6px 12px;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 10px;
display: flex;
align-items: center;
gap: 6px;
position: relative;
max-width: 200px;
min-width: 0;
color: var(--darkest-grey);
}
.subchat-tab span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.subchat-tab:hover {
background: var(--light-grey);
border-color: var(--dark-grey);
}
.subchat-tab.active {
background: var(--pale-green-dark);
color: white;
border-color: var(--pale-green-dark);
}
.dark-mode .subchat-tab {
background: var(--darkest-grey);
border: 1px solid var(--medium-grey);
color: var(--light-grey);
}
.dark-mode .subchat-tab:hover {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .subchat-tab.active {
background: black;
color: var(--light-grey);
border-color: var(--pale-green);
}
.subchat-tab.add-subchat {
background: transparent;
border: 1px dashed var(--border-default);
color: var(--pale-green-dark);
padding: 6px 10px;
position: absolute;
right: 0;
top: 0px;
min-width: auto;
font-size: 14px;
}
.dark-mode .subchat-tab.add-subchat {
color: var(--pale-green);
}
.subchat-tab.add-subchat:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--primary-color-light);
}
.subchat-tab .remove-subchat {
font-size: 11px;
opacity: 0.7;
transition: opacity 0.2s;
flex-shrink: 0;
}
.subchat-tab:hover .remove-subchat {
opacity: 1;
}
.subchat-tab.active .remove-subchat {
color: white;
}
.dark-mode .subchat-tab.active .remove-subchat {
color: var(--light-grey);
}
.no-subchat-message {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
}
.no-subchat-message p {
margin-bottom: 10px;
font-size: 12px;
text-align: center;
}
.no-subchat-message .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
:root {
--process-bg-light: var(--lightest-grey);
--process-bg-dark: var(--darkest-grey);
--process-border-light: var(--medium-grey);
--process-border-dark: var(--medium-dark-grey);
--process-border-semi-dark: var(--semi-dark-grey);
--process-text-light: var(--dark-grey);
--process-text-dark: var(--light-grey);
--process-active-bg: var(--pale-green);
--process-active-border: var(--dark-grey);
--process-active-text: var(--dark-grey);
--process-active-icon: var(--pale-green);
--process-arrow-light: var(--dark-grey);
--process-arrow-dark: white;
--process-arrow-inactive: var(--medium-grey);
}
.run-stage-toggle {
position: absolute;
right: 5px;
top: -5px;
cursor: pointer;
color: var(--process-text-light);
z-index: 1;
font-size: 16px;
}
.run-stage-toggle.left {
left: 10px;
}
.dark-mode .run-stage-toggle {
color: var(--process-text-dark);
}
.runNavigation {
flex-basis: 200px;
transition: flex-basis 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.runNavigation.runNavigation-collapsed {
flex-basis: 35px;
}
.messageColumn {
flex-basis: 30%;
flex-grow: 1;
flex-shrink: 1;
padding: 0px !important;
margin-top: 20px;
transition: flex-basis 0.8s cubic-bezier(0.4, 0, 0.2, 1);
max-width: calc( 100% - 300px);
}
.helpColumn-container {
position: relative;
}
.helpColumn {
display: flex;
width: 40vw;
min-width: 35px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.helpColumn-collapsed {
width: 35px;
}
.helpColumn-stable-wrapper {
position: absolute;
left: 0px;
top: 20px;
width: calc(40vw - 20px);
height: 100%;
z-index: 2;
}
.helpColumn-stable-wrapper.hidden {
}
.helpColumn-content {
padding: 0 20px 0 20px;
border-radius: 5px;
border: 1px solid var(--process-border-light);
max-height: calc(100vh - 130px);
overflow: auto;
position: sticky;
top: 20px;
}
.dark-mode .helpColumn-content {
border-color: var(--process-border-dark);
}
.process-steps-vertical-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
margin: 20px 0 0 0;
}
.process-steps-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
min-width: 40px;
margin-bottom: 20px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), padding 0.8s cubic-bezier(0.4, 0, 0.2, 1);
padding: 50px 10px 20px;
border-radius: 5px;
border: 1px solid var(--process-border-light);
overflow-y: hidden;
position: sticky;
top: 50px;
}
.process-run-view.guest .process-steps-vertical {
padding: 20px 10px 10px;
}
.dark-mode .process-steps-vertical {
border-color: var(--process-border-semi-dark);
}
.process-steps-vertical.collapsed {
margin-bottom: 0;
padding-top: 15px;
}
.step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 75px;
}
.step-circle-wrapper .rerunBtn {
position: absolute;
right: -40px;
top: 0px;
font-size: 10px;
padding: 2px 5px;
}
.step-circle {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--process-text-light);
background: var(--process-bg-light);
color: var(--process-text-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: border-color 0.2s;
margin-bottom: 0;
z-index: 2;
position: relative;
}
.step-circle.active {
border-color: var(--process-active-border);
border-width: 1px;
background: var(--process-active-bg);
color: var(--process-active-text);
}
.step-circle.notStarted {
border: 1px solid var(--process-border-light);
background: var(--process-bg-light);
color: var(--process-text-light);
}
.step-circle.notStarted i {
opacity: 0.5;
}
.step-circle.shownstep {
border-style: solid;
}
.step-circle-indicator {
content: '';
display: block;
position: absolute;
left: -20px;
top: 13px;
background-color: var(--process-active-bg);
width: 10px;
height: 10px;
border-radius: 100px;
}
.process-steps-vertical.collapsed .step-circle.active:before {
display: none;
}
.step-details {
position: absolute;
max-width: 150px;
text-align: center;
top: 45px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
border-radius: 5px;
border: 1px solid var(--process-text-light);
background: var(--pale-green);
color: var(--process-text-light);
padding: 0 3px;
transition: opacity 0.3s ease;
}
.step-details.truncated:hover {
cursor: pointer;
white-space: normal;
z-index: 3;
max-width: 180px;
width: 180px;
}
.step-details.notStarted {
border-color: var(--process-border-light);
background: var(--process-border-light);
color: var(--process-text-light);
}
.dark-mode .step-details {
border-color: var(--process-border-dark);
background: var(--process-text-light);
color: var(--process-text-dark);
}
.step-arrow {
width: 1px;
height: 35px;
background: var(--process-arrow-light);
margin: 0 auto;
position: relative;
}
.step-arrow.notStarted {
background: var(--process-arrow-inactive);
}
.step-arrow::after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
border-width: 6px 4px 0 4px;
border-style: solid;
border-color: var(--process-arrow-light) transparent transparent transparent;
width: 0;
height: 0;
}
.step-tools {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 5px;
transition: opacity 0.3s ease;
margin-top: 0px;
margin-left: 5px;
position: sticky;
bottom: 20px;
}
.step-tools button {
margin: 0px;
}
.process-steps-vertical.collapsed + .step-tools {
display: none !important;
}
.dark-mode .step-circle {
background: var(--process-bg-dark);
border-color: var(--process-arrow-dark);
color: var(--process-text-dark);
}
.dark-mode .step-circle > i {
font-size: 18px;
}
.dark-mode .step-circle.active {
border-color: var(--process-active-icon);
}
.dark-mode .step-circle.active > i {
color: var(--process-active-icon);
}
.dark-mode .step-circle.notStarted {
border-color: var(--process-border-dark);
}
.dark-mode .step-arrow {
background-color: var(--process-arrow-dark);
}
.dark-mode .step-arrow.notStarted:after,
.dark-mode .step-arrow.active:after {
border-color: var(--process-arrow-inactive) transparent transparent transparent;
}
.dark-mode .step-arrow.notStarted,
.dark-mode .step-arrow.active {
background-color: var(--process-arrow-inactive);
}
.dark-mode .step-arrow::after {
border-color: var(--process-arrow-dark) transparent transparent transparent;
}
.process-steps-vertical-header {
width: 100%;
margin-bottom: 10px;
transition: margin-bottom 0.3s ease;
position: absolute;
}
.process-run-view.guest .process-steps-vertical-header {
display: none;
}
.process-steps-vertical-header.hidden {
opacity: 0;
visibility: hidden;
height: 0;
margin: 0;
overflow: hidden;
}
.run-name {
display: flex;
align-items: center;
gap: 5px;
top: -45px;
width: 190px;
left: 5px;
justify-content: center;
position: relative;
padding: 0 20px;
}
.run-name-title {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.run-name-edit {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.textarea-container {
position: relative;
z-index: 1;
}
.light-mode .use-input-checkbox-label {
padding: 2px 4px;
background-color: white;
border-radius: 4px;
border: 1px solid var(--light-grey);
}
.use-input-checkbox {
position: relative;
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
width: 100%;
height: 20px;
justify-content: flex-start;
padding: 0px 0px 5px 25px;
}
.use-input-checkbox input[type="checkbox"] {
margin: 0;
width: 14px;
height: 14px;
}
.input-files-attached {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 20px;
justify-content: flex-start;
padding: 0px 0px 5px 25px;
}
.input-files-indicator {
padding: 2px 6px;
background-color: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 4px;
font-size: 11px;
color: #4CAF50;
}
.screenshot-preview {
display: flex;
justify-content: center;
}
.template-selection-cards {
max-width: 800px !important;
}
body:not(.mobile) .process-run-view-title {
max-width: 1200px !important;
margin-right: auto;
}
.template-selection-description {
margin-bottom: 1.5rem;
color: #666;
line-height: 1.5;
font-size: 0.95rem;
text-align: center;
padding-top: 50px;
max-width: 800px;
}
[data-theme="dark"] .template-selection-description {
color: #aaa;
}
.input-tools-prompt-item {
margin-top: 25px;
}
.input-tools-prompt .template-card {
cursor: pointer;
transition: all 0.2s ease;
}
.input-tools-prompt .template-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.help-toggle-btn {
position: fixed;
top: 7px;
right: 7px;
width: 40px;
height: 40px;
background: var(--pale-green-dark);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0);
animation: helpButtonAppear 0.3s ease-out 0.3s forwards, helpButtonGlow 1.5s ease-in-out 4 0.6s;
}
.help-toggle-btn:hover {
background: var(--pale-green);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
animation-play-state: paused;
opacity: 1;
}
.dark-mode .help-toggle-btn {
background: var(--pale-green-darker);
}
.dark-mode .help-toggle-btn:hover {
background: var(--pale-green);
}
.help-toggle-btn.no-animation {
animation: none !important;
opacity: 1 !important;
transform: scale(1) !important;
}
.help-toggle-btn.no-animation::before {
animation: none !important;
transform: scale(1) translateY(-50%) !important;
}
.help-toggle-btn.no-animation::after {
animation: none !important;
}
.help-toggle-btn.no-animation:hover {
transform: scale(1.1) !important;
}
.help-toggle-btn::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--pale-green);
z-index: 1001;
animation: speechBubbleShow 6s ease-in-out 1;
animation-delay: 0.3s;
}
.help-toggle-btn::before {
content: '';
position: absolute;
right: calc(100% + 7px);
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--pale-green-dark);
z-index: 1002; 
animation: speechBubbleShow 6s ease-in-out 1;
animation-delay: 0.3s;
}
.help-toggle-btn:not(.no-animation)::after,
.help-toggle-btn:not(.no-animation)::before {
opacity: 0;
visibility: hidden;
}
.help-toggle-btn.no-animation::after,
.help-toggle-btn.no-animation::before {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.help-toggle-btn.no-animation:hover::after,
.help-toggle-btn.no-animation:hover::before {
opacity: 1;
visibility: visible;
}
.help-toggle-btn::after {
background: var(--light-grey);
color: var(--darkest-grey);
border: 1px solid var(--pale-green-dark);
}
.dark-mode .help-toggle-btn::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--pale-green);
}
.dark-mode .help-toggle-btn::before {
border-left-color: var(--pale-green);
}
.help-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
}
.help-exit-btn {
position: fixed;
top: 7px;
right: 20px;
width: 40px;
height: 40px;
background: var(--danger-color, #dc3545);
border: none;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1002;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.help-exit-btn:hover {
background: #c82333;
transform: scale(1.1);
}
.help-exit-btn::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--danger-color, #dc3545);
opacity: 1;
visibility: visible;
z-index: 1001;
}
.help-exit-btn::before {
content: '';
position: absolute;
right: calc(100% + 7px);
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--danger-color, #dc3545);
opacity: 1;
visibility: visible;
z-index: 1001;
}
.dark-mode .help-exit-btn::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--danger-color, #dc3545);
}
.dark-mode .help-exit-btn::before {
border-left-color: var(--danger-color, #dc3545);
}
.instruction-indicators {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
}
.instruction-indicator {
position: absolute;
width: 30px;
height: 30px;
background: var(--pale-green-darker);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
cursor: pointer;
pointer-events: auto;
z-index: 1002;
transition: background-color 0.3s ease;
}
.dark-mode .instruction-indicator {
background: var(--pale-green-darker);
}
.instruction-indicator:hover {
background: var(--pale-green) !important;
animation: none !important;
}
.dark-mode .instruction-indicator:hover {
background: var(--pale-green) !important;
}
.instruction-indicator.glow-stopped {
animation: none !important;
}
.instruction-indicator:not(.glow-stopped) {
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.instruction-indicator.indicator-active {
background: var(--pale-green) !important;
animation: none !important;
box-shadow: 
0 0 20px rgba(144, 238, 144, 1),
0 0 10px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3) !important;
transform: scale(1.1);
border: 2px solid rgba(144, 238, 144, 0.8);
}
.dark-mode .instruction-indicator.indicator-active {
background: var(--pale-green) !important;
}
.instruction-indicator .feature-number {
color: white;
font-weight: bold;
font-size: 14px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.instruction-indicator::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 6px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--pale-green-dark);
opacity: 1;
visibility: visible;
z-index: 1003;
}
.instruction-indicator.tooltip-right::after {
bottom: auto;
left: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
}
.instruction-indicator.tooltip-right::before {
content: '';
position: absolute;
left: calc(100% + 7px);
top: 50%;
transform: translateY(-50%) rotate(90deg);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid var(--pale-green-dark);
border-bottom: 0;
opacity: 1;
visibility: visible;
z-index: 1003;
}
.instruction-indicator.tooltip-left::after {
bottom: auto !important;
left: auto !important;
right: calc(100% + 15px) !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.instruction-indicator.tooltip-left::before {
content: '' !important;
position: absolute !important;
bottom: auto !important;
left: auto !important;
right: calc(100% + 7px) !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 0 !important;
height: 0 !important;
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-left: 8px solid var(--pale-green-dark) !important;
border-right: 0 !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 1003 !important;
}
.instruction-indicator::before {
content: '';
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid var(--pale-green-dark);
opacity: 1;
visibility: visible;
z-index: 1003;
}
.dark-mode .instruction-indicator::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--pale-green);
}
.dark-mode .instruction-indicator::before {
border-top-color: var(--pale-green);
}
.dark-mode .instruction-indicator.tooltip-right::before {
border-top-color: var(--pale-green);
}
.dark-mode .instruction-indicator.tooltip-left::before {
border-left-color: var(--pale-green) !important;
}
@keyframes modalPulseGlow {
0%, 100% {
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 30px rgba(144, 238, 144, 1),
0 0 15px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3);
}
}
@keyframes helpButtonGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 25px rgba(144, 238, 144, 0.9),
0 0 12px rgba(144, 238, 144, 0.7),
0 4px 12px rgba(0,0,0,0.3);
}
}
@keyframes helpButtonAppear {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes speechBubbleShow {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(8px);
}
5%, 95% {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
100% {
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(8px);
}
}
@media (prefers-reduced-motion: reduce) {
.instruction-indicator,
.help-toggle-btn,
.help-toggle-btn::after,
.help-toggle-btn::before {
animation: none !important;
}
}
.instruction-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1003;
display: flex;
align-items: center;
justify-content: center;
}
.instruction-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.instruction-modal-content {
position: relative;
background: var(--light-grey);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow: hidden;
border: 2px solid var(--pale-green);
}
.dark-mode .instruction-modal-content {
background: var(--darkest-grey);
color: var(--light-grey);
}
.instruction-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .instruction-modal-header {
border-bottom-color: var(--medium-dark-grey);
}
.instruction-modal-header h6 {
color: var(--pale-green-dark);
margin: 0;
font-size: 18px;
font-weight: 600;
}
.dark-mode .instruction-modal-header h6 {
color: var(--pale-green);
}
.instruction-modal-close {
background: none;
border: none;
font-size: 18px;
color: var(--dark-grey);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.instruction-modal-close:hover {
background: var(--medium-grey);
color: var(--darkest-grey);
}
.dark-mode .instruction-modal-close {
color: var(--light-grey);
}
.dark-mode .instruction-modal-close:hover {
background: var(--medium-dark-grey);
color: white;
}
.instruction-modal-body {
padding: 10px 5px 10px;
}
.instruction-modal-body p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
}
.dark-mode .instruction-modal-body p {
color: var(--light-grey);
}
.instruction-modal-footer {
padding: 16px 24px 20px;
border-top: 1px solid var(--medium-grey);
}
.dark-mode .instruction-modal-footer {
border-top-color: var(--medium-dark-grey);
}
.instruction-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.instruction-counter {
font-size: 14px;
color: var(--dark-grey);
font-weight: 500;
}
.dark-mode .instruction-counter {
color: var(--light-grey);
}
.instruction-navigation .btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.instruction-navigation .btn.primary {
background: var(--pale-green-dark);
color: white;
}
.instruction-navigation .btn.primary:hover {
background: var(--pale-green);
}
.instruction-navigation .btn.secondary {
background: var(--medium-grey);
color: var(--dark-grey);
}
.instruction-navigation .btn.secondary:hover {
background: var(--dark-grey);
color: white;
}
.dark-mode .instruction-navigation .btn.secondary {
background: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .instruction-navigation .btn.secondary:hover {
background: var(--light-grey);
color: var(--darkest-grey);
}
.instruction-snippets {
position: absolute;
top: -9999px;
left: -9999px;
visibility: hidden;
pointer-events: none;
}
.instruction-snippet {
position: absolute;
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.help-toggle-btn,
.help-exit-btn {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
font-size: 18px;
}
.instruction-modal-content {
width: 95%;
margin: 20px;
}
.instruction-modal-header,
.instruction-modal-body,
.instruction-modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.instruction-navigation {
flex-direction: column;
gap: 8px;
}
.instruction-navigation .btn {
width: 100%;
justify-content: center;
}
}
.instruction-modal-draggable {
position: fixed;
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: inherit;
max-width: 500px;
width: 90%;
max-height: 85vh;
min-height: 200px;
overflow: hidden;
user-select: none;
animation: modalFadeIn 0.3s ease-out;
display: flex;
flex-direction: column;
padding: 20px;
}
.instruction-modal-draggable:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.dark-mode .instruction-modal-draggable {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
color: var(--light-grey);
}
.instruction-modal-header.instruction-modal-draggable-handle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: var(--pale-green-dark);
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
cursor: move;
user-select: none;
}
.instruction-modal-header.instruction-modal-draggable-handle:active {
cursor: grabbing;
}
.instruction-modal-header h3 {
color: white;
margin: 0;
font-size: 18px;
font-weight: 600;
flex: 1;
text-align: center;
}
.dark-mode .instruction-modal-header.instruction-modal-draggable-handle {
background: none;
padding-top: 20px;
margin-bottom: 10px;
}
.dark-mode .instruction-modal-header h3 {
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0.9, 0.1);
}
.instruction-modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--danger-color, #dc3545);
border: none;
font-size: 16px;
color: white;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 10;
}
.instruction-modal-close-btn:hover {
background: #c82333;
transform: scale(1.1);
}
.instruction-modal-content {
display: flex;
flex-direction: column;
width: 100%;
border: none;
flex: 1;
overflow: hidden;
}
.instruction-modal-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
border-bottom: 1px solid var(--medium-grey);
scrollbar-width: thin;
scrollbar-color: var(--pale-green-dark) var(--medium-grey);
}
.instruction-modal-body::-webkit-scrollbar {
width: 6px;
}
.instruction-modal-body::-webkit-scrollbar-track {
background: var(--medium-grey);
border-radius: 3px;
}
.instruction-modal-body::-webkit-scrollbar-thumb {
background: var(--pale-green-dark);
border-radius: 3px;
}
.instruction-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--pale-green);
}
.instruction-modal-body p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
word-wrap: break-word;
overflow-wrap: break-word;
}
.dark-mode .instruction-modal-body {
border-bottom-color: var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body p {
color: var(--light-grey);
}
.dark-mode .instruction-modal-body {
scrollbar-color: var(--pale-green) var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-track {
background: var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-thumb {
background: var(--pale-green);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--pale-green-dark);
}
.step-instructions-section {
margin-top: 20px;
margin-bottom: 10px;
}
.step-instructions-label {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--dark-grey);
margin-bottom: 8px;
}
.dark-mode .step-instructions-label {
color: var(--light-grey);
}
.step-instructions-display {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
padding: 15px;
font-size: 12px;
line-height: 1.6;
color: var(--dark-grey);
min-height: 60px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
font-style: italic;
}
.dark-mode .step-instructions-display {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.instruction-content p {
margin: 0 0 15px 0;
line-height: 1.6;
}
.instruction-content p:last-child {
margin-bottom: 0;
}
.input-content-display {
margin-top: 10px;
}
.input-text-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin-bottom: 15px;
}
.dark-mode .input-text-content {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.input-files-section {
margin-bottom: 20px;
}
.input-files-section:last-child {
margin-bottom: 0;
}
.input-files-title {
color: var(--pale-green-dark);
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
.dark-mode .input-files-title {
color: var(--pale-green);
}
.input-file-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-file-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 10px;
background: var(--lightest-grey);
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--medium-grey);
text-align: center;
}
.dark-mode .input-file-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.input-file-item i {
color: var(--pale-green-dark);
font-size: 14px;
}
.dark-mode .input-file-item i {
color: var(--pale-green);
}
.step-instructions-display .marker {
background-color: #ffd700 !important;
padding: 0px 4px !important;
border-radius: 4px !important;
font-weight: 700 !important;
font-size: 10px !important;
color: #333 !important;
display: inline-flex;
align-items: center;
margin: 0 2px;
white-space: nowrap;
}
.step-instructions-display .marker i {
margin-right: 3px !important;
font-size: 10px !important;
}
.dark-mode .step-instructions-display .marker {
background-color: #ffeb3b !important;
color: #333 !important; 
}
.instruction-modal-footer {
padding: 16px 20px 20px;
border-top: none; 
flex-shrink: 0;
margin: 0 -20px -20px -20px; 
border-radius: 0 0 8px 8px;
background: var(--white);
}
.dark-mode .instruction-modal-footer {
border-top-color: var(--medium-dark-grey);
background: var(--darkest-grey);
}
.instruction-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.instruction-counter {
font-size: 14px;
color: var(--dark-grey);
font-weight: 500;
}
.dark-mode .instruction-counter {
color: var(--light-grey);
}
.instruction-navigation .btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.instruction-navigation .btn.primary {
background: var(--pale-green-dark);
color: white;
}
.instruction-navigation .btn.primary:hover {
background: var(--pale-green);
}
.instruction-navigation .btn.secondary {
background: var(--medium-grey);
color: var(--dark-grey);
}
.instruction-navigation .btn.secondary:hover {
background: var(--dark-grey);
color: white;
}
.dark-mode .instruction-navigation .btn.secondary {
background: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .instruction-navigation .btn.secondary:hover {
background: var(--light-grey);
color: var(--darkest-grey);
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.help-toggle-btn,
.help-exit-btn {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
font-size: 18px;
}
.instruction-modal-draggable {
width: 95% !important;
margin: 20px;
left: 2.5% !important;
top: 20px !important;
max-height: calc(100vh - 40px);
height: auto;
}
.instruction-modal-header.instruction-modal-draggable-handle {
cursor: default; 
padding-left: 20px;
padding-right: 20px;
}
.instruction-modal-body {
padding-left: 20px;
padding-right: 20px;
}
.instruction-modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.instruction-navigation {
flex-direction: column;
gap: 8px;
}
.instruction-navigation .btn {
width: 100%;
justify-content: center;
}
}
.comment-view {
padding: var(--spacing-lg) 0;
font-family: var(--font-family);
}
.review-header {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--lightest-grey);
border-radius: var(--border-radius-md);
border: 1px solid var(--medium-grey);
}
.review-header h2 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
font-family: var(--font-family-title);
}
.review-header .message {
margin-bottom: var(--spacing-md);
color: var(--semi-dark-grey);
line-height: 1.5;
}
.review-header .inviter-info {
margin-bottom: var(--spacing-md);
border-radius: var(--border-radius-sm);
}
.review-header .inviter-text {
margin: 0;
color: var(--dark-grey);
font-size: 0.95em;
}
.review-header .meta {
display: flex;
gap: var(--spacing-lg);
font-size: 0.9em;
color: var(--medium-dark-grey);
}
.dark-mode .review-header .meta .sent-date {
color: var(--pale-green);
}
.dark-mode .review-header .meta .expires {
color: var(--info-blue);
}
.docs-layout {
max-width: 1400px;
margin: 0 auto;
}
.main-content-area {
display: flex;
gap: var(--spacing-lg);
align-items: stretch;
}
.document-content {
flex: 1;
max-width: calc(100% - 400px);
}
.content-wrapper {
position: relative;
}
.comment-instruction-tag {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--button-green);
padding: 2px 5px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
font-size: 8px;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
z-index: 1;
}
.content-display {
padding: var(--spacing-xl);
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
line-height: 1.6;
font-size: 16px;
max-height: none;
overflow: visible;
}
.comment-view .content-display .commentable-element {
position: relative;
transition: all 0.2s ease;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-md);
margin: var(--spacing-sm) calc(-1 * var(--spacing-md));
border-radius: var(--border-radius-sm);
}
.comment-view .content-display .commentable-element:hover {
background-color: var(--pale-green-light);
border-left: 3px solid var(--pale-green);
}
.comment-view .content-display .commentable-element:hover::after {
content: "💬";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: 0.7;
}
.comment-view .content-display .commentable-element.has-comment {
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
}
.comment-view .content-display .commentable-element.has-comment::after {
content: "💬";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--info-blue);
opacity: 1;
font-weight: bold;
}
.comment-view .content-display .commentable-element.has-comment:hover {
background-color: rgba(33, 150, 243, 0.1);
border-left: 4px solid var(--info-blue);
}
.comment-view .content-display .commentable-element.has-comment:hover::after {
opacity: 1;
font-size: 16px;
}
.comment-view .content-display .commentable-element.being-edited {
border-left: 4px solid var(--warning-yellow) !important;
background-color: rgba(255, 193, 7, 0.1) !important;
}
.comment-view .content-display .commentable-element.being-edited::after {
content: "✏️";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--warning-yellow);
opacity: 1;
font-weight: bold;
}
.comment-view .content-display .commentable-element.comment-highlight-animation {
animation: commentPulse 2s ease-in-out;
border-left: 5px solid var(--info-blue) !important;
}
.comment-view .content-display .commentable-element.marker-only {
cursor: default !important;
transition: none !important;
}
.comment-view .content-display .commentable-element.marker-only:hover {
background-color: transparent !important;
border-left: none !important;
}
.comment-view .content-display .commentable-element.marker-only:hover::after {
display: none !important;
}
@keyframes commentPulse {
0% {
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(33, 150, 243, 0.3);
}
100% {
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
}
}
.comment-view .sidebar-wrapper {
width: 380px;
}
.comment-view .comment-sidebar {
width: 100%;
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
position: sticky;
top: 20px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.comment-view .approval-sidebar {
width: 100%;
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
position: sticky;
top: 20px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.comment-view .sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.comment-view .sidebar-header h3 {
margin: 0;
font-size: 1.1em;
color: var(--dark-grey);
}
.comment-view .sidebar-content {
padding: var(--spacing-md);
}
.comment-view .active-comment-editor {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--pale-green-light);
border: 2px solid var(--pale-green);
border-radius: var(--border-radius-md);
}
.comment-view .comment-target {
margin-bottom: var(--spacing-md);
}
.comment-view .comment-target strong {
color: var(--dark-grey);
font-size: 0.9em;
}
.dark-mode .comment-view .comment-target strong {
color: var(--light-grey);
}
.dark-mode .comment-view .target-preview {
background: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode .comment-view .comment-display .comment-text, .dark-mode .comment-view .comment-meta small {
color: var(--light-grey);
}
.comment-view .target-preview {
font-size: 0.85em;
color: var(--medium-dark-grey);
font-style: italic;
margin-top: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: white;
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--pale-green);
}
.comment-view .comment-textarea {
width: 100%;
min-height: 80px;
resize: vertical;
padding: var(--spacing-sm);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
font-family: var(--font-family);
font-size: 14px;
}
.comment-view .comment-actions {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.comment-view .existing-comments {
margin-bottom: var(--spacing-lg);
}
.comment-view .comment-item {
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.2s ease;
cursor: pointer;
}
.comment-view .comment-item.highlighted {
border-color: var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
}
.comment-view .comment-item:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.comment-view .comment-item.comment-resolved {
opacity: 0.7;
background: var(--pale-green-light);
border-left: 4px solid var(--success-color);
}
.comment-view .comment-item.comment-resolved .comment-text {
text-decoration: line-through;
color: var(--medium-grey);
}
.comment-view .resolved-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--success-color);
color: white;
padding: 2px 6px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
margin-top: 4px;
}
.comment-view .resolved-indicator {
color: var(--success-color);
font-weight: 500;
margin-left: 8px;
}
.comment-view .commenter-email {
background: var(--primary-color);
color: white;
padding: 1px 6px;
border-radius: 8px;
font-size: 10px;
margin-left: 8px;
}
.comment-view .comment-display .comment-text {
margin: var(--spacing-sm) 0;
line-height: 1.5;
color: var(--dark-grey);
}
.comment-view .comment-meta {
margin: var(--spacing-xs) 0;
}
.comment-view .comment-meta small {
color: var(--medium-dark-grey);
font-size: 0.8em;
}
.comment-view .saved-indicator {
margin-left: var(--spacing-sm);
color: var(--button-green);
font-size: 0.75em;
font-weight: 500;
}
.approval-section {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--lightest-grey);
border-radius: var(--border-radius-md);
border: 1px solid var(--medium-grey);
}
.approval-section h4 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
}
.approval-options {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.approval-option {
display: flex;
align-items: center;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
transition: all 0.2s ease;
background: white;
}
.approval-option:hover {
border-color: var(--pale-green);
background-color: var(--pale-green-light);
}
.approval-option input[type="radio"] {
margin-right: var(--spacing-sm);
}
.approval-label.approved {
color: var(--button-green);
font-weight: 500;
}
.approval-label.rejected {
color: var(--error-red);
font-weight: 500;
}
.approval-label.pending {
color: var(--warning-yellow);
font-weight: 500;
}
.approval-comment {
margin-top: var(--spacing-md);
}
.approval-comment label {
display: block;
margin-bottom: var(--spacing-xs);
color: var(--dark-grey);
font-weight: 500;
font-size: 0.9em;
}
.comment-view .approval-main {
text-align: center;
}
.comment-view .approval-description {
margin-bottom: var(--spacing-lg);
color: var(--semi-dark-grey);
line-height: 1.5;
font-size: 0.95em;
}
.comment-view .btn-full-width {
width: 100%;
padding: var(--spacing-md) var(--spacing-sm);
font-size: 1.1em;
font-weight: 600;
justify-content: center;
display: flex;
align-items: center;
}
.comment-view .btn-success {
background-color: var(--button-green) !important;
color: white !important;
border: 2px solid var(--button-green);
}
.comment-view .btn-success:hover {
background-color: var(--button-green-hover) !important;
border-color: var(--button-green-hover);
}
.comment-view .success-message {
margin-top: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--pale-green-light);
border: 2px solid var(--button-green);
border-radius: var(--border-radius-md);
text-align: center;
}
.comment-view .success-icon {
font-size: 2em;
margin-bottom: var(--spacing-sm);
}
.dark-mode .review-header {
background: black;
border-color: var(--medium-dark-grey);
}
.dark-mode .review-header h2 {
color: var(--light-grey);
}
.dark-mode .review-header .message {
color: var(--medium-grey);
}
.dark-mode .review-header .inviter-text {
color: var(--light-grey);
}
.dark-mode .content-display {
background: black;
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .content-display .commentable-element.has-comment {
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.08);
}
.dark-mode .content-display .commentable-element.has-comment:hover {
background-color: rgba(33, 150, 243, 0.15);
}
.dark-mode .content-display .commentable-element.being-edited {
border-left: 4px solid var(--warning-yellow) !important;
background-color: rgba(255, 193, 7, 0.08) !important;
}
.dark-mode .comment-instruction-tag {
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.dark-mode .comment-sidebar {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-sidebar {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-description {
color: var(--medium-grey);
}
.dark-mode .sidebar-header {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .sidebar-header h3 {
color: var(--light-grey);
}
.dark-mode .active-comment-editor {
background: rgba(182, 215, 168, 0.1);
border-color: var(--pale-green-dark);
}
.dark-mode .comment-item {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .comment-view .comment-item.comment-resolved {
background: rgba(40, 167, 69, 0.1);
border-left-color: var(--success-color);
}
.dark-mode .comment-view .comment-item.comment-resolved .comment-text {
color: var(--medium-light-grey);
}
.dark-mode .comment-view .commenter-email {
background: var(--primary-color-dark);
}
.dark-mode .approval-section {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-option {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
@media (max-width: 1024px) {
.main-content-area {
flex-direction: column;
}
.document-content {
max-width: 100%;
}
.sidebar-wrapper {
width: 100%;
}
.comment-sidebar,
.approval-sidebar {
width: 100%;
position: static;
max-height: none;
}
}
@media (max-width: 768px) {
.comment-view {
padding: var(--spacing-md) 0;
}
.review-header {
padding: var(--spacing-md);
}
.review-header .meta {
flex-direction: column;
gap: var(--spacing-sm);
}
.content-display {
padding: var(--spacing-md);
}
.comment-instruction-tag {
font-size: 9px;
padding: 3px 6px;
}
.sidebar-content {
padding: var(--spacing-sm);
}
}
.approval-success {
text-align: center;
padding: var(--spacing-md);
}
.approval-status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.approval-status-badge.status-approved {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.approval-status-badge i {
font-size: 1.2em;
}
.approval-feedback {
color: var(--semi-dark-grey);
font-size: 0.9em;
line-height: 1.4;
margin: 20px 0 0 0;
text-align: center;
}
.approved-content {
pointer-events: none;
position: relative;
}
.approved-content::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.approved-content .commentable-element:hover {
background: none !important;
cursor: default !important;
}
.approved-content .commentable-element {
cursor: default !important;
}
.comment-view .marker {
background-color: #ffd700; 
padding: 0px 2px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 500;
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1);
user-select: none;
white-space: nowrap;
vertical-align: baseline; 
}
.comment-view .marker:hover {
background-color: #ffed4e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.comment-view .marker:active {
transform: scale(0.98);
}
.comment-view .marker i {
font-size: 0.8em;
color: #666;
}
.draggable-comment-modal {
position: fixed;
min-height: 200px;
background: var(--white);
border: 2px solid var(--info-blue);
border-radius: var(--border-radius-md);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
user-select: none;
transition: box-shadow 0.2s ease, width 0.3s ease, height 0.3s ease;
font-family: var(--font-family);
}
.draggable-comment-modal:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.modal-header.draggable-handle {
background: var(--info-blue);
color: var(--white);
padding: var(--spacing-sm) var(--spacing-md);
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
min-height: 40px;
}
.modal-header.draggable-handle:active {
cursor: grabbing;
background: var(--info-blue-hover, #1976d2);
}
.modal-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
flex: 1;
}
.header-actions {
display: flex;
gap: var(--spacing-xs);
}
.minimize-btn, 
.close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: var(--white);
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
transition: background-color 0.2s ease;
}
.minimize-btn:hover, 
.close-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.minimize-btn:active, 
.close-btn:active {
background: rgba(255, 255, 255, 0.4);
}
.modal-content {
display: flex;
flex-direction: column;
}
.content-preview {
padding: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
background: var(--pale-green-light, #f8f9fa);
}
.target-indicator {
font-size: 0.9em;
}
.target-indicator strong {
color: var(--dark-grey);
}
.target-text {
font-style: italic;
color: var(--medium-dark-grey);
margin-top: var(--spacing-xs);
max-height: 60px;
overflow-y: auto;
line-height: 1.4;
padding: var(--spacing-xs);
background: rgba(255, 255, 255, 0.7);
border-radius: var(--border-radius-sm);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.comment-editor {
padding: var(--spacing-md);
flex: 1;
}
.comment-editor textarea {
width: 100%;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
padding: var(--spacing-sm);
font-family: var(--font-family);
font-size: 14px;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
.comment-editor textarea:focus {
outline: none;
border-color: var(--info-blue);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.comment-editor textarea:disabled {
background: var(--lightest-grey);
color: var(--medium-grey);
cursor: not-allowed;
}
.modal-actions {
padding: var(--spacing-md);
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
border-top: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}
.modal-actions .btn {
margin: 0;
font-size: 12px;
padding: var(--spacing-xs) var(--spacing-sm);
min-width: 60px;
}
.modal-actions .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.draggable-comment-modal.minimized {
width: 60px !important;
height: 40px !important;
overflow: hidden;
min-height: auto;
}
.draggable-comment-modal.minimized .modal-content {
display: none;
}
.draggable-comment-modal.minimized .modal-header {
padding: var(--spacing-xs);
border-radius: var(--border-radius-md);
}
.draggable-comment-modal.minimized .modal-header h3 {
font-size: 16px;
text-align: center;
}
.draggable-comment-modal.minimized .header-actions {
display: none;
}
.dark-mode .draggable-comment-modal {
background: var(--dark-grey);
border-color: var(--info-blue);
color: var(--light-grey);
}
.dark-mode .content-preview {
background: rgba(182, 215, 168, 0.1);
border-color: var(--medium-dark-grey);
}
.dark-mode .target-text {
color: var(--medium-grey);
background: rgba(255, 255, 255, 0.05);
border-color: var(--medium-dark-grey);
}
.dark-mode .comment-editor textarea {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .comment-editor textarea:focus {
border-color: var(--info-blue);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.dark-mode .modal-actions {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
@media (max-width: 768px) {
.draggable-comment-modal {
width: calc(100vw - 40px) !important;
max-width: 320px;
left: 20px !important;
}
.modal-header.draggable-handle {
cursor: default; 
}
.content-preview {
padding: var(--spacing-sm);
}
.comment-editor {
padding: var(--spacing-sm);
}
.modal-actions {
padding: var(--spacing-sm);
flex-wrap: wrap;
}
.modal-actions .btn {
flex: 1;
min-width: auto;
}
}
.draggable-comment-modal {
animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.draggable-comment-modal.dragging {
transition: none;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.draggable-comment-modal.loading {
pointer-events: none;
}
.draggable-comment-modal.loading .modal-content {
opacity: 0.7;
}
.draggable-comment-modal:focus-within {
border-color: var(--info-blue);
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
@media (prefers-contrast: high) {
.draggable-comment-modal {
border-width: 3px;
}
.modal-header.draggable-handle {
font-weight: bold;
}
.comment-editor textarea {
border-width: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.draggable-comment-modal {
animation: none;
transition: none;
}
.minimize-btn, 
.close-btn,
.comment-editor textarea {
transition: none;
}
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 40px 102px;
padding: 20px 0 0 0;
max-width: 1800px;
}
.containerDiv:empty {
display: none;
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 var(--spacing-xl) 102px;
padding: var(--spacing-lg) 0 0 0;
max-width: 1800px;
}
.alert-area {
background-color: var(--error-red-dark);
padding: 10px 20px;
border-radius: var(--border-radius-md);
color: white;
margin-top: 10px;
margin-bottom: 0px;
position: absolute;
z-index: 2;
width: calc(100vw - 160px);
}
.alert-area-green {
background-color: var(--pale-green-dark);
transition: height 0.5s ease, padding 0.5s, margin 0.5s;
overflow: hidden;
}
.alert-area-green.fade-out > * {
opacity: 0;
transition: opacity 0.5s ease;
}
.alert-area-green.fade-out {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: height 0.5s ease, padding 0.5s, margin 0.5s;
}
.alert-area-text p {
margin: 0;
text-align: center;
}
.alert-area-text a {
font-weight: 700;
text-decoration: underline;
}
.alert-area-close {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.flex {
display: flex;
justify-content: center;
max-width: 100%;
flex-wrap: wrap;
gap: 0px 10px;
flex-direction: row;
}
.flex .flex {
width: 100%;
}
.left {
text-align: left;
justify-content: left;
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 75vh;
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical * {
text-align: center;
}
.justifyLeft {
justify-content: left;
}
.formColumn {
width: unset;
flex: 1 1 70%;
padding: 0px !important;
}
.formColumn h3 {
font-size: 16px !important;
background: unset !important;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.settingsColumn {
flex: 1 1 20%;
background-color: white;
padding: 10px !important;
border-radius: 5px;
border: 1px solid #ddd;
align-self: flex-start;
}
.dark-mode .settingsColumn {
background-color: black;
border: 1px solid var(--dark-grey);
color: var(--dark-grey);
}
.mobile .containerDiv {
width: 100vw;
max-width: 100vw;
margin: 0;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
overflow-x: hidden;
}
.mobile .containerDiv:last-of-type {
margin-bottom: 100px;
}
.mobile #app > .containerDiv.first {
top: -50px;
}
.mobile .formColumn.run-stage {
flex: 0 0 calc(100vw);
margin-top: -80px;
z-index: 1;
padding: 20px 20px 0px 20px !important;
}
.dark-mode .formColumn.run-stage {
background-color: black;
border: 1px solid var(--dark-grey);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
header {
width: 83px;
background-color: white;
position: fixed;
height: 100vh;
top: 0;
left: 0;
border-right: 1px solid var(--dark-grey);
z-index: 1;
}
.dark-mode header {
background-color: black;
}
.logo {
position: fixed;
top: 1px;
left: 1px;
width: 80px;
height: 80px;
padding: 10px;
display: flex;
align-items: center;
background-color: white;
z-index: 1;
display: flex;
justify-content: center;
align-content: center;
border-radius: 5px;
cursor: pointer;
z-index: 2;
}
.dark-mode .logo {
background-color: black;
}
.logo img {
width: 60px;
height: auto;
}
.breadcrumbTopContainer {
height: 54px;
margin-top: 0px;
margin-bottom: 0px;
border-bottom: 1px solid var(--dark-grey);
margin-left: 83px;
padding: 0;
width: calc(100vw - 83px);
}
.view-userSettings.mobile .breadcrumbTopContainer {
display: none;
}
.dark-mode .breadcrumbTopContainer {
border-bottom: 1px solid var(--dark-grey);
background-color: black;
}
.light-mode .breadcrumbTopContainer {
background-color: white;
}
.breadcrumbTop {
position: fixed;
background-color: white;
padding: 5px 10px;
border: solid 1px #e0e0e0;
border-radius: 5px;
z-index: 1;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
box-shadow: 0px 5px 10px #0000001a;
}
.dark-mode .breadcrumbTop {
color: white;
background-color: var(--dark-grey);
border: 1px solid black;
box-shadow: 0px 5px 10px black;
}
.breadcrumbTop i {
display: inline-block;
font-size: 10px;
margin-left: 5px;
margin-right: 5px;
}
.navbar {
background-color: white;
color: black;
width: 80px;
top: 132px;
height: calc(100vh - 83px);
padding-top: 10px;
margin-left: 1px;
}
.dark-mode .navbar {
background-color: black;
color: white;
}
.navbar a {
color: black;
font-size: 10px;
display: inline-block;
width: 100%;
text-align: center;
height: fit-content;
padding: 10px 0;
}
.dark-mode .navbar a {
color: white;
}
.navbar a.selected {
color: var(--pale-green-dark);
}
.dark-mode .navbar a.selected {
color: var(--pale-green);
}
.navbar a:hover {
color: black;
}
.dark-mode .navbar a:hover {
color: white;
}
.navbar-serviceText {
font-size: 10px;
text-align: center;
}
.sign-in-link .navbar-serviceText {
padding-bottom: 10px;
border-bottom: 1px solid var(--pale-green);
}
.user_info {
position: fixed;
bottom: 10px;
left: 1px;
color: white !important;
display: flex;
align-items: end;
z-index: 2;
display: block;
height: 80px;
width: 80px;
}
.user_info a * {
color: black;
}
.dark-mode .user_info a * {
color: white;
}
.user_info .name, 
.user_info .organisationName {
display: block;
padding-right: 5px;
font-size: 9px; 
width: 100%;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 10px;
line-height: 1.6;
font-weight: 400;
}
.user_info .organisationName {
font-size: 7px;
text-transform: uppercase;
}
.userCircle {
width: 40px;
height: 40px;
margin-left: calc(50% - 20px);
border-radius: 50%;
background: linear-gradient(to right, var(--button-green), var(--button-green-hover));
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
margin-bottom: 5px;
}
.userCircle i {
display: inline-block;
width: 100%;
text-align: center;
color: white;
}
.user_info .vue-tooltip {
color: white;
}
.darkModeTab {
position: fixed;
top: 90px;
left: 12px;
width: 60px;
z-index: 2;
}
.darkModeTab .tab-container {
width: 60px;
}
.darkModeTab .tab-container i {
font-size: 10px;
}
.darkModeTab .tab {
width: 30px;
min-width: 30px;
}
.darkModeTab .tab-header {
min-width: unset !important;
}
#signOut {
position: absolute !important;
right: 10px;
top: 10px;
display: none;
}
.hover-class #signOut {
display: block;
}
.fa-sign-out {
cursor: pointer;
color: #000000;
}
.fa-sign-out:hover {
color: var(--dark-grey);
}
.dark-mode .fa-sign-out {
cursor: pointer;
color: #ffffff;
}
.dark-mode .fa-sign-out:hover {
color: var(--light-grey);
}
.dashSocial_ {
display: none;
}
[data-amplify-authenticator] [data-amplify-container] {
width: 400px !important;
}
.amplify-tabs__list {
display: none !important;
}
form {
border: 0px !important;
}
[data-amplify-authenticator] [data-amplify-router] {
border-radius: 10px;
}
.amplify-textfield {
font-family: var(--font-family);
font-size: 16px !important;
}
.amplify-heading, 
.amplify-authenticator__subtitle {
color: var(--dark-grey) !important;
background: unset !important;
-webkit-text-fill-color: unset !important;
}
.amplify-button--primary {
font-family: var(--font-family);
font-size: 14px !important;
background-color: var(--pale-green) !important;
color: var(--button-green-dark) !important;
border-radius: 5px !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
.amplify-button--primary:hover {
background-color: var(--button-hover-green) !important;
}
.amplify-tabs__panel {
padding: 0px !important;
}
.amplify-input {
font-size: 14px !important;
}
[aria-label="Hide password"] {
height: 38px !important;
margin-top: 4px !important;
}
.amplify-button--small {
font-size: 12px !important;
}
.amplify-field:last-of-type {
margin-bottom: 20px !important;
}
input[type="text"], 
input[type="email"] {
margin-bottom: 0px !important;
}
.amplify-text--error {
color: var(--error-red-dark) !important;
}
.loginPage.containerDiv {
max-width: 500px;
margin: 0 auto;
padding: 20px;
flex-direction: column;
}
.loginPage .tab-container {
width: 100%;
flex: 0 0 33px;
}
.loginPage .auth-wrapper {
height: calc(100vh - 150px);
min-height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loginPage .auth-wrapper > p {
text-align: center;
display: inline-block;
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.loginPage .tab-container .tab-header {
margin-bottom: 50px;
}
.welcome-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.welcome-header h1 {
color: var(--pale-green-dark);
font-family: var(--font-family-title);
margin-bottom: var(--spacing-md);
font-size: 2.2em;
text-align: center;
}
.welcome-subtitle {
color: var(--medium-grey);
font-size: 1.1em;
margin: 0;
}
.stats-section {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.stats-section h3 {
color: var(--dark-grey);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.stats-section .stat-card {
min-height: 180px;
position: relative;
padding-top: 10px;
}
.stat-number {
font-size: 2.8em;
font-weight: bold;
color: var(--button-green);
margin: var(--spacing-sm) 0;
}
.activity-section {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.activity-section h3 {
color: var(--dark-grey);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.activity-card {
padding-top: 10px;
}
.activity-meta {
color: var(--medium-grey);
font-size: 0.85em;
margin-top: var(--spacing-sm);
}
.status-completed {
background-color: var(--pale-green);
color: var(--pale-green-darker);
}
.status-running {
background-color: var(--info-blue);
color: white;
}
.status-pending {
background-color: var(--warning-yellow);
color: var(--dark-grey);
}
.status-error,
.status-failed {
background-color: var(--error-red);
color: white;
}
.no-activity-container {
display: flex;
justify-content: center;
padding: var(--spacing-xl);
}
.no-activity-card {
background: var(--lightest-grey);
border: 2px dashed var(--medium-grey);
border-radius: 12px;
padding: var(--spacing-xl);
text-align: center;
max-width: 400px;
transition: var(--transition-normal);
}
.no-activity-card:hover {
border-color: var(--pale-green-dark);
background: var(--pale-green);
}
.no-activity-card h4 {
color: var(--dark-grey);
margin: var(--spacing-md) 0;
}
.no-activity-card p {
color: var(--medium-grey);
margin-bottom: var(--spacing-lg);
line-height: 1.5;
}
.fade-in {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.template-card {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 0px;
flex: 0 1 400px;
transition: transform 0.2s;
}
body #app_ h2.example-templates-title {
color: var(--pale-green-dark);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
font-size: 27px;
margin-bottom: 30px;
}
body.dark-mode  #app_ h2.example-templates-title {
color: var(--pale-green);
}
.dark-mode .template-card {
background-color: black;
border: 1px solid var(--dark-grey);
}
.template-card-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 20px 50px 20px;
}
.template-card-btns {
display: flex;
justify-content: space-between;
gap: 5px;
margin: 5px;
width: calc(100% - 10px);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.template-card-btns .btn {
padding: 5px 10px !important;
font-size: 12px;
background-color: var(--lightest-gray) !important;
border: 1px solid var(--button-green) !important;
color: black !important;
margin: 0px !important;
flex: 1;
}
.light-mode .template-card-btns .btn:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.dark-mode .template-card-btns .btn {
background-color: var(--dark-grey) !important;
border: 1px solid var(--darkest-grey) !important;
color: white !important;
}
.dark-mode .template-card-btns .btn:hover {
background-color: var(--darkest-grey) !important;
color: white !important;
}
.template-card-btns .btn i {
margin-right: 5px;
}
.template-card-btns .btn i.fa-trash {
color: var(--error-red-dark) !important;
}
.dark-mode .template-card-btns .btn i.fa-trash {
color: var(--error-red-light) !important;
}
.dark-mode .template-card-btns .btn i {
color: var(--pale-green) !important;
}
.template-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 20px;
margin-top: -20px;
justify-content: center;
}
.template-card-tags .template-card-tag {
position: relative;
}
.template-card-tag {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--button-green);
padding: 2px 5px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
font-size: 8px;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
z-index: 1;
}
.template-card-tag.leftAndOnTop {
left: 2px;
right: unset;
top: -25px;
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.dark-mode .template-card-tag {
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.template-card-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
text-align: left;
margin-top: 0px;
}
.template-card-text {
font-size: 13px;
color: #232323;
text-align: center;
margin: 0;
padding: 0;
line-height: 1.4;
font-size: 11px;
}
.template-card-content {
display: flex;
gap: 15px;
align-items: center;
width: 100%;
}
.template-card-text-content {
flex: 1;
min-width: 0; 
text-align: left;
padding-right: 20px;
padding-left: 20px;
}
.template-card-steps {
flex-shrink: 0;
display: flex;
align-items: center;
margin-top: 20px;
margin-right: -10px;
min-height: 110px;
}
.template-steps-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.template-step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-top: -3px;
}
.template-step-circle {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--medium-grey);
background: var(--lightest-grey);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
transition: all 0.2s;
z-index: 2;
position: relative;
}
.template-step-circle.step-assistant {
background: var(--info-blue);
border-color: var(--info-blue);
}
.template-step-circle.step-textEditor {
background: var(--button-green);
border-color: var(--button-green);
}
.template-step-circle.step-convert {
background: var(--icon-purple);
border-color: var(--icon-purple);
}
.template-step-circle.step-api {
background: var(--icon-orange);
border-color: var(--icon-orange);
}
.template-step-circle.step-Browsing {
background: var(--pale-green-dark);
border-color: var(--pale-green-darker);
}
.template-step-circle.step-default {
background: var(--medium-dark-grey);
border-color: var(--dark-grey);
}
.template-step-arrow {
width: 1px;
height: 6px;
background: var(--process-text-light);
opacity: 0.5;
}
.dark-mode .template-step-circle {
}
.dark-mode .template-step-arrow {
background: var(--medium-grey);
}
.template-card-icon {
margin-bottom: 10px;
}
.template-card-icon img {
width: auto;
height: 50px;
}
.dark-mode .welcome-header h1 {
color: var(--light-grey);
}
.dark-mode .welcome-subtitle {
color: var(--medium-grey);
}
.dark-mode .stats-section h3,
.dark-mode .activity-section h3 {
color: var(--light-grey);
}
.dark-mode .no-activity-card {
background: var(--dark-grey);
border-color: var(--medium-grey);
}
.dark-mode .no-activity-card:hover {
background: var(--darkest-grey);
border-color: var(--pale-green);
}
.dark-mode .no-activity-card h4 {
color: var(--light-grey);
}
@media (max-width: 1024px) and (min-width: 751px) {
.stats-section .flex {
justify-content: center;
}
}
.hr-rule {
width: calc(100% - 300px);
height: 1px;
background: var(--pale-green-dark);
margin-bottom: 50px;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
}
.dark-mode .hr-rule {
background: var(--pale-green);
}
.guestView {
margin-top: 150px;
text-align: center;
}
.dashbtns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
position: fixed;
top: 10px;
left: 100px; 
right: 10px;
z-index: 100;
font-size: 12px;
}
.dashSocial {
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
.dashSocial i {
font-size: 20px;
color: var(--pale-green-dark);
}
.dashSocial a {
display: flex;
}
.dark-mode .dashSocial i {
color: var(--pale-green);
}
.dashLinksLeft {
display: flex;
align-items: center;
gap: 30px;
}
.dashLinks {
display: flex;
align-items: center;
gap: 25px;
}
.dashLink {
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
margin-left: auto; 
}
.dashLink, .dashLink a {
color: black;
}
.dark-mode .dashLink, .dark-mode .dashLink a {
color: white;
}
.dashLink:hover, .dashLink a:hover {
color: var(--pale-green-dark);
text-decoration: none;
}
.dark-mode .dashLink:hover, .dark-mode .dashLink a:hover {
color: var(--pale-green);
text-decoration: none;
}
.guestView p, .guestView h1 {
text-align: center;
}
.guestView p.description {
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
font-size: 15px;
}
.additional-info {
margin-top: 100px;
padding-left: 150px;
padding-right: 150px;
margin-bottom: 100px;
}
.additional-info .flex {
gap: 30px 70px;
}
.info-section {
margin-bottom: 30px;
text-align: left;
flex: 1 1 40%;
text-align: left;
}
.info-section h2 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1.5rem;
}
.dark-mode .info-section h2 {
color: var(--pale-green);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.info-section p {
line-height: 1.6;
margin-bottom: 15px;
text-align: left !important;
}
.hus-case-study {
padding: 0 150px;
}
.hus-case-content {
background: var(--white);
border-radius: 12px;
padding: 35px 50px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
max-width: 800px;
margin: 0 auto;
display: flex;
gap: 30px;
align-items: flex-start;
}
.dark-mode .hus-case-content {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.hus-logo {
width: 100px;
height: auto;
border-radius: 8px;
position: absolute;
left: -80px;
top: 20px;
border: 1px solid var(--dark-grey);
}
.hus-case-main {
flex: 1;
}
.hus-case-header h3 {
color: var(--pale-green-dark);
margin: 0 0 10px 0;
font-size: 1.5rem;
font-weight: bold;
}
.dark-mode .hus-case-header h3 {
color: var(--pale-green);
}
.hus-case-header p {
margin: 0 0 20px 0;
line-height: 1.6;
font-size: 16px;
}
.hus-case-quote {
background: var(--lightest-grey);
padding: 20px;
border-radius: 8px;
font-family: 'Georgia', serif;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin: 25px 0 10px 0;
text-align: left;
line-height: 1.6;
}
.dark-mode .hus-case-quote {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.hus-case-quote i {
color: var(--pale-green-dark);
margin: 0 8px;
font-size: 16px;
}
.dark-mode .hus-case-quote i {
color: var(--pale-green);
}
.hus-case-attribution {
text-align: left;
font-style: italic;
font-size: 11px;
color: var(--dark-grey);
margin: 0px 30px 0px 10px;
font-weight: 500;
}
.dark-mode .hus-case-attribution {
color: var(--light-grey);
}
.hus-case-link {
text-align: center;
margin-top: 25px;
position: absolute;
top: -40px;
right: -40px;
}
.hus-case-link .btn {
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
}
.hus-case-link .btn i {
margin-right: 8px;
}
.process-runs-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 300px;
position: relative;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.process-runs-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: 12px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
overflow: hidden;
}
.process-runs-table th,
.process-runs-table td {
padding: 8px;
text-align: left;
border: 1px solid var(--medium-grey);
}
.dark-mode .process-runs-table th,
.dark-mode .process-runs-table td {
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.process-runs-table th {
background-color: var(--light-grey);
font-weight: bold;
}
.dark-mode .process-runs-table th {
background-color: black;
}
.process-runs-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.process-runs-table tr:nth-child(odd) {
background-color: #fff;
}
.dark-mode .process-runs-table tr:nth-child(even),
.dark-mode .process-runs-table tr:nth-child(odd) {
background-color: var(--dark-grey);
}
.process-runs-table tr.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.dark-mode .process-runs-table tr.active {
background-color: var(--pale-green-dark) !important;
color: var(--light-grey) !important;
}
.process-runs-table tr:hover {
background-color: var(--light-grey);
cursor: pointer;
}
.dark-mode .process-runs-table tr:hover {
background-color: var(--medium-dark-grey);
} 
.view-assistants .template-card-body {
padding: 20px 20px 60px 20px;
}
.sitemap-description {
color: var(--medium-dark-grey);
margin-bottom: 20px;
padding: 12px;
background: var(--lightest-grey);
border-radius: 8px;
border-left: 4px solid var(--pale-green-dark);
}
.dark-mode .sitemap-description {
background: var(--semi-dark-grey);
color: var(--light-grey);
}
.sitemap-url-option {
margin-bottom: 12px !important;
padding: 12px 16px !important;
background: var(--lightest-grey) !important;
border: 1px solid var(--medium-grey) !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
}
.sitemap-url-option:hover {
background: white !important;
border-color: var(--pale-green) !important;
}
.dark-mode .sitemap-url-option {
background: var(--dark-grey) !important;
border-color: var(--medium-dark-grey) !important;
}
.dark-mode .sitemap-url-option:hover {
background: var(--semi-dark-grey) !important;
border-color: var(--pale-green) !important;
}
.sitemap-url-option input[type="radio"]:checked + label {
font-weight: 600 !important;
color: var(--pale-green-dark) !important;
}
.dark-mode .sitemap-url-option input[type="radio"]:checked + label {
color: var(--pale-green) !important;
}
.sitemap-url-option label {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
font-size: 13px !important;
color: var(--dark-grey) !important;
word-break: break-all !important;
line-height: 1.4 !important;
margin-left: 8px !important;
cursor: pointer !important;
}
.dark-mode .sitemap-url-option label {
color: var(--light-grey) !important;
}
.trainingFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.trainingFiles:first-of-type {
margin-top: 10px;
}
.trainingFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .trainingFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .trainingFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.trainingFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trainingFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.trainingFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.trainingFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .trainingFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .trainingFiles .remove-file-btn:hover {
background: var(--error-red);
}
.file-uploader-section {
margin-top: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--medium-grey);
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}
.file-uploader-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .file-uploader-section {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .file-uploader-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.file-uploader-section label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .file-uploader-section label {
color: var(--light-grey);
}
.file-uploader-section input[type="file"] {
width: 100%;
padding: 0.75rem;
border: 2px dashed var(--medium-grey);
border-radius: 6px;
background: var(--lightest-grey);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.file-uploader-section input[type="file"]:hover {
border-color: var(--pale-green);
background: white;
}
.dark-mode .file-uploader-section input[type="file"] {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .file-uploader-section input[type="file"]:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.tempFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.tempFiles:first-of-type {
margin-top: 10px;
}
.tempFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .tempFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .tempFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.tempFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tempFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.tempFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.tempFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .tempFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .tempFiles .remove-file-btn:hover {
background: var(--error-red);
}
.web-scraping-section {
margin-top: 2rem;
padding: 1.5rem;
border: 1px solid var(--medium-grey);
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}
.web-scraping-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .web-scraping-section {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .web-scraping-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.section-title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-grey);
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark-mode .section-title {
color: var(--light-grey);
}
.section-title i {
color: var(--pale-green-dark);
}
.dark-mode .section-title i {
color: var(--pale-green);
}
.section-description {
margin-bottom: 1.5rem;
color: var(--medium-dark-grey);
font-size: 0.9rem;
}
.dark-mode .section-description {
color: var(--medium-grey);
}
.scraping-mode-selector {
margin-bottom: 1.5rem;
}
.mode-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .mode-label {
color: var(--light-grey);
}
.mode-options {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.mode-option {
flex: 1;
min-width: 200px;
}
.mode-radio {
display: none;
}
.mode-option-label {
display: block;
padding: 1rem;
border: 2px solid var(--medium-grey);
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.mode-option-label:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.mode-radio:checked + .mode-option-label {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .mode-option-label {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .mode-option-label:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.dark-mode .mode-radio:checked + .mode-option-label {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.mode-option-label i {
font-size: 1.5rem;
color: var(--pale-green-dark);
margin-bottom: 0.5rem;
display: block;
}
.dark-mode .mode-option-label i {
color: var(--pale-green);
}
.mode-option-label span {
display: block;
font-weight: 600;
color: var(--dark-grey);
margin-bottom: 0.25rem;
}
.dark-mode .mode-option-label span {
color: var(--light-grey);
}
.mode-option-label small {
display: block;
color: var(--medium-dark-grey);
font-size: 0.75rem;
line-height: 1.3;
}
.dark-mode .mode-option-label small {
color: var(--medium-grey);
}
.url-input-section {
margin-bottom: 1.5rem;
}
.url-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .url-label {
color: var(--light-grey);
}
.url-input-wrapper {
display: flex;
gap: 0.5rem;
}
.url-input {
flex: 1;
padding: 0.75rem;
border: 2px solid var(--medium-grey);
border-radius: 6px;
font-size: 1rem;
background: white;
color: var(--dark-grey);
transition: border-color 0.3s ease;
}
.url-input:focus {
outline: none;
border-color: var(--pale-green);
}
.dark-mode .url-input {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .url-input:focus {
border-color: var(--pale-green);
}
.scrape-button {
padding: 0.75rem 1.5rem;
background: var(--pale-green-dark);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.scrape-button:hover:not(.disabled) {
background: var(--pale-green-darker);
transform: translateY(-1px);
}
.scrape-button.disabled {
background: var(--medium-grey);
cursor: not-allowed;
transform: none;
}
.dark-mode .scrape-button {
background: var(--pale-green);
color: var(--dark-grey);
}
.dark-mode .scrape-button:hover:not(.disabled) {
background: var(--button-hover-green);
}
.dark-mode .scrape-button.disabled {
background: var(--medium-dark-grey);
color: var(--medium-grey);
}
.url-error {
margin-top: 0.5rem;
padding: 0.5rem;
background: var(--error-red-light);
color: var(--error-red-dark);
border-radius: 4px;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark-mode .url-error {
background: var(--error-red-dark);
color: var(--error-red-light);
}
.results-summary {
margin-bottom: 1.5rem;
padding: 0.75rem;
background: var(--lightest-grey);
color: var(--button-green);
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
border: 1px solid var(--button-green);
}
.dark-mode .results-summary {
background: var(--dark-grey);
color: var(--pale-green);
border-color: var(--pale-green);
}
.training-urls-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--medium-grey);
}
.dark-mode .training-urls-section {
border-top-color: var(--medium-dark-grey);
}
.training-urls-title {
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 600;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .training-urls-title {
color: var(--light-grey);
}
.training-urls-list {
margin-bottom: 1rem;
}
.training-url-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
margin-bottom: 0.5rem;
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
transition: all 0.3s ease;
}
.training-url-item:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .training-url-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .training-url-item:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.url-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.url-info i {
color: var(--pale-green-dark);
flex-shrink: 0;
}
.dark-mode .url-info i {
color: var(--pale-green);
}
.url-link {
color: var(--pale-green-dark);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.url-link:hover {
text-decoration: underline;
}
.dark-mode .url-link {
color: var(--pale-green);
}
.remove-url-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.remove-url-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.remove-url-btn i {
font-size: 14px;
}
.dark-mode .remove-url-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .remove-url-btn:hover {
background: var(--error-red);
}
.remove-all-urls-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.remove-all-urls-btn:hover {
background: var(--error-red-darker);
transform: translateY(-1px);
}
.remove-all-urls-btn i {
font-size: 16px;
}
.dark-mode .remove-all-urls-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .remove-all-urls-btn:hover {
background: var(--error-red);
}
@media (max-width: 768px) {
.mode-options {
flex-direction: column;
}
.mode-option {
min-width: auto;
}
.url-input-wrapper {
flex-direction: column;
}
.scrape-button {
justify-content: center;
}
.training-url-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.url-info {
width: 100%;
}
.remove-url-btn {
align-self: flex-end;
}
} 
.webpages-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 300px;
position: relative;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.view-websites .data-table-container {
min-width: 1200px;
}
body.mobile .webpages-container {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 15px !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
body.mobile .webpages-container[style] {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container > * {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .webpages-container .data-table-container {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
display: block !important;
}
body.mobile .webpages-container .data-table-container[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container .mobile-cards-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
padding: 0 0 80px 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
display: block !important;
flex: none !important;
flex-basis: auto !important;
flex-grow: 0 !important;
flex-shrink: 1 !important;
position: relative !important;
}
body.mobile .webpages-container .mobile-cards-wrapper[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container .mobile-cards-wrapper > *,
body.mobile .webpages-container .data-table-container > * {
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
width: 100% !important;
}
body.mobile .webpages-container table,
body.mobile .webpages-container .data-table,
body.mobile .webpages-container .data-table-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
table-layout: fixed !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .containerDiv:has(.webpages-container) {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body.mobile.view-websites .containerDiv {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
z-index: 0;
}
body.mobile .webpages-container .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: calc(100% - 2px) !important;
max-width: calc(100% - 2px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .webpages-container .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .webpages-container .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
.page-edit-container {
width: 100%;
height: 100%;
}
.page-edit-layout {
display: flex;
width: 100%;
gap: 20px;
}
.page-edit-content {
flex: 1;
min-width: 0;
}
.page-edit-navigation {
flex: 0 0 80px;
background-color: white;
color: black;
width: 80px;
height: fit-content;
min-height: 200px;
padding-top: 10px;
margin-left: 1px;
}
.dark-mode .page-edit-navigation {
background-color: black;
color: white;
}
.page-edit-navigation .nav-item {
color: black;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
height: fit-content;
padding: 10px 0;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
box-sizing: border-box;
}
.dark-mode .page-edit-navigation .nav-item {
color: white;
}
.page-edit-navigation .nav-item.active {
color: var(--pale-green-dark);
}
.dark-mode .page-edit-navigation .nav-item.active {
color: var(--pale-green);
}
.page-edit-navigation .nav-item:hover {
color: black;
}
.dark-mode .page-edit-navigation .nav-item:hover {
color: white;
}
.page-edit-navigation .nav-item i {
display: block;
font-size: 20px;
margin-bottom: 4px;
line-height: 1;
}
.page-edit-navigation .nav-item span {
display: block;
font-size: 10px;
text-align: center;
font-weight: normal;
line-height: 1.2;
}
.page-section-full {
width: 100%;
margin-bottom: 20px;
border: 1px solid var(--medium-grey);
border-radius: 0px;
background: var(--white);
overflow: hidden;
}
.dark-mode .page-section-full {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
}
.section-header-full {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 15px;
background: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .section-header-full {
background: var(--dark-grey);
border-bottom-color: var(--medium-dark-grey);
}
.section-header-full h4 {
margin: 0;
font-size: 12px;
font-weight: 500;
}
.element-count {
font-size: 12px;
color: var(--medium-grey);
font-weight: normal;
}
.dark-mode .element-count {
color: var(--medium-dark-grey);
}
.section-content-full {
padding: 0;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.page-body-view .page-section-full:first-child .section-content-full,
.page-body-view .page-section-full:last-child .section-content-full {
min-height: 100px;
}
.page-body-view .page-section-full:nth-child(2) .section-content-full {
min-height: 300px;
}
.elements-list {
padding: 20px;
}
.element-item {
margin-bottom: 15px;
padding: 10px;
background: var(--lightest-grey);
border-radius: 4px;
border: 1px solid var(--medium-grey);
}
.dark-mode .element-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.element-preview {
font-family: monospace;
font-size: 12px;
word-break: break-all;
}
.page-metadata {
padding: 20px;
}
.metadata-row {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.metadata-row label {
font-weight: 600;
margin-bottom: 5px;
color: var(--dark-grey);
}
.dark-mode .metadata-row label {
color: var(--light-grey);
}
.form-input,
.form-select {
padding: 8px 12px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
background: var(--white);
}
.dark-mode .form-input,
.dark-mode .form-select {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--pale-green-dark);
}
.dark-mode .form-input:focus,
.dark-mode .form-select:focus {
border-color: var(--pale-green);
}
.element-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
padding: 0 20px;
}
.element-actions .btn {
padding: 8px 16px;
font-size: 12px;
}
.element-editor {
padding: 20px;
border-top: 1px solid var(--medium-grey);
background: var(--lightest-grey);
}
.dark-mode .element-editor {
border-top-color: var(--medium-dark-grey);
background: var(--dark-grey);
}
.element-editor-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.element-editor-form label {
font-weight: 600;
color: var(--dark-grey);
margin-bottom: 5px;
}
.dark-mode .element-editor-form label {
color: var(--light-grey);
}
.element-editor-form textarea {
padding: 12px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
font-family: monospace;
background: var(--white);
min-height: 120px;
resize: vertical;
}
.dark-mode .element-editor-form textarea {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.element-editor-form textarea:focus {
outline: none;
border-color: var(--pale-green-dark);
}
.dark-mode .element-editor-form textarea:focus {
border-color: var(--pale-green);
}
.element-editor-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.element-item-with-actions {
position: relative;
}
.element-item-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.element-item-actions button {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 3px;
padding: 4px 8px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s ease;
}
.dark-mode .element-item-actions button {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.element-item-actions button:hover {
background: var(--light-grey);
}
.dark-mode .element-item-actions button:hover {
background: var(--dark-grey);
}
@media (max-width: 768px) {
.page-edit-layout {
flex-direction: column;
}
.page-edit-navigation {
flex: 0 0 60px;
width: 100%;
height: 60px;
min-height: 60px;
padding: 5px 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.page-edit-navigation .nav-item {
flex: 1;
padding: 5px 0;
}
.page-edit-navigation .nav-item span {
font-size: 9px;
}
.page-edit-navigation .nav-item i {
font-size: 14px;
}
}
.published-page-container ul {
margin: 16px 0 !important;
padding-left: 20px !important;
list-style: disc !important;
}
.published-page-container ol {
margin: 16px 0 !important;
padding-left: 20px !important;
list-style: decimal !important;
}
.published-page-container ul li,
.published-page-container ol li {
margin: 4px 0 !important;
padding-left: 4px !important;
list-style: inherit !important;
}
.published-page-container ul li::marker,
.published-page-container ol li::marker {
color: var(--dark-grey) !important;
}
.dark-mode .published-page-container ul li::marker,
.dark-mode .published-page-container ol li::marker {
color: var(--light-grey) !important;
}
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: var(--dark-grey);
width: 100%;
min-height: 100vh;
}
.dark-mode #app {
color: var(--light-grey);
}
a {
text-decoration: none;
color: var(--pale-green-dark);
cursor: pointer;
}
a:hover {
color: var(--pale-green-darker);
}
.dark-mode a {
color: var(--pale-green);
}
.dark-mode a:hover {
color: var(--pale-green);
}
.window-height {
height: 100vh;
}
.prompt {
min-height: 120px;
}
.overflow {
height: calc(100vh - 200px);
overflow: auto;
}
.right {
position: absolute;
right: 10px;
}
.max-width-95 {
max-width: 95%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
.hidden {
display: none;
position: absolute;
}
.v-spinner {
position: absolute;
left: calc(50% - 21px);
top: 50%;
}
* {
position: relative;
text-align: left;
}
html.dark-mode {
background-color: black !important;
}
body {
margin: 0;
padding: 0;
gap: var(--spacing-md);
background-color: var(--color-neutral-100) !important;
min-height: unset !important;
font-family: var(--font-family-base);
}
.dark-mode {
background-color: var(--color-neutral-500) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
}
.marginBottom10px {
margin-bottom: var(--spacing-md) !important;
display: inline-block;
}
.mainTitle {
display: inline-block;
margin: var(--spacing-xl) 0;
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
:root {
--pale-green: #b6d7a8;
--pale-green-dark: #326800;
--pale-green-darker: #163d00;
--button-hover-green: #9abe8b;
--button-green-dark: #142900;
--button-green: #77b052;
--button-green-hover: #5a8a3d;
--button-violet: #3f51b5;
--button-violet-hover: #28358a;
--darkest-grey: #161616;
--dark-grey: #232323;
--semi-dark-grey: #343434;
--medium-dark-grey: #5f5f5f;
--medium-grey: #bcbcbc;
--light-grey: #eaeaea;
--lightest-grey: #f7f7f7;
--medium-light-grey: #d4d4d4;
--error-red: #ff0000;
--error-red-dark: #b30000;
--error-red-darker: #800000;
--error-red-light: #ffcccc;
--warning-yellow: #ffc107;
--info-blue: #2196f3;
--info-blue-hover: #1976d2;
--pale-green-light: #e8f5e8;
--icon-purple: #af3fb5;
--icon-orange: #e68a00;
--font-family: 'Roboto', sans-serif !important;
--font-family-title: 'Montserrat', sans-serif !important;
--spacing-xs: 3px;
--spacing-sm: 5px;
--spacing-md: 10px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--border-radius-sm: 4px;
--border-radius-md: 5px;
--border-radius-lg: 8px;
--border-radius-full: 100%;
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-spinner: 1065;
--z-index-tooltip: 1070;
--z-index-toast: 1080;
--transition-fast: 0.1s ease-in-out;
--transition-normal: 0.2s ease-in-out;
--transition-slow: 0.3s ease-in-out;
--mobile-breakpoint: 750px;
--tablet-breakpoint: 1024px;
--desktop-breakpoint: 1200px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.left-align {
text-align: left !important;
}
.right-align {
text-align: right !important;
}
.center-align {
text-align: center !important;
}
.dark-mode {
--background-color: var(--darkest-grey);
--text-color: var(--light-grey);
--border-color: var(--medium-dark-grey);
--input-background: var(--darkest-grey);
--input-text: var(--light-grey);
--input-border: var(--darkest-grey);
background-color: var(--darkest-grey) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
}
.light-mode {
--background-color: #8d2c2c;
--text-color: var(--dark-grey);
--border-color: var(--medium-grey);
--input-background: #fff;
--input-text: var(--dark-grey);
--input-border: var(--medium-grey);
background-color: #f7f7f7 !important;
background: none;
} 
* {
position: relative;
text-align: left;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0px;
gap: 10px;
background-color: #f7f7f7 !important;
min-height: unset !important;
font-family: var(--font-family);
color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dark-mode {
background-color: var(--darkest-grey) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
color: var(--light-grey);
}
.light-mode {
background-color: #f7f7f7 !important;
color: var(--dark-grey);
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 40px 102px;
padding: 20px 0 0 0;
max-width: 1800px;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
.hidden {
display: none;
position: absolute;
}
.pointer {
cursor: pointer;
}
.fa-sign-out {
color: your-new-color;
}
.fa-sign-out:hover {
color: your-hover-color;
} 
body #app_ {
font-family: var(--font-family);
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}
body.mobile #app_ {
font-size: 15px;
}
body #app_ h1 {
color: #333;
font-size: 30px;
font-family: var(--font-family-title);
}
body #app_ h2 {
font-size: 22px;
}
body #app_ h3 {
font-size: 20px;
}
body #app_ .guestView h1 {
font-size: 60px;
font-family: var(--font-family-title);
}
.containerDiv h1,
.containerDiv h2,
.containerDiv h3,
.containerDiv h4,
.containerDiv h5,
.containerDiv h6 {
margin-top: 5px;
}
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
color: white;
}
.dark-mode h1,
.dark-mode h2,
.dark-mode .template-card-title {
background: linear-gradient(to bottom, #ffffff, #8e8e8e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.light-mode h1,
.light-mode h2,
.light-mode .template-card-title {
background: linear-gradient(to bottom, #000000, #666666);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p, ul li, ol li {
color: var(--darker-grey);
font-size: 12px;
}
body.mobile #app_ p, 
body.mobile #app_ ul li, 
body.mobile #app_ ol li {
font-size: 15px;
}
.dark-mode p, 
.dark-mode ul li, 
.dark-mode ol li {
color: var(--light-grey);
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
color: var(--dark-grey);
}
.dark-mode label:not(.amplify-label) {
color: var(--medium-grey);
}
.tinylabel {
font-size: 12px;
line-height: 12px;
color: #333;
padding: 0;
margin: 0;
}
.text-success {
color: var(--pale-green-dark);
}
.dark-mode .text-success {
color: var(--pale-green);
}
body.mobile #app_ .guestView h1 {
font-size: 30px;
}
body.mobile #app_ .guestView p.description {
font-size: 12px;
margin-left: 100px;
margin-right: 100px;
} 
.vertical {
display: flex;
flex-direction: column;
}
.vertical * {
text-align: center;
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 75vh;
}
.left {
text-align: left;
justify-content: left;
}
.right {
position: absolute;
right: 10px;
}
.justifyLeft {
justify-content: left;
}
.marginBottom10px {
margin-bottom: 10px !important;
display: inline-block;
}
.margin-top-50px {
margin-top: 50px !important;
}
.margin-top-150px {
margin-top: 150px !important;
}
.margin-top-20px {
margin-top: 20px;
}
.margin-top-0px {
margin-top: 0px !important;
}
.margin-bottom-50px {
margin-bottom: 50px;
}
.max-width-95 {
max-width: 95%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
.window-height {
height: 100vh;
}
.overflow {
height: calc(100vh - 200px);
overflow: auto;
}
.showOnHover * {
visibility: hidden;
}
.showOnHover:hover * {
visibility: visible;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #495057;
}
.dark-mode .form-group label {
color: var(--pale-green);
}
.flex.notFound {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--medium-grey);
font-size: 1.2rem;
text-align: center;
padding: 2rem;
flex-direction: column;
}
.notFound h3,
.notFound p {
margin: 0;
margin-bottom: 10px;
line-height: 1.5;
text-align: center;
}
.notFound p {
margin-bottom: 20px;
}
.dark-mode .notFound {
color: var(--light-grey);
}
.dot {
font-size: 24px;
line-height: .2;
}
.dot_1 {
animation: blink1 2s infinite;
}
.dot_2 {
animation: blink2 2s infinite;
}
.dot_3 {
animation: blink3 2s infinite;
}
@keyframes blink1 {
0%, 1% { opacity: 0; }
20%, 30% { opacity: 1; }
}
@keyframes blink2 {
0%, 1% { opacity: 0; }
50%, 60% { opacity: 1; }
}
@keyframes blink3 {
0%, 1% { opacity: 0; }
80%, 90% { opacity: 1; }
}
.pointer {
cursor: pointer;
}
.smallBtn_wrapper {
position: absolute;
top: 0px;
right: 0px;
}
.hidden {
visibility: hidden;
}
body.mobile .simply-explain {
margin-top: 0;
}
body.mobile .simply-explain-layout {
flex-direction: column;
gap: 20px;
}
body.mobile .simply-explain-column {
min-height: auto;
width: 100%;
padding: 0;
margin-top: 20px;
}
body.mobile .simply-explain-astronaut-icon {
font-size: 60px;
}
body.mobile .simply-explain-example-box,
body.mobile .simply-explain-description-box {
padding: 20px;
}
body.mobile .simply-explain-description-box {
border-right: none;
}
body.mobile .simply-explain-description-box.no-padding-in-mobile {
padding: 0;
}
body.mobile .simply-explain-example-section {
padding-left: 0;
margin-top: 30px;
}
body.mobile .simply-explain-workflow {
padding: 0;
margin-bottom: 20px;
}
body.mobile .reduce-padding-in-mobile {
padding: 5px 0 0px;
}
body.mobile .simply-explain-method .template-step-circle {
position: absolute;
left: 5px;
top: 5px;
transform: translateX(-50%);
z-index: 1;
}
body.mobile .simply-explain-method-content {
padding-left: 20px;
padding-right: 20px;
}
body.mobile .social-media-channels {
gap: 8px;
}
body.mobile .social-channel {
min-width: 80px;
max-width: none;
}
body.mobile .hus-case-study {
margin-top: 0;
}
body.mobile .hus-case-link {
top: unset;
right: unset;
bottom: -35px;
margin-top: 0px;
width: 100%;
}
body.mobile .hus-logo {
top: -20px;
left: 20px;
}
body.mobile #app_ h2.example-templates-title {
font-size: 22px;
}
body.mobile .welcome-header h1 {
font-size: 1.8em;
}
body.mobile .stats-section .flex,
body.mobile .activity-section .flex {
flex-direction: column;
align-items: center;
}
body.mobile .no-activity-card {
margin: 0 var(--spacing-md);
padding: var(--spacing-lg);
}
body.mobile .guestView {
margin-top: 20px;
margin-bottom: 100px;
}
body.mobile .dashbtns {
left: 70px;
right: 10px;
font-size: 12px;
position: relative;
width: calc(100vw - 80px);
top: -50px;
}
body.mobile .dashLinks {
gap: 15px;
}
body.mobile .dashLink {
text-align: center;
margin: 0;
}
body.mobile .dashSocial {
width: 50px;
position: fixed;
bottom: 15px;
right: 5px;
left: unset;
flex-direction: column;
gap: 5px;
border-left: 1px solid var(--pale-green);
display: none;
}
body.mobile .dashSocial i {
font-size: 15px;
}
body.mobile .info-section p {
width: calc(100vw - 100px);
}
body.mobile .hus-case-study {
padding: 0 20px;
margin: 60px 0;
}
body.mobile .hus-case-content {
padding: 25px;
flex-direction: column;
gap: 20px;
text-align: center;
}
body.mobile .hus-logo {
width: 60px;
align-self: center;
}
body.mobile .hus-case-quote {
padding: 15px;
font-size: 14px;
}
body.mobile .hus-case-attribution {
text-align: center;
}
body.mobile header {
width: 100vw;
position: relative;
height: 0px;
}
body.mobile .logo {
width: 60px;
height: 60px;
padding: 2px;
margin: 0;
left: 0;
top: 0;
position: relative;
}
body.mobile .logo img {
width: 50px;
height: auto;
}
body.mobile .navbar {
position: fixed !important;
top: unset;
bottom: 0;
left: 0;
width: 100vw;
height: 70px;
padding-top: 2px;
row-gap: 10px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 100;
padding-right: 135px;
margin-bottom: 0px !important;
border-top: 1px solid var(--pale-green) !important;
overflow-y: auto;
}
body.mobile .guest .navbar {
padding-right: 0px;
}
body.mobile .navbar a {
font-size: 9px;
padding: 0 0 0 0;
margin: 0;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
line-height: 1.1;
white-space: normal;
word-break: break-word;
min-width: 50px;
}
body.mobile .navbar a i {
font-size: 18px;
margin-bottom: 0px;
margin-top: 2px;
}
body.mobile .navbar a br {
display: none;
}
body.mobile .navbar a span, 
body.mobile .navbar a {
text-align: center;
width: 100%;
display: block;
}
body.mobile .navbar a.last {
margin-right: 15px;
}
body.mobile .navbar-serviceText {
font-size: 9px;
margin-top: 5px;
}
body.mobile .breadcrumbTopContainer {
margin-left: 60px;
width: calc(100vw - 60px);
}
.view-userSettings.mobile .breadcrumbTopContainer {
display: none;
}
body.mobile .user_info {
width: 135px;
height: 50px;
bottom: 13px;
top: unset;
left: unset;
right: 0;
z-index: 100;
border-left: 1px solid var(--pale-green);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0px;
background-color: white;
}
body.mobile.dark-mode .user_info {
background-color: black;
}
body.mobile .user_info .name {
font-size: 8px;
}
body.mobile .user_info .organisationName {
font-size: 6px;
}
body.mobile .userCircle {
width: 25px;
height: 25px;
margin-left: calc(50% - 12.5px);
margin-bottom: 0px;
}
body.mobile #signOut {
display: block;
position: relative !important;
right: unset;
top: unset;
width: 40px;
padding-left: 10px;
}
body.mobile #signOut i {
font-size: 20px;
}
body.mobile .darkModeTab {
display: none;
left: 3px;
width: 55px;
top: 70px;
}
body.mobile .darkModeTab .tab-container {
width: 55px;
}
body.mobile .darkModeTab .tab-container i {
font-size: 9px;
}
body.mobile .darkModeTab .tab {
width: 20px;
min-width: 20px;
}
body.mobile .dashSocial_ {
flex: 1 0 135px;
border-left: 1px solid var(--pale-green);
display: flex;
flex-direction: row;
align-items: center;
gap: 0px;
padding-left: 10px;
padding-right: 10px;
height: 50px;
}
body.mobile .btn {
font-size: 10px;
}
.mobile .form-group label {
font-size: 12px !important;
}
.mobile .form-group input,
.mobile .form-group select,
.mobile .form-group textarea {
font-size: 12px !important;
}
.mobile .form-group.checkbox label {
font-size: 12px !important;
}
.mobile .data-table-wrapper .list-footer {
text-align: left;
}
body.mobile .data-table th,
body.mobile .data-table td {
min-width: 120px;
word-break: break-word;
white-space: normal;
padding: 8px 6px;
}
body.mobile .data-table-wrapper {
overflow-x: auto;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
body.mobile .data-table {
width: max-content;
min-width: 100%;
border-collapse: collapse;
box-sizing: border-box;
}
body.mobile .mobile-cards-wrapper {
width: 100%;
max-width: 100vw;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile .mobile-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.mobile .mobile-card-title {
font-weight: 600;
font-size: 16px;
color: var(--dark-grey);
line-height: 1.3;
flex: 1;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-width: 0;
}
body.mobile.dark-mode .mobile-card-title {
color: var(--light-grey);
}
body.mobile .mobile-card-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
align-items: center;
}
body.mobile .mobile-card-actions i {
font-size: 16px;
padding: 8px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
body.mobile .mobile-card-actions i:hover {
background-color: var(--light-grey);
}
body.mobile.dark-mode .mobile-card-actions i:hover {
background-color: var(--dark-grey);
}
body.mobile .mobile-card-details {
display: grid;
gap: 8px;
}
body.mobile .mobile-card-detail {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 6px 0;
border-bottom: 1px solid var(--lightest-gray);
gap: 8px;
width: 100%;
box-sizing: border-box;
}
body.mobile .mobile-card-detail:last-child {
border-bottom: none;
}
body.mobile.dark-mode .mobile-card-detail {
border-bottom: 1px solid var(--dark-grey);
}
body.mobile .mobile-card-label {
font-weight: 500;
color: var(--medium-grey);
font-size: 14px;
line-height: 1.4;
flex: 1;
min-width: 0;
max-width: 50%;
word-break: break-word;
overflow-wrap: break-word;
text-align: left !important;
}
body.mobile.dark-mode .mobile-card-label {
color: var(--medium-dark-grey);
}
body.mobile .mobile-card-value {
font-size: 14px;
color: var(--dark-grey);
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 50%;
text-align: right !important;
}
body.mobile.dark-mode .mobile-card-value {
color: var(--light-grey);
}
body.mobile .mobile-cards-wrapper .list-footer {
margin-top: 20px;
padding: 15px;
background: var(--lightest-gray);
border: 1px solid var(--medium-grey);
border-radius: 8px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
body.mobile .data-table-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .data-table-wrapper table.data-table {
width: 100%;
table-layout: fixed;
}
body.mobile .data-table-wrapper .data-table th,
body.mobile .data-table-wrapper .data-table td {
padding: 12px 8px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
body.mobile .data-table-wrapper .data-table th:first-child,
body.mobile .data-table-wrapper .data-table td:first-child {
width: 50%;
font-weight: 500;
text-align: left !important;
padding-right: 8px;
}
body.mobile .data-table-wrapper .data-table th:last-child,
body.mobile .data-table-wrapper .data-table td:last-child {
width: 50%;
text-align: left !important;
padding-left: 8px;
}
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > *,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > div,
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child > span {
text-align: left !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table td:last-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table .verification-buttons {
text-align: right !important;
margin-top: 8px !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper .data-table .verification-buttons .btn {
font-size: 10px !important;
padding: 4px 8px !important;
margin-left: 4px !important;
text-align: center !important; 
}
body.mobile .view-userSettings .data-table-wrapper .list-footer {
margin-top: 15px;
padding: 12px;
background: var(--lightest-gray);
border: 1px solid var(--medium-grey);
border-radius: 8px;
text-align: center;
}
body.mobile.dark-mode .view-userSettings .data-table-wrapper .list-footer {
background: var(--darkest-grey);
border: 1px solid var(--dark-grey);
}
body.mobile.dark-mode .mobile-cards-wrapper .list-footer {
background: var(--darkest-grey);
border: 1px solid var(--dark-grey);
}
body.mobile .view-userSettings .mobile-card-actions .fa-gear {
color: var(--pale-green-dark);
}
body.mobile .view-userSettings .mobile-card-actions .fa-trash {
color: var(--error-red-dark);
}
body.mobile.dark-mode .view-userSettings .mobile-card-actions .fa-gear {
color: var(--pale-green);
}
body.mobile.dark-mode .view-userSettings .mobile-card-actions .fa-trash {
color: var(--error-red-light);
}
.mobile .modal-header .modal-title {
font-size: 14px !important;
}
.mobile .modal .compare-count h2 {
font-size: 14px !important;
}
.mobile .modal .sub-text {
font-size: 10px !important;
}
body.mobile .modal .compare-item {
padding: 0 5px !important;
gap: 10px;
}
body.mobile .modal .compare-item .compare-content:first-of-type {
margin-left: 0 !important;
padding-right: 8px !important;
padding-left: 5px !important;
}
body.mobile .modal .compare-item .compare-content:nth-of-type(2) {
margin-right: 0 !important;
padding-left: 8px !important;
padding-right: 5px !important;
}
body.mobile .modal .compare-item .compare-content:last-of-type {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 8px !important;
padding-right: 5px !important;
}
body.mobile .modal .compare-item .compare-content {
padding-top: 15px !important;
min-width: 0 !important;
flex: 1 !important;
}
body.mobile .modal .compare-item .compare-content label {
padding-bottom: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.mobile .modal .compare-item .compare-content div[contenteditable] {
font-size: 13px !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body.mobile .modal-dialog.xl .modal .compare-item {
padding: 0 5px !important;
}
body.mobile .navbar .vue-tooltip {
display: none !important;
}
body.mobile .vue-tooltip {
font-size: 11px;
line-height: 11px;
height: 20px;
padding: 3px 6px;
}
.mobile .step-tools {
margin: 10px 0 0 0;
position: relative !important;
z-index: 3 !important;
}
body.mobile.view-processes .breadcrumbTopContainer {
display: none;
}
body.mobile.view-processes .containerDiv {
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
body.mobile.view-processes .flex {
width: 100%;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
body.mobile .messageColumn {
max-width: 100% !important;
margin-top: 10px;
}
body.mobile .step-circle-indicator {
display: none;
}
body.mobile .flex {
flex-direction: column;
}
body.mobile .runNavigation {
flex-basis: auto;
width: 100%;
margin-bottom: 20px;
}
body.mobile .process-steps-vertical-wrapper {
margin: 10px 0;
}
body.mobile .process-steps-vertical {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 30px;
padding: 40px 10px 10px 10px;
margin-bottom: 10px;
position: relative;
}
body.mobile .step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: auto;
margin: 0 0px;
min-height: 75px;
position: relative;
width: 37px;
}
body.mobile .step-circle {
position: relative;
z-index: 2;
}
body.mobile .step-arrow {
width: 50px;
margin: 0 5px;
align-self: center;
position: absolute;
top: 17px;
right: -27px;
height: 1px;
}
body.mobile .step-arrow::after {
left: 100%;
top: 50%;
bottom: auto;
transform: translateY(-50%);
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent var(--process-arrow-light);
}
body.mobile .step-details {
position: relative;
top: 8px;
margin-top: 0;
left: 50%;
transform: translateX(-50%);
min-width: 0;
max-width: 100px;
text-align: center;
white-space: nowrap;
display: none;
}
body.mobile .step-details.active {
display: block;
}
body.mobile .step-circle-wrapper .rerunBtn {
position: absolute;
left: 40%;
top: -40px;
width: 25px;
min-width: 0;
max-width: 25px;
height: 25px;
transform: translateX(-50%);
z-index: 3;
font-size: 14px;
padding: 2px 0;
box-sizing: border-box;
text-align: center;
line-height: 21px;
}
body.mobile .step-circle.active:before {
left: 50%;
top: 38px;
transform: translateX(-50%);
}
body.mobile .process-steps-vertical-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0;
}
body.mobile .helpColumn-container {
width: 100%;
margin-top: 10px;
}
body.mobile .helpColumn {
width: 100%;
}
body.mobile .helpColumn-stable-wrapper {
width: 100%;
left: 0;
z-index: 10 !important;
}
body.mobile .helpColumn-content {
z-index: 10 !important;
}
body.mobile .helpColumn {
z-index: 10 !important;
}
body.mobile .sub-chat-input-tools {
z-index: 10 !important;
}
body.mobile .sub-chat {
z-index: 10 !important;
}
body.mobile .tiptap-container {
z-index: 10 !important;
}
body.mobile .tiptap-container-right {
z-index: 10 !important;
}
body.mobile .tiptap-container .context-menu {
z-index: 150 !important;
}
body.mobile.dark-mode .step-arrow::after {
border-color: transparent transparent transparent var(--process-arrow-dark);
}
body.mobile .runNavigation.runNavigation-collapsed {
flex-basis: auto;
}
body.mobile .process-steps-vertical.collapsed {
flex-direction: row;
justify-content: center;
}
body.mobile .process-steps-vertical.collapsed .step-circle-wrapper {
margin: 0 2px;
}
body.mobile .process-steps-vertical.collapsed .step-details,
body.mobile .process-steps-vertical.collapsed .step-arrow {
display: none;
}
.view-userSettings.mobile .userSettingsContainer {
padding-bottom: 300px;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn {
padding-top: 80px !important;
position: fixed;
bottom: 70px;
left: 0px;
width: calc(100vw - 0px) !important;
height: fit-content;
z-index: 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 10px;
border-top: 1px solid var(--medium-grey);
border-radius: 0px;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn > div {
flex: 1 1 40% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn > div > .btn {
min-width: unset !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .settings-buttons-user {
flex: 1 1 40% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .settings-buttons-organisation {
flex: 1 1 60% !important;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .active-organisation {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
z-index: 100;
margin-top: 0px !important;
padding: 10px;
display: grid;
grid-template-columns: auto 1fr;
gap: 5px 10px;
align-items: center;
}
.view-userSettings.mobile .userSettingsContainer .settingsColumn .active-organisation > span {
font-size: 10px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.view-userSettings.mobile .formColumn {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.view-userSettings.mobile .formColumn h3 {
left: 50px;
width: calc(100% - 100px);
text-align: center;
}
.view-userSettings.mobile .formColumn .settings-list > .list-header,
.view-userSettings.mobile .formColumn .settings-list > .list-footer {
padding: 0;
border: none;
background: none;
border-radius: 0;
}
.view-userSettings.mobile .formColumn .settings-list > .list-header {
display: contents;
}
.view-userSettings.mobile .formColumn .settings-list .list-header .list-item-field {
background-color: black;
font-weight: bold;
border-bottom: 1px solid var(--medium-dark-grey);
padding: 8px 10px;
}
.view-userSettings.mobile .formColumn .settings-list .list-item-field {
padding: 8px 10px;
white-space: normal;
word-break: break-all;
border-bottom: 1px solid var(--medium-dark-grey);
background-color: var(--dark-grey);
}
.view-userSettings.mobile .formColumn .settings-list .list-item-field:first-child {
border-right: 1px solid var(--medium-dark-grey);
}
.view-userSettings.mobile .formColumn .settings-list > .list-item:has(+ .list-footer) .list-item-field {
border-bottom: none;
}
.view-userSettings.mobile .formColumn .settings-list > .list-footer {
grid-column: 1 / -1;
display: flex;
padding: 8px 10px;
background-color: black !important;
border-top: 1px solid var(--medium-dark-grey) !important;
}
.view-userSettings.mobile .formColumn .settings-list > .list-footer .btn {
margin: 0;
}
.view-userSettings.mobile .formColumn .legacy-organization-grid {
display: grid;
grid-template-columns: 1fr auto;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
overflow: hidden;
}
body.mobile .view-userSettings [storage-key="user-settings-table"] .data-table,
body.mobile .view-userSettings [storage-key="chrome-extension-table"] .data-table,
body.mobile .view-userSettings [storage-key="organisation-settings-table"] .data-table,
body.mobile .view-userSettings [storage-key="subscription-table"] .data-table {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important;
border-spacing: 0 !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:first-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:first-child {
width: 50% !important;
text-align: left !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:first-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:first-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:last-child,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:last-child {
width: 50% !important;
text-align: right !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="user-settings-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="chrome-extension-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="organisation-settings-table"] td:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] th:last-child *,
body.mobile .view-userSettings .data-table-wrapper [storage-key="subscription-table"] td:last-child * {
text-align: inherit !important;
}
body.mobile .view-userSettings .data-table-container {
display: block !important;
grid-template-columns: none !important;
}
.view-userSettings .formColumn .list-item .list-btn, 
.view-userSettings.mobile .formColumn .list-item .list-btn {
flex: 0 0 auto !important;
width: auto !important;
min-width: 60px;
}
.view-userSettings.mobile .formColumn .organisation-list .list-item-field:last-child {
border-right: none;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-header,
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 0 !important;
overflow: hidden !important;
padding: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
flex-direction: unset !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-header {
background-color: black !important;
font-weight: bold !important;
border-bottom: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px 5px 0 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item {
background-color: var(--dark-grey) !important;
border-top: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item:last-of-type {
border-radius: 0 0 5px 5px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field {
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
text-overflow: unset !important;
overflow: visible !important;
border-bottom: 1px solid var(--medium-dark-grey) !important;
background-color: inherit !important;
flex: none !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
vertical-align: top !important;
border-right: 1px solid var(--medium-dark-grey) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field:first-child {
border-right: 1px solid var(--medium-dark-grey) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field:last-child,
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field.no-border-right {
border-right: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item:last-of-type .list-item-field {
border-bottom: none !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field div {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field div:last-child {
margin-bottom: 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight {
display: flex !important;
gap: 10px !important;
margin-top: 8px !important;
justify-content: flex-start !important;
align-items: center !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight div {
display: inline-block !important;
margin-bottom: 0 !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight i {
padding: 8px !important;
cursor: pointer !important;
border-radius: 4px !important;
font-size: 14px !important;
transition: background-color 0.2s ease !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight i:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight .fa-gear {
color: var(--pale-green) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .forceRight .fa-trash {
color: var(--error-red-light) !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a {
color: var(--pale-green) !important;
text-decoration: none !important;
font-size: 14px !important;
display: inline-block !important;
margin-bottom: 8px !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a:hover {
text-decoration: underline !important;
}
body.mobile.view-userSettings .userSettingsContainer .teamManagementColumn .list-item-field a i {
margin-right: 5px !important;
}
.view-userSettings.mobile .formColumn .legacy-table-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
overflow: hidden;
}
body.mobile .assistant-edit-layout {
flex-direction: column;
gap: 10px !important;
}
body.mobile .assistant-settings-column {
flex: 1 1 auto !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.mobile .assistant-settings-column .active-organisation-role {
word-wrap: break-word !important;
white-space: normal !important;
max-width: 100% !important;
}
body.mobile .assistant-training-column {
flex: 1 1 100% !important;
max-width: 100% !important;
}
body.mobile.view-dashBoard .containerDiv .template-card,
body.mobile .containerDiv.guestView .template-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 0 0 15px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
flex: none; 
margin: 10px 0; 
}
body.mobile.view-dashBoard .containerDiv .template-card:hover,
body.mobile .containerDiv.guestView .template-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card,
body.mobile.dark-mode .containerDiv.guestView .template-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile.view-dashBoard .containerDiv .template-card-body,
body.mobile .containerDiv.guestView .template-card-body {
position: relative;
padding: 0;
align-items: flex-start;
text-align: left;
margin-bottom: -35px;
}
body.mobile.view-dashBoard .containerDiv .template-card-title,
body.mobile .containerDiv.guestView .template-card-title {
font-weight: 600;
font-size: 16px;
color: var(--dark-grey);
line-height: 1.3;
text-align: left;
margin-bottom: 8px;
margin-top: 0;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-title,
body.mobile.dark-mode .containerDiv.guestView .template-card-title {
color: var(--light-grey);
}
body.mobile.view-dashBoard .containerDiv .template-card-text,
body.mobile .containerDiv.guestView .template-card-text {
font-size: 14px;
color: var(--medium-grey);
text-align: left;
line-height: 1.4;
margin-bottom: 8px;
}
body.mobile.view-dashBoard .containerDiv .template-card-btns,
body.mobile .containerDiv.guestView .template-card-btns {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
margin: 0;
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
body.mobile.view-dashBoard .containerDiv .template-card-btns .btn,
body.mobile .containerDiv.guestView .template-card-btns .btn {
font-size: 12px !important;
padding: 6px 12px !important;
margin: 0 !important;
flex: 0 0 auto;
min-width: 60px;
}
body.mobile.view-dashBoard .containerDiv .template-card-tag,
body.mobile .containerDiv.guestView .template-card-tag,
body.mobile.view-dashBoard .containerDiv .template-card-tag[class*="status-"],
body.mobile .containerDiv.guestView .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-tag,
body.mobile.dark-mode .containerDiv.guestView .template-card-tag,
body.mobile.view-dashBoard.dark-mode .containerDiv .template-card-tag[class*="status-"],
body.mobile.dark-mode .containerDiv.guestView .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-body {
text-align: center !important;
padding: 20px 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-title,
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-text {
text-align: center !important;
width: 100% !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .stat-number {
font-size: 28px !important;
font-weight: bold !important;
color: var(--pale-green-dark) !important;
margin-bottom: 8px !important;
display: block !important;
text-align: center !important;
width: 100% !important;
line-height: 1.2 !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .stat-card .stat-number {
color: var(--pale-green) !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-btns {
justify-content: center !important;
width: 100% !important;
margin-top: 15px !important;
}
body.mobile.view-dashBoard .containerDiv .stat-card .template-card-btns .btn {
margin: 0 auto !important;
text-align: center !important;
}
body.mobile.view-dashBoard .containerDiv .activity-card .template-card-tag,
body.mobile.view-dashBoard .containerDiv .activity-card .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .template-card-tag,
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .template-card-tag[class*="status-"] {
display: none !important;
}
body.mobile.view-dashBoard .containerDiv .activity-card .activity-meta {
font-size: 12px;
color: var(--medium-grey);
margin-top: 5px;
display: block;
}
body.mobile.view-dashBoard.dark-mode .containerDiv .activity-card .activity-meta {
color: var(--medium-dark-grey);
}
body.mobile.view-dashBoard .containerDiv .flex {
flex-direction: column;
gap: 0;
}
body.mobile.view-dashBoard .containerDiv .stats-section .flex,
body.mobile.view-dashBoard .containerDiv .activity-section .flex {
flex-direction: column;
align-items: stretch;
width: 100%;
}
body.mobile.view-dashBoard .containerDiv .stats-section,
body.mobile.view-dashBoard .containerDiv .activity-section {
margin-bottom: 30px;
}
body.mobile.view-dashBoard .containerDiv .stats-section h3,
body.mobile.view-dashBoard .containerDiv .activity-section h3 {
margin-bottom: 15px;
text-align: center;
font-size: 18px;
}
body.mobile.view-dashBoard .containerDiv .welcome-header {
text-align: center;
margin-bottom: 30px;
}
body.mobile.view-dashBoard .containerDiv .welcome-header h1 {
font-size: 20px;
margin-bottom: 10px;
}
body.mobile.view-dashBoard .containerDiv {
padding-bottom: 100px;
}
body.mobile .subchat-help-column-button {
display: none !important;
}
body.mobile .mark-as-ready-container {
position: relative !important;
z-index: 1 !important;
margin-bottom: 10px !important;
min-height: 40px !important;
}
body.mobile .step-tools {
position: relative !important;
z-index: 3 !important;
margin: 15px 0 10px 0 !important;
bottom: auto !important;
}
body.mobile .step-tools[style*="marginTop: '5px'"] {
margin-top: 20px !important;
clear: both !important;
}
body.mobile .copy-as-wrapper {
bottom: 40px !important;
}
body.mobile .tiptap-container .copy-as-wrapper {
bottom: 42px !important;
}
body.mobile .containerDiv.guestView {
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
body.mobile .containerDiv.guestView .additional-info {
padding-left: 20px;
padding-right: 20px;
margin-top: 50px;
}
body.mobile .containerDiv.guestView .info-section {
text-align: center !important;
margin-bottom: 40px;
}
body.mobile .containerDiv.guestView .info-section h2 {
text-align: center !important;
font-size: 1.2rem;
margin-bottom: 10px;
}
body.mobile .containerDiv.guestView .info-section p {
text-align: center !important;
width: 100% !important;
margin: 0 auto 15px;
line-height: 1.4;
}
body.mobile .containerDiv.guestView .template-card {
text-align: center !important;
margin: 10px auto !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-body {
text-align: center !important;
padding: 10px 15px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-title,
body.mobile .containerDiv.guestView .template-card .template-card-text {
text-align: center !important;
width: 100% !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-btns {
justify-content: center !important;
width: 100% !important;
margin-top: 15px !important;
}
body.mobile .containerDiv.guestView .template-card .template-card-btns .btn {
margin: 0 auto !important;
text-align: center !important;
}
body.mobile .containerDiv.guestView .feature-card {
text-align: center;
margin: 10px auto;
}
body.mobile .containerDiv.guestView .features {
margin-top: 50px;
}
body.mobile .dashbtns {
position: relative !important;
top: -50px !important;
left: 70px !important;
right: 10px !important;
width: calc(100vw - 80px) !important;
padding: 5px 10px;
margin-bottom: -50px;
justify-content: space-between;
align-items: center;
}
body.mobile .dashLinksLeft {
gap: 15px;
}
body.mobile .dashLinks {
gap: 10px;
}
body.mobile .dashLink {
margin: 0;
text-align: center;
}
body.mobile .template-card {
flex: 0 1 200px;
}
body.mobile .tabs {
justify-content: center;
width: 100%;
}
body.mobile .process-runs-container {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 15px !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
body.mobile .process-runs-container[style] {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container > * {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .process-runs-container .data-table-container {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
display: block !important;
}
body.mobile .process-runs-container .data-table-container[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
padding: 0 0 80px 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
display: block !important;
flex: none !important;
flex-basis: auto !important;
flex-grow: 0 !important;
flex-shrink: 1 !important;
position: relative !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .process-runs-container .mobile-cards-wrapper > *,
body.mobile .process-runs-container .data-table-container > * {
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
width: 100% !important;
}
body.mobile .process-runs-container table,
body.mobile .process-runs-container .data-table,
body.mobile .process-runs-container .data-table-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
table-layout: fixed !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .containerDiv:has(.process-runs-container) {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body.mobile.view-processes .containerDiv {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
z-index: 0;
}
body.mobile .process-runs-container .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: calc(100% - 2px) !important;
max-width: calc(100% - 2px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.mobile .process-runs-container .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .process-runs-container .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
body.mobile .process-runs-container .mobile-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.mobile .process-runs-container .mobile-card-title {
font-weight: 600;
font-size: 13px;
color: var(--pale-green-dark);
line-height: 1.2;
flex: 1;
min-width: 0;
max-width: calc(100% - 60px);
font-family: monospace;
overflow: hidden;
}
body.mobile.dark-mode .process-runs-container .mobile-card-title {
color: var(--pale-green);
}
body.mobile .process-runs-container .mobile-card-title .copy-cell-container {
width: 100%;
max-width: 100%;
justify-content: flex-start;
text-align: left;
overflow: hidden;
}
body.mobile .process-runs-container .mobile-card-title .copy-cell-container a,
body.mobile .process-runs-container .mobile-card-title .copy-cell-container span {
color: var(--pale-green-dark);
font-family: monospace;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
body.mobile.dark-mode .process-runs-container .mobile-card-title .copy-cell-container a,
body.mobile.dark-mode .process-runs-container .mobile-card-title .copy-cell-container span {
color: var(--pale-green);
}
body.mobile .process-runs-container .mobile-card-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
align-items: center;
width: 50px;
justify-content: flex-end;
}
body.mobile .process-runs-container .mobile-card-actions i {
font-size: 14px;
padding: 6px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
color: var(--error-red-dark);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .process-runs-container .mobile-card-actions i:hover {
background-color: var(--light-grey);
}
body.mobile.dark-mode .process-runs-container .mobile-card-actions i {
color: var(--error-red-light);
}
body.mobile.dark-mode .process-runs-container .mobile-card-actions i:hover {
background-color: var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-details {
display: grid !important;
gap: 8px;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .process-runs-container .mobile-card-detail {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 5px 0;
border-bottom: 1px solid var(--lightest-gray);
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
min-height: 24px;
}
body.mobile .process-runs-container .mobile-card-detail:last-child {
border-bottom: none;
}
body.mobile.dark-mode .process-runs-container .mobile-card-detail {
border-bottom: 1px solid var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-label {
font-weight: 500;
color: var(--medium-grey);
font-size: 13px;
line-height: 1.3;
flex: 0 0 35%;
min-width: 0;
max-width: 35%;
word-break: break-word;
overflow-wrap: break-word;
text-align: left !important;
padding-right: 6px;
}
body.mobile.dark-mode .process-runs-container .mobile-card-label {
color: var(--medium-dark-grey);
}
body.mobile .process-runs-container .mobile-card-value {
font-size: 13px;
color: var(--dark-grey);
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 65%;
text-align: right !important;
padding-left: 6px;
}
body.mobile.dark-mode .process-runs-container .mobile-card-value {
color: var(--light-grey);
}
body.mobile .process-runs-container .mobile-cards-wrapper .list-footer {
position: fixed;
bottom: 70px;
margin: 0;
padding: 15px;
background: var(--lightest-gray);
border-top: 1px solid var(--medium-grey);
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 0;
text-align: center;
width: 100vw;
box-sizing: border-box;
z-index: 50;
}
body.mobile.dark-mode .process-runs-container .mobile-cards-wrapper .list-footer {
background: var(--darkest-grey);
border-top: 1px solid var(--dark-grey);
}
body.mobile .process-runs-container .copy-cell-container {
width: 100%;
max-width: 100%;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
overflow: hidden;
}
body.mobile .process-runs-container .copy-cell-container a {
font-family: monospace;
font-size: 11px;
word-break: break-all;
color: var(--pale-green-dark);
text-decoration: underline;
cursor: pointer;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.mobile.dark-mode .process-runs-container .copy-cell-container a {
color: var(--pale-green);
}
body.mobile .process-runs-container .copy-cell-container span {
font-family: monospace;
font-size: 11px;
word-break: break-all;
color: var(--dark-grey);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
body.mobile.dark-mode .process-runs-container .copy-cell-container span {
color: var(--light-grey);
}
body.mobile .process-runs-container .copy-icon {
font-size: 11px;
cursor: pointer;
color: var(--medium-grey);
flex-shrink: 0;
padding: 3px;
border-radius: 3px;
transition: all 0.2s ease;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .process-runs-container .copy-icon:hover {
color: var(--pale-green-dark);
background-color: var(--lightest-gray);
}
body.mobile.dark-mode .process-runs-container .copy-icon:hover {
color: var(--pale-green);
background-color: var(--dark-grey);
}
body.mobile .process-runs-container .mobile-card-detail .copy-cell-container {
justify-content: flex-end;
text-align: right;
}
body.mobile .process-runs-container .mobile-card-value {
font-size: 14px;
color: var(--dark-grey);
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
flex: 1;
min-width: 0;
max-width: 50%;
text-align: right !important;
}
body.mobile .process-runs-container .mobile-card-detail:has(.mobile-card-label:contains('Status')) .mobile-card-value {
font-weight: 500;
text-transform: capitalize;
}
body.mobile .process-runs-container .mobile-card-detail .mobile-card-value {
font-size: 13px;
line-height: 1.3;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:nth-child(2) .mobile-card-value {
font-weight: 500;
text-transform: capitalize;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:nth-child(n+3) .mobile-card-value {
font-variant-numeric: tabular-nums;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 12px;
line-height: 1.2;
}
body.mobile .process-runs-container .mobile-card-details .mobile-card-detail:first-child .mobile-card-value {
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
white-space: normal;
}
body.mobile .process-runs-container .mobile-card * {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
body.mobile .containerDiv.breadcrumbTopContainer {
width: 100vw;
margin: 0;
padding: 10px 20px;
height: auto;
border-bottom: none;
}
body.mobile .containerDiv.breadcrumbTopContainer .breadcrumbTop {
position: relative;
margin: 0;
display: inline-block;
}
body.mobile .alert-area {
position: relative !important;
margin: 10px auto 20px auto !important;
max-width: calc(100vw - 40px) !important;
width: calc(100vw - 40px) !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: 10 !important;
padding: 10px 15px !important;
box-sizing: border-box !important;
overflow: hidden !important;
min-height: auto !important;
max-height: 80px !important;
line-height: 1.4 !important;
display: flex !important;
align-items: center !important;
}
body.mobile.view-processes .alert-area {
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
padding: 10px 15px !important;
max-height: 80px !important;
min-height: auto !important;
display: flex !important;
align-items: center !important;
}
body.mobile.view-dashBoard .alert-area {
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
padding: 10px 15px !important;
max-height: 80px !important;
min-height: auto !important;
display: flex !important;
align-items: center !important;
}
body.mobile .amplify-authenticator__column {
width: 100%;
}
body.mobile .loginPage .auth-wrapper {
height: calc(100vh - 300px) !important;
}
body.mobile [data-amplify-authenticator] {
width: 100% !important;
}
body.mobile [data-amplify-container] {
width: 100% !important;
}
body.mobile .run-name,
body.mobile .run-name-title {
display: none !important;
}
body.mobile .run-stage-toggle {
display: none !important;
}
body.mobile .comment-view ~ * .navbar,
body.mobile .comment-view .navbar,
body.mobile .navbar {
display: none !important;
}
body.mobile .comment-view {
padding: 0;
min-height: 100vh;
}
body.mobile .comment-view .containerDiv {
padding: var(--spacing-md);
max-width: 100%;
}
body.mobile .comment-view .main-content-area {
flex-direction: column;
gap: 0;
}
body.mobile .comment-view .document-content {
max-width: 100%;
margin-bottom: var(--spacing-lg);
}
body.mobile .comment-view .sidebar-wrapper {
display: none;
}
body.mobile .comment-view .comment-instruction-tag {
font-size: 9px;
padding: 3px 6px;
top: var(--spacing-sm);
right: var(--spacing-sm);
}
body.mobile .comment-view .content-display {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
body.mobile .mobile-comment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: flex;
align-items: flex-end;
}
body.mobile .mobile-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
body.mobile .mobile-modal-content {
position: relative;
width: 100%;
background: white;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
max-height: 70vh;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
body.mobile .mobile-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
body.mobile .mobile-modal-header h3 {
margin: 0;
font-size: 1.1em;
color: var(--dark-grey);
}
body.mobile .mobile-close-btn {
background: none;
border: none;
font-size: 1.5em;
color: var(--medium-dark-grey);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile .mobile-modal-body {
padding: var(--spacing-lg);
max-height: 50vh;
overflow-y: auto;
}
body.mobile .mobile-paragraph-preview {
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm);
background: var(--pale-green-light);
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--pale-green);
}
body.mobile .mobile-target-text {
font-size: 0.9em;
color: var(--medium-dark-grey);
margin-top: var(--spacing-xs);
line-height: 1.4;
}
body.mobile .mobile-comment-textarea {
width: 100%;
min-height: 120px;
padding: var(--spacing-md);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
font-family: var(--font-family);
font-size: 16px; 
resize: vertical;
}
body.mobile .mobile-modal-actions {
padding: var(--spacing-lg);
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
border-top: 1px solid var(--medium-grey);
flex-wrap: wrap;
}
body.mobile .mobile-modal-actions .btn {
margin: 0;
flex: 0 0 auto;
min-width: 80px;
}
body.mobile.dark-mode .mobile-modal-content {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
body.mobile.dark-mode .mobile-modal-header {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
body.mobile.dark-mode .mobile-modal-header h3 {
color: var(--light-grey);
}
body.mobile.dark-mode .mobile-close-btn {
color: var(--medium-grey);
}
body.mobile.dark-mode .mobile-paragraph-preview {
background: rgba(182, 215, 168, 0.1);
border-color: var(--pale-green-dark);
}
body.mobile.dark-mode .mobile-target-text {
color: var(--medium-grey);
}
body.mobile.dark-mode .mobile-comment-textarea {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
body.mobile.dark-mode .mobile-modal-actions {
border-color: var(--medium-dark-grey);
} 
.btn {
color: var(--dark-grey);
margin: 5px;
border-radius: 5px;
font-size: 12px;
padding: 5px 10px;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
text-align: center;
color: black;
}
.btn.active {
background-color: var(--button-green) !important;
}
.dark-mode .btn.active {
background-color: var(--pale-green) !important;
}
.dark-mode .btn {
color: black;
}
.btn-primary {
background-color: var(--info-blue) !important;
color: var(--light-grey) !important;
}
.light-mode .btn-primary {
background-color: var(--info-blue) !important;
color: white !important;
}
.btn-default {
background-color: var(--light-grey) !important;
color: var(--dark-grey) !important;
}
.btn-danger {
color: var(--light-grey) !important;
background-color: var(--error-red-dark) !important;
}
.btn-success {
color: var(--light-grey) !important;
background-color: var(--button-green) !important;
}
.btn-violet {
color: white !important;
background-color: var(--button-violet) !important;
}
.btn-danger:hover {
background-color: var(--error-red-darker) !important;
}
.btn-success:hover {
background-color: var(--button-green-hover) !important;
}
.btn-primary:hover {
background-color: var(--info-blue-hover) !important;
}
.btn-violet:hover {
color: white !important;
background-color: var(--button-violet-hover) !important;
}
.btn-violet:focus {
background-color: var(--button-violet-hover) !important;
}
.btn-counter {
width: 100%;
padding: 1rem 1.5rem;
border-radius: 12px;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.5rem 0 !important;
background: #fff;
border: 1px solid var(--medium-grey);
transition: all 0.2s ease-in-out;
}
.btn-counter:hover {
background-color: var(--lightest-grey);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark-mode .btn-counter {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .btn-counter:hover {
background: var(--semi-dark-grey);
}
.btn-counter-pricing {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5rem;
border-radius: 8px;
background: #fff;
border: 1px solid var(--medium-grey);
transition: all 0.2s ease-in-out;
}
.dark-mode .btn-counter-pricing {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .btn {
width: 32px;
height: 32px;
padding: 0;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 500;
color: var(--dark-grey) !important;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.dark-mode .btn-counter-pricing .btn {
color: var(--light-grey) !important;
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .btn:hover {
background: var(--medium-light-grey);
transform: translateY(-1px);
}
.dark-mode .btn-counter-pricing .btn:hover {
background: var(--semi-dark-grey);
}
.btn-counter-pricing .pricing-count {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.1rem;
color: #333;
}
.dark-mode .btn-counter-pricing .pricing-count {
color: var(--light-grey);
}
.btn-counter-pricing .count-label {
font-weight: 500;
}
.btn-counter-pricing .plan-input {
width: 70px;
text-align: right;
font-size: 1.1rem;
margin: 0 0.5em;
border-radius: 6px;
border: 1px solid #ccc;
padding: 0.2em 0.5em;
}
.dark-mode .btn-counter-pricing .plan-input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.btn-counter-pricing .count-value {
font-weight: 700;
color: var(--button-green);
min-width: 32px;
text-align: left;
}
.dark-mode .btn-counter-pricing .count-value {
color: var(--pale-green);
}
.smallBtn {
padding: 0px 5px !important;
font-size: 12px !important;
}
.addBtn {
background: linear-gradient(to right, var(--button-green), var(--button-green-hover));
color: white;
border: 1px solid var(--pale-green-dark);
font-size: 20px;
line-height: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
.addBtn i {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.addBtn:hover {
transform: scale(1.05);
transition: transform 0.1s ease-in-out;
background: linear-gradient(to right, var(--button-green), var(--pale-green-dark));
}
.addBtn.fixed {
position: fixed;
top: 40px;
left: 0px;
}
.gray-small-btn {
background-color: #f4f4f4;
color: #333;
padding: 2px 7px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ddd;
position: absolute;
right: 0px;
top: 0px;
}
.btn-group {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.dark-mode .btn-group {
color: var(--light-grey);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
} 
.btn:disabled {
cursor: not-allowed !important;
opacity: 0.8 !important;
}
.form-group {
margin-bottom: 1rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dark-grey);
font-size: 14px;
}
.dark-mode .form-group label {
color: var(--pale-green);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
background-color: var(--lightest-grey);
color: var(--dark-grey);
transition: var(--transition-normal);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
border-color: var(--medium-dark-grey);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--pale-green);
box-shadow: 0 0 0 2px var(--pale-green-light);
}
.form-group.checkbox {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
.form-group.checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: var(--pale-green);
}
.form-group.checkbox label {
margin: 0 !important;
font-size: 14px;
cursor: pointer;
flex: 1;
}
input:focus, select:focus, textarea:focus, button:not(.active):focus {
outline: none !important;
box-shadow: none !important;
}
.dark-mode input:not(.amplify-input, .color-picker) {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode textarea {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode input::placeholder {
color: var(--medium-grey);
}
.dark-mode select {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
.dark-mode select option {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.secret-input-group .secret-input-wrapper {
display: flex;
align-items: center;
}
.secret-input-group .secret-eye-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-right: none;
height: 38px;
width: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0;
margin-left: 0;
background: #222;
}
.secret-input-group .secret-eye-btn i {
color: #fff;
}
.secret-input-group .secret-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
flex: 1 1 auto;
width: 100%;
}
select.locked {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey) !important;
}
select.locked option {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.form-group .lock-icon {
position: absolute;
right: 20px;
top: 35px;
cursor: pointer;
z-index: 1;
}
select.locked:disabled {
background-color: var(--medium-grey);
color: var(--dark-grey);
border: 1px solid var(--medium-grey) !important;
}
select.locked:disabled option {
background-color: var(--medium-grey);
color: var(--dark-grey);
}
.dark-mode select.locked:disabled {
background-color: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode select.locked:disabled option {
background-color: var(--dark-grey);
color: var(--light-grey);
} 
.input-tools {
border-top: 1px solid var(--medium-grey);
gap: 5px !important;
padding-top: 10px;
margin-top: 10px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.input-tools-header {
margin-left: 10px;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.dark-mode .input-tools {
border-top: 1px solid var(--pale-green);
}
.input-tools-prompt {
display: block;
}
.input-tools-prompt-item {
padding: 0px;
height: auto;
}
.input-tools-prompt-item textarea {
background-color: white;
color: black;
min-height: 150px;
width: 100%;
font-size: 14px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
box-sizing: border-box;
height: fit-content;
resize: none;
}
.dark-mode .input-tools-prompt-item textarea {
background-color: black;
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey) !important;
}
.input-tools-prompt-btns {
margin-top: 30px;
}
.input-tools-wrapper .template-card {
flex: 0 1 350px;
}
.input-tools-wrapper .template-card-body {
padding-top: 20px;
}
.input-tools-prompt-item textarea:focus,
.input-tools-prompt-item textarea:active {
outline: none !important;
box-shadow: none !important;
}
.input-tools-item {
flex: 1 1 calc(33.333% - 5px);
min-width: 280px;
border: 1px solid var(--medium-grey);
padding: 5px 10px 5px 10px;
border-radius: 5px;
}
.dark-mode .input-tools-item {
border: 1px solid var(--medium-dark-grey);
}
.input-tools-item label {
margin-top: 0px !important;
}
.input-tools-item-files {
padding-bottom: 10px;
border-bottom: 1px solid var(--medium-grey);
}
.input-tools-item-upload {
padding-top: 10px;
}
.website-url-input-wrapper {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.website-url-input-wrapper .form-control {
flex: 1;
}
.website-url-input-wrapper .btn {
white-space: nowrap;
min-width: 40px;
}
@media (max-width: 768px) {
.input-tools-item {
flex: 1 1 100%;
min-width: auto;
margin-bottom: 10px;
}
.website-url-input-wrapper {
flex-direction: column;
gap: 0.5rem;
}
.website-url-input-wrapper .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.input-tools-item {
flex: 1 1 calc(50% - 5px);
min-width: 240px;
}
}
.uploadedFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.uploadedFiles:first-of-type {
margin-top: 10px;
}
.uploadedFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .uploadedFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .uploadedFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.uploadedFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uploadedFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.uploadedFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.uploadedFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .uploadedFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .uploadedFiles .remove-file-btn:hover {
background: var(--error-red);
}
.auto-grow-wrapper {
width: 100%;
padding: 0;
box-sizing: border-box;
border: none;
border-radius: 0;
background: none;
}
.auto-grow-textarea {
width: 100%;
min-height: 150px;
background-color: var(--lightest-grey);
color: var(--light-grey);
font-size: 14px;
border: 1px solid var(--medium-dark-grey);
border-radius: 5px;
box-sizing: border-box;
height: fit-content;
resize: none;
padding: 20px;
outline: none;
transition: border-color 0.2s;
overflow: hidden;
margin-bottom: 10px;
}
.no-margin-top .auto-grow-textarea {
margin-top: 0px !important;
}
.auto-grow-textarea:focus,
.auto-grow-textarea:active {
outline: none !important;
box-shadow: none !important;
}
.dark-mode .auto-grow-textarea {
background-color: black;
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.assistant-selector {
position: sticky;
top: 0;
z-index: 200;
background-color: rgba(255, 255, 255, 0.5);
padding: 30px 0 10px;
margin-top: 0px;
height: 67px;
}
.assistant-selector-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.assistant-selector .btns {
z-index: 3;
margin-top: 35px;
}
.assistant-btns-container {
position: relative;
overflow: hidden;
max-height: 40px; 
transition: max-height 0.3s ease, padding 0.3s ease;
}
.assistant-btns-container.expanded {
max-height: 200px; 
overflow: visible;
padding: 10px; 
background: var(--input-background);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 200; 
position: absolute; 
}
.assistant-btns-container.has-hidden {
cursor: pointer;
}
.assistant-btn.hidden-assistant {
display: none;
}
.assistant-btns-container.expanded .assistant-btn.hidden-assistant {
display: inline-block;
}
.hidden-assistants-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--medium-grey);
color: var(--text-color);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
margin-left: 8px;
transition: background-color 0.2s ease;
vertical-align: top;
}
.hidden-assistants-indicator:hover {
background: var(--dark-grey);
}
.hidden-assistants-indicator .fa-ellipsis-h {
font-size: 10px;
}
.hidden-count {
font-weight: 600;
font-size: 11px;
}
.light-mode .assistant-btns-container.expanded {
background: var(--input-background);
border-color: var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark-mode .assistant-btns-container.expanded {
background: var(--input-background);
border-color: var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark-mode .hidden-assistants-indicator {
background: var(--medium-dark-grey);
color: var(--light-text-color);
}
.dark-mode .hidden-assistants-indicator:hover {
background: var(--dark-grey);
}
@media (max-width: 768px) {
.assistant-btns-container.expanded {
max-height: 160px; 
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.hidden-assistants-indicator {
padding: 4px 8px;
font-size: 11px;
}
.hidden-count {
font-size: 10px;
}
}
@media (hover: none) and (pointer: coarse) {
.assistant-btns-container:hover {
max-height: 40px; 
}
}
.assistant-btns-container.read-only {
opacity: 0.7;
cursor: default;
}
.assistant-btns-container.read-only .btn {
cursor: default;
opacity: 0.6;
}
.readonly-indicator {
background-color: var(--medium-grey) !important;
color: var(--light-grey) !important;
cursor: default !important;
}
.readonly-indicator:hover {
background-color: var(--medium-grey) !important;
}
.dark-mode .readonly-indicator {
background-color: var(--medium-dark-grey) !important;
color: var(--light-text-color) !important;
}
.dark-mode .readonly-indicator:hover {
background-color: var(--medium-dark-grey) !important;
}
.previous-step-subchats-available {
text-align: center;
padding: 20px;
background: var(--light-background);
border-radius: 8px;
margin: 20px;
border: 1px solid var(--border-color);
}
.previous-step-subchats-available p {
margin-bottom: 15px;
color: var(--text-color);
font-size: 14px;
}
.previous-step-subchats-available .btn {
min-width: 200px;
}
.dark-mode .previous-step-subchats-available {
background: var(--dark-background);
border-color: var(--dark-border-color);
}
.dark-mode .previous-step-subchats-available p {
color: var(--light-text-color);
}
.dark-mode .assistant-selector {
background-color: rgba(0, 0, 0, 0.5);
}
.assistant-selector .template-card-tag {
top: 10px !important;
color: var(--light-grey)!important;
background-color: var(--dark-grey)!important;
border: 1px solid var(--dark-grey)!important;
}
.assistant-selector:after {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(5px);
z-index: -1;
}
.sub-chat-input-tools {
position: sticky;
bottom: 0;
z-index: 2;
padding: 10px 0 10px;
margin-top: 0px;
height: 67px;
height: fit-content;
box-sizing: border-box;
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
}
.sub-chat-input-tools:empty {
display: none;
}
.sub-chat-input-tools:after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
z-index: -1;
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.dark-mode .sub-chat-input-tools:after {
background-color: rgba(0, 0, 0, 0.5);
}
.character-counter, .sub-chat-input-buttons, .sub-chat-input-buttons-special {
padding-left: 20px;
font-size: 10px;
}
.character-counter.main-chat {
padding-left: 0px;
margin-bottom: 50px;
top: -10px;
}
.character-counter.main-chat div {
display: inline-block;
}
.sub-chat-input-buttons-special {
display: flex;
gap: 5px;
align-items: center;
}
.sub-chat-input-buttons {
padding-left: 20px;
font-size: 10px;
display: flex;
gap: 0px;
}
.sub-chat-input-buttons .btn {
display: flex;
align-items: center;
gap: 5px;
}
.check-all {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
z-index: 10;
padding: 4px 0 4px 0;
width: 50%;
}
.check-all input {
top: 30px;
right: 14px;
}
.message-checkbox label,
.check-all label {
margin-left: 4px;
margin-bottom: 0;
font-size: 13px;
font-weight: 400;
cursor: pointer;
}
.prompt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.prompt-tools {
display: flex;
gap: 5px;
align-items: center;
height: 10px;
}
.prompt-tools-inner {
position: absolute;
top: 0px;
left: 15px;
z-index: 1;
width: 400px;
}
.suggest-btn, .restore-btn {
font-size: 11px;
padding: 4px 8px;
border-radius: var(--border-radius-sm);
white-space: nowrap;
}
.suggest-btn i, .restore-btn i {
margin-right: 4px;
}
.suggestion-counter {
margin-left: 4px;
font-size: 10px;
opacity: 0.8;
font-weight: normal;
}
@media (max-width: 768px) {
.prompt-header {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.prompt-tools {
align-self: flex-end;
}
}
.subchat-tools {
display: flex;
gap: 5px;
align-items: center;
height: 10px;
margin-bottom: 10px;
}
.subchat-tools-inner {
position: absolute;
top: 0px;
left: 15px;
z-index: 2;
width: 400px;
} 
.list-header {
display: flex;
background-color: var(--light-grey);
font-weight: bold;
padding: 10px 150px 10px 0;
border-radius: 5px 5px 0 0;
border: 1px solid var(--medium-grey);
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .list-header {
background-color: black;
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.list-footer {
padding: 10px;
text-align: right;
background: var(--light-grey);
border-radius: 0px 0px 5px 5px;
border: 1px solid var(--medium-grey);
}
.list-footer .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.list-footer .btn i {
font-size: 0.9em;
}
.list-item {
display: flex;
padding: 8px 150px 8px 0;
border: 1px solid var(--medium-grey);
cursor: default;
border-radius: 0px;
border-top: none !important;
position: relative;
}
.dark-mode .list-item {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.list-item.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.dark-mode .list-item.active {
background-color: var(--pale-green-dark) !important;
color: var(--light-grey) !important;
}
.list-item-field {
flex: 1 1 100px;
padding: 0 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid var(--medium-grey);
white-space: nowrap;
}
.dark-mode .list-item-field {
border-right: 1px solid var(--medium-dark-grey);
}
.list-item-field.no-border-right {
border-right: none !important;
}
.list-btn {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
display: flex;
align-items: center;
padding: 0 10px;
}
.list-btn i {
cursor: pointer;
margin-left: 5px;
color: var(--dark-grey);
}
.dark-mode .list-btn i {
color: var(--light-grey);
}
.list-btn:empty {
display: none;
}
.list-group-item {
list-style: none !important;
}
.list-group-item:first-of-type {
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
.list-group-item:last-of-type {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
.list-item:nth-child(even) {
background-color: #f9f9f9;
}
.list-item:nth-child(odd) {
background-color: #fff;
}
.dark-mode .list-item:nth-child(even),
.dark-mode .list-item:nth-child(odd) {
background-color: var(--dark-grey);
}
.drag .handle, .handle_ {
float: left;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
cursor: move;
}
.drag .close {
position: absolute;
top: 8px;
right: 8px;
}
.drag .text {
margin-left: 20px;
}
.drag .list-group {
margin-bottom: 0px !important;
}
.drag .list-group-item {
display: flex !important;
align-items: center !important;
cursor: pointer;
min-height: 40px;
}
.list-group-item button.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.drag .rerunBtn {
position: absolute;
right: 0;
top: 0;
display: none;
}
.drag .list-group-item:hover .rerunBtn {
display: block;
}
.drag .list-group-item.currentstep:after {
content: '';
position: absolute;
top: 16px;
left: 15px;
width: 10px;
height: 10px;
background-color: lightgreen;
border-radius: 50%;
}
.drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--dark-grey);
cursor: default;
}
.light-mode .drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--pale-green);
}
.light-mode .drag .list-group-item {
background-color: var(--light-grey) !important;
border: 1px solid var(--medium-grey) !important;
}
.dark-mode .drag .list-group-item.shownstep {
box-shadow: inset 0px 0px 0px 1px var(--pale-green);
}
.dark-mode .drag .list-group-item {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.dark-mode .list-group-item  {
background-color: var(--darkest-grey) !important;
color: var(--light-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.list-group-item .btn:not(.removeImgBtn,.noMrginLeft) {
margin-left: 30px !important;
}
.dark-mode .list-group-item .btn:not(.removeImgBtn, .active) {
color: var(--light-grey) !important;
background-color: black !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.dark-mode .list-group-item .btn:not(.removeImgBtn,.active):hover {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
}
.process-steps-list .list-group-item.notStarted {
opacity: 0.7;
cursor: not-allowed;
}
.data-table-container {
width: 100%;
overflow-x: auto;
}
.data-table-wrapper {
border-radius: 5px;
overflow: hidden; 
border: 1px solid var(--medium-grey); 
}
.dark-mode .data-table-wrapper {
border: 1px solid var(--medium-dark-grey);
}
.data-table {
width: 100%;
table-layout: fixed;
overflow: hidden;    
}
.data-table th,
.data-table td {
padding: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid var(--medium-grey);
border-right: 1px solid var(--medium-grey);
width: var(--column-width);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table th:last-child,
.data-table td:last-child {
border-right: none;
}
.data-table th {
font-weight: bold;
background-color: var(--light-grey);
}
.dark-mode .data-table th,
.dark-mode .data-table td {
border-color: var(--medium-dark-grey);
}
.dark-mode .data-table th {
background-color: var(--background-color);
}
.dark-mode .data-table td {
background-color: var(--dark-grey);
}
.resize-handle {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 2;
background: transparent;
transition: background-color 0.2s;
}
.resize-handle:hover {
background: var(--medium-grey);
}
.text-center {
text-align: center;
}
.copy-cell-container {
position: relative;
padding-right: 25px; 
}
.copy-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: var(--dark-grey);
}
.dark-mode .copy-icon {
color: var(--light-grey);
}
.data-table-wrapper .list-footer {
padding: 10px;
text-align: right;
background: var(--light-grey);
border-top: 1px solid var(--medium-grey);
border-right: none;
border-bottom: none;
border-left: none;
}
.dark-mode .data-table-wrapper .list-footer {
border-top: 1px solid var(--medium-dark-grey);
background-color: black;
}
.data-table-wrapper .list-footer .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.data-table-wrapper .list-footer .btn i {
font-size: 0.9em;
}
.draggable-list-container {
padding: 20px;
}
.draggable-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.draggable-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
border-radius: 4px;
cursor: move;
}
.draggable-item:hover {
background: var(--medium-grey);
color: white;
}
.drag-handle {
cursor: move;
color: var(--medium-dark-grey);
}
.draggable-item:hover .drag-handle {
color: white;
}
.item-name {
font-weight: 500;
flex: 1;
}
.item-label {
color: var(--medium-dark-grey);
}
.draggable-item:hover .item-label {
color: white;
}
.message-box {
border: 1px solid #ddd;
padding: 10px 15px 0px;
border-radius: 5px;
background-color: #f9f9f9;
margin-bottom: 10px;
position: relative;
}
.message-box.expanded, .message-box.bottomPadding {
padding-bottom: 25px;
}
.dark-mode .message-box {
background-color: var(--dark-grey) !important;
border: 1px solid var(--medium-dark-grey) !important;
color: var(--light-grey) !important;
}
.message-content-text {
margin-top: 10px;
max-height: 200px;
overflow: hidden;
transition: max-height 0.3s ease;
line-height: 1.6;
}
.message-content-text.expanded, .message-content-text.bottomPadding {
padding-bottom: 25px;
}
.message-content-text * {
text-wrap: auto;
}
.message-content-text.expanded {
max-height: none;
}
.message-content-text img {
max-width: 100%;
height: auto;
}
.message-content-text td,
.message-content-text th {
vertical-align: top;
padding: 3px 5px;
}
.light-mode .message-content-text pre {
border: 1px solid var(--light-grey);
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
.dark-mode .message-content-text pre {
border: 1px solid var(--medium-dark-grey);
background-color: rgb(25, 25, 25);
color: rgb(226, 226, 226);
}
.message-toggle-btn {
cursor: pointer;
position: absolute;
bottom: 0px;
left: 0;
height: 40px;
width: 100%;
display: flex;
justify-content: flex-start;
padding-left: 15px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.527), transparent);
align-content: flex-end;
flex-wrap: wrap;
}
.message-toggle-btn > button {
cursor: pointer;
}
.dark-mode .message-toggle-btn {
background: linear-gradient(to top, rgba(0, 0, 0, 0.527), transparent);
}
.message-toggle-btn .gray-small-btn {
position: relative;
background-color: var(--pale-green);
border-radius: 5px 5px 0 0;
box-shadow: 0 0 10px 0 #00000016;
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.message-toggle-btn .gray-small-btn i {
font-size: 12px;
}
.message-box.user-message-collapsed {
height: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
opacity: 0;
overflow: hidden;
border: 0 !important;
transition: height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, margin-bottom 0.3s, padding 0.3s, border 0.3s;
}
.message-box.user {
border-radius: 5px 5px 0 0;
margin-bottom: 0;
}
.message-box.assistant {
border-radius: 0 0 5px 5px;
margin-bottom: 10px;
}
.message-box.user.paired {
border-bottom: none;
}
.message-box.assistant.paired {
border-top: none !important;
}
.message-box.user:not(.paired), .message-box.assistant:not(.paired) {
border-radius: 5px;
margin-bottom: 10px;
}
.dark-mode .message-box.user {
background-color: #111 !important;
color: var(--light-grey) !important;
}
.message-checkbox {
position: absolute;
top: 8px;
right: 12px;
z-index: 1;
}
.version-navigation {
position: absolute;
top: 4px;
right: 4px;
padding: 4px 4px;
background-color: var(--lightest-grey);
border-radius: 3px;
border: 1px solid var(--medium-grey);
z-index: 2;
max-width: fit-content;
white-space: nowrap;
}
.dark-mode .version-navigation {
background-color: var(--darkest-grey);
border-color: var(--medium-dark-grey);
}
.json-version-navigation {
position: absolute;
top: -50px;
right: 10px; 
z-index: 1000;
}
.version-controls {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.version-arrow-btn {
background: none;
border: 1px solid var(--medium-grey);
border-radius: 2px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
color: var(--dark-grey);
transition: all 0.2s ease;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.version-arrow-btn:hover:not(:disabled) {
background-color: var(--light-grey);
border-color: var(--dark-grey);
}
.version-arrow-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dark-mode .version-arrow-btn {
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .version-arrow-btn:hover:not(:disabled) {
background-color: var(--semi-dark-grey);
border-color: var(--light-grey);
}
.version-remove-btn {
background: none;
border: 1px solid var(--medium-grey);
border-radius: 2px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
color: var(--error-red);
transition: all 0.2s ease;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.version-remove-btn:hover {
background-color: var(--error-red);
color: white;
border-color: var(--error-red);
}
.dark-mode .version-remove-btn {
border-color: var(--medium-dark-grey);
color: var(--error-red-light);
}
.dark-mode .version-remove-btn:hover {
background-color: var(--error-red-dark);
color: white;
border-color: var(--error-red-dark);
}
.version-info {
flex: 1;
text-align: center;
color: var(--dark-grey);
font-weight: 500;
font-size: 12px;
white-space: nowrap;
}
.dark-mode .version-info {
color: var(--light-grey);
}
.current-version-badge {
color: var(--success-color);
font-weight: 600;
font-size: 11px;
}
.save-as-current-btn {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 3px;
padding: 4px 8px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 3px;
height: 24px;
}
.save-as-current-btn:hover {
background-color: var(--primary-color-dark);
}
.save-as-current-btn i {
font-size: 10px;
}
body #app_  .tiptap-container .editor-container p,
body #app_  .tiptap-container .editor-container h1,
body #app_  .tiptap-container .editor-container h2,
body #app_  .tiptap-container .editor-container h3,
body #app_  .tiptap-container .editor-container h4,
body #app_  .tiptap-container .editor-container h5,
body #app_  .tiptap-container .editor-container h6,
body #app_  .tiptap-container .editor-container ul,
body #app_  .tiptap-container .editor-container ol,
body #app_  .tiptap-container .editor-container li,
body #app_ .modal .compare-content p,
body #app_ .modal .compare-content h1,
body #app_ .modal .compare-content h2,
body #app_ .modal .compare-content h3,
body #app_ .modal .compare-content h4,
body #app_ .modal .compare-content h5,
body #app_ .modal .compare-content h6,
body #app_ .modal .compare-content ul,
body #app_ .modal .compare-content ol,
body #app_ .modal .compare-content li,
body #app_ .modal .compare-content .grabText p,
body #app_ .modal .compare-content .grabText h1,
body #app_ .modal .compare-content .grabText h2,
body #app_ .modal .compare-content .grabText h3,
body #app_ .modal .compare-content .grabText h4,
body #app_ .modal .compare-content .grabText h5,
body #app_ .modal .compare-content .grabText h6,
body #app_ .modal .compare-content .grabText ul,
body #app_ .modal .compare-content .grabText ol,
body #app_ .modal .compare-content .grabText li,
body #app_ .process-run-webpage p,
body #app_ .process-run-webpage h1,
body #app_ .process-run-webpage h2,
body #app_ .process-run-webpage h3,
body #app_ .process-run-webpage h4,
body #app_ .process-run-webpage h5,
body #app_ .process-run-webpage h6,
body #app_ .process-run-webpage ul,
body #app_ .process-run-webpage ol,
body #app_ .process-run-webpage li,
body #app_ .content-styles p,
body #app_ .content-styles h1,
body #app_ .content-styles h2,
body #app_ .content-styles h3,
body #app_ .content-styles h4,
body #app_ .content-styles h5,
body #app_ .content-styles h6,
body #app_ .content-styles ul,
body #app_ .content-styles ol,
body #app_ .content-styles li,
body #app_ .content-display p,
body #app_ .content-display h1,
body #app_ .content-display h2,
body #app_ .content-display h3,
body #app_ .content-display h4,
body #app_ .content-display h5,
body #app_ .content-display h6,
body #app_ .content-display ul,
body #app_ .content-display ol,
body #app_ .content-display li {
margin: 0;
margin-bottom: 10px;
color: var(--dark-grey);
background: unset;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: unset;
}
body.dark-mode #app_  .tiptap-container .editor-container p,
body.dark-mode #app_ .tiptap-container .editor-container h1,
body.dark-mode #app_ .tiptap-container .editor-container h2,
body.dark-mode #app_ .tiptap-container .editor-container h3,
body.dark-mode #app_ .tiptap-container .editor-container h4,
body.dark-mode #app_ .tiptap-container .editor-container h5,
body.dark-mode #app_ .tiptap-container .editor-container h6,
body.dark-mode #app_ .tiptap-container .editor-container ul,
body.dark-mode #app_ .tiptap-container .editor-container ol,
body.dark-mode #app_ .tiptap-container .editor-container li,
body.dark-mode #app_ .modal .compare-content p,
body.dark-mode #app_ .modal .compare-content h1,
body.dark-mode #app_ .modal .compare-content h2,
body.dark-mode #app_ .modal .compare-content h3,
body.dark-mode #app_ .modal .compare-content h4,
body.dark-mode #app_ .modal .compare-content h5,
body.dark-mode #app_ .modal .compare-content h6,
body.dark-mode #app_ .modal .compare-content ul,
body.dark-mode #app_ .modal .compare-content ol,
body.dark-mode #app_ .modal .compare-content li,
body.dark-mode #app_ .modal .compare-content .grabText p,
body.dark-mode #app_ .modal .compare-content .grabText h1,
body.dark-mode #app_ .modal .compare-content .grabText h2,
body.dark-mode #app_ .modal .compare-content .grabText h3,
body.dark-mode #app_ .modal .compare-content .grabText h4,
body.dark-mode #app_ .modal .compare-content .grabText h5,
body.dark-mode #app_ .modal .compare-content .grabText h6,
body.dark-mode #app_ .modal .compare-content .grabText ul,
body.dark-mode #app_ .modal .compare-content .grabText ol,
body.dark-mode #app_ .modal .compare-content .grabText li,
body.dark-mode #app_ .process-run-webpage p,
body.dark-mode #app_ .process-run-webpage h1,
body.dark-mode #app_ .process-run-webpage h2,
body.dark-mode #app_ .process-run-webpage h3,
body.dark-mode #app_ .process-run-webpage h4,
body.dark-mode #app_ .process-run-webpage h5,
body.dark-mode #app_ .process-run-webpage h6,
body.dark-mode #app_ .process-run-webpage ul,
body.dark-mode #app_ .process-run-webpage ol,
body.dark-mode #app_ .process-run-webpage li,
body.dark-mode #app_ .content-styles p,
body.dark-mode #app_ .content-styles h1,
body.dark-mode #app_ .content-styles h2,
body.dark-mode #app_ .content-styles h3,
body.dark-mode #app_ .content-styles h4,
body.dark-mode #app_ .content-styles h5,
body.dark-mode #app_ .content-styles h6,
body.dark-mode #app_ .content-styles ul,
body.dark-mode #app_ .content-styles ol,
body.dark-mode #app_ .content-styles li,
body.dark-mode #app_ .content-display p,
body.dark-mode #app_ .content-display h1,
body.dark-mode #app_ .content-display h2,
body.dark-mode #app_ .content-display h3,
body.dark-mode #app_ .content-display h4,
body.dark-mode #app_ .content-display h5,
body.dark-mode #app_ .content-display h6,
body.dark-mode #app_ .content-display ul,
body.dark-mode #app_ .content-display ol,
body.dark-mode #app_ .content-display li {
color: var(--light-grey);
}
body #app_  .tiptap-container .editor-container ul li::marker,
body #app_  .tiptap-container .editor-container ol li::marker,
.modal .compare-content ul li::marker,
.modal .compare-content ol li::marker,
.modal .compare-content .grabText ul li::marker,
.modal .compare-content .grabText ol li::marker,
body #app_ .process-run-webpage ul li::marker,
body #app_ .process-run-webpage ol li::marker,
body #app_ .content-styles ul li::marker,
body #app_ .content-styles ol li::marker,
body #app_ .content-display ul li::marker,
body #app_ .content-display ol li::marker {
color: var(--dark-grey);
}
body.dark-mode #app_  .tiptap-container .editor-container ul li::marker,
body.dark-mode #app_  .tiptap-container .editor-container ol li::marker,
.dark-mode .modal .compare-content ul li::marker,
.dark-mode .modal .compare-content ol li::marker,
.dark-mode .modal .compare-content .grabText ul li::marker,
.dark-mode .modal .compare-content .grabText ol li::marker,
body.dark-mode #app_ .process-run-webpage ul li::marker,
body.dark-mode #app_ .process-run-webpage ol li::marker,
body.dark-mode #app_ .content-styles ul li::marker,
body.dark-mode #app_ .content-styles ol li::marker,
body.dark-mode #app_ .content-display ul li::marker,
body.dark-mode #app_ .content-display ol li::marker {
color: var(--light-grey);
}
body #app_  .tiptap-container .editor-container hr,
.modal .compare-content hr,
.modal .compare-content .grabText hr,
body #app_ .process-run-webpage hr,
body #app_ .content-styles hr,
body #app_ .content-display hr {
border: none;
border-top: 1px solid var(--dark-grey);
}
body.dark-mode #app_  .tiptap-container .editor-container hr,
.dark-mode .modal .compare-content hr,
.dark-mode .modal .compare-content .grabText hr,
body.dark-mode #app_ .process-run-webpage hr,
body.dark-mode #app_ .content-styles hr,
body.dark-mode #app_ .content-display hr {
border-top: 1px solid var(--medium-dark-grey);
}
body #app_  .tiptap-container .editor-container table,
body #app_  .tiptap-container .editor-container table th,
body #app_  .tiptap-container .editor-container table td,
.modal .compare-content .table-content table,
.modal .compare-content .table-content table th,
.modal .compare-content .table-content table td,
.modal .compare-content .grabText .table-content table,
.modal .compare-content .grabText .table-content table th,
.modal .compare-content .grabText .table-content table td,
body #app_ .process-run-webpage table,
body #app_ .process-run-webpage table th,
body #app_ .process-run-webpage table td,
body #app_ .content-styles table,
body #app_ .content-styles table th,
body #app_ .content-styles table td,
body #app_ .content-display table,
body #app_ .content-display table th,
body #app_ .content-display table td {
border: 1px solid var(--medium-grey);
}
body #app_ .process-run-webpage table {
display: table !important;
width: 100% !important;
border-collapse: collapse !important;
margin: 1rem 0 !important;
}
body #app_ .process-run-webpage table th,
body #app_ .process-run-webpage table td {
display: table-cell !important;
padding: 8px 12px !important;
vertical-align: top !important;
}
body.dark-mode #app_  .tiptap-container .editor-container table,
body.dark-mode #app_  .tiptap-container .editor-container table th,
body.dark-mode #app_  .tiptap-container .editor-container table td,
.dark-mode .modal .compare-content .table-content table,
.dark-mode .modal .compare-content .table-content table th,
.dark-mode .modal .compare-content .table-content table td,
.dark-mode .modal .compare-content .grabText .table-content table,
.dark-mode .modal .compare-content .grabText .table-content table th,
.dark-mode .modal .compare-content .grabText .table-content table td,
body.dark-mode #app_ .process-run-webpage table,
body.dark-mode #app_ .process-run-webpage table th,
body.dark-mode #app_ .process-run-webpage table td,
body.dark-mode #app_ .content-styles table,
body.dark-mode #app_ .content-styles table th,
body.dark-mode #app_ .content-styles table td,
body.dark-mode #app_ .content-display table,
body.dark-mode #app_ .content-display table th,
body.dark-mode #app_ .content-display table td {
border: 1px solid var(--medium-dark-grey);
}
.ProseMirror {
min-height: 150px;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.ProseMirror:focus-visible {
outline: none;
}
.ProseMirror ul,
.ProseMirror ol,
.modal .compare-content ul,
.modal .compare-content ol,
.modal .compare-content .grabText ul,
.modal .compare-content .grabText ol,
.process-run-webpage ul,
.process-run-webpage ol,
.content-styles ul,
.content-styles ol,
.content-display ul,
.content-display ol {
padding-left: 1.5rem !important;
margin: 0.5rem 0 !important;
}
.ProseMirror ul,
.modal .compare-content ul,
.modal .compare-content .grabText ul,
.process-run-webpage ul,
.content-styles ul,
.content-display ul {
list-style-type: disc !important;
}
.ProseMirror ol,
.modal .compare-content ol,
.modal .compare-content .grabText ol,
.process-run-webpage ol,
.content-styles ol,
.content-display ol {
list-style-type: decimal !important;
}
.ProseMirror li,
.modal .compare-content li,
.modal .compare-content .grabText li,
.process-run-webpage li,
.content-styles li,
.content-display li {
display: list-item !important;
margin: 0.25rem 0 !important;
}
.ProseMirror ul ul,
.modal .compare-content ul ul,
.modal .compare-content .grabText ul ul,
.process-run-webpage ul ul,
.content-styles ul ul,
.content-display ul ul {
list-style-type: circle !important;
}
.ProseMirror ul ul ul,
.modal .compare-content ul ul ul,
.modal .compare-content .grabText ul ul ul,
.process-run-webpage ul ul ul,
.content-styles ul ul ul,
.content-display ul ul ul {
list-style-type: square !important;
}
.ProseMirror .task-list,
.content-styles .task-list,
.content-display .task-list {
list-style-type: none !important;
padding-left: 1rem !important;
}
.ProseMirror .task-list-item,
.content-styles .task-list-item,
.content-display .task-list-item {
display: flex !important;
align-items: flex-start !important;
gap: 0.5rem !important;
}
.ProseMirror .task-list-item input[type="checkbox"],
.content-styles .task-list-item input[type="checkbox"],
.content-display .task-list-item input[type="checkbox"] {
margin: 0 !important;
margin-top: 0.125rem !important;
}
.ProseMirror .tableWrapper {
overflow-x: auto;
margin: 0; 
}
.ProseMirror table,
.modal .compare-content .table-content table,
.modal .compare-content .grabText .table-content table,
body #app_ .content-styles table,
body #app_ .content-display table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0; 
}
.ProseMirror table td,
.ProseMirror table th,
.modal .compare-content .table-content table td,
.modal .compare-content .table-content table th,
.modal .compare-content .grabText .table-content table td,
.modal .compare-content .grabText .table-content table th {
border: 1px solid var(--medium-dark-grey, #ccc);
padding: 2px 5px;
text-align: left;
vertical-align: top;
min-width: 25px;
}
.ProseMirror table th,
.modal .compare-content .table-content table th,
.modal .compare-content .grabText .table-content table th,
body #app_ .process-run-webpage table th,
body #app_ .content-styles table th,
body #app_ .content-display table th {
background-color: var(--light-grey, #f5f5f5);
color: var(--dark-grey);
font-weight: bold;
}
.dark-mode .ProseMirror table th,
.dark-mode .modal .compare-content .table-content table th,
.dark-mode .modal .compare-content .grabText .table-content table th,
body.dark-mode #app_ .process-run-webpage table th,
body.dark-mode #app_ .content-styles table th,
body.dark-mode #app_ .content-display table th {
background-color: var(--dark-grey) !important;
color: var(--light-grey) !important;
}
.dark-mode .ProseMirror table th p,
.dark-mode .modal .compare-content .table-content table th p,
.dark-mode .modal .compare-content .grabText .table-content table th p,
body.dark-mode #app_ .process-run-webpage table th p,
body.dark-mode #app_ .content-styles table th p,
body.dark-mode #app_ .content-display table th p {
color: var(--light-grey) !important;
}
body #app_ .tiptap-container .editor-container h1,
body #app_ .modal .compare-content h1,
body #app_ .modal .compare-content .grabText h1,
.tiptap-container .tiptap.ProseMirror h1,
body #app_ .process-run-webpage h1,
body #app_ .content-styles h1,
body #app_ .content-display h1 {
font-size: 25px;
}
body #app_ .tiptap-container .editor-container h2,
body #app_ .modal .compare-content h2,
body #app_ .modal .compare-content .grabText h2,
.tiptap-container .tiptap.ProseMirror h2,
body #app_ .process-run-webpage h2,
body #app_ .content-styles h2,
body #app_ .content-display h2 {
font-size: 23px;
}
body #app_ .tiptap-container .editor-container h3,
body #app_ .modal .compare-content h3,
body #app_ .modal .compare-content .grabText h3,
.tiptap-container .tiptap.ProseMirror h3,
body #app_ .process-run-webpage h3,
body #app_ .content-styles h3,
body #app_ .content-display h3 {
font-size: 21px;
}
body #app_ .tiptap-container .editor-container h4,
body #app_ .modal .compare-content h4,
body #app_ .modal .compare-content .grabText h4,
.tiptap-container .tiptap.ProseMirror h4,
body #app_ .process-run-webpage h4,
body #app_ .content-styles h4,
body #app_ .content-display h4 {
font-size: 19px;
}
body #app_ .tiptap-container .editor-container h5,
body #app_ .modal .compare-content h5,
body #app_ .modal .compare-content .grabText h5,
.tiptap-container .tiptap.ProseMirror h5,
body #app_ .process-run-webpage h5,
body #app_ .content-styles h5,
body #app_ .content-display h5 {
font-size: 17px;
}
body #app_ .tiptap-container .editor-container h6,
body #app_ .modal .compare-content h6,
body #app_ .modal .compare-content .grabText h6,
.tiptap-container .tiptap.ProseMirror h6,
body #app_ .process-run-webpage h6,
body #app_ .content-styles h6,
body #app_ .content-display h6 {
font-size: 15px;
}
.tiptap-container .tiptap.ProseMirror h1, 
.tiptap-container .tiptap.ProseMirror h2, 
.tiptap-container .tiptap.ProseMirror h3, 
.tiptap-container .tiptap.ProseMirror h4, 
.tiptap-container .tiptap.ProseMirror h5, 
.tiptap-container .tiptap.ProseMirror h6 {
margin-top: 20px;
}
.tiptap-container .tiptap.ProseMirror > *:first-child {
margin-top: 0;
}
.tiptap-container th p, 
.tiptap-container td p,
.modal .compare-content .table-content table th p,
.modal .compare-content .table-content table td p,
.modal .compare-content .grabText .table-content table th p,
.modal .compare-content .grabText .table-content table td p {
margin: 0;
margin-top: 10px;
}
.tiptap-container th p:first-of-type, 
.tiptap-container td p:first-of-type,
.modal .compare-content .table-content table th p:first-of-type,
.modal .compare-content .table-content table td p:first-of-type,
.modal .compare-content .grabText .table-content table th p:first-of-type,
.modal .compare-content .grabText .table-content table td p:first-of-type {
margin-top: 0;
}
.tiptap-container img,
.modal .compare-content img,
.modal .compare-content .grabText img {
max-width: 100%;
min-width: 200px;
height: auto;
}
.MainTextEditor img {
max-width: 100%;
height: auto;
}
.MainTextEditor td, 
.MainTextEditor th {
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--medium-grey);
}
.tip-tap-selection {
background: var(--pale-green);
color: black;
}
.tip-tap-selection.is-active {
background: var(--pale-green);
color: black;
}
.tiptap-container ::selection {
background: var(--pale-green);
color: black;
}
.tiptap-container .marker,
.modal .compare-content .marker,
.modal .compare-content .grabText .marker {
padding: 2px 5px;
border-radius: 5px;
cursor: grab;
display: inline-block;
font-size: 10px;
text-transform: uppercase;
border: 1px solid var(--medium-dark-grey);
color: black !important;
background-color: var(--light-grey) !important;
}
.tiptap-container .marker i,
.modal .compare-content .marker i,
.modal .compare-content .grabText .marker i {
margin-right: 3px; 
}
.dark-mode .tiptap-container .marker,
.dark-mode .modal .compare-content .marker,
.dark-mode .modal .compare-content .grabText .marker {
border: 1px solid var(--medium-grey);
background-color: black !important;
color: var(--light-grey) !important;
}
.persistent-selection {
background-color: rgba(0, 123, 255, 0.3); 
border-radius: 3px;
}
.modal .compare-content,
.modal .compare-content .grabText,
.modal .compare-content div[contenteditable],
.modal .compare-content span[contenteditable] {
font-family: var(--font-family-base);
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
}
.dark-mode .modal .compare-content,
.dark-mode .modal .compare-content .grabText,
.dark-mode .modal .compare-content div[contenteditable],
.dark-mode .modal .compare-content span[contenteditable] {
color: var(--light-grey);
}
.modal .compare-content .table-content,
.modal .compare-content .grabText .table-content {
display: block;
width: 100%;
margin: 10px 0;
}
body #app_ .content-styles,
body #app_ .content-display {
line-height: 1.6;
}
code,
pre,
.modal .compare-content code,
.modal .compare-content pre,
.modal .compare-content .grabText code,
.modal .compare-content .grabText pre,
body #app_ .process-run-webpage code,
body #app_ .process-run-webpage pre,
body #app_ .content-styles code,
body #app_ .content-styles pre,
body #app_ .content-display code,
body #app_ .content-display pre {
background-color: var(--lightest-grey);
color: var(--dark-grey);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
pre,
.modal .compare-content pre,
.modal .compare-content .grabText pre,
body #app_ .content-styles pre,
body #app_ .content-display pre {
padding: 10px;
margin: 10px 0;
overflow-x: auto;
}
.dark-mode code,
.dark-mode pre,
.dark-mode .modal .compare-content code,
.dark-mode .modal .compare-content pre,
.dark-mode .modal .compare-content .grabText code,
.dark-mode .modal .compare-content .grabText pre,
body.dark-mode #app_ .content-styles code,
body.dark-mode #app_ .content-styles pre,
body.dark-mode #app_ .content-display code,
body.dark-mode #app_ .content-display pre {
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.ProseMirror blockquote,
.tiptap-container .editor-container blockquote,
blockquote,
.modal .compare-content blockquote,
.modal .compare-content .grabText blockquote,
body #app_ .process-run-webpage blockquote,
body #app_ .content-styles blockquote,
body #app_ .content-display blockquote {
margin: 1rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid var(--pale-green);
background-color: var(--lightest-grey);
color: var(--dark-grey);
font-style: italic;
position: relative;
}
.dark-mode .ProseMirror blockquote,
.dark-mode .tiptap-container .editor-container blockquote,
.dark-mode blockquote,
.dark-mode .modal .compare-content blockquote,
.dark-mode .modal .compare-content .grabText blockquote,
body.dark-mode #app_ .process-run-webpage blockquote,
body.dark-mode #app_ .content-styles blockquote,
body.dark-mode #app_ .content-display blockquote {
border-left-color: var(--pale-green);
background-color: var(--darkest-grey);
color: var(--light-grey);
}
.ProseMirror q,
.tiptap-container .editor-container q,
q,
.modal .compare-content q,
.modal .compare-content .grabText q {
font-style: italic;
color: var(--dark-grey);
quotes: '"' '"' "'" "'";
}
.dark-mode .ProseMirror q,
.dark-mode .tiptap-container .editor-container q,
.dark-mode q,
.dark-mode .modal .compare-content q,
.dark-mode .modal .compare-content .grabText q {
color: var(--light-grey);
}
.ProseMirror blockquote cite,
.tiptap-container .editor-container blockquote cite,
blockquote cite {
display: block;
margin-top: 0.5rem;
font-style: normal;
font-size: 0.875rem;
color: var(--medium-grey);
text-align: right;
}
.dark-mode .ProseMirror blockquote cite,
.dark-mode .tiptap-container .editor-container blockquote cite,
.dark-mode blockquote cite {
color: var(--medium-dark-grey);
}
.ProseMirror blockquote cite::before,
.tiptap-container .editor-container blockquote cite::before,
blockquote cite::before {
content: "— ";
}
.quote-emphasis {
border-left: 4px solid var(--pale-green-dark);
background-color: rgba(76, 175, 80, 0.05);
font-weight: 500;
}
.dark-mode .quote-emphasis {
border-left-color: var(--pale-green);
background-color: rgba(76, 175, 80, 0.1);
}
.quote-warning {
border-left: 4px solid #ff9800;
background-color: rgba(255, 152, 0, 0.05);
}
.dark-mode .quote-warning {
background-color: rgba(255, 152, 0, 0.1);
}
.quote-info {
border-left: 4px solid #2196f3;
background-color: rgba(33, 150, 243, 0.05);
}
.dark-mode .quote-info {
background-color: rgba(33, 150, 243, 0.1);
}
.pull-quote {
margin: 2rem 0;
padding: 1.5rem;
text-align: center;
font-size: 1.25rem;
font-weight: 500;
border: 2px solid var(--pale-green);
border-radius: 8px;
background-color: var(--lightest-grey);
color: var(--dark-grey);
}
.dark-mode .pull-quote {
border-color: var(--pale-green);
background-color: var(--darkest-grey);
color: var(--light-grey);
}
body #app_ .modal .tiptap-container .menu-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px;
background: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
margin-bottom: 10px;
padding-right: 80px;
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
body #app_ .modal .tiptap-container .menu-bar button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 2px 8px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
gap: 5px;
height: 30px;
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar button {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
body #app_ .modal .tiptap-container .menu-bar button:hover {
background: var(--medium-light-grey);
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar button:hover {
background: var(--medium-dark-grey);
}
body #app_ .modal .tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: white;
}
body #app_ .modal .tiptap-container .menu-bar .heading-selector {
max-width: 100px;
width: auto;
min-width: 60px;
padding: 4px 8px;
font-size: 14px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
background: var(--lightest-grey);
}
.dark-mode body #app_ .modal .tiptap-container .menu-bar .heading-selector {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.modal {
display: flex !important;
background-color: rgba(0, 0, 0, 0.5) !important;
overflow: auto !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-index-modal);
align-items: flex-start;
justify-content: center;
padding: 20px 0;
}
.modal-content {
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px !important;
overflow: hidden !important;
background-color: var(--lightest-grey);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
max-height: 100%;
}
.dark-mode .modal {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 1px solid var(--medium-dark-grey);
}
.modal-dialog {
height: fit-content;
width: calc(100vw - 50px) !important;
margin: auto;
position: relative;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.modal-dialog:not(.xl) {
max-width: 1000px;
}
.modal-header {
padding: 5px 10px !important;
background-color: var(--lightest-grey);
flex-shrink: 0;
}
.modal-body {
padding: 5px 10px !important;
background-color: var(--lightest-grey);
flex: 1;
overflow-y: auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--medium-grey) var(--light-grey);
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: var(--light-grey);
}
.modal-body::-webkit-scrollbar-thumb {
background: var(--medium-grey);
border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: var(--medium-dark-grey);
}
.dark-mode .modal-body {
background-color: var(--dark-grey);
color: var(--light-grey);
border-bottom: 1px solid var(--medium-dark-grey);
scrollbar-color: var(--medium-dark-grey) var(--dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-track {
background: var(--dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-thumb {
background: var(--medium-dark-grey);
}
.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--medium-grey);
}
.dark-mode .modal-header {
background-color: black;
}
.light-mode .modal-header {
background-color: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
}
.modal-footer {
padding: 5px !important;
background-color: var(--light-grey);
border-top: 1px solid var(--medium-grey);
display: flex;
justify-content: flex-end;
gap: 0px;
flex-shrink: 0;
}
.dark-mode .modal-footer {
background-color: black;
border-top: 1px solid black;
}
.modal-header .modal-title {
margin-top: 0px !important;
font-size: 18px;
font-weight: 500;
margin-bottom: 0px;
}
.modal-body label {
margin: 5px 0 0 0 !important;
color: var(--dark-grey);
}
.dark-mode .modal-body label {
color: var(--light-grey);
}
.modal-open .modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-index-modal-backdrop);
}
.close {
display: none;
}
.modal .compare-group {
display: flex;
flex-direction: column;
margin-top: 5px;
}
.modal .compare-item {
display: flex;
justify-content: space-evenly;
max-height: calc(100vh - 250px);
overflow: auto;
}
.modal-dialog.xl .modal .compare-item {
padding: 0 100px;
}
.modal .compare-item div:not(.compare-buttons) {
flex: 1;
}
.modal .compare-item .compare-content:first-of-type {
border-right: 1px solid var(--medium-grey);
padding-right: 25px;
padding-bottom: 20px;
margin-left: 100px;
}
.modal .compare-item .compare-content:nth-of-type(2) {
padding-left: 25px;
margin-right: 100px;
}
.modal .compare-item .compare-content {
padding-top: 25px;
height: fit-content;
}
.modal .compare-item .compare-content label {
padding-bottom: 15px;
font-weight: 500;
}
.modal .compare-item .compare-content p {
margin-top: 0px;
}
.modal .compare-item .compare-content:last-of-type {
padding-left: 25px;
border-left: 1px solid var(--medium-grey);
margin-left: -1px;
margin-right: 100px;
}
.modal .compare-count {
border-bottom: 1px solid var(--medium-grey);
position: relative;
padding: 10px 0;
}
.modal .compare-item div:first-of-type {
min-height: 150px;
overflow: hidden;
}
.modal .compare-item div:first-of-type span {
display: inline-block;
}
.modal .compare-count .fa-arrow-left {
position: absolute;
left: 10px;
top: 15px;
cursor: pointer;
z-index: 1;
color: var(--dark-grey);
}
.modal .compare-count .fa-arrow-right {
position: absolute;
right: 10px;
top: 15px;
cursor: pointer;
z-index: 1;
color: var(--dark-grey);
}
.dark-mode .modal .compare-count .fa-arrow-left,
.dark-mode .modal .compare-count .fa-arrow-right {
color: var(--light-grey);
}
.modal .compare-count h2 {
text-align: center;
margin: 0;
font-size: 18px;
}
.modal .compare-buttons {
margin-bottom: -5px;
position: sticky;
top: 20px;
right: 0px;
height: 100px;
width: 0px;
overflow: visible;
flex: none;
}
.modal .compare-buttons .btn {
position: absolute;
top: 0px;
right: 20px;
width: 32px;
height: 32px;
}
.modal .sub-text {
font-size: 12px;
color: var(--medium-grey);
margin-top: 0px;
}
.createNew {
flex-direction: column;
align-items: center;
min-height: 300px;
}
.createNew input {
min-width: 250px;
margin-bottom: 10px;
}
.dark-mode .createNew input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--darkest-grey);
}
.pricing-modal-table {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 1rem 0;
}
.pricing-column {
flex: 1;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
padding: 0.5rem 1rem 0.5rem 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 220px;
}
.dark-mode .pricing-column {
background: black;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
border: 1px solid var(--medium-dark-grey);
}
.pricing-header {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #2a2a2a;
margin-top: 0;
}
.dark-mode .pricing-header {
color: var(--light-grey);
}
.pricing-price {
font-size: 1.5rem;
font-weight: 700;
color: #2a2a2a;
margin-bottom: 0.5rem;
display: flex;
align-items: baseline;
justify-content: flex-start;
}
.price-currency {
font-size: 1.5rem;
margin-left: 0.25rem;
margin-right: 0;
}
.price-period {
font-size: 1rem;
color: #666;
margin-left: 0.25rem;
font-weight: normal;
}
.dark-mode .price-period {
color: var(--medium-grey);
}
.price-amount {
line-height: 1;
}
.dark-mode .pricing-price {
color: var(--light-grey);
}
.pricing-desc {
font-size: 1rem;
color: #666;
margin-bottom: 1rem;
text-align: left;
}
.dark-mode .pricing-desc {
color: var(--medium-grey);
}
.pricing-count {
font-size: 1.1rem;
margin-top: 1rem;
color: #333;
display: flex;
align-items: center;
gap: 0.5em;
}
.dark-mode .pricing-count {
color: var(--light-grey);
}
.plan-input {
width: 70px;
text-align: right;
font-size: 1.1rem;
margin-left: 0.5em;
margin-right: 0.5em;
border-radius: 6px;
border: 1px solid #ccc;
padding: 0.2em 0.5em;
}
.dark-mode .plan-input {
background-color: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.count-label {
font-weight: 500;
}
.dark-mode .count-label {
color: var(--light-grey);
}
.count-value {
font-weight: 700;
color: #1976d2;
min-width: 32px;
text-align: left;
}
.dark-mode .count-value {
color: var(--light-grey);
}
.pricing-capabilities {
margin-top: 2rem;
width: 100%;
}
.pricing-capabilities ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-capabilities li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}
.pricing-capabilities li::before {
content: "✓";
color: var(--primary-color);
font-weight: bold;
}
.dark-mode .pricing-capabilities li {
color: var(--medium-grey);
} 
.modal-body label {
width: calc(100% - 20px);
}
.form-check.custom-control.custom-radio {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.form-check.custom-control.custom-radio input[type="radio"] {
margin: 0;
flex-shrink: 0;
}
.form-check.custom-control.custom-radio label {
margin: 0;
width: auto;
flex: 1;
cursor: pointer;
}
.sitemap-url-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.sitemap-url-option:hover {
background-color: var(--lightest-grey);
}
.dark-mode .sitemap-url-option:hover {
background-color: var(--semi-dark-grey);
}
.plan-selected-start {
border: 2px solid var(--button-green) !important;
box-shadow: 0 2px 12px rgba(119, 176, 82, 0.15) !important;
}
.dark-mode .plan-selected-start {
border: 2px solid var(--pale-green) !important;
box-shadow: 0 2px 12px rgba(182, 215, 168, 0.15) !important;
}
.plan-selected-higher {
border: 2px solid var(--button-green) !important;
box-shadow: 0 2px 12px rgba(119, 176, 82, 0.15) !important;
}
.dark-mode .plan-selected-higher {
border: 2px solid var(--pale-green) !important;
box-shadow: 0 2px 12px rgba(182, 215, 168, 0.15) !important;
}
.plan-disabled-start {
opacity: 0.5;
border: 1px solid var(--medium-grey) !important;
}
.dark-mode .plan-disabled-start {
opacity: 0.5;
border: 1px solid var(--medium-dark-grey) !important;
}
.multi-select-component {
position: relative;
width: 100%;
}
.multi-select-label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.search-container {
position: relative;
}
.search-input {
width: 100%;
padding-right: 30px;
}
.search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--medium-grey);
pointer-events: none;
}
.dropdown-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid var(--medium-grey);
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 250px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.suggestions-header {
padding: 6px 12px;
background-color: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
font-size: 0.85em;
color: var(--medium-grey);
font-weight: 500;
}
.dark-mode .dropdown-suggestions {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .suggestions-header {
background-color: var(--medium-dark-grey);
border-color: var(--dark-grey);
color: var(--light-grey);
}
.suggestion-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--light-grey);
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.dark-mode .suggestion-item {
border-color: var(--medium-dark-grey);
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover {
background-color: var(--light-grey);
}
.dark-mode .suggestion-item:hover {
background-color: var(--medium-dark-grey);
}
.suggestion-item.already-selected {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--light-grey);
}
.dark-mode .suggestion-item.already-selected {
background-color: var(--medium-dark-grey);
}
.option-name {
font-weight: 500;
flex: 1;
}
.option-native {
color: var(--medium-grey);
font-style: italic;
}
.dark-mode .option-native {
color: var(--light-grey);
}
.option-code {
color: var(--medium-grey);
font-size: 0.9em;
}
.dark-mode .option-code {
color: var(--light-grey);
}
.selected-check {
color: var(--pale-green);
font-weight: bold;
}
.selected-items {
margin-top: 15px;
}
.selected-items-header {
margin-bottom: 8px;
}
.selected-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.selected-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background-color: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
}
.dark-mode .selected-item {
background-color: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.selected-item.is-default {
border-color: var(--pale-green);
background-color: var(--pale-green-light);
}
.dark-mode .selected-item.is-default {
border-color: var(--pale-green-dark);
background-color: var(--pale-green-darker);
}
.item-info {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.default-badge {
background-color: var(--pale-green);
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75em;
font-weight: 500;
}
.item-actions {
display: flex;
gap: 5px;
}
.set-default-btn {
background-color: #333 !important;
border-color: #333 !important;
color: #ffd700 !important; 
padding: 2px 6px;
font-size: 0.75em;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.set-default-btn:hover {
background-color: #000 !important;
border-color: #000 !important;
color: #ffd700 !important;
}
.dark-mode .set-default-btn {
background-color: #222 !important;
border-color: #222 !important;
color: #ffd700 !important;
}
.dark-mode .set-default-btn:hover {
background-color: #111 !important;
border-color: #111 !important;
color: #ffd700 !important;
}
.remove-btn {
padding: 2px 6px;
font-size: 0.75em;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.no-selections {
margin-top: 10px;
padding: 12px;
background-color: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
color: var(--medium-grey);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.dark-mode .no-selections {
background-color: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
:root {
--pale-green-light: #e8f5e8;
--pale-green-darker: #2d5a2d;
}
.comments-display {
padding: var(--spacing-md);
}
.comments-header {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
}
.comments-header h4 {
margin: 0 0 var(--spacing-sm) 0;
color: var(--dark-grey);
font-weight: 600;
}
.comments-message {
color: var(--medium-dark-grey);
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.5;
}
.comments-meta {
font-size: 0.9em;
color: var(--medium-grey);
}
.comments-summary {
margin-bottom: var(--spacing-lg);
}
.summary-stats {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-sm);
background: var(--lightest-grey);
border-radius: var(--border-radius-sm);
min-width: 80px;
}
.stat-item strong {
font-size: 1.5em;
color: var(--info-blue);
font-weight: 700;
}
.stat-item span {
font-size: 0.8em;
color: var(--medium-grey);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.invitees-list h5 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
font-weight: 600;
}
.invitee-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
transition: background-color 0.2s ease;
}
.invitee-item:hover {
background: var(--pale-green-light);
}
.invitee-info {
display: flex;
flex-direction: column;
}
.invitee-info strong {
color: var(--dark-grey);
margin-bottom: var(--spacing-xs);
}
.invite-date {
font-size: 0.8em;
color: var(--medium-grey);
}
.invitee-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-xs);
}
.approval-status {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 600;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: 0.9em;
}
.approval-status.status-approved {
color: var(--success-green);
background: rgba(76, 175, 80, 0.1);
}
.approval-status.status-rejected {
color: var(--danger-red);
background: rgba(244, 67, 54, 0.1);
}
.approval-status.status-pending {
color: var(--warning-yellow);
background: rgba(255, 193, 7, 0.1);
}
.comments-count {
font-size: 0.8em;
color: var(--info-blue);
font-weight: 500;
}
.dark-mode .comments-header h4,
.dark-mode .invitees-list h5,
.dark-mode .invitee-info strong {
color: var(--light-grey);
}
.dark-mode .comments-message {
color: var(--medium-grey);
}
.dark-mode .stat-item {
background: var(--semi-dark-grey);
}
.dark-mode .invitee-item {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .invitee-item:hover {
background: rgba(182, 215, 168, 0.1);
}
.comment-modal-draggable {
position: fixed;
background: var(--lightest-grey);
border: 2px solid var(--medium-grey);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
font-family: inherit;
min-width: 280px;
max-width: 400px;
}
.comment-modal-draggable .template-card-tag {
top: 4px;
right: 5px;
}
.dark-mode .comment-modal-draggable .template-card-tag {
background: black;
border: 1px solid var(--medium-dark-grey);
}
.comment-modal-header {
background: var(--pale-green);
padding: 8px 12px;
border-radius: 6px 6px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
}
.comment-modal-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--dark-grey);
}
.comment-modal-header-actions {
display: flex;
gap: 4px;
}
.comment-modal-close-btn {
background: none;
border: none;
font-size: 18px;
color: var(--medium-grey);
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.comment-modal-close-btn:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--dark-grey);
}
.comment-modal-content {
padding: 12px;
}
.comment-modal-content-preview {
margin-bottom: 8px;
}
.comment-modal-target-text {
font-size: 12px;
color: var(--medium-grey);
font-style: italic;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.comment-modal-commenter-info {
margin-bottom: 8px;
}
.comment-modal-display {
margin-bottom: 12px;
margin-top: 20px;
}
.comment-modal-text {
background: var(--pale-green-light);
border: 1px solid var(--pale-green);
padding: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--dark-grey);
min-height: 60px;
white-space: pre-wrap;
}
.comment-modal-actions {
display: flex;
justify-content: flex-end;
}
.comment-modal-resolve-btn {
background: var(--success-color);
color: white;
border: none;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.comment-modal-resolve-btn:hover:not(:disabled) {
background: var(--success-color-dark);
}
.comment-modal-resolve-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.dark-mode .comment-modal-draggable {
background: var(--darkest-grey);
border: 2px solid var(--medium-dark-grey);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dark-mode .comment-modal-header {
background: var(--pale-green-dark);
}
.dark-mode .comment-modal-header h3 {
color: var(--light-grey);
}
.dark-mode .comment-modal-close-btn {
color: var(--light-grey);
}
.dark-mode .comment-modal-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--lightest-grey);
}
.dark-mode .comment-modal-target-text {
color: var(--medium-light-grey);
}
.dark-mode .comment-modal-text {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain {
margin: 50px 0 0 0;
padding: 20px;
text-align: center;
}
.simply-explain-main-title {
color: var(--pale-green-dark);
margin: 0;
font-size: 1.8rem;
font-weight: bold;
}
.dark-mode .simply-explain-main-title {
color: var(--pale-green);
}
.simply-explain-layout {
align-items: stretch;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.simply-explain-column {
flex: 1;
display: flex;
flex-direction: column;
min-height: 400px;
max-width: 500px;
}
.simply-explain-workflow-right p,
.simply-explain-workflow-right span,
.simply-explain-workflow-right div,
.simply-explain-workflow-right h1,
.simply-explain-workflow-right h2,
.simply-explain-workflow-right h3,
.simply-explain-workflow-right h4,
.simply-explain-workflow-right h5,
.simply-explain-workflow-right h6,
.simply-explain-right p,
.simply-explain-right span,
.simply-explain-right div,
.simply-explain-right h1,
.simply-explain-right h2,
.simply-explain-right h3,
.simply-explain-right h4,
.simply-explain-right h5,
.simply-explain-right h6 {
text-align: left !important;
}
.simply-explain-header,
.simply-explain-header *,
.simply-explain-main-title,
.simply-explain-icon-wrapper,
.simply-explain-slider-controls,
.simply-explain-slider-controls * {
text-align: center !important;
}
.simply-explain-left {
text-align: center;
justify-content: center;
gap: 30px;
}
.simply-explain-example-section {
text-align: left;
display: flex;
align-items: center;
flex: 1;
padding-left: 50px;
}
.simply-explain-slider {
width: 100%;
}
.simply-explain-slider-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.simply-explain-slider-btn {
background: var(--pale-green-dark);
color: white;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.simply-explain-slider-btn:hover:not(:disabled) {
background: var(--pale-green-darker);
transform: scale(1.1);
}
.simply-explain-slider-btn:disabled {
background: var(--medium-grey);
cursor: not-allowed;
opacity: 0.5;
}
.dark-mode .simply-explain-slider-btn {
background: var(--pale-green);
}
.dark-mode .simply-explain-slider-btn:hover:not(:disabled) {
background: var(--pale-green-dark);
}
.dark-mode .simply-explain-slider-btn:disabled {
background: var(--medium-dark-grey);
}
.simply-explain-slider-indicator {
font-size: 14px;
font-weight: 600;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-slider-indicator {
color: var(--pale-green);
}
.simply-explain-slider-content {
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
}
.dark-mode .simply-explain-slider-content {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-slider-content h4 {
color: white;
margin-bottom: 15px;
font-size: 1.2rem;
text-align: center;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
}
.dark-mode .simply-explain-slider-content h4 {
color: white;
background: none;
text-shadow: 1px 1px 3px rgba(0, 0, 0.9, 0.1);
padding-top: 20px;
margin-bottom: 10px;
}
.simply-explain-files-section {
margin-top: 25px;
}
.simply-explain-files-section h5 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1rem;
text-align: center;
}
.dark-mode .simply-explain-files-section h5 {
color: var(--pale-green);
}
.simply-explain-file-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.simply-explain-file-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 10px;
background: var(--lightest-grey);
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--medium-grey);
text-align: center;
}
.dark-mode .simply-explain-file-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain-file-item i {
color: var(--pale-green-dark);
width: 14px;
text-align: center;
font-size: 11px;
}
.dark-mode .simply-explain-file-item i {
color: var(--pale-green);
}
.simply-explain-example-code {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
}
.dark-mode .simply-explain-example-code {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.simply-explain-example-code i {
color: var(--pale-green-dark);
margin: 0 5px;
}
.dark-mode .simply-explain-example-code i {
color: var(--pale-green);
}
.simply-explain-header {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.simply-explain-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-astronaut-icon {
font-size: 50px;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-astronaut-icon {
color: var(--pale-green);
}
.simply-explain-right {
text-align: left;
}
.simply-explain-description-box {
background: var(--white);
border-radius: 8px;
padding: 35px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-right: 4px solid var(--pale-green-dark);
position: sticky;
top: 20px;
}
.dark-mode .simply-explain-description-box {
background: var(--darkest-grey);
border-right-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-description-box h4 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1.2rem;
}
.dark-mode .simply-explain-description-box h4 {
color: var(--pale-green);
}
.simply-explain-description-box p {
line-height: 1.6;
margin-bottom: 20px;
}
.simply-explain-methods {
display: flex;
flex-direction: column;
gap: 0px;
margin-top: 20px;
}
.simply-explain-method {
padding: 20px 0 15px;
border-bottom: 1px solid var(--medium-grey);
position: relative;
cursor: pointer;
outline: none;
}
.simply-explain-method:focus {
outline: none;
}
.simply-explain-method.active { 
cursor: not-allowed;
}
.dark-mode .simply-explain-method {
border-bottom-color: var(--medium-dark-grey);
}
.simply-explain-method:last-child {
border-bottom: none;
}
.simply-explain-workflow .simply-explain-method:not(:last-child)::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--medium-grey);
z-index: 1;
}
.dark-mode .simply-explain-workflow .simply-explain-method:not(:last-child)::after {
border-top-color: var(--medium-dark-grey);
}
.simply-explain-workflow .simply-explain-method.active:not(:last-child)::after {
border-top-color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow .simply-explain-method.active:not(:last-child)::after {
border-top-color: var(--pale-green);
}
.simply-explain-method-content {
padding-left: 50px;
padding-right: 50px;
}
.simply-explain-method-content h6 {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.simply-explain-method-content h6 i {
color: var(--pale-green-dark);
font-size: 18px;
width: 20px;
text-align: center;
}
.dark-mode .simply-explain-method-content h6 i {
color: var(--pale-green);
}
.simply-explain-method-content p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--dark-grey);
}
.dark-mode .simply-explain-method-content p {
color: var(--light-grey);
}
.simply-explain-workflow {
margin: 0;
padding: 20px;
}
.simply-explain-workflow-layout {
align-items: stretch;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.simply-explain-workflow-left {
flex: 1;
padding: 20px;
}
.simply-explain-workflow-right {
flex: 1;
padding: 20px;
justify-content: center;
}
.simply-explain-workflow-description-box {
background: var(--white);
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-right: 4px solid var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow-description-box {
background: var(--darkest-grey);
border-right-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.simply-explain-workflow-icon {
font-size: 50px;
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow-icon {
color: var(--pale-green);
}
.simply-explain-workflow .simply-explain-method.active {
background: var(--pale-green);
}
.dark-mode .simply-explain-workflow .simply-explain-method.active {
background: var(--dark-grey);
}
.simply-explain-workflow .simply-explain-method.active .simply-explain-method-content {
transform: scale(1.02);
}
.simply-explain-workflow .simply-explain-method.active .simply-explain-method-content h6 {
color: var(--dark-grey);
font-weight: bold;
}
.dark-mode .simply-explain-workflow .simply-explain-method.active .simply-explain-method-content h6 {
color: var(--light-grey);
}
.simply-explain-workflow .simply-explain-method-content h6 .template-step-circle {
width: 18px;
height: 18px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
margin-right: 10px;
background: none;
border: none;
}
.simply-explain-workflow .template-step-circle.step-assistant i {
color: var(--info-blue);
}
.simply-explain-workflow .template-step-circle.step-textEditor i {
color: var(--pale-green-dark);
}
.dark-mode .simply-explain-workflow .template-step-circle.step-textEditor i {
color: var(--pale-green);
}
.simply-explain-workflow .template-step-circle.step-convert i {
color: var(--icon-purple);
}
.simply-explain-workflow .template-step-circle.step-input i {
color: var(--icon-orange);
}
.process-step-circle-wrapper {
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
padding: 15px;
border-radius: 8px;
position: relative;
}
.process-step-circle-wrapper:hover {
background: var(--lightest-grey);
}
.dark-mode .process-step-circle-wrapper:hover {
background: var(--dark-grey);
}
.process-step-circle-wrapper.active {
background: var(--pale-green);
}
.dark-mode .process-step-circle-wrapper.active {
background: var(--dark-grey);
}
.process-step-row {
display: flex;
align-items: center;
gap: 15px;
}
.process-step-circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
margin-bottom: 10px;
}
.step-assistant {
background: var(--pale-green-dark);
}
.step-textEditor {
background: #3b82f6;
}
.step-convert {
background: #f59e0b;
}
.step-api {
background: #8b5cf6;
}
.step-Browsing {
background: #10b981;
}
.step-default {
background: var(--medium-grey);
}
.process-step-label {
font-size: 14px;
font-weight: 600;
color: var(--dark-grey);
flex: 1;
}
.dark-mode .process-step-label {
color: var(--light-grey);
}
.process-step-circle-wrapper.active .process-step-label {
color: var(--pale-green-dark);
font-weight: bold;
}
.dark-mode .process-step-circle-wrapper.active .process-step-label {
color: var(--pale-green);
}
.process-step-arrow {
position: absolute;
left: 25px;
bottom: -10px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid var(--medium-grey);
}
.process-step-circle-wrapper.active .process-step-arrow {
border-top-color: var(--pale-green-dark);
}
.dark-mode .process-step-arrow {
border-top-color: var(--medium-dark-grey);
}
.dark-mode .process-step-circle-wrapper.active .process-step-arrow {
border-top-color: var(--pale-green);
}
.simply-explain-workflow-details {
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
height: fit-content;
position: relative;
}
.dark-mode .simply-explain-workflow-details {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.workflow-assistant-tag {
position: absolute;
top: -8px;
right: -8px;
z-index: 10;
}
.simply-explain-workflow-details h4 {
color: white;
margin-bottom: 15px;
font-size: 1.2rem;
text-align: center;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
}
.dark-mode .simply-explain-workflow-details h4 {
color: white;
background: none;
padding-top: 20px;
margin-bottom: 0px;
}
.simply-explain-workflow-details p {
line-height: 1.6;
margin-bottom: 20px;
}
.simply-explain-workflow-input,
.simply-explain-workflow-output,
.simply-explain-workflow-section {
margin: 20px 0;
}
.simply-explain-workflow-output-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
line-height: 1.6;
font-size: 14px;
white-space: pre-line;
text-align: left;
}
.simply-explain-workflow-output-content h3 {
font-size: 14px !important;
}
.simply-explain-workflow-output-content p {
font-size: 11px !important;
}
.dark-mode .simply-explain-workflow-output-content {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.simply-explain-blog-title {
font-size: 18px;
font-weight: bold;
color: var(--dark-grey);
margin: 0 0 15px 0;
line-height: 1.4;
}
.dark-mode .simply-explain-blog-title {
color: var(--light-grey);
}
.simply-explain-workflow-output-content p {
margin: 0;
color: var(--dark-grey);
}
.dark-mode .simply-explain-workflow-output-content p {
color: var(--light-grey);
}
.simply-explain-workflow-attachments {
margin-top: 15px;
}
.simply-explain-editor-container {
position: relative;
display: inline-block;
width: 100%;
}
.simply-explain-editor-image {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 8px;
border: 1px solid var(--medium-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 20px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.simply-explain-editor-image:hover {
filter: brightness(0.8);
}
.simply-explain-editor-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
}
.simply-explain-editor-container::before {
content: '\f065';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 11;
}
.simply-explain-editor-container:hover::after,
.simply-explain-editor-container:hover::before {
opacity: 1;
}
.dark-mode .simply-explain-editor-image {
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.editor-feature-indicator {
position: absolute;
width: 30px;
height: 30px;
background: var(--pale-green-darker);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
z-index: 5;
}
.dark-mode .editor-feature-indicator {
background: var(--pale-green-darker);
}
.feature-number {
color: white;
font-weight: bold;
font-size: 14px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.editor-features-list {
margin-top: 30px;
}
.editor-feature-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: flex-start;
}
.feature-number-label {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 16px;
min-width: 25px;
}
.dark-mode .feature-number-label {
color: var(--pale-green);
}
.feature-content h6 {
color: var(--pale-green-dark);
margin: 0 0 5px 0;
font-size: 14px;
font-weight: 600;
}
.dark-mode .feature-content h6 {
color: var(--pale-green);
}
.feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.simply-explain-image-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
overflow: hidden;
}
.simply-explain-modal-content {
position: relative;
max-width: 75vw;
max-height: 75vh;
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-modal-close {
position: absolute;
top: -80px;
right: -80px;
width: 40px;
height: 40px;
background: #3b82f6;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 1001;
}
.simply-explain-modal-close:hover {
background: #2563eb;
}
.simply-explain-modal-image-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.simply-explain-modal-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
object-fit: contain;
}
.editor-feature-indicator.modal-indicator {
cursor: pointer;
background: var(--pale-green-dark);
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.editor-feature-indicator.modal-indicator:hover {
background: var(--pale-green) !important;
animation: none !important;
}
.dark-mode .editor-feature-indicator.modal-indicator {
background: var(--pale-green-dark);
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.dark-mode .editor-feature-indicator.modal-indicator:hover {
background: var(--pale-green) !important;
}
@keyframes modalPulseGlow {
0%, 100% {
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 30px rgba(144, 238, 144, 1),
0 0 15px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.editor-feature-indicator.modal-indicator {
animation: none !important;
}
}
.modal-feature-tooltip {
position: absolute;
background: var(--darkest-grey);
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
min-width: 200px;
max-width: 300px;
z-index: 20;
border: 2px solid var(--pale-green);
color: var(--light-grey);
}
.modal-indicator .modal-feature-tooltip {
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.modal-feature-tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--pale-green);
}
.modal-feature-tooltip h6 {
color: var(--pale-green);
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
}
.modal-feature-tooltip p {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--light-grey);
}
.modal-feature-explanation {
position: absolute;
bottom: -120px;
left: 50%;
transform: translateX(-50%);
background: var(--white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
max-width: 400px;
width: 100%;
}
.dark-mode .modal-feature-explanation {
background: var(--darkest-grey);
color: var(--light-grey);
}
.modal-feature-content {
display: flex;
gap: 15px;
align-items: flex-start;
}
.modal-feature-number {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 16px;
min-width: 25px;
}
.dark-mode .modal-feature-number {
color: var(--pale-green);
}
.modal-feature-content h6 {
color: var(--pale-green-dark);
margin: 0 0 5px 0;
font-size: 14px;
font-weight: 600;
}
.dark-mode .modal-feature-content h6 {
color: var(--pale-green);
}
.modal-feature-content p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--dark-grey);
}
.dark-mode .modal-feature-content p {
color: var(--light-grey);
}
.simply-explain-url-link {
text-decoration: none;
color: inherit;
}
.simply-explain-url-link span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
display: inline-block;
}
.simply-explain-url-content {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
text-align: center;
}
.simply-explain-url-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.simply-explain-url-display {
font-size: 11px;
font-family: 'Courier New', monospace;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
box-sizing: border-box;
}
.simply-explain-workflow-input h5,
.simply-explain-workflow-output h5,
.simply-explain-workflow-section h5 {
color: white;
margin-bottom: 15px;
font-size: 14px;
font-weight: 600;
text-align: left !important;
background: var(--pale-green-dark);
padding: 10px 15px;
border-radius: 5px 5px 0 0;
margin: -20px -20px 5px -20px;
}
.dark-mode .simply-explain-workflow-input h5,
.dark-mode .simply-explain-workflow-output h5,
.dark-mode .simply-explain-workflow-section h5 {
color: white;
background: none;
padding-top: 20px;
}
.simply-explain-workflow-input-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin-bottom: 15px;
}
.dark-mode .simply-explain-workflow-input-content {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.simply-explain-workflow-input-content i {
color: var(--pale-green-dark);
margin: 0 5px;
}
.dark-mode .simply-explain-workflow-input-content i {
color: var(--pale-green);
}
.features {
margin-top: 100px;
}
.feature-card {
background: var(--white);
border-radius: 8px;
padding: 20px;
margin: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1;
min-width: 250px;
max-width: 350px;
}
.dark-mode .feature-card {
background: var(--darkest-grey);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.feature-icon {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 30px;
}
.dark-mode .feature-icon {
color: var(--pale-green);
}
.feature-card-title {
color: var(--pale-green-dark);
margin-bottom: 10px;
font-weight: bold;
}
.dark-mode .feature-card-title {
color: var(--pale-green);
}
.feature-card-text {
font-size: 14px;
line-height: 1.5;
}
.social-media-channels {
display: flex;
gap: 10px;
margin: 15px 0;
justify-content: space-between;
}
.social-channel {
flex: 1;
max-width: 120px;
min-width: 100px;
background: var(--white);
border-radius: 6px;
border: 1px solid var(--medium-grey);
overflow: hidden;
}
.dark-mode .social-channel {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.social-channel-header {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
background: var(--lightest-grey);
border-bottom: 1px solid var(--medium-grey);
font-weight: 600;
font-size: 10px;
}
.dark-mode .social-channel-header {
background: var(--darkest-grey);
border-bottom-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.social-channel-header i {
font-size: 12px;
}
.social-channel:nth-child(1) .social-channel-header i {
color: #0077b5; 
}
.social-channel:nth-child(2) .social-channel-header i {
color: #1da1f2; 
}
.social-channel:nth-child(3) .social-channel-header i {
color: #e4405f; 
}
.social-channel-post {
padding: 12px 8px;
min-height: 80px;
}
.mock-post-line {
background: var(--light-grey);
height: 10px;
margin-bottom: 8px;
border-radius: 2px;
opacity: 0.7;
width: 100%;
}
.dark-mode .mock-post-line {
background: var(--light-grey);
}
.social-channel-post .mock-post-line:nth-child(1),
.social-channel-post .mock-post-line:nth-child(2) {
width: 100%; 
}
.social-channel-post .mock-post-line:nth-child(3) {
width: 65%; 
}
.social-media-description {
margin-top: 20px;
font-style: italic;
text-align: center;
color: var(--dark-grey);
}
.dark-mode .social-media-description {
color: var(--light-grey);
}
.workflow-convert-tag {
background: var(--icon-purple);
}
.loading {
position: fixed;
width: 100%;
height: 100%;
background-color: #f4f4f465;
z-index: var(--z-index-spinner);
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.loading .spinner-border {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 24px;
}
@media (min-width: 751px) {
.loading .spinner-border {
margin-left: 40px;
}
}
.dark-mode .loading {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.dark-mode .loading span,
.dark-mode .loading i {
color: var(--pale-green) !important;
} 
.tabs {
display: flex;
}
.tabs > .btn {
margin: 0px !important;
border-radius: 0px;
border: solid 1px #8d8d8d;
border-left: none;
text-transform: uppercase;
}
.tabs > .btn.first {
border-radius: 5px 0px 0px 5px;
border-left: solid 1px #8d8d8d;
order: 1;
}
.tabs > .btn.last {
border-radius: 0px 5px 5px 0px;
border-right: solid 1px #8d8d8d;
order: 10;
}
.tabs > .btn.selected {
background-color: #ffffff;
cursor: default;
}
.tabs > .btn .fa-check {
display: none;
}
.tabs > .btn.selected .fa-check {
display: inline;
color: green;
}
.tabs > .btn:focus, .tabs > .btn:focus-visible, .tabs > .btn:active {
outline: none !important;
box-shadow: none !important;
}
.light-mode .darkModeTab .tab:last-child {
background-color: var(--pale-green) !important;
color: #222 !important;
} 
.light-mode .settingsColumn > div > .btn  {
border: solid 1px #8d8d8d;
min-width: 200px;
background-color: var(--lightest-gray) !important;
color: var(--dark-grey) !important;
border: 1px solid var(--button-green) !important;
}
.settings-buttons-user > .btn:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.settings-buttons-user > .btn {
background-color: #ffffff;
}
.dark-mode .settings-buttons-user > .btn.selected i {
color: var(--pale-green-dark);
}
.dark-mode .settings-buttons-organisation > .btn {
background-color: var(--medium-grey);
}
.dark-mode .settings-buttons-organisation > .btn {
border: solid 1px var(--dark-grey);
background-color: #2a2a2a;
}
.settings-buttons-organisation > .btn.selected i {
color: var(--dark-grey) !important;
}
.dark-mode .settings-buttons-organisation > .btn.selected i {
color: white !important;
}
.dark-mode .settings-buttons-organisation > .btn.selected {
color: var(--pale-green);
}
.settingsColumn .btn.selected {
background-color: #ffffff;
cursor: default;
}
.settingsColumn .btn.selectedButActive i {
color: var(--pale-green) !important;
}
.settingsColumn .btn:focus, .settingsColumn .btn:focus-visible, .settingsColumn .btn:active {
outline: none !important;
box-shadow: none !important;
}
.settingsColumn .btn {
margin: 5px 0px 0px !important;
width: 100%;
}
.dark-mode .settingsColumn .btn.dark {
background-color: var(--dark-grey) !important;
color: white !important;
}
.settingsColumn .btn.dark.selected i {
color: var(--pale-green);
}
.settingsColumn .btn.dark i {
color: var(--dark-grey);
position: absolute;
left: 10px;
top: 8px;
}
.settings-buttons-user .btn i {
position: absolute;
left: 10px;
top: 8px;
color: var(--pale-green-dark);
}
.light-mode .settings-buttons-user .btn i {
color: var(--pale-green-dark);
}
.dark-mode .settings-buttons-user .btn i {
color: var(--pale-green-dark);
}
.settings-buttons-user .btn.selected i {
color: black !important;
}
.dark-mode .settings-buttons-user .btn.selected i {
color: black !important;
}
.settings-buttons-user .btn,
.settings-buttons-organisation .btn {
position: relative;
padding-left: 35px !important;
padding-right: 35px !important;
text-align: center;
}
.light-mode .settingsColumn .btn.dark i {
color: var(--pale-green-dark);
}
.dark-mode .settingsColumn .btn.dark i {
color: var(--pale-green);
}
.light-mode .settings-buttons-organisation .btn.dark {
background-color: var(--lightest-gray) !important; 
color: var(--dark-grey) !important;           
border: 1px solid var(--button-green) !important; 
}
.light-mode .settingsColumn .btn.dark:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.dark-mode .settingsColumn .btn.dark:hover {
background-color: var(--darkest-grey) !important;
color: white !important;
}
.settingsColumn label {
margin: 0px !important;
}
.settingsColumn .active-organisation {
font-size: 12px;
color: var(--dark-grey);
margin-top: 20px;
margin-bottom: 10px;
padding-left: 5px;
overflow: hidden;
}
.dark-mode .settingsColumn .active-organisation {
color: var(--light-grey);
}
.settingsColumn .active-organisation-label {
color: var(--pale-green-dark);
font-weight: bold;
font-size: 10px;
display: block;
}
.dark-mode .settingsColumn .active-organisation-label {
color: var(--pale-green);
}
.userSettingsContainer .formColumn {
flex: 1 1 auto;
min-width: 0;
padding-left: 20px;
max-width: calc(100% - 260px);
}
.userSettingsContainer .forceRight {
position: absolute;
right: 10px;
top: 3px;
cursor: pointer;
display: flex;
gap: 5px;
}
.userSettingsContainer .teamManagementColumn .list-header,
.userSettingsContainer .teamManagementColumn .list-item {
padding-top: 0px;
padding-bottom: 0px;
}
.userSettingsContainer .teamManagementColumn .list-item-field {
padding-top: 10px;
padding-bottom: 10px;
}
.team-member-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
}
.delete-member-container {
position: relative;
cursor: pointer;
margin-left: 8px;
display: inline-block;
}
.userSettingsContainer .settingsColumn {
margin-top: 0px;
flex: 0 0 250px;
}
.userSettingsContainer .settingsColumn button:first-of-type {
margin-top: 0px !important;
}
.view-userSettings .formColumn .user-management-list .email-column {
flex: 2 1 200px;
}
.header-container {
margin-bottom: 40px;
}
.editable-title {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px 10px;
border-radius: 4px;
width: 100%;
display: inline-block;
}
.editable-description {
font-size: 14px;
color: var(--dark-grey);
margin: 0;
width: 100%;
display: inline-block;
text-align: left;
padding-left: 10px;
}
.editable-title i {
font-size: 14px;
display: inline-block;
margin-left: 10px;
}
.editable-title:hover i {
opacity: 1;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.header h3 {
margin: 0;
font-size: 18px;
font-weight: bold;
}
.button-group-detail {
margin-top: 0;
}
.table-container {
position: relative;
margin-top: 40px;
}
.usage-low {
color: #ff4444;
}
.plan-usage-section {
margin-bottom: 2rem;
}
.usage-summary-section {
margin-bottom: 2rem;
}
.usage-details-section {
margin-bottom: 2rem;
}
.usage-section-title {
color: var(--pale-green-dark);
margin-bottom: 1rem;
font-size: 1.1em;
font-weight: 600;
}
.dark-mode .usage-section-title {
color: var(--pale-green);
}
.selected-month-indicator {
color: var(--dark-grey);
font-weight: normal;
font-size: 0.9em;
}
.dark-mode .selected-month-indicator {
color: var(--light-grey);
}
.month-link {
color: var(--pale-green-dark);
cursor: pointer;
text-decoration: underline;
font-weight: 600;
}
.month-link:hover {
color: var(--pale-green-darker);
}
.dark-mode .month-link {
color: var(--pale-green);
}
.dark-mode .month-link:hover {
color: var(--pale-green);
opacity: 0.8;
}
.no-usage-data {
text-align: center;
padding: 2rem;
color: #666;
font-style: italic;
}
.copy-cell-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.copy-icon {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.copy-icon:hover {
opacity: 1;
}
.tool-type-subChat {
background-color: #e3f2fd;
color: #1565c0;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.tool-type-processStep {
background-color: #f3e5f5;
color: #7b1fa2;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.tool-type-textEditor {
background-color: #e8f5e8;
color: #2e7d32;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.85em;
font-weight: 500;
}
.MainTextEditor .editor-container {
min-height: 50vh;
max-height: calc(100vh - 300px);
overflow-y: auto;
}
.tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 380px); 
}
.MainTextEditor .tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 380px);
}
.tiptap-container {
flex: 1;
position: relative;
}
.autosaving-indicator {
position: absolute;
top: -25px;
right: 10px;
font-size: 11px;
padding: 2px 6px;
border-radius: var(--border-radius-sm);
background-color: var(--medium-grey);
color: var(--dark-grey);
opacity: 0.7;
transition: all 0.3s ease-in-out; 
z-index: 10;
cursor: pointer;
user-select: none;
}
.autosaving-indicator:hover {
opacity: 1;
background-color: var(--dark-grey);
color: var(--light-grey);
}
.autosaving-indicator.saving {
background-color: var(--button-green);
color: white;
opacity: 1;
cursor: default;
}
.autosaving-indicator.saving:hover {
background-color: var(--button-green); 
}
.dark-mode .autosaving-indicator {
background-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .autosaving-indicator:hover {
background-color: var(--lightest-grey);
color: var(--dark-grey);
}
.dark-mode .autosaving-indicator.saving {
background-color: var(--button-green);
color: white;
}
.breakpoints-indicator {
position: absolute !important;
top: -25px;
left: 10px;
font-size: 11px;
z-index: 10;
width: fit-content;
}
.breakpoints-header {
padding: 2px 6px;
border-radius: var(--border-radius-sm);
background-color: var(--medium-grey);
color: var(--dark-grey);
opacity: 0.7;
transition: all 0.3s ease-in-out;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
}
.breakpoints-header:hover {
opacity: 1;
background-color: var(--dark-grey);
color: var(--light-grey);
}
.breakpoints-header .fa-caret-down {
transition: transform 0.2s ease;
}
.breakpoints-header .fa-caret-down.rotated {
transform: rotate(180deg);
}
.breakpoints-count {
font-weight: bold;
margin-left: 2px;
}
.breakpoints-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 450px;
max-width: 600px;
background: #ffffff;
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--border-radius, 8px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
padding: 5px;
padding-bottom: 0px;
margin-top: 4px;
z-index: 1000;
}
.breakpoints-actions {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.breakpoints-actions .btn {
background: var(--primary-color, #3b82f6);
color: white;
border: none;
border-radius: var(--border-radius-sm, 6px);
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.breakpoints-actions .btn:hover:not(:disabled) {
background: var(--primary-color-dark, #2563eb);
transform: translateY(-1px);
}
.breakpoints-actions .btn:disabled {
background: var(--medium-grey, #9ca3af);
cursor: not-allowed;
transform: none;
}
.breakpoints-items {
max-height: 80vh;
height: fit-content;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-color, #e2e8f0) transparent;
}
.breakpoints-items::-webkit-scrollbar {
width: 6px;
}
.breakpoints-items::-webkit-scrollbar-track {
background: transparent;
}
.breakpoints-items::-webkit-scrollbar-thumb {
background: var(--border-color, #e2e8f0);
border-radius: 3px;
}
.breakpoint-item {
display: flex;
flex-direction: column;
padding: 12px;
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--border-radius-sm, 6px);
margin-bottom: 8px;
cursor: pointer;
position: relative;
background: #ffffff;
}
.breakpoint-item:hover {
background: var(--hover-bg, #f8fafc);
border-color: var(--primary-color, #3b82f6);
}
.breakpoint-item.active {
background: var(--primary-color-light, #eff6ff);
border-color: var(--primary-color, #3b82f6);
}
.breakpoint-name {
font-weight: 600;
font-size: 13px;
color: var(--text-color, #1f2937);
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
.breakpoint-name-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breakpoint-timestamp {
font-size: 10px;
font-weight: 400;
color: var(--text-muted, #6b7280);
white-space: nowrap;
flex-shrink: 0;
}
.breakpoint-preview {
font-size: 12px;
color: var(--text-muted, #6b7280);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.breakpoint-remove-btn.remove-file-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
opacity: 0;
}
.breakpoint-remove-btn.remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
opacity: 1;
}
.breakpoint-remove-btn.remove-file-btn i {
font-size: 14px;
}
.breakpoint-item:hover .breakpoint-remove-btn {
opacity: 1;
}
.no-breakpoints {
text-align: center;
color: var(--text-muted, #6b7280);
font-size: 13px;
padding: 24px 16px;
font-style: italic;
background: var(--background-light, #f9fafb);
border-radius: var(--border-radius-sm, 6px);
border: 1px dashed var(--border-color, #e2e8f0);
margin-bottom: 5px;
}
.dark-mode .breakpoints-header {
background-color: var(--medium-dark-grey, #4a5568);
color: var(--light-grey, #f7fafc);
}
.dark-mode .breakpoints-header:hover {
background-color: var(--lightest-grey, #718096);
color: var(--dark-grey, #2d3748);
}
.dark-mode .breakpoints-dropdown {
background: #000000;
border-color: var(--border-color-dark, #4a5568);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
.dark-mode .breakpoints-actions {
border-bottom-color: var(--border-color-dark, #4a5568);
}
.dark-mode .breakpoint-remove-btn.remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .breakpoint-remove-btn.remove-file-btn:hover {
background: var(--error-red);
}
.dark-mode .breakpoints-actions .btn {
background: var(--primary-color, #3b82f6);
}
.dark-mode .breakpoints-actions .btn:hover:not(:disabled) {
background: var(--primary-color-dark, #2563eb);
}
.dark-mode .breakpoints-actions .btn:disabled {
background: var(--medium-dark-grey, #4a5568);
}
.dark-mode .breakpoint-item {
background: #000000;
border-color: var(--border-color-dark, #4a5568);
}
.dark-mode .breakpoint-item:hover {
background: var(--hover-bg-dark, #374151);
border-color: var(--primary-color, #3b82f6);
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}
.dark-mode .breakpoint-item.active {
background: var(--primary-color-dark-light, #1e3a8a);
border-color: var(--primary-color, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.dark-mode .breakpoint-name {
color: var(--text-color-dark, #f7fafc);
}
.dark-mode .breakpoint-timestamp {
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .breakpoint-preview {
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .no-breakpoints {
background: var(--background-dark-light, #374151);
border-color: var(--border-color-dark, #4a5568);
color: var(--text-muted-dark, #a0aec0);
}
.dark-mode .breakpoints-items::-webkit-scrollbar-thumb {
background: var(--border-color-dark, #4a5568);
}
.dark-mode .autosaving-indicator.saving:hover {
background-color: var(--button-green); 
}
.tiptap-container .copy-as-wrapper {
bottom: 1px !important;
}
.tiptap-container-right {
flex: 0 0 200px;
}
.tiptap-container-right button {
padding: 1px 4px;
font-size: 12px;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
text-wrap-mode: nowrap;
}
.tiptap-container-right-textarea {
min-height: 80px;
border: 1px solid var(--medium-grey);
padding: 5px;
border-radius: 5px;
color: var(--dark-grey);
font-size: 12px;
margin-bottom: 10px;
}
.dark-mode .tiptap-container-right-textarea {
color: var(--light-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container-right-textarea:focus {
outline: none;
}
.tiptap-container-right-open-ended-tools {
font-size: 10px;
padding-bottom: 5px;
padding-top: 5px;
}
.tiptap-container-right-open-ended-tools select {
width: 100%;
height: 20px !important;
}
.tiptap-container-right-open-ended-checkbox {
display: flex;
align-content: center;
gap: 5px;
}
.tiptap-container-right-open-ended-checkbox input {
margin-top: 0px !important;
}
.tiptap-container .menu-bar {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px;
background: var(--light-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
margin-bottom: 10px;
padding-right: 80px;
}
.dark-mode .tiptap-container .menu-bar {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container .menu-bar button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 2px 8px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
gap: 5px;
height: 30px;
}
.dark-mode .tiptap-container .menu-bar button {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.tiptap-container .menu-bar button:hover {
background: var(--medium-light-grey);
}
.dark-mode .tiptap-container .menu-bar button:hover {
background: var(--medium-dark-grey);
}
.tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: var(--dark-grey);
border-color: var(--pale-green);
}
.dark-mode .tiptap-container .menu-bar button.is-active {
background: var(--pale-green);
color: var(--dark-grey);
border-color: var(--pale-green);
}
.tiptap-container .menu-bar .marker-labels-container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 4px;
}
.tiptap-container .menu-bar .marker-labels-container button {
padding: 2px 6px;
font-size: 10px;
white-space: nowrap;
}
.tiptap-container .menu-bar.marker-labels-container button i {
font-size: 10px;
}
.marker-dropdown-container {
position: relative;
display: inline-block;
}
.marker-toggle-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 10px;
white-space: nowrap;
cursor: pointer;
min-width: auto;
}
.marker-toggle-btn .fa-chevron-down {
transition: transform 0.2s ease;
font-size: 8px;
}
.marker-toggle-btn .fa-chevron-down.rotated {
transform: rotate(180deg);
}
.marker-dropdown-overlay {
position: absolute;
top: 100%;
left: 0;
min-width: 120px;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.dark-mode .marker-dropdown-overlay {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.marker-dropdown-overlay button {
padding: 4px 8px;
font-size: 10px;
white-space: nowrap;
text-align: left;
background: transparent;
border: none;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: background-color 0.2s ease;
}
.marker-dropdown-overlay button:hover {
background: var(--medium-light-grey);
}
.dark-mode .marker-dropdown-overlay button:hover {
background: var(--medium-dark-grey);
}
.marker-dropdown-overlay button i {
font-size: 9px;
}
.tiptap-container .editor-container {
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
padding: 10px;
min-height: 250px;
background: var(--lightest-grey);
position: relative; 
border-radius: 5px;
}
.modal-body .tiptap-container .editor-container {
min-height: 150px;
}
.dark-mode .tiptap-container .editor-container {
color: var(--light-grey);
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
}
.tiptap-container .context-menu {
position: fixed;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
padding: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
list-style: none;
margin: 0;
padding: 5px 0;
z-index: 1000;
}
.dark-mode .tiptap-container .context-menu {
background: var(--darkest-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.tiptap-container .context-menu li {
padding: 8px 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.tiptap-container .context-menu li:hover {
background: var(--medium-light-grey);
}
.tiptap-container .heading-selector {
height: 30px !important;
margin: 0px !important;
}
.dark-mode .tiptap-container .heading-selector {
border: 1px solid var(--medium-dark-grey) !important;
border-radius: 5px !important;
}
.color-container {
position: relative;
display: inline-block;
}
.color-button {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
}
.color-button i {
font-size: 16px;
}
.color-button:hover {
background: var(--medium-light-grey);
}
.tiptap-container input.color-picker {
border: none;
width: 34px;
height: 30px;
cursor: pointer;
background: none;
border-radius: 5px;
padding: 0;
border: 1px solid var(--medium-dark-grey) !important;
}
.aiBtns-container {
display: flex;
flex-direction: column;
align-items: flex-start;
border-top: 1px solid var(--medium-grey);
padding-top: 5px;
margin-top: 5px;
}
.aiBtns-container .list-group {
width: 100%;
}
.dark-mode .aiBtns-container {
border-top: 1px solid var(--medium-dark-grey);
}
.aiBtnsEdit {
position: absolute;
right: 5px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
.dark-mode .aiBtnsEdit {
color: var(--light-grey);
}
.aiBtnsEdit div {
text-align: right;
}
.add-ai-btn {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-size: 12px;
color: var(--dark-grey);
padding: 5px 10px;
}
.dark-mode .add-ai-btn {
color: var(--light-grey);
}
.aiBtns-container .list-group .handle {
color: var(--dark-grey);
}
.dark-mode .aiBtns-container .list-group .handle {
color: var(--light-grey);
}
.vue-tooltip {
position: absolute;
left: 0;
background-color: #262626 !important;
border: #606060 solid 1px;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 12px;
z-index: 1000;
white-space: nowrap;
height: 22px;
font-weight: 400;
width: fit-content;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.tooltip-help-div {
position: absolute !important;
width: 100%;
height: 100%;
z-index: 1;
cursor: not-allowed;
}
.select-to-activate {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
margin-left: 5px;
}
.tiptap-container-right > div > .select-to-activate:not(.aiBtns-container .select-to-activate) {
margin-bottom: -10px;
}
.dark-mode .select-to-activate {
color: var(--light-grey);
}
.btn-group {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.btn-group-header {
font-size: 8px;
color: var(--medium-grey);
margin-bottom: 5px;
text-transform: uppercase;
}
.btn-group-name {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.btn-group-name-edit {
font-size: 10px;
color: var(--medium-grey);
margin-bottom: 5px;
}
.dark-mode .btn-group {
color: var(--light-grey);
}
.dark-mode .btn-group-header {
color: var(--medium-grey);
}
.dark-mode .btn-group-name {
color: var(--light-grey);
cursor: pointer;
}
.dark-mode .btn-group-name-edit {
color: var(--light-grey);
}
.collaboration-cursor__caret {
position: relative;
display: inline-block;
vertical-align: text-top;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: -1px;
margin-right: -1px;
height: 1.1em;
word-break: normal;
pointer-events: none;
border-color: var(--user-color, black);
}
.dark-mode .collaboration-cursor__caret {
border-color: var(--user-contrast-color, white);
}
.collaboration-cursor__label {
position: absolute;
top: -1.45em;
left: -1px;
font-size: 11px;
font-weight: 600;
line-height: normal;
white-space: nowrap;
padding: 3px 6px;
border-radius: 4px 4px 4px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background-color: var(--user-color, grey);
color: var(--user-contrast-color, white);
user-select: none;
pointer-events: none;
z-index: 10;
}
@keyframes collaboration-cursor-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes downloadButtonAppear {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.8);
}
50% {
opacity: 1;
transform: translateY(-2px) scale(1.1);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes downloadButtonPulse {
0%, 100% {
transform: scale(1);
background-color: var(--medium-grey);
box-shadow: 0 0 5px rgba(28, 167, 61, 0.3);
}
50% {
transform: scale(1.05);
background-color: rgba(28, 167, 61, 0.8);
box-shadow: 0 0 15px rgba(28, 167, 61, 0.6);
}
}
.copy-as-wrapper {
position: absolute;
right: 6px;
bottom: 0px;
border-bottom-right-radius: 4px;
display: flex;
gap: 5px;
height: 20px;
flex-direction: row;
width: 250px;
justify-content: end;
}
.download-as-docx, .download-as-excel, .copy-as-html, .copy-as-text, .replace-original-text {
cursor: pointer;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
padding: 0 8px;
font-size: 10px;
background-color: var(--medium-grey);
color: var(--dark-grey);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
white-space: nowrap;
transition: all 0.3s ease;
}
.download-as-docx, .download-as-excel, .replace-original-text {
animation: downloadButtonAppear 0.6s ease-out, downloadButtonPulse 0.6s ease-in-out 0.6s 3;
}
.dark-mode .download-as-docx, .dark-mode .download-as-excel, .dark-mode .copy-as-html, .dark-mode .copy-as-text, .dark-mode .replace-original-text {
background-color: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode .download-as-docx, .dark-mode .download-as-excel, .dark-mode .replace-original-text {
animation: downloadButtonAppear 0.6s ease-out, downloadButtonPulseDark 0.6s ease-in-out 0.6s 3;
}
@keyframes downloadButtonPulseDark {
0%, 100% {
transform: scale(1);
background-color: var(--dark-grey);
box-shadow: 0 0 5px rgba(28, 167, 61, 0.4);
}
50% {
transform: scale(1.05);
background-color: rgba(28, 167, 61, 0.3);
box-shadow: 0 0 15px rgba(28, 167, 61, 0.8);
}
}
.tiptap-container-right-textarea[data-placeholder]:empty::before,
.tiptap-container-right-textarea.is-empty::before {
position: absolute;
content: attr(data-placeholder);
color: #999;
cursor: text;
}
.clear-icon {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: var(--pale-green-dark);
}
.dark-mode .clear-icon {
color: var(--pale-green);
}
.is-ready {
cursor: not-allowed;
}
.menu-bar.is-ready {
opacity: 0.5;
}
.menu-bar.is-ready:after, 
.editor-container.is-ready div:first-of-type:after, 
.tiptap-container-right.is-ready:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: not-allowed;
z-index: 1000;
}
.editor-container.is-ready div:first-of-type {
user-select: none; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
}
.tiptap-container-right > div > .button-container:not(.aiBtns-container .button-container) {
margin-top: 15px;
}
.button-container .remove-btn {
width: 24px;
height: 100%;
padding: 0;
}
.button-container .remove-btn:hover {
background-color: var(--error-red);
color: white;
}
.dark-mode .button-container .remove-btn {
background-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .button-container .remove-btn:hover {
background-color: var(--error-red);
color: white;
}
.mark-as-ready-container {
width: 100%;
position: absolute;
right:0px;
z-index: 1001;
height: 0px;
}
.subchat-help-column-button {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.comments-status-container {
display: flex;
align-items: center;
gap: 8px;
padding: 0 0 0 5px;
background: var(--pale-green-light);
border: 2px solid var(--pale-green);
border-radius: var(--border-radius-md);
margin-bottom: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.comments-status {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.comments-status-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 5px 0px;
}
.comments-status-icon.status-pending {
background: #ffc107;
color: #212529;
}
.comments-status-icon.status-has-comments {
background: #ffc107;
color: #212529;
}
.comments-status-icon.status-approved {
background: #28a745;
color: white;
}
.comments-status-icon.status-rejected {
background: #dc3545;
color: white;
}
.comments-status-text {
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
}
.comments-status-label {
font-weight: 500;
color: var(--dark-grey);
font-size: 14px;
}
.comments-status-details {
font-size: 12px;
color: var(--dark-grey);
margin-left: 4px;
}
.approval-count-container {
position: relative;
margin-left: 8px;
display: inline-block;
}
.approval-count-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
padding: 2px 6px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 12px;
white-space: nowrap;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.approval-count-tag:hover {
background-color: #c3e6cb;
}
.approval-count-tag i {
font-size: 9px;
}
.approval-hover-modal {
position: absolute;
top: 100%;
left: 0;
background: white;
border: 1px solid #ddd;
border-radius: 6px;
z-index: 1000;
min-width: 200px;
max-width: 300px;
margin-top: 4px;
overflow: hidden;
}
.approval-hover-header {
padding: 8px 12px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
font-weight: 600;
font-size: 11px;
color: #495057;
}
.approval-hover-emails {
max-height: 200px;
overflow-y: auto;
}
.approval-hover-email {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 11px;
color: #155724;
border-bottom: 1px solid #f1f3f4;
}
.approval-hover-email:last-child {
border-bottom: none;
}
.approval-hover-email i {
font-size: 10px;
color: #28a745;
}
.dark-mode .approval-hover-modal {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
}
.dark-mode .approval-hover-header {
background-color: var(--darkest-grey);
border-bottom: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .approval-hover-email {
color: var(--light-grey); 
}
.comments-toggle-btn {
background-color: #f4f4f4 !important;
color: #333 !important;
border: 1px solid #ddd !important;
font-size: 12px;
padding: 4px 8px;
}
.comments-toggle-btn:hover:not(.btn-primary) {
background-color: #e9e9e9 !important;
}
.comments-toggle-btn.btn-primary {
background-color: var(--primary-color) !important;
color: white !important;
border-color: var(--primary-color) !important;
}
.comments-toggle-btn.btn-primary:hover {
background-color: var(--primary-color-dark) !important;
}
.dark-mode .comments-status-container {
background: rgba(182, 215, 168, 0.15);
border: 2px solid var(--pale-green-dark);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dark-mode .comments-status-label {
color: var(--light-grey);
}
.dark-mode .comments-status-details {
color: var(--medium-grey);
}
@media (max-width: 768px) {
.comments-status-container {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.comments-status {
justify-content: center;
}
.comments-status-text {
align-items: center;
text-align: center;
}
.tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 420px); 
}
.MainTextEditor .tiptap-container.has-comments-status .editor-container {
max-height: calc(100vh - 420px);
}
}
.main-action-buttons-wrapper {
display: flex;
gap: 0px;
position: absolute;
justify-content: flex-end;
width: 50%;
right: 0px;
}
.continue-editing-btn {
position: absolute;
right: 0;
}
.tiptap-content .has-comment {
position: relative;
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
padding-left: calc(var(--spacing-sm) + 3px);
margin-left: -3px;
cursor: pointer;
transition: all 0.2s ease;
}
.tiptap-content .has-comment:hover {
background-color: rgba(33, 150, 243, 0.1);
border-left-color: var(--info-blue-hover, #1976d2);
}
.tiptap-content .has-comment::after {
content: "💬";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--info-blue);
font-size: 14px;
opacity: 0.8;
pointer-events: none;
}
.tiptap-content .has-orphaned-comment {
border-left: 3px solid var(--warning-yellow);
background-color: rgba(255, 193, 7, 0.05);
}
.tiptap-content .has-orphaned-comment:hover {
background-color: rgba(255, 193, 7, 0.1);
}
.tiptap-content .has-orphaned-comment::after {
content: "⚠️";
color: var(--warning-yellow);
}
.dark-mode .tiptap-content .has-comment {
background-color: rgba(33, 150, 243, 0.1);
border-left-color: var(--info-blue);
}
.dark-mode .tiptap-content .has-comment:hover {
background-color: rgba(33, 150, 243, 0.15);
}
.dark-mode .tiptap-content .has-orphaned-comment {
background-color: rgba(255, 193, 7, 0.1);
}
.dark-mode .tiptap-content .has-orphaned-comment:hover {
background-color: rgba(255, 193, 7, 0.15);
}
.tiptap-content .has-comment:active {
background-color: rgba(33, 150, 243, 0.15);
transform: translateX(2px);
}
@media (max-width: 768px) {
.tiptap-content .has-comment::after {
right: 4px;
font-size: 12px;
}
}
.vue-tooltip {
position: absolute;
left: 0;
background-color: #262626 !important;
border: #606060 solid 1px;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 12px;
z-index: 1000;
white-space: nowrap;
height: 22px;
font-weight: 400;
width: fit-content;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.tooltip-help-div {
position: absolute !important;
width: 100%;
height: 100%;
z-index: 1;
cursor: not-allowed;
}
.dark-mode .vue-tooltip {
background-color: #1a1a1a !important;
border-color: #404040;
}
.Vue-Toastification__container {
z-index: var(--z-index-toast) !important;
}
.Vue-Toastification__toast--success {
background-color: var(--button-green-hover) !important;
}
.Vue-Toastification__toast--error {
background-color: var(--error-red-dark) !important;
}
.Vue-Toastification__toast--warning {
background-color: var(--warning-yellow) !important;
}
.Vue-Toastification__toast--info {
background-color: var(--info-blue) !important;
}
.Vue-Toastification__toast--default {
background-color: var(--info-blue) !important;
}
body.mobile .Vue-Toastification__container.bottom-center {
bottom: 80px !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
max-width: 100vw !important;
width: 100vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
body.mobile .Vue-Toastification__toast {
margin: 0 0 10px 0 !important;
max-width: none !important;
width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
box-sizing: border-box !important;
}
body.mobile.view-dashBoard .Vue-Toastification__toast {
max-width: none !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
box-sizing: border-box !important;
}
body.mobile.view-dashBoard .Vue-Toastification__container.bottom-center {
left: 0 !important;
right: 0 !important;
transform: none !important;
max-width: 100vw !important;
width: 100vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
.view-processes .data-table-container {
min-width: 1200px;
}
#readyImg {
display: flex;
gap: 10px;
overflow: auto;
padding-bottom: 10px;
padding-top: 10px;
}
#readyImg:empty {
display: none;
}
#readyImg img {
height: 100px;
object-fit: contain;
border: 1px solid gray;
max-width: 300px;
}
.removeImgBtn {
position: absolute;
z-index: 1;
text-align: center;
bottom: 10px;
width: 80px;
left: calc(50% - 40px);
margin: 0px !important;
display: none;
}
#readyImg:hover .removeImgBtn {
display: block;
}
#screenshots {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000000;
padding: 30px 30px 30px 200px;
}
.dark-mode #screenshots {
background-color: rgba(0, 0, 0, 1) !important;
}
#screenshotBtns {
position: absolute;
left: 10px;
top: 0px;
height: 100vh;
display: flex;
width: 180px;
flex-direction: column;
justify-content: center;
}
.cropper-container,
.screenshot-container {
height: 100%;
width: 100%;
border: dashed 1px var(--medium-dark-grey);
}
.screenshot-container>img {
width: 100%;
height: 100%;
object-fit: contain;
}
.process-runs-container {
width: 100%;
overflow-x: auto;
}
.subchat-navigation {
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
position: relative;
}
.subchat-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
padding-right: 40px; 
}
.subchat-tab {
padding: 6px 12px;
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 10px;
display: flex;
align-items: center;
gap: 6px;
position: relative;
max-width: 200px;
min-width: 0;
color: var(--darkest-grey);
}
.subchat-tab span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.subchat-tab:hover {
background: var(--light-grey);
border-color: var(--dark-grey);
}
.subchat-tab.active {
background: var(--pale-green-dark);
color: white;
border-color: var(--pale-green-dark);
}
.dark-mode .subchat-tab {
background: var(--darkest-grey);
border: 1px solid var(--medium-grey);
color: var(--light-grey);
}
.dark-mode .subchat-tab:hover {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .subchat-tab.active {
background: black;
color: var(--light-grey);
border-color: var(--pale-green);
}
.subchat-tab.add-subchat {
background: transparent;
border: 1px dashed var(--border-default);
color: var(--pale-green-dark);
padding: 6px 10px;
position: absolute;
right: 0;
top: 0px;
min-width: auto;
font-size: 14px;
}
.dark-mode .subchat-tab.add-subchat {
color: var(--pale-green);
}
.subchat-tab.add-subchat:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--primary-color-light);
}
.subchat-tab .remove-subchat {
font-size: 11px;
opacity: 0.7;
transition: opacity 0.2s;
flex-shrink: 0;
}
.subchat-tab:hover .remove-subchat {
opacity: 1;
}
.subchat-tab.active .remove-subchat {
color: white;
}
.dark-mode .subchat-tab.active .remove-subchat {
color: var(--light-grey);
}
.no-subchat-message {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
}
.no-subchat-message p {
margin-bottom: 10px;
font-size: 12px;
text-align: center;
}
.no-subchat-message .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
:root {
--process-bg-light: var(--lightest-grey);
--process-bg-dark: var(--darkest-grey);
--process-border-light: var(--medium-grey);
--process-border-dark: var(--medium-dark-grey);
--process-border-semi-dark: var(--semi-dark-grey);
--process-text-light: var(--dark-grey);
--process-text-dark: var(--light-grey);
--process-active-bg: var(--pale-green);
--process-active-border: var(--dark-grey);
--process-active-text: var(--dark-grey);
--process-active-icon: var(--pale-green);
--process-arrow-light: var(--dark-grey);
--process-arrow-dark: white;
--process-arrow-inactive: var(--medium-grey);
}
.run-stage-toggle {
position: absolute;
right: 5px;
top: -5px;
cursor: pointer;
color: var(--process-text-light);
z-index: 1;
font-size: 16px;
}
.run-stage-toggle.left {
left: 10px;
}
.dark-mode .run-stage-toggle {
color: var(--process-text-dark);
}
.runNavigation {
flex-basis: 200px;
transition: flex-basis 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.runNavigation.runNavigation-collapsed {
flex-basis: 35px;
}
.messageColumn {
flex-basis: 30%;
flex-grow: 1;
flex-shrink: 1;
padding: 0px !important;
margin-top: 20px;
transition: flex-basis 0.8s cubic-bezier(0.4, 0, 0.2, 1);
max-width: calc( 100% - 300px);
}
.helpColumn-container {
position: relative;
}
.helpColumn {
display: flex;
width: 40vw;
min-width: 35px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.helpColumn-collapsed {
width: 35px;
}
.helpColumn-stable-wrapper {
position: absolute;
left: 0px;
top: 20px;
width: calc(40vw - 20px);
height: 100%;
z-index: 2;
}
.helpColumn-stable-wrapper.hidden {
}
.helpColumn-content {
padding: 0 20px 0 20px;
border-radius: 5px;
border: 1px solid var(--process-border-light);
max-height: calc(100vh - 130px);
overflow: auto;
position: sticky;
top: 20px;
}
.dark-mode .helpColumn-content {
border-color: var(--process-border-dark);
}
.process-steps-vertical-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
margin: 20px 0 0 0;
}
.process-steps-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
min-width: 40px;
margin-bottom: 20px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), padding 0.8s cubic-bezier(0.4, 0, 0.2, 1);
padding: 50px 10px 20px;
border-radius: 5px;
border: 1px solid var(--process-border-light);
overflow-y: hidden;
position: sticky;
top: 50px;
}
.process-run-view.guest .process-steps-vertical {
padding: 20px 10px 10px;
}
.dark-mode .process-steps-vertical {
border-color: var(--process-border-semi-dark);
}
.process-steps-vertical.collapsed {
margin-bottom: 0;
padding-top: 15px;
}
.step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 75px;
}
.step-circle-wrapper .rerunBtn {
position: absolute;
right: -40px;
top: 0px;
font-size: 10px;
padding: 2px 5px;
}
.step-circle {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--process-text-light);
background: var(--process-bg-light);
color: var(--process-text-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: border-color 0.2s;
margin-bottom: 0;
z-index: 2;
position: relative;
}
.step-circle.active {
border-color: var(--process-active-border);
border-width: 1px;
background: var(--process-active-bg);
color: var(--process-active-text);
}
.step-circle.notStarted {
border: 1px solid var(--process-border-light);
background: var(--process-bg-light);
color: var(--process-text-light);
}
.step-circle.notStarted i {
opacity: 0.5;
}
.step-circle.shownstep {
border-style: solid;
}
.step-circle-indicator {
content: '';
display: block;
position: absolute;
left: -20px;
top: 13px;
background-color: var(--process-active-bg);
width: 10px;
height: 10px;
border-radius: 100px;
}
.process-steps-vertical.collapsed .step-circle.active:before {
display: none;
}
.step-details {
position: absolute;
max-width: 150px;
text-align: center;
top: 45px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
border-radius: 5px;
border: 1px solid var(--process-text-light);
background: var(--pale-green);
color: var(--process-text-light);
padding: 0 3px;
transition: opacity 0.3s ease;
}
.step-details.truncated:hover {
cursor: pointer;
white-space: normal;
z-index: 3;
max-width: 180px;
width: 180px;
}
.step-details.notStarted {
border-color: var(--process-border-light);
background: var(--process-border-light);
color: var(--process-text-light);
}
.dark-mode .step-details {
border-color: var(--process-border-dark);
background: var(--process-text-light);
color: var(--process-text-dark);
}
.step-arrow {
width: 1px;
height: 35px;
background: var(--process-arrow-light);
margin: 0 auto;
position: relative;
}
.step-arrow.notStarted {
background: var(--process-arrow-inactive);
}
.step-arrow::after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
border-width: 6px 4px 0 4px;
border-style: solid;
border-color: var(--process-arrow-light) transparent transparent transparent;
width: 0;
height: 0;
}
.step-tools {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 5px;
transition: opacity 0.3s ease;
margin-top: 0px;
margin-left: 5px;
position: sticky;
bottom: 20px;
}
.step-tools button {
margin: 0px;
}
.process-steps-vertical.collapsed + .step-tools {
display: none !important;
}
.dark-mode .step-circle {
background: var(--process-bg-dark);
border-color: var(--process-arrow-dark);
color: var(--process-text-dark);
}
.dark-mode .step-circle > i {
font-size: 18px;
}
.dark-mode .step-circle.active {
border-color: var(--process-active-icon);
}
.dark-mode .step-circle.active > i {
color: var(--process-active-icon);
}
.dark-mode .step-circle.notStarted {
border-color: var(--process-border-dark);
}
.dark-mode .step-arrow {
background-color: var(--process-arrow-dark);
}
.dark-mode .step-arrow.notStarted:after,
.dark-mode .step-arrow.active:after {
border-color: var(--process-arrow-inactive) transparent transparent transparent;
}
.dark-mode .step-arrow.notStarted,
.dark-mode .step-arrow.active {
background-color: var(--process-arrow-inactive);
}
.dark-mode .step-arrow::after {
border-color: var(--process-arrow-dark) transparent transparent transparent;
}
.process-steps-vertical-header {
width: 100%;
margin-bottom: 10px;
transition: margin-bottom 0.3s ease;
position: absolute;
}
.process-run-view.guest .process-steps-vertical-header {
display: none;
}
.process-steps-vertical-header.hidden {
opacity: 0;
visibility: hidden;
height: 0;
margin: 0;
overflow: hidden;
}
.run-name {
display: flex;
align-items: center;
gap: 5px;
top: -45px;
width: 190px;
left: 5px;
justify-content: center;
position: relative;
padding: 0 20px;
}
.run-name-title {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.run-name-edit {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.textarea-container {
position: relative;
z-index: 1;
}
.light-mode .use-input-checkbox-label {
padding: 2px 4px;
background-color: white;
border-radius: 4px;
border: 1px solid var(--light-grey);
}
.use-input-checkbox {
position: relative;
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
width: 100%;
height: 20px;
justify-content: flex-start;
padding: 0px 0px 5px 25px;
}
.use-input-checkbox input[type="checkbox"] {
margin: 0;
width: 14px;
height: 14px;
}
.input-files-attached {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 20px;
justify-content: flex-start;
padding: 0px 0px 5px 25px;
}
.input-files-indicator {
padding: 2px 6px;
background-color: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 4px;
font-size: 11px;
color: #4CAF50;
}
.screenshot-preview {
display: flex;
justify-content: center;
}
.template-selection-cards {
max-width: 800px !important;
}
body:not(.mobile) .process-run-view-title {
max-width: 1200px !important;
margin-right: auto;
}
.template-selection-description {
margin-bottom: 1.5rem;
color: #666;
line-height: 1.5;
font-size: 0.95rem;
text-align: center;
padding-top: 50px;
max-width: 800px;
}
[data-theme="dark"] .template-selection-description {
color: #aaa;
}
.input-tools-prompt-item {
margin-top: 25px;
}
.input-tools-prompt .template-card {
cursor: pointer;
transition: all 0.2s ease;
}
.input-tools-prompt .template-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.help-toggle-btn {
position: fixed;
top: 7px;
right: 7px;
width: 40px;
height: 40px;
background: var(--pale-green-dark);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0);
animation: helpButtonAppear 0.3s ease-out 0.3s forwards, helpButtonGlow 1.5s ease-in-out 4 0.6s;
}
.help-toggle-btn:hover {
background: var(--pale-green);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
animation-play-state: paused;
opacity: 1;
}
.dark-mode .help-toggle-btn {
background: var(--pale-green-darker);
}
.dark-mode .help-toggle-btn:hover {
background: var(--pale-green);
}
.help-toggle-btn.no-animation {
animation: none !important;
opacity: 1 !important;
transform: scale(1) !important;
}
.help-toggle-btn.no-animation::before {
animation: none !important;
transform: scale(1) translateY(-50%) !important;
}
.help-toggle-btn.no-animation::after {
animation: none !important;
}
.help-toggle-btn.no-animation:hover {
transform: scale(1.1) !important;
}
.help-toggle-btn::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--pale-green);
z-index: 1001;
animation: speechBubbleShow 6s ease-in-out 1;
animation-delay: 0.3s;
}
.help-toggle-btn::before {
content: '';
position: absolute;
right: calc(100% + 7px);
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--pale-green-dark);
z-index: 1002; 
animation: speechBubbleShow 6s ease-in-out 1;
animation-delay: 0.3s;
}
.help-toggle-btn:not(.no-animation)::after,
.help-toggle-btn:not(.no-animation)::before {
opacity: 0;
visibility: hidden;
}
.help-toggle-btn.no-animation::after,
.help-toggle-btn.no-animation::before {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.help-toggle-btn.no-animation:hover::after,
.help-toggle-btn.no-animation:hover::before {
opacity: 1;
visibility: visible;
}
.help-toggle-btn::after {
background: var(--light-grey);
color: var(--darkest-grey);
border: 1px solid var(--pale-green-dark);
}
.dark-mode .help-toggle-btn::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--pale-green);
}
.dark-mode .help-toggle-btn::before {
border-left-color: var(--pale-green);
}
.help-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
}
.help-exit-btn {
position: fixed;
top: 7px;
right: 20px;
width: 40px;
height: 40px;
background: var(--danger-color, #dc3545);
border: none;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1002;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.help-exit-btn:hover {
background: #c82333;
transform: scale(1.1);
}
.help-exit-btn::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--danger-color, #dc3545);
opacity: 1;
visibility: visible;
z-index: 1001;
}
.help-exit-btn::before {
content: '';
position: absolute;
right: calc(100% + 7px);
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--danger-color, #dc3545);
opacity: 1;
visibility: visible;
z-index: 1001;
}
.dark-mode .help-exit-btn::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--danger-color, #dc3545);
}
.dark-mode .help-exit-btn::before {
border-left-color: var(--danger-color, #dc3545);
}
.instruction-indicators {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
}
.instruction-indicator {
position: absolute;
width: 30px;
height: 30px;
background: var(--pale-green-darker);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
cursor: pointer;
pointer-events: auto;
z-index: 1002;
transition: background-color 0.3s ease;
}
.dark-mode .instruction-indicator {
background: var(--pale-green-darker);
}
.instruction-indicator:hover {
background: var(--pale-green) !important;
animation: none !important;
}
.dark-mode .instruction-indicator:hover {
background: var(--pale-green) !important;
}
.instruction-indicator.glow-stopped {
animation: none !important;
}
.instruction-indicator:not(.glow-stopped) {
animation: modalPulseGlow 1.5s ease-in-out infinite;
}
.instruction-indicator.indicator-active {
background: var(--pale-green) !important;
animation: none !important;
box-shadow: 
0 0 20px rgba(144, 238, 144, 1),
0 0 10px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3) !important;
transform: scale(1.1);
border: 2px solid rgba(144, 238, 144, 0.8);
}
.dark-mode .instruction-indicator.indicator-active {
background: var(--pale-green) !important;
}
.instruction-indicator .feature-number {
color: white;
font-weight: bold;
font-size: 14px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.instruction-indicator::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
background: var(--light-grey);
color: var(--darkest-grey);
padding: 6px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
border: 1px solid var(--pale-green-dark);
opacity: 1;
visibility: visible;
z-index: 1003;
}
.instruction-indicator.tooltip-right::after {
bottom: auto;
left: calc(100% + 15px);
top: 50%;
transform: translateY(-50%);
}
.instruction-indicator.tooltip-right::before {
content: '';
position: absolute;
left: calc(100% + 7px);
top: 50%;
transform: translateY(-50%) rotate(90deg);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid var(--pale-green-dark);
border-bottom: 0;
opacity: 1;
visibility: visible;
z-index: 1003;
}
.instruction-indicator.tooltip-left::after {
bottom: auto !important;
left: auto !important;
right: calc(100% + 15px) !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.instruction-indicator.tooltip-left::before {
content: '' !important;
position: absolute !important;
bottom: auto !important;
left: auto !important;
right: calc(100% + 7px) !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 0 !important;
height: 0 !important;
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-left: 8px solid var(--pale-green-dark) !important;
border-right: 0 !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 1003 !important;
}
.instruction-indicator::before {
content: '';
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid var(--pale-green-dark);
opacity: 1;
visibility: visible;
z-index: 1003;
}
.dark-mode .instruction-indicator::after {
background: var(--darkest-grey);
color: var(--light-grey);
border: 1px solid var(--pale-green);
}
.dark-mode .instruction-indicator::before {
border-top-color: var(--pale-green);
}
.dark-mode .instruction-indicator.tooltip-right::before {
border-top-color: var(--pale-green);
}
.dark-mode .instruction-indicator.tooltip-left::before {
border-left-color: var(--pale-green) !important;
}
@keyframes modalPulseGlow {
0%, 100% {
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 30px rgba(144, 238, 144, 1),
0 0 15px rgba(144, 238, 144, 0.8),
0 2px 6px rgba(0,0,0,0.3);
}
}
@keyframes helpButtonGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
50% {
box-shadow:
0 0 25px rgba(144, 238, 144, 0.9),
0 0 12px rgba(144, 238, 144, 0.7),
0 4px 12px rgba(0,0,0,0.3);
}
}
@keyframes helpButtonAppear {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes speechBubbleShow {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(8px);
}
5%, 95% {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
100% {
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(8px);
}
}
@media (prefers-reduced-motion: reduce) {
.instruction-indicator,
.help-toggle-btn,
.help-toggle-btn::after,
.help-toggle-btn::before {
animation: none !important;
}
}
.instruction-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1003;
display: flex;
align-items: center;
justify-content: center;
}
.instruction-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.instruction-modal-content {
position: relative;
background: var(--light-grey);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow: hidden;
border: 2px solid var(--pale-green);
}
.dark-mode .instruction-modal-content {
background: var(--darkest-grey);
color: var(--light-grey);
}
.instruction-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .instruction-modal-header {
border-bottom-color: var(--medium-dark-grey);
}
.instruction-modal-header h6 {
color: var(--pale-green-dark);
margin: 0;
font-size: 18px;
font-weight: 600;
}
.dark-mode .instruction-modal-header h6 {
color: var(--pale-green);
}
.instruction-modal-close {
background: none;
border: none;
font-size: 18px;
color: var(--dark-grey);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.instruction-modal-close:hover {
background: var(--medium-grey);
color: var(--darkest-grey);
}
.dark-mode .instruction-modal-close {
color: var(--light-grey);
}
.dark-mode .instruction-modal-close:hover {
background: var(--medium-dark-grey);
color: white;
}
.instruction-modal-body {
padding: 10px 5px 10px;
}
.instruction-modal-body p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
}
.dark-mode .instruction-modal-body p {
color: var(--light-grey);
}
.instruction-modal-footer {
padding: 16px 24px 20px;
border-top: 1px solid var(--medium-grey);
}
.dark-mode .instruction-modal-footer {
border-top-color: var(--medium-dark-grey);
}
.instruction-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.instruction-counter {
font-size: 14px;
color: var(--dark-grey);
font-weight: 500;
}
.dark-mode .instruction-counter {
color: var(--light-grey);
}
.instruction-navigation .btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.instruction-navigation .btn.primary {
background: var(--pale-green-dark);
color: white;
}
.instruction-navigation .btn.primary:hover {
background: var(--pale-green);
}
.instruction-navigation .btn.secondary {
background: var(--medium-grey);
color: var(--dark-grey);
}
.instruction-navigation .btn.secondary:hover {
background: var(--dark-grey);
color: white;
}
.dark-mode .instruction-navigation .btn.secondary {
background: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .instruction-navigation .btn.secondary:hover {
background: var(--light-grey);
color: var(--darkest-grey);
}
.instruction-snippets {
position: absolute;
top: -9999px;
left: -9999px;
visibility: hidden;
pointer-events: none;
}
.instruction-snippet {
position: absolute;
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.help-toggle-btn,
.help-exit-btn {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
font-size: 18px;
}
.instruction-modal-content {
width: 95%;
margin: 20px;
}
.instruction-modal-header,
.instruction-modal-body,
.instruction-modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.instruction-navigation {
flex-direction: column;
gap: 8px;
}
.instruction-navigation .btn {
width: 100%;
justify-content: center;
}
}
.instruction-modal-draggable {
position: fixed;
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: inherit;
max-width: 500px;
width: 90%;
max-height: 85vh;
min-height: 200px;
overflow: hidden;
user-select: none;
animation: modalFadeIn 0.3s ease-out;
display: flex;
flex-direction: column;
padding: 20px;
}
.instruction-modal-draggable:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.dark-mode .instruction-modal-draggable {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
color: var(--light-grey);
}
.instruction-modal-header.instruction-modal-draggable-handle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: var(--pale-green-dark);
border-radius: 5px 5px 0 0;
margin: -20px -20px 20px -20px;
cursor: move;
user-select: none;
}
.instruction-modal-header.instruction-modal-draggable-handle:active {
cursor: grabbing;
}
.instruction-modal-header h3 {
color: white;
margin: 0;
font-size: 18px;
font-weight: 600;
flex: 1;
text-align: center;
}
.dark-mode .instruction-modal-header.instruction-modal-draggable-handle {
background: none;
padding-top: 20px;
margin-bottom: 10px;
}
.dark-mode .instruction-modal-header h3 {
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0.9, 0.1);
}
.instruction-modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--danger-color, #dc3545);
border: none;
font-size: 16px;
color: white;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 10;
}
.instruction-modal-close-btn:hover {
background: #c82333;
transform: scale(1.1);
}
.instruction-modal-content {
display: flex;
flex-direction: column;
width: 100%;
border: none;
flex: 1;
overflow: hidden;
}
.instruction-modal-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
border-bottom: 1px solid var(--medium-grey);
scrollbar-width: thin;
scrollbar-color: var(--pale-green-dark) var(--medium-grey);
}
.instruction-modal-body::-webkit-scrollbar {
width: 6px;
}
.instruction-modal-body::-webkit-scrollbar-track {
background: var(--medium-grey);
border-radius: 3px;
}
.instruction-modal-body::-webkit-scrollbar-thumb {
background: var(--pale-green-dark);
border-radius: 3px;
}
.instruction-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--pale-green);
}
.instruction-modal-body p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--dark-grey);
word-wrap: break-word;
overflow-wrap: break-word;
}
.dark-mode .instruction-modal-body {
border-bottom-color: var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body p {
color: var(--light-grey);
}
.dark-mode .instruction-modal-body {
scrollbar-color: var(--pale-green) var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-track {
background: var(--medium-dark-grey);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-thumb {
background: var(--pale-green);
}
.dark-mode .instruction-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--pale-green-dark);
}
.step-instructions-section {
margin-top: 20px;
margin-bottom: 10px;
}
.step-instructions-label {
display: block;
font-weight: 600;
font-size: 14px;
color: var(--dark-grey);
margin-bottom: 8px;
}
.dark-mode .step-instructions-label {
color: var(--light-grey);
}
.step-instructions-display {
background: var(--lightest-grey);
border: 1px solid var(--medium-grey);
border-radius: 5px;
padding: 15px;
font-size: 12px;
line-height: 1.6;
color: var(--dark-grey);
min-height: 60px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
font-style: italic;
}
.dark-mode .step-instructions-display {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.instruction-content p {
margin: 0 0 15px 0;
line-height: 1.6;
}
.instruction-content p:last-child {
margin-bottom: 0;
}
.input-content-display {
margin-top: 10px;
}
.input-text-content {
background: var(--lightest-grey);
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin-bottom: 15px;
}
.dark-mode .input-text-content {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.input-files-section {
margin-bottom: 20px;
}
.input-files-section:last-child {
margin-bottom: 0;
}
.input-files-title {
color: var(--pale-green-dark);
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
.dark-mode .input-files-title {
color: var(--pale-green);
}
.input-file-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-file-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 10px;
background: var(--lightest-grey);
border-radius: 4px;
font-size: 12px;
border: 1px solid var(--medium-grey);
text-align: center;
}
.dark-mode .input-file-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.input-file-item i {
color: var(--pale-green-dark);
font-size: 14px;
}
.dark-mode .input-file-item i {
color: var(--pale-green);
}
.step-instructions-display .marker {
background-color: #ffd700 !important;
padding: 0px 4px !important;
border-radius: 4px !important;
font-weight: 700 !important;
font-size: 10px !important;
color: #333 !important;
display: inline-flex;
align-items: center;
margin: 0 2px;
white-space: nowrap;
}
.step-instructions-display .marker i {
margin-right: 3px !important;
font-size: 10px !important;
}
.dark-mode .step-instructions-display .marker {
background-color: #ffeb3b !important;
color: #333 !important; 
}
.instruction-modal-footer {
padding: 16px 20px 20px;
border-top: none; 
flex-shrink: 0;
margin: 0 -20px -20px -20px; 
border-radius: 0 0 8px 8px;
background: var(--white);
}
.dark-mode .instruction-modal-footer {
border-top-color: var(--medium-dark-grey);
background: var(--darkest-grey);
}
.instruction-navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.instruction-counter {
font-size: 14px;
color: var(--dark-grey);
font-weight: 500;
}
.dark-mode .instruction-counter {
color: var(--light-grey);
}
.instruction-navigation .btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.instruction-navigation .btn.primary {
background: var(--pale-green-dark);
color: white;
}
.instruction-navigation .btn.primary:hover {
background: var(--pale-green);
}
.instruction-navigation .btn.secondary {
background: var(--medium-grey);
color: var(--dark-grey);
}
.instruction-navigation .btn.secondary:hover {
background: var(--dark-grey);
color: white;
}
.dark-mode .instruction-navigation .btn.secondary {
background: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .instruction-navigation .btn.secondary:hover {
background: var(--light-grey);
color: var(--darkest-grey);
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.help-toggle-btn,
.help-exit-btn {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
font-size: 18px;
}
.instruction-modal-draggable {
width: 95% !important;
margin: 20px;
left: 2.5% !important;
top: 20px !important;
max-height: calc(100vh - 40px);
height: auto;
}
.instruction-modal-header.instruction-modal-draggable-handle {
cursor: default; 
padding-left: 20px;
padding-right: 20px;
}
.instruction-modal-body {
padding-left: 20px;
padding-right: 20px;
}
.instruction-modal-footer {
padding-left: 20px;
padding-right: 20px;
}
.instruction-navigation {
flex-direction: column;
gap: 8px;
}
.instruction-navigation .btn {
width: 100%;
justify-content: center;
}
}
.comment-view {
padding: var(--spacing-lg) 0;
font-family: var(--font-family);
}
.review-header {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--lightest-grey);
border-radius: var(--border-radius-md);
border: 1px solid var(--medium-grey);
}
.review-header h2 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
font-family: var(--font-family-title);
}
.review-header .message {
margin-bottom: var(--spacing-md);
color: var(--semi-dark-grey);
line-height: 1.5;
}
.review-header .inviter-info {
margin-bottom: var(--spacing-md);
border-radius: var(--border-radius-sm);
}
.review-header .inviter-text {
margin: 0;
color: var(--dark-grey);
font-size: 0.95em;
}
.review-header .meta {
display: flex;
gap: var(--spacing-lg);
font-size: 0.9em;
color: var(--medium-dark-grey);
}
.dark-mode .review-header .meta .sent-date {
color: var(--pale-green);
}
.dark-mode .review-header .meta .expires {
color: var(--info-blue);
}
.docs-layout {
max-width: 1400px;
margin: 0 auto;
}
.main-content-area {
display: flex;
gap: var(--spacing-lg);
align-items: stretch;
}
.document-content {
flex: 1;
max-width: calc(100% - 400px);
}
.content-wrapper {
position: relative;
}
.comment-instruction-tag {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--button-green);
padding: 2px 5px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
font-size: 8px;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
z-index: 1;
}
.content-display {
padding: var(--spacing-xl);
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
line-height: 1.6;
font-size: 16px;
max-height: none;
overflow: visible;
}
.comment-view .content-display .commentable-element {
position: relative;
transition: all 0.2s ease;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-md);
margin: var(--spacing-sm) calc(-1 * var(--spacing-md));
border-radius: var(--border-radius-sm);
}
.comment-view .content-display .commentable-element:hover {
background-color: var(--pale-green-light);
border-left: 3px solid var(--pale-green);
}
.comment-view .content-display .commentable-element:hover::after {
content: "💬";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: 0.7;
}
.comment-view .content-display .commentable-element.has-comment {
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
}
.comment-view .content-display .commentable-element.has-comment::after {
content: "💬";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--info-blue);
opacity: 1;
font-weight: bold;
}
.comment-view .content-display .commentable-element.has-comment:hover {
background-color: rgba(33, 150, 243, 0.1);
border-left: 4px solid var(--info-blue);
}
.comment-view .content-display .commentable-element.has-comment:hover::after {
opacity: 1;
font-size: 16px;
}
.comment-view .content-display .commentable-element.being-edited {
border-left: 4px solid var(--warning-yellow) !important;
background-color: rgba(255, 193, 7, 0.1) !important;
}
.comment-view .content-display .commentable-element.being-edited::after {
content: "✏️";
position: absolute;
right: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--warning-yellow);
opacity: 1;
font-weight: bold;
}
.comment-view .content-display .commentable-element.comment-highlight-animation {
animation: commentPulse 2s ease-in-out;
border-left: 5px solid var(--info-blue) !important;
}
.comment-view .content-display .commentable-element.marker-only {
cursor: default !important;
transition: none !important;
}
.comment-view .content-display .commentable-element.marker-only:hover {
background-color: transparent !important;
border-left: none !important;
}
.comment-view .content-display .commentable-element.marker-only:hover::after {
display: none !important;
}
@keyframes commentPulse {
0% {
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(33, 150, 243, 0.3);
}
100% {
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
}
}
.comment-view .sidebar-wrapper {
width: 380px;
}
.comment-view .comment-sidebar {
width: 100%;
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
position: sticky;
top: 20px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.comment-view .approval-sidebar {
width: 100%;
background: white;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
position: sticky;
top: 20px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.comment-view .sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.comment-view .sidebar-header h3 {
margin: 0;
font-size: 1.1em;
color: var(--dark-grey);
}
.comment-view .sidebar-content {
padding: var(--spacing-md);
}
.comment-view .active-comment-editor {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--pale-green-light);
border: 2px solid var(--pale-green);
border-radius: var(--border-radius-md);
}
.comment-view .comment-target {
margin-bottom: var(--spacing-md);
}
.comment-view .comment-target strong {
color: var(--dark-grey);
font-size: 0.9em;
}
.dark-mode .comment-view .comment-target strong {
color: var(--light-grey);
}
.dark-mode .comment-view .target-preview {
background: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode .comment-view .comment-display .comment-text, .dark-mode .comment-view .comment-meta small {
color: var(--light-grey);
}
.comment-view .target-preview {
font-size: 0.85em;
color: var(--medium-dark-grey);
font-style: italic;
margin-top: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: white;
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--pale-green);
}
.comment-view .comment-textarea {
width: 100%;
min-height: 80px;
resize: vertical;
padding: var(--spacing-sm);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
font-family: var(--font-family);
font-size: 14px;
}
.comment-view .comment-actions {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.comment-view .existing-comments {
margin-bottom: var(--spacing-lg);
}
.comment-view .comment-item {
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-md);
transition: all 0.2s ease;
cursor: pointer;
}
.comment-view .comment-item.highlighted {
border-color: var(--info-blue);
background-color: rgba(33, 150, 243, 0.05);
}
.comment-view .comment-item:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.comment-view .comment-item.comment-resolved {
opacity: 0.7;
background: var(--pale-green-light);
border-left: 4px solid var(--success-color);
}
.comment-view .comment-item.comment-resolved .comment-text {
text-decoration: line-through;
color: var(--medium-grey);
}
.comment-view .resolved-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--success-color);
color: white;
padding: 2px 6px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
margin-top: 4px;
}
.comment-view .resolved-indicator {
color: var(--success-color);
font-weight: 500;
margin-left: 8px;
}
.comment-view .commenter-email {
background: var(--primary-color);
color: white;
padding: 1px 6px;
border-radius: 8px;
font-size: 10px;
margin-left: 8px;
}
.comment-view .comment-display .comment-text {
margin: var(--spacing-sm) 0;
line-height: 1.5;
color: var(--dark-grey);
}
.comment-view .comment-meta {
margin: var(--spacing-xs) 0;
}
.comment-view .comment-meta small {
color: var(--medium-dark-grey);
font-size: 0.8em;
}
.comment-view .saved-indicator {
margin-left: var(--spacing-sm);
color: var(--button-green);
font-size: 0.75em;
font-weight: 500;
}
.approval-section {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--lightest-grey);
border-radius: var(--border-radius-md);
border: 1px solid var(--medium-grey);
}
.approval-section h4 {
margin: 0 0 var(--spacing-md) 0;
color: var(--dark-grey);
}
.approval-options {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.approval-option {
display: flex;
align-items: center;
cursor: pointer;
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
transition: all 0.2s ease;
background: white;
}
.approval-option:hover {
border-color: var(--pale-green);
background-color: var(--pale-green-light);
}
.approval-option input[type="radio"] {
margin-right: var(--spacing-sm);
}
.approval-label.approved {
color: var(--button-green);
font-weight: 500;
}
.approval-label.rejected {
color: var(--error-red);
font-weight: 500;
}
.approval-label.pending {
color: var(--warning-yellow);
font-weight: 500;
}
.approval-comment {
margin-top: var(--spacing-md);
}
.approval-comment label {
display: block;
margin-bottom: var(--spacing-xs);
color: var(--dark-grey);
font-weight: 500;
font-size: 0.9em;
}
.comment-view .approval-main {
text-align: center;
}
.comment-view .approval-description {
margin-bottom: var(--spacing-lg);
color: var(--semi-dark-grey);
line-height: 1.5;
font-size: 0.95em;
}
.comment-view .btn-full-width {
width: 100%;
padding: var(--spacing-md) var(--spacing-sm);
font-size: 1.1em;
font-weight: 600;
justify-content: center;
display: flex;
align-items: center;
}
.comment-view .btn-success {
background-color: var(--button-green) !important;
color: white !important;
border: 2px solid var(--button-green);
}
.comment-view .btn-success:hover {
background-color: var(--button-green-hover) !important;
border-color: var(--button-green-hover);
}
.comment-view .success-message {
margin-top: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--pale-green-light);
border: 2px solid var(--button-green);
border-radius: var(--border-radius-md);
text-align: center;
}
.comment-view .success-icon {
font-size: 2em;
margin-bottom: var(--spacing-sm);
}
.dark-mode .review-header {
background: black;
border-color: var(--medium-dark-grey);
}
.dark-mode .review-header h2 {
color: var(--light-grey);
}
.dark-mode .review-header .message {
color: var(--medium-grey);
}
.dark-mode .review-header .inviter-text {
color: var(--light-grey);
}
.dark-mode .content-display {
background: black;
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .content-display .commentable-element.has-comment {
border-left: 3px solid var(--info-blue);
background-color: rgba(33, 150, 243, 0.08);
}
.dark-mode .content-display .commentable-element.has-comment:hover {
background-color: rgba(33, 150, 243, 0.15);
}
.dark-mode .content-display .commentable-element.being-edited {
border-left: 4px solid var(--warning-yellow) !important;
background-color: rgba(255, 193, 7, 0.08) !important;
}
.dark-mode .comment-instruction-tag {
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.dark-mode .comment-sidebar {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-sidebar {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-description {
color: var(--medium-grey);
}
.dark-mode .sidebar-header {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .sidebar-header h3 {
color: var(--light-grey);
}
.dark-mode .active-comment-editor {
background: rgba(182, 215, 168, 0.1);
border-color: var(--pale-green-dark);
}
.dark-mode .comment-item {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .comment-view .comment-item.comment-resolved {
background: rgba(40, 167, 69, 0.1);
border-left-color: var(--success-color);
}
.dark-mode .comment-view .comment-item.comment-resolved .comment-text {
color: var(--medium-light-grey);
}
.dark-mode .comment-view .commenter-email {
background: var(--primary-color-dark);
}
.dark-mode .approval-section {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
.dark-mode .approval-option {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
@media (max-width: 1024px) {
.main-content-area {
flex-direction: column;
}
.document-content {
max-width: 100%;
}
.sidebar-wrapper {
width: 100%;
}
.comment-sidebar,
.approval-sidebar {
width: 100%;
position: static;
max-height: none;
}
}
@media (max-width: 768px) {
.comment-view {
padding: var(--spacing-md) 0;
}
.review-header {
padding: var(--spacing-md);
}
.review-header .meta {
flex-direction: column;
gap: var(--spacing-sm);
}
.content-display {
padding: var(--spacing-md);
}
.comment-instruction-tag {
font-size: 9px;
padding: 3px 6px;
}
.sidebar-content {
padding: var(--spacing-sm);
}
}
.approval-success {
text-align: center;
padding: var(--spacing-md);
}
.approval-status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.approval-status-badge.status-approved {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.approval-status-badge i {
font-size: 1.2em;
}
.approval-feedback {
color: var(--semi-dark-grey);
font-size: 0.9em;
line-height: 1.4;
margin: 20px 0 0 0;
text-align: center;
}
.approved-content {
pointer-events: none;
position: relative;
}
.approved-content::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.approved-content .commentable-element:hover {
background: none !important;
cursor: default !important;
}
.approved-content .commentable-element {
cursor: default !important;
}
.comment-view .marker {
background-color: #ffd700; 
padding: 0px 2px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 500;
color: #333;
border: 1px solid rgba(0, 0, 0, 0.1);
user-select: none;
white-space: nowrap;
vertical-align: baseline; 
}
.comment-view .marker:hover {
background-color: #ffed4e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.comment-view .marker:active {
transform: scale(0.98);
}
.comment-view .marker i {
font-size: 0.8em;
color: #666;
}
.draggable-comment-modal {
position: fixed;
min-height: 200px;
background: var(--white);
border: 2px solid var(--info-blue);
border-radius: var(--border-radius-md);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
user-select: none;
transition: box-shadow 0.2s ease, width 0.3s ease, height 0.3s ease;
font-family: var(--font-family);
}
.draggable-comment-modal:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.modal-header.draggable-handle {
background: var(--info-blue);
color: var(--white);
padding: var(--spacing-sm) var(--spacing-md);
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
min-height: 40px;
}
.modal-header.draggable-handle:active {
cursor: grabbing;
background: var(--info-blue-hover, #1976d2);
}
.modal-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
flex: 1;
}
.header-actions {
display: flex;
gap: var(--spacing-xs);
}
.minimize-btn, 
.close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: var(--white);
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
transition: background-color 0.2s ease;
}
.minimize-btn:hover, 
.close-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.minimize-btn:active, 
.close-btn:active {
background: rgba(255, 255, 255, 0.4);
}
.modal-content {
display: flex;
flex-direction: column;
}
.content-preview {
padding: var(--spacing-md);
border-bottom: 1px solid var(--medium-grey);
background: var(--pale-green-light, #f8f9fa);
}
.target-indicator {
font-size: 0.9em;
}
.target-indicator strong {
color: var(--dark-grey);
}
.target-text {
font-style: italic;
color: var(--medium-dark-grey);
margin-top: var(--spacing-xs);
max-height: 60px;
overflow-y: auto;
line-height: 1.4;
padding: var(--spacing-xs);
background: rgba(255, 255, 255, 0.7);
border-radius: var(--border-radius-sm);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.comment-editor {
padding: var(--spacing-md);
flex: 1;
}
.comment-editor textarea {
width: 100%;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-sm);
padding: var(--spacing-sm);
font-family: var(--font-family);
font-size: 14px;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
.comment-editor textarea:focus {
outline: none;
border-color: var(--info-blue);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.comment-editor textarea:disabled {
background: var(--lightest-grey);
color: var(--medium-grey);
cursor: not-allowed;
}
.modal-actions {
padding: var(--spacing-md);
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
border-top: 1px solid var(--medium-grey);
background: var(--lightest-grey);
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}
.modal-actions .btn {
margin: 0;
font-size: 12px;
padding: var(--spacing-xs) var(--spacing-sm);
min-width: 60px;
}
.modal-actions .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.draggable-comment-modal.minimized {
width: 60px !important;
height: 40px !important;
overflow: hidden;
min-height: auto;
}
.draggable-comment-modal.minimized .modal-content {
display: none;
}
.draggable-comment-modal.minimized .modal-header {
padding: var(--spacing-xs);
border-radius: var(--border-radius-md);
}
.draggable-comment-modal.minimized .modal-header h3 {
font-size: 16px;
text-align: center;
}
.draggable-comment-modal.minimized .header-actions {
display: none;
}
.dark-mode .draggable-comment-modal {
background: var(--dark-grey);
border-color: var(--info-blue);
color: var(--light-grey);
}
.dark-mode .content-preview {
background: rgba(182, 215, 168, 0.1);
border-color: var(--medium-dark-grey);
}
.dark-mode .target-text {
color: var(--medium-grey);
background: rgba(255, 255, 255, 0.05);
border-color: var(--medium-dark-grey);
}
.dark-mode .comment-editor textarea {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .comment-editor textarea:focus {
border-color: var(--info-blue);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.dark-mode .modal-actions {
background: var(--semi-dark-grey);
border-color: var(--medium-dark-grey);
}
@media (max-width: 768px) {
.draggable-comment-modal {
width: calc(100vw - 40px) !important;
max-width: 320px;
left: 20px !important;
}
.modal-header.draggable-handle {
cursor: default; 
}
.content-preview {
padding: var(--spacing-sm);
}
.comment-editor {
padding: var(--spacing-sm);
}
.modal-actions {
padding: var(--spacing-sm);
flex-wrap: wrap;
}
.modal-actions .btn {
flex: 1;
min-width: auto;
}
}
.draggable-comment-modal {
animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.draggable-comment-modal.dragging {
transition: none;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.draggable-comment-modal.loading {
pointer-events: none;
}
.draggable-comment-modal.loading .modal-content {
opacity: 0.7;
}
.draggable-comment-modal:focus-within {
border-color: var(--info-blue);
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
@media (prefers-contrast: high) {
.draggable-comment-modal {
border-width: 3px;
}
.modal-header.draggable-handle {
font-weight: bold;
}
.comment-editor textarea {
border-width: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.draggable-comment-modal {
animation: none;
transition: none;
}
.minimize-btn, 
.close-btn,
.comment-editor textarea {
transition: none;
}
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 40px 102px;
padding: 20px 0 0 0;
max-width: 1800px;
}
.containerDiv:empty {
display: none;
}
.containerDiv {
width: calc(100vw - 122px);
margin: 0 0 var(--spacing-xl) 102px;
padding: var(--spacing-lg) 0 0 0;
max-width: 1800px;
}
.alert-area {
background-color: var(--error-red-dark);
padding: 10px 20px;
border-radius: var(--border-radius-md);
color: white;
margin-top: 10px;
margin-bottom: 0px;
position: absolute;
z-index: 2;
width: calc(100vw - 160px);
}
.alert-area-green {
background-color: var(--pale-green-dark);
transition: height 0.5s ease, padding 0.5s, margin 0.5s;
overflow: hidden;
}
.alert-area-green.fade-out > * {
opacity: 0;
transition: opacity 0.5s ease;
}
.alert-area-green.fade-out {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: height 0.5s ease, padding 0.5s, margin 0.5s;
}
.alert-area-text p {
margin: 0;
text-align: center;
}
.alert-area-text a {
font-weight: 700;
text-decoration: underline;
}
.alert-area-close {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.flex {
display: flex;
justify-content: center;
max-width: 100%;
flex-wrap: wrap;
gap: 0px 10px;
flex-direction: row;
}
.flex .flex {
width: 100%;
}
.left {
text-align: left;
justify-content: left;
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 75vh;
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical * {
text-align: center;
}
.justifyLeft {
justify-content: left;
}
.formColumn {
width: unset;
flex: 1 1 70%;
padding: 0px !important;
}
.formColumn h3 {
font-size: 16px !important;
background: unset !important;
-webkit-text-fill-color: unset !important;
-webkit-background-clip: unset !important;
}
.settingsColumn {
flex: 1 1 20%;
background-color: white;
padding: 10px !important;
border-radius: 5px;
border: 1px solid #ddd;
align-self: flex-start;
}
.dark-mode .settingsColumn {
background-color: black;
border: 1px solid var(--dark-grey);
color: var(--dark-grey);
}
.mobile .containerDiv {
width: 100vw;
max-width: 100vw;
margin: 0;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
overflow-x: hidden;
}
.mobile .containerDiv:last-of-type {
margin-bottom: 100px;
}
.mobile #app > .containerDiv.first {
top: -50px;
}
.mobile .formColumn.run-stage {
flex: 0 0 calc(100vw);
margin-top: -80px;
z-index: 1;
padding: 20px 20px 0px 20px !important;
}
.dark-mode .formColumn.run-stage {
background-color: black;
border: 1px solid var(--dark-grey);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-wrap {
flex-wrap: wrap;
}
header {
width: 83px;
background-color: white;
position: fixed;
height: 100vh;
top: 0;
left: 0;
border-right: 1px solid var(--dark-grey);
z-index: 1;
}
.dark-mode header {
background-color: black;
}
.logo {
position: fixed;
top: 1px;
left: 1px;
width: 80px;
height: 80px;
padding: 10px;
display: flex;
align-items: center;
background-color: white;
z-index: 1;
display: flex;
justify-content: center;
align-content: center;
border-radius: 5px;
cursor: pointer;
z-index: 2;
}
.dark-mode .logo {
background-color: black;
}
.logo img {
width: 60px;
height: auto;
}
.breadcrumbTopContainer {
height: 54px;
margin-top: 0px;
margin-bottom: 0px;
border-bottom: 1px solid var(--dark-grey);
margin-left: 83px;
padding: 0;
width: calc(100vw - 83px);
}
.view-userSettings.mobile .breadcrumbTopContainer {
display: none;
}
.dark-mode .breadcrumbTopContainer {
border-bottom: 1px solid var(--dark-grey);
background-color: black;
}
.light-mode .breadcrumbTopContainer {
background-color: white;
}
.breadcrumbTop {
position: fixed;
background-color: white;
padding: 5px 10px;
border: solid 1px #e0e0e0;
border-radius: 5px;
z-index: 1;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
box-shadow: 0px 5px 10px #0000001a;
}
.dark-mode .breadcrumbTop {
color: white;
background-color: var(--dark-grey);
border: 1px solid black;
box-shadow: 0px 5px 10px black;
}
.breadcrumbTop i {
display: inline-block;
font-size: 10px;
margin-left: 5px;
margin-right: 5px;
}
.navbar {
background-color: white;
color: black;
width: 80px;
top: 132px;
height: calc(100vh - 83px);
padding-top: 10px;
margin-left: 1px;
}
.dark-mode .navbar {
background-color: black;
color: white;
}
.navbar a {
color: black;
font-size: 10px;
display: inline-block;
width: 100%;
text-align: center;
height: fit-content;
padding: 10px 0;
}
.dark-mode .navbar a {
color: white;
}
.navbar a.selected {
color: var(--pale-green-dark);
}
.dark-mode .navbar a.selected {
color: var(--pale-green);
}
.navbar a:hover {
color: black;
}
.dark-mode .navbar a:hover {
color: white;
}
.navbar-serviceText {
font-size: 10px;
text-align: center;
}
.sign-in-link .navbar-serviceText {
padding-bottom: 10px;
border-bottom: 1px solid var(--pale-green);
}
.user_info {
position: fixed;
bottom: 10px;
left: 1px;
color: white !important;
display: flex;
align-items: end;
z-index: 2;
display: block;
height: 80px;
width: 80px;
}
.user_info a * {
color: black;
}
.dark-mode .user_info a * {
color: white;
}
.user_info .name, 
.user_info .organisationName {
display: block;
padding-right: 5px;
font-size: 9px; 
width: 100%;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 10px;
line-height: 1.6;
font-weight: 400;
}
.user_info .organisationName {
font-size: 7px;
text-transform: uppercase;
}
.userCircle {
width: 40px;
height: 40px;
margin-left: calc(50% - 20px);
border-radius: 50%;
background: linear-gradient(to right, var(--button-green), var(--button-green-hover));
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
margin-bottom: 5px;
}
.userCircle i {
display: inline-block;
width: 100%;
text-align: center;
color: white;
}
.user_info .vue-tooltip {
color: white;
}
.darkModeTab {
position: fixed;
top: 90px;
left: 12px;
width: 60px;
z-index: 2;
}
.darkModeTab .tab-container {
width: 60px;
}
.darkModeTab .tab-container i {
font-size: 10px;
}
.darkModeTab .tab {
width: 30px;
min-width: 30px;
}
.darkModeTab .tab-header {
min-width: unset !important;
}
#signOut {
position: absolute !important;
right: 10px;
top: 10px;
display: none;
}
.hover-class #signOut {
display: block;
}
.fa-sign-out {
cursor: pointer;
color: #000000;
}
.fa-sign-out:hover {
color: var(--dark-grey);
}
.dark-mode .fa-sign-out {
cursor: pointer;
color: #ffffff;
}
.dark-mode .fa-sign-out:hover {
color: var(--light-grey);
}
.dashSocial_ {
display: none;
}
[data-amplify-authenticator] [data-amplify-container] {
width: 400px !important;
}
.amplify-tabs__list {
display: none !important;
}
form {
border: 0px !important;
}
[data-amplify-authenticator] [data-amplify-router] {
border-radius: 10px;
}
.amplify-textfield {
font-family: var(--font-family);
font-size: 16px !important;
}
.amplify-heading, 
.amplify-authenticator__subtitle {
color: var(--dark-grey) !important;
background: unset !important;
-webkit-text-fill-color: unset !important;
}
.amplify-button--primary {
font-family: var(--font-family);
font-size: 14px !important;
background-color: var(--pale-green) !important;
color: var(--button-green-dark) !important;
border-radius: 5px !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
.amplify-button--primary:hover {
background-color: var(--button-hover-green) !important;
}
.amplify-tabs__panel {
padding: 0px !important;
}
.amplify-input {
font-size: 14px !important;
}
[aria-label="Hide password"] {
height: 38px !important;
margin-top: 4px !important;
}
.amplify-button--small {
font-size: 12px !important;
}
.amplify-field:last-of-type {
margin-bottom: 20px !important;
}
input[type="text"], 
input[type="email"] {
margin-bottom: 0px !important;
}
.amplify-text--error {
color: var(--error-red-dark) !important;
}
.loginPage.containerDiv {
max-width: 500px;
margin: 0 auto;
padding: 20px;
flex-direction: column;
}
.loginPage .tab-container {
width: 100%;
flex: 0 0 33px;
}
.loginPage .auth-wrapper {
height: calc(100vh - 150px);
min-height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loginPage .auth-wrapper > p {
text-align: center;
display: inline-block;
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.loginPage .tab-container .tab-header {
margin-bottom: 50px;
}
.welcome-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.welcome-header h1 {
color: var(--pale-green-dark);
font-family: var(--font-family-title);
margin-bottom: var(--spacing-md);
font-size: 2.2em;
text-align: center;
}
.welcome-subtitle {
color: var(--medium-grey);
font-size: 1.1em;
margin: 0;
}
.stats-section {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.stats-section h3 {
color: var(--dark-grey);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.stats-section .stat-card {
min-height: 180px;
position: relative;
padding-top: 10px;
}
.stat-number {
font-size: 2.8em;
font-weight: bold;
color: var(--button-green);
margin: var(--spacing-sm) 0;
}
.activity-section {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.activity-section h3 {
color: var(--dark-grey);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.activity-card {
padding-top: 10px;
}
.activity-meta {
color: var(--medium-grey);
font-size: 0.85em;
margin-top: var(--spacing-sm);
}
.status-completed {
background-color: var(--pale-green);
color: var(--pale-green-darker);
}
.status-running {
background-color: var(--info-blue);
color: white;
}
.status-pending {
background-color: var(--warning-yellow);
color: var(--dark-grey);
}
.status-error,
.status-failed {
background-color: var(--error-red);
color: white;
}
.no-activity-container {
display: flex;
justify-content: center;
padding: var(--spacing-xl);
}
.no-activity-card {
background: var(--lightest-grey);
border: 2px dashed var(--medium-grey);
border-radius: 12px;
padding: var(--spacing-xl);
text-align: center;
max-width: 400px;
transition: var(--transition-normal);
}
.no-activity-card:hover {
border-color: var(--pale-green-dark);
background: var(--pale-green);
}
.no-activity-card h4 {
color: var(--dark-grey);
margin: var(--spacing-md) 0;
}
.no-activity-card p {
color: var(--medium-grey);
margin-bottom: var(--spacing-lg);
line-height: 1.5;
}
.fade-in {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.template-card {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 0px;
flex: 0 1 400px;
transition: transform 0.2s;
}
body #app_ h2.example-templates-title {
color: var(--pale-green-dark);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
font-size: 27px;
margin-bottom: 30px;
}
body.dark-mode  #app_ h2.example-templates-title {
color: var(--pale-green);
}
.dark-mode .template-card {
background-color: black;
border: 1px solid var(--dark-grey);
}
.template-card-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 20px 50px 20px;
}
.template-card-btns {
display: flex;
justify-content: space-between;
gap: 5px;
margin: 5px;
width: calc(100% - 10px);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.template-card-btns .btn {
padding: 5px 10px !important;
font-size: 12px;
background-color: var(--lightest-gray) !important;
border: 1px solid var(--button-green) !important;
color: black !important;
margin: 0px !important;
flex: 1;
}
.light-mode .template-card-btns .btn:hover {
color: black !important;
border: 1px solid green !important;
box-shadow: inset 0px 0px 10px #00800045;
}
.dark-mode .template-card-btns .btn {
background-color: var(--dark-grey) !important;
border: 1px solid var(--darkest-grey) !important;
color: white !important;
}
.dark-mode .template-card-btns .btn:hover {
background-color: var(--darkest-grey) !important;
color: white !important;
}
.template-card-btns .btn i {
margin-right: 5px;
}
.template-card-btns .btn i.fa-trash {
color: var(--error-red-dark) !important;
}
.dark-mode .template-card-btns .btn i.fa-trash {
color: var(--error-red-light) !important;
}
.dark-mode .template-card-btns .btn i {
color: var(--pale-green) !important;
}
.template-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 20px;
margin-top: -20px;
justify-content: center;
}
.template-card-tags .template-card-tag {
position: relative;
}
.template-card-tag {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--button-green);
padding: 2px 5px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
font-size: 8px;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
z-index: 1;
}
.template-card-tag.leftAndOnTop {
left: 2px;
right: unset;
top: -25px;
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.dark-mode .template-card-tag {
color: var(--light-grey);
background-color: var(--dark-grey);
border: 1px solid var(--dark-grey);
}
.template-card-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
text-align: left;
margin-top: 0px;
}
.template-card-text {
font-size: 13px;
color: #232323;
text-align: center;
margin: 0;
padding: 0;
line-height: 1.4;
font-size: 11px;
}
.template-card-content {
display: flex;
gap: 15px;
align-items: center;
width: 100%;
}
.template-card-text-content {
flex: 1;
min-width: 0; 
text-align: left;
padding-right: 20px;
padding-left: 20px;
}
.template-card-steps {
flex-shrink: 0;
display: flex;
align-items: center;
margin-top: 20px;
margin-right: -10px;
min-height: 110px;
}
.template-steps-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.template-step-circle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-top: -3px;
}
.template-step-circle {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--medium-grey);
background: var(--lightest-grey);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
transition: all 0.2s;
z-index: 2;
position: relative;
}
.template-step-circle.step-assistant {
background: var(--info-blue);
border-color: var(--info-blue);
}
.template-step-circle.step-textEditor {
background: var(--button-green);
border-color: var(--button-green);
}
.template-step-circle.step-convert {
background: var(--icon-purple);
border-color: var(--icon-purple);
}
.template-step-circle.step-api {
background: var(--icon-orange);
border-color: var(--icon-orange);
}
.template-step-circle.step-Browsing {
background: var(--pale-green-dark);
border-color: var(--pale-green-darker);
}
.template-step-circle.step-default {
background: var(--medium-dark-grey);
border-color: var(--dark-grey);
}
.template-step-arrow {
width: 1px;
height: 6px;
background: var(--process-text-light);
opacity: 0.5;
}
.dark-mode .template-step-circle {
}
.dark-mode .template-step-arrow {
background: var(--medium-grey);
}
.template-card-icon {
margin-bottom: 10px;
}
.template-card-icon img {
width: auto;
height: 50px;
}
.dark-mode .welcome-header h1 {
color: var(--light-grey);
}
.dark-mode .welcome-subtitle {
color: var(--medium-grey);
}
.dark-mode .stats-section h3,
.dark-mode .activity-section h3 {
color: var(--light-grey);
}
.dark-mode .no-activity-card {
background: var(--dark-grey);
border-color: var(--medium-grey);
}
.dark-mode .no-activity-card:hover {
background: var(--darkest-grey);
border-color: var(--pale-green);
}
.dark-mode .no-activity-card h4 {
color: var(--light-grey);
}
@media (max-width: 1024px) and (min-width: 751px) {
.stats-section .flex {
justify-content: center;
}
}
.hr-rule {
width: calc(100% - 300px);
height: 1px;
background: var(--pale-green-dark);
margin-bottom: 50px;
margin-top: 50px;
margin-left: 150px;
margin-right: 150px;
}
.dark-mode .hr-rule {
background: var(--pale-green);
}
.guestView {
margin-top: 150px;
text-align: center;
}
.dashbtns {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
position: fixed;
top: 10px;
left: 100px; 
right: 10px;
z-index: 100;
font-size: 12px;
}
.dashSocial {
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
.dashSocial i {
font-size: 20px;
color: var(--pale-green-dark);
}
.dashSocial a {
display: flex;
}
.dark-mode .dashSocial i {
color: var(--pale-green);
}
.dashLinksLeft {
display: flex;
align-items: center;
gap: 30px;
}
.dashLinks {
display: flex;
align-items: center;
gap: 25px;
}
.dashLink {
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
margin-left: auto; 
}
.dashLink, .dashLink a {
color: black;
}
.dark-mode .dashLink, .dark-mode .dashLink a {
color: white;
}
.dashLink:hover, .dashLink a:hover {
color: var(--pale-green-dark);
text-decoration: none;
}
.dark-mode .dashLink:hover, .dark-mode .dashLink a:hover {
color: var(--pale-green);
text-decoration: none;
}
.guestView p, .guestView h1 {
text-align: center;
}
.guestView p.description {
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
font-size: 15px;
}
.additional-info {
margin-top: 100px;
padding-left: 150px;
padding-right: 150px;
margin-bottom: 100px;
}
.additional-info .flex {
gap: 30px 70px;
}
.info-section {
margin-bottom: 30px;
text-align: left;
flex: 1 1 40%;
text-align: left;
}
.info-section h2 {
color: var(--pale-green-dark);
margin-bottom: 15px;
font-size: 1.5rem;
}
.dark-mode .info-section h2 {
color: var(--pale-green);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.info-section p {
line-height: 1.6;
margin-bottom: 15px;
text-align: left !important;
}
.hus-case-study {
padding: 0 150px;
}
.hus-case-content {
background: var(--white);
border-radius: 12px;
padding: 35px 50px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 1px solid var(--medium-grey);
max-width: 800px;
margin: 0 auto;
display: flex;
gap: 30px;
align-items: flex-start;
}
.dark-mode .hus-case-content {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.hus-logo {
width: 100px;
height: auto;
border-radius: 8px;
position: absolute;
left: -80px;
top: 20px;
border: 1px solid var(--dark-grey);
}
.hus-case-main {
flex: 1;
}
.hus-case-header h3 {
color: var(--pale-green-dark);
margin: 0 0 10px 0;
font-size: 1.5rem;
font-weight: bold;
}
.dark-mode .hus-case-header h3 {
color: var(--pale-green);
}
.hus-case-header p {
margin: 0 0 20px 0;
line-height: 1.6;
font-size: 16px;
}
.hus-case-quote {
background: var(--lightest-grey);
padding: 20px;
border-radius: 8px;
font-family: 'Georgia', serif;
font-style: italic;
color: var(--dark-grey);
border: 1px solid var(--medium-grey);
margin: 25px 0 10px 0;
text-align: left;
line-height: 1.6;
}
.dark-mode .hus-case-quote {
background: var(--dark-grey);
color: var(--light-grey);
border-color: var(--medium-dark-grey);
}
.hus-case-quote i {
color: var(--pale-green-dark);
margin: 0 8px;
font-size: 16px;
}
.dark-mode .hus-case-quote i {
color: var(--pale-green);
}
.hus-case-attribution {
text-align: left;
font-style: italic;
font-size: 11px;
color: var(--dark-grey);
margin: 0px 30px 0px 10px;
font-weight: 500;
}
.dark-mode .hus-case-attribution {
color: var(--light-grey);
}
.hus-case-link {
text-align: center;
margin-top: 25px;
position: absolute;
top: -40px;
right: -40px;
}
.hus-case-link .btn {
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
}
.hus-case-link .btn i {
margin-right: 8px;
}
.process-runs-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 300px;
position: relative;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.process-runs-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: 12px;
border-radius: 5px;
border: 1px solid var(--medium-grey);
overflow: hidden;
}
.process-runs-table th,
.process-runs-table td {
padding: 8px;
text-align: left;
border: 1px solid var(--medium-grey);
}
.dark-mode .process-runs-table th,
.dark-mode .process-runs-table td {
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.process-runs-table th {
background-color: var(--light-grey);
font-weight: bold;
}
.dark-mode .process-runs-table th {
background-color: black;
}
.process-runs-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.process-runs-table tr:nth-child(odd) {
background-color: #fff;
}
.dark-mode .process-runs-table tr:nth-child(even),
.dark-mode .process-runs-table tr:nth-child(odd) {
background-color: var(--dark-grey);
}
.process-runs-table tr.active {
background-color: var(--pale-green) !important;
color: var(--dark-grey) !important;
}
.dark-mode .process-runs-table tr.active {
background-color: var(--pale-green-dark) !important;
color: var(--light-grey) !important;
}
.process-runs-table tr:hover {
background-color: var(--light-grey);
cursor: pointer;
}
.dark-mode .process-runs-table tr:hover {
background-color: var(--medium-dark-grey);
} 
.view-assistants .template-card-body {
padding: 20px 20px 60px 20px;
}
.sitemap-description {
color: var(--medium-dark-grey);
margin-bottom: 20px;
padding: 12px;
background: var(--lightest-grey);
border-radius: 8px;
border-left: 4px solid var(--pale-green-dark);
}
.dark-mode .sitemap-description {
background: var(--semi-dark-grey);
color: var(--light-grey);
}
.sitemap-url-option {
margin-bottom: 12px !important;
padding: 12px 16px !important;
background: var(--lightest-grey) !important;
border: 1px solid var(--medium-grey) !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
}
.sitemap-url-option:hover {
background: white !important;
border-color: var(--pale-green) !important;
}
.dark-mode .sitemap-url-option {
background: var(--dark-grey) !important;
border-color: var(--medium-dark-grey) !important;
}
.dark-mode .sitemap-url-option:hover {
background: var(--semi-dark-grey) !important;
border-color: var(--pale-green) !important;
}
.sitemap-url-option input[type="radio"]:checked + label {
font-weight: 600 !important;
color: var(--pale-green-dark) !important;
}
.dark-mode .sitemap-url-option input[type="radio"]:checked + label {
color: var(--pale-green) !important;
}
.sitemap-url-option label {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
font-size: 13px !important;
color: var(--dark-grey) !important;
word-break: break-all !important;
line-height: 1.4 !important;
margin-left: 8px !important;
cursor: pointer !important;
}
.dark-mode .sitemap-url-option label {
color: var(--light-grey) !important;
}
.trainingFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.trainingFiles:first-of-type {
margin-top: 10px;
}
.trainingFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .trainingFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .trainingFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.trainingFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trainingFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.trainingFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.trainingFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .trainingFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .trainingFiles .remove-file-btn:hover {
background: var(--error-red);
}
.file-uploader-section {
margin-top: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--medium-grey);
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}
.file-uploader-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .file-uploader-section {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .file-uploader-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.file-uploader-section label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .file-uploader-section label {
color: var(--light-grey);
}
.file-uploader-section input[type="file"] {
width: 100%;
padding: 0.75rem;
border: 2px dashed var(--medium-grey);
border-radius: 6px;
background: var(--lightest-grey);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.file-uploader-section input[type="file"]:hover {
border-color: var(--pale-green);
background: white;
}
.dark-mode .file-uploader-section input[type="file"] {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .file-uploader-section input[type="file"]:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.tempFiles {
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
}
.tempFiles:first-of-type {
margin-top: 10px;
}
.tempFiles:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .tempFiles {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .tempFiles:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.tempFiles .file-name {
flex: 1;
min-width: 0;
padding-right: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tempFiles .remove-file-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.tempFiles .remove-file-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.tempFiles .remove-file-btn i {
font-size: 14px;
}
.dark-mode .tempFiles .remove-file-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .tempFiles .remove-file-btn:hover {
background: var(--error-red);
}
.web-scraping-section {
margin-top: 2rem;
padding: 1.5rem;
border: 1px solid var(--medium-grey);
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}
.web-scraping-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .web-scraping-section {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .web-scraping-section:hover {
border-color: var(--pale-green);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.section-title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-grey);
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark-mode .section-title {
color: var(--light-grey);
}
.section-title i {
color: var(--pale-green-dark);
}
.dark-mode .section-title i {
color: var(--pale-green);
}
.section-description {
margin-bottom: 1.5rem;
color: var(--medium-dark-grey);
font-size: 0.9rem;
}
.dark-mode .section-description {
color: var(--medium-grey);
}
.scraping-mode-selector {
margin-bottom: 1.5rem;
}
.mode-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .mode-label {
color: var(--light-grey);
}
.mode-options {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.mode-option {
flex: 1;
min-width: 200px;
}
.mode-radio {
display: none;
}
.mode-option-label {
display: block;
padding: 1rem;
border: 2px solid var(--medium-grey);
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.mode-option-label:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.mode-radio:checked + .mode-option-label {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .mode-option-label {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .mode-option-label:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.dark-mode .mode-radio:checked + .mode-option-label {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.mode-option-label i {
font-size: 1.5rem;
color: var(--pale-green-dark);
margin-bottom: 0.5rem;
display: block;
}
.dark-mode .mode-option-label i {
color: var(--pale-green);
}
.mode-option-label span {
display: block;
font-weight: 600;
color: var(--dark-grey);
margin-bottom: 0.25rem;
}
.dark-mode .mode-option-label span {
color: var(--light-grey);
}
.mode-option-label small {
display: block;
color: var(--medium-dark-grey);
font-size: 0.75rem;
line-height: 1.3;
}
.dark-mode .mode-option-label small {
color: var(--medium-grey);
}
.url-input-section {
margin-bottom: 1.5rem;
}
.url-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-grey);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .url-label {
color: var(--light-grey);
}
.url-input-wrapper {
display: flex;
gap: 0.5rem;
}
.url-input {
flex: 1;
padding: 0.75rem;
border: 2px solid var(--medium-grey);
border-radius: 6px;
font-size: 1rem;
background: white;
color: var(--dark-grey);
transition: border-color 0.3s ease;
}
.url-input:focus {
outline: none;
border-color: var(--pale-green);
}
.dark-mode .url-input {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .url-input:focus {
border-color: var(--pale-green);
}
.scrape-button {
padding: 0.75rem 1.5rem;
background: var(--pale-green-dark);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.scrape-button:hover:not(.disabled) {
background: var(--pale-green-darker);
transform: translateY(-1px);
}
.scrape-button.disabled {
background: var(--medium-grey);
cursor: not-allowed;
transform: none;
}
.dark-mode .scrape-button {
background: var(--pale-green);
color: var(--dark-grey);
}
.dark-mode .scrape-button:hover:not(.disabled) {
background: var(--button-hover-green);
}
.dark-mode .scrape-button.disabled {
background: var(--medium-dark-grey);
color: var(--medium-grey);
}
.url-error {
margin-top: 0.5rem;
padding: 0.5rem;
background: var(--error-red-light);
color: var(--error-red-dark);
border-radius: 4px;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark-mode .url-error {
background: var(--error-red-dark);
color: var(--error-red-light);
}
.results-summary {
margin-bottom: 1.5rem;
padding: 0.75rem;
background: var(--lightest-grey);
color: var(--button-green);
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
border: 1px solid var(--button-green);
}
.dark-mode .results-summary {
background: var(--dark-grey);
color: var(--pale-green);
border-color: var(--pale-green);
}
.training-urls-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--medium-grey);
}
.dark-mode .training-urls-section {
border-top-color: var(--medium-dark-grey);
}
.training-urls-title {
margin: 0 0 1rem 0;
font-size: 1rem;
font-weight: 600;
color: var(--dark-grey);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-mode .training-urls-title {
color: var(--light-grey);
}
.training-urls-list {
margin-bottom: 1rem;
}
.training-url-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
margin-bottom: 0.5rem;
background: white;
border: 1px solid var(--medium-grey);
border-radius: 6px;
transition: all 0.3s ease;
}
.training-url-item:hover {
border-color: var(--pale-green);
background: var(--lightest-grey);
}
.dark-mode .training-url-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .training-url-item:hover {
border-color: var(--pale-green);
background: var(--semi-dark-grey);
}
.url-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.url-info i {
color: var(--pale-green-dark);
flex-shrink: 0;
}
.dark-mode .url-info i {
color: var(--pale-green);
}
.url-link {
color: var(--pale-green-dark);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.url-link:hover {
text-decoration: underline;
}
.dark-mode .url-link {
color: var(--pale-green);
}
.remove-url-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.remove-url-btn:hover {
background: var(--error-red-darker);
transform: scale(1.05);
}
.remove-url-btn i {
font-size: 14px;
}
.dark-mode .remove-url-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .remove-url-btn:hover {
background: var(--error-red);
}
.remove-all-urls-btn {
background: var(--error-red-dark);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.remove-all-urls-btn:hover {
background: var(--error-red-darker);
transform: translateY(-1px);
}
.remove-all-urls-btn i {
font-size: 16px;
}
.dark-mode .remove-all-urls-btn {
background: var(--error-red-light);
color: var(--dark-grey);
}
.dark-mode .remove-all-urls-btn:hover {
background: var(--error-red);
}
@media (max-width: 768px) {
.mode-options {
flex-direction: column;
}
.mode-option {
min-width: auto;
}
.url-input-wrapper {
flex-direction: column;
}
.scrape-button {
justify-content: center;
}
.training-url-item {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.url-info {
width: 100%;
}
.remove-url-btn {
align-self: flex-end;
}
} 
.webpages-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 300px;
position: relative;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.view-websites .data-table-container {
min-width: 1200px;
}
body.mobile .webpages-container {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 15px !important;
overflow: hidden !important;
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
body.mobile .webpages-container[style] {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container > * {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .webpages-container .data-table-container {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
display: block !important;
}
body.mobile .webpages-container .data-table-container[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container .mobile-cards-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
padding: 0 0 80px 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
display: block !important;
flex: none !important;
flex-basis: auto !important;
flex-grow: 0 !important;
flex-shrink: 1 !important;
position: relative !important;
}
body.mobile .webpages-container .mobile-cards-wrapper[style] {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
}
body.mobile .webpages-container .mobile-cards-wrapper > *,
body.mobile .webpages-container .data-table-container > * {
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
width: 100% !important;
}
body.mobile .webpages-container table,
body.mobile .webpages-container .data-table,
body.mobile .webpages-container .data-table-wrapper {
width: 100% !important;
max-width: calc(100vw - 30px) !important;
min-width: 0 !important;
table-layout: fixed !important;
box-sizing: border-box !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile .containerDiv:has(.webpages-container) {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body.mobile.view-websites .containerDiv {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
z-index: 0;
}
body.mobile .webpages-container .mobile-card {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 8px;
margin-bottom: 12px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: box-shadow 0.2s ease;
width: calc(100% - 2px) !important;
max-width: calc(100% - 2px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.mobile .webpages-container .mobile-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
body.mobile.dark-mode .webpages-container .mobile-card {
background: black;
border: 1px solid var(--dark-grey);
color: var(--light-grey);
}
.page-edit-container {
width: 100%;
height: 100%;
}
.page-edit-layout {
display: flex;
width: 100%;
gap: 20px;
}
.page-edit-content {
flex: 1;
min-width: 0;
}
.page-edit-navigation {
flex: 0 0 80px;
background-color: white;
color: black;
width: 80px;
height: fit-content;
min-height: 200px;
padding-top: 10px;
margin-left: 1px;
}
.dark-mode .page-edit-navigation {
background-color: black;
color: white;
}
.page-edit-navigation .nav-item {
color: black;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
height: fit-content;
padding: 10px 0;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
box-sizing: border-box;
}
.dark-mode .page-edit-navigation .nav-item {
color: white;
}
.page-edit-navigation .nav-item.active {
color: var(--pale-green-dark);
}
.dark-mode .page-edit-navigation .nav-item.active {
color: var(--pale-green);
}
.page-edit-navigation .nav-item:hover {
color: black;
}
.dark-mode .page-edit-navigation .nav-item:hover {
color: white;
}
.page-edit-navigation .nav-item i {
display: block;
font-size: 20px;
margin-bottom: 4px;
line-height: 1;
}
.page-edit-navigation .nav-item span {
display: block;
font-size: 10px;
text-align: center;
font-weight: normal;
line-height: 1.2;
}
.page-section-full {
width: 100%;
margin-bottom: 20px;
border: 1px solid var(--medium-grey);
border-radius: 0px;
background: var(--white);
overflow: hidden;
}
.dark-mode .page-section-full {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
}
.section-header-full {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 15px;
background: var(--light-grey);
border-bottom: 1px solid var(--medium-grey);
}
.dark-mode .section-header-full {
background: var(--dark-grey);
border-bottom-color: var(--medium-dark-grey);
}
.section-header-full h4 {
margin: 0;
font-size: 12px;
font-weight: 500;
}
.element-count {
font-size: 12px;
color: var(--medium-grey);
font-weight: normal;
}
.dark-mode .element-count {
color: var(--medium-dark-grey);
}
.section-content-full {
padding: 0;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.page-body-view .page-section-full:first-child .section-content-full,
.page-body-view .page-section-full:last-child .section-content-full {
min-height: 100px;
}
.page-body-view .page-section-full:nth-child(2) .section-content-full {
min-height: 300px;
}
.elements-list {
padding: 20px;
}
.element-item {
margin-bottom: 15px;
padding: 10px;
background: var(--lightest-grey);
border-radius: 4px;
border: 1px solid var(--medium-grey);
}
.dark-mode .element-item {
background: var(--dark-grey);
border-color: var(--medium-dark-grey);
}
.element-preview {
font-family: monospace;
font-size: 12px;
word-break: break-all;
}
.page-metadata {
padding: 20px;
}
.metadata-row {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.metadata-row label {
font-weight: 600;
margin-bottom: 5px;
color: var(--dark-grey);
}
.dark-mode .metadata-row label {
color: var(--light-grey);
}
.form-input,
.form-select {
padding: 8px 12px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
background: var(--white);
}
.dark-mode .form-input,
.dark-mode .form-select {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--pale-green-dark);
}
.dark-mode .form-input:focus,
.dark-mode .form-select:focus {
border-color: var(--pale-green);
}
.element-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
padding: 0 20px;
}
.element-actions .btn {
padding: 8px 16px;
font-size: 12px;
}
.element-editor {
padding: 20px;
border-top: 1px solid var(--medium-grey);
background: var(--lightest-grey);
}
.dark-mode .element-editor {
border-top-color: var(--medium-dark-grey);
background: var(--dark-grey);
}
.element-editor-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.element-editor-form label {
font-weight: 600;
color: var(--dark-grey);
margin-bottom: 5px;
}
.dark-mode .element-editor-form label {
color: var(--light-grey);
}
.element-editor-form textarea {
padding: 12px;
border: 1px solid var(--medium-grey);
border-radius: 4px;
font-size: 14px;
font-family: monospace;
background: var(--white);
min-height: 120px;
resize: vertical;
}
.dark-mode .element-editor-form textarea {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.element-editor-form textarea:focus {
outline: none;
border-color: var(--pale-green-dark);
}
.dark-mode .element-editor-form textarea:focus {
border-color: var(--pale-green);
}
.element-editor-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.element-item-with-actions {
position: relative;
}
.element-item-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.element-item-actions button {
background: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 3px;
padding: 4px 8px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s ease;
}
.dark-mode .element-item-actions button {
background: var(--darkest-grey);
border-color: var(--medium-dark-grey);
color: var(--light-grey);
}
.element-item-actions button:hover {
background: var(--light-grey);
}
.dark-mode .element-item-actions button:hover {
background: var(--dark-grey);
}
@media (max-width: 768px) {
.page-edit-layout {
flex-direction: column;
}
.page-edit-navigation {
flex: 0 0 60px;
width: 100%;
height: 60px;
min-height: 60px;
padding: 5px 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.page-edit-navigation .nav-item {
flex: 1;
padding: 5px 0;
}
.page-edit-navigation .nav-item span {
font-size: 9px;
}
.page-edit-navigation .nav-item i {
font-size: 14px;
}
}
.published-page-container ul {
margin: 16px 0 !important;
padding-left: 20px !important;
list-style: disc !important;
}
.published-page-container ol {
margin: 16px 0 !important;
padding-left: 20px !important;
list-style: decimal !important;
}
.published-page-container ul li,
.published-page-container ol li {
margin: 4px 0 !important;
padding-left: 4px !important;
list-style: inherit !important;
}
.published-page-container ul li::marker,
.published-page-container ol li::marker {
color: var(--dark-grey) !important;
}
.dark-mode .published-page-container ul li::marker,
.dark-mode .published-page-container ol li::marker {
color: var(--light-grey) !important;
}
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: var(--dark-grey);
width: 100%;
min-height: 100vh;
}
.dark-mode #app {
color: var(--light-grey);
}
a {
text-decoration: none;
color: var(--pale-green-dark);
cursor: pointer;
}
a:hover {
color: var(--pale-green-darker);
}
.dark-mode a {
color: var(--pale-green);
}
.dark-mode a:hover {
color: var(--pale-green);
}
.window-height {
height: 100vh;
}
.prompt {
min-height: 120px;
}
.overflow {
height: calc(100vh - 200px);
overflow: auto;
}
.right {
position: absolute;
right: 10px;
}
.max-width-95 {
max-width: 95%;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
.hidden {
display: none;
position: absolute;
}
.v-spinner {
position: absolute;
left: calc(50% - 21px);
top: 50%;
}
* {
position: relative;
text-align: left;
}
html.dark-mode {
background-color: black !important;
}
body {
margin: 0;
padding: 0;
gap: var(--spacing-md);
background-color: var(--color-neutral-100) !important;
min-height: unset !important;
font-family: var(--font-family-base);
}
.dark-mode {
background-color: var(--color-neutral-500) !important;
background: linear-gradient(to bottom, #000000, #2a2a2a);
}
.marginBottom10px {
margin-bottom: var(--spacing-md) !important;
display: inline-block;
}
.mainTitle {
display: inline-block;
margin: var(--spacing-xl) 0;
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
.btn-stripe-portal {
background-color: #635bff;
color: white;
border: 1px solid #635bff;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 14px;
transition: background-color 0.2s ease;
}
.btn-stripe-portal:hover {
background-color: #5a52e8;
color: white;
text-decoration: none;
}
.btn-stripe-portal i {
margin-right: 8px;
}
.pricing-tab-disabled {
position: relative;
cursor: not-allowed;
}
.pricing-tab-disabled .tab-component {
opacity: 0.6;
pointer-events: none;
}
.pricing-tab-disabled .tab-component .tab {
cursor: not-allowed !important;
opacity: 0.7;
}
.pricing-tab-disabled::after {
content: "🔒";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
font-size: 14px;
color: #6c757d;
}
.website-error-message {
color: var(--error-red);
background-color: var(--error-red-light);
border: 1px solid var(--error-red);
border-radius: var(--border-radius-sm);
padding: 8px 12px;
margin-top: 8px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.website-error-message i {
flex-shrink: 0;
}
[data-theme="dark"] .website-error-message,
.dark-mode .website-error-message {
color: var(--error-red-light);
background-color: var(--error-red-darker);
border-color: var(--error-red-dark);
}
body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; }
.numbered-paragraph { margin: 20px 0; }
.paragraph-number { 
background: #007bff; 
color: white; 
padding: 4px 8px; 
border-radius: 4px; 
font-size: 12px; 
margin-right: 10px; 
}
.invitedPage {
min-height: 80vh;
}
.error-message {
color: var(--error-red-dark);
text-align: center;
padding: 1rem;
border: 1px solid var(--error-red-dark);
border-radius: 4px;
margin: 1rem 0;
}
.dark-mode .error-message {
color: var(--error-red-light);
border: 1px solid var(--error-red-light);
}
h2 {
margin-bottom: 1.5rem;
text-align: center;
}
p {
text-align: center;
margin: 0.5rem 0;
line-height: 1.5;
}
.btn-primary {
margin-top: 1rem;
padding: 0.5rem 2rem;
font-size: 1.1rem;
}
.coding-helper-buttons {
display: flex;
gap: 8px;
margin-bottom: 4px;
}
.debug-toggle-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
z-index: 10000;
}
.debug-toggle-btn {
background: rgba(0, 0, 0, 0.8);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.debug-toggle-btn i {
font-size: 12px;
}
.debug-toggle-btn:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.1);
}
.debug-toggle-btn.active {
background: #d63384;
}
.debug-panel {
position: fixed;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.98);
border: 2px solid #333;
border-radius: 8px;
padding: 0;
font-size: 11px;
color: black;
z-index: 9999;
max-width: 400px;
max-height: 85vh;
overflow-y: auto;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.debug-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #d63384;
color: white;
padding: 8px 12px;
font-weight: bold;
font-size: 12px;
border-radius: 6px 6px 0 0;
}
.debug-close {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.debug-close:hover {
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
.debug-section {
margin: 8px;
padding: 6px;
background: #f8f9fa;
border-radius: 4px;
}
.debug-section-title {
font-weight: bold;
margin-bottom: 4px;
font-size: 10px;
}
.core-state {
border-left: 3px solid #007bff;
}
.core-state .debug-section-title {
color: #007bff;
}
.shown-step {
border-left: 3px solid #28a745;
}
.shown-step .debug-section-title {
color: #28a745;
}
.editor-config {
border-left: 3px solid #fd7e14;
}
.editor-config .debug-section-title {
color: #fd7e14;
}
.template-steps {
border-left: 3px solid #6f42c1;
}
.template-steps .debug-section-title {
color: #6f42c1;
}
.run-steps {
border-left: 3px solid #dc3545;
}
.run-steps .debug-section-title {
color: #dc3545;
}
.circle-states {
border-left: 3px solid #20c997;
}
.circle-states .debug-section-title {
color: #20c997;
}
.system-state {
border-left: 3px solid #e83e8c;
}
.system-state .debug-section-title {
color: #e83e8c;
}
.display-steps {
border-left: 3px solid #795548;
}
.display-steps .debug-section-title {
color: #795548;
}
.debug-info {
border-left: 3px solid #ff5722;
}
.debug-info .debug-section-title {
color: #ff5722;
}
.debug-item {
margin: 1px 0;
font-size: 10px;
}
.debug-step {
font-size: 9px;
margin: 1px 0;
padding: 1px 2px;
background: white;
border-radius: 2px;
}
.value {
color: #d63384;
font-weight: bold;
}
.step-index {
color: #666;
}
.step-name {
color: #007bff;
}
.step-type, .step-status {
color: #28a745;
}
.version-count {
color: #6f42c1;
}
.processing-indicator {
color: #dc3545;
font-weight: bold;
}
.highlighted-indicator {
color: #fd7e14;
font-weight: bold;
}
.shown-indicator {
color: #fd7e14;
font-weight: bold;
}
.state-active {
color: #28a745;
font-weight: bold;
}
.state-not-started {
color: #6c757d;
}
.state-completed {
color: #007bff;
}
.step-label {
color: #333;
}
.debug-panel::-webkit-scrollbar {
width: 6px;
}
.debug-panel::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.debug-panel::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.debug-panel::-webkit-scrollbar-thumb:hover {
background: #555;
}
.input-tools-disabled {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.input-tools-disabled::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
cursor: not-allowed;
z-index: 10;
pointer-events: all;
margin: 15px 0;
}
.input-tools-disabled * {
cursor: not-allowed !important;
}
.input-tools-disabled input,
.input-tools-disabled textarea,
.input-tools-disabled button {
pointer-events: none;
opacity: 0.7;
}
.website-url-input-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.website-url-input-wrapper {
display: flex;
gap: 8px;
align-items: center;
}
.website-url-input-wrapper input {
flex: 1;
}
.website-error-message {
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
margin-top: 5px;
border-radius: var(--border-radius-sm);
color: var(--error-red);
background-color: var(--error-red-light);
border: 1px solid var(--error-red);
opacity: 0.9;
}
[data-theme="dark"] .website-error-message,
.dark-mode .website-error-message {
color: var(--error-red-light);
background-color: var(--error-red-darker);
border-color: var(--error-red-dark);
opacity: 0.85;
}
.remove-file-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-control:disabled {
background-color: #f8f9fa;
opacity: 0.8;
}
.clickable-file-name,
.clickable-url-name {
cursor: pointer;
color: var(--primary-blue);
text-decoration: underline;
transition: color 0.2s ease;
}
.clickable-file-name:hover,
.clickable-url-name:hover {
color: var(--primary-blue-dark);
text-decoration: underline;
}
.clickable-file-name i,
.clickable-url-name i {
color: var(--primary-blue);
transition: color 0.2s ease;
}
.clickable-file-name:hover i,
.clickable-url-name:hover i {
color: var(--primary-blue-dark);
}
[data-theme="dark"] .clickable-file-name,
[data-theme="dark"] .clickable-url-name,
.dark-mode .clickable-file-name,
.dark-mode .clickable-url-name {
color: var(--primary-blue-light);
}
[data-theme="dark"] .clickable-file-name:hover,
[data-theme="dark"] .clickable-url-name:hover,
.dark-mode .clickable-file-name:hover,
.dark-mode .clickable-url-name:hover {
color: var(--primary-blue-lighter);
}
[data-theme="dark"] .clickable-file-name i,
[data-theme="dark"] .clickable-url-name i,
.dark-mode .clickable-file-name i,
.dark-mode .clickable-url-name i {
color: var(--primary-blue-light);
}
[data-theme="dark"] .clickable-file-name:hover i,
[data-theme="dark"] .clickable-url-name:hover i,
.dark-mode .clickable-file-name:hover i,
.dark-mode .clickable-url-name:hover i {
color: var(--primary-blue-lighter);
}
.handle-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.MainTextEditor {
display: flex;
flex-direction: column;
}
.cms-container {
max-width: 1200px;
margin: 0 auto;
}
.slideshow-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.blog-container {
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.social-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.mindmap-container {
width: 100%;
height: 100vh;
overflow: auto;
}
.process-run-webpage {
position: relative;
}
:deep(.empty-cell-content) {
display: inline-block;
min-width: 40px;
text-align: center;
}
.published-page-container {
min-height: 100vh;
background: #ffffff;
margin-left: 83px; 
width: calc(100vw - 83px); 
}
.dark-mode .published-page-container {
background: #1a1a1a;
color: #ffffff;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 50vh;
padding: 2rem;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
padding: 2rem;
}
.error-content {
text-align: center;
max-width: 500px;
}
.error-icon {
font-size: 4rem;
color: #dc3545;
margin-bottom: 1rem;
}
.error-details {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
text-align: left;
}
.dark-mode .error-details {
background: #2a2a2a;
color: #ffffff;
}
.error-details p {
margin: 0.5rem 0;
font-size: 0.9rem;
}
.page-content {
width: 100%;
}
.main-content {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.page-main {
min-height: 60vh;
padding: 2rem 0;
}
.page-title {
color: #212529;
margin-bottom: 2rem;
font-size: 2.5rem;
font-weight: 600;
text-align: left;
}
.dark-mode .page-title {
color: #ffffff;
}
.page-text {
font-size: 1.1rem;
line-height: 1.6;
color: #333333;
}
.dark-mode .page-text {
color: #e0e0e0;
}
.page-text h2 {
color: #212529;
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.8rem;
font-weight: 500;
}
.dark-mode .page-text h2 {
color: #ffffff;
}
.page-text ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.page-text li {
margin-bottom: 0.5rem;
}
@media (max-width: 950px) {
.published-page-container {
margin-left: 0;
width: 100vw;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}
.main-content {
padding: 1rem;
}
.page-text {
font-size: 1rem;
}
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover {
background: #0056b3;
transform: translateY(-1px);
}
.subscription-manager {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.current-subscriptions {
background: var(--color-gray-50);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.subscription-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: white;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.plan-info {
display: flex;
gap: 1rem;
align-items: center;
}
.plan-name {
font-weight: 600;
}
.status {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
}
.status.active {
background: var(--color-green-100);
color: var(--color-green-800);
}
.cancel-btn {
background: var(--color-red-500);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
.cancel-btn:hover {
background: var(--color-red-600);
}
.currency-selector,
.billing-period {
margin-bottom: 1rem;
}
.currency-selector label,
.billing-period label {
margin-right: 0.5rem;
font-weight: 500;
}
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.plan-card {
background: white;
border: 2px solid var(--color-gray-200);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.plan-card:hover {
border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.plan-card h4 {
margin: 0 0 0.5rem 0;
color: var(--color-gray-900);
}
.price {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-primary);
margin: 0.5rem 0;
}
.description {
color: var(--color-gray-600);
margin: 1rem 0;
}
.quantity-selector {
margin-top: 1rem;
}
.quantity-selector label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}
.quantity-selector input {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--color-gray-300);
border-radius: 4px;
}
.quantity-selector small {
display: block;
margin-top: 0.25rem;
color: var(--color-gray-500);
}
.total-preview {
background: var(--color-primary-50);
border: 2px solid var(--color-primary-200);
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
}
.total-preview h4 {
margin: 0 0 1rem 0;
}
.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.subscribe-btn,
.portal-btn {
padding: 0.75rem 2rem;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.subscribe-btn {
background: var(--color-primary);
color: white;
}
.subscribe-btn:hover:not(:disabled) {
background: var(--color-primary-600);
}
.subscribe-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.portal-btn {
background: var(--color-gray-600);
color: white;
}
.portal-btn:hover {
background: var(--color-gray-700);
}
.loading {
text-align: center;
padding: 2rem;
color: var(--color-gray-600);
}
.error-message {
background: var(--color-red-50);
border: 1px solid var(--color-red-200);
color: var(--color-red-800);
padding: 1rem;
border-radius: 4px;
margin-top: 1rem;
}
.list-footer button {
margin-right: 10px;
}
.list-footer button:last-child {
margin-right: 0;
}
.orgIntegrationSettingTabs.flexReverse .tab-header {
flex-direction: row-reverse;
}
.auth-loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.auth-loading-container {
text-align: center;
color: white;
max-width: 400px;
padding: 2rem;
}
.auth-loading-logo {
margin-bottom: 2rem;
}
.pulse-logo {
font-size: 4rem;
animation: pulse 2s ease-in-out infinite;
display: inline-block;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.auth-loading-content h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
font-weight: 300;
}
.auth-loading-content p {
font-size: 1rem;
opacity: 0.8;
margin-bottom: 2rem;
}
.auth-loading-progress {
width: 100%;
}
.progress-bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}
.progress-fill {
height: 100%;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-steps {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.progress-step {
font-size: 0.9rem;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.progress-step.active {
opacity: 0.8;
}
.progress-step.completed {
opacity: 1;
}
@media (max-width: 768px) {
.auth-loading-container {
padding: 1rem;
}
.pulse-logo {
font-size: 3rem;
}
.auth-loading-content h2 {
font-size: 1.5rem;
}
}
.data-table td {
cursor: pointer;
}
.data-table td:hover {
background-color: var(--light-grey);
}
.dark-mode .data-table td:hover {
background-color: var(--dark-grey);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 0;
gap: 10px;
}
.show-more-btn {
min-width: 100px;
white-space: nowrap;
}
.empty-cell {
min-width: 100px !important;
max-width: 100px !important;
width: 100px !important;
text-align: center;
padding: 8px 4px !important;
}
.guest-usage-status {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
background: white;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
min-width: 200px;
}
.usage-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
}
.usage-indicator i {
color: #6b7280;
}
.usage-text {
font-weight: 500;
color: #374151;
}
.usage-bar {
flex: 1;
height: 4px;
background-color: #e5e7eb;
border-radius: 2px;
overflow: hidden;
margin-left: 8px;
}
.usage-bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease, background-color 0.3s ease;
}
.usage-warning {
border-left: 3px solid #f59e0b;
}
.usage-warning .usage-text {
color: #92400e;
}
.usage-danger {
border-left: 3px solid #ef4444;
}
.usage-danger .usage-text {
color: #991b1b;
}
.dark .guest-usage-status {
background: #1f2937;
border-color: #374151;
}
.dark .usage-indicator i {
color: #9ca3af;
}
.dark .usage-text {
color: #d1d5db;
}
.dark .usage-warning .usage-text {
color: #fbbf24;
}
.dark .usage-danger .usage-text {
color: #f87171;
}
.dark .usage-bar {
background-color: #374151;
}
@media (max-width: 768px) {
.guest-usage-status {
position: relative;
top: auto;
right: auto;
margin: 10px;
width: calc(100% - 20px);
}
}
.logger-example {
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
}
button {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
background: #f5f5f5;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #e0e0e0;
}
.note {
margin-top: 20px;
padding: 15px;
background: #f0f0f0;
border-left: 4px solid #2196f3;
font-size: 14px;
color: #666;
}
.connecting-assistant {
animation: pulsate 1.5s infinite;
color: var(--medium-grey);
font-style: italic;
}
.dark-mode .connecting-assistant {
color: var(--light-grey); 
}
@keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.is-invalid {
border-color: #dc3545;
}
.invalid-feedback {
color: #dc3545;
font-size: 0.875em;
}
.draggable-list-container {
padding: 10px;
background: var(--light-grey);
border-radius: 4px;
}
.draggable-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.draggable-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: white;
border: 1px solid var(--medium-dark-grey);
border-radius: 4px;
cursor: move;
transition: all 0.2s ease;
user-select: none;
}
.draggable-item:hover {
background: var(--light-grey);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.draggable-item i {
color: var(--medium-dark-grey);
font-size: 14px;
}
.draggable-item:hover i {
color: var(--dark-grey);
}
.item-name {
font-weight: 500;
flex: 1;
}
.item-label {
color: var(--medium-dark-grey);
}
.dark-mode .draggable-list-container {
background: var(--dark-grey);
}
.dark-mode .draggable-item {
background: var(--darkest-grey);
border-color: var(--dark-grey);
color: white;
}
.dark-mode .draggable-item:hover {
background: var(--dark-grey);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dark-mode .draggable-item i {
color: var(--light-grey);
}
.dark-mode .draggable-item:hover i {
color: white;
}
.dark-mode .item-label {
color: var(--light-grey);
}
.modal-header-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
}
.modal-title {
flex: 0 1 auto;
margin: 0;
font-size: 1.5rem;
}
.pricing-modal :deep(.tab-container) {
border: none;
margin-left: auto;
}
.pricing-modal :deep(.tab-header) {
display: flex;
background-color: var(--light-grey);
}
.pricing-modal :deep(.tab) {
padding: 5px 10px;
cursor: pointer;
flex: 1 1;
text-align: center;
transition: background-color 0.3s;
font-size: 12px;
color: #000;
background-color: var(--light-grey);
display: inline-block;
text-transform: uppercase;
white-space: nowrap;
border-bottom: 3px solid transparent;
border-right: none;
}
.pricing-modal :deep(.tab:last-child) {
border-right: none;
}
.pricing-modal :deep(.active-tab) {
background-color: white;
border-bottom: 3px solid var(--pale-green);
}
.dark-mode .pricing-modal :deep(.tab) {
background-color: var(--dark-grey);
color: var(--light-grey);
}
.dark-mode .pricing-modal :deep(.active-tab) {
background-color: black;
border-bottom: 3px solid var(--pale-green);
}
.dynamic-array-manager {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 15px;
background: var(--bg-secondary);
}
.dynamic-array-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
padding: 12px;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
}
.dynamic-array-item:last-child {
margin-bottom: 0;
}
.dynamic-array-item.simple-text {
align-items: center;
padding: 8px 12px;
}
.dynamic-array-item.simple-text .form-control {
flex: 1;
margin: 0;
}
.dynamic-array-item.complex .suggestion-inputs {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.suggestion-title {
font-size: 14px;
font-weight: 500;
}
.suggestion-prompt {
font-size: 13px;
resize: vertical;
min-height: 50px;
}
.remove-item-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.add-item-btn {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.max-items-notice {
margin-top: 10px;
padding: 8px 12px;
background: var(--warning-bg);
color: var(--warning-text);
border: 1px solid var(--warning-border);
border-radius: var(--border-radius-sm);
font-size: 13px;
}
.prompt-suggestions-manager {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 15px;
background: var(--bg-secondary);
}
.suggestion-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
padding: 12px;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
}
.remove-suggestion-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.add-suggestion-btn {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.max-suggestions-notice {
margin-top: 10px;
padding: 8px 12px;
background: var(--warning-bg);
color: var(--warning-text);
border: 1px solid var(--warning-border);
border-radius: var(--border-radius-sm);
font-size: 13px;
}
[data-theme="dark"] .prompt-suggestions-manager,
.dark-mode .prompt-suggestions-manager {
background: var(--bg-secondary-dark);
border-color: var(--border-dark);
}
[data-theme="dark"] .suggestion-item,
.dark-mode .suggestion-item {
background: var(--bg-dark);
border-color: var(--border-dark);
}
[data-theme="dark"] .max-suggestions-notice,
.dark-mode .max-suggestions-notice {
background: var(--warning-bg-dark);
color: var(--warning-text-dark);
border-color: var(--warning-border-dark);
}
.expandable-textarea-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.expand-icon {
cursor: pointer;
padding: 5px;
border-radius: 3px;
transition: all 0.2s ease;
color: var(--medium-grey);
font-size: 14px;
margin-left: 10px;
}
.expand-icon:hover {
background-color: var(--light-grey);
color: var(--dark-grey);
}
.dark-mode .expand-icon {
color: var(--light-grey);
}
.dark-mode .expand-icon:hover {
background-color: var(--dark-grey);
color: white;
}
.expanded-textarea {
min-height: 400px !important;
resize: vertical;
}
.hidden-field {
display: none !important;
}
.expanded-field {
margin-bottom: 20px;
}
.expanded-field .expanded-textarea {
width: 100%;
max-width: 100%;
}
.pricing-modal {
display: flex;
flex-direction: column;
gap: 0;
}
.pricing-instructions {
font-size: 1rem;
color: var(--dark-grey);
line-height: 1.5;
text-align: center;
font-style: italic;
margin-top: 0.5rem;
}
.pricing-instructions-top {
font-style: normal;
color: var(--primary-color);
cursor: pointer;
font-weight: 500;
}
.pricing-instructions-top:hover {
text-decoration: underline;
}
.dark-mode .pricing-instructions {
color: var(--light-grey);
}
.dark-mode .pricing-instructions-top {
color: var(--primary-color);
}
.tab-container {
margin-bottom: 1rem;
}
.btn-simple-pricing {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
width: 150px;
min-height: 48px;
}
.btn-start-plan {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.5rem;
border-radius: 8px;
background: #fff;
border: 1px solid var(--medium-grey);
transition: all 0.2s ease-in-out;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: var(--dark-grey);
width: 150px;
height: 48px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
}
.btn-start-plan:hover {
background: var(--lightest-grey);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.btn-start-plan.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.btn-start-plan:focus {
outline: none;
box-shadow: none;
}
.btn-simple-pricing .count-value {
font-weight: 700;
color: var(--button-green);
min-width: 32px;
text-align: left;
font-size: 12px;
}
.dark-mode .btn-start-plan {
background: var(--dark-grey);
border: 1px solid var(--medium-dark-grey);
color: var(--light-grey);
}
.dark-mode .btn-start-plan:hover {
background: var(--semi-dark-grey);
}
.dark-mode .btn-start-plan.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.dark-mode .btn-simple-pricing .count-value {
color: var(--pale-green);
}
.subscription-form-modal {
max-width: 100%;
padding: 0;
}
.subscription-form-modal .subscription-summary {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid #e9ecef;
}
.subscription-form-modal .plan-breakdown {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.subscription-form-modal .plan-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: white;
border-radius: 6px;
border: 1px solid #e9ecef;
}
.subscription-form-modal .plan-name {
font-weight: 600;
color: #495057;
min-width: 80px;
}
.subscription-form-modal .plan-details {
color: #6c757d;
font-size: 14px;
flex-grow: 1;
text-align: center;
}
.subscription-form-modal .plan-price {
font-weight: 600;
color: #28a745;
font-size: 16px;
}
.subscription-form-modal .billing-cycle-section {
margin: 20px 0;
}
.subscription-form-modal .billing-options {
display: flex;
gap: 15px;
margin-top: 10px;
}
.subscription-form-modal .billing-option {
flex: 1;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
}
.subscription-form-modal .billing-option.active {
border-color: #007bff;
background: #f0f8ff;
}
.subscription-form-modal .billing-option input[type="radio"] {
margin: 0;
}
.subscription-form-modal .billing-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.subscription-form-modal .billing-label {
font-weight: 600;
color: #495057;
}
.subscription-form-modal .billing-price {
color: #28a745;
font-weight: 500;
}
.subscription-form-modal .billing-savings {
color: #007bff;
font-size: 12px;
font-weight: 500;
}
.subscription-form-modal .total-section {
border-top: 2px solid #e9ecef;
padding-top: 15px;
margin-top: 15px;
}
.subscription-form-modal .total-line {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.subscription-form-modal .total-line.subtotal {
color: #6c757d;
}
.subscription-form-modal .total-line.tax {
color: #6c757d;
}
.subscription-form-modal .total-line.grand-total {
border-top: 1px solid #e9ecef;
padding-top: 8px;
margin-top: 8px;
font-weight: 600;
font-size: 18px;
}
.subscription-form-modal .total-label {
font-weight: 500;
color: #495057;
}
.subscription-form-modal .total-amount {
font-weight: 600;
color: #28a745;
font-size: 16px;
}
.subscription-form-modal .grand-total .total-amount {
font-size: 20px;
color: #007bff;
}
.subscription-form-modal .next-billing {
text-align: center;
margin-top: 10px;
color: #6c757d;
}
.subscription-form-modal .billing-info-section,
.subscription-form-modal .payment-method-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #e9ecef;
}
.subscription-form-modal .form-group {
margin-bottom: 15px;
}
.subscription-form-modal .form-row {
display: flex;
gap: 15px;
}
.subscription-form-modal .form-row .form-group {
flex: 1;
}
.subscription-form-modal .form-label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #495057;
}
.subscription-form-modal .stripe-input {
width: 100%;
border: 2px solid #e9ecef;
border-radius: 6px;
padding: 12px;
font-size: 16px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.subscription-form-modal .stripe-input:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
.subscription-form-modal .payment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.subscription-form-modal .secure-badge {
display: flex;
align-items: center;
gap: 8px;
}
.subscription-form-modal .card-input-wrapper {
position: relative;
}
.subscription-form-modal .card-icons {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 8px;
}
.subscription-form-modal .card-icons i {
font-size: 20px;
color: #6c757d;
}
.subscription-form-modal .card-number {
padding-right: 100px;
}
.subscription-form-modal .checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
}
.subscription-form-modal .checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
line-height: 1.5;
margin-bottom: 0;
}
.subscription-form-modal .checkbox-label input[type="checkbox"] {
margin: 0;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.subscription-form-modal .checkmark {
display: none;
}
.subscription-form-modal .terms-section {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #e9ecef;
}
.subscription-form-modal .terms-section a {
color: #007bff;
text-decoration: none;
}
.subscription-form-modal .terms-section a:hover {
text-decoration: underline;
}
.subscription-form-modal .mockup-notice {
margin-top: 20px;
}
.subscription-form-modal .alert {
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
padding: 15px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 10px;
}
.subscription-form-modal .alert-warning {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
}
.subscription-form-modal .alert i {
flex-shrink: 0;
}
@media (max-width: 768px) {
.subscription-form-modal .plan-item {
flex-direction: column;
text-align: center;
gap: 8px;
}
.subscription-form-modal .plan-details {
text-align: center;
}
.subscription-form-modal .form-row {
flex-direction: column;
gap: 10px;
}
.subscription-form-modal .payment-header {
flex-direction: column;
gap: 10px;
text-align: center;
}
.subscription-form-modal .billing-options {
flex-direction: column;
gap: 10px;
}
.subscription-form-modal .card-number {
padding-right: 12px;
}
.subscription-form-modal .card-icons {
position: static;
transform: none;
justify-content: center;
margin-top: 10px;
}
}
@media (max-width: 480px) {
.subscription-form-modal .billing-info-section,
.subscription-form-modal .payment-method-section {
padding: 15px;
}
.subscription-form-modal .subscription-summary {
padding: 15px;
}
}
.switch-container {
display: flex;
align-items: center;
}
.switch-label {
margin: 0 10px;
font-size: 14px;
}
.switch {
width: 50px;
height: 25px;
background-color: #ccc;
border-radius: 25px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}
.switch--on {
background-color: #4caf50;
}
.switch__toggle {
width: 23px;
height: 23px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 1px;
left: 1px;
transition: left 0.3s;
}
.switch--on .switch__toggle {
left: 26px;
}
.tab-container {
border: 1px solid var(--dark-grey);
border-radius: 8px;
overflow: hidden;
}
.page-navigation-buttons .tab-header {
flex-wrap: wrap;
gap: 5px;
background-color: transparent !important;
}
.page-navigation-buttons .tab {
flex: 1 0 calc(20% - 5px);
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
}
.tab-header {
display: flex;
background-color: var(--light-grey); 
}
.tab {
padding: 5px 10px;
cursor: pointer;
flex: 1 1;
text-align: center;
transition: background-color 0.3s;
font-size: 12px;
color: #000; 
border-right: 1px solid var(--light-grey); 
background-color: var(--light-grey);
display: inline-block; 
text-transform: uppercase;
white-space: nowrap;
border-bottom: 3px solid transparent;
}
.tab:last-child {
border-right: none; 
}
.active-tab {
background-color: white; 
border-bottom: 3px solid var(--pale-green);
}
.tab-content {
padding: 10px;
}
.dark-mode {
background-color: var(--dark-grey); 
color: #fff;
}
.dark-mode .tab-header {
background-color: var(--dark-grey); 
}
.dark-mode .tab {
background-color: var(--dark-grey); 
border-right: 1px solid black; 
color: var(--light-grey);
}
.dark-mode .tab:last-child {
border-right: none; 
}
.dark-mode .active-tab {
background-color: black; 
border-bottom: 2px solid var(--pale-green);
}
.tiptap-comment-handler {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1001;
}
.comment-indicators-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1001; 
overflow: visible;
}
.comment-indicator {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
font-size: 12px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.comment-indicator:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.comment-indicator.comment-active {
background-color: #ffc107;
color: #212529;
}
.comment-indicator.comment-resolved {
background-color: #28a745;
color: white;
}
.comment-indicator.comment-orphaned {
background-color: #dc3545;
color: white;
animation: pulse 2s infinite;
}
.comment-indicator .fa-comment {
font-size: 10px;
}
.comment-count {
position: absolute;
top: -8px;
right: -8px;
background: #007bff;
color: white;
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.published-content {
margin-left: 83px; 
margin-top: 54px; 
padding: 20px;
min-height: calc(100vh - 54px);
}
@media (max-width: 750px) {
.published-content {
margin-left: 0;
margin-top: 0;
margin-bottom: 70px; 
padding: 10px;
}
}
.published-page-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--dark-grey);
margin-bottom: 1rem;
line-height: 1.2;
font-family: var(--font-family-title);
}
.dark-mode .published-page-title {
color: var(--light-grey);
}
.back-to-app-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--pale-green-dark);
text-decoration: none;
padding: 0.75rem 1.5rem;
border: 2px solid var(--pale-green-dark);
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
margin: 1rem 0;
}
.back-to-app-link:hover {
background-color: var(--pale-green-dark);
color: white;
text-decoration: none;
transform: translateY(-2px);
}
.dark-mode .back-to-app-link {
color: var(--pale-green);
border-color: var(--pale-green);
}
.dark-mode .back-to-app-link:hover {
background-color: var(--pale-green);
color: var(--dark-grey);
}