/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
    div .show_on_mobile {
        display:block!important;
    }
    div .mathkey {
        height:70%;
        margin:auto;
    }
    div .keyboard_key_base {
        width:37px;
        height:37px;
    }

    div .assistant p {
        margin-left:0px;
    }
}

:root, body, html {
	font-family:arial, helvetica, sans-serif!important;
	font-size:14px!important;
	line-height:1.4em!important;
    background-color: #000!important;
    font-weight:500!important;
    color: #ffffff!important;
    letter-spacing: 0.0px!important;
    background-image:none;
    padding: 0;
    margin:0;
}

textarea {
    padding:8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/* frame classes */
/* frame classes */

.chat-input-container {
    display: flex;
    padding: 10px;
    background-color: #292929;
    border-top: 1px solid #333;
    position: sticky;
    bottom: 0;
}

.chat-input-bottom-text {
    text-align:center;
    font-size:0.85em;
}

/* chat classes */
/* chat classes */

.message-text {
    font-size:1.3em;
    line-height:1.4em;
    border-radius: 10px;
    word-wrap: break-word;
    padding:10px;
    color: #fff;
    text-shadow:
        0.1px 0 0 currentColor,
        -0.1px 0 0 currentColor;
}

.message-text.user {
    background-color:#2b3034;
}

.message-text.assistant {}

/* input classes */
/* input classes */

.textareadiv {
    flex: 1;
    background-color: #373737;
    color: #fff;
    margin-right: 10px;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    font-size: 16px;
    padding: 10px;
    box-sizing: content-box;
    text-shadow:
        0.1px 0 0 currentColor,
        -0.1px 0 0 currentColor;
}
.textareadiv[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #9d9c9d; 
}

.chat-input-container button {
    padding: 10px 20px;
    background-color: #00c38c;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.chat-input-container button:hover {
    background-color: #00ab7b;
}

/* functions menu classes */
/* functions menu classes */

.functions_menu {
    background-color:#292929;
    display:inline-block;
    padding:2px 8px;
    margin-right:10px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* texts and links */
/* texts and links */

a:link, a:active, a:visited {
	color: #fff;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}

.chat-input-bottom-text a:link, .chat-input-bottom-text a:active, .chat-input-bottom-text a:visited, .chat-input-bottom-text a:hover {
	/*color:#676767;*/
    color:#8a8a8a;
}

a:link.link_ai_gray, a:active.link_ai_gray, a:visited.link_ai_gray {
	/*color:#676767;*/
    color:#8a8a8a;
	text-decoration:underline;
}
a:hover.link_ai_gray {
	text-decoration:none;
}

.text_ai_gray_placeholder {
    color:#9d9c9d;
}

.text_ai_gray {
    /*color:#676767;*/
    color:#8a8a8a;
}

.text_zelen_ai {
    color:#00d397;
}

.bg_ai_gray {
    background-color:rgba(54, 54, 54, 1.0);
}

/* math keyboard */
/* math keyboard */

.keyboard_function_btn {
    text-align:center;
    background-color:#2a2f34;
    padding:3px 8px;
    margin-bottom:8px;
    display:inline-block;
}

.keyboard_key_base {
    border:0;
    text-align:center;
    margin:1px;
    font-size:1.3em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:42px;
    height:42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.keyboard_key_gray {
    background:#4f4f4f;
    color:#fff;
}
.keyboard_key_orange {
    background:#f7931e;
    color:#fff;
}
.mathkey {
    height:80%;
    margin:auto; 
}

.show_on_mobile {
    display:none!important;
}

/* chat reply styles */
/* chat reply styles */

.chat-display hr  {
    margin:20px;
}
.chat-display p {
    /*margin-left:20px;*/
    padding:4px 0px;
}

.assistant p {
    margin-left:20px;
}

.chat-display .user p, .chat-display .assistant p {
    /* margin-left:0px;
    padding:0px; */
}
.chat-display ul li, .chat-display ol li {
    margin-left:20px;
    padding:4px 0px 4px 10px;
}
.chat-display ul li p, .chat-display ol li p {
    margin:0;
    padding:0;
}
.chat-display h3 {
    margin:35px 0px 25px 0px;
    font-size:1.2em;
    border-bottom:1px solid #fff;
}
.chat-display h4 {
    margin:25px 0px 25px 10px;
    padding:4px 12px;
    font-size:1.05em;
    background-color:#292929;
    display:inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #fff;
}


/* mathquill css */
/* mathquill css */

.mathquill-editable {
    background-color:#4f4f4f;
    border:0px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 2px;
    /*height:100%;*/
}
.mq-math-mode .mq-empty {
    background: #a9a9a9;
}
.mq-math-mode sup.mq-nthroot {
    vertical-align:0.5em;
    position:relative;
    top:-2px;
    left:-2px;
}
.mq-editable-field {
    border:0!important;
}

.mq-math-mode .mq-supsub .mq-sub {
    font-size:0.8em;
    position:relative;
    top:1px;
}

.mq-math-mode .mq-supsub .mq-sup {
    font-size:0.8em;
    position:relative;
    top:-1px;
}
    
/*.mq-math-mode .mq-supsub .mq-sub*/

.mq-math-mode .mq-overline {
    border-top:1px solid #fff!important;
}

.mq-cursor {
    border-color: white!important;
}