/* Color Variables */






:root {
    --clr1: #7ba986;
    --clr2: #5e9190;
    --clr3: #48768a;
    --clr4: #617695;
    --clr5: #c78770;
  
}

/* Background Color Classes */
.bg-clr1 { background-color: var(--clr1) !important; }
.bg-clr2 { background-color: var(--clr2) !important; }
.bg-clr3 { background-color: var(--clr3) !important; }
.bg-clr4 { background-color: var(--clr4) !important; }
.bg-clr5 { background-color: var(--clr5) !important; }


/* Subtle Background Color Classes */
.bg-clr1-subtle { background-color: var(--clr1); opacity: 0.1 !important; }
.bg-clr2-subtle { background-color: var(--clr2); opacity: 0.1 !important; }
.bg-clr3-subtle { background-color: var(--clr3); opacity: 0.1 !important; }
.bg-clr4-subtle { background-color: var(--clr4); opacity: 0.1 !important; }
.bg-clr5-subtle { background-color: var(--clr5); opacity: 0.1 !important; }


/* Text Color Classes */
.text-clr1 { color: var(--clr1) !important; }
.text-clr2 { color: var(--clr2) !important; }
.text-clr3 { color: var(--clr3) !important; }
.text-clr4 { color: var(--clr4) !important; }
.text-clr5 { color: var(--clr5) !important; }

.overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark transparent background */
    z-index: 5000; /* High z-index to overlay other elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    text-align: center;
}

.speakers-section {
    margin-bottom: 1rem;
}

.speaker-badge {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 14px;
}

.summary-section {
    padding-right: 1rem; /* Adjusts spacing to align with Bootstrap's pe-5 */
    border-right: 1px solid #efefef;
}

.action-list-section {
    padding-left: 1rem; /* Aligns with Bootstrap's ps-5 */
}

.scrollable-content {
    height: 60vh; /* Default height for md and larger screens */
    overflow-y: auto;
    padding:5px;
}

@media (max-width: 767.98px) { /* Target xs and sm screens */
    .scrollable-content {
        height: auto; /* Change height to auto for xs and sm */
    }
}



.action-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.action-badge {
   width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 14px;
}

.transcription-tab {
    padding-top: 1rem; /* Aligns with Bootstrap's py-5 */
    padding-bottom: 1rem;
    padding-left: 0.75rem; /* Aligns with Bootstrap's px-3 */
    padding-right: 0.75rem;
}

.transcription-audio-section {
    border-right: 1px solid #efefef;
}

.audio-player-container {
    margin-bottom: 1rem;
    padding-right: 1rem; /* Aligns with pe-5 */
}

.transcription-content-section {
    padding-left: 1rem; /* Aligns with ps-5 */
}

.segment-badge {
    width: 32px !important;
    min-width: 32px;
    height: 32px !important;
    font-size: 12px;
}

.transcription-text {
    margin-left: 0.75rem; /* Aligns with Bootstrap's mx-3 */
    width: calc(99% - 40px);
}

.timestamp {
    font-size: 11px;
    color: #6f6b6b;
    width: 100px;
}

.speaker-badge-container {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    transition: background-color 0.5s; /* Smooth transition for background color */
}

.speaker-badge-container:hover {
    background-color: var(--highlight-color, rgba(255, 255, 0, 0.5)); /* Use dynamic color or default */
}

.speaker {
    display: inline-block;
    border-radius: 6px;
    background-color: transparent; /* Ensure this is explicitly set */
    transition: background-color 0.5s, box-shadow 0.5s; /* Smooth transition for both */
    font-weight: bold;
}

.speaker.highlight {
    background-color: var(--highlight-color, rgba(255, 255, 0, 0.5)); /* Default to yellow if not set */
    box-shadow: 0 0 0 2px var(--highlight-color, rgba(255, 255, 0, 0.5));
}

.action-item {
    background-color: transparent; /* Ensure this is explicitly set */
    transition: background-color 0.5s; /* Smooth transition for both */
}

.action-item.highlight {
    background-color: var(--highlight-color, rgba(255, 255, 0, 0.5)); /* Default to yellow if not set */
}

.play-timestamp
{
    color:#000;
    cursor: pointer;
}

.timestamp
{
    font-size: 11px; 
    color: #6f6b6b; 
    cursor:pointer;
}

.timestamp:hover
{
    color: #2988a4;
}

.transcription-segment {
    border-left: 5px solid transparent;
    transition: background-color 0.3s, border-color 0.3s;
    padding:15px 10px;
    border-radius: 5px;
}

.transcription-segment.highlight {
    background-color: rgba(41, 136, 164, 0.1);
    border-left-color: #2988a4;
}

.editable-name-input {
    font-size: inherit; /* Matches the font size of the parent (h2) */
    line-height: inherit; /* Matches the line height of the parent */
    font-weight: inherit;
    padding: 0; /* Adjust padding to better align with h2 */
    border: none; /* Optionally remove the border for a cleaner look */
    box-shadow: none; /* Remove the box shadow */
    outline: none; /* Remove the outline for focus */
    width: auto; /* Adjust width dynamically */
    letter-spacing: normal;
}