@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');

@font-face {
    font-family: "NeueHaasBolder", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 700;
    font-style: normal;
    /*src: url(../fonts/lifetimeupdate/NeueHaasBlack.ttf);*/
}

@font-face {
    font-family: "NeueHaasBolderItalic", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 700;
    font-style: italic;
    /*src: url(../fonts/lifetimeupdate/NeueHaasBlackItalic.ttf);*/
}

@font-face {
    font-family: "NeueHaasBold", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 600;
    font-style: normal;
    /*src: url(../fonts/lifetimeupdate/NeueHaasBold.ttf);*/
}

@font-face {
    font-family: "NeueHaasBoldItalic", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: bold;
    font-style: italic;
    /*src: url(../fonts/lifetimeupdate/NeueHaasMediumItalic.ttf);*/
}

@font-face {
    font-family: "NeueHaasNormal", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: normal;
    font-style: normal;
    /*src: url(../fonts/lifetimeupdate/NeueHaasRoman.ttf);*/
}

@font-face {
    font-family: "NeueHaasNormalItalic", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: normal;
    font-style: italic;
    /*src: url(../fonts/lifetimeupdate/NeueHaasRomanItalic.ttf);*/
}

@font-face {
    font-family: "NeueHaasRoman", 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 400;
    font-style: normal;
    /*src: url(../fonts/lifetimeupdate/NeueHaasRoman.ttf);*/
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'NeueHaasBold', 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 600;
}

.pulser {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #3498db;
    animation: pulse 1.5s infinite;
    opacity: 0.7;
    content: "processing...";
    font-size: 3em;
    z-index: 2000;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
}

/*#diagonal-line {*/
/*    stroke-dasharray: 400, 0;*/
/*    animation: draw 2s forwards;*/
/*}*/

/*@keyframes draw {*/
/*    0% {*/
/*        stroke-dasharray: 0, 400;*/
/*    }*/
/*    100% {*/
/*        stroke-dasharray: 400, 0;*/
/*    }*/
/*}*/

#container, main#content {
    font-family: 'NeueHaasNormal', 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: normal;
}

#content > section {
    padding-top: 1.8em;
}

/*.two-column {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: left !* Adjusts the space between the child elements *!*/
/*}*/

.m-form > * {
    padding-top: 0;
}

/*.m-form-field__textarea#jsoneditor {*/
/*    width: 80% !important;*/
/*}*/

#content div#current-chat {
    position: relative;
    /*margin-left: 1em !important;*/
    /*margin-right: 1em !important;*/
    transition: margin 0.5s ease-in-out;
    min-height: 100%;
    max-width: 100%;
    min-width: 22em;
    margin: 1em;
}

#current-chat.chat-shift-right {
    margin-left: 360px !important;
}

#current-chat.chat-shift-left {
    margin-right: calc(400px + 1em) !important;
}

#chat-history-block {
    font-family: 'NeueHaasNormal', 'Inter', 'Helvetica Neue', 'sans-serif';
    width: 360px;
    left: -360px;
    height: 100%;
    position: fixed;
    bottom: 0;
    top: 192px;
    /*height: 100%;*/
    overflow-y: scroll;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    transition: right 0.5s ease-in-out;
    z-index: 90; /* Ensure it's above other content except buttons */
}

#chat-history-block.show {
    left: 0;
}

#chat-history li > h4.day {
    border: 2px solid #000;
    padding: 0.5em;
}

#chat-history li > dl, #chat-history li > dt {
    display: none;
}

#changing-chat-display > dl > dt > textarea, #changing-chat-display > dl > dd > textarea {
    width: 100%;
    columns: 300;
}

/*#columns {*/
/*    display: flex;*/
/*    margin: 1em;*/
/*    padding: 1em;*/
/*    !*height: 100vh;*!*/
/*}*/

/*#chat-history-block {*/
/*    !*flex: 1;*!*/
/*    overflow: scroll;*/
/*    margin: 1em;*/
/*    !*width: 85%;*!*/
/*    !*padding-right: 1em;*!*/
/*    !*float: left;*!*/
/*    !*border: 1px solid #ccc;*!*/
/*    !*border-radius: 5px;*!*/
/*    top: 0;*/
/*}*/

#chat-history-block header {
    padding-top: 0;
    clear: left;
}

#chat-history img {
    position: relative;
    float: left;
    padding-right: 1em;
}

#chat-history .expired {
    /*font-weight: bold;*/
}

#openai-form {
    top: 192px;
    bottom: 0;
    overflow-y: scroll;
    padding: 1em;
    height: 100%;
    margin-top: 0; /* for some reason the CBS template tries to make this negative*/
    border: 1px solid #ccc;
    border-radius: 5px;
    position: fixed;
    right: -400px; /* Adjust based on the actual width of the form */
    width: 400px; /* Example width, adjust as needed */
    /*height: 100%;*/
    background-color: #f9f9f9;
    transition: right 0.5s ease-in-out;
    z-index: 91; /* Ensure it's above other content */
}

/* Class to be added for showing the form */
#openai-form.show {
    right: 0;
}

.stop-sequence {
    padding: 0.5em;
    background-color: #DD9999;
    border: 1px solid #ff0000;
    /*clip-path: polygon(*/
    /*    10% 0%, 90% 0%, !* Top corners *!*/
    /*    100% 25%, 100% 75%, !* Right corners *!*/
    /*    90% 100%, 10% 100%, !* Bottom corners *!*/
    /*    0% 75%, 0% 25% !* Left corners *!*/
    /*);*/
    border-radius: 5px;
    margin: 0.2em;
}

#prompt {
    position: sticky;
    top: 7em;
    margin-left: 0;
    margin-right: 0;
    padding: 0.5em;
    background-color: white;
    z-index: 91;
    /*border: 7px solid black;*/
    border-radius: 10px;
    transition: margin-left 0.5s ease-in-out, margin-right 0.5s ease-in-out;
}

#prompt > h2 {
    font-size: 20px;
}

#prompt textarea {
    width: 75%;
}

#prompt .m-form-field__status {
    right: 150px;
}

footer {
    display: none;
}

#prompt.chat-shift-right {
    margin-left: 380px;
}

#prompt.chat-shift-left {
    margin-right: 380px;
}

#bottom-buffer {
    height: 230px;
}

#start-chat-button, #add-button, #chat-form > div.m-form__button > div > button {
    position: fixed;
    right: 2em;
    bottom: 2em;
    width: 11em;
    z-index: 93;
    transition: margin-right 0.5s ease-in-out;
}

#start-chat-button {
    right: 14em;
}

#add-button {
    right: 26em;
}

.toggle-button.chat-shift-left, #add-button.chat-shift-left, #start-chat-button.chat-shift-left, #chat-form > div.m-form__button > div > button.chat-shift-left {
    margin-right: 400px;
}

/* {*/
/*    margin-right: 400px;*/
/*}*/

#chat-form > div > div.m-form__field.m-form__field--submit {
    margin-top: 1em;
}

#chat-form {
    width: 340px;
}

#chat-form > div {
    margin: 1em;
}

#chat-form > div > select {
    border-bottom: 1pt solid #000;
    width: 95%;
    appearance: none; /* This hides the default dropdown arrow */
    background-color: #fff; /* Add a background color */
    padding-right: 5%; /* Add some padding */
    position: relative; /* Needed for the ::after pseudo-element */
}

#chat-form > div > select::after {
    content: "+"; /* This is your "+" sign */
    position: absolute; /* This makes sure it's on the right */
    right: 0;
    top: 0;
    color: cornflowerblue;
    /*padding-left: 5%; !* Adjust as needed *!*/
}

.hidden {
    visibility: hidden;
}

.show-block {
    display: block !important;
}

.hide-block {
    display: none;
}

li.prompt-item {
    padding: 2px;
    list-style-type: none;
    cursor: pointer;
    font-size: smaller;
}

li.prompt-item:focus-visible {
    border: 1px solid grey;
}

li.prompt-item:focus {
    list-style-type: square;
}

li.prompt-item.thread {
    padding: 2px 2px 2px 20px;
    border-left: 2px dashed #000;
}

li.prompt-item.selected {
    background-color: #B9D9EB;
    margin-right: 0;
    font-weight: bold;
}

#changing-chat-display dt:hover, #changing-chat-display dd:hover {
    box-shadow: 0 0 10px cornflowerblue;
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
}

.plus-button, .close-button {
    margin: 0.2em;
    font-size: 1em;
    cursor: pointer;
    font-family: FontAwesome, sans-serif;
    border: 1px solid black;
    border-radius: 5px;
}

.small-button {
    float: right;
    margin: 0.5em;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.5em;
}

.plus-button {
}

.close-button {
}

.right {
    float: right;
}

#code-modal {
    top: 13em;
    right: 2em;
    width: 40em;
    height: calc(95% - 14em);
}

.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    display: block;
    background-color: #DEDEDE;
    border: 2px solid black;
    border-radius: 5px;
    z-index: 98;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.modal.fade-in {
    visibility: visible;
    opacity: 1;
}

#code-content {
    font-family: "Lucida Console", monospace;
    margin: 1em;
    position: relative;
    height: 87%;
    width: 38em;
    padding: 0.5em;
    line-height: 1.5em;
}

.modal .copy-button, .modal .close-button {
    margin: 1em;
}

.copy-button {
    float: left;
    background-image: url(../images/copy.png);
    background-size: 1.5em;
    background-repeat: no-repeat;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5em;
    width: 1.7em;
    height: 1.7em;
}

/*.show-json-in-modal::before, .show-python-in-modal::before {*/
/*    content: '\1F4CB';*/
/*    margin-right: 0.5em;*/
/*    font-family: Webdings, sans-serif;*/
/*}*/

.show-json-in-modal, .show-python-in-modal {
    font-family: "Helvetica Neue", sans-serif;
}

/*dt:hover, dd:hover {*/
/*    border: 3px solid black !important;*/
/*}*/
/*.container {*/
/*    float: left;*/
/*}*/

code {
    white-space: pre-wrap;
    color: saddlebrown;
    border-radius: 2px;
    padding: 4px;
    font-weight: normal;
    font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

#chat-history .pretty-bot {
    clear: both;
    padding: 1em;
    /*background-color: rgb(230,230,230);*/
}

/*#chat-history p > code {*/
/*        display: block;*/
/*}*/

dt, dd {
    clear: both;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
}

dt .content {
    white-space: pre-wrap;
    word-wrap: break-word; /* For older browsers */
    overflow-wrap: break-word; /* Standard property */
}

span.assistant {
    display: none;
}

span.blurb {
    font-family: 'NeueHaasNormalItalic', 'Inter', 'Helvetica Neue', 'sans-serif';
    font-style: italic;
}


.system {
    background-color: white;
    border: 1px solid black;
}

.user {
    background-color: #DDDDDD;
}

.pretty-bot {
    background-color: #B9D9EB;
}

.json-code > code {
    padding: 1em;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-top: 1em;
    font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: smaller;
    white-space: pre-wrap;
    /*overflow: hidden;*/
    /*max-height: 0;*/
    display: none;
}


#chat-history .user {
    background-color: #EEEEEE;
}

#chat-history .pretty-bot, #chat-history .bot {
    border: 1px solid #ccc;
    /*background-color: #B9D9EB;*/
}

#chat-history dt {
    font-weight: normal;
    margin-top: 1em;
    border-top: 1px solid #ccc;
}

#chat-history dd {
    font-family: 'NeueHaasNormal', 'Inter', 'Helvetica Neue', 'sans-serif';
    font-weight: 500;
}

.generated-image {
    text-align: right;
}

#toggle-history, #toggle-json, #close-settings {
    font-size: small;
    vertical-align: text-top;
    position: relative;
    transition: margin-left 0.5s ease-in-out;
    /*float: right;*/
    /*clear:both;*/
}

.toggle-button, #close-history {
    margin: 1em;
    display: inline-block;
}

#close-history, #close-settings {
    float: right;
}

.toggle-button:has(a.activated) {
    background-color: #B9D9EB;
}

/*.start-chat-button {*/
/*    background-color: #6f6f6f;*/
/*    color: white;*/
/*    font-weight: bold;*/
/*}*/

#m-form > * {
    padding-top: 1em;
}

.step-links {
    margin-top: 2em;
}

.step-links > a, #toggle-history, #toggle-json, .start-chat-button {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.25em;
    margin: 0 .1em;
}

#toggle-settings {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.25em;
    margin: 0 .1em;
    font-size: larger;
}

#settings {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 1em;
    display: inline-block;
    text-align: center;
}

.pagination {
    width: 323px;
    margin-top: -15px;
    margin-bottom: 10px;
}

#chat-history-block {
    /*margin: 1em;*/
    padding: 1em;
    transition: left 0.5s ease-in-out;
}

#chat-history figure {
    margin: 1em;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#chat-history figcaption {
    font-size: smaller;
    font-style: italic;
}

#chat-form .m-dropdown, #chat-form .m-dropdown__inner, #chat-form .m-form__field {
    margin: 1em 0 0;
    width: 100% !important;
}

/*.m-dropdown {*/
/*    margin: 3em 0;*/
/*}*/

.ctable-item {
    position: relative;
    clear: both;
    padding: 1em;
    border-radius: 5px;
    margin: 2em .5em;
    border-color: black;
}

.btn-link, .key {
    cursor: pointer;
    background-color: #b9d9ed;
}

.cost, .tokens {
    background-color: #dedede;
}

.errorlist, .exceeded {
    background-color: #ff9999 !important;
    color: black;
    /*padding-top: 0 !important;*/
}

.exceeded, .denied {
    display: inline-block;
    padding: 1em;
    border-radius: 5px;
    margin: 1em 0;
}

.denied {
    background-color: red !important;
    /*padding-top: 0;*/
    font-weight: bold;
}

li[class^="context-"]::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px; /* Adjust width as needed */
    height: 24px; /* Adjust height as needed */
    margin-left: 5px; /* Adjust margin as needed */
}

ul.course-table > li > h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0;
    clear: both;
}

ul.course-table {
    width: max-content;
}

ul.course-table > li {
    list-style: none;
    font-size: smaller !important;
    border-top: 1px solid #ccc;
    margin: 3em;
}

#chat-button {
    margin: 2em 0;
}

#content h2 > div {
    margin-bottom: 2em !important;
}

.o-detail > div.o-detail__main {
    width: 100%;
}

@media screen and (min-width: 1280px) and (min-width: 1700px) {
    #chat-form > div.m-form__field {
        width: 100%;
        padding-right: 1.5em;
        margin-bottom: 2em;
    }

    .o-detail > div.o-detail__main {
        width: 100% !important;
    }
}

@media screen and (min-width: 1280px) {
    .o-detail > div.o-detail__main {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    ul.course-table {
        width: auto;
    }

    .ctable-row {
        display: flex;
        flex-direction: column;
    }

    .ctable-item {
        margin: .5em;
    }
}

/* Styling for playground select fields */
.m-form-field__select select {
    margin-top: 30px;
    border: 1px solid black;
}