:root {
    --home-header-height: 80px;
    --header-height: 61px;
    --header-height-chat: 100px;
    --citation-btn-bg-color: #491d8b;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background-color: var(--white);
}

*::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
    background-color: var(--white);
}

*::-webkit-scrollbar-thumb {
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: var(--gray-30);
}

html,
body {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s
}

header.home-page {
    display: flex;
    flex-direction: row;
}

header.home-page nav {
    flex: 1;
}

body {
    display: flex;
    flex-direction: column;
}

body:not(.home-page) {
    background-color: var(--gray-10);
}

main {
    margin-top: var(--header-height);
}

main.home-page {
    margin-top: var(--home-header-height);
}

main.dashboard,
main.collections-dashboard,
main.collection-view {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--header-height));
    background-color: white; /*#f9f9f9;*/
    color: black;
}

main
main.dashboard{
    height: 100%;
}

#main_search_box{
    position:relative;
}

main.genai-app{
    margin-top: 0;
}
#search-docs{

    padding-left: 40px;

    min-height: 0;

}
/* #chat-search{
    height:60px;
    resize: none;
    padding-left: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
    height: fit-content;
} */
/* #search-docs:focus{

    height:fit-content;
} */
.section-dashboard {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    flex: 3;
}
.section-dashboard-right-panel {
    display: flex;
    flex-direction: column;
    padding: 0 3.5rem;
    flex: 1.5;
}

.section-dashboard.collections {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.section-collection-view {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e1e1e1;
}

.section-collection-view.left {
    flex: 1;
    width: 50%;
    max-width:750px;
}

.section-collection-view.chat {
    flex: 1;
    /* max-width: 55%; */
}


.section-collection-view.gr_chat {
    flex: 5;
    max-width: 100%;
}


.section-collection-view.docs {
    flex: 1;
    width:45%;
    /*max-width: 50%;*/
}

.section-collection-view.right {
    flex: 1;
    width: 40%;
    max-width: 40%;
}

.collection-node-field {
    display: flex;
    flex-direction: column;
}

.collection-node-field .field-value {
    text-transform: none;
    margin-top: 4px;
}

.ai-tablist.collection-view-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.docs-container {
    height: calc(100vh - 25vh);
    overflow-y: auto;
}

.padding-lg {
    padding: 4rem 7rem 9rem 7rem;
}

.w3-modal {
    z-index: 9999 !important;
    padding-top: 50px;
}

.header-select {
    display: flex;
    align-items: center;
}

.header-collection-view {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}

.header-collection-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.header-nav-menu-content {
    background-color: white;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: calc(var(--header-height) - 10px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
    width:     100%;
}
.header-nav-menu-content ul{
    padding:0;
}
.header-nav-menu-content .ai-button {
    width: 100% !important;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 200;
}

.ai-header.gray-100 .header-nav-menu-content {
    background-color: var(--gray-100);
}

.ai-node {
    width: 20rem;
    height: 24rem;
    border-left: 4px solid var(--blue-40);
    cursor: pointer;
    margin: 1rem 1rem 0 0 !important;
    cursor: pointer;
}

.ai-node:nth-child(1) {
    margin-left: 0 !important;
}

.ai-node .node-title {
    font-size: 1.5rem !important;
    padding-left: 0 !important;
}

.ai-node .node-description {
    text-transform: none;
}

.ai-node.dashboard-node {
    display: flex;
    flex-direction: column;
}


img.transparent-bg {
    mix-blend-mode: multiply;
}
.img-icon{
    width: 20px;
    vertical-align: text-top;
}
.ai-tab.collection-view-tabs {
    width: 5rem;
}

/* chat widget */
.chat-inner-container {
    height: calc(100vh - 17rem);
    overflow-y: auto;
}

.chat-inner-container-gr {
    height: calc(100vh - 17rem);
    overflow-y: auto;
}

.chat-inner-container-agent {
    height: calc(100vh - 10rem);
    overflow-y: auto;
}
.chat-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 68%;
}

.chat-user-input {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
}

.chat-user-input.response {
    justify-content: flex-start;
}

.chat-user-input:nth-child(1) {
    margin-top: 0;
}

.chat-bubble {
    box-shadow: 0px 0px 0px rgb(0 0 0 / 10%);
}

.chat-user-input .chat-bubble {
    border-radius: 1rem;
    max-width: 89%;
    background-color: var(--gray-10);
    position: relative;
}

/*
.chat-user-input .chat-bubble::before {
    content: ' ';
    position: absolute;
    width: 0px;
    height: 0;
    top: 0;
    right: -13px;
    border: 14px solid;
    border-color: var(--white) transparent transparent var(--white);
}
*/

.chat-user-input .chat-bubble.response::before {
    top: 0;
    right: 0;
    left: -13px;
    border-color: var(--white) var(--white) transparent transparent;
}

.response-citations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.citation-btn {
    cursor: pointer;
    border: none;
}

.citation-btn.small{
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.2);
    cursor: auto;
    width: fit-content;
}

.chat-modal .citation-btn{
    background-color: var(--citation-btn-bg-color);
}

.citation-btn:focus {
    /* for accessibility compliance - keyboard access focus visibility */
    outline: 2px solid var(--blue-50);
    outline-offset: -2px;
}

/* Document Sidebar */
.doc-sidebar {
    background: #f5f5f5;
    position: absolute;
    width: 40%;
    
    height: calc(100vh - var(--header-height) );
}

.doc-sidebar-text {
    height: calc(100vh - 19rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* samples Sidebar */
.doc-sidebar-samples {
    background: #f5f5f5;
    position: absolute;
    top:145px;
    width: 40%;
    
    height: calc(100vh - var(--header-height));
}

.doc-sidebar-samples-text {
    height: calc(100vh - 19rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.doc-expand {
    cursor: pointer;
}

a.doc-link {
    text-decoration: none;
    display: block;
    width: 50%;
}

a.doc-link:hover {
    text-decoration: underline;
}

.doc-sidebar .doc-link {
    width: 100%;
}

.doc-container .doc-title span {
    cursor: pointer;
}

.doc-container p {
    margin-top: 0.5rem;
}

.doc-container .doc-hover-show {
    visibility: hidden;
}

.doc-container:hover .doc-hover-show {
    visibility: visible;
}

/*  */


.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */
}

.Nodemodal {
    padding: 10px;
    height: 80%;
    overflow: auto;
}


.simple {
    cursor: pointer;
}

.theme-button {
    transition: 0.3s;
    cursor: pointer;
}

.w3-button:hover .theme-button {
    color: #1b82e5;
}

.box {
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.highlight {
    border-color: #1b82e5 !important;
    border-width: 2px !important;
    box-shadow: 10px, 2px, 2px, 2px !important;
}

.selected {
    cursor: not-allowed !important;
    background-color: #e8ebf7;
}

div:hover>.ddelete.material-icons,
.ddelete.material-icons:hover {
    color: rgb(230, 35, 37);
}

.theme.material-icons:hover {
    color: rgb(230, 35, 37);
}

div:hover>.copy.material-icons,
.copy.material-icons:hover {
    color: #1b82e5;
}

div:hover>.add.material-icons,
.add.material-icons:hover {
    color: rgb(0, 170, 94);
    font-size: 200px;
    cursor: pointer;
}

.Nodeadd.material-icons:hover {
    color: rgb(87, 215, 133);
    cursor: pointer;
}

.Nodeadd.material-icons {
    color: rgb(0, 170, 94);
}

.hover-dark:hover {
    cursor: pointer;
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.Nodeedit.material-icons:hover {
    color: #1b82e5;
    cursor: pointer;
}

.Nodeedit.material-icons {
    color: rgb(148, 147, 148)
}

.Nodeup.material-icons:hover {
    color: rgb(166, 165, 166);
    cursor: pointer;
}

.Nodeup.material-icons {
    color: rgb(148, 147, 148)
}


.download.material-icons:hover {
    color: #1b82e5;
    cursor: pointer;
}

.material-icons {
    vertical-align: middle;
}

.add.material-icons {
    font-size: 200px;
}

div:hover>.edit.material-icons,
.edit.material-icons:hover {
    color: rgb(0, 170, 94);
}

div.profile {
    color: #FFCC66;
    font-family: helvetica;
    font-size: 16px;
    font-weight: normal;
    padding: 10px;
    background: rgb(0, 60, 120);
    border: 1px solid rgb(216, 216, 216);
    display: block;
}

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

#body {
    background: #ffffff !important;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(to right, rgb(244, 244, 245), #ffffff) !important;
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to right, rgb(244, 244, 245), #ffffff) !important;
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to right, rgb(244, 244, 245), #ffffff) !important;
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgb(244, 244, 245), #ffffff) !important;
    /* Standard syntax */
}


/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.close {
    color: white;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: none;
    color: white;
}

.modal-body {
    padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: none;
    color: white;
}



.checked {
    color: var(--orange);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #1b82e5;
}

input:focus+.slider {
    box-shadow: 0 0 1px #1b82e5;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.hoverShow {
    top: 10;
    right: 10;
    position: absolute;
}

div>.hoverShow {
    display: none;
}

div:hover>.hoverShow {
    display: inline-block;
}

table a:hover {
    text-decoration: underline;
}

.grey_hover_blue:hover {
    border-color: var(--blue-60) !important;
}

.grey_hover_blue.material-icons {
    font: 24px;
    color: var(--gray-50);
}

.grey_hover_blue.material-icons:hover {
    font: 24px;
    color: var(--blue-60) !important;
}

.grey_hover_blue:hover * {
    font: 24px;
    color: var(--blue-60) !important;
}

ul.samples-ul {
    list-style-type: none;
    height: calc(100vh - 20rem);
    overflow-y: auto;
    padding: 0px;
}

.samples-ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.25rem;
}

.sample-query-btn,
.samples-ul li .sample-query-btn {
    flex: 1;
    text-align: left;
    background-color: var(--cool-gray-20);
    border: none;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    cursor: pointer;
    font-size: 1rem;
}

.sample-query-btn.white,
.samples-ul li .sample-query-btn.white{
    background-color: var(--white);
}

.sample-query-btn.cool-gray-10,
.samples-ul li .sample-query-btn.cool-gray-10 {
    background-color: var(--cool-gray-10);
}

.sample-query-btn:hover,
.samples-ul li .sample-query-btn:hover {
    background-color: var(--gray-30);
}

.sample-query-btn.cool-gray-10:hover {
    background-color: var(--cool-gray-20);
}

.sample-query-btn:focus,
.samples-ul li .sample-query-btn:focus {
    outline: 2px solid var(--blue-60);
    outline-offset: -2px;
}

.samples-ul li .remove-query-btn {
    margin-left: 0.5rem;
}


.suggested-question-btn {
    background-color: var(--gray-10) !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: var(--gray-100) !important;
}

.suggested-question-btn:hover {
    background-color: var(--gray-20) !important;
}

.upload_divs {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-container {
    display: flex;
    flex-direction: row;
}

.flex-container.column {
    flex-direction: column;
    width: 100%;
}

.flex-container.align-center {
    align-items: center;
}

.flex-container.justify-center {
    justify-content: center;
}

.flex-container.wrap {
    flex-wrap: wrap;
}

.flex-container.nowrap {
    flex-wrap: nowrap;
}

/* GenAI Apps */
.genai-app{
    background-color: white;
}

.genai-app-img{
    width: 100%;
    object-fit: cover;
}


/* Prompt Lab */
.prompt-lab-content{
    flex: 4;
}

.prompt-lab-content .buttons-container{
    align-self: flex-end;
}

.ai-button.prompt-generate-btn{
    width: 12rem;
    display: flex;
    height: 3.5rem;
    font-size: 0.875rem;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
}

.ai-button.prompt-generate-btn img{
    height: 1rem;
}

.prompt-lab-right-sidebar{
    flex: 1.3;
}

.prompt-lab-left-sidebar{
    flex: 1;
}

.prompt-lab-right-sidebar h5{
    margin-top: 0!important;
}

.model-select{
    width: fit-content;
}

.prompt-lab-content textarea{
    resize: none!important;
}


@media only screen and (max-width: 1600px) {
    #samples-query-container {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
    }

    #samples-query-container h5 {
        margin: 1rem 0;
    }

    #samples-query-container button {
        margin-left: 0;
    }

}

.tag-editor { 
    background:none;
    color:red;
    font-size: 10px; 
}

.tag-editor tag-editor-tag {

    color: #fff; background: #555;

    border-radius: 2px;

}



.dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 10px;
    background-color: white;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  
  .dropdown-content a:hover {background-color: var(--cool-gray-10)}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /*
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
  */
#answer_div{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: break-word;
}
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color .3s;
    cursor: pointer;
  }
  
  .pagination a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  .pagination a:hover:not(.active) {background-color: #ddd;}


  .pagination_small a {
    color: black;
    float: left;
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color .3s;
    cursor: pointer;
  }
  
  .pagination_small a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  .pagination_small a:hover:not(.active) {background-color: #ddd;}

  pre{
    text-wrap: balance;
    word-break: break-word;
  }

  .nav-button {
    font-size:16px; 
    border:none; 
    border-left:1px solid #cccccc; 
    height:100%; 
    font-weight:400;
  }

  /* Button */
.nav-button {
    background: white;
    position: relative;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    writing-mode: horizontal-tb !important;
    user-select: none;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: bottom;
    box-sizing: border-box;
    margin: 0em;
    padding: 0.8rem 1.5rem;
    border: 1px solid #0000;
    min-width: 8rem;
    color: var(--blue-60);
    outline: 0px solid transparent;
    outline-offset: 0px;
    font-size:16px; 
    border:none; 
    border-left:1px solid #cccccc; 
    height:100%; 
    font-weight:400;
}

.nav-button:active {
    background-color: var(--gray-80);
    color: var(--white);
}

.nav-button:focus {
    /* For accessibility compliance - keyboard access focus visibility */
    border-color: var(--gray-60);
    /*box-shadow: 0 0 0 1px var(--blue-60), inset 0 0 0 2px var(--gray-10);*/
}

.nav-button:hover {
    background-color: var(--gray-20);
    color: black;
}

.nav-button:disabled {
    /*background: var(--gray-30);
    border-color: var(--gray-30);*/
    box-shadow: none;
    color: var(--gray-50);
    cursor: not-allowed;
}

/*
.nav-bar-2 {
    margin-top: var(--header-height);
    width:100%; 
    border-bottom: 1px solid #c1c1c1; 
    padding:15px;
    background-color: white;
}
*/

.nav-bar {
    margin-top: var(--header-height);
    display: flex;
    flex-direction: row; 
    width:100%; 
    border-bottom: 1px solid #c1c1c1; 
    padding:15px;
    background-color: white;
}

.nav-bar-title {
    color: var(--blue-60);
}

.nav-bar-sub-title {
    color: var(--gray-70);;
}

.chat-history {
    background-color: var(--gray-5); /*white;*/
    color: black;
    border-right: 1px solid var(--gray-30);
}

.material-icons.chat-history-close-button {
    color: black;
}

.material-icons.close-button {
    color: var(--gray-90);
}

.material-icons.doc-icons {
    color: var(--gray-60);
}

.material-icons.doc-icons:hover{
    color:black;
}

.material-icons.panel-icons {
    color: var(--gray-70);
}

.material-icons.option-menu {
    color: var(--blue-50);
}

.main-chat-div{
    background-color: white; /*var(--cool-gray-10);*/
}

.input-selection-menu{
    width:fit-content; 
    border-radius:10px; 
    margin-left:0px; 
    padding-top:10px; 
    padding-bottom:10px;
    background-color: var(--gray-10);
    border: 1px solid gray;
}

.input-selection-menu-item{
    color: black;
    width:100%; 
    cursor:pointer;
    padding:15px; 
    padding-right:25px; 
    border-bottom: 1px solid #cccccc
}

.chat-input-box {
    background-color: white;
    border:1px solid dodgerblue; 
    border-radius:15px; 
    padding-left:10px; 
    padding-right:10px;
    color:black;
}

.input-text-area{
    background-color: white;
}

textarea.input-text-area{
    background-color: white;
}

.ai-button.chat-input-button{
    background: none;
}

.welcome-message{
    color: var(--gray-80);
}

.selection-sidebar {
    background-color: var(--gray-10);
    color: black;
    border-left: 1px solid var(--gray-20);
}

.gr-selection-sidebar {
    background-color: white;
    color: black;
    border-left: 1px solid var(--gray-20);
}

.canvas-sidebar {
    background-color: white;
    color: black;
    border-left: 1px solid var(--gray-20);
}


.docs-results-bar{
    color: var(--gray-90);
}

.docs-custom-keys{
    color: var(--gray-70);
}

.docs-title{
    color: var(--blue-60);
}

.docs-text{
    color: black;
}

.collection-summary-label{
    color:var(--gray-70)
}

.doc-icons{
    color:var(--gray-30)
}

.doc-viewer{
    color:var(--gray-70)
}

.sidebar-form{
    background-color: white;
    color: black;
}

.doc-title{
    color: var(--blue-60);
}

div.sample-button{
    background-color: var(--cool-gray-10)
}

div.app-sample-button{
    background-color: var(--cool-gray-10);
    height:auto; 
    padding:20px;
    border-radius:30px;
}

div.app-sample-button:hover{
    background-color: white;
    color:black;
    border: 1px solid gray;
    border-radius:30px;
}


div.think-div-title{
    color: var(--blue-60);
}

div.think-div-content{
    background-color: var(--gray-10);
    color: black;
}

button.new-citation-btn{
    background-color: #e3f1fd;
    color: black;
    border-radius: 10px;
    border: 1px solid var(--blue-30);
}
button.new-citation-btn:hover{
    background-color: var(--blue-50);
    color: white;
}

div.search-box{
    background-color: white;
    color:black;
    border:1px solid var(--blue-60)
}


li.navbar-item{
    padding-left:15px; 
    padding-right:15px; 
    padding-top:15px; 
    padding-bottom:15px; 
    cursor:pointer;
    color: black;
    width:300px;
}


li.navbar-item:hover{
    background-color: var(--cool-gray-30);
    color:black;
}

a.navbar-item{
    text-decoration: none;
    color:black;
}

.menu-dropdown{
    border: 1px solid gray;
}

button.menu-dropdown{
    background-color: var(--gray-10);
    color:black;
}

button.menu-dropdown:hover{
    background-color: var(--gray-20);
}

.prompt-test-window{
    background-color: var(--cool-gray-10);
}

button.prompt-test{
    background-color: var(--gray-30);
    color: black;
}

.doc-answer-title{
    color: var(--blue-60);
    font-size: 18px;
    font-weight: 500;
}

.ai-button.menu-button{
    color:black;
    background-color: white;
    border: 1px solid gray;
}

.ai-button.menu-button:hover{
    color:white;
    background-color: var(--gray-50);
    border: 1px solid gray;
}

.app-title{
    color:var(--gray-70);
}

.new_chat_button{
    padding:20px; 
    padding-left:25px; 
    width:100%; 
    cursor:pointer; 
    border-top: 1px solid var(--gray-40);
    border-bottom: 1px solid var(--gray-40);

}


.option_menu_button{
    border-radius: 15px; 
    margin-right:20px;
    margin-top:15px;
    cursor: pointer;
    min-height:75px;
    height:auto;
    background-color: var(--blue-10);
}

.option_menu_button:hover{
    background-color: var(--blue-20);
    color:black;
}

.sidebar-section{
    padding-top:30px;
    padding-bottom:20px;
    border-bottom: 1px solid var(--gray-30);
}

.topic_button{
    padding:12px; 
    font-size:16px; 
    cursor:pointer; 
    border-radius:10px;
    color: var(--blue-60);
}
/*
.topic_button:hover{
    background-color: var(--blue-50);
    color:white;
}
    */

em {
    background-color: var(--blue-20);
    font-style: normal;
    font-weight:500;
}