/*
 * UI Styles
 * NaanTerm
 *
 */

html {
    position: relative;
    min-height: 100%;
    height: 100%;
}
body {
    font-family: Sans-Serif;
    height: 100%;
    margin: 0;
}

.h-100 {
    height:100%;
}
.w-100 {
    width:100%;
}

#NaanTerm {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    border:none;
}

#NaanREPLheader {
    display:flex;
    background-color: #303030;
    color: #808080;
    align-items: center;
}

#NaanREPL {
    border: 4px;
    border-style: solid;
    border-color: black;
    flex:1 1 auto;
    position:relative
}

.nrh_title {
    font-size: 15px;
    margin-left: 0.5em;
}

.nrh_cpu {
    margin-left: auto;
    border: 1px;
    border-color: #505050;
    border-style: solid;
    height: 60%;
    width: 20%;
}

.nrh_cpu_level {
    display: block;
    width: 0;
    height: 100%;
    background-color: blue;
}

.nrh_break {
    margin-left: 1em;
}

.nrh_reload {
    margin-left: 0.5em;
}

.nrh_openout {
    margin-left: 0.5em;
    margin-right: 1em;
}

/*
 * image colors
 *
 */

.svgi {
    max-width: 48px;
    max-height: 48px;
}
.svgi-b {
    max-width: 48px;
    max-height: 48px;
    background-color: black;
}
.svgi-w {
    max-width: 48px;
    max-height: 48px;
    background-color: white;
}
.svgi-blue {
    max-width: 48px;
    max-height: 48px;
    background-color: orange;
}

/*
 * images
 *
 */

.svg_break {
    width: 26px;
    height: 26px;
    -webkit-mask: url('exlib/images/break.svg') no-repeat 50% 50% / 20px 20px;
}

.svg_reload {
    width: 26px;
    height: 26px;
    -webkit-mask: url('exlib/images/reload.svg') no-repeat 50% 50% / 22px 22px;
}

.svg_openout {
    width: 26px;
    height: 26px;
    -webkit-mask: url('exlib/images/openout.svg') no-repeat 50% 50% / 20px 20px;
}