{
%
load
static
%
}

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

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    background-color: rgb(244, 245, 244);
    color: #333;
}

.container {
    width: 80%;
    margin: 0 auto;
    max-width: 1200px;
}

/* Header Styles */
header {
    background-color: none; /* Removes the header background */
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0;
    margin-bottom: 20px;
}

header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

/* Navigation styles */
nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px; /* Adds more space between the logo and nav */
}

nav ul li {
    margin-right: 30px; /* Adjusts the space between nav items */
}

nav ul li a {
    text-decoration: none;
    color: #666;
    font-weight: 600; /* Increase font weight for more emphasis */
    font-size: 18px; /* Increase the size of the text */
    padding: 10px 0; /* Adds padding to increase clickable area */
    transition: color 0.3s, border-bottom 0.3s;
    position: relative;
}

/* Change color and add dot for active/selected item */
nav ul li a.active {
    color: rgb(59, 86, 85); /* Darker color for active item */
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: rgb(59, 86, 85); /* Color for the dot */
    border-radius: 50%;
    bottom: -5px; /* Position the dot below the text */
    left: 50%;
    transform: translateX(-50%);
}

/* Hover effects */
nav ul li a:hover {
    color: rgb(59, 86, 85);
}


/* Green Headline Styling */
.headline {
    font-size: 24px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Matches the green color */
    margin-bottom: 10px; /* Adds some space below the headline */
    text-align: left; /* Ensures the headline is aligned to the left */
}

html, body {
    height: 100%;
    margin: 0;
}

/* Logo Styling */
.logo {
    max-height: 50px; /* Adjust the height based on your design */
    width: auto; /* Maintain aspect ratio */
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px; /* Add some space between the logo and nav */
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ensure main content takes available space */
main {
    flex-grow: 1;
}

/* Footer styles */
footer {
    background-color: #fafafa;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #eaeaea;
    margin-top: 40px;
}

footer p {
    color: #888;
    font-size: 14px;
}

/* Cards Container */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

/* Card Styling */
.card {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: calc(33.33% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    min-height: 150px; /* Restore previous consistent height */
}

/* Title Styling (Top Left) */
.card-title {
    font-size: 14px;
    color: #888888; /* Gray */
    font-weight: 500;
    margin-bottom: 10px;
}

/* Value and Icon Container */
.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align card value and icon */
    flex-grow: 1; /* Ensure content fills the card vertically */
}

/* Value Styling (Big Number) */
.card-value {
    font-size: 48px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Green, same as the tab color */
    text-align: left;
    line-height: 1; /* Ensure no extra height around the value */
}

/* Icon Styling (Right-Aligned Icon) */
.card-icon {
    font-size: 48px;
    color: #cccccc; /* Light gray */
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card i.icon {
    font-size: 24px;
    color: #3498db;
    margin-bottom: 10px;
}

.card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.card p {
    color: #666;
}

/* Buttons */
/* Button Styling */
button, .button {
    background-color: rgb(59, 86, 85); /* Green button background */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

button:hover, .button:hover {
    background-color: #2d7169; /* Slightly darker green on hover */
}

.button-disabled {
    background-color: #bdc3c7; /* Light grey */
    color: #7f8c8d;
    cursor: not-allowed;
}

/* Table wrapper with horizontal scroll */
.table-scrollable {
    overflow-x: auto; /* Allow horizontal scrolling */
    margin-bottom: 20px; /* Space below the table */
}

.table-scrollable table {
    min-width: 1000px; /* Adjust this width based on your table content */
    width: 100%; /* Ensure the table takes full width */
    border-collapse: collapse;
}

/* Table layout improvements */
.table-scrollable th, .table-scrollable td {
    padding: 12px;
    border-bottom: 1px solid #eaeaea;
    text-align: left;
}

.table-scrollable th {
    background-color: #ecf0f1;
    font-weight: 700;
    color: #333;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid #eaeaea;
    text-align: left;
    white-space: nowrap;
}

th {
    background-color: #ecf0f1;
    font-weight: 700;
    color: #333;
}

td {
    color: #555;
}

td {
    vertical-align: top;
}

/* FontAwesome for Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');


/* Form Styling */
.form-container {
    margin-bottom: 20px;
}

/* Form Card Styling */
.form-card {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.form-card h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* Form Headings */
.form-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: rgb(59, 86, 85); /* Green color similar to tab color */
    margin-bottom: 20px;
}

/* Form Input Styling */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    font-size: 14px;
    color: #555;
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="number"], textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
    border-color: rgb(59, 86, 85); /* Green focus color */
    outline: none;
}

/* Button Styling */
.form-check-input {
    margin-right: 10px;
}

/* Button Styling */
button {
    background-color: #3498db; /* Soft pastel blue */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

button:hover {
    background-color: #2980b9; /* Slightly darker blue on hover */
}

/* Button Danger (for delete) */
.button-danger {
    background-color: #e74c3c;
}

.button-danger:hover {
    background-color: #c0392b;
}

/* Table Styling */
.criteria-list table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.criteria-list th, td {
    padding: 12px;
    border-bottom: 1px solid #eaeaea;
    text-align: left;
}

.criteria-list th {
    background-color: #ecf0f1;
    font-weight: 700;
    color: #333;
}

.criteria-list td {
    color: #555;
}

.criteria-list .button {
    background-color: #3498db;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.criteria-list .button:hover {
    background-color: #2980b9;
}

.button-group {
    display: flex;
    gap: 10px; /* Add spacing between the buttons */
    margin-top: 20px;
}

/* Ensure buttons have consistent size */
.button-group .button, .button-group .button-danger {
    width: 150px; /* Set a fixed width */
    text-align: center; /* Make sure text is centered */
    padding: 10px 0; /* Consistent padding */
    display: inline-block; /* Prevent the button from stretching */
}

/* Interview Container */
.interview-container {
    display: flex;
    gap: 20px;
    height: 100%;
}

/* Video Section: AWS video and User video */
.video-section {
    flex: 1;
    max-width: 33.33%; /* One-third of the screen */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* AI Video */
#ai-video, #user-video {
    width: 100%; /* Ensure both videos have the same width */
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

/* Remove the card style from user video */
#user-video {
    border: none;
    box-shadow: none;
}

/* Chat Section */
.chat-section {
    flex: 2; /* Two-thirds of the screen */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Chat Box (height should match the height of both videos combined) */
.chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 8px;
    height: calc(100vh - 40px); /* Ensure it covers the height of both videos */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Chat Message Styles (rounded rectangles) */
.message {
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
    max-width: 70%;
    display: block;
    clear: both;
    word-wrap: break-word;
}

.user {
    background-color: #3498db;
    color: white;
    float: right;
    text-align: right;
}

.ai {
    background-color: #ecf0f1;
    color: #333;
    float: left;
    text-align: left;
}

/* Input Section */
.input-section {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}

.input-section input {
    flex: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 16px;
}

.input-section button {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background-color: #3498db;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.input-section button:hover {
    background-color: #2980b9;
}

/* Modern Icons for Send and Mic buttons */
button i.fas {
    font-size: 20px;
}

#send-button {
    background-color: #3498db;
}

#mic-button {
    background-color: #e74c3c;
}

#mic-button:hover {
    background-color: #c0392b;
}

/* Login Form Container */
.login-form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 100px auto;
    text-align: center;
}

/* Login Form Heading */
.login-form-container h2 {
    font-size: 24px;
    color: rgb(59, 86, 85);
    margin-bottom: 20px;
}

.login-form-container form {
    display: flex;
    flex-direction: column;
}

.login-form-container button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

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

.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.login-card input {
    margin-bottom: 15px; /* Adds some space between inputs */
}

/* Unique styles for the Criteria List */

/* Unique styles for the Criteria List */

/* Criteria List Header */
.criteria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.criteria-list-title {
    font-size: 24px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Green color */
}

/* Add Criteria Button */
.add-criteria-btn {
    background-color: transparent;
    border: 1px solid rgb(59, 86, 85); /* Green border */
    color: rgb(59, 86, 85); /* Green color */
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px; /* Adds some space below the headline */
}

.add-criteria-btn:hover {
    background-color: rgb(59, 86, 85); /* Green background on hover */
    color: #fff;
}

/* Cards Container for Criteria List */
.criteria-list.cards-container-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

/* Criteria Card Styling */
.criteria-card {
    background-color: rgb(59, 86, 85); /* Green background */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: calc(33.33% - 20px); /* Responsive width for cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

/* Criteria Card Title */
.criteria-title {
    font-size: 16px;
    color: #f0f0f0; /* Lighter text */
    font-weight: bold;
    margin-bottom: 10px;
}

/* Criteria Card Order */
.criteria-order {
    font-size: 14px;
    color: #ffffff; /* White for better readability */
    font-weight: normal;
    margin-bottom: 10px;
}

/* Criteria Card Content (actions) */
.criteria-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Criteria Action Icons */
.criteria-actions {
    display: flex;
    justify-content: flex-start;
    gap: 15px; /* Spacing between action icons */
}

.criteria-actions a {
    color: #f0f0f0; /* Lighter color for icons */
    font-size: 20px; /* Icon size */
    transition: color 0.3s ease;
}

.criteria-actions a:hover {
    color: #ddd; /* Hover color for icons */
}

/* Popup Overlay */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure it's above other content */
}

/* Popup Form Styling */
.popup-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    z-index: 1001; /* Above the overlay */
    display: none; /* Initially hidden */
}

/* Popup Content */
.popup-content h3 {
    font-size: 20px;
    color: rgb(59, 86, 85); /* Green title */
    margin-bottom: 20px;
}

/* Popup Buttons */
.popup-form .button {
    background-color: rgb(59, 86, 85); /* Green button */
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.popup-form .button:hover {
    background-color: #2d7169; /* Darker green on hover */
}

/* Close Button (X) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.close-btn:hover {
    color: #555; /* Slightly lighter on hover */
}

/* Style for the delete message */
#delete-message {
    margin-bottom: 20px; /* Adjust the value as needed for spacing */
    font-size: 16px; /* Optional: adjust the font size if needed */
    color: #333; /* Optional: change color for better visibility */
}

/* Add spacing above the delete button */
#delete-criteria-form {
    margin-top: 20px; /* Adds space above the delete button */
}

/* Container for the Create Interview page */
.create-interview-container {
    background-color: #f8f9fa; /* Light background */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Create Interview Title */
.create-interview-title {
    font-size: 28px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Dark green for the title */
    margin-bottom: 20px;
    text-align: center; /* Center the title */
}

/* Form Group Styling */
.create-interview-form-group {
    margin-bottom: 20px;
}

/* Form Label Styling */
.create-interview-form-group label {
    font-size: 16px;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 10px;
}

/* Input Field Styling */
.create-interview-form-group input[type="text"],
.create-interview-form-group input[type="number"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.create-interview-form-group input:focus {
    border-color: rgb(59, 86, 85); /* Green focus border */
    outline: none;
}

/* Checkbox/Radio Button Styling */
.create-interview-form-check {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.create-interview-form-check input {
    margin-right: 10px;
}

.create-interview-form-check label {
    font-size: 16px;
    color: #555;
    font-weight: 500;
}

/* Submit Button Styling */
.create-interview-button {
    background-color: rgb(59, 86, 85); /* Green background */
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    display: block;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.create-interview-button:hover {
    background-color: #2d7169; /* Darker green on hover */
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
}

input:focus {
    border-color: rgb(59, 86, 85);
    outline: none;
}

/* Error Message */
.error-message {
    color: red;
    font-size: 14px;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
    .criteria-box {
        font-size: 12px; /* Smaller text size for smaller screens */
    }

    .criteria-description {
        font-size: 12px; /* Adjust font size for descriptions on smaller screens */
    }

    .create-interview-container {
        padding: 20px;
    }

    .create-interview-title {
        font-size: 24px;
    }

    .create-interview-form-group input {
        font-size: 14px;
    }

    .create-interview-button {
        font-size: 14px;
    }
}


/* The background image is applied only to the login page */
.login-page {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Specific styles for the login form */
.login-form-container {
    background-color: rgba(255, 255, 255, 0.8); /* Slight transparency for readability */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    text-align: center;
}

/* Form Group Styling */
.login-form-group {
    margin-bottom: 20px;
}

/* Form Label Styling */
.login-form-group label {
    font-size: 16px;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 10px;
}

/* Input Field Styling */
.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.login-form-group input:focus {
    border-color: rgb(59, 86, 85); /* Green focus border */
    outline: none;
}

/* Error Message Styling */
.login-error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

/* Submit Button Styling */
.login-button {
    background-color: rgb(59, 86, 85); /* Green background */
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 20px;
}

.login-button:hover {
    background-color: #2d7169; /* Darker green on hover */
}

/* Remove underline from the logout button */
.logout-btn {
    text-decoration: none; /* Removes the underline */
}

/* Smaller text for "out of" and interview limit */
.small-text {
    font-size: 0.5em; /* Make the text smaller */
    vertical-align: bottom; /* Align the bottom to the number */
}

/* Adjust spacing for the username */
.profile-username {
    margin-top: -10px; /* Moves the username slightly closer to the Profile Info title */
    margin-bottom: 20px; /* Adds more space below the username */
}

/* Adjust spacing for the username */
.profile-language {
    margin-bottom: 40px; /* Adds more space below the username */
}

.profile-username i,
.profile-language i {
    margin-right: 5px; /* Adjust spacing as needed */
    color: rgb(59, 86, 85); /* Match the color to your theme */
    vertical-align: middle; /* Center-align icon with text */
}


/* Responsive design for small screens */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    /* Adjust the navigation items for mobile */
    nav ul {
        flex-direction: column; /* Stack navigation items vertically */
        align-items: flex-start; /* Align the items to the left */
        margin: 10px 0;
    }

    nav ul li {
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 15px; /* Add more vertical margin */
    }

    nav ul li a {
        font-size: 16px; /* Reduce font size for smaller screens */
        padding: 8px 0; /* Reduce padding */
    }

    .logo {
        max-height: 40px; /* Scale down the logo for mobile */
    }

    /* Make the table scrollable on mobile */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    table th, table td {
        white-space: nowrap;
    }

    .cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Decreased the gap from 20px to 10px */
        margin-bottom: 20px;
    }

    /* Display one card per row */
    .cards-container-criteria {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Keep a smaller gap between the cards */
    }

    /* Ensure the cards take up full width on mobile */
    .criteria-card {
        width: 100%; /* Full width for mobile */
    }

    /* Move the "Add Criteria" button below the existing criteria */
    .criteria-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .add-criteria-btn {
        margin-top: 20px;
        align-self: flex-start;
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    .card {
        width: 100%;
    }

    .login-card, .form-card, .create-interview-container {
        padding: 20px;
    }

    /* Adjust the navigation items for mobile */
    nav ul {
        flex-direction: column; /* Stack navigation items vertically */
        align-items: flex-start; /* Align the items to the left */
        margin: 15px 0;
        margin-left: 10px; /* Adjust the left margin */
    }

    nav ul li {
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 15px; /* Add more vertical margin */
    }

    nav ul li a {
        font-size: 16px; /* Reduce font size for smaller screens */
        padding: 8px 0; /* Reduce padding */
    }
}


.exit-section {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px; /* Add some space below */
}

.timer-section {
    text-align: right; /* Right align the timer */
    margin-bottom: 10px;
    font-size: 16px;
    color: rgb(59, 86, 85); /* Green, consistent with other elements */
}

#time-remaining {
    font-weight: bold;
}

/* Styles for the status box */
.status-box {
    padding: 5px 10px;
    border-radius: 15px; /* Rounded corners */
    font-size: 12px;
    color: white;
    text-align: center;
    display: inline-block;
}

/* Colors for each status */
.status-not-taken {
    background-color: #ff6b6b; /* Red */
}

.status-ongoing {
    background-color: #f0ad4e; /* Orange */
}

.status-finished {
    background-color: #5cb85c; /* Green */
}

/* Modal background */
#messageModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other content */
}

/* Modal content */
#modalContent {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80%; /* Ensure modal doesn't exceed screen height */
    overflow-y: auto; /* Scroll if content is too long */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}


#closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* Modal Title - Consistent with your existing headline styles */
h3.headline {
    font-size: 24px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Matches your green color */
    margin-bottom: 20px; /* Adds space below the headline */
    text-align: left; /* Ensures the headline is aligned to the left */
    padding-bottom: 5px;
    border-bottom: 1px solid #eaeaea;
}

/* Chat Box inside the Modal */
#messageContent {
    max-height: 300px;
    overflow-y: auto;
}

.user {
    background-color: rgb(59, 86, 85); /* Green for user message */
    color: white;
    text-align: right;
    max-width: 60%;
    padding: 10px;
    border-radius: 12px; /* Match radius with chat-box */
    margin: 10px 0;
    float: right;
    clear: both;
    word-wrap: break-word;
}

.ai {
    background-color: #ecf0f1;
    color: #333;
    text-align: left;
    max-width: 60%;
    padding: 10px;
    border-radius: 12px; /* Match radius with chat-box */
    margin: 10px 0;
    float: left;
    clear: both;
    word-wrap: break-word;
}

/* Rounded rectangle style for criteria and scores */
/* Criteria box style */
.criteria-box {
    height: 40px; /* Set a fixed height */
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Vertically center the content */
    justify-content: flex-start; /* Horizontally align the content (optional, adjust as needed) */
    background-color: rgb(59, 86, 85); /* Blue background for criteria boxes */
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px; /* Rounded corners */
    margin: 5px 0; /* Space between the boxes */
    font-size: 14px;
    font-weight: bold;
}


/* Criteria descriptions stacked vertically */
.criteria-description {
    display: block; /* Each description will take the full width and stack */
    font-size: 14px;
    color: #333;
    margin-bottom: 10px; /* Space between descriptions */
}

/* Criteria description button */
.description-button {
    height: 40px; /* Set a fixed height */
    display: flex; /* Use Flexbox for alignment */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Center the content horizontally */
    background-color: rgb(59, 86, 85); /* Orange button for descriptions */
    color: white;
    padding: 5px 10px;
    border-radius: 15px; /* Rounded corners */
    margin: 5px 0; /* Space between the boxes */
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}


.description-button:hover {
    background-color: #e67e22; /* Darker orange on hover */
}

/* Modal for criteria description */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Stay on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
}

.modal-content {
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border-radius: 12px;
    width: 80%;
    max-width: 600px; /* Maximum width of the modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
}

#criteriaName {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

#criteriaDescription {
    font-size: 16px;
    color: #555;
}


/* View Messages Button */
.view-messages-button {
    height: 40px; /* Set the same height as criteria buttons */
    display: block;
    background-color: #f39c12; /* Use orange like the description button */
    color: white;
    padding: 5px 10px;
    border-radius: 15px; /* Rounded corners */
    margin: 5px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* Hover effect for View Messages Button */
.view-messages-button:hover {
    background-color: #e67e22; /* Darker orange on hover */
}

/* Enable word wrap for the description column */
.description-column {
    word-wrap: break-word; /* Allows long words to break and wrap onto the next line */
    word-break: break-word; /* Ensure long unbroken strings wrap properly */
    white-space: normal; /* Ensure that wrapping occurs */
    min-width: 300px; /* Set a minimum width to prevent excessive wrapping */
    max-width: 900px; /* Optional: Set a maximum width to control the text area */
}

/* Filter Form Styling */
.categorized-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 8px;
}

/* Filter Row Layout */
.filter-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* Expanded Card for Larger Width */
.expanded-card {
    flex: 1;
}

/* General Filter Card Styling with Rounded Rectangle */
.filter-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners for consistency */
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 80px; /* Ensures uniform card height */
}

.full-width-card {
    flex: 1;
    max-width: 100%;
}

/* Card Header */
.filter-card-header {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* Consistent Layout for Filter Card Content */
.filter-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon Styling for Consistent Appearance */
.filter-icon {
    font-size: 18px;
    color: rgb(59, 86, 85);
    flex-shrink: 0;
}

/* Input Fields in Filter Cards */
.form-input {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Score Range Layout for Side-by-Side Min and Max Inputs */
.score-range {
    display: flex;
    gap: 5px;
    width: 100%;
}

.score-input {
    width: 50%;
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.small-input {
    width: 50px;
    text-align: center;
}

.range-separator {
    font-size: 16px;
    color: #666;
    font-weight: bold;
}

/* Full Width Input for Search */
.full-width-input {
    width: 100%;
}

/* Action Buttons Styling */
.filter-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

.apply-button {
    background-color: rgb(59, 86, 85);
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.apply-button:hover {
    background-color: #2d7169;
}

.clear-button {
    text-decoration: none;
    color: white;
    background-color: #e74c3c; /* Red background for clear button */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.clear-button:hover {
    background-color: #c0392b; /* Darker red on hover */
}

.action-icon {
    font-size: 16px;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        gap: 15px;
    }

    .filter-card {
        width: 100%;
    }
}


.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.toggle-button {
    background-color: rgb(59, 86, 85); /* Match button background color */
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s;
    margin-bottom: 10px;
    /* Adds some space below the headline *
   }

   .toggle-button:hover {
       background-color: #2d7169; /* Darker green on hover */
}

.filter-container {
    display: none; /* Filter section initially visible */
    margin-bottom: 20px; /* Adds space below the filter section */
}

.id-link {
    color: black; /* Sets the text color to black */
    text-decoration: none; /* Removes the underline */
}

.id-link:hover {
    color: darkgray; /* Optional: changes color on hover for better UX */
}

/* Wrapper for the Choices Section */
.choices-wrapper {
    background-color: #ffffff; /* White background for contrast */
    border: 1px solid #eaeaea; /* Light border for definition */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Inner padding for spacing */
    margin-bottom: 20px; /* Spacing below the wrapper */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Title Styling within Choices Wrapper */
.choices-title {
    font-size: 16px;
    font-weight: bold;
    color: rgb(59, 86, 85); /* Green color matching overall design */
    margin-bottom: 20px;
}

/* Choices Box Styling */
.choices-box {
    background-color: #f7f7f7; /* Light background to differentiate from popup */
    border: 1px solid #eaeaea;
    border-radius: 8px; /* Rounded corners */
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between added choices */
}

/* Add Choice Button */
.add-choice-btn {
    background-color: rgb(59, 86, 85); /* Green background */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.add-choice-btn:hover {
    background-color: #2d7169; /* Darker green on hover */
}

/* Style for Question Choices container */
.question-choices {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Enables horizontal scrolling */
    padding: 10px 0;
    margin-bottom: 15px; /* Adds space below the choices */
}

/* Individual Choice Box Styling */
.choice-box {
    background-color: rgba(255, 255, 255, 0.1); /* Transparent background */
    border: 1px solid #ffffff; /* White border */
    border-radius: 12px; /* Rounded corners */
    padding: 8px 12px;
    min-width: 120px; /* Minimum width to keep choices visible */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style for Text inside each Choice */
.choice-text {
    color: #ffffff; /* White text */
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap; /* Prevents line breaks within choices */
}


nav ul li a i {
    font-size: 14px; /* Small icon size for minimal look */
    color: inherit; /* Matches the tab title color */
    margin-right: 8px; /* Space between icon and title */
    vertical-align: middle; /* Aligns with text */
}

nav ul li a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
    font-size: 18px;
    padding: 10px 0;
    transition: color 0.3s;
    position: relative;
    display: inline-flex;
    align-items: center;
}

nav ul li a:hover {
    color: rgb(59, 86, 85); /* Hover color */
}

nav ul li a.active {
    color: rgb(59, 86, 85); /* Active tab color */
}

/* Button Group Styling */
.button-group {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 10px; /* Adds space between the buttons */
}

/* Optional: Adjust button padding for consistency */
.button-group .button {
    padding: 10px 20px; /* Uniform padding */
}

/* Profile Page Container */
.profile-page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Profile Headline */
.profile-headline {
    font-size: 24px;
    color: rgb(59, 86, 85);
    margin-bottom: 15px;
}

/* Profile Details */
.profile-details p {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* Initial Message Form */
.initial-message-form-container {
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 40px; /* Adds more space below the username */
}

.profile-submit-button {
    background-color: rgb(59, 86, 85);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.profile-submit-button:hover {
    background-color: #2d7169;
}

/* Success Message */
.profile-success-message {
    color: #4caf50;
    font-size: 14px;
    margin-top: 10px;
}

/* Profile Stats Section */
.profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.profile-stat-card {
    flex: 1;
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eaeaea;
}

.profile-stat-label {
    font-size: 16px;
    color: #888;
}

.profile-stat-value {
    font-size: 24px;
    font-weight: bold;
    color: rgb(59, 86, 85);
}

/* Profile Success Message Styling */
.profile-success-message {
    color: #4caf50;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Text Area Styling for Consistency */
.initial-message-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Enable auto-height adjustment */
}


/* Bottom menu bar for mobile */
@media (max-width: 768px) {
    .bottom-menu-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background-color: white;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        z-index: 1000;
    }

    .bottom-menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        font-size: 24px; /* Match icon size */
        transition: color 0.3s;
    }

    .bottom-menu-item i {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .bottom-menu-item.create {
        color: rgb(59, 86, 85); /* Green color */
        font-size: 50px; /* Adjust container font size for alignment */
    }

    .bottom-menu-item.create:hover {
        color: #2d7169; /* Darker green on hover */
    }

    .bottom-menu-item.active,
    .bottom-menu-item:hover {
        color: rgb(59, 86, 85);
    }

    /* Hide the main navigation for mobile */
    header nav {
        display: none;
    }

    .top-right-icons {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        gap: 30px; /* Increased gap */
    }

    .top-right-icons a {
        text-decoration: none;
        color: #666;
        font-size: 24px;
        transition: color 0.3s;
    }

    .top-right-icons a:hover {
        color: rgb(59, 86, 85);
    }
}

@media (min-width: 768px) {
    .top-right-icons, .bottom-menu-bar {
        display: none;
    }
}

.connected-question {
    margin-bottom: 20px;
    padding: 10px 15px; /* Add padding for consistency with card content */
    background-color: rgb(244, 245, 244); /* Light background to match overall color scheme */
    border-radius: 4px; /* Slight rounding to match card corners */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.connected-question p {
    margin: 0;
    font-size: 14px; /* Slightly larger font for better readability */
    color: rgb(59, 86, 85); /* Match text color to theme */
    font-weight: bold; /* Make it stand out slightly */
}


/* TTS Options Section */
.tts-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.tts-option-box {
    background-color: #f8f9fa; /* Light background for non-selected TTS */
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    width: 200px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer; /* Make boxes clickable */
}

.tts-option-box:hover {
    transform: translateY(-2px); /* Slight hover lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Emphasized shadow on hover */
}

/* Active TTS Option Styling */
.tts-option-box.active {
    background-color: rgb(59, 86, 85); /* Green background for active option */
    color: white; /* White text for readability */
    border: none; /* No border for the active option */
    cursor: default; /* No pointer for the active option */
}

/* Display Name Styling */
.tts-option-name {
    font-weight: bold;
    color: inherit; /* Matches the text color (white for active, default for others) */
    margin-bottom: 10px;
}

/* Icons Container */
.tts-option-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Icon Buttons */
.tts-option-icon {
    background-color: white; /* White background for icons */
    color: rgb(59, 86, 85); /* Green color for icons */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.tts-option-icon:hover {
    background-color: rgb(59, 86, 85); /* Green background on hover */
    color: white; /* White icon color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.tts-option-box.active .tts-option-icon.select {
    display: none; /* Hide the select button for the active option */
}


.aivideo-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.aivideo-option-box {
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background-color: #f9f9f9;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.aivideo-option-box.active {
    border-color: rgb(59, 86, 85);
    background-color: #e6f4f1;
}

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

.aivideo-thumbnail {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide overflow to maintain uniform size */
    display: flex;
    align-items: center;
    justify-content: center;
}

.aivideo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image scales properly without distortion */
    border-radius: 8px;
}

.aivideo-option-buttons {
    margin-top: 10px;
}

.aivideo-select-button {
    background-color: rgb(59, 86, 85);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.aivideo-select-button:hover {
    background-color: #2d7169;
}

.selected-label {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}
/* Profile Tabs Container */
.profile-tabs {
    margin-bottom: 20px; /* Space between tabs and sections */
    display: flex;
    justify-content: flex-start; /* Align tabs to the left */
}

/* Profile Tabs List */
.profile-tabs-list {
    list-style: none;
    display: flex;
    gap: 15px; /* Space between tabs */
    margin: 0;
    padding: 0;
}

/* Profile Tab Buttons */
.profile-tab-button {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    font-size: 16px; /* Text size */
    font-weight: 600; /* Bold text */
    color: #666; /* Neutral gray text */
    background-color: #f9f9f9; /* Light background for tabs */
    padding: 10px 20px; /* Padding for button-like appearance */
    border-radius: 4px; /* Subtle rounding for buttons */
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for tabs */
}

/* Hover Effect for Tabs */
.profile-tab-button:hover {
    background-color: rgb(59, 86, 85); /* Green hover background */
    color: #ffffff; /* White text for contrast */
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
}

/* Icon Styling */
.profile-tab-button i {
    font-size: 18px; /* Icon size */
    color: inherit; /* Match icon color to text */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Active Tab Styling */
.profile-tab-button.active-profile-tab {
    background-color: rgb(59, 86, 85); /* Green background for active tab */
    color: #ffffff; /* White text */
    pointer-events: none; /* Disable clicks on active tab */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for active tab */
}

@media (max-width: 768px) {
    .profile-tabs {
        justify-content: center; /* Center the buttons */
    }

    .profile-tabs-list {
        flex-direction: row; /* Keep them in a row */
        gap: 20px; /* Space between the buttons */
        justify-content: center; /* Center align the buttons */
    }

    .profile-tab-button {
        width: auto; /* Remove full width */
        padding: 10px; /* Adjust padding for icons */
        justify-content: center; /* Center-align content inside buttons */
        background-color: transparent; /* Transparent background for minimal look */
        transition: color 0.3s, background-color 0.3s;
    }

    .profile-tab-button span {
        display: none; /* Hide the text */
    }

    .profile-tab-button i {
        font-size: 24px; /* Increase icon size */
        color: #666; /* Default color */
        transition: color 0.3s ease; /* Smooth transition */
    }

    .profile-tab-button:hover i {
        color: rgb(59, 86, 85); /* Green hover effect for icon */
    }

    .profile-tab-button.active-profile-tab {
        background-color: rgb(59, 86, 85); /* Green background for active tab */
    border-radius: 4px; /* Subtle rounding for buttons */
        padding: 12px; /* Add padding for active state */
    }

    .profile-tab-button.active-profile-tab i {
        color: #ffffff; /* White icon for active state */
    }
}

    #form-message-container {
        color: #666; /* Use default text color */
        font-size: 14px; /* Adjust font size if needed */
        padding-bottom: 10px; /* Add padding below the message */
        margin-top: 10px; /* Add margin above the message */
    }