*,
*::before,
*::after {
    box-sizing: border-box;
}


body {

    box-sizing:         border-box;

    margin:             10px;

    /*font-family:        -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";*/
    font-family:        "decterm", "vt220", "Press Start 2P",'Courier New', Courier, monospace;


    background-color:   #000;
    color:              #9090c0;


    -webkit-font-smoothing: subpixel-antialiased;

    user-select:         none;
    height:              100%;
}

#outerView {

    position:           absolute;

    top:                0px;
    left:               0px;
    right:              0px;
    bottom:             0px;

    margin:             5px;
    padding:            10px;


    overflow:           hidden;

    z-index:            10;
}

#wrapperView {

    position:           absolute;

    top:                5px;
    left:               5px;
    right:              5px;
    bottom:             5px;

    margin:             5px;

    z-index:            20;

    /* background-image:   linear-gradient(to right, #220000, #770000); */


    /*background: linear-gradient(to left, #5A463D, #4B362F, #382922, #261B16);*/
    /*background: linear-gradient(to left, #44332A, #32251B, #22170D, #100A05);*/



}

#contentView {

    position:           absolute;

    top:                0px;
    left:               0px;
    right:              0px;
    bottom:             0px;


    z-index:            25;


}


#logoBanner {
    cursor:             pointer;
}


:root {
    --widget-padding: 0.25em 0.5em;
    --widget-border: #ff1493;
    --widget-background: #000;
    --widget-disabled: #444;
    --widget-font-size: 1.25rem;
}

.bot-terminal-row {

    display:                flex;
    flex-direction:         row;

}

.bot-terminal-chat-row {

    justify-content:        flex-start;

    text-shadow:            4px 4px 2px #0005;

    white-space:            pre-wrap;
    overflow-wrap:          break-word;

    padding-bottom:         5px;

}

.bot-terminal-warn-row {

    color:                  yellow;
}

.bot-terminal-error-row {

    color:                  red;
}

.bot-terminal-info-row {

    color:                  #eee;
}

.bot-terminal-command-row {

    color:                  #ddd;
    justify-content:        flex-end;

}

.bot-terminal-chat-item {

    padding-left:           15px;
    padding-right:          15px;
    padding-top:            7px;
    padding-bottom:         10px;
    background:             #444;
    border-radius:          5px;
    box-shadow:             5px 5px 3px #0004;
}

.bot-terminal-command-item {
    background:             #580179;

}


.bot-terminal-smooth {
    -webkit-font-smoothing: subpixel-antialiased;
}

.bot-terminal-notsmooth {
    -webkit-font-smoothing: none;
}


.bot-backshadow {
    background:         linear-gradient(to right, rgba(64,64,64,0.1), rgba(64,64,64,0.1));
    box-shadow:         5px 5px 3px rgba(0, 0, 0, 0.2);
}


.bot-terminal-human-row {

    display:                inline-block;

    height:                 auto;

    filter:                 drop-shadow(3px 3px 7px  #000);

    border:                 none;
    outline:                none;

    color:                  #BABCEC;
    caret-color:            transparent;

    padding-top:            5px;

    white-space:            pre-wrap;
    overflow-wrap:          break-word;
}

.bot-terminal-bot-row {

    display:                inline-block;

    height:                 auto;

    padding:                15px;

    filter:                 drop-shadow(3px 3px 7px  #000);

    color:                  #BABCEC;

    white-space:            pre-wrap;
    overflow-wrap:          break-word;
}




.bot-border  {
    border:                 1px solid #9090c0;
    background-color:       #181818;
}

.bot-border:hover  {
    border: 1px solid #BABCEC
}


.bot-terminal-footer-frame {
    border-style:   solid;
    border-width:   2px;

    padding:        2px;

    color:              #3a3a3a;
    background-color: #000;


    z-index:            50;
    box-sizing:         content-box;
    display:            block;

}

.bot-terminal-footer {

    padding:            2px;

    background-color:   #3a3a3a;
    color:              #000;
    text-shadow:        none;

    display:                grid;
    grid-template-columns:  auto auto 1fr auto auto auto
}

.bot-terminal-footer-item {
    cursor:pointer
}

.bot-terminal-footer-item:hover {
    color: #fff
}


.div {
    border: 1px solid #fff
}

.footer {
    width: calc(100% - 30px);
    white-space:        pre

}

.center-col {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
}

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

.bot-table {

    font-family:        "Andale Mono","Courier New";
    font-size:          9pt;
    font-weight:        400;
    -webkit-font-smoothing: none;

    margin:             2px;
    box-shadow:         5px 5px 3px rgba(0, 0, 0, 0.2);
    display:            grid;
    gap:                1px;
    -webkit-font-smoothing: none;
    text-shadow:        none;
}

.bot-table-text {
    padding-bottom:     5px;
    padding-left:       2px;
    white-space:        pre;
    color:              "#9090c0";
}

.bot-table-header {
    color:              #ccccff;
    background-color:   #000033;
    padding-left:       10px;
    padding-top:        3px;
    padding-bottom:     3px;
    padding-right:      10px;
}

.bot-table-cell {
    background-color:   #070709;
    min-width:          0px;
    padding-left:       1ch;
    padding-top:        2px;
    padding-bottom:     2px;
    padding-right:      1ch;
    overflow:           hidden;
}