:root {
    /* Color variables */
    --primary-color: #02749a;
    --background-color: #ffffff;
    --text-color: #333;
    --secondary-bg: #f0f0f0;
    --button-bg: #979797;
    --footer-bg: #dddddd;
    
    /* Accessibility variables */
    --focus-outline: 2px solid #019ED2;

    /* Spacing variables */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-s: 0.5rem; /* 8px */
    --spacing-m: 1rem; /* 16px */
    --spacing-l: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */

    /* Font variables */
    --font-family-primary: 'Lato', sans-serif;
    --font-weight-normal: 300;
    --line-height: 1.6;

    /* Switch variables */
    --switch-width: 60px;
    --switch-height: 34px;
}

.header {
    position: relative;
    left: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%; /* Match navbar's max width restriction */
    padding: var(--spacing-m) 0; /* Adjust vertical spacing as needed */
}

#styles-toggle {
    position: absolute;
    top: var(--spacing-s);
    right: var(--spacing-s);
}

.switch {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
}


.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.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: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

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

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%;
}





/* CSS Variables */
:root {
    /* Color variables */
    --primary-color: #3BA7A4;
    --secondary-color: #019ED2;
    --background-color: #F2F2F2;
    --text-color: #333;
    --text-color-light: #666;
    --accent-color-1: rgba(111, 26, 209, 0.36);
    --accent-color-2: rgba(120, 66, 179, 0);
    --background-color-light: #dfe8e7;
    --button-primary-bg: #4CAF50;
    --button-danger-bg: #FF0000;
    --button-hover-bg: #d0d0d0;
    --button-hover-text: #000;
    --success-bg: #d4edda;
    --error-bg: #f8d7da;
    --info-bg: #cce5ff;
    --warning-bg: #fff3cd;
    --chat-user-bg: #e0f7fa;
    --chat-assistant-bg: #f9f9f9;

    /* Spacing variables */
    --spacing-s: 0.5rem; /* 8px */
    --spacing-m: 1rem; /* 16px */
    --spacing-l: 2rem; /* 32px */

    /* Font variables */
    --font-family-primary: Lato, sans-serif;
    --font-weight-normal: 300;
    --font-weight-bold: 400;
    --line-height: 1.6;

    /* Background variables */
    --background-gradient-1: radial-gradient(circle at 94.35% 89.62%, var(--accent-color-1) 0%, var(--accent-color-1) 20%, rgba(111, 26, 209, 0) 40%);
    --background-gradient-2: radial-gradient(circle at 6.50% 88.04%, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.99) 25%, rgba(255, 255, 255, 0) 50%);
    --background-gradient-3: radial-gradient(circle at 6.25% 11.23%, var(--secondary-color) 0%, var(--secondary-color) 42%, rgba(1, 158, 210, 0) 70%);
    --background-gradient-4: radial-gradient(circle at 93.69% 11.43%, var(--accent-color-2) 0%, var(--accent-color-2) 42%, rgba(120, 66, 179, 0) 70%);
    --background-gradient-5: radial-gradient(circle at 48.90% 49.52%, var(--background-color) 0%, rgba(242, 242, 242, 0) 100%);
}


body {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    color: var(--text-color);
    margin: 0;
    padding: var(--spacing-l);
    background:
      var(--background-gradient-1),
      var(--background-gradient-2),
      var(--background-gradient-3),
      var(--background-gradient-4),
      var(--background-gradient-5);
    background-size: cover;
    background-repeat: no-repeat;
}

/* navbar styling */
nav {
    position: sticky;
    top: 0;
    background-color: var(--background-color); /* Using CSS variable */
    padding: 5px 0; /* Reduced padding to make room for settings and AI buttons */
    border-bottom: 2px solid #ccc; /* Add a bottom border */
    border-radius: 10px; /* Adjust the value to control the roundness */
    margin: 0 5%; /* Add 5% margin on left and right sides */
    display: flex;
    justify-content: center; /* Center the navbar content */
}

/* Media queries for improved mobile navigation */
@media (max-width: 992px) {
    /* Improve mobile navigation experience */
    .navbar-toggler {
        border: none; /* Remove default border */
    }

    .navbar-toggler img {
        width: 30px; /* Adjust hamburger icon size */
        height: auto;
    }

    .navbar-nav {
        margin-right: 0; /* Remove right margin on mobile */
    }

    .nav-link {
        padding: 0.5rem 1rem; /* Adjust padding for mobile */
    }
}

@media (max-width: 768px) {
    /* Tablet and small screens */
    nav {
        border-radius: 0; /* Remove rounded corners on tablets */
        padding: 8px 0; /* Adjust padding */
    }

    .navbar-toggler img {
        width: 28px; /* Slightly smaller on tablets */
    }
}

@media (max-width: 480px) {
    /* Mobile devices */
    nav {
        padding: 6px 0; /* Adjust padding for mobile */
    }

    .navbar-toggler img {
        width: 25px; /* Adjust hamburger icon size for mobile */
    }

    .nav-link {
        padding: 0.4rem 0.8rem; /* Adjust padding for mobile */
        font-size: 0.9rem; /* Slightly smaller text */
    }
}

/* Center the navbar items on desktop */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        justify-content: center !important;
    }
    
    .navbar-nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    margin: 0 var(--spacing-s);
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: 4px;
}

nav a:hover {
    background-color: var(--background-color-light); /* Using CSS variable */
    text-decoration: underline;
}

h1, h2, h3 {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-s);
    color: var(--text-color);
}

p {
    margin-bottom: var(--spacing-s);
    color: var(--text-color-light);
}

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

a:hover {
    text-decoration: underline;
}

/* Form styles */
form {
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 1em;
}

button {
    background-color: #3BA7A4;
    color: white;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #d0d0d0;
    color: black;
}

/* Flash Message Styling */

ul.flashes {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin-bottom: 1em;
}

ul.flashes li {
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    border-radius: 5px;
}

ul.flashes li.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

ul.flashes li.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

ul.flashes li.info {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}

ul.flashes li.warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

#ai-interaction {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

.chat-message {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.chat-message .emoji {
    margin-right: 5px;
}

.chat-message.user {
    justify-content: flex-end; /* Align user messages to the right */
}

.chat-message.user .emoji {
    margin-left: 5px;
    margin-right: 0;
}

.chat-message .content {
    flex: 1;
    word-break: break-word; /* Allow long words to wrap */
    white-space: pre-wrap; /* Preserve whitespace */
    padding: 10px; /* Add padding inside the border */
    border-radius: 5px; /* Add rounded corners */
    background-color: #f0f0f0; /* Light gray background */
}

/* Task Select Styles */
.taskSelect {
    transition: background-color 0.2s ease;
    padding: var(--spacing-m);
    margin-bottom: var(--spacing-s);
}
.taskSelect:hover, .taskSelect:focus {
    background-color: #f8f9fa;
    outline: var(--focus-outline);
}

/* Improved task list styling */
.task-list-container {
    padding: var(--spacing-m);
    width: 100%; /* Make the container responsive */
    max-width: 800px; /* Reasonable maximum width */
}

/* Responsive layout styles */
.workflow-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 120px); /* Adjust based on header/footer */
}

.task-list-column {
    flex: 1 0 calc(65% - 2rem); /* Start with nearly full width, accounting for gutters */
    max-width: 800px; /* Reasonable maximum for mobile */
    transition: flex 0.5s ease;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.task-details-column {
    flex: 1; /* Take remaining space */
    min-width: 0; /* Prevent shrinking too much */
}

/* When task details are visible */
.task-details-visible .task-list-column {
    flex: 1 0 calc(35% - 2rem); /* Reduce sidebar width to show task details */
}

.workflow-container {
    margin-left: 0; /* Remove any default margin */
    margin-right: 0;
}

.task-details-column {
    flex: 1; /* Take remaining space */
    min-width: 0; /* Prevent shrinking too much */
}

/* When task details are visible */
.task-details-visible .task-list-column {
    flex: 1 0 65%; /* Reduce sidebar width to show task details */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .workflow-container {
        flex-direction: column;
    }
    
    .task-list-column, .task-details-column {
        flex: 1 1 100%; /* Full width on mobile */
    }
}

.task-list-container {
    min-height: calc(100vh - 240px); /* Adjust based on your header/footer height */
    overflow-y: auto; /* Allow vertical scrolling if content exceedsheight */
}

/* Modal improvements */
.modal-body {
    padding: var(--spacing-l) var(--spacing-m);
}

.modal-footer {
    padding: var(--spacing-s) var(--spacing-m);
    border-top: 1px solid #dee2e6;
}

/* Custom Modal Styles */
.custom-modal {
  --modal-bg-color: var(--background-color);
  --modal-text-color: var(--text-color);
  --modal-border-color: #ccc;
  --modal-header-bg: var(--background-color-light);
  --modal-footer-bg: var(--background-color-light);
  --modal-button-primary-bg: var(--button-primary-bg);
  --modal-button-secondary-bg: #f0f0f0;
  --modal-button-hover-bg: var(--button-hover-bg);
}

.custom-modal .modal-content {
  background-color: var(--modal-bg-color);
  color: var(--modal-text-color);
  border: 1px solid var(--modal-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-modal .modal-header {
  background-color: var(--modal-header-bg);
  border-bottom: 1px solid var(--modal-border-color);
  padding: var(--spacing-l) var(--spacing-m);
  border-radius: 8px 8px 0 0;
}

.custom-modal .modal-body {
  padding: var(--spacing-l) var(--spacing-m);
}

.custom-modal .modal-footer {
  background-color: var(--modal-footer-bg);
  border-top: 1px solid var(--modal-border-color);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: 0 0 8px 8px;
}

.custom-modal .btn {
  border-radius: 4px;
  padding: 0.5em 1em;
  font-weight: var(--font-weight-normal);
}

.custom-modal .btn-primary {
  background-color: var(--modal-button-primary-bg);
  border-color: var(--modal-button-primary-bg);
}

.custom-modal .btn-primary:hover {
  background-color: var(--modal-button-hover-bg);
  border-color: var(--modal-button-hover-bg);
}

.custom-modal .btn-secondary {
  background-color: var(--modal-button-secondary-bg);
  border-color: var(--modal-border-color);
}

.custom-modal .btn-secondary:hover {
  background-color: var(--modal-button-hover-bg);
  border-color: var(--modal-border-color);
}

.custom-modal .form-control,
.custom-modal .form-select {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 1em;
}

.custom-modal .form-label {
  color: var(--text-color);
  font-weight: var(--font-weight-bold);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .taskSelect {
        padding: var(--spacing-s);
    }
    
    .modal-body {
        padding: var(--spacing-m);
    }
    
    .modal-footer {
        padding: var(--spacing-s);
    }
}

.chat-message.user .content {
    background-color: #e0f7fa; /* Light blue background for user messages */
    text-align: left;
}

.chat-message.assistant .content{
    background-color: #f9f9f9;
    text-align: left;
}

.chat-image {
    max-width: 100%; /* Prevent images from overflowing */
    max-height: 300px; /*Optional maximum height*/
    display: block; /* Prevents extra space below images */
    margin: 10px 0;
}

#queryForm {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

.ai-options > div[id^="output"] { /* Selects divs with IDs starting with "output" inside .ai-options */
    width: 100%; /* Make it full width */
    box-sizing: border-box; /* Include padding and border in width */
}


#queryForm label {
    margin-bottom: 5px;
}

#queryForm textarea,
#queryForm select,
#queryForm input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px; /*subtle rounding*/
    margin-bottom: 10px;
    font-family: inherit; /* Inherit font from body */
    font-size: inherit;
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

#askButton, #askButtonTeam, #askButtonReasoning, #askButtonAssistants{
    padding: 10px 20px;
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#clearButton, #clearButtonTeam, #clearButtonReasoning, #clearButtonAssistants{
    padding: 10px 20px;
    background-color: #FF0000; /* Red */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


#spinner {
    margin-left: 10px; /* space from button */
}

/* Report area styling */
.report-area {
    margin-top: 1em;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.report-area h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.report-area p {
    margin-bottom: 0.75em;
}

.report-area ul,
.report-area ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

.report-area li {
    margin-bottom: 0.5em;
}

.report-area pre {
    background-color: #eee;
    padding: 0.5em;
    border-radius: 4px;
    overflow-x: auto;
}

.report-area code {
    font-family: monospace;
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 1em;
    background-color: #f0f0f0;
    margin-top: 2em;
    border-top: 1px solid #ccc;
    border-radius: 10px; /* Match navbar's border-radius */
}

.footer-flex-container {
    display: flex;
    flex-direction: column; /* Stack paragraphs vertically */
    align-items: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow paragraphs to wrap on smaller screens */
}

footer p {
    margin: 0.5em; /* Add some spacing around paragraphs */
    display: block; /* Force each paragraph to be on a new line */
}

/* Spinner Styles (replace with your preferred style) */
        #spinner { display: none; }
        #spinner.active { display: inline-block; margin-left: 10px; }
        /* Ensure textarea doesn't overflow its container */
.auto-resize {
    width: 100%; /* Or a fixed width if preferred */
    min-height: 50px; /* Minimum height */
    max-height: 200px; /* Optional maximum height */
    overflow-y: auto;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    resize: vertical; /* Allow only vertical resizing */
}
.auto-resize:focus { /*Style for focus, may help visibility*/
    outline: 2px solid rgb(85, 102, 153);
}

        /* Socket Status Icon Styles */
        #socket-status {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-left: 10px;
        }

        #socket-status.connected {
            background-color: green;
        }

        #socket-status.disconnected {
            background-color: red;
        }

/* Sidebar */

.side_bar {
  height: 100vh; /* Full viewport height */
  width: 320px; /* Default width for desktop */
  max-width: 90%; /* Max width on small screens */
  position: fixed; /* Stay in place */
  z-index: 100; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: var(--background-color); /* Use CSS variable */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: var(--spacing-l); /* Use CSS variable for spacing */
  padding-left: var(--spacing-m);
  transition: width 0.3s ease, transform 0.3s ease;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Add shadow for depth */
  transform: translateX(100%); /* Start hidden off-screen */
}

/* Ensure welcome message appears at the very top despite sidebar padding */
#welcome {
  position: absolute;
  top: var(--spacing-s); /* Small spacing from top */
  left: var(--spacing-m);
  width: calc(100% - var(--spacing-m) * 2);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  /* Tablet and small screens */
  .side_bar {
    width: 280px; /* Slightly narrower on tablets */
  }
}

@media (max-width: 480px) {
  /* Mobile devices */
  .side_bar {
    width: 100%; /* Full width on small screens */
    transform: translateX(100%); /* Keep hidden when closed 
  }
}

.side_bar.resizing {
  transition: none; /* Disable transition during resizing */
}

/* When you mouse over the navigation links, change their color */
.side_bar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.side_bar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Chat container styles */
#chat-container {
  height: 50vh;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  padding: 1rem;
}

/* Media queries for chat container responsiveness */
@media (max-width: 768px) {
  /* Tablet and small screens */
  #chat-container {
    height: 40vh; /* Slightly shorter on tablets */
  }
}

@media (max-width: 480px) {
  /* Mobile devices */
  #chat-container {
    height: 30vh; /* Shorter on mobile devices */
  }
}
}

/* Full screen button */
.side_bar.fullscreen {
  width: 100% !important; /* Override inline styles */
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000; /* Ensure it's on top of everything */
}

.Speak {
position: absolute;
  top: 10px;
  left: 50px;
  padding: 5px 10px;
  cursor: pointer;
}

.fullscreen-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

#resize-handle {
     position: sticky;
     top: 0;
     left: 0px; /* Or right: 0; depending on which side you want to resize */
     width: 5px;
     height: 100%;
     background-color: #888; /* Or any color you prefer */
     cursor: ew-resize; /* Change cursor to indicate resizability */
     z-index: 2; /* Ensure it's above the sidebar content */
     border-radius: 20px; /* Adjust the value to control the roundness */
 }

.resizing {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#AI_Button {
  position: sticky;
  top: 0px; /* Distance from the top */
  right: 127px; /* Distance from the right */
  transform: none; /* Remove the vertical centering */
  background: none;
  float:right;
/*  background-color: #3BA7A4; */
  border: none;
  border-radius: 50%;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  box-shadow: 0px 0px 40px 20px gold;
  cursor: default; /* change from "grab" */
  z-index: 999;
}

.eddy-logo {
    width: 60px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    vertical-align: middle; /* Align the image vertically within the button */
}

#AI_Button:active {
  cursor: grabbing; /* Change cursor when dragging */
}

/* Settings */

.settings {
  position: fixed;
  top: 0; /* Position at the absolute top of the screen */
  left: 0; /* Position at the absolute left edge */
  z-index: 1000; /* Ensure it's on top of other content */
}

.settings-btn {
  background-color: #3BA7A4;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.settings-btn .fas.fa-cog {
  font-size: 30px; /* Adjust as needed */
}

.settings-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top: 40px; /* Position right below the settings button */
  left: 0;
}

.settings-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.settings-content a:hover {background-color: #ddd;}

.settings:hover .settings-content {
  display: block;
}

/* Quick prompts styling */
#quick-prompts {
    position: absolute !important;
    bottom: 80px !important; /* Position higher up, above the buttons */
    right: 20px !important;
    width: auto !important;
    padding: 15px !important;
    background-color: #f8f9fa !important;
    text-align: center !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    margin-top: 0 !important;
    max-width: 90% !important; /* Allow it to take up more space on larger screens */
    contain: layout style size !important;
    transform: translateZ(0) !important;
}

/* Make sure the quick prompts container doesn't expand to full width */
#quick-prompts > * {
    max-width: 100% !important;
    width: auto !important;
    /* Ensure no overflow */
    overflow: hidden !important;
}

/* Ensure the prompt-edit-button is properly sized */
.prompt-edit-button {
    background-color: #3BA7A4 !important;
    border: none !important;
    color: white !important;
    padding: 8px 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 14px !important;
    margin: 6px 4px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    z-index: 1001 !important;
    min-width: 80px !important; /* Prevent buttons from becoming too narrow */
    flex-shrink: 1 !important;
    position: relative !important;
}

.prompt-edit-button img {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
}

#promptEditButtonContainer {
    margin-bottom: 10px !important;
    /* Ensure the container is not taking up too much space */
    width: auto !important;
    max-width: 100% !important;
    /* Prevent overflow */
    overflow: hidden !important;
    /* Make sure it stays within the sidebar area */
    position: relative !important;
}

/* The quick prompts popup form - hidden by default */
.add-prompt-form {
  display: none;
  position: fixed;
  bottom: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a blue background colour to the cancel button */
.form-container .cancel {
  background-color: blue;
}

/* Add a yellow background colour to the edit button */
.form-container .edit {
  background-color: #b3b300;
}

/* Add a red background colour to the delete button */
.form-container .delete {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}


/* Login page */
.login-flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login-form {
    border-radius: 25px;
    border: 2px solid black;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-right: 5em;
    padding-left: 4em; 
}

#username {
    width: 20vw;
}

#drop_zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

#drop_zone.highlight {
  background-color: #f0f0f0;
}

.drag-over {
  border: 2px dashed #007bff; /* Highlight the drop area */
}

.list-group-item.dragging {
    background-color: rgba(0, 255, 255);
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}


#folderStructure {
 background: none;
 overflow: scroll;
 padding: 10px;
}

/* Differentiate Folders from Resources */
.folder-item {
    background: linear-gradient(to right, rgba(169,169,169,0.9), rgba(255,255,255,0.01)) border-box;   /* #f0f8ff; AliceBlue, a soft folder color */
    border: 3px solid transparent #ddd;
    border-color: blue;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 2px;

}

.resource-item {
    background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.01)) border-box;   /* #f0f8ff; AliceBlue, a soft folder color */
    border: 3px solid transparent #ddd;
    border-color: blue;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 2px;
}

.list-group-item {
    display: table;
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-bottom: 0rem;
    border: none;
}

/* Responsive table styles */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 1rem;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
}

.table-wrapper {
    min-width: 100%; /* Prevent table from collapsing */
}

@media (max-width: 768px) {
    .table-container {
        -ms-overflow-style: -moz-scrollbars-none;
        scrollbar-width: none; /* Firefox */
    }

    .table-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Webkit browsers */
    }
}
}

#addTaskModal {
    width:900px;
    padding:0px;
}

#addTask {
    width:100%;
    padding:0px;
}

/* Styling for the overview on the home page */
.due-date-urgent {
    background-color: #ffcccc; /* Light red */
}

.due-date-soon {
    background-color: #ffebcc; /* Light orange */
}

.due-date-ok {
    background-color: #ccffcc; /* Light green */
}

/* Styling for toggle switch on chat.html */

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

/* Hide default HTML 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: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

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

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%;
}

#selected_voice {
  padding-left: 100px;
}

/* Quick Prompts Flexbox Styles */
.quick-prompts-container {
    margin: 10px 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #e9ecef;
}

.quick-prompts-header {
    font-weight: bold;
    margin-bottom: 8px;
    color: #495057;
}

.quick-prompts-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.quick-prompt-button {
    background-color: #3BA7A4 !important;
    border: none !important;
    color: white !important;
    padding: 8px 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 12px !important;
    margin: 2px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    min-width: 80px; /* Prevents buttons from becoming too narrow */
    flex-shrink: 1 !important;
}

/* Ensure the container grows with content */
.quick-prompts-container {
    min-height: 50px; /* Prevents container from collapsing when empty */
}

/* Responsive behavior */
@media (max-width: 768px) {
    .quick-prompt-button {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-width: 70px;
    }
}

/* Sidebar styling */
.sidebar-content {
    padding: 10px;
    position: absolute;
    top: 80px;
}

.prompt-form {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.prompt-input {
    width: 100%;
    margin-bottom: 10px;
}

.prompt-textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}

.manage-prompts-button {
    margin-top: 10px;
}

/* Button styling */
button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--button-bg);
    color: white;
}

button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* AI button styling */
.ai-button {
    font-size: 30px;
    cursor: pointer;
}