.js-console {
    position:  relative;
    height:    -webkit-fill-available;
    background: #202124;
    overflow:   hidden auto;
    color:      #f9f9f9;

    font-size: 12px;

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

.js-console-inner {
    position:      relative;
    margin-bottom: 64px !important;
}

.js-console::-webkit-scrollbar {width: 4px;}
.js-console::-webkit-scrollbar-track {background: #202124;}
.js-console::-webkit-scrollbar-thumb {background: #3A3A3A;}

.js-console-typer {
    outline: none;
    border:  none;
    width:   100%;
    height:  0;
    bottom:  0;

    position:   fixed;
    resize:     none;
    box-sizing: border-box;

    background: transparent;
}

.js-console-prompt-label {
    font-size: 8px;
}

.js-console-cursor {
    background: rgba(255, 255, 255, 0.3);
    animation: blink 0.5s linear infinite alternate;
}

@keyframes blink {
    form { opacity: 0.1 }
    to {opacity: 0.3 }
}

.js-console-prompt-box:not(:first-child) {
    border-top: 1px solid #3A3A3A;
}

.js-console-prompt-box,
.js-console-message,
.js-console-info,
.js-console-warning,
.js-console-error
{
    padding: 0 0.5em !important;
    line-height: 1.5;
}

.js-console-prompt-box .js-console-prompt {
    vertical-align: baseline;
}

.js-console-error {
    color:      #DD805F;
    background: #290000;
}

.js-console-warning {
    color:      #F28F08;
    background: #332B00;
}

.js-console-info {
    color:      #04CCE6;
    background: #002B33;
}

.invisible {
    visibility: hidden;
}

.hide {
    display: none;
}

.fixposition {
    position: fixed;
}

.blockdisplay {
    display: inline-block;
}


@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadein {
    animation-name: fadein;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeout {
    animation-name: fadeout;
    animation-duration: 1s;
    animation-fill-mode: forwards;

}

@keyframes uncovertop {
    from {
        height: 0px;
    }

    to {
        height: 20px;
    }
}

.uncovertop {
    animation-name: uncovertop;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.defaultcursor {
    cursor: default;
}

.halfvisible {
    opacity: 50%;
}