body {
    padding: 20px;
    margin: 20px;
}

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

.navbar {
    position: absolute;
    width: 100px;
    float: left;
    top: 200px;
}

#header {
    top: 0px;
    width: 100%;
}

.demo-block {
    width: calc(50% - 50px);
    height: 100%;
    margin: auto;
    /* border: 1px solid red; */
    padding: 50px;
}

.wide-demo {
    width: 65%;
    padding: 0px;
}

.left-demo {
    float: left;
}

.right-demo {
    float: right;
}

.btn_stage {
    margin: 5px;
}

#child-input {
    width: 100%;
}

#query_params {
    height: 100px;
    width: 100%;
}

pre {
    white-space: pre-wrap;
    /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

.bubble {
    width: 100%;
}

#chat-window {
    border: 1px solid rgb(226, 224, 224);
    display: grid;
    height: 50%;
    overflow: scroll;
}

.chat {
    padding: 15px;
    border-radius: 20px;
    max-width: 80%;
    min-width: 10%;
}

.left-chat {
    background-color: rgb(210, 231, 244);
    float: left
}

.right-chat {
    background-color: rgb(210, 244, 218);
    float: right
}

.input-controls {
    background-color: aliceblue;
}

.chat-image {
    width: 100px;
}

.eval-chat-scenario-title {
    word-break: break-all;
}

.eval-chat-scenario-flaky {
    font-size: 2em;
    text-align: right;
}

hr{
    padding: 0px!important;
    margin: 0px!important;
  }

.prompt_box {
    padding: 5px;
    margin: 5px;
    white-space: pre-wrap;
}

.prompt_box_textarea {
    height:100px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #000;
    border: 5px solid transparent;
}

.save-prompt{
    margin-right: 5px;
    color: black!important;
}

.prompt_details_row {
    font-family: "Noto Sans Mono", monospace;
}

.highlight {
    background-color: orange;
}

#pormpts_list_container {
    margin-left: auto;
}

#prompts_list {
    max-height: 75%;
    overflow: scroll;
    scroll-behavior: auto;
}

.prompt_item { white-space: pre; border: 1px solid lightblue; font-size: 1.2em;
    margin: 3px;
    padding: 2px;
    cursor: pointer;
}

.language-selector {
    position: absolute;
    left: 20px;
    top: 100px;
    width: 100px;
    margin: 0;
}

.language-selector select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

/* Add styling for model selector */
.model-selector {
    position: absolute;
    left: 20px;
    top: 140px;  /* Positioned below language selector */
    width: 150px;
    margin: 0;
}

.model-selector select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.warning {
    border: 1px solid #ced4da;
    background-color: orange;
    padding: 5px;
    margin: 5px;
}

.spinner-border {
    animation-duration: 5s;
}

.nav-link {
    color: #0d6efd;  /* Bootstrap primary blue color */
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.nav-link:hover {
    color: #0a58ca;  /* Slightly darker blue on hover */
    text-decoration: underline;
}