#chatBox {
    overflow-y: auto; /* Enable vertical scrolling */
}
/*Audio Container*/
.audio-container {
    height: auto;
}
/*ImageModal*/
.imageContainer img {
    max-height: 200px; /* Adjust this size as needed */
    border: 1px solid black;
    background:white;
}
/*Fade in chat text*/
.fade-in {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
}

/*user-feedback-container*/
.user-feedback-container span{
    margin: 5px;
    padding: 5px;
}
.user-feedback-container span:hover{
    background-color:black;
    border-radius: 5px;
    cursor: pointer;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*Conversation Starters for chat*/

#conversation-starters-grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 5px;
    margin-bottom: 10px;
    width:95%;
}

    #conversation-starters-grid-container > button {
        margin: 1px;
        background-color: var(--surface--base);
        text-align: center;
        padding: 10px;
        min-height: 70px;
        border-radius: 10px;
    }
/*Conversation starters manage*/
.manage-conversation-starters-container {
    padding: 5px;
}

.update-conversation-starter-form {
    border: 2px solid black;
    background-color: var(--surface--base);
    padding: 5px;
    margin: 5px;
}

.manage-questions-container {
    padding: 5px;
}

.update-questions-form {
    border: 2px solid black;
    background-color: var(--surface--base);
    padding: 5px;
    margin: 5px;
}

.manage-resources-container {
    padding: 5px;
}

.update-resources-form {
    background-color: var(--surface--base);
    padding: 5px;
    margin: 5px;
}

.manage-chunks-container {
    padding: 5px;
}

.update-chunks-form {
    border: 2px solid white;
    background-color: var(--surface--base);
    padding: 5px;
    margin: 5px;
}

/* User list */
.arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.user-list-grid {
    display: grid;
    grid-template-areas:
        'user user user user user up'
        'user user user user user up'
        'user user user user user down'
        'user user user user user down';
    gap: 20px;
    border: 2px solid white;
    background-color: var(--surface--base);
    padding: 10px;
    margin: 10px;
    border-radius: 25px;
}

.user-list-item-arrow-up {
    grid-area: up;
}

.user-list-item-arrow-down {
    grid-area: down;
}

.user-list-item-user {
    grid-area: user;
}

.log-grid-container {
    display: grid;
    grid-template-areas:
        'id topic email role session-id timestamp limit relevance chunk cost'
        'question question question question question question question question question question'
        'answer answer answer answer answer answer answer answer answer answer'
        'instructions instructions instructions instructions instructions instructions instructions instructions instructions instructions'
        'retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info retrieved-info'
        'price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown price-breakdown'
        'evaluation evaluation evaluation evaluation evaluation evaluation evaluation evaluation evaluation evaluation';
    gap: 10px;
    border: 1px solid white;
    background-color: var(--surface--base);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

.log-grid-item-id {
    grid-area: id;
}

.log-grid-item-topic {
    grid-area: topic;
}

.log-grid-item-email {
    grid-area: email;
}

.log-grid-item-role {
    grid-area: role;
}

.log-grid-item-session-id {
    grid-area: session-id;
}

.log-grid-item-timestamp {
    grid-area: timestamp;
}

.log-grid-item-cost {
    grid-area: cost;
}

.log-grid-item-question {
    grid-area: question;
    border: 1px var(--surface--base);
}

.log-grid-item-answer {
    grid-area: answer;
    border: 1px var(--surface--base);
}

.log-grid-item-instructions {
    grid-area: instructions;
    border: 1px var(--surface--base);
}

.log-grid-item-retrieved-info {
    grid-area: retrieved-info;
    border: 1px solid var(--surface--base);
}

.log-grid-item-price-breakdown {
    grid-area: price-breakdown;
    border: 1px solid var(--surface--base);
}

.log-grid-item-limit {
    grid-area: limit;
}

.log-grid-item-relevance {
    grid-area: relevance;
}

.log-grid-item-chunk {
    grid-area: chunk;
}

.log-content {
    color: var(--color-neutral--grey-200);
}

.log-grid-item-answer-adherence-label {
    grid-area: answer-adherence-label;
}

.log-grid-item-answer-adherence {
    grid-area: answer-adherence;
}

.log-grid-item-answer-label {
    grid-area: answer-label;
}

.log-grid-item-answer {
    grid-area: answer;
}

.log-grid-item-retrieval-helpful-label {
    grid-area: retrieval-helpful-label;
}

.log-grid-item-retrieval-helpful {
    grid-area: retrieval-helpful;
}

.log-grid-item-evaluated-label {
    grid-area: evaluated-label;
}

.log-grid-item-evaluated {
    grid-area: evaluated;
}

.log-grid-item-update {
    grid-area: update;
}

.evaluation-container {
    border-radius: 5px;
    border: 2px solid grey;
    padding: 5px;
    grid-area: evaluation;
}

form > .card_pane {
    margin-bottom: 20px;
}

.quiz-report-grid-container {
    display: grid;
    grid-template-areas:
        'id user count duration'
        'summary summary summary summary'
        'items items items items';
    gap: 10px;
    border: 1px solid white;
    background-color: var(--surface--base);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

.quiz-report-grid-item-id {
    grid-area: id;
}

.quiz-report-grid-item-user {
    grid-area: user;
}

.quiz-report-grid-item-count {
    grid-area: count;
}

.quiz-report-grid-item-items {
    grid-area: items;
}

.quiz-report-grid-item-summary {
    grid-area: summary;
}

.quiz-report-grid-item-duration {
    grid-area: duration;
}

.manage-nav-grid-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto auto auto;
    background-color: var(--surface--base);
}

.topic-navigation-sidebar {
    margin: 5px;
    padding: 5px;
    background-color: var(--color--background);
    width: 15%;
    text-overflow: clip;
}

.topic-navigation-sidebar-item {
    margin: 10px;
    padding: 10px;
    background-color: var(--surface--base);
    width: 100%;
    text-overflow: clip;
}

    .topic-navigation-sidebar-item a {
        color: white;
    }

.question-options-container {
    background-color: var(--color-neutral--grey-50);
    border: 2px solid white;
}

.add-question-options-container {
    background-color: var(--color-neutral--grey-50);
    border: 2px solid white;
}

.question_item {
    padding: var(--spacing--xs);
    grid-column-gap: var(--spacing--s);
    grid-row-gap: var(--spacing--s);
    border: 1px solid var(--color-neutral--grey-500);
    background-color: var(--color-neutral--grey-600);
    border-radius: .25em;
    justify-content: flex-start;
    align-items: center;
    line-height: 100%;
    display: flex;
}

    .question_item:hover {
        border-color: var(--color-secondary--blue-700);
        background-color: var(--color-secondary--blue-800);
    }

    .question_item.image {
        grid-column-gap: var(--spacing--xs);
        grid-row-gap: var(--spacing--xs);
        flex-flow: column;
        flex: 1;
        justify-content: flex-start;
        align-items: center;
    }

    .question_item.selected {
        border-style: solid;
        border-color: var(--color-secondary--blue-700);
        background-color: var(--color-secondary--blue-800);
    }

    .question_item.text {
        padding-right: var(--spacing--m);
        border-width: 1px;
    }

.question_image {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    width: 100%;
    height: auto;
}

.question_label {
    width: var(--spacing--l);
    height: var(--spacing--l);
    border: 1px solid var(--color-secondary--blue-100);
    background-color: var(--color-secondary--blue-200);
    color: var(--color-secondary--blue-900);
    text-align: center;
    text-transform: uppercase;
    border-radius: .15em;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    line-height: 100%;
    display: flex;
}

.question_block {
    grid-column-gap: var(--spacing--xs);
    grid-row-gap: var(--spacing--xs);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fit, minmax(60px, 140px));
    grid-auto-columns: 1fr;
    display: flex;
}

    .question_block.image {
        flex-flow: row;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
    }

.question_image_wrapper {
    border-radius: var(--spacing--xxs);
    background-color: #fff;
}

.question_item.text {
    width: auto;
}

.question_block.image {
    flex-flow: wrap;
}

.question_image {
    max-height: 4rem;
}

.topic-nav-grid {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto;
    grid-gap: .5em;
    width: 110px;
    background-color: var(--surface-base);
    border-radius: .5em;
}
    .topic-nav-grid a:hover {
        background-color: var(--surface--base);
        border: 0px solid black;
        border-radius: .5em;
    }
.lottie-container {
    height:200px;
}

.sticky {
    position:sticky;
    top:0;
}
.layout-dev {
    height:100%;
    min-height:100vh;
}

/* Styles for the tags container */
.tags-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Styles for individual tags */
.tag {
    display: inline-block;
    background-color: #e0e0e0;
    color: black;
    background:white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
}

    /* Styles for the remove tag button */
    .tag .remove-tag {
        margin-left: 5px;
        color: #ff0000;
        text-decoration: none;
        cursor: pointer;
    }

/* Styles for the new tag input */
.new-tag-input {
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

    /* Change border color on focus */
    .new-tag-input:focus {
        border-color: #aaa;
    }


/* loading spinner*/

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 18px;
    font-family: Arial, sans-serif;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

#loaderMessage {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
#grade-test :hover{
    cursor:pointer;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


#latex-preview-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

#latex-preview-overlay-content {
    background-color: #333; /* Darker background for contrast */
    color: white;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    border-radius: 5px;
    width: 60%;
    max-width: 700px;
    position: relative;
}

#latex-preview-close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

    #latex-preview-close-button:hover,
    #latex-preview-close-button:focus {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

#latex-preview-output {
    font-size: 1.2em;
}

/* Optional: Add some space for the new button */
.latex-preview-button {
    margin-top: 10px;
}