/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body{
    background-color:#74EBD5;
    background-image:linear-gradient(90deg,#74EBD5 0%,#9FACE6 100%);
    min-height:100vh;
    min-width:100vh;
}
::-webkit-scrollbar{
    width:5px;
}
::-webkit-scrollbar-track{
    width:5px;
    background:#f5f5f5;
}
::-webkit-scrollbar-thumb{
    width:1em;
    background-color:#ddd;
    outline:1px solid slategrey;
    border-radius:1rem;
}
.text-small{
    font-size:0.9rem;
}
.text-bold{
    font-weight:bold;
}
.messages-box,
.chat-box{
    height:510px;
    overflow-y:scroll;
}
.rounded-lg{
    border-radius:0.5rem;
}
input::placeholder{
    font-size:0.9rem;
    color:#999;
}
.btn-icon{
    color:#111;
    cursor:pointer;
    text-decoration:none;
}
.btn-icon:hover{
    color:#333;
    cursor:pointer;
    text-decoration:none;
}
#eSettings{
    z-index:3;
    position:absolute;
    background:transparent;
}
#eChat{
    z-index:2;
    position:relative;
}
#eSettings .no-wrap{
    overflow:hidden;
    text-wrap:nowrap;
}
#eSettings .no-wrap::after{
    content:"..."
}
.list-settings-item{
    min-height:72px
}
#titleSettings{
    clear:both;
    width:190%;
    height:502px;
    overflow:hidden;
    white-space:nowrap;
    display:inline-block;
    background:transparent;
    border-bottom-left-radius:.3rem!important
}
.es-title{
    width:190%;
    border-top-left-radius:.3rem!important;
    border-right:1px solid rgba(0,0,0,.125);
}
#settings_openai{
    display:none
}
.loading-bar-wrapper{
    width:20%;
    padding:3px;
    margin-top:3px;
    border-radius:5px;
    background-color:#e0e0e0;
}
.loading-bar{
    height:6px;
    border-radius:2px;
    background-color:#007bff;
}
.percentage__0{width:0%}
.percentage__5{width:5%}
.percentage__10{width:10%}
.percentage__15{width:15%}
.percentage__20{width:20%}
.percentage__25{width:25%}
.percentage__30{width:30%}
.percentage__35{width:35%}
.percentage__40{width:40%}
.percentage__45{width:45%}
.percentage__50{width:50%}
.percentage__55{width:55%}
.percentage__60{width:60%}
.percentage__65{width:65%}
.percentage__70{width:70%}
.percentage__75{width:75%}
.percentage__80{width:80%}
.percentage__85{width:85%}
.percentage__90{width:90%}
.percentage__95{width:95%}
.percentage__100{width:100%}
@keyframes animate__shrinkWidth{
    from{
        width:190%
    }
    to{
        width:0%
    }
}
.animate__animated.animate__shrinkWidth,
.animate__animated.animate__shrinkWidth .title{
    animation-name:animate__shrinkWidth;
    animation-duration:1s;
    animation-fill-mode:forwards;
}
@keyframes animate__expandWidth{
    from{
        width:0%
    }
    to{
        width:190%
    }
}
.animate__animated.animate__expandWidth{
    animation-name:animate__expandWidth;
    animation-duration:1s;
    animation-fill-mode:forwards;
}
.form-outline .form-control{
    text-align:center;
    font-size:2em!important;
    text-transform:uppercase;
    border-radius:0px!important;
    border:#FFF solid 1px!important;
}
button[type=submit]:hover,
button[type=submit]:focus{
    color:#332D2D;
}
span.hr{
    height:12px;
    width:81.5%;
    flex:0 0 auto;
    margin-top:2rem;
    background:#FFF;
    position:absolute;
    padding-left:calc(var(--mdb-gutter-x)*.5);
    padding-right:calc(var(--mdb-gutter-x)*.5);
}
div.divider::before{
    width:30px;
    content:'';
    height:12px;
    display:block;
    margin:250% -75%;
    background-color:#CCC;
}
.btn.btn-link:hover{
    color:#8BABE091!important;
}
.list-group-item-light.list-group-item-action:focus,
.list-group-item-light.list-group-item-action:hover{
    background-color:#3D3B3B!important;
}