html,body {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto;
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
    font-size: 12pt; font-weight: bold;
    background: #17181A; color: #AAABAD;
    transition: background .5s ease;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }

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


.tbl { display: table; width: 100%; height: 100%; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; /*border: 1px solid #606163; box-shadow: inset 0 0 2px 2px #000;*/ }

.sidebar { width: 200px; min-width: 100px; height: 100%; }

.btntog {
    width: 35px; height: 20px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.btnball {
    position: absolute; top: 0; left: 0;
    width: 20px; height: 100%;
    border-radius: 20px;
    background: #ddd;
}
.btnbar {
    position: absolute; top: 50%; left: 0;
    width: 100%; height: 10px; margin-top: -5px;
    border-radius: 6px;
    background: #666;
}
.btnball.on {
    left: auto;
    right: 0;
}

#btntog1 { margin: 0 8px; }
#btntog2 { margin: 0 8px; }
#btntogwrap { margin: 0 8px; }

#notes { /* textarea */
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5); color: #fff;
    border: 0; padding: 8px;
    border-radius: 8px;
    font-size: 10pt;
    appearance: none;
    resize: none;
    transition: background .5s ease;
}

.nowrap {
    word-wrap: unset;
    white-space: nowrap;
}

/*
#wrap { width: 100%; height: 100%; display: flex; position: absolute; z-index: 9; }
#wrap #box { padding: 128px; background: #111113; margin: auto; display: inline-block; position: relative; }*/


.pad8 {
    height: 100%;
    padding: 8px;
}
.padshadow {
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 8px #000;
}

#bg {
    position: fixed; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background: transparent;
}
#backlay {
    position: fixed; top: 0; left: 0; z-index: 2;
    width: 100%; height: 100%;
    background: transparent;
}
#mcontent {
    position: fixed; top: 0; left: 0; z-index: 100;
    width: 100%; height: 100%;
    background: transparent;
}

.calc_color {
    background: rgb(72 35 133 / 0.62);
}
.calc_grey {
    background: rgba(42,30,39,.5);
}

.note_color {
    background: rgba(92,55,55,.8) !important;
    /*background: rgba(44,16,62,.9) !important;*/
}
.note_color_light {
    background: rgba(243,204,162,.75) !important;
    color: #000 !important;
}

.note_color_blur {
    background: rgba(92,55,55,.1) !important;
}
.note_color_light_blur {
    background: rgba(243,204,162,.05) !important;
    color: #000 !important;
}

.note_grey {
    background: rgba(0,0,0,.5) !important;
}
.note_grey_light {
    background: rgba(255,255,255,.5) !important;
    color: #000 !important;
}