* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Roboto', sans-serif !important;
    height: 100%;
    display: flex;
    overflow: hidden;
    background-color: #f8fafc !important; /* Premium off-white background */
     font-size: 14px; 
}
.no-margin {
    margin-top: 0;
    margin-bottom: 0 !important;
}

.wrapper {
    display: flex;
    width: 100%;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background-color: #f8f9fa;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    overflow-y: auto;
}

.sidebar.collapsed {
    width: 80px;
}

.logo .logo-text {
    margin-left: 10px;
    font-weight: 700;
}

.nav-link {
    display: flex !important;
    align-items: center;
    padding: 10px !important;
    margin-bottom: 5px;
    gap: 15px;
    color: #525866 !important;
    font-weight: 400;
    transition: background-color 0.2s;
}

.nav-link.active {
    background-color: #e9ecef;
    font-weight: 700;
}

.nav-link:hover {
    background-color: #f1f3f5;
}

.content-area {
    margin-left: 250px;
    padding: 20px;
    flex-grow: 1;
    transition: margin-left 0.3s;
    width: calc(100% - 250px);
    background-color: #f8fafc !important;
    overflow-y: auto;
}

.sidebar.collapsed + .content-area {
    margin-left: 80px;
    width: calc(100% - 80px);
}

.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-profile span,
.sidebar.collapsed #workspaceDropdown span,
.sidebar.collapsed #userDropdown span,
.sidebar.collapsed .utility-box,
.sidebar.collapsed .logo .logo-text {
    display: none;
}

#userDropdown,
#workspaceDropdown {
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    overflow: hidden;
    color: #A0AEC0;
}

.sidebar.collapsed .dropdown-toggle {
    justify-content: center;
    padding-right: 0;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 10px 0;
}

.footer-nav .logout-link .nav-link {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #525866;
    font-weight: 400;
    gap: 15px;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.footer-nav .logout-link .nav-link:hover {
    background-color: #f1f3f5;
}

.footer-nav .logout-link .nav-link i {
    font-size: 1.2rem;
}

.sidebar.collapsed .logout-link .nav-link span {
    display: none;
}

#campaignTableContainer .table {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.action-btn {
    border: none;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
}

.pagination li a,
.pagination li span {
    color: #007bff;
}

.pagination .active a {
    background-color: #007bff;
    color: #fff !important;
    border-color: #007bff;
}

.campaign-row:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}
.call-row:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

#campaignTable {
    width: 100%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    border-collapse: separate;
    border-spacing: 0;
}

#campaignTable thead, #In_campaignTableDetails thead {
    background-color: #4E4E4E !important;
    color: #fff;
    font-size: 0.85rem; /* Adjust to desired size, smaller than default */
    font-weight: bold; /* Keep the bold weight for emphasis */
    padding: 10px; /* Adjust padding to match the reduced font size */
}

#campaignTable thead th {
    font-weight: bold;
    padding: 12px;
    position: relative;
    padding-right: 25px;
    white-space: nowrap;
    border-right: 1px solid #dee2e6; /* Add border line between columns */
}


#campaignTable tbody tr {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #dee2e6;
}

#campaignTable tbody tr:hover {
    background-color: #f1f3f5;
}

#campaignTable td {
    padding: 12px;
    vertical-align: middle;
}

/* Remove default DataTables sorting icons */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-image: none !important; /* Hide default sorting icons */
}

#campaignTable thead th.sorting::after {
    content: '⇅';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    color: white;
}

#campaignTable thead th.sorting_asc::after {
    content: '▲';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    color: white;
}

#campaignTable thead th.sorting_desc::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    color: white;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 10px; /* Adds rounded corners, but not a full circle */
    margin: 0 5px; /* Space between pagination buttons */
    padding: 5px 12px; /* Adjust padding for better look */
    border: 1px solid #ced4da; /* Light border for definition */
    transition: background-color 0.2s, border-color 0.2s; /* Smooth transition for hover effect */
    color: #007bff; /* Blue color for button text */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f1f3f5;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #0d6efd;
    color: #ffffff !important;
    border-color: #0d6efd;
}

.table-responsive {
    overflow-y: visible !important;
}

.table .dropdown-toggle {
    padding: 5px;
    border-radius: 50%;
    background-color: #f8f9fa;
    border: none;
}

.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    min-width: 150px;
    background-color: #f8fafc !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    padding: 5px 0;
    margin-top: 5px;
}

.dropdown-container:hover .dropdown-menu {
    display: block;
    overflow: visible;
}

.dropdown-item {
    padding: 10px 15px;
    color: #333;
    background-color: #f8fafc !important;
    text-align: left;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: #f1f3f5;
    color: #333;
}

.dropdown-toggle::after {
    content: none !important; /* Removes dropdown arrow */
}

/* Apply rounded corners only to the top corners of the header row */
#campaignTable thead th:first-child, #campaignTableDetails thead th:first-child, #In_campaignTableDetails thead th:first-child {
    border-top-left-radius: 8px;
}

#campaignTable thead th:last-child, #campaignTableDetails thead th:last-child,  #In_campaignTableDetails thead th:last-child {
    border-top-right-radius: 8px;
}

.table-responsive {
    overflow-x: auto;
    max-width: 100%; /* Prevents table from overflowing beyond the viewport */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

table.dataTable.no-footer {
    border-bottom:none !important;
}

/* Override primary button color */
.btn-primary {
    background-color: #4E4E4E !important;
    color: #ffffff !important; /* Ensures text is white */
    border: none !important;
    transition: background-color 0.3s ease;
    font-weight: bold; /* Make text bold */
    
}
/* Badge styling for Pending Tasks with color #0D6E86 */
.badge.bg-primary {
    background-color: #4E4E4E !important; /* Set background to #0D6E86 */
    color: #ffffff !important; /* Set text color to white */
    font-weight: 600; /* Make text a bit bolder */
    padding: 5px 10px; /* Add some padding for better appearance */
    border-radius: 12px; /* Rounded corners */
    font-weight: bold; /* Make text bold */
}

/* Style the task-box to look more consistent within the table row */
.task-box {
    padding: 0; /* Remove extra padding from the cell */
}

/* Style for the task-info box */
.task-info {
    background-color: #f0f4f8; /* Subtle background color to make it less prominent */
    padding: 8px 12px; /* Reduced padding for a more compact look */
    border: 1px solid #e0e0e0; /* Light border to give some definition */
    border-radius: 8px; /* Small rounding for smoother look */
    display: inline-flex; /* Inline-flex for compact arrangement */
    align-items: center; /* Vertically center the elements */
    gap: 8px; /* Space between icon and text */
    color: #333; /* Dark text for readability */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow to add slight depth */
}

/* Styling for the task icon */
.task-icon {
    color: #007bff; /* Blue color to make it noticeable but subtle */
    font-size: 1.2rem; /* Adjust size to be noticeable */
}

/* Style the text and count to be consistent and readable */
.task-text {
    font-weight: 500; /* Medium weight for balance */
    color: #333; /* Match the rest of the table text */
}

.task-count {
    font-weight: 600; /* Slightly bold for emphasis */
    color: #333; /* Same color as text for consistency */
}

/* Fixed Progress Bar at the Top */
.progress-bar {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 1000;
    flex-direction: unset!important;
}

.progress-step {
    flex: 1;
    text-align: center;
    color: #888;
    border-bottom: 4px solid #ddd;
    transition: color 0.3s, border-bottom-color 0.3s;
}

.progress-step.completed, .progress-step.selected {
    color: #000;
    font-weight: bold;
    border-bottom-color: #000;
}

/* Header Row for Back Button */
.header-row {
    margin-top: 10px; /* Offset for the fixed progress bar */
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px;
}

.back-button {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: #0056b3;
}

/* Main Content Box */
.content-box {
    width: 750px;
    height: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px; /* Additional offset to account for the fixed progress bar and back button */
}

/* Ensure #section1 retains its display property for show/hide functionality */
#section1 {
    /* Do not set display: flex; here */
    position: relative; /* Ensure positioning context */
}

/* Use the nested .section-content for Flexbox layout */
#section1 .section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%; /* Ensure it takes up full height of #section1 */
    /* Optional: Align items horizontally center */
    /* align-items: center; */
}

/* If #section1 doesn't have a set height, you might need to define it */
#section1 {
    height: 100vh; /* or any appropriate height */
}

#section1 .section-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Optional: Set width to 100% to fill the parent */
    width: 100%;
}

#section1 {
    position: relative;
    /* No need to set height */
}

/* Icon Row Styling */
.icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

/* Individual Icon Container */
.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 20px;
    width: 80px;
    height: 80px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Icon Styling */
.icon-container i {
    font-size: 2em;
    margin-bottom: 5px;
}
.textarea-small {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}










.input-row {
    flex-direction: row !important; /* Override SCSS column layout */
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.input-row select, .input-row textarea {
    flex: 1;
}

.textarea-large {
    width: 400px;
    max-width: 100%;
    height: 70px;
    border-radius: 8px;
    padding: 10px;
    color: #6c757d !important; /* Lighter text for placeholder */
}
.textarea-large.active {
    color: #000; /* Regular text color when user starts typing */
}

/* Styling for the checkmark */
.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #28a745; /* Green color for the checkmark */
    display: none;
}

/* Highlight selected card */
.card.selected {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Positioning and styling for cards */
.goal-cards {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    position: relative;
}

.goal-cards .card {
    width: 300px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
}

.card:hover {
    transform: translateY(-5px);
}

.instructions {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.upload-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.upload-container:hover {
    background-color: #e0e7ff;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.upload-icon {
    font-size: 48px;
    color: #6c63ff;
    margin-bottom: 10px;
}

.upload-text {
    font-size: 16px;
    font-weight: 500;
    color: #007bff;
    text-decoration: underline;
    margin-bottom: 5px;
}

.upload-subtext {
    font-size: 12px;
    color: #888;
}

.file-input {
    display: none;
}


.agent-card:hover {
    transform: translateY(-5px);
}

.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #28a745;
    display: none; /* Hidden by default */
}

.agent-card.selected .checkmark {
    display: block; /* Show when selected */
}

.agent-icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 10px;
}

.agent-name {
    font-weight: bold;
    margin-bottom: 10px;
}

.play-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s;
}

.play-button:hover {
    color: #0056b3;
}

/* Scoped styles for Schedule Campaign section */
#section7 .schedule-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 20px;
}

#section7 .test-call, 
#section7 .schedule-date {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section7 h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

#section7 .optional {
    font-size: 14px;
    color: #888;
}

#section7 .test-call-box, 
#section7 .calendar-box {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 50%;
}

#section7 label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

#section7 .form-control {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#section7 .note {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}

#section7 .btn.cancel {
    background-color: #6c757d;
    color: white;
}

#section7 .btn.save {
    background-color: #007bff;
    color: white;
}

#section7 .warning {
    margin: 20px auto;
    padding: 10px;
    background-color: none !important;
    color: none !important;
    border: none !important;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-size: 14px;
}


#section7 .button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#section7 .button.back {
    background-color: #6c757d;
}

#section7 .button:hover {
    background-color: #0056b3;
}

#section7 .button.back:hover {
    background-color: #565e64;
}

/* Button Styling for "Run Campaign" */
.run-campaign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: transparent;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, #1e90ff, #00e6e6);
    border-radius: 30px;
    color: #00e6e6;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.run-campaign:hover {
    background: linear-gradient(90deg, #1e90ff, #00e6e6);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 230, 230, 0.5);
}

.run-campaign:active {
    transform: translateY(2px);
}

/* Icon Styling */
.run-campaign i {
    font-size: 20px;
    color: #00e6e6;
    transition: color 0.3s ease;
}

.run-campaign:hover i {
    color: #ffffff;
}


.side-nav {
    width: 200px;
    background-color: #333;
    color: #fff;
    padding: 20px;
    height: 100vh;
}
.main-content {
    flex-grow: 1;
    padding: 20px;
}
.progress-bar {
    display: flex;
    position: relative;
}
.progress-step {
    flex: 1;
    padding: 10px;
    text-align: center;
    color: #888;
    border-bottom: 4px solid #ddd;
    transition: color 0.3s, border-bottom-color 0.3s;
}
.progress-step.completed, .progress-step.selected {
    color: #000;
    font-weight: bold;
    border-bottom-color: #000;
}
.section {
    display: none;
}
.section.active {
    display: block;
}
.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.button {

    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 30px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease-in-out !important;
}

.button:hover {
    background-color: #0056b3;
}

.button.draft:hover {
    background-color: #565e64;
}

.btn-rounded {
    border-radius: 20px !important; 
  }
  

/* Step 4 Agent Cards */
.agent-cards {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}

.agent-card {
    width: 160px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.agent-icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 10px;
}

.agent-name {
    font-weight: bold;
    margin-bottom: 10px;
}

.play-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s;
}

.play-button:hover {
    color: #0056b3;
}
.button-container.single-button {
    justify-content: flex-end; /* Align the Next button to the right when Back button is hidden */
}

/* Styles specific to Step 6: Select Phone Numbers */
.section6-phone-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #f9f9f9; /* Light background for highlight */
    border: 1px solid #ddd; /* Border for separation */
    border-radius: 20px; /* Rounded corners */
    padding: 10px; /* Padding for spacing */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.section6-phone-item:hover {
    background-color: #eef6ff; /* Highlight color on hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.section6-phone-checkbox {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #007bff; /* Customize checkbox color */
}

.section6-phone-label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0; /* Remove default margins */
}

.section6-phone-number {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-left: 10px;
}


/* Login Page Styling */

/* Body Styles */
.login-page {
    background-color: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    padding: 0 2rem;
}

/* Left Section: Login Form */


.login-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-right: 50px;
    min-width: 500px;
}

.login-card h3 {
    font-weight: bold;
    text-align: center;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.divider span {
    background-color: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    z-index: 0;
}

.forgot-password {
    position: absolute;
    right: 10px;
    top: 70%;
    transform: translateY(-50%);
    font-size: 12px;
}

.btn-login {
    background-color: #444;
    color: #fff;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.btn-login:hover {
    background-color: #0D6EFD;
}

/* Header Styling */
.header {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}


/* Signup Page styling */

/* General styles for the signup page */

/* Ensure the signup page takes the full width and is vertically centered */
.signup-page {
    background-color: #f5f8fa;
    min-height: 100vh;
    min-width: 100vw; /* Ensure full width */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box; 
}


/* Update container styles to occupy full available width */
.signup-page .container {
    width: 100%;
    max-width: 1200px; /* Adjust max-width if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

/* Adjust column alignment to center both sections */
.signup-page .row {
    align-items: center;
    height: 100%;
}

/* Ensure the card uses the full height available in its parent container */
.signup-page .card {
    height: 100%;
}

/* Left section styling */
/* Styling for the left section */
.left-section {
    color: #3a3a3a;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left-section .logo {
    font-size: 36px;
    font-weight: bold;
    color: #3a3a3a;
}

.left-section ul {
    list-style: none;
    padding-left: 0;
}

.left-section li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.left-section h5 {
    font-weight: bold;
    margin-bottom: 5px;
    color: #3a3a3a;
}

.custom-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* Right section styling */

.right-section {
     background-color: #f8fafc !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.signup-page .card-body {
    padding: 30px;
}

.signup-page form label {
    font-weight: bold;
    color: #3a3a3a;
}

.signup-page .form-control {
    border-radius: 8px !important;
    margin-bottom: 10px;
    border: 1px solid #ccc !important;
}

.signup-page .form-control:focus {
    border-color: #6a5cff;
    box-shadow: 0 0 5px rgba(106, 92, 255, 0.2);
}

.signup-page select.form-select {
    padding: 12px;
}

.signup-page .btn-primary {
    background-color: #6a5cff;
    border-color: #6a5cff;
    border-radius: 20px;
    padding: 12px;
    transition: background-color 0.3s ease;
}

.signup-page .btn-primary:hover {
    background-color: #5a4bd4;
    border-color: #5a4bd4;
}

.signup-page p a {
    color: #6a5cff;
    text-decoration: none;
}

.signup-page p a:hover {
    text-decoration: underline;
}

/* Responsive design */
@media (max-width: 768px) {
    .left-section {
        display: none;
    }

    .signup-page .container {
        flex-direction: column;
        margin-top: 20px;
    }

    .signup-page .col-md-6 {
        width: 100%;
    }
}

/* Reduce font size for the form inputs and labels */
.signup-container form {
    font-size: 14px; /* Adjust the base font size for the entire form */
}

.signup-container form label {
    font-size: 14px; /* Smaller font size for labels */
}

.signup-container form .form-control {
    font-size: 13px; /* Smaller font size for input fields */
    padding: 10px; /* Reduce padding for input fields */
}

.signup-container form button {
    font-size: 14px; /* Smaller font size for the button */
    padding: 12px; /* Reduce button padding for a more compact look */
}

.signup-container form p {
    font-size: 13px; /* Smaller font size for text within the form */
}

/* Campaign Details styling  */

#campaignTableDetails, #In_campaignTableDetails {
    
    width: 100%; 
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 55px;
}


#campaignTableDetails thead th, #In_campaignTableDetails thead th {
    background-color: #4E4E4E !important;
    color: #fff;
    font-weight: bold;
    padding: 12px;
    position: relative;
    padding-right: 25px;
    white-space: nowrap;
    border-right: 2px solid #dee2e6; /* Add border line between columns */
}

#campaignTableDetails thead, #In_campaignTableDetails thead {
    background-color: #4E4E4E;
    color: #fff;
    font-size: 0.85rem; /* Adjust to desired size, smaller than default */
    font-weight: bold; /* Keep the bold weight for emphasis */
    padding: 10px; /* Adjust padding to match the reduced font size */
    text-align: center;
}


#campaignTableDetails tbody tr, #In_campaignTableDetails tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

#campaignTableDetails tbody tr:hover, #In_campaignTableDetails tbody tr:hover {
    background-color: #f1f3f5;
}

#campaignTableDetails td, #In_campaignTableDetails td {
    padding: 12px;
    vertical-align: middle;
}

#In_campaignTableDetails td {
    min-width: 149px;
    text-align: center;
}


.custom-dropdown {
    font-size: 12px; /* Smaller font size for dropdown text */
    padding: 4px 6px; /* Adjust padding for compact appearance */
    height: auto; /* Adjust height to fit content */
    line-height: 1.2; /* Reduce line height for a tighter fit */
}

#pageDropdown {
    font-size: 0.875rem; /* Smaller font size */
    padding: 8px 28px 8px 12px; /* Padding to ensure space for the arrow */
    height: auto; /* Adjust height to fit content */
    line-height: normal; /* Set line height to normal for better alignment */
    border: 1px solid #ced4da; /* Light border */
    border-radius: 4px; /* Rounded corners */
    background-color: #f8f9fa; /* Light background color */
    color: #6c757d; /* Muted text color */
    appearance: none; /* Remove default browser styling */
    -moz-appearance: none; /* Firefox specific */
    -webkit-appearance: none; /* Safari specific */

    /* Custom down arrow SVG */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><path fill="%236c757d" d="M0 0l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center; /* Align arrow to the center */
    background-size: 10px; /* Set size of the arrow */
    display: flex; /* Use flexbox to align content */
    align-items: center; /* Center text and arrow */
}

#pageDropdown:focus {
    outline: none; /* Remove focus outline */
    border-color: #80bdff; /* Highlight border on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle shadow on focus */
}

/* Analytics page styling  */




/* General page padding */
.analytics-page {
    overflow-y: auto;
}

/* Dropdown max-width */
#campaignDropdown {
    max-width: 300px;
}

/* Cards container */


.cards-container {
    display: flex;
    flex-direction: row; /* Changed from column to row */
    flex-wrap: wrap;     /* Allow items to wrap onto new lines */
    gap: 20px;
}

/* Card groups */
.card-group {
    display: flex;
    flex-wrap: nowrap;    /* Keep items in each group on the same line */
    gap: 10px;            /* As per your reduced gap */
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 20px;
    width: 100%;          /* Make groups take full width */
    justify-content: flex-start; /* Align items to the right */
 
}

/* Section icon (dummy tile) */
.card-group .section-icon {
    flex: 1;
    max-width: 200px; /* Ensure consistent size */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Optionally adjust padding or margins */
}


.card-group .card-metric,
.card-group .section-icon {
    flex: 1;
    max-width: 200px;
    aspect-ratio: 1 / 1; /* Maintain square shape */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
}

.section-icon i {
    font-size: 3em; /* Adjusts the icon size */
    color: #6c757d; /* Optional: set the icon color */
    margin: auto;
    display: block;
}




/* Card styles - reduced size to 50% */
.analytics-page .card-metric {
    background-color: #f8f9fa;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    flex: 1 1 48%; /* Cards now take 50% of the container width */
    max-width: 200px;
    min-width: 200px; /* Ensure minimum size for smaller screens */
    padding: 15px;
    position: relative;
}

/* Badge aligned to the top of the card */
.analytics-page .badge-indicator {
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Styling for card content */
.analytics-page .card-metric h4 {
    font-size: 2.5rem;
    margin-top: 40px;
    margin-bottom: 0;
}

/* Chart container */
.analytics-page .chart-container {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 500px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .analytics-page .cards-container {
        flex-direction: column;
    }
    .analytics-page .card-metric {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


/* Home Page Table Status */

.text-danger { color: red; }
.text-success { color: green; }
.text-secondary { color: gray; }
.text-warning { color: orange; }

.no-margin-bottom {
    margin-bottom: 0 !important;
}

/* Force scrollbar styles to apply on all elements */
* {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Thumb and track colors */
}

::-webkit-scrollbar {
    width: 5px; /* For vertical scrollbars */
    height: 5px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar thumb color */
    border-radius: 4px; /* Make it rounded */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker on hover */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Track color */
}

/* Styling of Tasks  */

    #tasksTableContainer .table {
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    #tasksTable {
        width: 100%; 
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        border-collapse: separate;
        border-spacing: 0;
    }

    #tasksTable thead {
        background-color: #4E4E4E;
        color: #fff;
        font-size: 0.85rem;
        font-weight: bold;
        padding: 10px;
    }

    #tasksTable thead th {
        font-weight: bold;
        padding: 12px;
        position: relative;
        padding-right: 25px;
        white-space: nowrap;
        border-right: 1px solid #dee2e6;
    }

    #tasksTable tbody tr {
        background-color: #ffffff;
        border-bottom: 1px solid #dee2e6;
    }

    #tasksTable tbody tr:hover {
        background-color: #f1f3f5;
    }

    #tasksTable td {
        padding: 12px;
        vertical-align: middle;
    }

    /* Add sorting icons */
    #tasksTable thead th.sorting::after {
        content: '⇅';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75em;
        color: white;
    }

    #tasksTable thead th.sorting_asc::after {
        content: '▲';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75em;
        color: white;
    }

    #tasksTable thead th.sorting_desc::after {
        content: '▼';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75em;
        color: white;
    }

    /* Pagination Styling */
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border-radius: 10px;
        margin: 0 5px;
        padding: 5px 12px;
        border: 1px solid #ced4da;
        transition: background-color 0.2s, border-color 0.2s;
        color: #007bff;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #f1f3f5;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #0d6efd;
        color: #ffffff !important;
        border-color: #0d6efd;
    }

    /* Adjust the '+' button style */
    .toggle-summary {
        padding: 5px;
        border-radius: 50%;
        background-color: #f8f9fa;
        border: none;
    }

    /* Rounded header corners */
    #tasksTable thead th:first-child {
        border-top-left-radius: 8px;
    }

    #tasksTable thead th:last-child {
        border-top-right-radius: 8px;
    }

    /* Style for '+' and '-' button */
.view-transcript {
    padding: 5px;
    border-radius: 20px !important;
    border: none;
    background: linear-gradient(to right, #7E5AFF, #5B3FFF) !important;
    color: white !important;
    min-width: 98px; 
}

/* Style for 'Mark as Done' button */
.mark-done {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Space between icon and text */
    font-weight: bold;
    border: none;
    background-color: rgba(0, 128, 0, 0.75) !important; /* Green with 75% opacity */
    color: white !important;
}

    .summary-row {
        background-color: #f8f9fa; /* Light gray background for summary rows */
    }

    .summary-row td {
        border-top: 1px solid #dee2e6; /* Optional: add border for separation */
    }


/* Align the search bar to the right */
.dataTables_filter {
    float: right; /* Moves the search bar to the right */
    text-align: right; /* Aligns the text inside the filter */
    margin-bottom: 10px; /* Adds some space below the search bar */
}

/* Style for pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 5px; /* Adds rounded corners */
    margin: 0 5px; /* Adds spacing between buttons */
    padding: 5px 10px; /* Adjust padding for a consistent look */
    border: 1px solid #dee2e6; /* Matches table border color */
    color: #212529; /* Table's primary text color */
    background-color: white; /* Matches the table background */
    transition: background-color 0.2s, border-color 0.2s, color 0.2s; /* Smooth hover effect */
    font-weight: bold;
    cursor: pointer;
}

/* Style for hovered pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f1f3f5; /* Matches hover color for table rows */
    border-color: #dee2e6; /* Consistent border on hover */
    color: #007bff; /* Keeps text consistent */
}

/* Style for the active pagination button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #4E4E4E; /* Matches the table header color */
    color: white !important; /* White text for contrast */
    border-color: #4E4E4E; /* Consistent border */
    font-weight: bold;
}

/* Style for disabled pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #ccc; /* Light gray for disabled buttons */
    cursor: not-allowed;
}

.badge {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

.badge-success {
    background-color: rgba(40, 167, 69, 0.75); /* Green */
    color: white;
}

.badge-warning {
    background-color: rgba(255, 193, 7, 0.75); /* Yellow */
    color: black;
}

.badge-danger {
    background-color: rgba(220, 53, 69, 0.75); /* Red */
    color: white;
}

.badge-info {
    background-color: rgba(23, 162, 184, 0.75); /* Blue */
    color: white;
}

.badge-secondary {
    background-color: rgba(108, 117, 125, 0.75); /* Gray */
    color: white;
}

/* Scope styles specifically to the #billingPage container */

/* Ensure contentArea spans the full width */
#billingPage #contentArea1 {
    margin-left: 0; /* Override default margin caused by the sidebar */
    width: 100%; /* Take the full width of the parent */
    padding: 20px; /* Optional padding for content spacing */
    background-color: #fff;
}

/* Ensure the table container spans the full width */
#billingPage .table-container {
    width: 100%;
    background-color: #f8f9fa; /* Optional: Light background for distinction */
    padding: 15px;
    border-radius: 8px; /* Rounded corners for better design */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
}

/* Apply to the billing table specifically */
#billingPage .table th,
#billingPage .table td {
    min-width: 200px; /* Set a minimum width for each column */
    text-align: center; /* Optional: Center-align content */
}

#billingPage .table-container {
    width: 100%;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#billingPage .table {
    width: 100%;
    table-layout: fixed; /* Force the table to respect column widths */
    margin: 0 auto;
    border-spacing: 0;
}


/* Filters section full width */
#billingPage .filters-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Button inside filters */
#billingPage .filters-section .date-range-container button {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Table */
#billingPage .table {
    margin: 0 auto;
    width: 100%; /* Ensure the table takes the full width of its container */
}

/* Daterange button */
#billingPage #daterange-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Profile Page */

#profilePage .card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#profilePage .card-header {
    background-color: #f8f9fa;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 1.2rem;
}

#profilePage .card-body p {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

#profilePage .table th {
    text-align: left;
}

#profilePage .badge {
    font-size: 0.75rem;
}

#profilePage .dropdown-menu {
    min-width: 120px;
}

#profilePage .btn-dark {
    font-size: 0.85rem;
}


/* Color Experiments */

/* General Text */
body {
    color: #2D3748 !important; /* Dark Gray for general text */
}

/* Sidebar */
.sidebar {
    background: linear-gradient(to bottom, #1E1E28, #15151D) !important; /* Slightly darker gradient for contrast */
    color: #FFFFFF !important;
}

.sidebar .nav-link {
    color: #A0AEC0 !important; /* Light Gray for inactive links */
    border-radius: 6px !important; /* Rounded corners */
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease-in-out !important;
}

.sidebar .nav-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(to right, #7E5AFF, #5B3FFF) !important; /* Purple gradient for active link */
    border-radius: 20px !important; /* More rounded corners for active links */
}

.sidebar .nav-link:hover {
    color: #FFFFFF !important;
    background: linear-gradient(to right, #5B3FFF, #7E5AFF) !important; /* Slightly darker hover gradient */
    border-radius: 20px !important;
}

/* Utility Box */
.utility-box {
    border: 1px solid #A0AEC0 !important; /* Light Gray border for contrast */
    padding: 0.5rem !important;
    border-radius: 8px !important; /* Rounded corners */
    color: #A0AEC0  !important; /* Dark Gray text for better visibility */
}

.utility-box .badge {
    color: black  !important; /* Purple text for badge */
    border-radius: 50px !important; /* Rounded badge corners */
    padding: 0.25rem 0.5rem !important;
    background-color: #FFC107BF !important;
}

.togglecta {
    background-color: none !important;
    color: #A0AEC0 !important;
}

/* Back CTA */
.button.draft {
    background-color: transparent !important; /* No background for the back button */
    color: #212529BF !important; /* Light Gray text */
    border: 1px solid #212529BF !important; /* Light Gray border */
}

/* Next CTA */
.button.next {
    background: linear-gradient(to right, #7E5AFF, #5B3FFF) !important; /* Purple gradient matching the selected menu item */
    color: #FFFFFF !important;
    border: none !important; /* No border for Next CTA */
    box-shadow: 0 4px 8px rgba(126, 90, 255, 0.5) !important; /* Subtle glow for emphasis */
}

.button.next:hover {
    background: linear-gradient(to right, #5B3FFF, #7E5AFF) !important; /* Reverse gradient on hover */
}

/* Cards */
.card {
    background: #FFFFFF !important;
    color: #2D3748 !important; /* Dark Gray for card text */
    border-radius: 12px !important; /* Rounded corners */
    border: 1px solid #E2E8F0 !important; /* Subtle border */
}

/* Selected Card */
.card.selected {
    border-color: #7E5AFF !important; /* Purple border for selected card */
}

/* Input Fields */
textarea,
input[type="text"],
input[type="file"],
input[type="date"],
input[type="time"] {
    border: 1px solid #E2E8F0 !important; /* Subtle border */
    color: #2D3748 !important; /* Dark Gray text */
    border-radius: 6px !important; /* Rounded corners */
}

textarea:focus,
input:focus {
    border-color: #7E5AFF !important; /* Purple border on focus */
    box-shadow: 0 0 5px rgba(126, 90, 255, 0.5) !important; /* Purple glow */
}

/* Upload Container */
.upload-label {
    color: #2D3748 !important; /* Dark Gray text */
    border-radius: 8px !important; /* Rounded upload label corners */
}

.upload-icon {
    color: #7E5AFF !important; /* Purple for upload icon */
}

/* Footer and Logout */
.footer-nav .nav-link {
    color: #A0AEC0 !important; /* Light Gray for logout link */
    border-radius: 6px !important; /* Rounded corners for footer links */
}

.footer-nav .nav-link:hover {
    background: linear-gradient(to right, #7E5AFF, #5B3FFF) !important; /* Purple gradient on hover */
    color: #FFFFFF !important;
}

/* Warning Section */
.warning {
    border: 1px solid #FF5F5F !important; /* Red border for warning section */
    border-radius: 8px !important; /* Rounded corners */
    padding: 0.5rem !important;
}

.btn-login:hover {
    background-color: #444; /* Keep the same background color */
    color: #fff;           /* Keep the same text color */
    transition: none;      /* Disable transition effect */
}

#product_information_label {
    text-align: left; /* Align the label to the left */
    margin-bottom: 0; /* Remove the bottom margin */
    display: block; /* Ensure the label takes the full width */
    font-weight: bold;
}

#company_info_label {
    text-align: left; /* Align the label to the left */
    margin-bottom: 0; /* Remove the bottom margin */
    display: block; /* Ensure the label takes the full width */
    font-weight: bold;
}

       /* Custom Styling for Accordion */
       .accordion-button {
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none;
        border: none;
        font-weight: 500;
    }

    .accordion-button:focus {
        box-shadow: none !important;
    }

    .accordion-button:not(.collapsed) {
        color: inherit;
        background-color: transparent !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Custom shadow for selected */
    }

    .accordion-item {
        border: none;
    }

    .icon-label {
        display: flex;
        align-items: center;
        font-weight: 500;
    }

    .icon-label i {
        margin-right: 0.5rem;
        font-size: 1.2rem;
        color: #6c757d; /* Icon color */
    }

    /* Centered Train Your Agent Heading */
    .section-title {
        text-align: center;
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }

    /* Support Info Center Alignment */
    .info-note {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    .info-note i {
        margin-right: 0.5rem;
        color: #6c757d; /* Info icon muted color */
    }

    .info-note p {
        margin: 0;
        color: #6c757d;
        font-size: 1rem;
    }

    .agent-photo {
        width: 40px; /* Adjust width for half an inch */
        height: 40px; /* Adjust height for half an inch */
        border-radius: 50%; /* Make it a perfect circle */
        object-fit: cover; /* Ensure the image fits without distortion */
        border: 2px solid #ddd; /* Add a light border for visual clarity */
        margin-bottom: 0.5rem; /* Space below the image */
    }

/* Minimum width for the Members Section */
.members-section {
    min-width: 800px; /* Adjust the width as needed */
    overflow-x: auto; /* Allow horizontal scrolling if the content exceeds the width */
}

.logo-img {
    max-height: 49px; /* Confine the height to a maximum of 40px */
    max-width: 90%; /* Ensure it doesn’t overflow the width of its container */
    object-fit: contain; /* Maintain aspect ratio and fit within the boundaries */
}

/* Chrome, Safari, Opera */
.form-control.textarea-large::-webkit-input-placeholder, .form-control.textarea-small::-webkit-input-placeholder {
    font-size: 14px;
  }
  
  /* Firefox */
  .form-control.textarea-large::-moz-placeholder,  .form-control.textarea-small::-moz-placeholder {
    font-size: 14px;
  }
  
  /* Microsoft Edge / Internet Explorer 10-11 */
  .form-control.textarea-large:-ms-input-placeholder, .form-control.textarea-small:-ms-input-placeholder {
    font-size: 14px;
  }
  
  /* Microsoft Edge older versions */
  .form-control.textarea-large::-ms-input-placeholder, .form-control.textarea-small::-ms-input-placeholder {
    font-size: 14px;
  }
  
  /* Standard placeholder for modern browsers */
  .form-control.textarea-large::placeholder,  .form-control.textarea-small::placeholder {
    font-size: 14px;
  }

  .button-container .button {
    /* Set a fixed height */
    height: 40px;  
    line-height: 0%;
  }

  /* Terms of Service disclaimer text */
.tos-disclaimer {
    font-size: 0.875rem;       /* Slightly smaller font than normal text */
    color: #555;               /* Muted text color */
    margin-top: 0.5rem;
  }
  
  .tos-disclaimer a {
    color: #555555 !important;         
    text-decoration: underline !important;
  }
  
  .tos-disclaimer a:hover {
    text-decoration: underline;
  }
      /* Scope all styles to #section7 */
      #section7 .schedule-container {
        display: flex;
        gap: 20px;
        align-items: stretch; /* Force equal box heights */
        margin-top: 3rem;
      }
  
      /* Each of the two main columns (Test Call, Schedule) */
      #section7 .schedule-container > div {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
  
      /* Common box styling */
      #section7 .test-call-box,
      #section7 .calendar-box {
        background-color: #f9f9f9;
        border-radius: 4px;
        padding: 15px;
        flex: 1; /* Fill vertical space */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
      }
  
      #section7 .mb-4 {
        margin-bottom: 1rem;
      }
  
      #section7 .note {
        font-size: 0.9rem;
        color: #555;
        margin-top: 0.75rem;
      }
  
      #section7 .optional {
        font-weight: normal;
        font-style: italic;
        font-size: 0.9rem;
        color: #888;
      }
  
      /* Tooltip Container */
      #section7 .info-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
        margin-left: 8px;
        color: #007bff;
      }
  
      #section7 .info-container .tooltip-text {
        display: none;
        position: absolute;
        left: -150px;
        top: 120%;
        width: 220px;
        background-color: #6C757D;
        color: #fff;
        padding: 8px;
        border-radius: 4px;
        font-size: 0.85rem;
        z-index: 9999;
      }
  
      #section7 .info-container:hover .tooltip-text {
        display: block;
      }
  
      /* Inline label + select */
      #section7 .inline-form-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0.75rem; 
      }

      /* Style only affects the custom audio player of chat transcript */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
}


.custom-audio-player audio {
    flex-grow: 1; /* Ensures the audio player stretches */
}


/* Carousel container styles */
.agent-carousel-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.agent-cards-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.agent-cards {
    display: flex;
    transition: transform 0.3s ease;
    width: max-content;
    padding: 0 5px;
}

/* Arrow button styles */
.carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 5;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    margin: 0 8px;
}

.carousel-arrow:hover {
    background-color: #e0e0e0;
}

.carousel-arrow i {
    font-size: 20px;
    color: #444;
}

/* Agent card styles - ensure they have fixed width for proper scrolling */
.agent-card {
    min-width: 180px;
    max-width: 180px;
    margin: 0 8px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: white;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Keep your existing agent card styles and add these for proper scrolling */
.agent-card.selected {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}

/* Test Agent Page Specific Styles */

/* Main container for test agent page */
.test-agent-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* Top sections side by side */
.test-agent-container .top-sections-container {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
}

/* Section styling for test agent page */
.test-agent-container .agent-selection-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    flex: 1;
    width: 50%;
    min-width: 0;
}

.test-agent-container .test-call-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    flex: 1;
    width: 50%;
    min-width: 0;
}

.test-agent-container .recent-tests-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Section titles and descriptions */
.test-agent-container .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2D3748;
    margin-bottom: 8px;
    align-items: center;
}

.test-agent-container .section-description {
    color: #718096;
    margin-bottom: 25px;
    font-size: 1rem;
}

/* Test agent specific agent cards - smaller size */

.test-agent-card {
    min-width: 140px;
    max-width: 140px;
    margin: 0 6px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: white;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.test-agent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(126, 90, 255, 0.15);
}

.test-agent-card.selected {
    border-color: #7E5AFF;
    box-shadow: 0 0 0 3px rgba(126, 90, 255, 0.2);
}

.test-agent-card .checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #28a745;
    display: none;
}

.test-agent-card.selected .checkmark {
    display: block;
}

.test-agent-card .agent-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.test-agent-card .agent-description {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    line-height: 1.3;
}

.test-agent-card .play-button {
    background: none;
    border: none;
    font-size: 20px;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s;
    margin: 8px 0;
}

.test-agent-card .play-button:hover {
    color: #0056b3;
}

/* Test call form styling */
.test-agent-container .test-call-form {
    max-width: 100%;
    margin: 0 auto;
}

.test-agent-container .test-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.test-agent-container .form-group {
    margin-bottom: 20px;
    margin-top: 20px;
}

.test-agent-container .form-label {
    font-weight: 600;
    color: #2D3748;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.test-agent-container .form-label i {
    margin-right: 8px;
    color: #7E5AFF;
}

.test-agent-container .form-control,
.test-agent-container .form-select {
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background-color: #fff;
}

.test-agent-container .form-control:focus,
.test-agent-container .form-select:focus {
    border-color: #7E5AFF;
    box-shadow: 0 0 0 3px rgba(126, 90, 255, 0.1);
    outline: none;
}

.test-agent-container .form-text {
    font-size: 0.85rem;
    color: #718096;
    margin-top: 5px;
}

/* Test info box */
.test-agent-container .test-info-box {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
}

.test-agent-container .info-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: #2D3748;
}

.test-agent-container .info-list {
    margin: 0;
    padding-left: 20px;
    color: #4a5568;
}

.test-agent-container .info-list li {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* Action buttons */
.test-agent-container .action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.test-agent-container .action-buttons .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-agent-container .action-buttons .btn-primary {
    background: linear-gradient(135deg, #7E5AFF 0%, #5B3FFF 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(126, 90, 255, 0.3);
}

.test-agent-container .action-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #5B3FFF 0%, #7E5AFF 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(126, 90, 255, 0.4);
}

.test-agent-container .action-buttons .btn-outline-secondary {
    border: 2px solid #e2e8f0;
    color: #4a5568;
    background-color: transparent;
}

.test-agent-container .action-buttons .btn-outline-secondary:hover {
    background-color: #f7fafc;
    border-color: #cbd5e0;
    color: #2d3748;
}

/* Recent test calls section */
.test-agent-container .recent-tests-container {
    max-height: 400px;
    overflow-y: auto;
}

.test-agent-container .test-call-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #fafafa;
    transition: all 0.2s ease;
}

.test-agent-container .test-call-item:hover {
    background-color: #f0f4f8;
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.test-agent-container .test-call-info {
    flex: 1;
}

.test-agent-container .test-call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.test-agent-container .agent-name {
    font-weight: 600;
    color: #2d3748;
}

.test-agent-container .test-date {
    font-size: 0.85rem;
    color: #718096;
}

.test-agent-container .test-call-details {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #4a5568;
}

.test-agent-container .phone-number {
    font-family: 'Courier New', monospace;
}

.test-agent-container .test-call-status {
    margin-left: 20px;
}

.test-agent-container .status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.test-agent-container .status-initiated {
    background-color: #e6f3ff;
    color: #0066cc;
}

.test-agent-container .status-completed {
    background-color: #e6ffe6;
    color: #009900;
}

.test-agent-container .status-failed {
    background-color: #ffe6e6;
    color: #cc0000;
}

.test-agent-container .status-pending {
    background-color: #fff3cd;
    color: #856404;
}

/* No tests message */
.test-agent-container .no-tests-message {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
}

.test-agent-container .no-tests-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #cbd5e0;
}

.test-agent-container .no-tests-message p {
    margin: 0;
    font-size: 1.1rem;
}

/* Agent preview in modal */
.test-agent-container .agent-preview {
    text-align: center;
    padding: 10px;
}

.test-agent-container .agent-preview img {
    border: 3px solid #e2e8f0;
}

.test-agent-container .agent-preview p {
    margin-bottom: 10px;
    text-align: left;
}

/* Test confirmation dialog */
.test-agent-container .test-confirmation {
    text-align: left;
    padding: 10px;
}

.test-agent-container .test-confirmation p {
    margin-bottom: 8px;
    font-size: 1rem;
}

/* Custom styling for custom scenario textarea */
.test-agent-container #custom_scenario_group {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
    }
}

/* Responsive design for test agent page */
@media (max-width: 768px) {
    .test-agent-container .top-sections-container {
        flex-direction: column;
    }
    
    .test-agent-container .agent-selection-section,
    .test-agent-container .test-call-section {
        max-width: 100%;
    }
    
    .test-agent-card {
        min-width: 120px;
        max-width: 120px;
    }
}