#info-content {
    white-space: pre-wrap;
}

/* Generell stil og brødtekst */
body, .light-mode, .dark-mode {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Normal vekt for brødtekst */
}

input, button, .btn, .navbar-nav {
    font-family: 'Roboto', sans-serif; /* Ensures consistency in font usage */
    font-weight: 600; /* Normal weight for body text */
}

.navbar-brand img {
    max-width: 150px;
    height: auto;
    margin-left: -32px;
    margin-top: -35px;
    margin-bottom: -35px;
}

.nav-item .collapse .nav-item {
    margin-left: 20px;
}

.navbar-toggler {
    padding: 0;
    border: none;
    cursor: pointer;
}

.navbar-toggler:focus, .navbar-toggler i.fas {
    outline: 2px solid #25347A; /* Focus outline for accessibility */
    border: none;
    box-shadow: none;
}

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#infoButtonsDiv {
    margin-top: 30px;
    margin-bottom: 20px;
}

#chat-heading {
    margin-top: 10px !important;
}

#chatParent-heading {
    margin-left: 15px;
    margin-top: 15px !important;
}

.general-chat-window {
    padding: 10px;
    margin-top: 20px;

}

#general-chat-heading {
    margin-left: 15px !important;
}

footer {
    margin-top: 105px !important;
}

footer a.text-reset {
    transition: color 0.3s; /* Smooth transition for hover */
}

.btn i.fas {
    margin-right: 5px; /* Adds spacing between icons */
}

.btn i:last-child {
    margin-right: 0; /* Removes spacing after the last icon */
}

.iconContact {
    color: #25347A !important;
}

.cookie-banner {
    background-color: #FCFCFC;
    border-top: 5px solid #25347A !important;
    font-weight: 600 !important;
}
.cookie-link {
    color: #25347A;
}

#rejectButton{
    margin-top: 15px;
}

#analysisDiv {
    margin-top: 15px;
    margin-bottom: 20px;
}

#aiEditButtonDiv {
    margin-top: 15px;
}

.editButton {
    margin-top: 15px;
}

.navbar {
    padding: 10px;
    text-align: center;
}

.navbar a {
    padding: 5px 10px;
    display: inline-block;
    color: inherit; /* Inherits from parent .navbar color */
    text-decoration: none;
}


.button {
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* make the whole card feel clickable */
.clickable-card { cursor: pointer; }
/* and make every child inherit that cursor so you don't get text-caret on <p> */
.clickable-card * { cursor: inherit; }

/* Style the switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #FCFCFC;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #25347A
}

input:focus + .slider {
    box-shadow: 0 0 1px #25347A;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#navBottom {
    background-color: #25347A; /* Deep blue background */
    padding-top: 5px;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.5); /* Shadow for depth */
    margin-left: 0;
    margin-right: 0;
}

#analysisDivContent{
    white-space: pre-wrap;
}

.analysisResult{
    white-space: pre-wrap;
}

.columnCardBody {
    margin-top: 20px;
    white-space: pre-wrap;
    margin-bottom: 20px;

}

.step-text{
    margin-top: 140px !important;
    margin-bottom: 40px !important;
}

#wait-message {
    margin-top: 100px;
}

#waitLessTopMargin {
    margin-top: 20px !important;
}

#swotAssistant-pleaseWaitLoading-container {
    margin-bottom: 40px !important;
}


#approve-heading {
    margin-top: 60px !important;
}

#approve-text {
    margin-top: 80px !important;
}

.approveText {
    margin-top: 80px !important;
}

.ideaHeading {
    margin-bottom: 105px !important;
}

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

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

.btnSpace {
    margin-left: 8px;
}

.btnWider {
    width: 80px;
}

.space-top {
    margin-top: 80px !important;
}

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

#btnContainer {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

.nav-link.active {
    font-weight: 600;
}

.nav-link.active-parent {
  font-weight: 600;
  opacity: 0.8;
}

#firstBtnsDiv {
    padding-top: 15px !important;
    padding-bottom: 25px !important;
}

#slide6Read {
    margin-right: 0px !important;
}

.media-no-images {
    margin-top: 18px;
}

.media-card-body {
    background-color: transparent !important; /* Use !important to override any existing styles */
    border: none !important; /* Use !important to override any existing styles */
    padding: 0 !important; /* Adjust padding if necessary */
}

.media-card-body .card, 
.media-card-body .card-body {
    border: none !important;
}



/* Ensure no border or shadow for card and card-body */
.media-card-body .card, 
.media-card-body .card-body {
    border: none !important;
    box-shadow: none !important;
}

/* Remove any border or shadow from images */
.media-card-body .card-img-top {
    border: none !important;
    box-shadow: none !important;
}

/* set white-space*/
#mainContent {
    white-space: pre-wrap;
}

.new-note-div {
    display: flex;
    align-items: stretch; /* Stretch align items to ensure they take the full height */
    margin-bottom: 50px;
}

.new-note-inputs-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.new-heading-input {
    margin-bottom: 8px; /* Add some space between the heading and note input */
}

.new-note-input {
    flex-grow: 1;
    resize: none;
    min-height: 100px !important; /* Set a minimum height for the textarea */
}

.addNoteBtn {
    margin-left: 8px; /* Add space between inputs and button */
    display: flex;
    align-items: center;
    height: auto; /* Let the button take the full height of the container */
    align-self: stretch; /* Ensure the button stretches to fill the height of the container */
}

.improvement-heading {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Default state for the buttons divs, hidden */
.user-message-div .text-end, 
.system-message .mb-2 {
    display: none;
}

/* Show buttons when the message divs are hovered */
.user-message-div:hover .text-end,
.system-message:hover .mb-2 {
    display: block;
}

.user-message-div {
  background: transparent;
  border: 0;
  padding: 0;
}

.userMessageBtnsDiv {
    margin-right: 15px;
}

.label-left {
    text-align: left;
    display: block;   /* Makes the label appear on a new line */
    margin-left: 0;   /* Align to the left edge of its container */
}

.chat-borders{
    white-space: pre-wrap !important;
}

.assistant-message {
    white-space: pre-wrap !important;
}

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

.responseTextDiv {
    max-width: 75%;
}

.campaignSubheading {
    font-size: 21px;
    font-style: italic;
    max-width: 75%;
    margin-left: 10%;
}

.btnCampaign {
    margin-right: 10%;
}

.slider-container {
    margin-top: 20px; /* Space between slider and labels */
}

.slider-container input[type='range'] {
    width: 100%;
}

.slider-container .d-flex span {
    font-size: 0.8rem;
    text-align: center;
    width: 3rem;
    margin-left: -1.5rem;
    position: relative;
    top: 10px;
}

.min-width-350 {
    min-width: 350px;
}

#navbar3 {
    overflow-x: auto;
    white-space: nowrap; /* Prevent line breaks */
}

.production-image-label {
    margin-left: 25%;
}

.cancelButton{
    background-color: #f06755 !important;
    color: #FCFCFC !important;
}

.text-editor-form select {
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
}

.custom-font-select {
    position: relative;
}

.custom-font-select .dropdown-toggle {
    width: 100%;
    text-align: left;
}

.custom-font-select .dropdown-menu {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.custom-font-select .dropdown-menu.show {
    display: block;
}

.custom-font-select .dropdown-item {
    cursor: pointer;
}

.graphic-blue {
    background-color: #25347A !important;
    color: #FCFCFC !important;
}

.campaignCreation {
    color: #FCFCFC !important;
    background-color: #25347A !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
}

.btnCampaign {
    background-color: #FCFCFC !important;
    color: #25347A !important;
    border: none;
}

.selectedImage {
    border: 4px solid #f06755 !important;
}


.carousel-control-prev,
.carousel-control-next {
  /* Already set width: auto !important; or whatever you want, plus background: transparent */
  top: 50% !important;         /* Start in the vertical center */
  transform: translateY(-50%) !important; /* Shift up by half the element's height */
  bottom: auto !important;     /* In case Bootstrap sets 'bottom' */
  color: #25347A !important;   /* Icon color */
}

/* Also ensure the carousel is relatively positioned (Bootstrap usually does this by default) */
.carousel {
  position: relative;
}


/* Then tighten up your custom class */
.custom-carousel-control {
  width: 40px;               /* narrower click area */
  height: 40px;
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.custom-carousel-control:hover {
  opacity: 1;
}

/* Make sure the icons themselves are a smaller size */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 100% 100%;
  filter: invert(35%); /* optional for visibility on bright images */
}

.carousel-item {
    height: 400px;
    overflow: hidden;
}

.carousel-item img {
width: 100%;
height: 100%;
object-fit: contain; /* show entire image; may have bars/padding */
background-color: #fafafa; /* optional, show a background color behind letterboxes */
}

/* Larger custom Bootstrap Switch */
.form-check.form-switch .form-check-input {
    width: 3em;
    height: 1.6em;
    cursor: pointer;
    transform: scale(1.2);
}

/* Custom color when switch is ON */
.form-check.form-switch .form-check-input:checked {
    background-color: #25357a;
    border-color: #25357a;
}

a.disabled { pointer-events: none; }

/* Footer legal links */
.wt a {
    font-size: .85rem;      /* ≈ 13–14 px on default root size */
    font-weight: 400;       /* slightly lighter than the rest of the nav */
    color: #FCFCFC;
    transition: color .3s ease;
}

.wt a:hover,
.wt a:focus {
    color: #25347A;         /* same blue hover as before */
}

.wt a:hover,
.wt a:focus {
    color: #25347A;               /* blue on hover/focus */
}

/* footer copyright */
.wt #copyright {
    font-size: 0.8rem;   /* a touch smaller than body text */
    font-weight: 400;    /* regular weight */
    color: #FCFCFC;      /* same white as the links */
    letter-spacing: 0.2px;
}

footer img {
    height: auto; /*This ensures the aspect ratio is maintained */
    max-width: 150px !important; /* Optional: Limit logo size */
}

@media screen and (max-width: 768px) {
    footer img {
        max-width: 100px !important; /* Optional: Limit logo size */
    }
}

.noBorderRadius {
    border-radius: 0 !important;
}

.general-chat-content {
    overflow-y: scroll; /* Enable scrolling for overflow */
    scrollbar-gutter: stable both;
    min-height: 55vh; /* Set a minimum height for the chat content */
    max-height: 85vh; /* Set a maximum height for the chat content */
    white-space: pre-wrap !important;
}

.notesBorder {
    border-radius: 10px 0 0 0;
}

.demo-message {
    display:block;
    visibility: hidden; /* Start hidden and make visible on click */
    opacity: 0;
    color: #FCFCFC; /* Light text color for contrast */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition for fading in/out */
    font-size:smaller;
    background-color: #f06755;
    padding: 4px;
    border-radius: 5px;
}

.chat-demo-message {
    color: #FCFCFC; /* Light text color for contrast */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition for fading in/out */
    font-size: medium;
    background-color: #f06755;
    padding: 4px;
    border-radius: 5px;
}

/* Base styles for the message container */
.chat-demo-message-container {
    position: absolute;
    right: 20%; /* Adjust based on general right alignment */
    bottom: 10px; /* Start higher up */
    z-index: 1050;
    text-align: center;
    background-color: #f06755; /* Background color for visibility */
    color: white; /* Text color */
    padding: 4px;
    border-radius: 5px;
}

.btnUndo {
    background-color: #f06755 !important;
    color: #FCFCFC !important;
    border: none !important;
}

.status-indicator-container {
    margin-top: 4px;  /* Adds some space below the heading */
    font-size: 0.9em; /* Optional: adjust font size if needed */
    /* You can add more styling here as desired */
}

.status-dot {
    display: inline-block;
    width: 10px;          /* Adjust size as needed */
    height: 10px;
    border-radius: 50%;   /* Makes it a circle */
    background-color: green; /* Default to green for "online" */
    margin-left: 5px;     /* Space between the label and the dot */
}

/* Optionally, create a class for the offline state */
.status-dot-offline {
    background-color: #f06755; /* Red background for visibility */
    display: inline-block;
    width: 10px;          /* Adjust size as needed */
    height: 10px;
    border-radius: 50%;   /* Makes it a circle */
    margin-left: 5px;     /* Space between the label and the dot */
}

#btnCSNotifications {
    position: relative;
}

#btnOrderBookingNotifications {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -4px;  /* Adjust depending on your layout */
    right: 8px; 
    background-color: #f06755; /* Red background for visibility */
    color: #FCFCFC;
    border-radius: 50%;
    font-size: 0.8rem;
    min-width: 20px;
    min-height: 20px;
    padding: 2px 6px;
    text-align: center;
    display: inline-block; /* keep it inline-block so text center works properly */
}

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

.qty-btn{
  width: 1.9rem;      /* = height */
  height: 1.9rem;
  padding: 0;
}

.cart-table td:nth-child(2){                /* description column */
  max-width: 22rem;                         /* pick a value that fits your layout */
  white-space: normal;                      /* allow wrapping */
}

/* keep this with the .qty-btn rule you already added */
.qty-display{
  width: 1.9rem;          /* same size as the +/- buttons */
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;       /* a little bolder so "1" doesn’t look lonely */
  border-left: 0;                          /* merges with the “–” button */
  border-right: 0;                         /* merges with the “+” button */
}

/* 5 = Name | Description | Price | Qty | Line Total */
.cart-table th:nth-child(5),
.cart-table td:nth-child(5){
  white-space: nowrap;
  min-width: 7.5rem;   /* tweak if you translate to a longer phrase */
}

.table-blue {
    background-color: #25347A; /* Deep blue background */
    color: #FCFCFC; /* Light text for contrast */
}

/* Resize handles (images only) */
.ve-handle {
  position: absolute;
  top: 0;
  width: 12px;                    /* bigger hit area */
  height: 100%;
  cursor: ew-resize;
}
.ve-handle.right { right: 0; }

/* Optional: invisible hit-extension for easier grabs */
.ve-handle::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -4px; right: -4px;        /* +8px total grab zone */
}

/* Scrubber and grid */
.ve-scrubber {
  position: absolute;   /* already set in your code, but harmless to repeat */
  top: 0; bottom: 0;    /* spans full height */
  width: 2px;           /* your existing width */
  background: #f06755;  /* your existing color */
  z-index: 10;          /* ↑ higher than .ve-scale (3) and .ve-track (2) */
  pointer-events: none; /* don't block dragging/scrubbing */
}
.ve-grid {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--ve-scale-h) + 8px); /* align with margin-bottom above */
  bottom: 0;
  pointer-events: none;
  z-index: 1;           /* under the scale */
}
.ve-grid div { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.06); }

/* ---------- Track text tints (light theme defaults) ---------- */
:root {
  --ve-visual-text: #3A4AA0; /* subtle blue, pairs with #25347A */
  --ve-audio-text:  #2F7B57; /* subtle green/teal */
  --ve-scale-h: 24px;
}

/* Scale row */
.ve-scale {
  position: relative;
  display: block;
  height: var(--ve-scale-h);
  line-height: var(--ve-scale-h);
  margin-bottom: 8px;   /* separates scale from tracks */
  z-index: 3;           /* above tracks and grid */
  background: #F8FAFF;  /* optional, keeps it clean over the grid */
}

.ve-track + .ve-track { margin-top: 12px; }
.ve-track { z-index: 2; }

.ve-preview {
    border-radius: 12px;
}

/* Apply only when NOT selected (selected uses white text) */
.ve-clip.visual:not(.selected) { color: var(--ve-visual-text); }
.ve-clip.audio:not(.selected)  { color: var(--ve-audio-text); }

/* Prevent text selection within the editor timeline */
.ve-timeline,
.ve-timeline * ,
.ve-track-label,
.ve-clip,
.ve-scale {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS Safari */
}

/* Nice pointer feedback */
.ve-clip { cursor: grab; }
.ve-clip:active { cursor: grabbing; }

/* 3-zone top bar: LEFT / MIDDLE / RIGHT */
.topbar-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left grows, usage auto, right grows */
  align-items: end;               /* align all items to bottom */
  gap: 12px;
  margin: 0; padding: 8px 0;          /* minimal height */
}

/* placement */
.topbar-left  { justify-self: start; }
.topbar-mid   { justify-self: center; }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* Compact, stacked, centered usage */
.usage-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;                /* super tight */
  line-height: 1.05;
  font-size: .875rem;
  margin: 0; padding: 0;   /* kill empty space */
}
.usage-stacked .total { color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }
.usage-stacked .bar {
  width: 300px;
  max-width: 40vw;
  margin: 4px 0;   /* <— adds a little space above & below the bar */
}

.usage-stacked .progress { height: 6px; margin: 0; }
.usage-stacked .legend { display: flex; gap: 8px; color: var(--bs-secondary-color, #6c757d); font-size: .82rem; white-space: nowrap; }

@media (max-width: 992px) {
  .usage-stacked .bar { width: 220px; max-width: 60vw; }
  .usage-stacked .legend { font-size: .78rem; }
}

.delete-card {
    background-color: #f06755;
    color: #FCFCFC;
    border: #FCFCFC 1px solid;
}

.btn-danger-white {
    background-color: #FCFCFC !important;
    color: #f06755 !important;
    border: #FCFCFC 1px solid !important;
}

/* Parent around the image + buttons */
.logo-wrapper {
    position: relative;
}

/* Overlay that sits on top of the image */
.logo-overlay {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75); /* semi-transparent white */
    opacity: 0;
    pointer-events: none;          /* don’t block clicks when hidden */
    transition: opacity 0.2s ease-in-out;
    margin-top: 0 !important;      /* undo the 'mt-1' visual effect */
}

/* Show overlay only when hovering the logo area */
.logo-wrapper:hover .logo-overlay {
    opacity: 1;
    pointer-events: auto;          /* now buttons are clickable */
}

/* Base track (unchecked) */
.form-switch .form-check-input.xl-toggle {
  background-color: #ccc;
  border-color: #ccc;          /* keep border same as track */
}

/* Track on focus (unchecked) */
.form-switch .form-check-input.xl-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 52, 122, 0.25);
  background-color: #ccc;
  border-color: #ccc;
}

/* Track when checked */
.form-switch .form-check-input.xl-toggle:checked {
  background-color: #25347A;
  border-color: #25347A;
}

/* Focus ring */
.form-switch .form-check-input.xl-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 52, 122, 0.25);
}

/* Thumb color (Bootstrap draws it with ::before on the input) */
.form-switch .form-check-input.xl-toggle::before {
  background-color: #FCFCFC;
}

/* Thumb on focus */
.form-switch .form-check-input.xl-toggle::before:focus {
  background-color: #25347A;
}

/* Keep thumb white when checked too (optional, explicit) */
.form-switch .form-check-input.xl-toggle:checked::before {
  background-color: #25347A;
}

.planDiv:hover {
    cursor: pointer;
}

/* Compact + aligned XL switch everywhere */
.xl-switch {           /* wrapper (the absolutely-positioned div) */
  font-size: .875rem;  /* keep it "cute" regardless of parent font-size */
  line-height: 1;
}

.xl-switch .form-switch {
  margin: 0;                             /* kill extra vertical space */
  display: inline-flex;
  align-items: center;                   /* label and toggle on same baseline */
  gap: .25rem;
}

.xl-switch .form-check-label {
  margin: 0;                             /* align text with the switch */
}

/* lock the switch size + remove Bootstrap's top nudge */
.xl-switch .form-check-input.xl-toggle {
  width: 34px;            /* or 2em if you prefer scaling */
  height: 18px;
  margin: 0;              /* remove default .25em top margin */
  vertical-align: middle;
}

/* your colors (kept, but deduped) */
.xl-switch .form-check-input.xl-toggle { background-color:#ccc; border-color:#ccc; }
.xl-switch .form-check-input.xl-toggle:checked { background-color:#25347A; border-color:#25347A; }
.xl-switch .form-check-input.xl-toggle:focus { box-shadow:0 0 0 .2rem rgba(37,52,122,.25); }

.dark-mode .plan-card hr {
    margin-top: 15px;
    margin-bottom: 15px;
}

.plan-card .price {
    align-self: center; /* Vertically center align the price */
    margin-right: 10px; /* Spacing between price and button */
    font-weight: bold; /* Optional: To make the price stand out */
}

.dropdown-menu .dropdown-item {
  cursor: pointer;
  user-select: none; /* optional: prevent text selection */
}

/* 1) Zero out default margins; we’ll add back only what we want */
p.markdown-view,
ul.markdown-view,
ol.markdown-view,
h2.markdown-view,
h4.markdown-view,
h5.markdown-view { margin: 0; }

/* 2) Paragraph rhythm */
p.markdown-view + p.markdown-view { margin-top: .1rem; }

/* 3) Headings: more space BEFORE, very little AFTER */
h2.markdown-view,
h4.markdown-view,
h5.markdown-view { margin-top: 1.75rem; }                 /* space above headings */
h2.markdown-view + p.markdown-view,
h4.markdown-view + p.markdown-view,
h5.markdown-view + p.markdown-view { margin-top: .15rem; }  /* under heading */

/* 4) Lists: very compact, explicit item gap */
ul.markdown-view,
ol.markdown-view { margin-left: 1.25rem; }             /* indent only */
li.markdown-view { margin: 0; }                        /* kill browser li margins */
li.markdown-view + li.markdown-view { margin-top: .2rem; }   /* item-to-item gap */

/* 5) Paragraph ↔ list adjacency (both directions) */
p.markdown-view + ul.markdown-view,
p.markdown-view + ol.markdown-view { margin-top: .15rem; }

ul.markdown-view + p.markdown-view,
ol.markdown-view + p.markdown-view { margin-top: .15rem; }

/* 6) Heading → list even tighter */
h2.markdown-view + ul.markdown-view,
h2.markdown-view + ol.markdown-view,
h4.markdown-view + ul.markdown-view,
h4.markdown-view + ol.markdown-view,
h5.markdown-view + ul.markdown-view,
h5.markdown-view + ol.markdown-view { margin-top: .25rem; }

/* 7) Back-to-back lists (snug) */
ul.markdown-view + ul.markdown-view,
ul.markdown-view + ol.markdown-view,
ol.markdown-view + ul.markdown-view,
ol.markdown-view + ol.markdown-view { margin-top: .15rem; }

/* 8) No extra space at the very top 
.markdown-view:first-child { margin-top: 0 !important; }*/


/* icon sizing */
.editor-toolbar .editor-btn i {
  font-size: .95rem;
}

/* join borders so groups feel like one control */
.editor-toolbar .btn-group .editor-btn + .editor-btn {
  margin-left: -1px;
}

/* disabled formatting buttons */
.editor-toolbar .format-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* slightly tighter spacing between groups */
.editor-toolbar .btn-toolbar .btn-group { margin-right: 4px; }
.editor-toolbar .btn-toolbar .btn-group:last-child { margin-right: 0; }

/* Default icon color for editor buttons */
.editor-toolbar .editor-btn i { color: #212529; }

/* Info button icon in Bootstrap primary blue */
.editor-toolbar .editor-btn.info-btn i { color: #25347A !important; }

.assistant-message .codeblock-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .45rem;
  border: none;
  background: inherit;
  border-radius: .375rem;
  font-size: .75rem;
  cursor: pointer;
  box-shadow: none;
}
/*.assistant-message .codeblock-copy:hover { background: #DCE7FF; }*/
.assistant-message .codeblock-copy:focus {
  outline: 2px solid var(--bs-primary, #25347A);
  outline-offset: 2px;
}

/* (Optional) chat typography tighteners you had in JS */
.assistant-message { line-height: 1.5; }
.assistant-message > :first-child { margin-top: 0 !important; }
.assistant-message > :last-child  { margin-bottom: 0 !important; }
.assistant-message p { margin: .5rem 0; }
.assistant-message h2, .assistant-message h3, .assistant-message h4, .assistant-message h5 {
  margin: .85rem 0 .4rem; font-weight: 700;
}
.assistant-message ul, .assistant-message ol {
  margin: .5rem 0 .5rem 1.25rem; padding: 0;
}
.assistant-message li { margin: .2rem 0; }
.assistant-message ul ul, .assistant-message ol ol { margin-top: .2rem; margin-bottom: .2rem; }
.assistant-message p + ul, .assistant-message p + ol,
.assistant-message ul + p, .assistant-message ol + p { margin-top: .35rem; }
.assistant-message .codeblock { margin: .75rem 0; }
.assistant-message p + .codeblock { margin-top: .5rem; }
.assistant-message .codeblock + p { margin-top: .5rem; }



/* ========== History panel ========== */
.history-list .list-actions {
  opacity: 0.6;
  transition: opacity .15s ease-in-out;
}
.history-list .list-group-item:hover .list-actions {
  opacity: 1;
}
.history-list .icon-btn {
  border: 0;
  background: transparent;
  padding: 0.25rem;
  line-height: 1;
  cursor: pointer;
}
.history-list .icon-btn:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}
.history-list .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.history-list .rename-input {
  width: 100%;
  max-width: 260px;
}

/* ========== Assistant buttons (show on hover) ========== */
.system-message .assistant-action-buttons {
  opacity: 0;
  transition: opacity .15s ease-in-out;
  pointer-events: none;
}
.system-message:hover .assistant-action-buttons,
.system-message:focus-within .assistant-action-buttons {
  opacity: 1;
  pointer-events: auto;
}

/* ========== Chat typography tightening ========== */
.assistant-message { line-height: 1.5; }

/* Trim outer edges */
.assistant-message > :first-child { margin-top: 0 !important; }
.assistant-message > :last-child  { margin-bottom: 0 !important; }

/* Paragraphs */
.assistant-message p { margin: .5rem 0; }

/* Headings (renderer uses h2/h4/h5) */
.assistant-message h2,
.assistant-message h3,
.assistant-message h4,
.assistant-message h5 {
  margin: .85rem 0 .4rem;
  font-weight: 700;
}

/* Lists */
.assistant-message ul,
.assistant-message ol {
  margin: .5rem 0 .5rem 1.25rem;
  padding: 0;
}
.assistant-message li { margin: .2rem 0; }
.assistant-message ul ul,
.assistant-message ol ol { margin-top: .2rem; margin-bottom: .2rem; }

/* Paragraph <-> list adjacency (tighten) */
.assistant-message p + ul,
.assistant-message p + ol { margin-top: .35rem; }
.assistant-message ul + p,
.assistant-message ol + p { margin-top: .35rem; }

/* Code blocks in flow */
.assistant-message .codeblock { margin: .75rem 0; }
.assistant-message p + .codeblock { margin-top: .5rem; }
.assistant-message .codeblock + p { margin-top: .5rem; }

.assistant-message > .codeblock:first-child { margin-top: 0 !important; }








  





































































/* Light Mode Specific Styles */
.light-mode {
    background-color: #F8FAFF; /* Light grey background */
}

.light-mode .navbar, .light-mode .navbar a, .light-mode .nav-link, .light-mode .navbar-toggler i.fas {
    color: #25347A; /* Deep blue color for text and links */
}

.light-mode .nav-link:hover, .light-mode .navbar a:hover {
    color: #0056b3; /* Lighter blue for hover effect */
    background-color: #F8FAFF;
    font-weight: 600; /* Bold text on hover */
    cursor: pointer; /* Pointer cursor for interactive elements */
}

.light-mode .top-navbar {
    background-color: #FCFCFC; /* Samme som bakgrunnen for en sømløs visuell opplevelse */
    color: #1C1C1C; /* Litt lysere enn rent svart for tekst */
}

.light-mode .sidebar {
    background-color: #FCFCFC; /* Primær bakgrunnsfarge */
    border-right: 1px solid #25347A; /* Høyre kant for å skille fra innholdet */
    border-bottom: 1px solid #25347A; /* Bunnkant for å skille fra bunnen */
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    padding-bottom: 45px;
}

.light-mode #navbar3 {
    font-size: 20px;
    border-bottom: 1px solid #25347A;
    margin-bottom: 60px;
    margin-left: 5%;
    margin-right: 5%;
}

.light-mode #navbar3 .nav-link:hover {
    font-weight: 600; /* Bold text on hover */
    cursor: pointer; /* Pointer cursor for interactive elements */
}

.light-mode .verticalNavLines {
    color : #25347A; /* Deep blue color for text and links */
    margin-top: 0px;
}

.light-mode .btn, .light-mode button {
    background-color: #F8FAFF; /* White background for buttons */
    color: #25347A; /* Text color for buttons */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2); /* Shadow based on the border color */
    cursor: pointer; /* Pointer cursor for interactive elements */
    transition: all 0.3s; /* Smooth transition for hover effects */
    border: 1px solid #25347A; /* Border based on the text color */
    border-radius: 10px; /* Rounded corners for buttons */
    padding: 10px 20px; /* Padding for a comfortable click area */
}

.light-mode .btn:hover, .light-mode button:hover {
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.75); /* Slightly larger shadow on hover for depth */
}

.light-mode #btnLogout {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    box-shadow: none;
    height: 40px;
    margin-top: 5px;
    margin-right: 10px;
    padding: 0; /* Removed padding to let flexbox handle alignment */
    width: 60px; /* Optional: Adjust width as necessary */
    border: none; /* Remove border for a cleaner look */
}

.light-mode #btnLogout:hover {
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2); /* Slightly larger shadow on hover for depth */
    border: none; /* Remove border for a cleaner look */
}

.light-mode footer {
    background-color: #333333; /* Dark footer background */
    color: #FCFCFC; /* Light text for contrast */
}

.light-mode footer a.text-reset {
    color: #FCFCFC; /* Keeping icons consistent */
}

.light-mode footer a.text-reset:hover {
    color: #0056b3; /* Hover effect for icons */
}

.light-mode .system-message {
    text-align: left;
    color: #212529;
    width: 70%;
    margin-top: 10px;
    white-space: pre-wrap !important;
}

.light-mode .initial-message {
    color: #212529;
    margin-top: 10px;
}

.light-mode .chat-input {
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
    margin-left: 15px;
    background-color: #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.1); /* Shadow based on the border color */
    min-height: 100px;
}

.light-mode .chat-input2 {
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
    background-color: #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.1); /* Shadow based on the border color */
    min-height: 100px;
    border: 1px solid #25347A;
    border-radius: 10px;
}

.light-mode .chat-input-container{
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    outline: 2px solid #25347A;
    border-radius: 10px;
}

.light-mode .selectBg {
    background-color: #FCFCFC !important;
    color: #212529 !important;
}

.light-mode .selectBg2 {
    background-color: #FCFCFC !important;
    color: #212529 !important;
}

.light-mode .assistant-input {
    min-height: 150px;
    background-color: #FCFCFC !important;
    border-radius: 0 0 0 10px;
    /*border: 2px solid #25347A;
    border-top: none;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);*/
    padding: 15px;
    color: #212529;
}

.light-mode #GAchatButton{
    background-color: #25347A;
    color: #FCFCFC;
    border-radius: 0 10px 10px 0;
    /*box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    border: 2px solid #25347A;*/
}

.light-mode .spinner-border.text-primary {
    border-color: #CBD2D9 !important;
}

.light-mode .spinner-border.text-primary {
    border-top-color: #25347A !important; /* This will change only the top border color */
}

.light-mode .projectIdeaSection {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3); /* Shadow based on the border color */
    color: #212529;
}

.light-mode .columnCards {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3); /* Shadow based on the border color */
    padding: 15px;
    color: #212529;
}

.light-mode .form-edit {
    border: 1px solid #25347A;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    height: 200px;
}

.light-mode .saveBtn {
    margin-top: 15px;
    width: 100px;
    background-color: #25347A !important;
    color: #FCFCFC !important;
    border: none;
}

.light-mode .saveBtn2 {
    width: 100px;
    background-color: #25347A !important;
    color: #FCFCFC !important;
    border: 1px solid #25347A !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.4);
}

.light-mode .saveBtn3 {
    background-color: #25347A !important;
    color: #FCFCFC !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
    border: 2px outset #25347A;
}

.light-mode .saveBtn4 {
    background-color: #25347A !important;
    color: #FCFCFC !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.6);
}

.light-mode .save2ExtraHeight {
    padding-top: 2px;
    padding-bottom: 2px;
}

.light-mode .form-edit-tableContent {
    min-height: 550px !important;
    background-color: #FCFCFC !important;
    color: #212529;
}

.light-mode .form-final-approve {
    border-radius: 10px;
    padding: 15px !important;
    margin-bottom: 10px;
    margin-top: 35px !important;
    min-height: 750px !important;
    background-color: #FCFCFC;
    color: #212529;
}

.light-mode .list-container {
    border-radius: 10px;
    padding: 15px !important;
    margin-bottom: 35px !important;
    margin-top: 35px !important;
    background-color: #FCFCFC;
    color: #212529;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.4);
}

.light-mode .generateBtn {
    background-color: #25347A !important;
    color: #FCFCFC !important;
    border: none;
}

.light-mode .btn-durations {
    background-color: #FCFCFC; /* Light background for inactive button */
    color: #25347A;
    border: none;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.light-mode .btn-duration-active {
    background-color: #25347A; /* Deep blue for active button */
    color: #FCFCFC;
    border: none;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.light-mode .btn-inactive {
    background-color: #FCFCFC; /* Light background for inactive button */
    color: #25347A;
}

.light-mode .btn-active {
    background-color: #25347A; /* Deep blue for active button */
    color: #FCFCFC;
    border: none;
}

.light-mode .btn-active2 {
    background-color: #25347A; /* Deep blue for active button */
    color: #FCFCFC;
    border: 1px solid #25347A;
}

.light-mode .step-add-info-input {
    min-height: 200px;
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 2px solid #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 15px;
    color: #212529;
}

.light-mode .step-add-info-input2 {
    min-height: 120px;
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 2px solid #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 15px;
    color: #212529;
}

.light-mode .input-1 {
    background-color: #F8FAFF;
    color: #212529;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    border: 1px solid #25347A;
}

.light-mode .input-2 {
    background-color: #FCFCFC;
    color: #212529;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
    border: 1px solid #25347A;
}

.light-mode .btnNext {
    background-color: #FCFCFC;
    color: #25347A;
    min-width: 105px;
    margin-right: 0px !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
    border: 2px outset #25347A;
}

.light-mode .btnBlue {
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
}

.light-mode .btnBlue2 {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #25347A;
    padding: 10px 20px; /* Padding for a comfortable click area */
}

.light-mode .startButton {
    margin-top: 35px !important;
    margin-top: 20px;
    min-width: 125px;
    background-color: #FCFCFC;
    color: #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
    border: 3px outset #25347A;
}

.light-mode .startButton:hover {
    background-color: #25347A;
    color: #FCFCFC;
}

.light-mode .btnBorder {
    border: 2px outset #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
}

.light-mode .btnBorder2 {
    border: 3px outset #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
}

.light-mode .btnBorder2:hover {
    background-color: #25347A;
    color: #FCFCFC;
}

.light-mode .finalApproveManualEditTextArea {
    background-color: #FCFCFC;
    color: #212529;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    min-height: 580px;
}

.light-mode .analyzeBtn {
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
    width: 125px;
}

.light-mode .approveBtn {
    background-color: #25347A;
    color: #FCFCFC;
}

.light-mode .btn-danger {
    border: 2px solid #f06755;
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.8);
}

.light-mode .btn-danger2{
    border: none;
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.5);
}

.light-mode .btn-danger3 {
    border: 1px solid #f06755;
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.5);
}

.light-mode .btn-danger3:hover {
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.8);
}

.light-mode #editImage {
    max-width: 60%;
    max-height: 60%;
}

.light-mode .custom-alert {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

.light-mode .custom-alert-content {
    background-color: #FCFCFC;
    color: #25347A;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 25%;
    text-align: center;
    font-weight: 600;
}
  
.light-mode .alert-button {
    width: 80px;
    padding: 8px 16px;
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
  
.light-mode .alert-button:hover {
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 4px 8px rgba(0,0,0,0.9);
}

.light-mode .media-image-col {
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 8px;
}

.light-mode .marketing-message {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 15px;
    background-color: #FCFCFC !important;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: #212529;
}

.light-mode .btnLogoProgram {
    background-color: #25347A;
    color: #FCFCFC !important;
    border: none;
}

.light-mode .logo-option-active {
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
}

/* Style the buttons to fit well within the card */
.light-mode .media-card-body .btn {
    background-color: #FCFCFC; /* Light background for buttons */
    border: none; /* Remove button borders for a cleaner look */
    margin: 0.5em 0.25em; /* Adjust margin to your preference */
    padding: 10px 20px; /* Adjust padding to your preference */
}

.light-mode .btn-logo-chosen {
    background-color: #25347A; /* Deep blue background for selected button */
    color: #FCFCFC; /* Light text for contrast */
}

.light-mode .notes-section {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 25px;
    color: #212529;
}

.light-mode .addNoteBtn {
    background-color: #FCFCFC !important;;
    color: #25347A;
}

.light-mode .note-div {
    border-top: #25347A 1px solid;
    padding-top: 35px;
    padding-bottom: 25px;
}

.light-mode .optionCol {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 25px;
    color: #212529;
    outline: 2px solid #25347A;
}

.light-mode .optionCol:hover {
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.5);
    background-color: #25347A;
    color: #FCFCFC;
    cursor: pointer;
}

.light-mode .slider-labels {
    color: #212529; /* Dark text color for contrast */
    margin-top: 30px;
    font-size: 14px;
}

.light-mode input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    background: #25347A; /* Custom color */
    cursor: pointer; /* Cursor on hover */
  }
  
.light-mode input[type=range]::-moz-range-thumb {
    background: #25347A; /* Custom color */
    cursor: pointer; /* Cursor on hover */
  }
  
.light-mode input[type=range]::-ms-thumb {
    background: #25347A; /* Custom color */
    cursor: pointer; /* Cursor on hover */
  }

.light-mode .itemCreation {
    font-size: 17px;
    font-weight: 600;
    color: #25347A;
    background-color: #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
}

.light-mode .itemCreation:hover {
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.7);
}

.light-mode .selected {
    background-color: #25347A;
    color: #FCFCFC;
}

.light-mode .media-card{
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    color: #212529;
}

.light-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.light-mode .standard-card{
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    color: #212529;
}

.light-mode .standard-card-header {
    background-color: #25347A;
    color: #FCFCFC;
    font-weight: 600;
}

.light-mode .standard-card-body {
    background-color: #FCFCFC;
    color: #212529;
}

.light-mode .standard-textarea2{
    background-color: #FCFCFC;
}

.light-mode .standard-textarea{
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
}

.light-mode .btnShiny {
    background-color: #FCFCFC;
    color: #25347A;
    border: none;
}

.light-mode .btnShiny2 {
    background-color: #FCFCFC;
    color: #212529;
    border: none;
}

.light-mode .text-color {
    color: #212529;
}

.light-mode .a4-look {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 15px;
    color: #212529;
}

.light-mode .productServiceObjectCard {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 15px;
    color: #212529;
}

.light-mode .website-is-live-button {
    background-color: #4CAF50;
    color: #FCFCFC;
    border: none;
}

.light-mode .website-not-live-button {
    background-color: #f44336;
    color: #FCFCFC;
    border: none;
}

.light-mode .websiteCPInfoDiv {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 4%;
    padding-top: 3%;
    padding-bottom: 2%;
    color: #212529;
}

.light-mode .websiteCPInfoDiv2 {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 4%;
    color: #212529;
}

.light-mode .webCPBottomDiv {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 4%;
    color: #212529;
}

.light-mode .blog-bottom-div {
    border-top: 3px solid #25347A;
}

.light-mode .editable:focus {
    outline: 3px solid #25347A /* Add a blue outline on focus */
}

.light-mode .editable2:focus{
    outline: 3px solid #25347A;
    padding: 8px;
    border-radius: 4px;
    background-color: #FCFCFC;
    box-shadow: 0 0 0 0.2rem rgba(37,52,122,.25);
}

.light-mode .editable3 {
    color: #212529;
}

.light-mode .editable3:focus {
    outline: 3px solid #25347A;
    padding: 8px;
    border-radius: 4px;
    background-color: #F8FAFF;
    box-shadow: 0 0 0 0.2rem rgba(37,52,122,.25);
}

.light-mode .options-panel {
    background-color: #F8FAFF;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
    padding: 15px;
    color: #212529;
}

.light-mode .websiteCards {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    color: #212529;
}

.light-mode .notification-none {
    background-color: #FCFCFC;
    border: none;
    box-shadow: none !important;
    color: #25347A;
}

.light-mode .notification-new {
    border: none;
    box-shadow: none;
}

.light-mode .contactPlus-knowledge-text {
    background-color: #FCFCFC;
    border-radius: 5px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #212529;
}

/*the customer service overlay*/
.light-mode .cs-overlay {
    background-color: #FCFCFC;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px;
    border: 3px solid #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.6);
    padding: 15px;
    color: #212529;
}

.light-mode .site-overlay-background {
    background-color: rgba(252, 252, 252, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.light-mode .noShadow {
    box-shadow: none !important;
    border: none !important;
    background-color: #F8FAFF !important;
}

.light-mode .chats-header {
    border-bottom: 2px solid #25347A;
}

.light-mode .chat-inbox {
    background-color: #F8FAFF;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #212529;
}

.light-mode .assistant-message-div {
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #212529;
}

.light-mode .user-message {
    color: #212529;
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    max-width: 55%;
    white-space: pre-wrap !important;
    box-shadow: 0 0 5px rgba(37, 52, 122, 0.1);
}


.light-mode .chat-item {
    border-bottom: 1px solid #25347A;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
    color: #212529;
}

.light-mode .text-area-div {
    border-top: 2px solid #25347A;
}

.light-mode .chat-text-area {
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 10px;
    color: #212529;
    min-height: 100px;
}

.light-mode .editTextP {
    background-color: #FCFCFC;
    padding: 10px;
    color: #212529;
    border-radius: 10px;
    border: 1px solid #25347A;
    min-height: 120px !important;
}

.light-mode .finances-nav-buttons {
    background-color: #FCFCFC;
    border: 1px solid #25347A;
    color: #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    border-radius: 10px;
}

.light-mode .finances-nav-buttons:hover {
    background-color: #25347A;
    color: #FCFCFC;
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.5);
    cursor: pointer;
}

.light-mode .day-closed input[type="checkbox"] {
    accent-color: #FCFCFC; /* Change the checkbox color */
    background-color: #f06755; /* Change the checkbox background color */
}

.light-mode .detailsDiv {
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 2px solid #25347A;
    padding: 20px;
    color: #212529;
    min-height: 150px;
}

.light-mode .calendarDayBadge {
    background-color: #f06755 !important;
    color: #FCFCFC !important;
}

.light-mode .calendar-today {
    background-color: #25347A !important;
    color: #FCFCFC !important;
}

.light-mode .btn-no-border {
    border: none !important;
    box-shadow: none !important;
    background-color: #FCFCFC !important;
    color: #25347A !important;
}

.light-mode .emptyOrPastCell {
    background-color: #f8faff !important;
    color: #212529 !important;
}

.light-mode .light-shadow {
    background-color: #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.1); /* Shadow based on the border color */
}

.light-mode .simpleTableBody {
    background-color: #FCFCFC;
    color: #212529;
}

.light-mode .notification-item {
    border-bottom: 1px solid #25347A;
}

.light-mode .info-stuff {
    color : #23347A;
}

.light-mode .checkboxDiv {
    background-color: #FCFCFC;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 40px 15px !important;
    color: #212529;
}

.light-mode .website-input {
    background-color: #FCFCFC;
    border: 1px solid #25347A;
    border-radius: 10px;
    padding: 10px;
    color: #212529;
    min-height: 150px;
}

.light-mode .codeIcon {
    color: #25347A; /* Deep blue for code icon */
}

.light-mode .deleteIcon{
    color: #f06755; /* Red for delete icon */
    background-color: transparent;
}

.light-mode .renameIcon {
    color: #25347A; /* Deep blue for rename icon */
    background-color: #FCFCFC !important;
}

.light-mode .chatMenuButtons {
    background-color: #FCFCFC;
    border: none;
    color: #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
    border-radius: 10px;
}

.light-mode .chatMenuButtons:hover {
    background-color: #25347A;
    color: #FCFCFC;
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.4);
    cursor: pointer;
}

.light-mode .chatSelectionColorText {
    color: #25347A !important;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.1);
}

.light-mode .historyDiv {
    background-color: #FCFCFC;
    border: 1px solid #25347A;
    border-radius: 5px;
    color: #212529;
}

.light-mode .historyCustomList {
    background-color: #FCFCFC;
    color: #212529;
}

.light-mode .historyItem {
    background-color: #FCFCFC;
    color: #212529;
}

.light-mode .media-alt-input {
    background-color: #FCFCFC;
    border: 1px solid #25347A;
    border-radius: 8px;
    color: #212529;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.1);
}
.light-mode .saveChatMessageBtn:hover {
    background-color: #25347A;
    color: #FCFCFC;
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.3);
}

.light-mode .preview-window {
    background-color: #F8FAFF;
    outline: 4px solid #25347A;
    border-radius: 5px;
}

.light-mode .ve-timeline {
  position: relative;
  border: 2px solid #25347A;      /* new */
  border-radius: 12px;
  background: #F8FAFF;            /* new */
  padding: 16px 16px 16px 0;      /* remove left gap (see #7) */
  overflow-x: auto;
}

.light-mode .ve-track {
  position: relative;
  height: 64px;
  background: #F8FAFF;            /* blends with timeline */
  border-radius: 0;
  overflow: visible;
}

.light-mode .ve-clip {
  position: absolute;
  height: 100%;
  background: #FCFCFC;            /* new */
  border: 1px solid #25347A;      /* new */
  border-radius: 0;               /* square corners per request */
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 12px;                /* a bit more room for handles */
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}

/* Keep track-differentiation subtle via a tint on text only (optional)
.ve-clip.visual { }
.ve-clip.audio  { } */

.light-mode .ve-clip.selected {
  background: #25347A;            /* new */
  color: #FCFCFC;                    /* readable text on dark bg */
  border-color: #25347A;
  outline: none;                  /* remove thick side outline */
}

.light-mode .selectElements {
    background-color: #FCFCFC;
    border: 1px solid #25347A;
    border-radius: 8px;
    color: #212529;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.light-mode .btnDocumentUpload {
    background-color: #FCFCFC;
    color: #25347A;
    border: 1px solid #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.light-mode .btnDocumentUpload:hover {
    background-color: #25347A;
    color: #FCFCFC;
    box-shadow: 0 0 15px rgba(37, 52, 122, 0.4);
}

.light-mode #approve-screen {
    white-space: pre-wrap;
    background-color: #F8FAFF;
    color: #212529;
}

.light-mode .plan-card {
    background-color: #FCFCFC !important; /* White background */
    border: none; /* Removes the default border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.light-mode .plan-card .list-group-item {
    border-bottom: none; /* Removes the default border */
    background-color: #FCFCFC; /* White background */
}

.light-mode .plan-card .card-title {
    border-bottom: 2px solid #25347A; /* Example: Blue border */
    color: #25347A;
    margin-bottom: 15px;
    background-color: #FCFCFC;
}

.light-mode .selected-plan {
    border: 2px solid #25347A; /* Example: Blue border */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5); /* Updated: Shadow based on the same color as the border */
}

.light-mode .document-div {
    background-color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    color: #212529;
    padding: 2.5rem;
    padding-bottom: 4rem;
}

.light-mode .editor-toolbar {
  align-items: flex-end !important;
    position: sticky;
    top: 0;
    z-index: 1040;            /* above content */
    background: #F8FAFF;       /* solid bg so it doesn't show through */
}
.light-mode .editor-toolbar .editor-btn {
  padding: .25rem .45rem !important;
  line-height: 1.1 !important;
  border-radius: 6px !important;
  border: 1px solid #dee2e6 !important;   /* light gray border */
  background-color: #FCFCFC !important;    /* white bg */
  color: #212529 !important;               /* near-black text */
  box-shadow: none !important;
  cursor: pointer;
}

.light-mode .editor-toolbar .editor-btn:hover {
  background-color: #F8FAFF !important;   /* subtle gray */
  border: 1px solid #25347A !important; /* blue border on hover */
}

.light-mode .editor-toolbar .editor-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important; /* soft blue ring */
}

.light-mode .assistant-message .codeblock {
  border: 1px solid #CBD8F0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #FAFCFF;          /* neutral light bg */
  margin: .5rem 0;
  box-shadow: 0 0 10px rgba(37, 52, 122, 0.15);
}

.light-mode .assistant-message .codeblock-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem .5rem;
  background: #F3F7FF;          /* slightly darker header */
  border-bottom: 1px solid #C3D0EB;
  margin: 0;
}

.light-mode .assistant-message .codeblock-lang {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #4A5060;
  opacity: .8;
}

.light-mode .assistant-message .codeblock pre {
  margin: 0;
  background: transparent;
  padding: 0.75rem 1rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 0;
  color: #1E1F23;               /* readable code text */
}

.light-mode .assistant-message .codeblock code { color: #1E1F23; }






































































































































/* Dark Mode Specific Styles */
.dark-mode {
    background-color: #292929; /* Main dark background */
}

.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode p {
    color: #FCFCFC; /* Light text color for headings */
}

.dark-mode .navbar, .dark-mode .navbar a, .dark-mode .nav-link, .dark-mode .navbar-toggler i.fas {
    color: #FCFCFC; /* Main text color for dark mode */
}

.dark-mode .nav-link:hover, .dark-mode .navbar a:hover {
    color: #25347A; /* Deep blue for hover effect */
    background-color: #292929; /* Darker background for hover effect */
    font-weight: 600; /* Bold text on hover */
    cursor: pointer; /* Pointer cursor for interactive elements */
}

.dark-mode .top-navbar {
    background-color: #202020; /* Dark background for a seamless visual experience */
    color: #FCFCFC; /* Main text color for dark mode */
}

.dark-mode .sidebar {
    background-color: #202020; /* Primary background color for dark mode */
    border-right: 1px solid #F8FAFF; /* Light border for contrast */
    border-bottom: 1px solid #F8FAFF; /* Light border for contrast */
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    padding-bottom: 45px;
}

.dark-mode #navbar3 {
    font-size: 20px;
    border-bottom: 1px solid #F8FAFF; /* Light border for contrast */
    margin-bottom: 60px;
    margin-left: 5%;
    margin-right: 5%;
}

.dark-mode #navbar3 .nav-link:hover {
    color: #F8FAFF; /* Light text color for hover effect */
    font-weight: 600; /* Bold text on hover */
    cursor: pointer; /* Pointer cursor for interactive elements */
}

.dark-mode .verticalNavLines {
    color: #FCFCFC; /* Main text color for dark mode */
    margin-top: 0px;
}

/* Adjusted styles for buttons in dark mode */
.dark-mode .btn, .dark-mode button {
    background-color: #292929; /* Dark background for buttons */
    color: #FCFCFC; /* Main text color for buttons */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* White shadow for a light effect */
    cursor: pointer; /* Pointer cursor for interactive elements */
    transition: all 0.3s; /* Smooth transition for hover effects */
    border: 1px solid #FCFCFC; /* White border for contrast */
    border-radius: 10px; /* Rounded corners for buttons */
    padding: 10px 20px; /* Padding for a comfortable click area */
}

.dark-mode .btn:hover, .dark-mode button:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Slightly larger white shadow on hover for added depth */
}


.dark-mode #btnLogout {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    box-shadow: none;
    height: 40px;
    margin-top: 5px;
    margin-right: 10px;
    padding: 0; /* Removed padding to let flexbox handle alignment */
    width: 60px; /* Optional: Adjust width as necessary */
    background-color: #202020;
    color: #FCFCFC;
    border: none;
}

.dark-mode #btnLogout:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Slightly larger white shadow on hover for added depth */
}

.dark-mode footer {
    background-color: #202020; /* Darker footer background for dark mode */
    color: #FCFCFC; /* Light text for contrast, unchanged as it fits dark mode too */
}

.dark-mode footer a.text-reset {
    color: #FCFCFC; /* Keeping icons consistent, unchanged as it fits dark mode too */
}

.dark-mode footer a.text-reset:hover {
    color: #25347A; /* Hover effect for icons, using deep blue for consistency with dark mode changes */
}

.dark-mode .system-message {
    text-align: left;
    color: #FCFCFC; /* Light text for contrast in dark mode */
    width: 70%;
    margin-top: 10px;
    white-space: pre-wrap !important;
}

.dark-mode .initial-message {
    color: #FCFCFC; /* Light text for contrast in dark mode */
    margin-top: 10px;
}

.dark-mode .chat-input {
    color: #FCFCFC; /* Light text for contrast in dark mode */
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
    margin-left: 15px;
    background-color: #292929; /* Darker background for input in dark mode */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    min-height: 100px;
}

.dark-mode .chat-input2 {
    color: #FCFCFC; /* Light text for contrast in dark mode */
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
    background-color: #292929; /* Darker background for input in dark mode */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    min-height: 100px;
    border: 1px solid #FCFCFC;
}

.dark-mode .chat-input-container{
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    outline: 2px solid #FCFCFC;
    border-radius: 10px;
}

.dark-mode .selectBg {
    background-color: #292929 !important;
    color: #FCFCFC !important;
}

.dark-mode .selectBg2 {
    background-color: #202020 !important;
    color: #FCFCFC !important;
}

.dark-mode .assistant-input {
    min-height: 150px;
    background-color: #292929;
    border-radius: 0 !important;
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode #GAchatButton {
    background-color: #202020; /* Light background for button contrast */
    color: #FCFCFC; /* Deep blue text for visibility and consistency with dark mode theme */
    border-radius: 0 10px 10px 0;
}

.dark-mode .spinner-border.text-primary {
    border-color: #292929 !important; /* Deep blue to fit dark mode aesthetic */
}

.dark-mode .spinner-border.text-primary {
    border-top-color: #FCFCFC !important; /* This will change only the top border color, unchanged as it fits dark mode too */
}

.dark-mode .spinner-border.text-primary.spinner-darker  {
    border-color: #202020 !important; /* Light border color for contrast in dark mode */
}

.dark-mode .spinner-border.text-primary.spinner-darker {
    border-top-color: #FCFCFC!important; /* Deep blue top border color for contrast in dark mode */
}

.dark-mode .projectIdeaSection {
    background-color: #202020; /* Adjusted for dark mode background */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Light shadow for contrast in dark mode */
    color: #FCFCFC; /* Light text color for contrast in dark mode */
}


.dark-mode .columnCards {
    background-color: #202020; /* Dark mode adjustment for background */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Light shadow for contrast in dark mode */
    padding: 15px;
    color: #FCFCFC; /* Light text color for dark mode */
}

.dark-mode .form-edit {
    border: 1px solid #FCFCFC; /* Light border in contrast with dark background */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    height: 200px;
    background-color: #292929; /* Slightly darker background for form fields */
    color: #FCFCFC; /* Light text color for readability */
}

.dark-mode .saveBtn {
    margin-top: 15px;
    width: 100px;
    background-color: #FCFCFC !important; /* Light background for button */
    color: #25347A !important; /* Deep blue text for contrast */
    border: none;
}

.dark-mode .saveBtn2 {
    width: 100px;
    background-color: #FCFCFC !important; /* Light background for consistency */
    color: #25347A !important; /* Deep blue text for visibility */
    border: 1px solid #FCFCFC !important; /* Light border for contrast */
}

.dark-mode .saveBtn3 {
    background-color: #FCFCFC !important; /* Light background for button */
    color: #25347A !important; /* Deep blue text for contrast */
    border: 1px solid #FCFCFC !important; /* Light border for contrast */
}

.dark-mode .saveBtn4 {
    background-color: #FCFCFC !important; /* Light background for button */
    color: #25347A !important; /* Deep blue text for contrast */
    border: 1px solid #FCFCFC !important; /* Light border for contrast */
}

.dark-mode .form-edit-tableContent {
    background-color: #292929 !important; /* Darker background for table content */
    color: #FCFCFC; /* Light text for contrast */
    min-height: 550px !important;
}

.dark-mode .generateBtn {
    background-color: #FCFCFC !important; /* Light background to contrast dark mode */
    color: #25347A !important; /* Deep blue text color for consistency */
    border: none;
}

.dark-mode .form-final-approve {
    background-color: #292929; /* Darker background for form in dark mode */
    color: #FCFCFC; /* Light text for contrast */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    min-height: 750px !important;
}

.dark-mode .btn-inactive {
    background-color: #292929; /* Dark background for inactive button */
    color: #FCFCFC; /* Light text for contrast */
}

.dark-mode .btn-active {
    background-color: #FCFCFC; /* Light background for active button */
    color: #292929;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Slightly larger white shadow on hover for added depth */
}

.dark-mode .btn-active2 {
    background-color: #FCFCFC; /* Light background for active button */
    color: #292929;
    border: 1px solid #FCFCFC; /* Light border for contrast */
}

.dark-mode .step-add-info-input {
    min-height: 200px !important;
    border-radius: 10px;
    border: 2px solid #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 15px;
    color: #FCFCFC;
    background-color: #292929;
}

.dark-mode .step-add-info-input2 {
    min-height: 120px;
    background-color: #292929;
    border-radius: 10px;
    border: 2px solid #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .input-1 {
    background-color: #292929;
    color: #FCFCFC;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border: 1px solid #FCFCFC;
}

.dark-mode .input-2 {
    background-color: #202020;
    color: #FCFCFC;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
    border: 1px solid #FCFCFC;
}

.dark-mode .btnNext {
    min-width: 115px;
    background-color: #202020;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    margin-right: 0px !important;
}

.dark-mode .startButton {
    margin-top: 40px !important;
    margin-top: 20px;
    min-width: 125px;
    background-color: #202020;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.dark-mode .startButton:hover{
    background-color: #FCFCFC;
    color: #25347A;
}

.dark-mode .btnBorder{
    border: 2px outset #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dark-mode .btnBorder2 {
    border: 4px outset #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dark-mode .btnBorder2:hover {
    background-color: #FCFCFC;
    color: #25347A;
}

.dark-mode .finalApproveManualEditTextArea {
    background-color: #292929;
    color: #FCFCFC;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    min-height: 580px;
}

.dark-mode .analyzeBtn {
    background-color: #202020;
    color: #FCFCFC;
    border: none;
    width: 125px;
}

.dark-mode .approveBtn {
    background-color: #FCFCFC;
    color: #25347A;
}

.dark-mode .btn-danger {
    border: 2px solid #f06755 !important;
    background-color: #f06755 !important;
    color: #FCFCFC !important;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.8) !important;
}

.dark-mode .btn-danger2 {
    border: none !important;
    background-color: #f06755 !important;
    color: #FCFCFC !important;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.5) !important;
}

.dark-mode .btn-danger3 {
    border: 1px solid #f06755 !important;
    background-color: #f06755 !important;
    color: #FCFCFC !important;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.5) !important;
}

.dark-mode .btn-danger3:hover {
    background-color: #FCFCFC !important;
    color: #f06755 !important;
    border: 1px solid #f06755 !important;
    box-shadow: 0 0 10px rgba(240, 103, 85, 0.7) !important;
}

.dark-mode .custom-alert {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
  
.dark-mode .custom-alert-content {
    background-color: #292929;
    color: #FCFCFC;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 25%;
    text-align: center;
    font-weight: 600;
}
  
.dark-mode .alert-button {
    width: 80px;
    padding: 8px 16px;
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
  
.dark-mode .alert-button:hover {
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
}

.dark-mode .media-image-col {
    margin-left: 15px;
    margin-bottom: 10px;
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 10px;
}

.dark-mode .marketing-message {
    margin-bottom: 10px;
    margin-left: 15px;
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 15px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: #FCFCFC;
}

.dark-mode .btnLogoProgram {
    background-color: #292929;
    color: #FCFCFC;
    border: none;
}

.dark-mode .uploadSpan {
    color: #FCFCFC;
}

.dark-mode .logo-option-active {
    background-color: #F8FAFF;
    color: #25347A;
    border: none;
}

.dark-mode .media-card-body .btn {
    background-color: #292929; /* Dark background for buttons */
    border: none; /* Remove button borders for a cleaner look */
    margin: 0.5em 0.25em; /* Adjust margin to your preference */
    padding: 10px 20px; /* Adjust padding to your preference */
}

.dark-mode .btn-logo-chosen {
    background-color: #F8FAFF; /* Light background for selected button */
    color: #25347A; /* Deep blue text for contrast */
}

.dark-mode .notes-section {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 25px;
    color: #FCFCFC;
}

.dark-mode .addNoteBtn {
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .note-div {
    border-top: #FCFCFC 1px solid;
    padding-top: 35px;
    padding-bottom: 25px;
}

.dark-mode .optionCol {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 25px;
    color: #FCFCFC;
}

.dark-mode .optionCol:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    background-color: #202020;
    color: #FCFCFC;
    cursor: pointer;
}

.dark-mode .slider-labels {
    color: #FCFCFC; /* Light text color for contrast */
    margin-top: 20px;
    font-size: 14px;
}

.dark-mode input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    background: #FCFCFC; /* Custom color */
    cursor: pointer; /* Cursor on hover */
  }
  
.dark-mode input[type=range]::-moz-range-thumb {
background: #FCFCFC; /* Custom color */
cursor: pointer; /* Cursor on hover */
}

.dark-mode input[type=range]::-ms-thumb {
background: #FCFCFC; /* Custom color */
cursor: pointer; /* Cursor on hover */
}

.dark-mode .itemCreation {
    font-size: 17px;
    font-weight: 600;
    color: #FCFCFC;
    background-color: #202020;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dark-mode .btnShiny {
    background-color: #202020;
    color: #FCFCFC;
    border: none;
}

.dark-mode .btnShiny2 {
    background-color: #202020;
    color: #FCFCFC;
    border: none;
}

.dark-mode .itemCreation:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.dark-mode .selected {
    background-color: #FCFCFC;
    color: #25347A;
}

.dark-mode .media-card{
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    color: #FCFCFC;
}

.dark-mode .btnBlue {
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
}

.dark-mode .standard-card{
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    color: #FCFCFC;
}

.dark-mode .standard-card-header {
    background-color: #25347A;
    color: #FCFCFC;
    font-weight: 600;
}

.dark-mode .standard-card-body {
    color: #FCFCFC;
    background-color: #292929;
}

.dark-mode .standard-textarea2{
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .standard-textarea{
    background-color: #292929;
    color: #FCFCFC;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dark-mode .standard-table {
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .text-color {
    color: #FCFCFC;
}

.dark-mode .a4-look {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .productServiceObjectCard {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .website-is-live-button {
    background-color: #4CAF50;
    color: #FCFCFC;
    border: none;
}

.dark-mode .website-not-live-button {
    background-color: #f44336;
    color: #FCFCFC;
    border: none;
}

.dark-mode .websiteCPInfoDiv {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 4%;
    padding-top: 3%;
    padding-bottom: 3%;
    color: #FCFCFC;
}

.dark-mode .websiteCPInfoDiv2 {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 4%;
    color: #FCFCFC;
}

.dark-mode .emptyDiv {
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .webCPBottomDiv {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    padding: 4%;
    color: #FCFCFC;
}

.dark-mode .blog-bottom-div {
    border-top: 3px solid #25347A;
}

.dark-mode .editable:focus {
    outline: 2px solid #FCFCFC /* Add a white outline on focus */
}

.dark-mode .editable2:focus {
    outline: 3px solid #FCFCFC; /* Add a white outline on focus */
    padding: 5px;
    border-radius: 5px;
    background-color: #202020;
    box-shadow: 0 0 0 0.2rem rgba(37,52,122,.25);
}

.dark-mode .editable3 {
    color: #FCFCFC;
}

.dark-mode .editable3:focus {
    outline: 3px solid #FCFCFC; /* Add a white outline on focus */
    padding: 5px;
    border-radius: 5px;
    background-color: #292929;
    box-shadow: 0 0 0 0.2rem rgba(37,52,122,.25);
}

.dark-mode .options-panel {
    background-color: #202020;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .websiteCards {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    color: #FCFCFC;
}

.dark-mode .notification-none {
    background-color: #292929;
    border: none;
    box-shadow: none !important;
    color: #25347A;
}

.dark-mode .notification-new {
    border: none;
    box-shadow: none;
}

.dark-mode .contactPlus-knowledge-text {
    background-color: #292929;
    border-radius: 5px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #FCFCFC;
}

/*the customer service overlay*/
.dark-mode .cs-overlay {
    background-color: #292929;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px;
    border: 3px solid #25347A;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .site-overlay-background {
    background-color: rgba(41, 41, 41, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.dark-mode .noShadow {
    box-shadow: none !important;
    border: none !important;
    background-color: #292929 !important;
}

.dark-mode .chats-header {
    border-bottom: 2px solid #25347A;
}

.dark-mode .chat-inbox {
    background-color: #292929;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .assistant-message-div {
    background-color: #292929;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 15px;
    color: #FCFCFC;
}

.dark-mode .user-message {
    color: #FCFCFC;
    background-color: #292929;
    border-radius: 10px;
    border: 1px solid #FCFCFC;
    padding: 10px 15px;
    max-width: 55%;
    white-space: pre-wrap !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dark-mode .chat-item {
    border-bottom: 1px solid #25347A;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
    color: #FCFCFC;
}

.dark-mode .text-area-div {
    border-top: 2px solid #25347A;
}

.dark-mode .chat-text-area {
    background-color: #292929;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 10px;
    color: #FCFCFC;
    min-height: 100px;
}


.dark-mode .editTextP {
    background-color: #292929;
    padding: 10px;
    color: #FCFCFC;
    border-radius: 10px;
    border: 1px solid #25347A;
    min-height: 100px;
}

.dark-mode .finances-nav-buttons {
    background-color: #292929;
    border: 1px solid #FCFCFC;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.dark-mode .finances-nav-buttons:hover {
    background-color: #FCFCFC;
    color: #25347A;;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.dark-mode .day-closed input[type="checkbox"] {
    accent-color: #FCFCFC; /* Change the checkbox color */
    background-color: #f06755; /* Change the checkbox background color */
}

.dark-mode .detailsDiv {
    background-color: #292929;
    border-radius: 10px;
    border: 2px solid #25347A;
    padding: 20px;
    color: #FCFCFC;
    min-height: 150px;
}
.dark-mode .calendarDayBadge {
    background-color: #f06755 !important;
    color: #FCFCFC !important;
}
.dark-mode .calendar-today {
    background-color: #25347A !important;
    color: #FCFCFC !important;
}
.dark-mode .btn-no-border {
    border: none !important;
    box-shadow: none !important;
    background-color: #292929 !important;
    color: #FCFCFC !important;
}
.dark-mode .emptyOrPastCell {
    background-color: #202020 !important;
    color: #FCFCFC !important;
}

.dark-mode .light-shadow {
    background-color: #292929;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Shadow based on the border color */
}

.dark-mode .fa-file-invoice-dollar {
    color: #FCFCFC; /* Light color for the icon */
}

.dark-mode .fa-comment-dots {
    color: #FCFCFC; /* Light color for the icon */
}

.dark-mode .simpleTableBody {
    background-color: #292929 !important;
    color: #FCFCFC !important;
}

.dark-mode .btnBlueOrder {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #FCFCFC;
    box-shadow: none;
}

.dark-mode .notification-item {
    border-bottom: 1px solid #FCFCFC;
}

.dark-mode .info-stuff {
    color: #FCFCFC;
}

.dark-mode .checkboxDiv {
    background-color: #292929;
    border-radius: 10px;
    border: 1px solid #25347A;
    padding: 40px 15px !important;
    color: #FCFCFC;
}

.dark-mode .website-input {
    background-color: #292929;
    border: 1px solid #25347A;
    border-radius: 10px;
    padding: 10px;
    color: #FCFCFC;
    min-height: 150px;
}

.dark-mode .codeIcon {
    color: #FCFCFC;
}

.dark-mode .chatMenuButtons {
    background-color: #292929;
    border: none;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.dark-mode .chatMenuButtons:hover {
    background-color: #FCFCFC;
    color: #292929;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.dark-mode .chatSelectionColorText {
    color: #FCFCFC; /* Light color for chat selection text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dark-mode .historyDiv {
    background-color: #292929;
    border: 1px solid #FCFCFC;
    border-radius: 5px;
    color: #FCFCFC;
}

.dark-mode .historyCustomList {
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .historyItem {
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .navButtons {
    background-color: #202020 !important;
}

.dark-mode .media-alt-input {
    background-color: #292929;
    border: 1px solid #25347A;
    border-radius: 8px;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dark-mode .saveChatMessageBtn:hover {
    background-color: #FCFCFC;
    color: #292929;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.dark-mode .preview-window {
    background-color: #202020;
    outline: 4px solid #FCFCFC;
    border-radius: 5px;
}

.dark-mode .ve-clip.selected {
  --ve-visual-text: #AFC0FF; /* lighter for dark bg */
  --ve-audio-text:  #9FD6BF;
}

.dark-mode .ve-timeline {
    position: relative;
    border: 1px solid #FCFCFC;      /* Light border for dark mode */
    border-radius: 12px;
    background: #202020;            /* Dark background for dark mode */
    padding: 16px 16px 16px 0;      /* remove left gap (see #7) */
    overflow-x: auto;
}

.dark-mode .ve-track {
    position: relative;
    height: 64px;
    background: #202020;            /* Dark background for dark mode */
    border-radius: 0;               /* square corners per request */
    overflow: visible;
}

.dark-mode .ve-clip {
    position: absolute;
    height: 100%;
    background: #292929;            /* Darker background for dark mode */
    border: 1px solid #FCFCFC;      /* Light border for dark mode */
    border-radius: 0;               /* square corners per request */
    cursor: grab;
    display: flex;
    align-items: center;
    padding: 0 12px;                /* a bit more room for handles */
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    color: #FCFCFC;                 /* Light text for contrast in dark mode */
}

/* Keep track-differentiation subtle via a tint on text only (optional)
.ve-clip.visual { }
.ve-clip.audio  { } */

.dark-mode .ve-clip.selected {
    background: #FCFCFC;            /* Light background for selected clip in dark mode */
    color: #292929;                 /* Dark text for readability on light bg */
    border-color: #FCFCFC;          /* Light border for selected clip in dark mode */
    outline: none;                  /* remove thick side outline */
}

.dark-mode .selectElements {
    background-color: #292929;
    border: 1px solid #FCFCFC;
    border-radius: 8px;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.dark-mode .btnDocumentUpload {
    background-color: #292929;
    color: #FCFCFC;
    border: 1px solid #FCFCFC;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.dark-mode .btnDocumentUpload:hover {
    background-color: #FCFCFC;
    color: #292929;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.dark-mode #approve-screen {
    white-space: pre-wrap;
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .btnBlue2 {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #25347A;
}

.dark-mode .selectElements {
    background-color: #292929;
    border: 1px solid #FCFCFC;
    border-radius: 8px;
    color: #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.dark-mode .btnDocumentUpload {
    background-color: #292929;
    color: #FCFCFC;
    border: 1px solid #FCFCFC;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.dark-mode .btnDocumentUpload:hover {
    background-color: #FCFCFC;
    color: #292929;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.dark-mode #approve-screen {
    white-space: pre-wrap;
    background-color: #292929;
    color: #FCFCFC;
}

.dark-mode .plan-card {
    background-color: #292929 !important; /* Dark background */
    border: none; /* Removes the default border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.dark-mode .plan-card .list-group-item {
    border-bottom: none; /* Removes the default border */
    background-color: #292929; /* Dark background */
}

.dark-mode .plan-card .card-title {
    border-bottom: 2px solid #25347A; /* Example: Blue border */
    color: #25347A;
    margin-bottom: 15px;
    background-color: #292929;
}

.dark-mode .selected-plan {
    border: 2px solid #25347A; /* Example: Blue border */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Updated: Shadow based on the same color as the border */
}

.dark-mode .document-div {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    color: #FCFCFC;
    padding: 2.5rem;
    padding-bottom: 4rem;
}

.dark-mode .editor-toolbar {
  align-items: flex-end !important;
    position: sticky;
    top: 0;
    z-index: 1040;            /* above content */
    background: #202020;       /* solid bg so it doesn't show through */
}
.dark-mode .editor-toolbar .editor-btn {
  padding: .25rem .45rem !important;
  line-height: 1.1 !important;
  border-radius: 6px !important;
  border: 1px solid #dee2e6 !important;   /* light gray border */
  background-color: #ffffff !important;    /* white bg */
  color: #212529 !important;               /* near-black text */
  box-shadow: none !important;
  cursor: pointer;
}

.dark-mode .editor-toolbar .editor-btn:hover {
  background-color: #f8f9fa !important;   /* subtle gray */
  border: 1px solid #25347A !important;   /* light gray border */
}

.dark-mode .editor-toolbar .editor-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important; /* soft blue ring */
}

.dark-mode .assistant-message .codeblock {
  border: 1px solid #32363F;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #1C1D21;          /* neutral light bg */
  margin: .5rem 0;
  box-shadow: 0 0 10px rgba(37, 52, 122, 0.15);
}

.dark-mode .assistant-message .codeblock-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem .5rem;
  background: #23252B;          /* slightly darker header */
  border-bottom: 1px solid #3A3F48;
  margin: 0;
}

.dark-mode .assistant-message .codeblock-lang {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #AAB0BC;
  opacity: .8;
}

.dark-mode .assistant-message .codeblock pre {
  margin: 0;
  background: transparent;
  padding: 0.75rem 1rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 0;
  color: #1E1F23;               /* readable code text */
}

.dark-mode .assistant-message .codeblock code { color: #FCFCFC; }