/* Width constraint for meeting form elements */
.meeting-form-width {
    max-width: 1200px;
    margin: 0 auto;
}

/* Avatar circle for user management */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

/* Team sub-tabs styling */
.team-sub-tabs {
    background-color: #f8f9fa;
    border-radius: 0.25rem 0.25rem 0 0;
}

.team-sub-tab-link {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    color: #6c757d;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.team-sub-tab-link:hover {
    color: #495057;
    background-color: rgba(0, 0, 0, 0.05);
}

.team-sub-tab-link.active {
    color: #007bff;
    border-bottom-color: #007bff;
    background-color: white;
}

.team-sub-tab-content {
    display: none;
}

.team-sub-tab-content.active {
    display: block;
}

/* Team hierarchy styling */
.team-hierarchy-item {
    transition: all 0.2s ease;
}

.team-hierarchy-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Settings page styling aligned with app design system */
.settings-content-card {
    background-color: #fcfcfc;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    max-width: 1200px;
    margin: 0 auto;
}

.settings-content-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.settings-section-header {
    color: #797D81;
    font-size: 16px;
    font-weight: 600;
    max-width: 1000px;
    overflow-wrap: break-word;
}

.settings-user-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    transition: all 0.2s ease;
    max-width: 1200px;
    margin: 0 auto;
}

.settings-user-card:hover {
    background-color: #f8f9fa;
    border-color: var(--primary-color);
}

.settings-team-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.settings-team-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.settings-available-user {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.settings-available-user:hover {
    background-color: #f8f9fa;
    border-color: var(--primary-color);
}

/* Enhanced modal styling for settings */
.settings-modal .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.settings-modal .modal-header {
    background-color: #fcfcfc;
    border-bottom: 1px solid #cccccc;
    border-radius: 8px 8px 0 0;
}

.settings-modal .modal-title {
    color: #797D81;
    font-weight: 600;
}

/* Table styling for user management */
.settings-user-table {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.settings-user-table .table {
    margin-bottom: 0;
}

.settings-user-table .table thead th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #cccccc;
    color: #797D81;
    font-weight: 600;
    padding: 16px;
}

.settings-user-table .table tbody td {
    padding: 16px;
    border-bottom: 1px solid #eeeeee;
    vertical-align: middle;
}

.settings-user-table .table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Avatar styling with consistent app colors */
.avatar-circle {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, #000));
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Badge styling aligned with app design */
.settings-badge-admin {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.settings-badge-user {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.settings-badge-team-admin {
    background-color: #ffc107 !important;
    color: #000000 !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.settings-badge-team-user {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Search box styling */
.settings-search-box {
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.settings-search-box:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Form switch styling */
.settings-form-switch .form-check-input {
    width: 48px;
    height: 24px;
    border-radius: 12px;
    background-color: #cccccc;
    border: none;
    transition: all 0.2s ease;
}

.settings-form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.settings-form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Team details modal content */
.settings-team-info-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.settings-current-member {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.settings-current-member:hover {
    background-color: #f8f9fa;
    border-color: #dc3545;
}

/* Sub-tabs enhanced styling */
.team-sub-tabs {
    background: linear-gradient(135deg, #f8f9fa, #eeeeee);
    border-radius: 8px 8px 0 0;
    border: 1px solid #cccccc;
    border-bottom: none;
}

.team-sub-tab-link {
    border-radius: 8px 8px 0 0;
    font-weight: 500;
    font-size: 14px;
}

.team-sub-tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: #ffffff;
    font-weight: 600;
}

/* Section headers consistent with app */
.settings-page-header {
    background-color: #fcfcfc;
    border-bottom: 1px solid #cccccc;
    border-radius: 8px 8px 0 0;
    padding: 20px 24px;
}

.settings-page-title {
    color: #797D81;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-page-subtitle {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 0;
}

/* Chat input styling */
.chat-input {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
}

.chat-input:focus {
    outline: none;
    border: 1px solid #ced4da;
}

.chat-input:empty:before {
    content: attr(data-placeholder);
    color: #6c757d;
    pointer-events: none;
}

/* Chat message formatting using markdown */
.chat-message-content {
    line-height: 1.5;
}

.chat-heading {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 2px;
}

.chat-list {
    padding-left: 1.2rem;
}

.chat-list-item {
    margin: 4px 0;
    color: #495057;
}

.chat-paragraph {
    color: #212529;
}

.chat-strong {
    font-weight: 600;
}

/* Selectable Item Styles - Reusable for cards, lists, etc. */
.selectable-item:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease;
}

.selectable-item.selected {
    border-color: var(--primary-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 10%, white) !important;
}

/* Specific implementations */
.project-item, .discussion-item, .dimension-item {
    transition: all 0.2s ease;
}

.project-item:hover, .discussion-item:hover, .dimension-item:hover {
    background-color: #f8f9fa !important;
}

.project-item.selected, .discussion-item.selected, .template-item.selected, .dimension-item.selected {
    border-color: var(--primary-color) !important;
    background-color: color-mix(in srgb, var(--primary-color) 10%, white) !important;
}

/* Makes the container full-height */
body, html {
    height: 100%;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #141204;
}

.container-fluid {
    height: 100%;
}

/* This will ensure that the row and columns inside take the full height of the container */
.row-100 {
    height: 100%;
}

.sidebar {
    background-color: #eeeeee;
    border-right: 1px solid #cccccc;
    height: 100%;
    position: fixed; /* This will keep it fixed in place */
    width: 16.66%; /* Approximately for col-2 in a 12 column layout, you can adjust as per your requirements */
    top: 0; /* Aligns the section to the top of the viewport */
    left: 0; /* Aligns the section to the left of the viewport */
}

.background-grey {
    background-color: #eeeeee;
    border: 1px solid #cccccc;
}

.background-grey-no-border {
    background-color: #797d81;
}

.border-grey {
    border: 1px solid #cccccc;
}

.background-light-grey-no-border {
    background-color: #eeeeee;
}

.background-navy {
    background-color: #231651;
}

.background-dark {
    background-color: #474747;
}

.sidebar__logo {
    max-width: 160px;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.nav-item,
.sidebar__item {
    padding: 5px 10px;  /* Same padding as the active item */
    border-radius: 5px;  /* Same rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px; /* Adjust font size as needed */
}

.nav-item:not(.active):hover,
.sidebar__item:not(.active):hover {
    background-color: #797D81; /* A light gray background on hover for better UX */
    color: white;
}

.nav-item--active,
.sidebar__item--active {
    background-color: #231651;  /* Bootstrap primary color */
    color: white;  /* Text color */
}

.sidebar__item--icon-spacing {
    margin-right: 10px;  
}

.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%280, 0, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#top-bar-container {
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.tab-buttons-response {
    background-color: #ffffff;
    position: sticky;
    top: 56px; /* Adjust this value based on your top bar height */
    z-index: 1010; /* Lower than top-bar but higher than content */
}

#main-section {
    position: relative;
}

.memo-content table thead tr th {
    border-bottom: 2px solid var(--primary-color) !important;
}

.memo-content h2 {
    color: var(--primary-color);
}

.collapse-button:focus {
    box-shadow: none;
    outline: none;
}

.main-section__top-bar-wrapper__breadcrumbs {
    color: #231651;
}

.main-section__scrolling-content__item--full-screen {
    height: calc(100vh - 60px); /* Adjust this based on the height of your nav-indicator-wrapper and its padding */
}

.main-section__scrolling-content__item__feedbackcontent {
    display: flex;
    flex-direction: column;
    height: 100%; /* Make sure it takes the full height of its parent */
}

.example-box {
    background-color: #fcfcfc;
}

.light-grey-box {
    background-color: #fcfcfc;
    max-width: 1200px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the box horizontally */
}

.light-grey-box-question {
    background-color: #FFFFFF;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.2s ease-in-out;
}

.light-grey-box-question.active {
    background-color: #FFFFFF;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.question-text-large {
    font-size: 25px;
}

.bottom-spacer {
    height: 80vh; /* Instead of fixed 1000px */
    min-height: 300px;
    max-height: 1000px;
}

.main-section__scrolling-content__item__feedbackcontent__tabs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-section__scrolling-content__item__badges-container { /* Replace with the actual class or selector of the badges div */
    margin-top: auto; /* Pushes to the bottom */
}

.tab-buttons {
    display: flex;
    gap: 10px;
}

.tab-buttons-response {
    display: flex;
    justify-content: space-between; /* Adjusts children to start and end of container */
    align-items: center; /* Vertically centers the items */
    gap: 10px; /* Maintains the gap between items */
}

.left-section, .right-section {
    display: flex;
    align-items: center; /* Ensures items within these sections are also vertically centered */
    gap: 10px; /* Spaces out individual items/buttons */
}

.right-section {
    flex-shrink: 0; /* Prevents the right section from shrinking */
    min-width: 300px; /* Adjust this value based on your design needs */
}

.progress {
    width: 100%; /* Ensures the progress bar takes the full width of its container */
}


.learning-tab-contents,
.tab-contents,
.chat-tab-contents {
    flex-grow: 1;
}

.chat-content {
    display: none;
}

.assistant-chat {
    height: calc(100vh - 150px);
}

.learning-tab-content {
    display: none;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.project-tab-content {
    display: none;
    height: calc(100vh - 400px);
}

.learning-tab-content.active,
.project-tab-content.active,
.chat-content.active {
    display: flex;
    flex-direction: column;
}

.chat-thread {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1000px;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(100vh - 450px);
}

.chat-input-container {
    flex-shrink: 0;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
  
  .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
}

.learning-tabs {
    overflow-y: auto;
}

.feedback-response-input {
    flex-shrink: 0;
    margin-top: auto;
}

.drag-handle {
    cursor: grab;  /* Indicates draggable behavior */
}

.analysis-chart {
    flex-grow: 1;
    display: flex;
    max-width: 1200px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the box horizontally */
}

.analysis-chart canvas {
    flex-grow: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.analysis-chart-memo {
    text-align: center;
    flex-grow: 1;
    display: flex;
    max-width: 700px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the box horizontally */
}

.analysis-chart-memo canvas {
    flex-grow: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.compare-thread,
#new-bar-chart canvas {
    height: 400px;
}

.memo-content .card-body > h2:first-child {
    margin-top: 0;
}

.memo-content .blockquote {
    font-size: 1rem;
    color: #6c757d;
}

.memo-content .table {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
}

.memo-content li {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
    overflow-wrap: break-word;  /* this will break long unbreakable strings (like URLs) */
}

.main-section__scrolling-content__item__feedbackresponse__topic,
.main-section__scrolling-content__item__project__topic,
.main-section__scrolling-content__item__meeting__topic,
.main-section__scrolling-content__item__feedbackrequest__topic {
    height: 85px;
    overflow-y: auto;   
}

.edit-thread,
.aggregate-thread,
.responses-thread,
.questions-thread,
.home-thread,
.question-thread {
    overflow-y: auto;
}

.mic-help-link:visited {
    color: darkblue;         /* Slightly darker color on hover (optional) */
    text-decoration: underline; /* Underline, like a typical link */
    cursor: pointer;            /* Changes the cursor to a pointer/hand icon */ 
}

.feedback-request-link,
.mic-help-link,
.type-instead,
.general-link,
.response-link,
.response-link-public,
.chat-summary-link-text,
.voice-link-text,
.main-response-link-text,
.chat-link,
.summary-link,
.project-link {
    color: darkblue;         /* Slightly darker color on hover (optional) */
    text-decoration: underline; /* Underline, like a typical link */
    cursor: pointer;            /* Changes the cursor to a pointer/hand icon */
}

.example-template-link {
    text-decoration: underline; /* Underline, like a typical link */
    cursor: pointer;            /* Changes the cursor to a pointer/hand icon */
}

.summary-link:hover {
    text-decoration: none;   /* Removes the underline on hover (optional) */
}

.cursor {
    cursor: pointer;            /* Changes the cursor to a pointer/hand icon */
}

.toggle-transcript.transcript-active { color: var(--primary-color) !important; }

/* Initially hide the like-icon */
.like-icon {
    opacity: 0;
    transition: opacity 0.2s ease-in-out; /* Smooth transition */
    visibility: hidden; /* Start with the icon not visible */
    color: var(--primary-color);
}
  
/* When hovering over the list items with the cursor class, show the like-icon */
.cursor:hover .like-icon {
opacity: 1;
visibility: visible; /* Make the icon visible on hover */
}

/* For Webkit (Chrome, Safari, etc.) */
input[type='range']::-webkit-slider-thumb {

    background: var(--primary-color); /* Your desired color */

}

/* For Mozilla Firefox */
input[type='range']::-moz-range-thumb {

    background: var(--primary-color);

}

/* For Microsoft Edge */
input[type='range']::-ms-thumb {

    background: var(--primary-color);

}

  

.answer {
    border-top: 1px solid var(--primary-color); /* Thin line of 1px thickness */
}

.custom-orange-progress {
    background-color: var(--primary-color);
}

.chat-tab-link {
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    background-color: white;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.2s;
    font-size: 14px; /* Adjust font size as needed */
    color: inherit; /* Use the inherited text color */
    text-decoration: none; /* Remove any default text decoration */
}

.chat-tab-link.active {
    font-weight: bold;
    color: inherit; /* Ensure the active button has the correct color */
}


.editable {
    background-color: #f0f0f0; /* Light grey background */
    border: 1px dashed #ccc; /* Dashed border */
    padding: 4px 8px; /* Padding inside the element */
    cursor: text; /* Text cursor on hover */
    min-height: 20px; /* Minimum height to ensure even empty elements are visible */
}

.editable:focus {
    background-color: #e7e7e7; /* Slightly darker background on focus */
    border: 1px solid #aaa; /* Solid border on focus */
    outline: none; /* Remove default focus outline */
}

/* General Purpose */

.main-section__scrolling-content__item--headline {
    color: #797D81; /* Your specified color */
}

.main-section__scrolling-content__item--headline:hover {
    color: #797D81; /* Your specified color */
}

.transcript-toggle:focus,
.transcript-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

.main-section__scrolling-content__item--summarybullets {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
    overflow-wrap: break-word;  /* this will break long unbreakable strings (like URLs) */
}

/* Override max-width for centered empty states to allow proper centering */
.text-center .main-section__scrolling-content__item--summarybullets {
    max-width: none;
}

.example-icon {
    font-size: 3rem; /* Make the icon bigger */
    display: block;
    text-align: center;
    margin: 0 auto; /* Center the icon */
    color: var(--primary-color);
}

.inbox-box,
.notes-box,
.discussions-box,
.project-box,
.example-box {
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    max-width: 1200px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the box horizontally */
}

.inbox-box:hover,
.notes-box:hover,
.discussions-box:hover,
.project-box:hover,
.learnings-box:hover,
.example-box:hover {
    background-color: lightgrey; /* Change background color on hover */
}

.font-14 {
    font-size: 14px; /* or whatever size you prefer */
}

.standard-text {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
    overflow-wrap: break-word;  /* this will break long unbreakable strings (like URLs) */
}

.orangeButton {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.orangeButtonOutline {
    background-color: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.orangeButtonOutline:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Remove Bootstrap's blue focus glow from form controls */
.form-control:focus {
    border-color: #ced4da;
    box-shadow: none;
}

/* Style date picker with primary color */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(13%) sepia(68%) saturate(2857%) hue-rotate(243deg) brightness(87%) contrast(97%);
}

input[type="datetime-local"]:focus {
    border-color: var(--primary-color);
}

.speakerButton {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.speakerButton.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.border-on-brand {
    border-color: var(--primary-color) !important;
}

.like-orange {
    color: var(--primary-color);
}

.bullet-list li::before {
    content: "•";
    margin-right: 0.5em;
 }

.badge-orange {
    background-color: var(--primary-color);
}

.tooltip-icon {
    position: relative;
    display: inline-block;
}
  
.tooltip-icon::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    visibility: hidden;
    color: black;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    font-style: normal;
    font-size: 12px;
}

.tooltip-icon:hover::after {
    visibility: visible;
    opacity: 1;
}

.clickableBadge {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.clickableBadge:hover {
    opacity: 0.8;
}

.main-word-cloud {
    height: 600px;
    min-height: 600px;
}

/* Classes for New Feedback Request*/
.main-section__scrolling-content__meeting__editable-title,
.main-section__scrolling-content__project__editable-title,
.main-section__scrolling-content__feedback__editable-title {
    min-height: 20px; /* Set a minimum height so it doesn't collapse */
    border: none;  /* This should remove the dashed line */
    outline: none; /* Remove default outline */
}

.main-section__scrolling-content__meeting__editable-title:focus,
.main-section__scrolling-content__project__editable-title:focus,
.main-section__scrolling-content__feedback__editable-title:focus {
    outline: none;
    border: none;  /* This should remove the dashed line */
}

.main-section__scrolling-content__meeting__editable-title:empty::before,
.main-section__scrolling-content__project__editable-title:empty::before,
.main-section__scrolling-content__feedback__editable-title:empty::before {
    content: attr(data-placeholder);
    color: #ccc; /* Placeholder color, adjust as needed */
}

.main-section__scrolling-content__project__editable-question,
.main-section__scrolling-content__feedback__editable-question {
    min-height: 20px; /* Set a minimum height so it doesn't collapse */
    border: none;  /* This should remove the dashed line */
    outline: none; /* Remove default outline */
}

.main-section__scrolling-content__project__editable-question:focus,
.main-section__scrolling-content__feedback__editable-question:focus {
    outline: none;
    border: none;  /* This should remove the dashed line */
}

.main-section__scrolling-content__project__editable-question:empty::before,
.main-section__scrolling-content__feedback__editable-question:empty::before {
    content: attr(data-placeholder);
    color: #ccc; /* Placeholder color, adjust as needed */
}

.main-section__scrolling-content__project__question-types,
.main-section__scrolling-content__feedback__question-list {
    list-style: none;  /* Remove bullet points */
    padding-left: 0;   /* Remove default padding */
}

.main-section__scrolling-content__project__question-types li,
.main-section__scrolling-content__feedback__question-list li {
    border-radius: 10px;         /* Rounded edges */
    padding: 10px 15px;          /* Some padding for spacing */
    margin-bottom: 10px;         /* Space between list items */
}

#teamsContainer {
    flex-direction: column !important;
}

.list-group {
    width: 100%;
}

.list-group-item-check {
    position: absolute;
    left: -9999px;
}

.list-group-item:hover {
    cursor: pointer;
    background-color: #e3e3e3;  /* Light grey */
}

.list-group-item {
    width: 100%;
    box-sizing: border-box; 
}

.list-group-item-checked {
    background-color: #afafaf;  /* Light grey */
}

.hide {
    display: none;
}

.testRecordbtn,
.voicenoteRecordbtn,
.feedbackRecordBtn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: #333; /* Adjust text color as needed */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.testRecordbtn img,
.voicenoteRecordbtn img,
.feedbackRecordBtn img {
    width: 12px; /* Adjust as necessary */
    margin-right: 10px;
}

.feedbackRecordBtn:hover {
    background-color: #f3f3f4;
}

.main-section__scrolling-content__item__header {
    background-color: #231651;
}

.scrollable-column {
    max-height: 800px; /* Adjust this value as needed */
    overflow-y: auto;
}

/* Existing styles */
.collapsible-header {
    cursor: pointer;
}

.collapse-indicator {
    font-size: 0.8em;
    transition: transform 0.3s;
}

.collapsible-header[aria-expanded="true"] .collapse-indicator {
    transform: rotate(180deg);
}





.follow-up-feedback {
    cursor: pointer;            /* Changes the cursor to a pointer/hand icon */
}


/* Other */

.loading-spinner-feedback-container {
    min-height: 50px;
    overflow: hidden;
}

/* Text displayed when feedback is summarized via audio*/

.feedbackSummaryText {
    font-size: 14px; /* or whatever size you prefer */
}

.main-section__scrolling-content--individualfeedback {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 800px;  /* adjust as necessary */
    overflow-wrap: break-word;  /* this will break long unbreakable strings (like URLs) */   
}

#main-section__scrolling-content__checkin__microphone-icon {
    width: 20%;    /* You can adjust this value as per your requirement */
    height: auto;  /* This will maintain the aspect ratio of the image */
    display: block;
    margin: 0 auto; /* Center the image */
}

.main-section__scrolling-content__checkin__edit-icon {
    padding: 10px;  /* Add some spacing around the icon */
}

.generateMemoButton {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.main-section__scrolling-content__item__feedbackcontent__responses-box {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 15px;
}

.main-section__scrolling-content__item__feedbackcontent__responses-number {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.main-section__scrolling-content_memo {
    font-size: 14px; /* or whatever size you prefer */
}


.google-doc-link {
    color: #231651;
    text-decoration: none;
    margin-left: 5px;
    display: inline-block;
}

.google-doc-link:hover {
    text-decoration: underline; /* This will show an underline only when the link is hovered */
}

.google-doc-link img {
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
}

.delete-link-icon {
    color: grey;
    cursor: pointer;
    margin-left: 10px;  /* Add some space between the link and the delete icon */
    display: inline-block;  /* Make it inline with the link */
}

.expand-icon {
    cursor: pointer;
}

.contract-icon {
    cursor: pointer;
}

.breadcrumb-link {
    cursor: pointer;
}




.learning-tab-link,
.tab-link {
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    background-color: white;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.2s;
    font-size: 14px; /* Adjust font size as needed */
    color: inherit; /* Use the inherited text color */
    text-decoration: none; /* Remove any default text decoration */
}

.learning-tab-link.active,
.tab-link.active {
    font-weight: bold;
    color: inherit; /* Use the inherited text color */
}



.roadmap-wrap {
    position: relative;
    height: 100vh;
}

.month {
    border-right: 1px solid #000;
    height: 100vh;
    text-align: center;
}

.month:last-child {
    border-right: none;
}

.stream {
    position: absolute;
    width: 100%;
    height: 20vh;
    background-color: rgba(243, 243, 244, 0.5);
    z-index: 1;
}

/* Adjust the top value for each stream with additional separation */
.stream:nth-child(2) {  
    top: 30px;
}

.stream:nth-child(3) {  
    top: calc(30px + 1 * 20vh + 15px);  /* Added 15px separation */
}

.stream:nth-child(4) {  
    top: calc(30px + 2 * 20vh + 30px);  /* Added 30px total separation for third stream */
}

.red-box {
    position: absolute;
    background-color: var(--primary-color);
    height: 4vh; /* Less than the full height of the stream */
    top: 5vh; /* Center the box vertically within the stream */

    z-index: 3; /* Ensure it overlays on top of the stream background */
    border-radius: 10px; /* Adjust this value for the desired rounding */
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center;     /* Vertically center the content */
    color: white;            /* Make the text white */
}

.add-user-table input:disabled {
    background-color: var(--bs-gray-200);
    cursor: not-allowed;
}

.add-user-table tr.confirmed {
    background-color: var(--bs-gray-100);
}

.add-user-table tr.confirmed input {
    pointer-events: none;
    border: none;
    background: transparent;
}

.add-user-table .confirm-user.disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

#newTemplateThemesTable td[data-field="description"] {
    width: 500px;
}

#newTemplateThemesTable td[data-field="scoring type"] {
    width: 300px;
}

#editTemplateThemesTable td.theme-description {
    width: 500px;
}

#editTemplateThemesTable td:has(select.theme-scoring-type) {
    width: 300px;
}

.testRecordBtn,
.feedbackRecordInResponseBtnBig,
.feedbackRecordBtnBig {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
    color: #333; /* Adjust text color as needed */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-color: #ffffff;
    border-width: 2px;
}

.testRecordBtn .mic-border,
.feedbackRecordInResponseBtnBig .mic-border,
.feedbackRecordBtnBig .mic-border {
    border: 1px solid var(--primary-color);
}

.feedbackRecordBtnBig img,
.feedbackRecordInResponseBtnBig img,
.testRecordBtn img {
    width: 20px; /* Adjust as necessary */
    margin: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.testRecordBtn:hover,
.feedbackRecordInResponseBtnBig:hover,
.feedbackRecordBtnBig:hover {
    background-color: #f3f3f4;
}

.keyboardIcon {
    cursor: pointer;
}

.bottom-progress {
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s ease;
    background-color: var(--primary-color);
}

.selection-card {
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    align-items: center;
}

.orangeButton {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.greyOutline {
    border: 1px solid #ced4da;
    background-color: white;
}

/* Hover states */
.greyOutline:hover {
    background-color: #f8f9fa;
    border-color: #b1b7bd;
}

.feedbackResponseList table thead tr th {
    border-bottom: 2px solid var(--primary-color) !important;
}

.feedbackResponseList h2 {
    color: var(--primary-color);
}

.text-workspace-primary {
    color: var(--primary-color);
}

.feedbackResponseList .card-body > h2:first-child {
    margin-top: 0;
}

.feedbackResponseList .blockquote {
    font-size: 1rem;
    color: #6c757d;
}

.feedbackResponseList .table {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
}

.feedbackResponseList li {
    font-size: 14px; /* or whatever size you prefer */
    max-width: 1000px;  /* adjust as necessary */
    overflow-wrap: break-word;  /* this will break long unbreakable strings (like URLs) */
}

.archived-response {
    opacity: 0.6;
    background-color: #f8f9fa !important;
}

.archived-response .card-body h3,
.archived-response .card-body h4,
.archived-response .card-body h5,
.archived-response .card-body h6 {
    color: #6c757d !important;
}

/* Preview functionality styles */
.question-preview-item .light-grey-box {
    cursor: pointer !important;
    transition: all 0.2s ease-in-out;
}

.question-preview-item .light-grey-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f8f9fa;
    border-color: #dee2e6 !important;
}

.question-preview-item .bi-pencil-square {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.question-preview-item .light-grey-box:hover .bi-pencil-square {
    opacity: 1;
    color: var(--primary-color, #F58F29);
}

.thought-starter-item, .quant-option-item {
    position: relative;
}

.thought-starter-item .btn, .quant-option-item .btn {
    border-radius: 0 0.375rem 0.375rem 0;
}

#quantDataFields {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

/* Memo Template Styles */
.memo-template-section-card {
    transition: all 0.2s ease;
}

.memo-template-section-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.memo-template-add-section-btn {
    transition: all 0.2s ease;
}

.memo-template-add-section-btn:hover {
    transform: scale(1.05);
}

.memo-template-field {
    font-size: 14px;
}

/* Presentation Template Styles */
.presentation-template-slide-card {
    transition: all 0.2s ease;
    background: #f8f9fa;
}

.presentation-template-slide-card:hover {
    background: #e9ecef;
}

.presentation-template-theme-card {
    background: #f8f9fa;
}

.presentation-template-field {
    font-size: 14px;
}

/* Assessment Results Progress Bar Styles */
/* Overall score progress bar - slightly larger for main metric */
.assessment-results .overall-progress-bar {
    height: 12px;
}

/* Dimension and benchmark progress bars - thinner for secondary metrics */
.assessment-results .dimension-progress-bar,
.assessment-results .benchmark-progress-bar {
    height: 10px;
}

/* Generic progress bar styling for assessment results page */
.assessment-results .progress {
    height: 10px;
}

/* AI Evidence Styles */
.ai-evidence-box {
    border-left: 3px solid var(--primary-color);
}

.ai-evidence-label {
    color: var(--primary-color);
}