@charset "UTF-8";
/**
 * @fileoverview CSS Reset and Base Styles
 * 
 * This file provides fundamental CSS reset and normalization styles for the Perspectives application.
 * It establishes consistent baseline styles across different browsers and devices.
 * 
 * Used by:
 * - ALL Pug templates (imported via perspectives.scss in source/templates/layouts/perspectives.pug)
 * - Affects every page and component in the application
 * 
 * Key Features:
 * - CSS reset for consistent cross-browser rendering
 * - Base typography and element normalization
 * - Foundation styles for all UI components
 * 
 * Dependencies:
 * - Imported first in perspectives.scss to establish base styles
 * - No dependencies on other SCSS files
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.hidden {
  display: none !important;
}

button {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  color: var(--primary-color);
  cursor: pointer;
}

strong {
  font-weight: 600;
}

a {
  text-decoration: none;
  color: var(--primary-color);
  border: none;
  outline: none;
}

/**
 * @fileoverview Global Layout and Component Styles
 * 
 * This file contains the core layout styles, global variables, and shared component styles
 * for the Perspectives application. It defines the main structural elements and common
 * UI patterns used throughout the application.
 * 
 * Used by:
 * - source/templates/layouts/perspectives.pug (main layout for all pages)
 * - source/templates/layouts/perspectives-signed-in-pages.pug (signed-in user layout)
 * - All page templates that extend these layouts
 * 
 * Key Components Styled:
 * - CSS custom properties (CSS variables) for theming
 * - Modal system (.modal-container, .modal-background)
 * - Header navigation (.header, .logo, .header-menu)
 * - Mobile footer (.mobile-footer)
 * - User menu and language selector (.user-menu, .language-selector)
 * - Flash messages (#flash-message-wrapper)
 * - Global animations and transitions
 * 
 * Dependencies:
 * - Imported after reset.scss in perspectives.scss
 * - Uses CSS custom properties defined in :root
 */
:root {
  --background: #f9f8fa;
  --primary-color: #2e384d;
  --secondary-color: #73727b;
  --tertiary-color: #fff;
  --accent: #755aff;
  --red: #ee3322;
  --yellow: #ffee38;
  --light-yellow: #ffee3850;
  --blue: #0f65ef;
  --light-gray: #f4f4f4;
  --green: #39b26b;
}

[data-theme=dark] {
  --background: #252525;
  --primary-color: #fff;
  --secondary-color: #000;
  --tertiary-color: #000;
}

body {
  background: var(--background);
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  color: var(--primary-color);
  line-height: 1.5;
}
@media (max-width: 888px) {
  body.page-solution {
    padding-bottom: calc(140px - 40px);
  }
}
body:has(.dragging) {
  cursor: grabbing;
}
@media (max-width: 888px) {
  body:has(.content-container > .mobile-footer > *:not(.hidden) :not([style*="display: none"]) :not([style*="display:none"])) {
    padding-bottom: 40px;
  }
}

@keyframes modalBackgroundFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes modalBackgroundFadeIn {
  from {
    opacity: 0;
    visibility: visible;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
body {
  background: var(--background);
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  color: var(--primary-color);
  line-height: 1.5;
}
body .main.modal-background {
  display: flex;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 8;
  transition: visibility 0.9s;
}
body.has-modal .main.modal-background {
  opacity: 1;
  visibility: visible;
  animation: modalBackgroundFadeIn 0.9s ease-out;
  /* Animation options:
     - name: modalBackgroundFadeIn
     - duration: 0.9s
     - timing-function: ease-out
     - delay: not specified (default: 0s)
     - iteration-count: not specified (default: 1)
     - direction: not specified (default: normal)
     - fill-mode: not specified (default: none)
     - play-state: not specified (default: running)

     Other possible values:
     - timing-function: ease, linear, ease-in, ease-in-out, cubic-bezier()
     - direction: reverse, alternate, alternate-reverse
     - fill-mode: forwards, backwards, both
     - play-state: paused
  */
}
body:not(.has-modal) .main.modal-background {
  opacity: 0;
  animation: modalBackgroundFadeOut 0.9s ease-out forwards;
  pointer-events: none;
}
body .main.modal-container {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 9;
}
body .main.modal-container.active-modals {
  z-index: 10;
}
body .main.modal-container.exiting-modals {
  z-index: 9;
  pointer-events: none;
  user-select: none;
}
body.has-modal .main.content-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100vh;
  overflow-y: hidden;
  pointer-events: none;
}
body.has-modal .main.modal-background {
  display: flex;
}
body.has-modal .main.modal-container {
  display: flex;
}

textarea,
input {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  color: var(--primary-color);
  line-height: 1.5;
}
textarea:focus,
input:focus {
  outline: none;
}
textarea::placeholder,
input::placeholder {
  color: #2e384d4d;
}

a[data-router-bound=true] {
  cursor: pointer;
}

#flash-message-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--light-gray);
  border-radius: 8px;
}
#flash-message-wrapper #flash-message-close-icon {
  display: none;
}
#flash-message-wrapper .flash-message-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-color);
}

header.header {
  position: sticky;
  background: var(--background);
  z-index: 3;
  top: 0;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
@media (max-width: 999px) {
  header.header {
    padding: 20px;
  }
}
header.header .header-top-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 501px) {
  header.header .header-top-navigation.at-page-decision-board, header.header .header-top-navigation.at-page-solution-edit, header.header .header-top-navigation.at-page-solution-view, header.header .header-top-navigation.at-page-take-decision {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
header.header.login-header {
  flex-direction: row;
}
header.header .logo-link {
  font-size: 0px;
}
header.header .logo-image {
  height: 40px;
}
header.header .logo {
  height: 40px;
  width: 224px;
  display: flex;
  align-items: center;
}
@media (max-width: 501px) {
  header.header .logo.at-page-decision-board, header.header .logo.at-page-solution-edit, header.header .logo.at-page-solution-view, header.header .logo.at-page-take-decision {
    display: none;
  }
}
header.header .logo img.full-height {
  height: 100%;
}
header.header .logo img.full-width {
  width: 100%;
}

footer.mobile-footer {
  display: none;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  position: fixed;
  padding: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  z-index: 2;
  justify-content: center;
  width: 100%;
}
@media (max-width: 888px) {
  footer.mobile-footer:has(> *:not(.hidden):not([style*="display: none"]):not([style*="display:none"])) {
    display: flex;
  }
  footer.mobile-footer:has(> .hidden), footer.mobile-footer:empty {
    display: none !important;
  }
}
@media (max-width: 501px) {
  footer.mobile-footer {
    padding: 12px;
  }
}
footer.mobile-footer:empty {
  display: none;
}
footer.mobile-footer .cta-button {
  width: 100%;
}
@media (max-width: 501px) {
  footer.mobile-footer .cta-button {
    min-height: 32px;
    padding: 4px 8px;
  }
  footer.mobile-footer .cta-button svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 501px) and (max-width: 501px) {
  footer.mobile-footer .cta-button span {
    font-size: 13px;
    line-height: 20px;
  }
}

.header-menu {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  position: relative;
}
.header-menu .header-menu-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}
.header-menu .header-menu-buttons:empty {
  display: none;
}
@media (max-width: 888px) {
  .header-menu .header-menu-buttons {
    display: none;
  }
}
.header-menu .header-menu-buttons .cta-button {
  border: none;
}
.header-menu .cta-button {
  min-width: fit-content;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .header-menu.logged-in-header-menu {
    flex-direction: column;
  }
}
.header-menu aside.user-menu {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  user-select: none;
  padding: 8px 16px;
  background-color: var(--tertiary-color);
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  cursor: pointer;
}
@media (max-width: 888px) {
  .header-menu aside.user-menu {
    padding: 8px 4px 8px 8px;
  }
}
.header-menu aside.user-menu img,
.header-menu aside.user-menu .user-avatar-initials {
  font-size: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.header-menu aside.user-menu .user-info {
  display: flex;
  flex-direction: column;
}
.header-menu aside.user-menu .user-info span {
  font-weight: 600;
  font-size: 15px;
  color: #2e384d;
}
@media (max-width: 980px) {
  .header-menu aside.user-menu .user-info span {
    display: none;
  }
}
.header-menu aside.user-menu .user-menu-button {
  font-size: 0px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-menu .user-menu-dropdown {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: absolute;
  top: 56px;
  right: 0px;
  z-index: 100;
  background-color: var(--tertiary-color);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
.header-menu .user-menu-dropdown.active {
  display: flex;
}
.header-menu .user-menu-dropdown .language-dropdown {
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.header-menu .user-menu-dropdown .language-dropdown li span {
  color: #2e384d;
  font-size: 13px;
}
.header-menu .user-menu-dropdown .language-selector {
  box-shadow: none;
  width: 100%;
  justify-content: space-between;
  background-color: #f9f7fa;
}
.header-menu .user-menu-dropdown .language-selector span {
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  color: #2e384d;
}
.header-menu .user-menu-dropdown li {
  width: 100%;
}
.header-menu .user-menu-dropdown li.logout-button span {
  color: #cd5c5c !important;
}
.header-menu .user-menu-dropdown li a.link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #f9f7fa;
  border-radius: 8px;
  width: 100%;
  padding: 8px 16px;
  width: 100%;
}
.header-menu .user-menu-dropdown li a.link span {
  color: #2e384d;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.language-selector {
  user-select: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  min-height: 40px;
  background-color: var(--tertiary-color);
  border-radius: 8px;
  gap: 8px;
  position: relative;
  color: #2e384d;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
.language-selector .language-selector-arrow {
  font-size: 0px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-dropdown {
  display: none;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--tertiary-color);
  border-radius: 8px;
  position: absolute;
  top: 56px;
  right: 0;
  z-index: 100;
}
.language-dropdown.active {
  display: flex;
}
.language-dropdown li {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f9f7fa;
  border-radius: 8px;
}
.language-dropdown li.active span {
  font-weight: 600;
}
.language-dropdown li.active .selection-indicator svg:last-child {
  display: block;
}
.language-dropdown li.active .selection-indicator svg:first-child {
  display: none;
}
.language-dropdown li .selection-indicator svg:last-child {
  display: none;
}
.language-dropdown li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.back-button a {
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
}

/**
 * @fileoverview Utility Classes and Reusable Components
 * 
 * This file contains utility classes and reusable UI components that are used
 * throughout the Perspectives application. These are common patterns and styles
 * that appear across multiple pages and components.
 * 
 * Used by:
 * - ALL Pug templates that use utility classes
 * - Button components (.cta-button variations)
 * - Notification badges (.notification variations)
 * - Search inputs (.search-input)
 * - Avatar components (.user-avatar-initials)
 * - Text utilities (.clamp-1, .clamp-2, .no-clamp)
 * - Form elements (.select-input)
 * - Drag and drop functionality (.dragging, .sortable-list)
 * 
 * Key Components:
 * - .cta-button: Primary action buttons with variants (secondary, urgent, square)
 * - .notification: Status badges with color-coded urgency levels
 * - .search-input: Styled search input with icon
 * - .user-avatar-initials: User avatar fallback display
 * - Text clamping utilities for consistent text overflow handling
 * - Select input styling for form dropdowns
 * - Drag and drop visual feedback classes
 * 
 * Dependencies:
 * - Uses CSS custom properties from layout.scss
 * - Imported after layout.scss in perspectives.scss
 */
.cta-button {
  width: fit-content;
  min-height: 40px;
  background-color: var(--accent);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  color: var(--tertiary-color);
  min-width: fit-content;
}
@media (max-width: 888px) {
  .cta-button {
    padding: 8px 12px;
  }
}
.cta-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cta-button.cant-save {
  opacity: 0.5;
  cursor: not-allowed;
}
.cta-button.square {
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.cta-button.secondary {
  color: var(--primary-color);
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
  border: 1px solid #ebe0ff;
}
.cta-button.secondary span,
.cta-button.secondary a {
  font-weight: 600;
  color: var(--primary-color);
}
.cta-button.urgent {
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
}
.cta-button.urgent span {
  font-weight: 600;
  color: #cd5c5c;
}
.cta-button.secondary-cta {
  color: var(--accent);
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
}
.cta-button.secondary-cta span,
.cta-button.secondary-cta a {
  font-weight: 600;
  color: var(--accent);
}
.cta-button span,
.cta-button a {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: var(--tertiary-color);
}

.notification {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #f9f7fa;
  color: #2e384d;
}
.notification span {
  color: #2e384d;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
}
@media (max-width: 501px) {
  .notification span {
    font-size: 11px;
    line-height: 14px;
  }
}
.notification svg {
  width: 14px;
  height: 14px;
}
.notification svg + span {
  margin-left: 8px;
}
.notification.ontime-secondary {
  background-color: #dfe9ff;
  color: #000000;
}
.notification.ontime-secondary span {
  color: #000000;
}
.notification.ontime {
  background-color: #fcf0ff;
  color: #000000;
}
.notification.ontime span {
  color: #000000;
}
.notification.success {
  background-color: #50e3c2;
  color: #000000;
}
.notification.success span {
  color: #000000;
}
.notification.important {
  background-color: #ebe0ff;
  color: #000000;
}
.notification.important span {
  color: #000000;
}
.notification.draft {
  background-color: #e5e5e5;
  color: #000000;
}
.notification.draft span {
  color: #000000;
}
.notification.warning {
  background-color: #f6d3ff;
  color: #000000;
}
.notification.warning span {
  color: #000000;
}
.notification.pros-and-cons {
  background-color: #f7f2ff;
  color: #000000;
}
.notification.pros-and-cons span {
  color: #000000;
}
.notification.warning-secondary {
  background-color: #afd1ff;
  color: #000000;
}
.notification.warning-secondary span {
  color: #000000;
}
.notification.urgent-secondary {
  background-color: #6aaaff;
  color: #000000;
}
.notification.urgent-secondary span {
  color: #000000;
}
.notification.urgent {
  background-color: #f199ff;
  color: #000000;
}
.notification.urgent span {
  color: #000000;
}
.notification.secondary-cta {
  color: #5433ff;
  border: 1px solid #5433ff;
  padding: 2px 10px;
}
.notification.secondary-cta span {
  color: #5433ff;
}
.notification.secondary {
  background-color: var(--tertiary-color);
}

.search-input {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 400px;
  min-width: 300px;
  overflow: hidden;
  font-size: 15px;
  position: relative;
  border-radius: 999px;
  border: 1px solid #ebe0ff;
  background-color: var(--tertiary-color);
}
.search-input input {
  width: 100%;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  padding-right: 48px;
}
.search-input input::placeholder {
  color: #2e384d4d;
}
.search-input .search-icon {
  position: absolute;
  right: 0;
  font-size: 0;
  color: var(--accent);
  padding: 0 15px 0 0;
}

.user-avatar-initials {
  background-color: #e5e5e5;
  color: #2e384d;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.no-clamp {
  overflow: visible;
  text-overflow: visible;
  display: block;
  word-break: break-word;
}

.select-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #ebe0ff;
  background-color: var(--tertiary-color);
  background-position: center right;
  background-origin: content-box;
  background-size: 12px 6px;
  background-repeat: no-repeat;
  background-image: url("/static/images/arrow-down.svg");
  border-radius: 8px;
  padding-right: 16px;
}
.select-input select {
  padding: 8px 28px;
  border-radius: 8px;
  background-color: transparent;
  height: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: none;
  font-size: 14px;
  line-height: 17px;
  color: #2e384d;
}
@media (max-width: 501px) {
  .select-input select {
    padding: 4px 20px 4px 12px;
  }
}
@media (max-width: 501px) {
  .select-input select {
    font-size: 12px;
  }
}

.dragging {
  opacity: 0.5;
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.5;
  width: 100%;
  /* Ensures the item retains its width */
  left: 0;
  /* Aligns correctly */
}
.dragging button {
  opacity: 0;
}

.sortable-list {
  position: relative;
}

@media (max-width: 999px) {
  .spacer {
    height: 20px;
  }
}

/**
 * @fileoverview Form Styles and Input Components
 * 
 * This file contains comprehensive styling for all form elements, input fields,
 * validation states, and form-related UI components used throughout the
 * Perspectives application.
 * 
 * Used by:
 * - source/templates/views/authentication/login.pug (login form)
 * - source/templates/views/password-recovery/*.pug (password reset forms)
 * - source/templates/views/invitation-flow/*.pug (signup and invitation forms)
 * - All modal forms in source/templates/partials/decision-board-modals/
 * - All modal forms in source/templates/partials/organization-settings-modals/
 * - All modal forms in source/templates/partials/customer-modals/
 * - All modal forms in source/templates/partials/solution-modals/
 * 
 * Key Components:
 * - .form-control: Main form container with error/success states
 * - .form-container: Form wrapper with consistent spacing
 * - .form-field: Individual field containers with labels and validation
 * - .field-input: Styled input fields (text, email, password, textarea)
 * - .field-label: Form field labels with consistent typography
 * - .field-error-message: Validation error display
 * - .form-return-message: Global form feedback messages
 * - .form-submit-button: Form submission buttons
 * - File upload components (.file-upload-field)
 * - Checkbox and radio button styling
 * - Floating label patterns for authentication forms
 * 
 * Dependencies:
 * - Uses CSS custom properties from layout.scss
 * - Extends utility classes from utils.scss
 * - Imported after utils.scss in perspectives.scss
 */
.form-control.error .form-container .form-return-message {
  display: flex;
}
.form-control.error .form-container .form-return-message .error-icon {
  color: #cd5c5c;
  display: block;
}
.form-control.success .form-container .form-return-message {
  display: flex;
}
.form-control.success .form-container .form-return-message .success-icon {
  color: #50e3c2;
  display: block;
}
.form-control .form-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.form-control .form-heading {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-control .form-heading h3 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}
.form-control .form-heading p {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d99;
}
.form-control .form-field-input-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.form-control .form-field-input-wrapper select {
  min-height: 40px;
}
.form-control .form-input-and-error {
  width: 100%;
}
.form-control .form-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 401px) {
  .form-control .form-row {
    flex-direction: column;
  }
}
.form-control .form-row:empty, .form-control .form-row:not(:has(> .form-field:not(.form-field-hidden),
> .form-field.form-field-hidden > .field-error-message:not(:empty))) {
  display: none;
}
.form-control .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.form-control .form-field label.checkbox-label-with-child-input {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 36px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 24px;
}
.form-control .form-field label.checkbox-label-with-child-input input.field-input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.form-control .form-field label.checkbox-label-with-child-input span {
  color: #2e384d;
  font-weight: 400;
}
.form-control .form-field label.checkbox-label-with-child-input span a {
  color: #6c55e7;
  font-weight: 600;
  text-decoration: underline;
}
.form-control .form-field label.checkbox-label-with-child-input:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
  border-radius: 8px;
}
.form-control .form-field label.checkbox-label-with-child-input:hover:before {
  background-color: #f7f2ff;
}
input.field-input[type=checkbox]:checked + .form-control .form-field label.checkbox-label-with-child-input:before, .form-control .form-field label.checkbox-label-with-child-input:has(input.field-input[type=checkbox]:checked):before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-control .form-field label.checkbox-label-with-child-input:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input.field-input[type=checkbox]:checked + .form-control .form-field label.checkbox-label-with-child-input:after, .form-control .form-field label.checkbox-label-with-child-input:has(input.field-input[type=checkbox]:checked):after {
  display: block;
}
input.field-input[type=checkbox]:disabled ~ .form-control .form-field label.checkbox-label-with-child-input {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-control .form-field .floating-checkbox-input {
  padding: 0;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.form-control .form-field .floating-checkbox-input label {
  cursor: pointer;
  font-size: 0;
  padding: 12px 16px;
}
.form-control .form-field .floating-checkbox-input label svg {
  color: #6c55e7;
}
.form-control .form-field .floating-checkbox-input label svg:nth-child(2) {
  display: block;
}
.form-control .form-field .floating-checkbox-input label svg:last-child {
  display: none;
}
.form-control .form-field .floating-checkbox-input label.show-password svg:nth-child(2) {
  display: none;
}
.form-control .form-field .floating-checkbox-input label.show-password svg:last-child {
  display: block;
}
.form-control .form-field .floating-checkbox-input input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
.form-control .form-field .checkbox-input {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 23px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.form-control .form-field .checkbox-input:has(input:disabled) {
  opacity: 0.5;
}
.form-control .form-field .checkbox-input label {
  padding-left: 12px;
  cursor: pointer;
  color: #2e384d99;
}
.form-control .form-field .checkbox-input label a {
  color: #6c55e7;
  font-weight: 600;
  text-decoration: underline;
}
.form-control .form-field .checkbox-input input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.form-control .form-field .checkbox-input .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: var(--tertiary-color);
  border: 1px solid #f2ebff;
  border-radius: 8px;
}
.form-control .form-field .checkbox-input:hover input ~ .checkmark {
  background-color: #ccc;
}
.form-control .form-field .checkbox-input input:checked ~ .checkmark {
  background-color: var(--accent);
}
.form-control .form-field .checkbox-input .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.form-control .form-field .checkbox-input input:checked ~ .checkmark:after {
  display: block;
}
.form-control .form-field .checkbox-input .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.form-control .form-field input[type=file]::file-selector-button {
  padding: 3px 16px;
  border-radius: 8px;
  background-color: var(--accent);
  color: var(--tertiary-color);
  transition: 0.3s;
  cursor: pointer;
  font-size: 12px;
  border: none;
}
.form-control .form-field input[type=file]::file-selector-button:hover {
  opacity: 0.8;
}
.form-control .form-field .field-label {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #958dd5;
}
.form-control .form-field .field-label .max-char,
.form-control .form-field .field-label .field-characters {
  font-size: 13px;
  float: right;
  font-weight: 400;
  color: #2e384d99;
}
.form-control .form-field .field-input {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 17px;
  resize: none;
}
.form-control .form-field .field-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.form-control .form-field textarea.field-input {
  overflow: auto;
}
.form-control .form-field select.field-input {
  height: fit-content;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--tertiary-color);
  background-position: center right;
  background-origin: content-box;
  background-size: 12px 6px;
  background-repeat: no-repeat;
  background-image: url("/static/images/arrow-down.svg");
  border-radius: 8px;
  padding: 8px 16px;
  border: 0;
  outline: none;
  border: 1px solid #ebe0ff;
  font-size: 14px;
  line-height: 17px;
  color: #2e384d;
}
.form-control .form-field select::placeholder,
.form-control .form-field input::placeholder,
.form-control .form-field textarea::placeholder {
  font-size: 14px;
  line-height: 17px;
}
.form-control .form-field .field-error-message {
  display: none;
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: #cd5c5c;
}
.form-control .form-field.error .field-error-message {
  display: block;
}
.form-control .form-field.error label.field-label {
  color: #cd5c5c;
}
.form-control .form-field.error .checkbox-input .checkmark {
  border-color: #cd5c5c;
}
.form-control .form-field.error label.checkbox-label-with-child-input:before {
  border-color: #cd5c5c;
}
.form-control .form-field.error textarea,
.form-control .form-field.error input {
  border: 2px solid #cd5c5c;
  padding: 7px 14px;
}
.form-control .form-return-message {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #ededed;
  border-radius: 8px;
}
.form-control .form-return-message .success-icon,
.form-control .form-return-message .error-icon {
  display: none;
  font-size: 0px;
}
.form-control .form-return-message .form-return-message-headings {
  gap: 4px;
  flex-direction: column;
  align-items: center;
  display: flex;
}
.form-control .form-return-message .form-return-message-headings h5 {
  font-size: 14px;
  color: #2e384d;
  font-weight: 600;
  line-height: 20px;
}
.form-control .form-return-message .form-return-message-headings h5:empty {
  display: none;
}
.form-control .form-return-message .form-return-message-headings p {
  line-height: 20px;
  color: #2e384d;
  font-size: 13px;
  font-weight: 400;
}
.form-control .form-return-message .form-return-message-headings p:empty {
  display: none;
}
.form-control .form-instructions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-control .form-instructions svg {
  min-width: 16px;
  min-height: 16px;
}
.form-control .form-instructions .form-instructions-headings h4 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
  margin-bottom: 8px;
  line-height: 17px;
}
.form-control .form-instructions .form-instructions-headings p {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #2e384d99;
}

/**
 * @fileoverview Authentication Pages Styles
 * 
 * This file contains styles specific to authentication and account-related pages
 * including login, signup, password recovery, and invitation flow pages.
 * 
 * Used by:
 * - source/templates/views/authentication/login.pug (login page)
 * - source/templates/views/authentication/logout.pug (logout page)
 * - source/templates/views/password-recovery/forgot-password.pug (forgot password page)
 * - source/templates/views/password-recovery/reset-password.pug (reset password page)
 * - source/templates/views/password-recovery/password-recovery-email-sent.pug (email sent confirmation)
 * - source/templates/views/invitation-flow/begin.pug (invitation start page)
 * - source/templates/views/invitation-flow/signup.pug (signup form page)
 * - source/templates/views/invitation-flow/invitation-not-found.pug (error page)
 * - source/templates/views/invitation-flow/resend-pending-invitation.pug (resend invitation page)
 * - source/templates/views/invitation-flow/resend-invitation-success.pug (resend success page)
 * - source/templates/mixins/components/auth-pages-header.pug (authentication header component)
 * 
 * Key Components:
 * - .authentication-wrapper: Main container for auth pages
 * - .authentication-columns: Two-column layout (desktop content + form)
 * - .authentication-column-desktop-content: Left column with hero content
 * - .authentication-column-essential-content: Right column with forms
 * - .authentication-form: Form container with consistent styling
 * - .authentication-form-headings: Form titles and descriptions
 * - .authentication-form-fields: Form field containers
 * - .authentication-form-actions: Form action buttons and links
 * - .authentication-form-footer: Footer links and additional actions
 * - .authentication-form-input-wrapper: Input wrapper for password visibility toggle
 * - .avatar-field: Avatar upload and preview component
 * - .email-notification: Email confirmation display
 * 
 * Dependencies:
 * - Extends form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Uses CSS custom properties from layout.scss
 * - Imported after forms.scss in perspectives.scss
 */
.authentication-wrapper {
  min-height: calc(100vh - 105px);
  padding: 0 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 980px) {
  .authentication-wrapper {
    padding: 40px 20px;
  }
}
@media (max-width: 999px) {
  .authentication-wrapper {
    min-height: calc(100vh - 80px);
  }
}
.authentication-wrapper .back-button {
  margin-bottom: 24px;
}

.authentication-columns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 90px;
}

.authentication-column-desktop-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 980px) {
  .authentication-column-desktop-content {
    display: none;
  }
}

.authentication-column-essential-content {
  width: 50%;
  max-width: 500px;
}
@media (max-width: 980px) {
  .authentication-column-essential-content {
    width: 100%;
    max-width: auto;
  }
}

.authentication-form {
  padding: 40px;
  background: var(--tertiary-color);
  border-radius: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.authentication-form .form-field .authentication-form-input-wrapper {
  position: relative;
  font-size: 0px;
}
.authentication-form .form-field .authentication-form-input-wrapper input.field-input {
  padding-right: calc(16px + 30px);
}
@media (max-width: 999px) {
  .authentication-form {
    padding: 20px;
  }
}
.authentication-form .authentication-form-headings h1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.authentication-form .authentication-form-headings p {
  font-size: 17px;
  font-weight: 400;
  color: #2e384d99;
  word-break: break-word;
}
.authentication-form .authentication-form-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
@media (max-width: 999px) {
  .authentication-form .authentication-form-options {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
.authentication-form .authentication-form-button-wrapper {
  margin-top: 0px;
}

.authentication-form-button-wrapper {
  display: flex;
  justify-content: center;
}
@media (max-width: 999px) {
  .authentication-form-button-wrapper {
    flex-direction: column;
  }
  .authentication-form-button-wrapper .cta-button {
    width: 100%;
  }
}

.email-notification {
  display: flex;
  justify-content: center;
}
.email-notification .email-notification-icon {
  width: 140px;
}

.authentication-form-footer {
  margin-top: 20px;
  text-align: center;
}
.authentication-form-footer a {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}

.authentication-form-fields {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.authentication-form-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
@media (max-width: 999px) {
  .authentication-form-actions {
    align-items: flex-start;
  }
}
.authentication-form-actions .forgot-password {
  color: var(--accent);
  font-size: 12px;
  font-weight: 400;
}

.input-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 980px) {
  .input-row {
    flex-direction: column;
  }
}

.change-email-wrapper {
  text-align: right;
}

.change-email {
  color: var(--accent);
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
}

.authentication-column-desktop-content h2 {
  font-size: 32px;
  font-weight: 600;
}
.authentication-column-desktop-content p {
  font-size: 18px;
  font-weight: 400;
  color: var(--secondary-color);
  max-width: 458px;
}

.avatar-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avatar-field label {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: #958dd5;
}
.avatar-field .avatar-field-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-end;
}
.avatar-field .avatar-field-container.can-remove-image .avatar-field-options .remove-avatar-image-button {
  display: block;
}
.avatar-field .avatar-field-container.has-image .avatar-field-preview-container {
  background-color: #e5e5e5;
}
.avatar-field .avatar-field-container.has-image .avatar-field-preview-container img {
  display: block;
}
.avatar-field .avatar-field-container.has-image .avatar-field-preview-container .user-initials {
  display: none;
}
.avatar-field .avatar-field-container .avatar-field-preview-container {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-field .avatar-field-container .avatar-field-preview-container img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-field .avatar-field-container .avatar-field-preview-container .user-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  font-weight: 600;
  color: #2e384d99;
  background-color: #e5e5e5;
  border: 2px solid #f9f7fa;
  border-radius: 50%;
}
.avatar-field .avatar-field-container .avatar-field-preview-container .user-initials.uploading {
  opacity: 0.5;
  font-size: 13px;
  text-align: center;
}
.avatar-field .avatar-field-container .avatar-field-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.avatar-field .avatar-field-container .avatar-field-options .cta-button {
  width: 100%;
}
.avatar-field .avatar-field-container .avatar-field-options .remove-avatar-image-button {
  width: 100%;
  user-select: none;
  display: none;
  cursor: pointer;
}
.avatar-field .avatar-field-container .avatar-field-options .remove-avatar-image-button:has(input:checked) .cta-button {
  background-color: #cd5c5c;
}
.avatar-field .avatar-field-container .avatar-field-options .remove-avatar-image-button:has(input:checked) .cta-button span {
  color: var(--tertiary-color);
}
.avatar-field .avatar-field-container .avatar-field-options .remove-avatar-image-button input {
  display: none;
}

/**
 * @fileoverview Organizations Listing Pages Styles
 * 
 * This file contains styles for organization listing and management pages,
 * including the organizations hub, pending organizations, and all organizations views.
 * 
 * Used by:
 * - source/templates/views/signed-in/organizations-hub.pug (main organizations hub page)
 * - source/templates/views/signed-in/all-organizations.pug (super admin organizations view)
 * - source/templates/views/signed-in/pending-organizations.pug (pending invitations page)
 * 
 * Key Components:
 * - .organizations-hub-wrapper: Main container for organizations pages
 * - .organizations-hub-content: Content wrapper with max-width constraints
 * - .organizations-hub-headings: Page title and description area
 * - .organizations-hub-section: Section containers for different organization states
 * - .organizations-hub-section-list: Grid layout for organization cards
 * - .organization-card: Individual organization card styling
 * - .organization-card-header: Organization name and description
 * - .organization-card-footer: Organization metadata and actions
 * - .organization-card-actions: Action buttons (Enter, Accept, Reject)
 * - .organizations-empty-state: Empty state messaging and illustrations
 * - .pending-invitation-notification: Invitation status indicators
 * 
 * Layout Features:
 * - Responsive grid system for organization cards
 * - Mobile-optimized layouts with adjusted spacing
 * - Empty state handling for different scenarios
 * - Consistent card design patterns
 * 
 * Dependencies:
 * - Uses utility classes from utils.scss (.cta-button, .notification)
 * - Uses CSS custom properties from layout.scss
 * - Imported after authentication-pages.scss in perspectives.scss
 */
.organizations-hub-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 105px);
  padding: 0 40px 40px;
}
@media (max-width: 999px) {
  .organizations-hub-wrapper {
    min-height: calc(100vh - 80px);
    padding: 0 20px 40px;
  }
}
.organizations-hub-wrapper .organizations-hub-content {
  width: 100%;
}
.organizations-hub-wrapper .organizations-hub-content .organizations-hub-headings {
  text-align: center;
}
.organizations-hub-wrapper .organizations-hub-content .organizations-hub-headings h1 {
  font-size: 32px;
  font-weight: 600;
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-hub-content .organizations-hub-headings h1 {
    font-size: 24px;
  }
}
.organizations-hub-wrapper .organizations-hub-content .organizations-hub-headings p {
  font-size: 24px;
  font-weight: 400;
  color: var(--secondary-color);
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-hub-content .organizations-hub-headings p {
    font-size: 18px;
  }
}
.organizations-hub-wrapper .joined-organizations-alert,
.organizations-hub-wrapper .pending-organizations-alert,
.organizations-hub-wrapper .all-organizations-alert,
.organizations-hub-wrapper .organizations-hub-alert {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.organizations-hub-wrapper .joined-organizations-alert.joined-organizations-alert span,
.organizations-hub-wrapper .pending-organizations-alert.joined-organizations-alert span,
.organizations-hub-wrapper .all-organizations-alert.joined-organizations-alert span,
.organizations-hub-wrapper .organizations-hub-alert.joined-organizations-alert span {
  color: var(--accent);
}
.organizations-hub-wrapper .joined-organizations-alert.pending-organizations-alert span,
.organizations-hub-wrapper .pending-organizations-alert.pending-organizations-alert span,
.organizations-hub-wrapper .all-organizations-alert.pending-organizations-alert span,
.organizations-hub-wrapper .organizations-hub-alert.pending-organizations-alert span {
  color: #ff3b3b;
}
.organizations-hub-wrapper .joined-organizations-alert.all-organizations-alert,
.organizations-hub-wrapper .pending-organizations-alert.all-organizations-alert,
.organizations-hub-wrapper .all-organizations-alert.all-organizations-alert,
.organizations-hub-wrapper .organizations-hub-alert.all-organizations-alert {
  text-align: left;
}
.organizations-hub-wrapper .joined-organizations-alert.all-organizations-alert span,
.organizations-hub-wrapper .pending-organizations-alert.all-organizations-alert span,
.organizations-hub-wrapper .all-organizations-alert.all-organizations-alert span,
.organizations-hub-wrapper .organizations-hub-alert.all-organizations-alert span {
  color: var(--green);
}
.organizations-hub-wrapper .joined-organizations-alert span,
.organizations-hub-wrapper .pending-organizations-alert span,
.organizations-hub-wrapper .all-organizations-alert span,
.organizations-hub-wrapper .organizations-hub-alert span {
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  transition: opacity 0.2s;
}
.organizations-hub-wrapper .joined-organizations-alert span:hover,
.organizations-hub-wrapper .pending-organizations-alert span:hover,
.organizations-hub-wrapper .all-organizations-alert span:hover,
.organizations-hub-wrapper .organizations-hub-alert span:hover {
  opacity: 0.8;
}
.organizations-hub-wrapper .organizations-list-empty {
  margin: 30px auto 0;
  max-width: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background: var(--tertiary-color);
  min-height: 200px;
  width: 100%;
  background: #ffffff;
  padding: 40px;
  border-radius: 16px;
  color: #9e9e9e;
  font-size: 24px;
  font-weight: 300;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  text-align: center;
}
@media (max-width: 980px) {
  .organizations-hub-wrapper .organizations-list-empty {
    height: 100%;
  }
}
.organizations-hub-wrapper .organizations-list-empty img {
  width: 196px;
}
.organizations-hub-wrapper .organizations-list-empty.pending {
  background: #eeeeee;
}
.organizations-hub-wrapper .organizations-list-empty h2 {
  font-size: 24px;
  font-weight: 600;
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-list-empty h2 {
    font-size: 18px;
  }
}
.organizations-hub-wrapper .organizations-list-empty p {
  font-size: 16px;
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-list-empty p {
    font-size: 12px;
  }
}
.organizations-hub-wrapper .organizations-list-empty .organizations-list-empty-title {
  font-size: 24px;
  font-weight: 600;
}
.organizations-hub-wrapper .organizations-list-empty .organizations-list-empty-description {
  font-size: 16px;
  font-weight: 400;
  color: var(--secondary-color);
}
.organizations-hub-wrapper .organizations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
  gap: 40px;
  width: 100%;
  justify-content: center;
  margin-top: 60px;
}
@media (max-width: 400px) {
  .organizations-hub-wrapper .organizations-grid {
    margin-top: 30px;
    grid-template-columns: 1fr;
  }
}
.organizations-hub-wrapper .organizations-grid.all-organizations-list {
  gap: 8px;
}
.organizations-hub-wrapper .organizations-grid .organization {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  background: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  width: 100%;
}
@media (max-width: 980px) {
  .organizations-hub-wrapper .organizations-grid .organization {
    height: 100%;
  }
}
.organizations-hub-wrapper .organizations-grid .organization img {
  width: 196px;
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item {
  gap: 8px;
  align-items: flex-start;
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item h2 {
  text-align: left;
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item p {
  font-size: 12px;
  text-align: left;
  color: var(--secondary-color);
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item p.active {
  color: var(--accent);
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item p.neutral {
  color: var(--secondary-color);
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item p.positive {
  color: var(--green);
}
.organizations-hub-wrapper .organizations-grid .organization.all-organizations-item p.negative {
  color: #ff3b3b;
}
.organizations-hub-wrapper .organizations-grid .organization.pending {
  background: #eeeeee;
}
.organizations-hub-wrapper .organizations-grid .organization h2 {
  text-align: center;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-grid .organization h2 {
    font-size: 18px;
  }
}
.organizations-hub-wrapper .organizations-grid .organization p {
  font-size: 16px;
  font-weight: 400;
  color: var(--secondary-color);
}
@media (max-width: 999px) {
  .organizations-hub-wrapper .organizations-grid .organization p {
    font-size: 12px;
  }
}
.organizations-hub-wrapper .organizations-grid .organization .successfully-accepted {
  background-color: rgba(149, 141, 213, 0.1);
  border: 2px dashed var(--accent);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
}
.organizations-hub-wrapper .organizations-grid .organization .successfully-accepted span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}
.organizations-hub-wrapper .organizations-grid .organization .successfully-rejected {
  background-color: rgba(255, 59, 59, 0.1);
  border: 2px dashed #ff3b3b;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
}
.organizations-hub-wrapper .organizations-grid .organization .successfully-rejected span {
  color: #ff3b3b;
  font-size: 14px;
  font-weight: 500;
}
.organizations-hub-wrapper .organizations-grid .organization .error-message {
  background-color: rgba(255, 59, 59, 0.1);
  border: 2px dashed #ff3b3b;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
}
.organizations-hub-wrapper .organizations-grid .organization .error-message span {
  color: #ff3b3b;
  font-size: 14px;
  font-weight: 500;
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 10px;
  width: 100%;
  flex-direction: row;
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button {
  min-width: 80px;
  min-height: 40px;
  background-color: var(--accent);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button span,
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button a {
  font-size: 16px;
  color: var(--tertiary-color);
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button.accept-invite {
  background-color: var(--accent);
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button.reject-invite {
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button.reject-invite span {
  font-weight: 600;
  color: #cd5c5c;
}
.organizations-hub-wrapper .organizations-grid .organization .organization-actions button.cta-button:hover {
  opacity: 0.8;
}
.organizations-hub-wrapper .payment-info {
  background-color: #f2ebff;
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
@media (max-width: 980px) {
  .organizations-hub-wrapper .payment-info {
    display: none;
  }
}
.organizations-hub-wrapper .payment-info span {
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
}

.notifications-badge {
  position: relative;
}
.notifications-badge::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--tertiary-color);
  background-color: #bd00ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

/**
 * @fileoverview Decision Boards Listing Page Styles
 * 
 * This file contains styles for the dashboard page that displays decision boards
 * in various states and phases. It handles the grid layout, card design, and
 * responsive behavior for decision board listings.
 * 
 * Used by:
 * - source/templates/views/signed-in/dashboard.pug (main dashboard page)
 * 
 * Key Components:
 * - .decision-boards-wrapper: Main container for dashboard content
 * - .decision-boards-content: Content wrapper with responsive constraints
 * - .decision-boards-header: Page header with title and search functionality
 * - .decision-boards-section: Section containers for different board phases
 * - .decision-boards-section-title: Section headings (Drafts, Rating, etc.)
 * - .decision-boards-section-list: Responsive grid layout for decision board cards
 * - .decision-board: Individual decision board card styling (defined in dashboard.pug mixin)
 * - .decision-board-header: Board title and description area
 * - .decision-board-footer: Participants and metadata display
 * - .decision-board-notifications: Status badges and notifications
 * - .dashboard-empty-state: Empty state messaging and call-to-action
 * - .participants-summary: Participant avatars and counts
 * - .participant-badge: Individual participant avatar styling
 * 
 * Layout Features:
 * - Complex responsive grid system with breakpoint calculations
 * - Dynamic column counts based on viewport width
 * - Mobile-optimized spacing and typography
 * - Search functionality integration
 * - Empty state handling for different scenarios
 * 
 * Dependencies:
 * - Uses utility classes from utils.scss (.cta-button, .notification, .clamp-2)
 * - Uses CSS custom properties from layout.scss
 * - Imported after organizations-listing.scss in perspectives.scss
 */
.decision-boards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  min-height: calc(100vh - 105px);
  padding: 20px 40px 40px;
}
.decision-boards-wrapper .back-button {
  align-self: start;
}
@media (max-width: 999px) {
  .decision-boards-wrapper {
    min-height: calc(100vh - 65px);
    padding: 0 20px 40px;
  }
}
.decision-boards-wrapper .decision-boards-content {
  width: 100%;
  max-width: 1580px;
}
.decision-boards-wrapper .decision-boards-content .back-button {
  font-size: 16px;
  width: fit-content;
  text-decoration: underline;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section-title h3 {
  font-size: 22px;
  font-weight: 600;
  color: #2e384d99;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-header {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
@media (max-width: 999px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-header h1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-header h1 strong {
  font-weight: 600;
}
@media (max-width: 999px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-header h1 {
    font-size: 24px;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-header p {
  font-size: 24px;
  font-weight: 400;
  color: var(--secondary-color);
}
@media (max-width: 999px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-header p {
    font-size: 18px;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-header a {
  font-size: 0;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section + .decision-boards-section {
  margin-top: 40px;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list.empty-spaces {
  grid-template-columns: 1fr;
}
@media (max-width: 999px) and (min-width: 770px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(2, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (max-width: 999px) and (min-width: 1150px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(3, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (max-width: 999px) and (min-width: 1530px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(4, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (max-width: 999px) and (min-width: 1910px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(5, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1000px) and (min-width: 810px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(2, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1000px) and (min-width: 1190px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(3, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1000px) and (min-width: 1570px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(4, minmax(350px, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1000px) and (min-width: 1950px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .decision-boards-section-list {
    grid-template-columns: repeat(4, minmax(350px, 1fr));
    gap: 30px;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state {
  display: flex;
  flex-direction: row;
  gap: 60px;
  padding: 30px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border: 1px dashed #958dd5;
  background-color: var(--tertiary-color);
  border-radius: 16px;
}
@media (max-width: 666px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state {
    flex-direction: column;
    gap: 16px;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state img {
  width: 150px;
  height: 150px;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state .dashboard-empty-state-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  justify-content: center;
}
@media (max-width: 666px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state .dashboard-empty-state-content {
    align-items: center;
    text-align: center;
  }
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state .dashboard-empty-state-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d;
}
.decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state .dashboard-empty-state-content p {
  font-size: 14px;
  color: #2e384d99;
}
@media (max-width: 666px) {
  .decision-boards-wrapper .decision-boards-content .decision-boards-section .dashboard-empty-state .dashboard-empty-state-content .cta-button {
    width: 100%;
  }
}

/**
 * @fileoverview Decision Board Page Styles
 * 
 * This file contains comprehensive styles for the decision board view page,
 * including the main board interface, solution listings, participant management,
 * voting/rating interfaces, and mobile navigation tabs.
 * 
 * Used by:
 * - source/templates/views/signed-in/decision-board.pug (main decision board page)
 * 
 * Key Components:
 * - .decision-board-voting-and-ratings: Voting interface and rating displays
 * - .decision-board-voting-and-notifications: Combined voting and notification area
 * - .decision-board-wrapper: Main page container
 * - .decision-board-content: Content area with responsive layout
 * - .decision-board-header: Board title, description, and metadata
 * - .decision-board-details: Board information and status displays
 * - .decision-board-solutions: Solution listing and management area
 * - .decision-board-participants: Participant management interface
 * - .decision-board-mobile-tabs: Mobile navigation tabs (Solutions, Participants, Edit)
 * - .decision-board-tab-content: Tab content containers
 * - .solution-card: Individual solution display cards
 * - .solution-rating-interface: Rating and voting controls
 * - .participants-list: Participant listing and management
 * - .board-status-indicators: Status badges and progress indicators
 * - .board-actions: Action buttons and management controls
 * - .board-timeline: Timeline and deadline displays
 * - .board-attachments: File attachment management
 * - .board-discussion: Discussion thread interface
 * 
 * Layout Features:
 * - Complex responsive layout with desktop/mobile variations
 * - Mobile-first tab navigation system
 * - Flexible solution grid layouts
 * - Participant avatar management
 * - Status-based conditional styling
 * - Interactive voting and rating interfaces
 * 
 * Dependencies:
 * - Uses utility classes from utils.scss (.cta-button, .notification, etc.)
 * - Uses CSS custom properties from layout.scss
 * - Extends form styles from forms.scss for inline editing
 * - Imported after decision-boards-listing.scss in perspectives.scss
 */
.decision-board-voting-and-ratings {
  display: flex;
  flex-direction: row;
  gap: 16px;
  min-width: fit-content;
  align-items: center;
}
.decision-board-voting-and-ratings:empty, .decision-board-voting-and-ratings:not(:has(> *:not(:empty))) {
  display: none;
}

.decision-board-voting-and-notifications {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  min-width: fit-content;
}
@media (max-width: 999px) {
  .decision-board-voting-and-notifications {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
.decision-board-voting-and-notifications:empty {
  display: none;
}

.decision-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  border-radius: 16px;
  background: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  width: 100%;
}
.decision-board .decision-board-header {
  width: 100%;
}
.decision-board .decision-board-header h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
.decision-board .decision-board-header h4.empty-placeholder {
  color: #2e384d4d;
}
@media (max-width: 999px) {
  .decision-board .decision-board-header h4 {
    font-size: 18px;
    line-height: 24px;
  }
}
.decision-board .decision-board-header h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #2e384d4d;
}
.decision-board .decision-board-header h5.empty-placeholder {
  color: #2e384d4d;
}
@media (max-width: 999px) {
  .decision-board .decision-board-header h5 {
    font-size: 18px;
    line-height: 24px;
  }
}
.decision-board .decision-board-header p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-color);
}
.decision-board .decision-board-header p.empty-placeholder {
  color: #2e384d4d;
}
.decision-board small {
  font-size: 12px;
  color: var(--secondary-color);
  font-weight: 400;
}
.decision-board small.urgent {
  color: #ee6565;
}
.decision-board.cta h4 {
  text-align: center;
}
.decision-board .decision-board-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.decision-board .decision-board-footer aside {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.decision-board .decision-board-footer aside a {
  color: var(--accent);
  text-decoration: underline;
}
.decision-board .decision-board-footer aside .decision-board-report {
  font-size: 0;
}
.decision-board .decision-board-footer .participants-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.decision-board .decision-board-footer .participants-summary .participant-badge {
  margin-right: -12px;
  background-color: #e5e5e5;
  color: #2e384d;
  width: 40px;
  border: 2px solid var(--tertiary-color);
  height: 40px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.decision-board .decision-board-footer .participants-summary .participant-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.decision-board .decision-board-footer .participants-summary .more-participants {
  background-color: #f5f5f5;
  color: #2e384d;
  border-radius: 999px;
  padding: 8px 8px;
  border: 2px solid var(--tertiary-color);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.decision-board .decision-board-footer .participants-summary span {
  font-size: 14px;
  color: var(--secondary-color);
}

.decision-board-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: calc(100vh - 105px);
  padding: 20px 40px 30px 40px;
  align-items: center;
}
.decision-board-wrapper .back-button {
  align-self: start;
}
@media (max-width: 999px) {
  .decision-board-wrapper {
    min-height: calc(100vh - 65px);
    padding: 0 20px 40px;
    gap: 20px;
  }
}
.decision-board-wrapper .decision-board-content {
  width: 100%;
  max-width: 1580px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns {
  display: grid;
  flex-direction: row;
  gap: 40px;
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-tabs {
  display: none;
}
@media (max-width: 1001px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns {
    gap: 30px;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-tabs {
    display: flex;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-solutions .decision-board-notifications,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-solutions .empty-state.draft-phase,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-solutions .empty-state.no-solutions-yet-but-can-create,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-solutions .decision-board-solutions-info .decision-board-solution-section {
    display: none !important;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-timeline,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-name-for-mobile-details,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-question-text-for-mobile-details,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-objectives,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-constraints,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-details .decision-board-datasources {
    display: none !important;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-management .decision-board-management-editing,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-management .decision-board-management-create-and-edit-solutions,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-management .decision-board-management-delete-existing-solutions,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-management .decision-board-management-deleting {
    display: none !important;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-participants .decision-board-participants-mobile,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-participants .decision-board-participants-desktop,
.decision-board-wrapper .decision-board-content .decision-board-columns.hide-tab-participants .empty-state.no-members-in-board-yet {
    display: none !important;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem-info-buttons {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  justify-content: space-between;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem-info-buttons .cta-button:first-child {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info h4 {
  font-weight: 600;
  font-size: 16px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info p {
  font-size: 15px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem h1 {
  font-size: 26px;
  margin-bottom: 8px;
  font-weight: 600;
  word-break: break-word;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem h1 {
    font-size: 20px;
    margin-bottom: 4px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem h1.empty-placeholder {
  color: #2e384d4d;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem p {
  font-size: 16px;
  word-break: break-word;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem p {
    font-size: 14px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-problem p.empty-placeholder {
  color: #2e384d4d;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-name-for-mobile-details {
  display: none;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-name-for-mobile-details {
    display: block;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-name-for-mobile-details h4 {
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-name-for-mobile-details p {
  font-size: 13px;
  color: #2e384d99;
  word-break: break-word;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-question-text-for-mobile-details {
  display: none;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-question-text-for-mobile-details {
    display: block;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-question-text-for-mobile-details h4 {
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-question-text-for-mobile-details p {
  font-size: 13px;
  color: #2e384d99;
  word-break: break-word;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-objectives h4 {
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-objectives p {
  font-size: 13px;
  color: #2e384d99;
  word-break: break-word;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-constraints h4 {
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-constraints p {
  font-size: 13px;
  color: #2e384d99;
  word-break: break-word;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  gap: 20px;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list {
  gap: 16px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 2px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource {
  display: flex;
  flex-direction: row;
  gap: 16px;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: #f9f7fa;
  min-height: 52px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource:first-child {
  border-radius: 8px 8px 0 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource:last-child {
  border-radius: 0 0 8px 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource svg {
  width: 16px;
  height: 16.8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource span {
  text-decoration: none;
  color: #2e384d;
  font-weight: 600;
  font-size: 15px;
  font-size: 13px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-datasources .decision-board-datasources-list .decision-board-datasource:hover {
  text-decoration: underline;
  background-color: #f7f2ff;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  gap: 20px;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop {
    display: none;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list {
  gap: 16px;
  gap: 2px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list.more-participants .participant-info {
  background: transparent;
  border: none;
  padding: 8px 0;
  padding: 0 0;
  min-height: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list.more-participants .participant-info .participant-name {
  color: #2e384d99;
  text-align: center;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  padding: 8px 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #f9f7fa;
  min-height: 52px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info:first-child {
  border-radius: 8px 8px 0 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info:last-child {
  border-radius: 0 0 8px 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info:first-child:last-child {
  border-radius: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info .participant-badge {
  background-color: var(--tertiary-color);
  color: #2e384d;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info .participant-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info .participant-name {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .participant-info .participant-name.email {
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-desktop .decision-board-participants-desktop-list .cta-button {
  margin-top: 20px;
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile {
  display: none;
  justify-content: space-between;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  gap: 20px;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile {
    display: flex;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list {
  gap: 16px;
  gap: 2px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list.more-participants .participant-info {
  background: transparent;
  border: none;
  padding: 8px 0;
  padding: 0 0;
  min-height: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list.more-participants .participant-info .participant-name {
  color: #2e384d99;
  text-align: center;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  padding: 8px 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #f9f7fa;
  min-height: 52px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info:first-child {
  border-radius: 8px 8px 0 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info:last-child {
  border-radius: 0 0 8px 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info:first-child:last-child {
  border-radius: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info .participant-badge {
  background-color: var(--tertiary-color);
  color: #2e384d;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info .participant-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info .participant-name {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .participant-info .participant-name.email {
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-participants-mobile .decision-board-participants-mobile-list .cta-button {
  margin-top: 20px;
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting .decision-board-management-deleting-headings h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting .decision-board-management-deleting-headings p {
  font-size: 13px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting .decision-board-management-deleting-actions {
  display: flex;
  flex-direction: row;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-deleting .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing {
  display: none;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing {
    display: flex;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing .decision-board-management-editing-headings h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing .decision-board-management-editing-headings p {
  font-size: 13px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing .decision-board-management-editing-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-problem-info .decision-board-management-editing .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions {
  display: none;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions {
    display: flex;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions .decision-board-management-create-and-edit-solutions-headings h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions .decision-board-management-create-and-edit-solutions-headings p {
  font-size: 13px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions .decision-board-management-create-and-edit-solutions-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-create-and-edit-solutions .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions {
  display: none;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions {
    display: flex;
  }
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions .decision-board-management-delete-existing-solutions-headings h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions .decision-board-management-delete-existing-solutions-headings p {
  font-size: 13px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions .decision-board-management-delete-existing-solutions-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-management-delete-existing-solutions .cta-button {
  width: 100%;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info:has(> *:not(.hidden):not([style*="display: none"]):not([style*="display:none"])) {
    display: flex;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info:has(> .hidden), .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info:empty {
    display: none !important;
  }
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info {
    gap: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state + .empty-state {
  margin-top: 30px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-headings {
  margin-bottom: 20px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-headings h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
  margin-bottom: 8px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-headings h4 {
    font-size: 14px;
    line-height: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-headings p {
  font-size: 17px;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-headings p {
    font-size: 14px;
    line-height: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card {
  display: flex;
  padding: 30px;
  gap: 40px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border: 1px dashed #958dd5;
  border-radius: 16px;
  background-color: var(--tertiary-color);
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card {
    padding: 16px;
    gap: 20px;
    flex-direction: column;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card img {
  width: 225px;
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card img {
    display: none;
  }
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas {
    width: 100%;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas .cta-button {
  width: 100%;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas .cta-button {
    padding: 10px 16px;
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas .cta-button span {
    font-size: 12px;
    line-height: 16px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas h3 {
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #2e384d;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas h3 {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas .cta-button + h3 {
  margin-top: 16px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .empty-state .empty-state-card .empty-state-ctas .cta-button + .cta-button {
  margin-top: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section .decision-board-solutions {
  margin-top: 30px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section .decision-board-solutions {
    margin-top: 0px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.chosen-solution-section {
  border-radius: 16px;
  padding: 30px;
  /* background: rgb(255 255 255 / 100%); */
  box-shadow: 0px 2px 8px 0px #d5c9eeb5;
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.chosen-solution-section {
    padding: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.chosen-solution-section .decision-board-solutions {
  margin-top: 30px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.chosen-solution-section .decision-board-solutions-header h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.chosen-solution-section .decision-board-solutions-header p {
  font-size: 16px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.not-chosen-solution-section .decision-board-solutions-header h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-section.not-chosen-solution-section .decision-board-solutions-header p {
  font-size: 16px;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-status {
  margin-bottom: 20px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solution-status h2 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 888px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions {
    gap: 20px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution {
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  overflow: hidden;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content {
  padding: 20px;
  max-height: 260px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content {
    padding: 16px;
  }
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content {
    max-height: 170px;
  }
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .spacer {
    height: 20px;
  }
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .spacer {
    display: none;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content h5 {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content h5 {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content p {
  font-size: 14px;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content p {
    font-size: 12px;
    -webkit-line-clamp: 1;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content h5 + p {
  margin-top: 8px;
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content h5 + p {
    margin-top: 0;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
  justify-content: space-between;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons {
    gap: 20px;
  }
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons {
    margin-top: 16px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header {
    margin-bottom: 10px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header svg,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header svg {
    width: 14px;
    height: 14px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-pros-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons .solution-cons-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-pros-header h3,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros .solution-cons-header h3 {
    font-size: 12px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li {
  padding: 8px 16px;
  background-color: #f9f7fa;
  border-radius: 8px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li {
    padding: 8px 12px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li:first-child,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li:first-child {
  border-radius: 8px 8px 0 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li:last-child,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li:last-child {
  border-radius: 0 0 8px 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li:not(:first-child):not(:last-child),
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li:first-child:last-child,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li:first-child:last-child {
  border-radius: 8px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li span,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li span {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li span,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li span {
    font-size: 12px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li + li,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li + li {
  margin-top: 8px;
  margin-top: 2px;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-cons li + li,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-content .decision-board-solution-pros-and-cons .solution-pros li + li {
    margin-top: 2px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer {
  overflow: hidden;
  box-shadow: 0px -10px 10px 0px #ffffff99;
  padding: 20px;
  background-color: var(--tertiary-color);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eeeeee90;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer {
    padding: 16px;
  }
}
@media (max-width: 999px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
@media (max-width: 999px) and (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer {
    flex-direction: row;
  }
}
@media (max-width: 999px) and (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer {
    gap: 12px;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information:empty, .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information:not(:has(> *:not(:empty))),
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications:empty,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications:not(:has(> *:not(:empty))) {
  display: none;
}
@media (max-width: 501px) {
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information .notification.pros-and-cons,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications .notification.pros-and-cons {
    max-width: calc(100vw - 185px);
  }
  .decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information .notification.pros-and-cons span,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications .notification.pros-and-cons span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
}
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-information .decision-board-read-more,
.decision-board-wrapper .decision-board-content .decision-board-columns .decision-board-solutions-info .decision-board-solutions .decision-board-solution .decision-board-solution-footer .decision-board-rating-notifications .decision-board-read-more {
  min-width: max-content;
}

.decision-board-tabs {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.decision-board-tabs .decision-board-tab {
  cursor: pointer;
}
.decision-board-tabs .decision-board-tab span {
  color: #6c55e7;
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
}
.decision-board-tabs .decision-board-tab.active {
  border-bottom: 2px solid #6c55e7;
}
/**
 * @fileoverview Take Decision Page Styles
 * 
 * This file contains styles for the decision-making page where users can
 * review solutions, select their preferred options, and provide justification
 * for their final decision.
 * 
 * Used by:
 * - source/templates/views/signed-in/take-decision.pug (decision-making page)
 * 
 * Key Components:
 * - .take-decision-wrapper: Main page container
 * - .take-decision-content: Content area with solution listings
 * - .take-decision-header: Page title and instructions
 * - .take-decision-solutions: Solution selection interface
 * - .take-decision-solution-card: Individual solution cards with selection
 * - .take-decision-justification-and-save: Decision justification form area
 * - .solution-selection-checkbox: Solution selection controls
 * - .decision-justification-field: Text area for decision reasoning
 * - .decision-submit-actions: Final decision submission controls
 * - .solution-preview: Condensed solution display for decision context
 * - .decision-summary: Selected solutions summary display
 * 
 * Layout Features:
 * - Solution selection interface with checkboxes
 * - Justification text area with validation
 * - Responsive layout for mobile and desktop
 * - Solution card styling optimized for decision-making
 * - Clear visual hierarchy for decision process
 * 
 * Dependencies:
 * - Uses utility classes from utils.scss (.cta-button, .notification)
 * - Uses form styles from forms.scss for decision justification
 * - Uses CSS custom properties from layout.scss
 * - Imported after page-decision-board.scss in perspectives.scss
 */
.take-decision-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: calc(100vh - 105px);
  padding: 0 40px 0 40px;
  align-items: center;
}
.take-decision-wrapper .back-button {
  align-self: start;
}
.take-decision-wrapper .take-decision-justification-and-save #field-decision-text label.field-label {
  margin-bottom: 16px;
}
.take-decision-wrapper .take-decision-justification-and-save #field-decision-text label.field-label h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--primary-color);
  text-align: left;
}
.take-decision-wrapper .take-decision-justification-and-save #field-decision-text label.field-label p {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #2e384d99;
  text-align: left;
}
@media (max-width: 999px) {
  .take-decision-wrapper {
    min-height: calc(100vh - 65px);
    padding: 0 20px 40px;
  }
}

.take-decision-content {
  width: 100%;
  max-width: 1580px;
}

.take-decision-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
@media (max-width: 888px) {
  .take-decision-columns {
    grid-template-columns: 1fr;
  }
}

.take-decision-info {
  margin-bottom: 30px;
}

.take-decision-form,
.take-decision-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.take-decision-form .take-decision-headings h2,
.take-decision-info .take-decision-headings h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}
.take-decision-form .take-decision-headings p,
.take-decision-info .take-decision-headings p {
  font-size: 16px;
  font-weight: 400;
  color: #2e384d99;
}
.take-decision-form .take-decision-solutions-list,
.take-decision-info .take-decision-solutions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default checkbox */
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .hide,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .hide {
  display: none;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked {
  border: 2px solid #5433ff;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-header,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-header {
  padding: 18px 28px 20px;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-content,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-content {
  padding: 20px 28px 18px;
}
@media (max-width: 999px) {
  .take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-content,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-content {
    padding: 20px 18px 18px;
  }
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .show,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .show {
  display: none;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .hide,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .hide {
  display: block;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-info,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox.checked .take-decision-card-info {
  font-weight: 600;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox input,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  background-color: var(--tertiary-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 20px 30px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info .hide,
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info .show,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info .hide,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info .show {
  font-size: 0px;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info span,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-header .take-decision-card-info span {
  font-size: 15px;
  color: #958dd5;
  line-height: 20px;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #fdfcfd;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 100%;
}
@media (max-width: 999px) {
  .take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content {
    gap: 20px;
    padding: 20px;
  }
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-texts h3,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-texts h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2e384d;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-texts p,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-texts p {
  font-size: 17px;
  color: #2e384d99;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating span,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating span {
  white-space: nowrap;
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  color: #2e384d99;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating p,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating p {
  white-space: nowrap;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #2e384d99;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating .take-decision-card-rating-bar,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating .take-decision-card-rating-bar {
  overflow: hidden;
  position: relative;
  background-color: #f9f7fa;
  height: 8px;
  border-radius: 999px;
}
.take-decision-form .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating .take-decision-card-rating-bar .take-decision-card-rating-bar-percentage,
.take-decision-info .take-decision-solutions-list .take-decision-card-checkbox .take-decision-card-content .take-decision-card-rating .take-decision-card-rating-bar .take-decision-card-rating-bar-percentage {
  background-color: #958dd5;
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
}

.take-decision-form {
  min-height: calc(100vh - 149px);
  max-height: calc(100vh - 149px);
  padding-bottom: 30px;
}
@media (max-width: 888px) {
  .take-decision-form {
    min-height: 50vh;
  }
}

.take-decision-justification-and-save {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
  margin-bottom: 30px;
}
.take-decision-justification-and-save .form-field {
  height: 100%;
}
.take-decision-justification-and-save .form-field textarea {
  height: 100%;
}

/**
 * @fileoverview Solution Pages Common Styles
 * 
 * This file contains shared styles for solution-related pages including
 * solution viewing and editing. It provides common layout patterns,
 * navigation elements, and component styles used across solution pages.
 * 
 * Used by:
 * - source/templates/views/signed-in/page-solution-view.pug (solution viewing page)
 * - source/templates/views/signed-in/page-solution-edit.pug (solution editing page)
 * 
 * Key Components:
 * - .solution-wrapper: Main page container for solution pages
 * - .solution-content: Content area with responsive layout
 * - .solution-header: Solution title and navigation area
 * - .solution-navigation: Previous/Next solution navigation
 * - .solution-details: Solution information display
 * - .solution-description: Solution description text area
 * - .solution-pros-and-cons: Pros and cons listing
 * - .solution-implementation: Implementation steps display
 * - .solution-rating: Rating interface and display
 * - .solution-discussion: Discussion thread component
 * - .solution-actions: Action buttons and controls
 * - .solution-metadata: Solution metadata and status
 * - .thread: Discussion thread styling (shared component)
 * - .thread-messages: Message listing in discussions
 * - .thread-input: Message input interface
 * 
 * Layout Features:
 * - Responsive layout optimized for content reading
 * - Navigation between solutions
 * - Discussion thread integration
 * - Rating interface components
 * - Mobile-optimized spacing and typography
 * 
 * Dependencies:
 * - Uses utility classes from utils.scss (.cta-button, .notification, etc.)
 * - Uses form styles from forms.scss for editing interfaces
 * - Uses CSS custom properties from layout.scss
 * - Extended by page-solution-view.scss and page-solution-edit.scss
 * - Imported after page-take-decision.scss in perspectives.scss
 */
.solution-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: calc(100vh - 105px);
  padding: 0 40px 0 40px;
  align-items: center;
}
.solution-wrapper .back-button {
  align-self: start;
}
@media (max-width: 999px) {
  .solution-wrapper {
    min-height: calc(100vh - 65px);
    padding: 0 20px 40px;
  }
}
.solution-wrapper .solution-content {
  width: 100%;
  max-width: 1580px;
}
.solution-wrapper .solution-content .solution-columns {
  display: grid;
  flex-direction: row;
  gap: 40px;
  grid-template-columns: 2fr 1fr;
  align-items: flex-start;
}
@media (max-width: 1001px) {
  .solution-wrapper .solution-content .solution-columns {
    grid-template-columns: 1fr;
  }
}
.solution-wrapper .solution-thread {
  border-radius: 16px;
  height: calc(100vh - 149px);
  max-height: calc(100vh - 149px);
  padding-bottom: 30px;
}
@media (max-width: 999px) {
  .solution-wrapper .solution-thread {
    display: none;
  }
}
.solution-wrapper .solution-thread.fixed {
  display: block;
  height: auto;
  max-height: 100%;
  padding-bottom: 0;
  margin-top: 30px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out, box-shadow 0.1s;
}
.solution-wrapper .solution-thread .solution-thread-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border-radius: 16px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-header {
  background-color: var(--tertiary-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  display: flex;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-header .close-chat-button {
  display: none;
  min-height: 40px;
  min-width: 40px;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  color: #5433ff;
  font-size: 24px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (max-width: 999px) {
  .solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-header .close-chat-button {
    display: flex;
  }
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-header h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content {
  background-color: #fdfcfd;
  padding: 20px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content:empty::after {
  content: "No messages yet";
  color: #2e384d99;
  font-size: 15px;
  font-weight: 400;
  display: block;
  text-align: center;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message.pending {
  opacity: 0.5;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message.from-customer {
  align-items: flex-end;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message.from-customer .message-content {
  background-color: #ebe0ff;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message.from-customer .message-author {
  flex-direction: row-reverse !important;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header {
  margin-top: 20px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .cta-button {
  display: none;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .message-author {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .message-author .message-author-avatar {
  width: 30px;
  height: 30px;
  background-color: #f2ebff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .message-author .message-author-avatar img {
  width: 100%;
  border-radius: 50%;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .message-author .message-author-avatar span {
  color: #948cd5;
  font-size: 10px;
  font-weight: 500;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-header .message-author .message-author-title {
  font-size: 15px;
  font-weight: 600;
  color: #2e384d;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-content {
  padding: 12px 16px;
  background-color: #f7f2ff;
  border-radius: 8px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-content p {
  font-size: 13px;
  font-weight: 400;
  color: var(--primary-color);
  word-break: break-word;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-footer {
  line-height: 1;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-content .message .message-footer span {
  font-size: 12px;
  font-weight: 600;
  color: #2e384d99;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  padding: 20px;
  background-color: var(--tertiary-color);
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer form .form-field {
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer form .form-field textarea {
  padding: 8px 16px;
  width: 100%;
  font-size: 15px;
  resize: none;
  max-height: 69px;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer form .form-field .cta-button {
  min-width: 40px;
  margin-top: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #aa99ff;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer form .form-field .cta-button.typing {
  background-color: #5433ff;
}
.solution-wrapper .solution-thread .solution-thread-wrapper .solution-thread-footer form .form-field .cta-button svg {
  width: 20px;
  height: 20px;
}

/**
 * @fileoverview Solution Edit Page Styles
 * 
 * This file contains styles specific to the solution editing page,
 * including form interfaces, inline editing components, and
 * solution management features.
 * 
 * Used by:
 * - source/templates/views/signed-in/page-solution-edit.pug (solution editing page)
 * 
 * Key Components:
 * - .edit-solution-debug: Debug information display
 * - .solution-edit-form: Main solution editing form
 * - .solution-title-edit: Solution title editing interface
 * - .solution-description-edit: Description editing textarea
 * - .pros-and-cons-edit: Pros and cons editing interface
 * - .implementation-steps-edit: Implementation steps management
 * - .solution-save-actions: Save and cancel controls
 * - .inline-edit-field: Inline editing components
 * - .add-item-interface: Add new pros/cons/steps interface
 * - .edit-mode-indicators: Visual indicators for edit state
 * - .solution-form-validation: Form validation styling
 * - .edit-solution-navigation: Navigation during editing
 * 
 * Layout Features:
 * - Inline editing interfaces with smooth transitions
 * - Form validation and error handling
 * - Drag-and-drop reordering for lists
 * - Auto-save indicators and controls
 * - Mobile-optimized editing interfaces
 * 
 * Dependencies:
 * - Extends page-solution-common.scss for base layout
 * - Uses form styles from forms.scss for editing interfaces
 * - Uses utility classes from utils.scss (.cta-button, .dragging, etc.)
 * - Uses CSS custom properties from layout.scss
 * - Imported after page-solution-common.scss in perspectives.scss
 */
.edit-solution-debug {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.edit-solution-debug h2 {
  font-size: 24px;
  font-weight: 600;
}
.edit-solution-debug a {
  color: var(--tertiary-color);
  font-size: 16px;
  font-weight: 400;
}

.solution-edit-info-pros-header,
.solution-edit-info-cons-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.solution-edit-info-pros-header h3,
.solution-edit-info-cons-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
}

/* Implementation steps header - edit mode */
.solution-edit-info-implementation-steps-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.solution-edit-info-implementation-steps-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
  margin: 0;
}
.solution-edit-info-implementation-steps-header svg {
  width: 18px;
  height: 18px;
  fill: #958dd5;
}

/* Add More Buttons Section */
.solution-edit-info-add-buttons {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  width: 100%;
  grid-column: 1/-1;
  /* Take full width if inside any grid */
}
@media (max-width: 999px) {
  .solution-edit-info-add-buttons {
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }
}
.solution-edit-info-add-buttons .cta-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 999px) {
  .solution-edit-info-add-buttons .cta-button {
    width: 100%;
  }
}

/* Main implementation steps container - edit mode */
.solution-edit-info-implementation-steps {
  border-top: 1px solid #e5e5e5;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  width: 100%;
  grid-column: 1/-1;
  /* Take full width if inside any grid */
}

/* Structured Implementation Steps - Edit Mode */
.field-input.structured-step {
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  transition: border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
.field-input.structured-step:hover {
  border-color: var(--color-border-hover);
}
.field-input.structured-step:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.field-input.structured-step .handle {
  position: absolute;
  top: 1rem;
  left: 1rem;
  cursor: grab;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.field-input.structured-step .handle:hover {
  opacity: 1;
}
.field-input.structured-step .handle:active {
  cursor: grabbing;
}
.field-input.structured-step .step-fields-two-column {
  margin-left: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.field-input.structured-step .step-fields-single-column {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Add right padding to account for remove button */
}
.field-input.structured-step .step-field-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .field-input.structured-step .step-field-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
.field-input.structured-step .step-fields-single-column .step-field-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}
.field-input.structured-step .step-fields-single-column .step-field-row .step-field-label {
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: #7c7c7c;
  font-weight: 500;
}
.field-input.structured-step .step-fields-single-column .step-field-row input,
.field-input.structured-step .step-fields-single-column .step-field-row textarea {
  width: 100%;
  box-sizing: border-box;
}
.field-input.structured-step .step-field-label-column {
  display: flex;
  align-items: flex-start;
  padding-top: 0.75rem;
  /* Align with input field padding */
}
@media (max-width: 768px) {
  .field-input.structured-step .step-field-label-column {
    padding-top: 0;
  }
}
.field-input.structured-step .step-field-input-column {
  display: flex;
  flex-direction: column;
}
.field-input.structured-step .step-field-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  margin: 0;
  /* Add visual indicator for required fields */
}
.field-input.structured-step .step-field-label:has(+ input[required])::after, .field-input.structured-step .step-field-label:has(+ textarea[required])::after {
  content: " *";
  color: var(--color-error, #e74c3c);
  font-weight: normal;
}
.field-input.structured-step .step-title-input {
  padding: 8px 16px;
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--tertiary-color);
  transition: all 0.2s ease;
  font-weight: 600;
  color: #2e384d;
  width: 100%;
}
.field-input.structured-step .step-title-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.field-input.structured-step .step-title-input::placeholder {
  color: #bbb6d4;
  font-style: italic;
  opacity: 0.7;
  font-weight: 300;
}
.field-input.structured-step .step-subtitle-input,
.field-input.structured-step .step-details-textarea {
  padding: 8px 16px;
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--tertiary-color);
  transition: all 0.2s ease;
  resize: none;
  /* Disable manual resize for solution-edit-auto-grow-implementation-step-field */
  font-family: inherit;
  line-height: 1.4;
  color: #2e384d;
  width: 100%;
  overflow: hidden;
  /* Hide scrollbar for solution-edit-auto-grow-implementation-step-field */
  /* solution edit implementation steps auto-grow functionality */
  /* Auto-grow height and min-height are handled by JavaScript */
}
.field-input.structured-step .step-subtitle-input:focus,
.field-input.structured-step .step-details-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.field-input.structured-step .step-subtitle-input::placeholder,
.field-input.structured-step .step-details-textarea::placeholder {
  color: #bbb6d4;
  font-style: italic;
  opacity: 0.7;
  font-weight: 300;
}
.field-input.structured-step .step-subtitle-input {
  /* Only apply min-height to non-auto-grow textareas */
}
.field-input.structured-step .step-subtitle-input:not(.solution-edit-auto-grow-implementation-step-field) {
  min-height: 2.5rem;
}
.field-input.structured-step .step-details-textarea {
  line-height: 1.5;
  /* Only apply min-height to non-auto-grow textareas */
}
.field-input.structured-step .step-details-textarea:not(.solution-edit-auto-grow-implementation-step-field) {
  min-height: 4rem;
}
.field-input.structured-step .remove-implementation-step-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-input.structured-step .remove-implementation-step-button:hover {
  background: var(--color-background-error-light);
  color: var(--color-error);
}
.field-input.structured-step .remove-implementation-step-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.2);
}

/* Legacy implementation steps edit mode */
.solution-edit-info-implementation-steps .implementation-steps-list .field-input {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  position: relative;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: grab;
  color: #6c757d;
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .handle:active {
  cursor: grabbing;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .handle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input textarea {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: #2e384d;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  background-color: var(--tertiary-color);
  /* Only apply min-height to non-auto-grow textareas */
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input textarea:not(.solution-edit-auto-grow-implementation-step-field) {
  min-height: 60px;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input textarea:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input textarea::placeholder {
  color: #bbb6d4;
  font-style: italic;
  opacity: 0.7;
  font-weight: 300;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .remove-implementation-step-button {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0.5rem;
  transition: background-color 0.2s ease;
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .remove-implementation-step-button:hover {
  background-color: rgba(220, 53, 69, 0.1);
}
.solution-edit-info-implementation-steps .implementation-steps-list .field-input .remove-implementation-step-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Add implementation step button */
.add-implementation-step-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 20px;
  width: 100%;
  /* Let it inherit from .cta-button.secondary-cta global styles */
}
.add-implementation-step-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Character count indicators */
.step-field-group {
  position: relative;
}
.step-field-group .character-count {
  position: absolute;
  bottom: -1.25rem;
  right: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.step-field-group .character-count.near-limit {
  color: var(--color-warning);
}
.step-field-group .character-count.at-limit {
  color: var(--color-error);
}

/* Responsive design for edit mode */
@media (max-width: 768px) {
  .field-input.structured-step {
    padding: 1rem;
  }
  .field-input.structured-step .step-fields-two-column {
    margin-left: 0;
    margin-top: 2.5rem;
  }
  .field-input.structured-step .step-fields-single-column {
    margin-left: 0;
    margin-top: 2.5rem;
    padding-left: 2rem;
    /* Reduced on mobile */
    padding-right: 2rem;
    /* Reduced on mobile */
  }
  .field-input.structured-step .handle {
    top: 0.75rem;
    left: 0.75rem;
  }
  .field-input.structured-step .remove-implementation-step-button {
    top: 0.75rem;
    right: 0.75rem;
  }

  .solution-edit-info-implementation-steps .implementation-steps-list .field-input {
    flex-direction: column;
    align-items: stretch;
  }
  .solution-edit-info-implementation-steps .implementation-steps-list .field-input .handle {
    align-self: flex-start;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  .solution-edit-info-implementation-steps .implementation-steps-list .field-input .remove-implementation-step-button {
    align-self: flex-end;
    margin-top: 0.5rem;
  }
}
/* Sortable list enhancements for structured steps */
.sortable-list .structured-step.ui-sortable-helper {
  transform: rotate(1deg);
  /* Reduced rotation for less dramatic effect */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--color-primary);
  z-index: 1000;
  opacity: 0.9;
  cursor: grabbing;
}

.sortable-list .structured-step.ui-sortable-placeholder {
  border: 2px dashed var(--color-border-light);
  background: var(--color-background-light);
  min-height: 80px;
  /* Further reduced minimum height */
  height: auto;
  margin-bottom: 1rem;
  opacity: 0.7;
}

/* Custom placeholder styling for the JavaScript implementation */
.sortable-list .placeholder {
  border: 2px dashed var(--color-border-light);
  background: var(--color-background-light);
  min-height: 80px;
  height: auto !important;
  /* Allow JavaScript to set height */
  margin-bottom: 1rem;
  opacity: 0.7;
  border-radius: 8px;
  list-style: none;
}

/* Sortable list dragover state */
.implementation-steps-list.sortable-list .field-input.ui-sortable-helper {
  transform: rotate(2deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.implementation-steps-list.sortable-list .field-input.ui-sortable-placeholder {
  background-color: rgba(52, 152, 219, 0.1);
  border: 2px dashed #3498db;
  visibility: visible !important;
  height: auto !important;
  min-height: 80px;
  /* Slightly increased for better visual feedback */
  border-radius: 8px;
  opacity: 0.8;
}

/* Animation for adding/removing steps */
.implementation-step,
.field-input {
  transition: all 0.3s ease;
}

.implementation-step.removing,
.field-input.removing {
  opacity: 0;
  transform: translateX(-20px);
}

/* Animation for adding new steps */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.field-input.structured-step.newly-added {
  animation: slideInUp 0.3s ease-out;
}

/* Focus states for accessibility */
.add-implementation-step-button:focus,
.remove-implementation-step-button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.field-input.structured-step:focus-within .step-field-label {
  color: var(--color-primary);
}

/* Print styles for edit mode */
@media print {
  .solution-edit-info-implementation-steps {
    page-break-inside: avoid;
  }

  .add-implementation-step-button,
.remove-implementation-step-button,
.handle {
    display: none !important;
  }

  .field-input.structured-step .remove-implementation-step-button,
.field-input.structured-step .handle {
    display: none;
  }
}
.solution-management {
  display: none;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
@media (max-width: 888px) {
  .solution-management {
    padding: 20px;
    display: flex;
  }
}
.solution-management .solution-management-headings h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.solution-management .solution-management-headings p {
  font-size: 13px;
  color: #2e384d99;
}
.solution-management .solution-management-actions {
  display: flex;
  flex-direction: row;
}
.solution-management .cta-button {
  width: 100%;
}

.solution-edit-info {
  border-radius: 16px;
  min-height: calc(100vh - 149px);
  height: 100%;
  max-height: calc(100vh - 149px);
  padding-bottom: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info {
    min-height: auto;
    padding-bottom: 0;
  }
}
.solution-edit-info .solution-edit-info-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border-radius: 16px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-wrapper {
    box-shadow: none;
    gap: 30px;
  }
}
.solution-edit-info .solution-edit-info-header {
  background-color: var(--tertiary-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  z-index: 1;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-header {
    box-shadow: none;
    background-color: var(--background);
    padding: 0;
    position: relative;
  }
}
.solution-edit-info .solution-edit-info-header h4,
.solution-edit-info .solution-edit-info-header input {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
.solution-edit-info .solution-edit-info-header .solution-edit-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 888px) {
  .solution-edit-info .solution-edit-info-header .solution-edit-actions .delete-solution-button,
.solution-edit-info .solution-edit-info-header .solution-edit-actions #save-button {
    display: none;
  }
  .solution-edit-info .solution-edit-info-header .solution-edit-actions .cta-button {
    min-width: auto;
    width: 100%;
  }
}
.solution-edit-info .solution-edit-info-header .solution-edit-actions .cta-button {
  width: fit-content;
  min-width: 122px;
}
.solution-edit-info .solution-edit-info-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 30px;
  background-color: #fdfcfd;
  height: 100%;
  overflow-y: auto;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding: 0;
    background-color: var(--background);
  }
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-name-and-description textarea {
  resize: none;
  overflow: hidden;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  justify-content: space-between;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .cta-button {
  margin-top: 20px;
  color: #5433ff;
  display: none;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .cta-button {
    display: flex;
    width: 100%;
  }
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .field-input {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .field-input textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  background-color: var(--tertiary-color);
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .remove-pro-button,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .remove-con-button {
  border-radius: 8px;
  color: #2e384d99;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons li + li {
  margin-top: 40px;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .cta-button,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .cta-button {
  width: 100%;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-pros-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-cons-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-pros-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-cons-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-pros-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-cons-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-pros-header,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-cons-header {
    margin-bottom: 20px;
  }
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-pros-header h3,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons .solution-edit-info-cons-header h3,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-pros-header h3,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros .solution-edit-info-cons-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons ul,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros ul {
  user-select: none;
  position: relative;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons li,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros li {
  word-break: break-word;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons li.dragging,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros li.dragging {
  opacity: 0.8;
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  width: 100%;
  /* Ensures the item retains its width */
  left: 0;
  transform: rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  /* Aligns correctly */
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons li.dragging button,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros li.dragging button {
  opacity: 0;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-cons textarea,
.solution-edit-info .solution-edit-info-content .solution-edit-info-pros-and-cons .solution-edit-info-pros textarea {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d;
  padding: 8px 16px;
  border: 1px solid #ebe0ff;
  border-radius: 8px;
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-add-buttons {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content .solution-edit-info-add-buttons {
    display: none;
    /* Hide on mobile as footer buttons are used */
  }
}
.solution-edit-info .solution-edit-info-content .solution-edit-info-implementation-steps {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content .solution-edit-info-implementation-steps {
    margin-top: 20px;
  }
}
.solution-edit-info .solution-edit-info-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  padding: 20px;
  background-color: var(--tertiary-color);
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-footer {
    display: none;
  }
}
.solution-edit-info .solution-edit-info-footer .solution-edit-info-footer-actions {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.solution-edit-info .solution-edit-info-footer .solution-edit-info-footer-actions .cta-button {
  width: 100%;
}

.solution-edit-info {
  border-radius: 16px;
  height: calc(100vh - 149px);
  max-height: calc(100vh - 149px);
  padding-bottom: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info {
    height: auto;
    max-height: none;
  }
}
.solution-edit-info .solution-edit-info-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border-radius: 16px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-wrapper {
    box-shadow: none;
    gap: 30px;
  }
}
.solution-edit-info .solution-edit-info-header {
  background-color: var(--tertiary-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-header {
    box-shadow: none;
    background-color: var(--background);
    padding: 0;
    position: relative;
  }
}
.solution-edit-info .solution-edit-info-header h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
.solution-edit-info .solution-edit-info-header .solution-edit-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.solution-edit-info .solution-edit-info-header .solution-edit-actions .cta-button {
  width: fit-content;
  min-width: 122px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-header .solution-edit-actions .cta-button {
    min-width: auto;
  }
  .solution-edit-info .solution-edit-info-header .solution-edit-actions .cta-button span {
    display: none;
  }
}
.solution-edit-info .solution-edit-info-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 30px;
  background-color: #ffffff99;
  height: 100%;
  overflow-y: auto;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-content {
    padding: 0;
    background-color: var(--background);
  }
}
.solution-edit-info .solution-edit-info-pros-and-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  justify-content: space-between;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-pros-and-cons {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.solution-edit-info .solution-edit-info-pros-and-cons .cta-button {
  margin-top: 20px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-pros-and-cons .cta-button {
    width: 100%;
  }
}
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-pros ul .field-input,
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-cons ul .field-input {
  display: flex;
  align-items: center;
  position: relative;
}
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-pros ul .field-input .handle,
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-cons ul .field-input .handle {
  cursor: grab;
}
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-pros ul .field-input textarea,
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-cons ul .field-input textarea {
  width: 100%;
}
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-pros ul .field-input button,
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-cons ul .field-input button {
  cursor: pointer;
}
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-pros ul li.dragging,
.solution-edit-info .solution-edit-info-pros-and-cons .solution-edit-info-cons ul li.dragging {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  width: calc(100% - 10px);
  opacity: 0.8;
  transform: rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.solution-edit-info .solution-edit-info-add-buttons {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-add-buttons {
    display: none;
    /* Hide on mobile as footer buttons are used */
  }
}
.solution-edit-info .solution-edit-info-implementation-steps {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-implementation-steps {
    margin-top: 20px;
  }
}
.solution-edit-info .solution-edit-info-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  padding: 20px;
  background-color: var(--tertiary-color);
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-footer {
    border-radius: 16px;
  }
}
.solution-edit-info .solution-edit-info-footer .solution-edit-info-footer-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
}
@media (max-width: 999px) {
  .solution-edit-info .solution-edit-info-footer .solution-edit-info-footer-actions {
    flex-direction: column;
    gap: 16px;
  }
  .solution-edit-info .solution-edit-info-footer .solution-edit-info-footer-actions .cta-button {
    width: 100%;
  }
}

.solution-management {
  border-radius: 16px;
  margin-top: 30px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
}
.solution-management .solution-management-headings {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  background-color: var(--tertiary-color);
  border-bottom: 1px solid #ebe0ff;
}
.solution-management .solution-management-headings h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
  margin-bottom: 8px;
}
.solution-management .solution-management-headings p {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d99;
}
.solution-management .solution-management-actions {
  padding: 20px;
  background-color: var(--tertiary-color);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.solution-management .solution-management-actions .cta-button {
  width: 100%;
}

/**
 * @fileoverview Solution View Page Styles
 * 
 * This file contains styles specific to the solution viewing page,
 * including read-only solution display, rating interfaces, and
 * discussion components.
 * 
 * Used by:
 * - source/templates/views/signed-in/page-solution-view.pug (solution viewing page)
 * 
 * Key Components:
 * - .view-solution-debug: Debug information display
 * - .solution-view-content: Main solution content display
 * - .solution-title-display: Solution title presentation
 * - .solution-description-display: Description text display
 * - .pros-and-cons-display: Pros and cons listing
 * - .implementation-steps-display: Implementation steps presentation
 * - .solution-rating-interface: Rating and voting controls
 * - .solution-rating-display: Rating results and statistics
 * - .solution-discussion-thread: Discussion thread component
 * - .solution-navigation-controls: Previous/Next navigation
 * - .solution-metadata-display: Solution metadata and status
 * - .solution-actions-readonly: Available actions for viewers
 * 
 * Layout Features:
 * - Optimized for content reading and consumption
 * - Interactive rating and voting interfaces
 * - Discussion thread integration
 * - Solution navigation between multiple solutions
 * - Responsive layout for mobile and desktop viewing
 * - Status-based conditional styling
 * 
 * Dependencies:
 * - Extends page-solution-common.scss for base layout
 * - Uses utility classes from utils.scss (.cta-button, .notification, etc.)
 * - Uses CSS custom properties from layout.scss
 * - Imported after page-solution-edit.scss in perspectives.scss
 */
.view-solution-debug {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.view-solution-debug h2 {
  font-size: 24px;
  font-weight: 600;
}
.view-solution-debug a {
  color: var(--tertiary-color);
  font-size: 16px;
  font-weight: 400;
}

/* Pros and cons grid layout */
.solution-view-info-pros-and-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .solution-view-info-pros-and-cons {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }
}

.solution-view-info-pros-header,
.solution-view-info-cons-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.solution-view-info-pros-header h3,
.solution-view-info-cons-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
}

/* Implementation steps list container */
.implementation-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.solution-view-info-implementation-steps-header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.solution-view-info-implementation-steps-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
  margin: 0;
}
.solution-view-info-implementation-steps-header svg {
  width: 18px;
  height: 18px;
  fill: #3498db;
}

/* Main implementation steps container - view mode */
.solution-view-info-implementation-steps {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 40px;
  /* Add spacing after implementation steps section */
  /* Styling is now handled within .solution-view-info-content grid area */
}

/* Structured Implementation Steps - View Mode */
.implementation-step.structured {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #f9f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
  overflow: hidden;
}
@media (max-width: 999px) {
  .implementation-step.structured {
    background-color: var(--tertiary-color);
  }
}
.implementation-step.structured .step-header-section {
  display: flex;
  align-items: flex-start;
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
}
.implementation-step.structured .step-header-section .step-number {
  display: none;
  /* Hide step numbers as requested */
}
.implementation-step.structured .step-header-section .step-main-content {
  flex: 1;
  min-width: 0;
}
.implementation-step.structured .step-header-section .step-main-content .step-title {
  font-size: 14px;
  font-weight: 600;
  color: #2e384d;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
  word-break: break-word;
}
.implementation-step.structured .step-header-section .step-main-content .step-subtitle {
  font-size: 14px;
  color: #2e384d;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
  padding-right: 3rem;
  /* Space for expand icon */
  word-break: break-word;
}
.implementation-step.structured .step-header-section .expand-icon {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.implementation-step.structured .step-header-section .expand-icon svg {
  width: 16px;
  height: 8px;
  fill: currentColor;
}
.implementation-step.structured .step-header-section .expand-icon.expanded {
  transform: rotate(180deg);
}
.implementation-step.structured .step-details {
  font-size: 14px;
  line-height: 1.6;
  color: #2e384d;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  /* Completely collapsed when not expanded */
  word-break: break-word;
  transition: max-height 0.3s ease;
}
.implementation-step.structured .step-details.expanded {
  max-height: 1000px;
  /* Large enough to accommodate 2-3 paragraphs */
  padding: 0.5rem 16px 8px 16px;
  /* Reduced top padding for better spacing */
}
.implementation-step.structured .step-details p {
  margin: 0 0 1rem 0;
}
.implementation-step.structured .step-details p:last-child {
  margin-bottom: 0;
}

/* Legacy implementation steps list - view mode */
.implementation-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
}

/* Implementation steps preview in take decision cards */
.solution-implementation-preview {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ecf0f1;
}
.solution-implementation-preview h4 {
  margin: 0 0 0.75rem 0;
  color: #2c3e50;
  font-size: 0.9rem;
  font-weight: 600;
}

.implementation-steps-preview {
  list-style: none;
  padding: 0;
  margin: 0;
}
.implementation-steps-preview .implementation-step-preview {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}
.implementation-steps-preview .implementation-step-preview::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: #bdc3c7;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.implementation-steps-preview .implementation-step-preview.structured {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
  padding-left: 0;
}
.implementation-steps-preview .implementation-step-preview.structured:last-child {
  border-bottom: none;
}
.implementation-steps-preview .implementation-step-preview.structured::before {
  display: none;
}
.implementation-steps-preview .implementation-step-preview.structured .step-title-preview {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.implementation-steps-preview .implementation-step-preview.structured .step-subtitle-preview {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Empty state message */
.no-implementation-steps {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--color-background-light);
  border: 2px dashed var(--color-border-light);
  border-radius: 8px;
  color: var(--color-text-muted);
}
.no-implementation-steps p {
  margin: 0;
  font-style: italic;
}

/* Responsive design for view mode */
@media (max-width: 768px) {
  .implementation-step.structured .step-header-section {
    padding: 1rem;
    flex-direction: column;
  }
  .implementation-step.structured .step-header-section .step-number {
    align-self: flex-start;
    margin-bottom: 0.75rem;
    margin-right: 0;
  }
  .implementation-step.structured .step-header-section .step-main-content {
    width: 100%;
  }
  .implementation-step.structured .step-header-section .step-main-content .step-title {
    font-size: 1rem;
  }
  .implementation-step.structured .step-header-section .step-main-content .step-subtitle {
    padding-right: 2rem;
    /* Less space needed on mobile */
  }
  .implementation-step.structured .step-header-section .expand-icon {
    top: 1rem;
    right: 1rem;
  }
  .implementation-step.structured .step-details {
    padding: 0;
    /* Completely collapsed when not expanded on mobile */
  }
  .implementation-step.structured .step-details.expanded {
    padding: 0 1rem 1rem 1rem;
    /* Only add padding when expanded on mobile */
  }

  .implementation-steps-list .implementation-step {
    flex-direction: column;
    gap: 0.5rem;
  }
  .implementation-steps-list .implementation-step .step-number {
    align-self: flex-start;
  }
}
/* Focus states for accessibility */
.implementation-step.structured:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Print styles for view mode */
@media print {
  .solution-view-info-implementation-steps {
    page-break-inside: avoid;
  }

  .implementation-step.structured {
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
    padding: 1rem;
  }
  .implementation-step.structured .step-number {
    background: #333 !important;
    color: white !important;
  }
  .implementation-step.structured .step-title {
    font-weight: bold;
  }
}
/* Solution view page layout styles */
.solution-view-info {
  border-radius: 16px;
  height: calc(100vh - 149px);
  max-height: calc(100vh - 149px);
  padding-bottom: 30px;
}
@media (max-width: 999px) {
  .solution-view-info {
    height: auto;
    max-height: none;
  }
}
.solution-view-info .solution-view-info-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border-radius: 16px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-wrapper {
    box-shadow: none;
    gap: 30px;
  }
}
.solution-view-info .solution-view-info-header {
  background-color: var(--tertiary-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-header {
    box-shadow: none;
    background-color: var(--background);
    padding: 0;
    position: relative;
  }
}
.solution-view-info .solution-view-info-header h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
.solution-view-info .solution-view-info-header .solution-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.solution-view-info .solution-view-info-header .solution-actions .cta-button {
  width: fit-content;
  min-width: 122px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-header .solution-actions .cta-button {
    min-width: auto;
  }
  .solution-view-info .solution-view-info-header .solution-actions .cta-button span {
    display: none;
  }
}
.solution-view-info .solution-view-info-content {
  display: grid;
  grid-template-areas: "description" "pros-cons" "implementation";
  grid-template-rows: auto auto 1fr;
  gap: 30px;
  padding: 20px 30px 80px 30px;
  /* Increase bottom padding for desktop to ensure spacing after implementation steps */
  background-color: #ffffff99;
  height: 100%;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content {
    padding: 0;
    background-color: var(--background);
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-name-and-description {
  grid-area: description;
}
.solution-view-info .solution-view-info-content .solution-view-info-name-and-description h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  word-break: break-word;
}
.solution-view-info .solution-view-info-content .solution-view-info-name-and-description p {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d99;
  word-break: break-word;
}
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons {
  grid-area: pros-cons;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  justify-content: space-between;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .cta-button {
  margin-top: 20px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .cta-button {
    width: 100%;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-pros li,
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-cons li {
  font-size: 14px;
  font-weight: 400;
  color: #2e384d;
  padding: 8px 16px;
  background-color: #f9f7fa;
  border-radius: 8px;
  word-break: break-word;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-pros li,
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-cons li {
    background-color: var(--tertiary-color);
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-pros li + li,
.solution-view-info .solution-view-info-content .solution-view-info-pros-and-cons .solution-view-info-cons li + li {
  margin-top: 20px;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps {
  grid-area: implementation;
  border-top: 1px solid #e5e5e5;
  padding-top: 30px;
  min-height: 0;
  /* Allow content to shrink */
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* Solution view specific steps list styling */
  /* Solution view specific implementation step styling */
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps {
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
    width: 100%;
    max-width: 100%;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .solution-view-info-implementation-steps-header {
  margin-bottom: 20px;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-steps-list,
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .no-implementation-steps {
  flex: 1;
  min-height: 0;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-steps-list.solution-view-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  margin-bottom: 1rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block;
  /* Ensure vertical stacking of header and details */
  overflow: hidden;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section {
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
  display: flex !important;
  /* Keep flex for proper header layout */
  align-items: flex-start;
  position: relative;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section {
    padding: 1rem;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content {
  max-width: calc(100% - 80px);
  /* Account for step number and expand icon */
  flex: 1;
  min-width: 0;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content {
    max-width: calc(100% - 70px);
    /* Slightly smaller on mobile */
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content .step-title {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.375rem;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content .step-title {
    font-size: 0.9rem;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content .step-subtitle {
  font-size: 0.875rem;
  line-height: 1.5;
  padding-right: 2.5rem;
  /* Space for expand icon */
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-main-content .step-subtitle {
    font-size: 0.8rem;
    padding-right: 2rem;
  }
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-header-section .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    margin-right: 0.75rem;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details {
  width: 100% !important;
  box-sizing: border-box;
  display: block !important;
  /* Ensure it's a block element */
  clear: both;
  /* Clear any floats */
  position: relative;
  /* Ensure proper positioning */
  margin: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
  /* Collapsed by default */
  padding: 0;
  /* No padding when collapsed */
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details.expanded {
  padding: 0.5rem 1.25rem 1.25rem 1.25rem !important;
  /* Reduced top padding for better spacing */
  max-height: none !important;
  /* Allow unlimited vertical expansion */
  width: 100% !important;
  box-sizing: border-box;
  display: block !important;
  /* Ensure expanded content is block level */
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details.expanded {
    padding: 0.5rem 1rem 1rem 1rem !important;
    /* Reduced top padding on mobile */
    max-height: none !important;
    /* Allow unlimited vertical expansion on mobile too */
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  display: block;
  clear: both;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details p {
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 0.625rem 0;
  }
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .implementation-step.structured.solution-view-step .step-details p:last-child {
  margin-bottom: 0;
}
.solution-view-info .solution-view-info-content .solution-view-info-implementation-steps .no-implementation-steps p {
  font-size: 0.875rem;
  color: #2e384d99;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
}
.solution-view-info .solution-view-info-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  padding: 20px;
  background-color: var(--tertiary-color);
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer {
    border-radius: 16px;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info h3 {
  font-size: 17px;
  font-weight: 600;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-title {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-title {
    flex-direction: column;
    gap: 16px;
    min-height: auto;
    align-items: flex-start;
  }
  .solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-title .cta-button {
    width: 100%;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-title .ratings-info-badges {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.solution-view-info .solution-view-info-footer .solution-rating-info aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer .solution-rating-info aside {
    width: 100%;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info aside:has(.cta-button.hidden .ratings-info-badges:empty) {
  display: none;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer .solution-rating-info aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info aside .notifications:empty {
  display: none;
}
.solution-view-info .solution-view-info-footer .solution-rating-info aside .ratings-info-badges:empty {
  display: none;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs {
    flex-direction: column;
    gap: 12px;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph .solution-rating-info {
  display: flex;
  justify-content: space-between;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph .solution-rating-info span {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: #2e384d99;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph .solution-rating-info strong {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: #2e384d99;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph .solution-rating-bar {
  overflow: hidden;
  position: relative;
  background-color: #f7f2ff;
  height: 8px;
  border-radius: 999px;
}
.solution-view-info .solution-view-info-footer .solution-rating-info .solution-rating-graphs .solution-rating-graph .solution-rating-bar .solution-rating-percentage {
  background-color: #958dd5;
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 999px) {
  .solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  background-color: #fff;
  margin: 0;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating {
  position: relative;
  background: #f9f7fa;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  width: 100%;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating span {
  font-size: 15px;
  font-weight: 600;
  color: #2e384d;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating.checked {
  border: 2px solid #5433ff;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating.checked .vote svg:first-child {
  display: block !important;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating.checked .vote svg:last-child {
  display: none !important;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-percentage {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: #ebe0ff;
  z-index: 1;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  padding: 8px 16px;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text .vote {
  font-size: 0px;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text .vote svg:first-child {
  display: none;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text .solution-rating-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 0 20%);
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text .solution-rating-text-overlay .top {
  padding: 8px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.solution-view-info .solution-view-info-footer .solution-rating-info #solution-rating-form .solution-rating .solution-rating-text .solution-rating-text-overlay .top span {
  color: var(--primary-color);
}

/**
 * @fileoverview Modal Base Styles
 * 
 * This file contains the foundational styles for all modal components
 * in the Perspectives application. It provides the base modal structure,
 * layout patterns, and common styling that is extended by specific modal types.
 * 
 * Used by:
 * - ALL modal components throughout the application
 * - source/templates/layouts/perspectives.pug (modal container structure)
 * - All partials in source/templates/partials/decision-board-modals/
 * - All partials in source/templates/partials/organization-settings-modals/
 * - All partials in source/templates/partials/customer-modals/
 * - All partials in source/templates/partials/solution-modals/
 * 
 * Key Components:
 * - .modal-wrapper: Main modal container with visibility controls
 * - .modal-content: Modal content area with responsive behavior
 * - .modal-header: Modal title and close button area
 * - .modal-form: Form container within modals
 * - .modal-footer: Action buttons and navigation area
 * - .modal-footer-actions: Button layout and spacing
 * - .modal-close: Close button styling
 * - .modal-header-actions: Header action button area
 * 
 * Layout Features:
 * - Responsive modal sizing (full-screen on mobile, centered on desktop)
 * - Flexible content area with scroll handling
 * - Consistent header and footer patterns
 * - Mobile-optimized footer positioning
 * - Backdrop and overlay management
 * 
 * Modal-specific styles are in dedicated SCSS files:
 * - modal-create-solution.scss
 * - modal-invite-emails-to-organization.scss  
 * - modal-step-*.scss (decision board creation steps)
 * - modal-add-pro.scss / modal-add-con.scss
 * - modal-user-settings.scss
 * - modal-organization-settings.scss
 * - modal-step-generate-ai-solutions-*.scss
 * - modal-step-refine-ai-solutions-*.scss
 * 
 * Dependencies:
 * - Uses CSS custom properties from layout.scss
 * - Uses form styles from forms.scss for modal forms
 * - Imported after solution page styles in perspectives.scss
 */
.modal-form {
  padding: 30px;
  max-height: calc(100vh - 249px);
  overflow-y: auto;
}
@media (max-width: 888px) {
  .modal-form {
    padding-bottom: 27px;
  }
}
@media (max-width: 888px) {
  .modal-form {
    max-height: calc(100vh - 171px);
  }
}
@media (max-width: 999px) {
  .modal-form {
    padding: 20px;
  }
}
.modal-form .form-return-message {
  background-color: var(--tertiary-color) !important;
}

.modal-wrapper {
  display: none;
  width: 100%;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  margin: 40px;
}
.modal-wrapper.active {
  display: flex;
}
@media (max-width: 999px) {
  .modal-wrapper {
    margin: 0;
  }
}
.modal-wrapper .modal-content {
  position: relative;
  overflow: hidden;
  background-color: #f9f7fa;
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 80px);
}
@media (max-width: 999px) {
  .modal-wrapper .modal-content {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 999px) {
  .modal-wrapper .modal-content {
    border-radius: 0;
  }
}
@media (max-width: 999px) {
  .modal-wrapper .modal-content {
    max-width: 100%;
  }
}
@media (max-width: 999px) {
  .modal-wrapper .modal-content {
    min-height: calc(100vh - 30px);
    min-height: 100vh;
    max-height: calc(100vh - 30px);
    max-height: 100vh;
    height: 100vh;
  }
}
.modal-wrapper .modal-content .modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  padding: 20px 30px;
}
.modal-wrapper .modal-content .modal-header .modal-header-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.modal-wrapper .modal-content .modal-header h2 {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}
.modal-wrapper .modal-content .modal-header .modal-close {
  min-height: 40px;
  min-width: 40px;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  color: #5433ff;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.modal-wrapper .modal-content .modal-footer {
  padding: 20px 30px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  position: relative;
  z-index: 1;
}
@media (max-width: 999px) {
  .modal-wrapper .modal-content .modal-footer {
    padding: 20px;
    min-height: 82px;
    max-height: 200px;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.modal-wrapper .modal-content .modal-footer .modal-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.modal-wrapper .modal-content .modal-footer .modal-footer-actions .modal-footer-actions-right {
  display: flex;
  gap: 16px;
}

/**
 * @fileoverview User Settings Modal Styles
 * 
 * This file contains styles specific to the user settings modal,
 * including profile management, avatar upload, and account preferences.
 * 
 * Used by:
 * - source/templates/partials/customer-modals/user-settings-modal.pug
 * 
 * Key Components:
 * - .image-input: Avatar image upload interface
 * - .user-settings-form: User profile editing form
 * - .user-avatar-preview: Avatar preview and upload controls
 * - .user-profile-fields: Profile information form fields
 * - .user-preferences: User preference settings
 * - .account-actions: Account management actions
 * - .settings-sections: Organized settings sections
 * 
 * Layout Features:
 * - Avatar upload and preview interface
 * - Form validation and error handling
 * - Responsive layout for mobile and desktop
 * - Consistent with other modal patterns
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss (.user-avatar-initials, .cta-button)
 * - Uses CSS custom properties from layout.scss
 * - Imported after modals.scss in perspectives.scss
 */
.image-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.image-input .user-avatar-initials {
  width: 80px;
  height: 80px;
  font-size: 32px;
}
.image-input span {
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.user-settings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
@media (max-width: 980px) {
  .user-settings-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/**
 * @fileoverview Organization Settings Modal Styles
 * 
 * This file contains styles specific to the organization settings modal,
 * including member management, organization preferences, and administrative controls.
 * 
 * Used by:
 * - source/templates/partials/organization-settings-modals/organization-settings-modal.pug
 * 
 * Key Components:
 * - .organization-settings-modal: Main modal container
 * - .organization-members-list: Member listing and management
 * - .member-card: Individual member display cards
 * - .member-actions: Member management actions (roles, remove)
 * - .organization-preferences: Organization-level settings
 * - .member-invitation-interface: Member invitation controls
 * - .role-management: Role assignment and permissions
 * - .organization-metadata: Organization information display
 * 
 * Layout Features:
 * - Member list with avatar and role display
 * - Role management interface
 * - Responsive layout for mobile and desktop
 * - Action buttons for member management
 * - Consistent with other modal patterns
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss (.cta-button, .user-avatar-initials)
 * - Uses CSS custom properties from layout.scss
 * - Imported after modal-user-settings.scss in perspectives.scss
 */
.organization-settings-modal.modal-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 40px 0px;
}
.organization-settings-modal.modal-wrapper > .back-button {
  align-self: start;
}
.organization-settings-modal.modal-wrapper .modal-content {
  width: calc(100vw - 80px);
  max-width: 1280px;
}
@media (max-width: 999px) {
  .organization-settings-modal.modal-wrapper .modal-content {
    width: calc(100vw);
  }
}
.organization-settings-modal.modal-wrapper .modal-content .modal-form {
  height: calc(100vh - 80px);
  background-color: var(--tertiary-color);
}
@media (max-width: 999px) {
  .organization-settings-modal.modal-wrapper .modal-content .modal-form {
    height: calc(100vh);
  }
}
.organization-settings-modal.modal-wrapper .organization-settings-search-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.organization-settings-modal.modal-wrapper .organization-settings-search-wrapper .search-input {
  max-width: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .form-headings {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .form-headings h2 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .manage-members-form .select-input {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .manage-members-form.show-roles .select-input {
  display: flex;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .manage-members-form.show-roles .select-input select {
  height: 100%;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members #manage-new-members-form label:has(input[type=checkbox]:checked) .participant-info span.when-pending-invitation {
  display: none !important;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list:empty {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list .participant-item {
  gap: 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: normal;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list .participant-item .select-input select {
  min-height: 36px;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list .participant-item + .participant-item {
  margin-top: 8px;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  background-color: var(--tertiary-color);
  cursor: pointer;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .input-checkbox svg:first-child {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info {
  border-color: var(--accent);
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info.when-pending span.when-pending {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-added {
  display: block;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info span.will-change-role {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-checked {
  display: none !important;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-removed {
  display: block;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .participant-name span {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .input-checkbox svg:first-child {
  display: block;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input[type=checkbox]:checked) .input-checkbox svg:last-child {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label input[type=checkbox] {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details.will-change-role span.when-pending,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info.will-change-role span.when-pending {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details.will-change-role span.will-change-role,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info.will-change-role span.will-change-role {
  display: block;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span {
  font-size: 13px;
  font-weight: 600;
  color: #2e384d99;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span.will-change-role,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span.will-change-role {
  display: none;
  color: #6c55e7;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span.when-removed,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span.when-removed {
  color: #cd5c5c;
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span.when-added,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span.when-added {
  color: #6c55e7;
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span.when-pending,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span.when-pending {
  display: none;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details span.email,
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-info span.email {
  color: #2e384d99;
  font-weight: 400;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details {
  flex: 1;
}
@media (max-width: 999px) {
  .organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-details {
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    min-height: 39px;
    justify-content: center;
  }
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .input-checkbox {
  font-size: 0;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-badge {
  background-color: #e5e5e5;
  color: #2e384d;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-name {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
.organization-settings-modal.modal-wrapper .organization-settings-lists-of-members .participants-list label .participant-name.email {
  color: #2e384d99;
}
.organization-settings-modal.modal-wrapper .show-roles.grid {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  align-items: center;
}
@media (max-width: 1001px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid {
    grid-template-columns: 1fr max-content;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .actions {
    padding-left: 0px !important;
    padding-top: 0px !important;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .roles {
    padding-top: 0px !important;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .date {
    border-bottom: none !important;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .user-avatar-and-name {
    border-bottom: none !important;
  }
}
@media (max-width: 700px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid {
    grid-template-columns: 1fr;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .item {
    padding-left: 0px !important;
  }
  .organization-settings-modal.modal-wrapper .show-roles.grid .actions {
    border-bottom: none !important;
  }
}
.organization-settings-modal.modal-wrapper .show-roles.grid .item {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 16px;
  padding-top: 16px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .item:nth-last-child(-n+4) {
  border-bottom: none;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .select-input {
  display: none;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .select-input select {
  height: 100%;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .select-input select:disabled {
  cursor: not-allowed;
}
.organization-settings-modal.modal-wrapper .show-roles.grid.show-roles .select-input {
  display: flex;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .cta-button {
  padding: 4px 8px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .form-headings {
  margin-top: 40px;
  grid-column: span 4;
}
@media (max-width: 1001px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid .form-headings {
    margin-top: 20px;
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid .form-headings {
    grid-column: span 1;
  }
}
.organization-settings-modal.modal-wrapper .show-roles.grid .user-avatar-and-name {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding-left: 0px !important;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e5e5e5;
  color: #2e384d;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .user-name-and-email {
  font-size: 0px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .user-name-and-email span + span {
  margin-top: 8px;
  display: block;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .date {
  height: 100%;
  display: flex;
  align-items: center;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .roles {
  height: 100%;
}
.organization-settings-modal.modal-wrapper .show-roles.grid span {
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary-color);
  line-height: 14px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .item {
  padding-left: 16px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .select-input select {
  font-size: 14px;
  padding: 10px 16px;
  line-height: 14px;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 1001px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid .actions {
    justify-content: center;
  }
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action {
  cursor: pointer;
  user-select: none;
  min-height: 36px;
  background-color: var(--accent);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: var(--tertiary-color);
  min-width: fit-content;
}
@media (max-width: 700px) {
  .organization-settings-modal.modal-wrapper .show-roles.grid .action {
    width: 100%;
  }
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action input {
  display: none;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.cant-save {
  opacity: 0.5;
  cursor: not-allowed;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary {
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
  border: 1px solid #ebe0ff;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary span,
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary a {
  font-weight: 600;
  color: var(--primary-color);
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.urgent {
  background-color: var(--tertiary-color);
  border: 1px solid #cd5c5c;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.urgent span {
  font-weight: 600;
  color: #cd5c5c;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary-cta {
  color: var(--accent);
  background-color: var(--tertiary-color);
  border: 1px solid #ebe0ff;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary-cta span,
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary-cta a {
  font-weight: 600;
  color: var(--accent);
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action span,
.organization-settings-modal.modal-wrapper .show-roles.grid .action a {
  font-size: 14px;
  font-weight: 600;
  color: var(--tertiary-color);
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.urgent.active {
  background-color: #cd5c5c;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.urgent.active span {
  color: #ffffff;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary-cta.active {
  background-color: #5433ff;
}
.organization-settings-modal.modal-wrapper .show-roles.grid .action.secondary-cta.active span {
  color: #ffffff;
}

/**
 * @fileoverview Invite Emails to Organization Modal Styles
 * 
 * This file contains styles specific to the organization email invitation modal,
 * which allows users to invite participants via email addresses to join the organization.
 * 
 * Used by:
 * - source/templates/partials/organization-settings-modals/invite-emails-to-organization-modal.pug
 * 
 * Key Components:
 * - .invite-emails-to-organization-modal: Main modal container
 * - .email-invitation-form: Email invitation form
 * - .email-list-textarea: Email addresses input textarea
 * - .invitation-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other organization modal styles
 */
.invite-emails-to-organization-modal {
  /* Textarea styling specific to organization email invitations */
  /* Add specific styles for organization invite emails modal here */
  /* Example: Email input container styling */
  /* Example: Organization-specific validation styling */
  /* Example: Organization invite form styling */
}
.invite-emails-to-organization-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.invite-emails-to-organization-modal form .search-input {
  max-width: none;
}

/**
 * @fileoverview Step Question Modal Styles
 * 
 * This file contains styles specific to the decision board question definition modal,
 * which is the first step in the decision board creation workflow.
 * 
 * Used by:
 * - source/templates/partials/decision-board-modals/step-question-modal.pug
 * 
 * Key Components:
 * - .step-question-modal: Main modal container
 * - .question-form: Question definition form
 * - .question-input: Question text input field
 * - .question-instructions: Help text and guidance
 * - .question-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other decision board modal styles
 */
.step-issue-modal,
.step-question-modal {
  /* Add specific styles for question modal here */
  /* Example: Custom form styling for question input */
  /* Example: Question help text styling */
}

/**
 * @fileoverview Step Objectives Modal Styles
 * 
 * This file contains styles specific to the decision board objectives definition modal,
 * which is the second step in the decision board creation workflow.
 * 
 * Used by:
 * - source/templates/partials/decision-board-modals/step-objectives-modal.pug
 * 
 * Key Components:
 * - .step-objectives-modal: Main modal container
 * - .objectives-form: Objectives definition form
 * - .objectives-textarea: Objectives text input area
 * - .objectives-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other decision board modal styles
 */
.step-objectives-modal {
  /* Textarea styling specific to objectives definition */
  /* Add specific styles for objectives modal here */
  /* Example: Objectives form styling */
  /* Example: Objectives help text styling */
}
.step-objectives-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-objectives-modal form .search-input {
  max-width: none;
}

/* =====================================================================
 * Step Constraints Modal Styles
 * ===================================================================== */
/* 
 * Styles specific to the decision board constraints definition modal
 * (step-constraints-modal.pug)
 * 
 * This modal allows users to define limitations and boundaries for their
 * decision-making process.
 */
.step-constraints-modal {
  /* Textarea styling specific to constraints definition */
  /* Add specific styles for constraints modal here */
  /* Example: Constraints form styling */
  /* Example: Constraints help text styling */
}
.step-constraints-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-constraints-modal form .search-input {
  max-width: none;
}

@media (max-width: 999px) {
  #step-data-and-sources-form .step-data-and-sources-type-of-source-label-wrapper {
    display: none;
  }
}

.step-data-and-sources-modal {
  /* Textarea styling specific to data and sources */
}
.step-data-and-sources-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-data-and-sources-modal form .search-input {
  max-width: none;
}
.step-data-and-sources-modal .add-source-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-direction: row;
}
.step-data-and-sources-modal #sources-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.step-data-and-sources-modal #sources-container:empty {
  display: none;
}
.step-data-and-sources-modal #sources-container .source-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 999px) {
  .step-data-and-sources-modal #sources-container .source-row {
    gap: 16px;
  }
}
@media (max-width: 888px) {
  .step-data-and-sources-modal #sources-container .source-row {
    gap: 0;
  }
}
@media (max-width: 888px) {
  .step-data-and-sources-modal #sources-container .source-row .handle {
    display: none;
  }
  .step-data-and-sources-modal #sources-container .source-row .combo-input {
    display: none;
  }
}
@media (max-width: 888px) {
  .step-data-and-sources-modal #sources-container .source-row .input-type-of-data {
    display: none;
  }
}
.step-data-and-sources-modal #sources-container .remove-source {
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  height: fit-content;
  border-radius: 8px;
  color: var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebe0ff;
  background-color: var(--tertiary-color);
  cursor: pointer;
}
.step-data-and-sources-modal .form-field.dynamic-input {
  flex-direction: row;
  gap: 16px;
}
.step-data-and-sources-modal .form-field.dynamic-input input {
  flex: 1;
  height: fit-content;
}
@media (max-width: 999px) {
  .step-data-and-sources-modal .form-field.dynamic-input input {
    width: 100%;
  }
}
.step-data-and-sources-modal .form-field.dynamic-input input[type=text],
.step-data-and-sources-modal .form-field.dynamic-input input[type=file] {
  background-color: var(--tertiary-color);
  background-image: url("/static/images/paper-clip.svg");
  background-position: 97% 50%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  padding-right: 30px;
  color: #2e384d;
}
.step-data-and-sources-modal .form-field.dynamic-input input[type=url] {
  background-color: var(--tertiary-color);
  background-image: url("/static/images/link-icon.svg");
  background-position: 97% 50%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  color: #2e384d;
}
.step-data-and-sources-modal .checkbox-input.combo-input:has(select) {
  width: auto;
}
.step-data-and-sources-modal .checkbox-input.combo-input select {
  min-width: 110px;
  max-width: 110px;
}

@media (max-width: 501px) {
  .step-name-modal #step-name-form .form-heading {
    display: none;
  }
}

.step-check-points-modal {
  /* Textarea styling specific to check points */
}
.step-check-points-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-check-points-modal form .search-input {
  max-width: none;
}

.decision-board-timeline-preview,
.decision-board-timeline {
  width: 100%;
  position: relative;
}
.decision-board-timeline-preview .milestones,
.decision-board-timeline .milestones {
  height: 100%;
  width: 100%;
  padding: 1px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.decision-board-timeline-preview .milestones .milestone,
.decision-board-timeline .milestones .milestone {
  border-radius: 50%;
  background-color: #ebe0ff;
  height: 16px;
  width: 16px;
  min-width: 16px;
  border: 2px solid var(--tertiary-color);
  z-index: 2;
}
.decision-board-timeline-preview .milestones .milestone.passed,
.decision-board-timeline .milestones .milestone.passed {
  background-color: #958dd5;
}
.decision-board-timeline-preview .milestones .milestone.error,
.decision-board-timeline .milestones .milestone.error {
  background-color: #ee6565;
}
.decision-board-timeline-preview .milestones .days,
.decision-board-timeline .milestones .days {
  margin: 0 -2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.decision-board-timeline-preview .milestones .day,
.decision-board-timeline .milestones .day {
  flex-grow: 1;
  height: 8px;
  background-color: #ebe0ff;
  position: relative;
}
.decision-board-timeline-preview .milestones .day.passed,
.decision-board-timeline .milestones .day.passed {
  background-color: #958dd5;
}
.decision-board-timeline-preview .milestones .day.error,
.decision-board-timeline .milestones .day.error {
  background-color: #ee6565;
}
.decision-board-timeline-preview .milestones .day.warning,
.decision-board-timeline .milestones .day.warning {
  background-color: #f5a524;
}
.decision-board-timeline-preview .milestones .day .percentage,
.decision-board-timeline .milestones .day .percentage {
  background-color: #958dd5;
  height: 8px;
  width: attr(data-percentage);
  position: absolute;
  top: 0;
  left: 0;
}
.decision-board-timeline-preview .milestones .day + .day,
.decision-board-timeline .milestones .day + .day {
  margin-left: 2px;
}
.decision-board-timeline-preview .milestone-descriptions,
.decision-board-timeline .milestone-descriptions {
  height: 100%;
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.decision-board-timeline-preview .milestone-descriptions .milestone-description,
.decision-board-timeline .milestone-descriptions .milestone-description {
  font-size: 12px;
  font-weight: 600;
  color: #2e384d4d;
}
.decision-board-timeline-preview .milestone-descriptions .milestone-description:nth-child(1),
.decision-board-timeline .milestone-descriptions .milestone-description:nth-child(1) {
  text-align: left;
}
.decision-board-timeline-preview .milestone-descriptions .milestone-description:nth-child(2),
.decision-board-timeline .milestone-descriptions .milestone-description:nth-child(2) {
  text-align: center;
}
.decision-board-timeline-preview .milestone-descriptions .milestone-description:nth-child(3),
.decision-board-timeline .milestone-descriptions .milestone-description:nth-child(3) {
  text-align: right;
}
.decision-board-timeline-preview .milestone-descriptions .milestone-subtitle,
.decision-board-timeline .milestone-descriptions .milestone-subtitle {
  color: #2e384d4d;
  font-size: 12px;
  font-weight: 600;
}
.decision-board-timeline-preview .progress-bar,
.decision-board-timeline .progress-bar {
  height: 4px;
  width: 7%;
  border-radius: 8px;
  background-color: #968ed6;
  position: absolute;
  top: 0;
  left: 0;
  margin: 3px 2px;
}

.decision-board-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.decision-board-preview .decision-board-preview-and-form-instructions {
  display: grid;
  grid-template-columns: 10fr 5fr;
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 875px) {
  .decision-board-preview .decision-board-preview-and-form-instructions {
    grid-template-columns: 1fr;
  }
}
.decision-board-preview .decision-board-preview-and-form-instructions .decision-board {
  box-shadow: none;
  height: fit-content;
}
@media (max-width: 501px) {
  .decision-board-preview .decision-board-preview-and-form-instructions .decision-board {
    padding: 20px;
    gap: 16px;
  }
  .decision-board-preview .decision-board-preview-and-form-instructions .decision-board .notification {
    width: auto;
  }
}

/**
 * @fileoverview Step Participants Modal Styles
 * 
 * This file contains styles specific to the decision board participants modal,
 * which is the eighth step in the decision board creation workflow.
 * 
 * Used by:
 * - source/templates/partials/decision-board-modals/step-participants-modal.pug
 * 
 * Key Components:
 * - .step-participants-modal: Main modal container
 * - .participants-form: Participant management form
 * - .participants-search: Participant search interface
 * - .participant-list: List of participants
 * - .participant-card: Individual participant display
 * - .participant-actions: Participant management actions
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other decision board modal styles
 */
.step-participants-modal {
  /* Textarea styling specific to participants */
}
.step-participants-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-participants-modal form .search-input {
  max-width: none;
}
.step-participants-modal .search-input {
  max-width: none;
}
.step-participants-modal .modal-form-button-wrapper {
  margin-top: 0;
}
.step-participants-modal .step-participants-search-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.step-participants-modal .step-participants-search-wrapper .checkbox-input label {
  white-space: nowrap;
}
.step-participants-modal .decision-board-participants-section {
  gap: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 16px;
  user-select: none;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section {
    gap: 10px;
  }
}
.step-participants-modal .decision-board-participants-section .small-heading-and-description {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .small-heading-and-description {
    margin-bottom: 8px;
  }
}
.step-participants-modal .decision-board-participants-section .small-heading-and-description h5 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .small-heading-and-description h5 {
    font-size: 14px;
  }
}
.step-participants-modal .decision-board-participants-section .small-heading-and-description p {
  font-size: 12px;
  color: #2e384d99;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form .select-input,
.step-participants-modal .decision-board-participants-section #manage-members-form .select-input {
  display: none;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form.show-roles .select-input,
.step-participants-modal .decision-board-participants-section #manage-members-form.show-roles .select-input {
  display: flex;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form.show-roles .select-input select,
.step-participants-modal .decision-board-participants-section #manage-members-form.show-roles .select-input select {
  height: 100%;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form label:has(input[type=checkbox]:checked) .participant-info span.when-pending-organization-invitation-text {
  display: none !important;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form label:has(input[type=checkbox]:checked) .participant-info span.when-rejected-organization-invitation-text {
  display: none !important;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form label:has(input[type=checkbox]:checked) .participant-info span.when-deleted-from-organization-text {
  display: none !important;
}
.step-participants-modal .decision-board-participants-section #manage-new-members-form label:has(input[type=checkbox]:checked) .participant-info span.when-deleted-from-decision-board-text {
  display: none !important;
}
.step-participants-modal .decision-board-participants-section .participants-list:empty {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list .participant-item {
  gap: 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: normal;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list .participant-item {
    gap: 4px;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list .participant-item .select-input select {
  min-height: 36px;
}
.step-participants-modal .decision-board-participants-section .participants-list .participant-item + .participant-item {
  margin-top: 8px;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list .participant-item + .participant-item {
    margin-top: 4px;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  background-color: var(--tertiary-color);
  cursor: pointer;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label {
    gap: 8px;
  }
}
@media (max-width: 999px) {
  .step-participants-modal .decision-board-participants-section .participants-list label {
    padding: 8px;
  }
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-checked-marker {
    display: none;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-checked-marker svg:first-child {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info {
  border-color: var(--accent);
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info.when-pending-organization-invitation span.when-pending-organization-invitation-text {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info.when-rejected-organization-invitation span.when-rejected-organization-invitation-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info.when-deleted-from-organization span.when-deleted-from-organization-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info.when-deleted-from-decision-board span.when-deleted-from-decision-board-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-will-be-added-to-decision-board-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info span.will-change-decision-board-role-text {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-checked-text {
  display: none !important;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-info span.when-will-be-removed-from-decision-board-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-name span {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-checked-marker {
    display: block;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-checked-marker svg:first-child {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input[type=checkbox]:checked) .participant-checked-marker svg:last-child {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}
.step-participants-modal .decision-board-participants-section .participants-list label input[type=checkbox] {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-details:not(.participant-info-view-only),
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info:not(.participant-info-view-only) {
    flex-direction: column;
    gap: 2px;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span {
  font-size: 13px;
  font-weight: 600;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-details span,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span {
    width: 100%;
    font-size: 11px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.will-change-decision-board-role-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.will-change-decision-board-role-text {
  display: none;
  color: #6c55e7;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-will-be-removed-from-decision-board-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-will-be-removed-from-decision-board-text {
  color: #cd5c5c;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-will-be-added-to-decision-board-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-will-be-added-to-decision-board-text {
  color: #6c55e7;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-pending-organization-invitation-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-pending-organization-invitation-text {
  color: #2e384d99;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-rejected-organization-invitation-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-rejected-organization-invitation-text {
  color: #ee6565;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-deleted-from-organization-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-deleted-from-organization-text {
  color: #ee6565;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.when-deleted-from-decision-board-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.when-deleted-from-decision-board-text {
  color: #ee6565;
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details span.email,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info span.email {
  color: #2e384d99;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.when-pending-organization-invitation span.when-pending-organization-invitation-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.when-pending-organization-invitation span.when-pending-organization-invitation-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.when-rejected-organization-invitation span.when-rejected-organization-invitation-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.when-rejected-organization-invitation span.when-rejected-organization-invitation-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.when-deleted-from-organization span.when-deleted-from-organization-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.when-deleted-from-organization span.when-deleted-from-organization-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.when-deleted-from-decision-board span.when-deleted-from-decision-board-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.when-deleted-from-decision-board span.when-deleted-from-decision-board-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.will-change-decision-board-role span.when-pending-organization-invitation-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.will-change-decision-board-role span.when-pending-organization-invitation-text {
  display: none;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details.will-change-decision-board-role span.will-change-decision-board-role-text,
.step-participants-modal .decision-board-participants-section .participants-list label .participant-info.will-change-decision-board-role span.will-change-decision-board-role-text {
  display: block;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-details {
  flex: 1;
}
@media (max-width: 999px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-details {
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-checked-marker {
  font-size: 0;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-badge {
  background-color: #e5e5e5;
  color: #2e384d;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 999px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-badge {
    width: 30px;
    height: 30px;
  }
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-name {
  color: #2e384d;
  font-weight: 400;
  font-size: 13px;
}
.step-participants-modal .decision-board-participants-section .participants-list label .participant-name.email {
  color: #2e384d99;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .participants-list label .participant-name {
    font-size: 12px;
  }
}
.step-participants-modal .decision-board-participants-section .cta-button#show-more-members-button {
  width: fit-content;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .cta-button#show-more-members-button {
    width: 100%;
    padding: 10px 16px;
  }
  .step-participants-modal .decision-board-participants-section .cta-button#show-more-members-button span {
    font-size: 12px;
    line-height: 16px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-headings {
  margin-bottom: 20px;
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-headings h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d99;
  margin-bottom: 8px;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-headings h4 {
    font-size: 14px;
    line-height: 20px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-headings p {
  font-size: 17px;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-headings p {
    font-size: 14px;
    line-height: 20px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card {
  display: flex;
  padding: 30px;
  gap: 30px;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  border: 1px dashed #958dd5;
  background-color: var(--tertiary-color);
  border-radius: 16px;
  flex-direction: row;
}
@media (max-width: 999px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card {
    flex-direction: column;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card img {
  height: 150px;
  width: fit-content;
}
@media (max-width: 999px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card img {
    display: none;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: normal;
  justify-content: left;
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-headings h3 {
  font-size: 17px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-headings h3 {
    font-size: 14px;
    line-height: 20px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-headings p {
  font-size: 17px;
  color: #2e384d99;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-headings p {
    font-size: 14px;
    line-height: 20px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-ctas {
  display: flex;
  gap: 30px;
  align-items: normal;
  justify-content: left;
  flex-direction: column;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-ctas {
    flex-direction: row;
    gap: 16px;
  }
}
.step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-ctas .cta-button {
  width: 100%;
}
@media (max-width: 501px) {
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-ctas .cta-button {
    width: fit-content;
    padding: 10px 16px;
  }
  .step-participants-modal .decision-board-participants-section .no-available-members .no-available-members-card .no-available-members-card-content .no-available-members-ctas .cta-button span {
    font-size: 12px;
    line-height: 16px;
  }
}

/* =====================================================================
 * Step Invite Emails Modal Styles
 * ===================================================================== */
/* 
 * Styles specific to the decision board email invitation modal
 * (step-invite-emails-modal.pug)
 * 
 * This modal allows users to invite participants via email addresses
 * during decision board setup.
 */
.step-invite-emails-modal {
  /* Textarea styling specific to decision board email invitations */
  /* Add specific styles for invite emails modal here */
  /* Example: Email input styling */
  /* Example: Email validation styling */
}
.step-invite-emails-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-invite-emails-modal form .search-input {
  max-width: none;
}

/* =====================================================================
 * Step Issue Modal Styles
 * ===================================================================== */
/* 
 * Styles specific to the decision board issue definition modal
 * (step-issue-modal.pug)
 * 
 * This modal allows users to define the problem/question and issue title
 * for a decision board.
 */
.step-issue-modal {
  /* Textarea styling specific to issue definition */
  /* Add specific styles for issue modal here */
  /* Example: Issue form styling */
  /* Example: Issue title input styling */
}
.step-issue-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.step-issue-modal form .search-input {
  max-width: none;
}

/**
 * @fileoverview Create Solution Modal Styles
 * 
 * This file contains styles specific to the create solution modal,
 * which allows users to create new solutions for decision boards
 * with comprehensive form validation and content management.
 * 
 * Used by:
 * - source/templates/partials/decision-board-modals/create-solution-modal.pug
 * 
 * Key Components:
 * - .create-solution-modal: Main modal container
 * - .solution-creation-form: Solution creation form
 * - .solution-title-field: Solution title input
 * - .solution-description-field: Solution description textarea
 * - .solution-form-validation: Form validation styling
 * - .solution-creation-actions: Form submission controls
 * - .solution-preview: Solution preview display
 * 
 * Layout Features:
 * - Form validation and error handling
 * - Textarea styling for solution descriptions
 * - Responsive layout for mobile and desktop
 * - Consistent with other modal patterns
 * - Real-time validation feedback
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss (.cta-button)
 * - Uses CSS custom properties from layout.scss
 * - Imported after modal-organization-settings.scss in perspectives.scss
 */
.create-solution-modal {
  /* Textarea styling specific to solution creation */
  /* Add specific styles for create solution modal here */
  /* Example: Solution form styling */
  /* Example: Solution title input styling */
  /* Example: Solution description textarea styling */
}
.create-solution-modal textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ebe0ff;
  padding: 8px 16px;
  font-size: 14px;
  resize: none;
  min-height: 39.18px;
}
.create-solution-modal form .search-input {
  max-width: none;
}

/**
 * @fileoverview Add Pro Modal Styles
 * 
 * This file contains styles specific to the add pro (advantage) modal,
 * which allows users to add positive aspects to solutions.
 * 
 * Used by:
 * - source/templates/partials/solution-modals/add-pro-modal.pug
 * 
 * Key Components:
 * - .add-pro-modal: Main modal container
 * - .pro-form: Pro addition form
 * - .pro-input: Pro text input field
 * - .pro-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other solution modal styles
 */
.add-pro-modal {
  /* Add specific styles for add pro modal here */
  /* Example: Pro argument form styling */
  /* Example: Pro description textarea styling */
}

/**
 * @fileoverview Add Con Modal Styles
 * 
 * This file contains styles specific to the add con (disadvantage) modal,
 * which allows users to add negative aspects or concerns to solutions.
 * 
 * Used by:
 * - source/templates/partials/solution-modals/add-con-modal.pug
 * 
 * Key Components:
 * - .add-con-modal: Main modal container
 * - .con-form: Con addition form
 * - .con-input: Con text input field
 * - .con-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other solution modal styles
 */
.add-con-modal {
  /* Add specific styles for add con modal here */
  /* Example: Con argument form styling */
  /* Example: Con description textarea styling */
}

/**
 * @fileoverview Add Implementation Step Modal Styles
 * 
 * This file contains styles specific to the add implementation step modal,
 * which allows users to add actionable implementation steps to solutions.
 * 
 * Used by:
 * - source/templates/partials/solution-modals/add-implementation-step-modal.pug
 * 
 * Key Components:
 * - .add-implementation-step-modal: Main modal container
 * - .implementation-step-form: Implementation step addition form
 * - .implementation-step-fields: Step field inputs
 * - .implementation-step-validation: Form validation styling
 * 
 * Dependencies:
 * - Extends modal base styles from modals.scss
 * - Uses form styles from forms.scss
 * - Uses utility classes from utils.scss
 * - Imported in perspectives.scss with other solution modal styles
 */
/* Add Implementation Step Modal uses default modal styling from modals.scss */
/* No custom styles needed - inherits all styling from base modal system */
/**
 * @fileoverview AI Solution Generation Trigger Modal Styles
 * 
 * This stylesheet defines the visual presentation of the modal that allows users to 
 * configure and trigger AI solution generation (Step 6 in the decision board workflow).
 * 
 * Key components styled:
 * - Overall modal structure and responsive behavior
 * - Form heading display rules (hidden on small phones)
 * - AI solution options containers and interactive states
 * - Typography and spacing for option headers and descriptions
 * - Tooltips for option clarifications
 * - Form instructions section
 * - Right-aligned navigation buttons
 * 
 * Responsive design:
 * - Handles small mobile devices (<501px) by hiding the form heading
 * 
 * Color palette:
 * - Background: #f9f7fa (default), #f7f2ff (hover)
 * - Typography: #2e384d (headers), #2e384d99 (description text)
 * - Tooltips: #ffffff (background), #2e384d (text)
 * 
 * Works in conjunction with the step-generate-ai-solutions-trigger-modal.pug template
 * and TheHubForm JavaScript component.
 */
.step-generate-ai-solutions-trigger-modal .modal-form .form-heading {
  margin-bottom: 20px;
}
@media (max-width: 501px) {
  .step-generate-ai-solutions-trigger-modal .modal-form .form-heading {
    display: none;
  }
}
.step-generate-ai-solutions-trigger-modal .modal-form .form-instructions {
  background-color: #f5f8ff;
  border-left: 3px solid #5762d5;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.step-generate-ai-solutions-trigger-modal .modal-form .form-instructions p {
  color: #2e384d;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
.step-generate-ai-solutions-trigger-modal .modal-form .options-section {
  margin-bottom: 8px;
}
.step-generate-ai-solutions-trigger-modal .modal-form .options-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 3px;
}
.step-generate-ai-solutions-trigger-modal .modal-form .options-section p {
  font-size: 14px;
  color: #2e384d99;
  margin-bottom: 6px;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 22px;
  z-index: 9999;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container:after {
  content: "ⓘ";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #5762d5;
  font-weight: bold;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container:hover .tooltip {
  display: block;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip {
  --arrow-position: 50%;
  display: none;
  position: fixed;
  left: calc(100% + 12px);
  top: -90px;
  width: 260px;
  background-color: #ffffff;
  color: #2e384d;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  line-height: 1.5;
  z-index: 10000;
  border: 1px solid #e0e0e0;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:before {
  content: "";
  position: absolute;
  left: -9px;
  top: var(--arrow-position);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #e0e0e0;
}
.step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:after {
  content: "";
  position: absolute;
  left: -8px;
  top: var(--arrow-position);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
}
@media (max-width: 768px) {
  .step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip {
    left: 0;
    top: 35px;
    margin-left: 0;
    width: 100%;
    max-width: 300px;
    --arrow-position: 0;
  }
  .step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:before {
    left: 16px;
    top: -9px;
    transform: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e0e0e0;
    border-top: none;
  }
  .step-generate-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:after {
    left: 16px;
    top: -8px;
    transform: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    border-top: none;
  }
}
.step-generate-ai-solutions-trigger-modal .form-field {
  margin-top: 6px;
  margin-bottom: 8px;
}
.step-generate-ai-solutions-trigger-modal .form-field:first-of-type {
  margin-top: 0;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options .ai-solution-option {
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f7fa;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options .ai-solution-option:hover {
  background-color: #f7f2ff;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options .ai-solution-option .option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options .ai-solution-option .option-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: #2e384d;
}
.step-generate-ai-solutions-trigger-modal .ai-solution-options .ai-solution-option p {
  font-size: 13px;
  color: #2e384d99;
}
.step-generate-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.step-generate-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons .back-button {
  margin-right: auto;
}
.step-generate-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons .right-aligned-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.step-generate-ai-solutions-trigger-modal #generate-ai-solutions-submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-generate-ai-solutions-trigger-modal #generate-ai-solutions-submit-button svg {
  margin-right: 8px;
  color: white;
}

/**
 * Styles for AI Solution Generation Loading Modal
 * 
 * This stylesheet defines the visual presentation of the loading modal shown while
 * AI solutions are being generated (Step 6 loading state in the decision board workflow).
 * 
 * Key components styled:
 * - Modal container layout with centered content
 * - Enhanced loading animations with dot thinking indicator
 * - Multi-step visual process indicators
 * - Progress bar with glow effect and gradient
 * - Typography hierarchy for status messages
 * 
 * Responsive design:
 * - Adapts layout, spacing, and font sizes for small mobile devices (<501px)
 * - Reduces padding and element sizes on smaller screens
 * 
 * Color palette:
 * - Background: #f7f2ff (progress bar background)
 * - Primary accent: #5762d5 (progress bar fill)
 * - Secondary accent: #6772e5 (gradient end)
 * - Typography: #2e384d (headers), #2e384d99 (description text)
 * 
 * Works in conjunction with the step-generate-ai-solutions-loading-modal.pug template
 * and the LLM request status polling JavaScript.
 */
.step-generate-ai-solutions-loading-modal .modal-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
}
@media (max-width: 501px) {
  .step-generate-ai-solutions-loading-modal .modal-form {
    padding: 30px 20px;
  }
}
.step-generate-ai-solutions-loading-modal .modal-form .form-heading {
  margin-bottom: 30px;
}
.step-generate-ai-solutions-loading-modal .modal-form .form-heading p {
  font-size: 16px;
  line-height: 1.5;
  color: #2e384d;
  max-width: 440px;
  margin: 0 auto;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 35px;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .main-spinner {
  width: 70px;
  height: 70px;
  color: #5762d5;
  animation: spin 1.5s linear infinite, pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(87, 98, 213, 0.3));
}
@media (max-width: 501px) {
  .step-generate-ai-solutions-loading-modal .modal-form .loading-animation .main-spinner {
    width: 50px;
    height: 50px;
  }
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot {
  width: 12px;
  height: 12px;
  background-color: #5762d5;
  border-radius: 50%;
  margin: 0 6px;
  animation: jumpingDots 1.4s infinite;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot1 {
  animation-delay: 0s;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot2 {
  animation-delay: 0.2s;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot3 {
  animation-delay: 0.4s;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot4 {
  animation-delay: 0.6s;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 400px;
  margin-bottom: 25px;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator {
  position: relative;
  font-size: 14px;
  color: #8c8c8c;
  padding: 8px 0 8px 30px;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  z-index: 1;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.completed {
  color: #7a7a7a;
  font-weight: 400;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.completed:before {
  background-color: #a5a9e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active {
  color: #5762d5;
  font-weight: 500;
  position: relative;
  animation: textPulse 1.5s infinite;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active:before {
  background-color: #5762d5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  animation: checkPulse 1.5s infinite;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active:after {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #5762d5;
  border-radius: 4px;
  opacity: 0.7;
  animation: accentPulse 1.5s infinite;
  z-index: 0;
}
.step-generate-ai-solutions-loading-modal .modal-form .loading-progress-text {
  font-size: 15px;
  font-weight: 500;
  color: #2e384d;
  margin-bottom: 10px;
}
.step-generate-ai-solutions-loading-modal .loading-progress-bar-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 12px;
  background: #f7f2ff;
  border-radius: 8px;
  margin: 10px 0 30px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.step-generate-ai-solutions-loading-modal .loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5762d5, #6772e5);
  border-radius: 8px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-generate-ai-solutions-loading-modal .loading-progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  transform: translateX(0%);
  animation: progressGlow 2s infinite;
}

@keyframes jumpingDots {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
@keyframes progressGlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
@keyframes textPulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes checkPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(87, 98, 213, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(87, 98, 213, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(87, 98, 213, 0);
  }
}
@keyframes accentPulse {
  0% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(87, 98, 213, 0.2);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(87, 98, 213, 0.4);
  }
  100% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(87, 98, 213, 0.2);
  }
}
/**
 * Styles for AI Solution Generation Results Modal
 * 
 * This stylesheet defines the visual presentation of the modal that displays AI-generated
 * solutions after they've been successfully created (Step 6 results in the decision board workflow).
 * 
 * Key components styled:
 * - Overall modal structure and spacing
 * - Success confirmation messaging
 * - Solutions count display
 * - Solutions list with clickable items
 * - Footer actions with right-aligned buttons
 * - Responsive behavior for various screen sizes
 * 
 * Color palette:
 * - Background: var(--tertiary-color), #f9f7fa (solution items hover)
 * - Typography: #2e384d (headers), #2e384d99 (body text)
 * - Accents: #5762d5 (primary accent), #ebe0ff (borders)
 * 
 * Works in conjunction with the step-generate-ai-solutions-results-modal.pug template.
 */
.step-generate-ai-solutions-results-modal .modal-form .form-heading {
  margin-bottom: 24px;
}
.step-generate-ai-solutions-results-modal .modal-form .form-heading h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2e384d;
}
.step-generate-ai-solutions-results-modal .modal-form .form-heading p {
  font-size: 14px;
  color: #2e384d99;
}
.step-generate-ai-solutions-results-modal .modal-footer .modal-footer-actions .right-aligned-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
@media (max-width: 501px) {
  .step-generate-ai-solutions-results-modal .modal-footer .modal-footer-actions .right-aligned-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
.step-generate-ai-solutions-results-modal .success-confirmation {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.step-generate-ai-solutions-results-modal .success-confirmation .success-icon {
  width: 36px;
  height: 36px;
  margin-right: 16px;
}
.step-generate-ai-solutions-results-modal .success-confirmation .success-icon svg {
  width: 100%;
  height: 100%;
  fill: #4caf50;
}
.step-generate-ai-solutions-results-modal .success-confirmation h3 {
  color: #4caf50;
  margin: 0;
  font-size: 1.4rem;
}
.step-generate-ai-solutions-results-modal .solutions-count-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0 16px;
}
.step-generate-ai-solutions-results-modal .solutions-count-display .count-number {
  font-size: 3.5rem;
  font-weight: bold;
  color: #5762d5;
  line-height: 1;
}
.step-generate-ai-solutions-results-modal .solutions-count-display .count-label {
  font-size: 1rem;
  color: #666;
  margin-top: 8px;
}
.step-generate-ai-solutions-results-modal p.solution-list-instruction {
  text-align: center;
  font-size: 14px;
  color: #2e384d99;
  margin-bottom: 20px;
}
.step-generate-ai-solutions-results-modal .solutions-list {
  margin: 0 0 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item {
  padding: 16px;
  border-bottom: 1px solid #ebe0ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item:last-child {
  border-bottom: none;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item:hover {
  background-color: #f9f7fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(87, 98, 213, 0.1);
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item:hover .solution-arrow svg {
  transform: translateX(3px);
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-title {
  font-size: 16px;
  font-weight: 500;
  color: #2e384d;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2e384d99;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-action svg.small {
  width: 16px;
  height: 16px;
  color: #2e384d99;
}
.step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-arrow svg {
  width: 16px;
  height: 16px;
  fill: #5762d5;
  transition: transform 0.2s ease;
}
.step-generate-ai-solutions-results-modal .no-solutions-message {
  padding: 30px;
  text-align: center;
  background-color: #f9f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}
.step-generate-ai-solutions-results-modal .no-solutions-message p {
  font-size: 16px;
  color: #2e384d;
}
@media (max-width: 501px) {
  .step-generate-ai-solutions-results-modal .solutions-list .solution-item {
    padding: 12px;
  }
  .step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-title {
    font-size: 15px;
  }
  .step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta {
    gap: 8px;
  }
  .step-generate-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-action {
    font-size: 12px;
  }
  .step-generate-ai-solutions-results-modal .solutions-count-display .count-number {
    font-size: 2.8rem;
  }
  .step-generate-ai-solutions-results-modal p.solution-list-instruction {
    font-size: 13px;
  }
}

/**
 * Styles for AI Solution Refinement Trigger Modal
 * 
 * This stylesheet defines the visual presentation of the modal that allows users to 
 * configure and trigger AI solution refinement based on feedback and preferences.
 * 
 * Key components styled:
 * - Overall modal structure and responsive behavior
 * - Form heading display rules (hidden on small phones)
 * - Form instructions section with informational styling
 * - Scope selection section for choosing solutions to refine
 * - AI solution options containers and interactive states
 * - Tooltips for option clarifications
 * - Feedback section for user input
 * - Typography and spacing for option headers and descriptions
 * - Right-aligned navigation buttons
 * - Refinement-specific elements (scope selection, feedback)
 * 
 * Responsive design:
 * - Handles small mobile devices (<501px) by hiding the form heading
 * - Responsive tooltip positioning for mobile and desktop
 * 
 * Color palette:
 * - Background: #f9f7fa (default), #f7f2ff (hover)
 * - Borders: #ebe0ff
 * - Typography: #2e384d (headers), #2e384d99 (description text)
 * - Accent: #958dd5 (solution list headers)
 * - Alert: #cd5c5c (remove button hover)
 * - Tooltips: #ffffff (background), #2e384d (text)
 * - Instructions: #f5f8ff (background), #5762d5 (border)
 * 
 * Works in conjunction with step-refine-ai-solutions-trigger-modal.pug to provide
 * the UI for initiating the AI solution refinement process.
 */
.step-refine-ai-solutions-trigger-modal .form-control .form-container {
  margin-top: 0;
  padding-top: 0;
  gap: 0;
}
.step-refine-ai-solutions-trigger-modal .modal-form .form-container {
  margin-top: 0;
  padding-top: 0;
  gap: 0;
}
.step-refine-ai-solutions-trigger-modal .modal-form .form-heading {
  margin-bottom: 20px;
}
@media (max-width: 501px) {
  .step-refine-ai-solutions-trigger-modal .modal-form .form-heading {
    display: none;
  }
}
.step-refine-ai-solutions-trigger-modal .modal-form .form-instructions {
  background-color: #f5f8ff;
  border-left: 3px solid #5762d5;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .form-instructions p {
  color: #2e384d;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
.step-refine-ai-solutions-trigger-modal .modal-form .scope-section {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .scope-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .scope-section .form-field {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .scope-section .form-field .field-input {
  width: 100%;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
}
.step-refine-ai-solutions-trigger-modal .modal-form .scope-section .form-field .field-input:focus {
  border-color: #5762d5;
  outline: none;
}
.step-refine-ai-solutions-trigger-modal .modal-form .options-section {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .options-section .field-label {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #958dd5;
  margin-bottom: 3px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .options-section p {
  font-size: 14px;
  color: #2e384d99;
  margin-bottom: 8px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .feedback-section {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .feedback-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2e384d;
  margin-bottom: 8px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .feedback-section .form-field {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .modal-form .feedback-section .form-field .field-input {
  width: 100%;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
  min-height: 80px;
  resize: vertical;
}
.step-refine-ai-solutions-trigger-modal .modal-form .feedback-section .form-field .field-input:focus {
  border-color: #5762d5;
  outline: none;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 22px;
  z-index: 9999;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container:after {
  content: "ⓘ";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #5762d5;
  font-weight: bold;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container:hover .tooltip {
  display: block;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip {
  --arrow-position: 50%;
  display: none;
  position: fixed;
  left: calc(100% + 12px);
  top: -90px;
  width: 260px;
  background-color: #ffffff;
  color: #2e384d;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  line-height: 1.5;
  z-index: 10000;
  border: 1px solid #e0e0e0;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:before {
  content: "";
  position: absolute;
  left: -9px;
  top: var(--arrow-position);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #e0e0e0;
}
.step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:after {
  content: "";
  position: absolute;
  left: -8px;
  top: var(--arrow-position);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
}
@media (max-width: 768px) {
  .step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip {
    left: 0;
    top: 35px;
    margin-left: 0;
    width: 100%;
    max-width: 300px;
    --arrow-position: 0;
  }
  .step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:before {
    left: 16px;
    top: -9px;
    transform: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e0e0e0;
    border-top: none;
  }
  .step-refine-ai-solutions-trigger-modal .modal-form .tooltip-container .tooltip:after {
    left: 16px;
    top: -8px;
    transform: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    border-top: none;
  }
}
.step-refine-ai-solutions-trigger-modal .form-field {
  margin-top: 4px;
  margin-bottom: 6px;
}
.step-refine-ai-solutions-trigger-modal .form-field:first-of-type {
  margin-top: 0;
}
.step-refine-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.step-refine-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons .back-button {
  margin-right: auto;
}
.step-refine-ai-solutions-trigger-modal .modal-footer .modal-footer-actions .navigation-buttons .right-aligned-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.step-refine-ai-solutions-trigger-modal #refine-ai-solutions-submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-refine-ai-solutions-trigger-modal #refine-ai-solutions-submit-button svg {
  margin-right: 8px;
  color: white;
}
.step-refine-ai-solutions-trigger-modal .refinement-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option {
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f7fa;
  border: 1px solid #ebe0ff;
  transition: background-color 0.2s ease;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option:hover {
  background-color: #f7f2ff;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .option-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: #2e384d;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option p {
  font-size: 13px;
  color: #2e384d99;
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .refinement-parameters {
  margin-top: 16px;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .refinement-parameters .form-field {
  margin-bottom: 16px;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .refinement-parameters .form-field:last-child {
  margin-bottom: 0;
}
.step-refine-ai-solutions-trigger-modal .refinement-options .refinement-option .refinement-parameters .form-field .field-input {
  width: 100%;
  font-size: 13px;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions {
  margin-top: 20px;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions h4 {
  font-size: 14px;
  font-weight: 600;
  color: #958dd5;
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions .solution-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions .solution-list .solution-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f9f7fa;
  border-radius: 8px;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions .solution-list .solution-item .solution-name {
  font-size: 13px;
  font-weight: 400;
  color: #2e384d;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions .solution-list .solution-item .remove-solution {
  font-size: 0;
  color: #2e384d99;
  cursor: pointer;
}
.step-refine-ai-solutions-trigger-modal .selected-solutions .solution-list .solution-item .remove-solution:hover {
  color: #cd5c5c;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .field-label {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #958dd5;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .no-previous-refinements {
  padding: 16px;
  background-color: #f5f8ff;
  border: 1px solid #e1e9ff;
  border-radius: 8px;
  color: #2e384d99;
  font-size: 14px;
  text-align: center;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item {
  padding: 12px;
  background-color: #f9f7fa;
  border: 1px solid #ebe0ff;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item:hover {
  background-color: #f7f2ff;
  border-color: #d1c4e9;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .refinement-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .refinement-text {
  flex: 1;
  color: #2e384d;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  min-height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: text;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .refinement-text:empty::before {
  content: "Click to edit...";
  color: #2e384d66;
  font-style: italic;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .refinement-actions {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .remove-refinement-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  color: #2e384d99;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .remove-refinement-btn:hover {
  background-color: #ffeaea;
  color: #cd5c5c;
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .remove-refinement-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(205, 92, 92, 0.2);
}
.step-refine-ai-solutions-trigger-modal .previous-refinements-section .refinement-list .refinement-item .remove-refinement-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.step-refine-ai-solutions-trigger-modal .new-refinement-section {
  margin-bottom: 12px;
}
.step-refine-ai-solutions-trigger-modal .new-refinement-section .field-input {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  padding: 12px;
  border: 1px solid #e1e9ff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #2e384d;
  background-color: #ffffff;
  transition: border-color 0.2s ease;
  resize: vertical;
}
.step-refine-ai-solutions-trigger-modal .new-refinement-section .field-input:focus {
  outline: none;
  border-color: #5762d5;
  box-shadow: 0 0 0 2px rgba(87, 98, 213, 0.1);
}
.step-refine-ai-solutions-trigger-modal .new-refinement-section .field-input::placeholder {
  color: #2e384d66;
}

/**
 * Styles for AI Solution Refinement Loading Modal
 * 
 * This stylesheet defines the visual presentation of the loading modal shown while
 * AI solutions are being refined based on user feedback and refinement requests.
 * 
 * Key components styled:
 * - Modal container layout with centered content
 * - Enhanced loading animations with dot thinking indicator
 * - Multi-step visual process indicators for refinement workflow
 * - Progress bar with glow effect and gradient
 * - Typography hierarchy for status messages
 * 
 * Responsive design:
 * - Adapts layout, spacing, and font sizes for small mobile devices (<501px)
 * - Reduces padding and element sizes on smaller screens
 * 
 * Color palette:
 * - Background: #f7f2ff (progress bar background)
 * - Primary accent: #5762d5 (progress bar fill)
 * - Secondary accent: #6772e5 (gradient end)
 * - Typography: #2e384d (headers), #2e384d99 (description text)
 * 
 * Works in conjunction with the step-refine-ai-solutions-loading-modal.pug template
 * and the LLM request status polling JavaScript for the refinement workflow.
 */
.step-refine-ai-solutions-loading-modal .modal-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
}
@media (max-width: 501px) {
  .step-refine-ai-solutions-loading-modal .modal-form {
    padding: 30px 20px;
  }
}
.step-refine-ai-solutions-loading-modal .modal-form .form-heading {
  margin-bottom: 30px;
}
.step-refine-ai-solutions-loading-modal .modal-form .form-heading p {
  font-size: 16px;
  line-height: 1.5;
  color: #2e384d;
  max-width: 440px;
  margin: 0 auto;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 35px;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .main-spinner {
  width: 70px;
  height: 70px;
  color: #5762d5;
  animation: spin 1.5s linear infinite, pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(87, 98, 213, 0.3));
}
@media (max-width: 501px) {
  .step-refine-ai-solutions-loading-modal .modal-form .loading-animation .main-spinner {
    width: 50px;
    height: 50px;
  }
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot {
  width: 12px;
  height: 12px;
  background-color: #5762d5;
  border-radius: 50%;
  margin: 0 6px;
  animation: jumpingDots 1.4s infinite;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot1 {
  animation-delay: 0s;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot2 {
  animation-delay: 0.2s;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot3 {
  animation-delay: 0.4s;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-animation .thinking-animation .dot.dot4 {
  animation-delay: 0.6s;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 400px;
  margin-bottom: 25px;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator {
  position: relative;
  font-size: 14px;
  color: #8c8c8c;
  padding: 8px 0 8px 30px;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  z-index: 1;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.completed {
  color: #7a7a7a;
  font-weight: 400;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.completed:before {
  background-color: #a5a9e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active {
  color: #5762d5;
  font-weight: 500;
  position: relative;
  animation: textPulse 1.5s infinite;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active:before {
  background-color: #5762d5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  animation: checkPulse 1.5s infinite;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-steps .step-indicator.active:after {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #5762d5;
  border-radius: 4px;
  opacity: 0.7;
  animation: accentPulse 1.5s infinite;
  z-index: 0;
}
.step-refine-ai-solutions-loading-modal .modal-form .loading-progress-text {
  font-size: 15px;
  font-weight: 500;
  color: #2e384d;
  margin-bottom: 10px;
}
.step-refine-ai-solutions-loading-modal .loading-progress-bar-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 12px;
  background: #f7f2ff;
  border-radius: 8px;
  margin: 10px 0 30px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.step-refine-ai-solutions-loading-modal .loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5762d5, #6772e5);
  border-radius: 8px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-refine-ai-solutions-loading-modal .loading-progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  transform: translateX(0%);
  animation: progressGlow 2s infinite;
}

@keyframes jumpingDots {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
@keyframes progressGlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
@keyframes textPulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes checkPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(87, 98, 213, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(87, 98, 213, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(87, 98, 213, 0);
  }
}
@keyframes accentPulse {
  0% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(87, 98, 213, 0.2);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(87, 98, 213, 0.4);
  }
  100% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(87, 98, 213, 0.2);
  }
}
/**
 * Styles for AI Solution Refinement Results Modal
 * 
 * This stylesheet defines the visual presentation of the modal that displays AI-refined
 * solutions after they've been successfully refined based on user feedback (Step 4.5 results
 * in the decision board workflow).
 * 
 * Key components styled:
 * - Overall modal structure and spacing
 * - Success confirmation messaging with checkmark icon
 * - Solutions list with clickable items and hover effects
 * - Footer actions with right-aligned buttons
 * - Responsive behavior for various screen sizes
 * 
 * Color palette:
 * - Background: var(--tertiary-color), #f9f7fa (solution items hover)
 * - Typography: #2e384d (headers), #2e384d99 (body text)
 * - Accents: #5762d5 (primary accent), #ebe0ff (borders)
 * - Success: #4caf50 (success states)
 * 
 * Works in conjunction with the step-refine-ai-solutions-results-modal.pug template.
 */
.step-refine-ai-solutions-results-modal .loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}
.step-refine-ai-solutions-results-modal .loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.step-refine-ai-solutions-results-modal .loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
.step-refine-ai-solutions-results-modal .loading-state p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.step-refine-ai-solutions-results-modal .error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  padding: 20px;
  color: #d32f2f;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item {
  position: relative;
}
.step-refine-ai-solutions-results-modal .solution-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  z-index: 2;
}
.step-refine-ai-solutions-results-modal .solution-refined-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #2196f3;
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 1px 3px rgba(33, 150, 243, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
}
.step-refine-ai-solutions-results-modal .solution-kept-badge {
  display: none;
}
.step-refine-ai-solutions-results-modal .form-heading {
  margin-bottom: 24px;
}
.step-refine-ai-solutions-results-modal .success-confirmation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.step-refine-ai-solutions-results-modal .success-confirmation .success-icon {
  width: 36px;
  height: 36px;
}
.step-refine-ai-solutions-results-modal .success-confirmation .success-icon svg {
  width: 100%;
  height: 100%;
  fill: #4caf50;
}
.step-refine-ai-solutions-results-modal .success-confirmation h3 {
  color: #4caf50;
  margin: 0;
  font-size: 1.4rem;
}
.step-refine-ai-solutions-results-modal #refinement-success-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.step-refine-ai-solutions-results-modal #refinement-description {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.step-refine-ai-solutions-results-modal .modal-form .form-heading {
  margin-bottom: 24px;
}
.step-refine-ai-solutions-results-modal .modal-form .form-heading h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2e384d;
}
.step-refine-ai-solutions-results-modal .modal-form .form-heading p {
  font-size: 14px;
  color: #2e384d99;
}
.step-refine-ai-solutions-results-modal .modal-footer .modal-footer-actions .right-aligned-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
@media (max-width: 501px) {
  .step-refine-ai-solutions-results-modal .modal-footer .modal-footer-actions .right-aligned-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
.step-refine-ai-solutions-results-modal .solutions-count-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0 16px;
}
.step-refine-ai-solutions-results-modal .solutions-count-display .count-number {
  font-size: 3.5rem;
  font-weight: bold;
  color: #5762d5;
  line-height: 1;
}
.step-refine-ai-solutions-results-modal .solutions-count-display .count-label {
  font-size: 1rem;
  color: #666;
  margin-top: 8px;
}
.step-refine-ai-solutions-results-modal p.solution-list-instruction {
  text-align: center;
  font-size: 14px;
  color: #2e384d99;
  margin-bottom: 20px;
}
.step-refine-ai-solutions-results-modal .solutions-list {
  margin: 0 0 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item {
  padding: 16px;
  border-bottom: 1px solid #ebe0ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item:last-child {
  border-bottom: none;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item:hover {
  background-color: #f9f7fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(87, 98, 213, 0.1);
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item:hover .solution-arrow svg {
  transform: translateX(3px);
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item .solution-title {
  font-size: 16px;
  font-weight: 500;
  color: #2e384d;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item .solution-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2e384d99;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-action svg.small {
  width: 16px;
  height: 16px;
  color: #2e384d99;
}
.step-refine-ai-solutions-results-modal .solutions-list .solution-item .solution-meta .solution-arrow svg {
  width: 16px;
  height: 16px;
  fill: #5762d5;
  transition: transform 0.2s ease;
}
.step-refine-ai-solutions-results-modal .no-solutions-message {
  padding: 30px;
  text-align: center;
  background-color: #f9f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}
.step-refine-ai-solutions-results-modal .no-solutions-message p {
  font-size: 16px;
  color: #2e384d;
}

/**
 * @fileoverview AI Progress Steps Styles
 * 
 * This file contains styles for the AI solution generation and refinement
 * progress indicators used in the decision board creation workflow.
 * 
 * Used by:
 * - source/templates/partials/decision-board-modals/step-generate-ai-solutions-loading-modal.pug
 * - source/templates/partials/decision-board-modals/step-generate-ai-solutions-results-modal.pug
 * - source/templates/partials/decision-board-modals/step-refine-ai-solutions-loading-modal.pug
 * - source/templates/partials/decision-board-modals/step-refine-ai-solutions-results-modal.pug
 * 
 * Key Components:
 * - .loading-steps: Progress step container
 * - .step-indicator: Individual progress step styling
 * - .step-indicator.active: Currently active step styling
 * - .step-indicator.completed: Completed step styling
 * - .step-indicator.pending: Pending step styling
 * - .progress-animation: Loading animation components
 * - .ai-generation-status: Status display for AI processes
 * 
 * Layout Features:
 * - Visual progress indication for AI generation
 * - Step-by-step progress visualization
 * - Loading animations and status indicators
 * - Responsive design for mobile and desktop
 * - Consistent with modal design patterns
 * 
 * Dependencies:
 * - Uses CSS custom properties from layout.scss
 * - Imported after all AI solution modal styles in perspectives.scss
 * - May override base step indicator styles from other components
 */
.loading-steps .step-indicator.active:after {
  display: none !important;
}

.decision-board-notifications {
  display: flex;
  gap: 8px;
  min-width: fit-content;
}
@media (max-width: 501px) {
  .decision-board-notifications .notification {
    width: 100%;
  }
}
.decision-board-notifications:empty, .decision-board-notifications:not(:has(> *:not(:empty))) {
  display: none;
}

#custom-form-return-message {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #f9f7fa;
  border-radius: 8px;
  color: #cd5c5c;
}
#custom-form-return-message .return-error-headings h5 {
  font-size: 14px;
  color: #2e384d;
  font-weight: 600;
}
#custom-form-return-message .return-error-headings p {
  color: #2e384d;
  font-size: 13px;
  font-weight: 400;
}
#custom-form-return-message .return-error-headings h5 + p {
  margin-top: 4px;
}

.user-settings-badly-named-thing {
  background-color: var(--tertiary-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  flex: 1;
  width: 100%;
}

.settings-card {
  background-color: var(--tertiary-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 2px 8px 0px #d5c9ee80;
  flex: 1;
  width: 100%;
}

small {
  font-size: 12px;
}
small a {
  color: var(--accent);
  text-decoration: underline;
}

.decision-board-participants-avatars {
  display: flex;
  align-items: center;
}
.decision-board-participants-avatars .notification {
  border: 2px solid var(--tertiary-color);
}
.decision-board-participants-avatars .notification span {
  margin: 0;
  line-height: 1.2;
}
.decision-board-participants-avatars .participant-avatar {
  margin-right: -7px;
  background-color: #e5e5e5;
  color: #2e384d;
  width: 26px;
  border: 2px solid var(--tertiary-color);
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.decision-board-participants-avatars .participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.decision-board-participants-avatars .participant-avatar:last-child {
  margin-right: 0;
}