:root {
    --menu-width: 64px;
    --side-width: 320px;
    --menu-img-size: 38px;
    --top-size: 64px;
    --user-size: 256px;
    --col-tabs-border: #ddd;
    --col-tabs-text: #aaa;
    --col-tabs-text-sel: #333;
    /*
    --menu-width: 10vh;
    --side-width: 40vh;
    --menu-img-size: 6vh;
    --top-size: 10vh;
    --user-size: 50vh;
    */
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #fff;
}

#blocker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #80808020;
    z-index: 9999;
}

/* menu: */
.menu {
    position: absolute;
    left: 0px;
    top: 0px;
    border: 0;
    background-color: #222;
    width: var(--menu-width);
    height: 100%;
}
.menuitem {
    display: block;
    background-color: #222;
    color: #fff;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0px 0px;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    width: var(--menu-width);
    height: var(--menu-width);
}
.menuitem:hover {
    background-color: #444;
    transition: 0.2s;
}
.menuitem img { width:var(--menu-img-size); height:var(--menu-img-size); }
.menuitem.selected       { background-color:#444; }
.menuitem.selected:hover { background-color:#444; }

.menu a table {
    border: collapse;
    vertical-align: center;
    width: 100%;
    height: 100%;
}


/* sidebar: */
a.sidebtn {
    position: absolute;
    top: calc(var(--menu-width) / 2 - 12px);
    z-index: 100;
}
a.sidebtn img { width:24px; height:24px; cursor:pointer; }
a.sidebtn.closed {
    left: calc(var(--menu-width) - 12px);
    transition: 0.3s;
}
a.sidebtn.open {
    left: calc(var(--menu-width) + var(--side-width) - 24px);
    /*transform: rotate(180deg);*/
    transition: 0.3s;
}
div.sidebar {
    position: absolute;
    top: 0px;
    left: var(--menu-width);
    height: 100vh;
    background-color: #eee;
    overflow-y: auto;
}
div.sidebar.open {
    width: var(--side-width);
    transition: 0.3s;
}
div.sidebar.closed {
    width: 0px;
    transition: 0.3s;
}

table.sidebar {
    border-collapse: collapse;
    width: var(--side-width);
    border: 0;
    margin: 0;
}
table.sidebar > thead tr {
    height: var(--top-size);
    font-size: 18px;
    vertical-align: center;
}
table.sidebar > thead tr td {
    padding: 0px 10px;
}
table.sidebar > thead tr {
    background-color: #eee;
}
table.sidebar > tbody tr {
    background-color: #eee;
    /*cursor: pointer;*/
}
table.sidebar > tbody tr td,
table.sidebar > tbody tr th {
    padding: 0px 5px;
    text-align: left;
}
table.sidebar > tbody tr th {
    font-weight: bold;
}
table.sidebar > tbody a {
    text-decoration: none;
    color: #000;
}


/* content: */
div.page {
    position: absolute;
    top: 0px;
    border: 0px 0px;
    margin: 0px 0px;
    padding: 0px 0px;
    left: var(--menu-width);
    width: calc(100vw - var(--menu-width));
    height: 100%;
}
div.page.wide {
    left: var(--menu-width);
    width: calc(100vw - var(--menu-width));
    transition: 0.3s;
}
div.page.thin {
    left: calc(var(--menu-width) + var(--side-width));
    width: calc(100vw - var(--menu-width) - var(--side-width));
    transition: 0.3s;
}

div.phead {
    vertical-align: middle;
    position: relative;
    left: 0px;
    top: 0px;
    width: calc(100% - var(--user-size) - 1px);
    height: calc(var(--top-size));
    border-style: none;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    background-color: #f8f8f8;
}
div.puser {
    position: absolute;
    right: 0px;
    top: 0px;
    width: var(--user-size);
    height: calc(var(--top-size));
    border-bottom: solid 1px #ccc;
    background-color: #f8f8f8;
}
div.pbody {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    max-height: calc(100% - var(--top-size) - 1px);
    overflow-y: auto;
    background-color: #fff;
}

div.tabcontent {
    overflow-y: auto;
    width: 100%;
    overflow-x: auto;
    text-align: center;
}
div.hscroll {
    overflow-x: auto;
}
div.vscroll {
    overflow-y: auto;
}
div.dlg_bg div.tabcontent {
    max-height: 60vh;
}
div.buttons {
    text-align: center;
    padding: 4px 0;
}

snap.form {
}

/* fullpage: */
.fullpage {
    width: 100%;
    height: 100%;
}
select.lang {
    position: absolute;
    top: 10px;
    right: 10px;
}



/* tabs: */
table.tabs {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
table.tabs tr {
    height: 32px;
    border: 0;
    margin: 0;
    padding: 0;
}
table.tabs tr td {
    background-color: #bbb;
    color: #000;
    border: 0;
    margin: 0;
    padding: 4px 4px;
    outline: none;
    cursor: pointer;
    font-size: 17px;
    text-align: center;
}
table.tabs tr td:hover {
    background-color: #ddd;
    transition: 0.2s;
}
table.tabs tr td.selected {
    background-color: #fff;
}
table.tabs tr td.selected:hover {
    background-color: #fff;
}

/* blocks: */
table.block {
    /*width: 100%;*/
    /*margin: auto;*/
    display: inline-table;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
table.block tr {
    border: 0;
}
table.block tr td {
    /*background-color: #bbb;
    color: #000;*/
    padding: 4px 4px;
    vertical-align: top;
}

/* columns: */
table.column {
    /*width: 100%;*/
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
table.column tr {
    border: 0;
}
table.column tr td,
table.column tr th {
    padding: 4px 4px;
}
table.column tr th {
    text-align: right;
}


div.scrollable {
    width: calc(100% - 16px);
    max-height: calc(100% - 48px);
    overflow-y: auto;
    padding: 8px;
}

/* focus highlightings: */
.fhi {
    background-color: #ffffdd !important;
}
tr.subhdr .fhi {
    background-color: #eeeedd;
}
.fhi2 {
    background-color: #ffff88;
}
/* blue highlighting */
.bhi {
    background-color: #ddeeff;
}
tr.subhdr .bhi {
    background-color: #dde7ee;
}
.bhi2 {
    background-color: #88c6ff;
}
/*.hi { background-color: #ffff00; }*/
.highlight,
.highlight > td { background-color: #ffff80 !important; }


/* tables: */
.b { font-weight: bold; }
.u { text-decoration: underline; }
.i { font-style: italic; }
td.al, th.al { text-align: left !important; }
td.ar, th.ar { text-align: right !important; }
td.ac, th.ac { text-align: center !important; }
td.bl, th.bl { border-left: 1px solid #888 !important; }
td.nopad, th.nopad { padding: 0 0; }
td.mono, th.mono { font-family: monospace; }
td.tred { color: #a00; }
td.tgrn { color: #080; }
.vat { vertical-align: top; }
.vam { vertical-align: middle; }
.vab { vertical-align: bottom; }
.nowrap { white-space: nowrap; }
.minw { width:0%; }

tr.subhdr { background-color: #eee; }

td.temp.red     { color: #700; }
td.temp.green   { color: #070; }
/*td.temp.yellow  { color: #550; }*/

table.clean       { border-collapse: collapse; border-spacing: 0; border: 0px; }
table.clean tr    { border: 0px; }
table.clean tr    { border: 0px; }
table.clean tr td { border: 0px; }
table.centered {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}
table.input {
    border-collapse: collapse;
    border: 0;
}
table.input td {
    padding: 5px;
    text-align: left;
}
table.input th {
    padding: 5px;
    text-align: right;
}

table.data {
    border-collapse: collapse;
}
table.data thead {
    /*position: sticky;
    top: 0;
    z-index: 1000;*/
}
table.data tr {
    background-color: #f7f7f7;
}
table.data tr.odd {
    background-color: #f0f0f0;
}
table.data tr.hdr,
table.data tr.hdr:hover {
    background-color: #e8e8e8;
}
table.data td {
    border: 1px solid #cccccc;
    padding: 4px 10px;
}
table.data tr:hover,
table.data tr:hover th,
table.data th {
    background-color: #e8e8e8;
    border: 1px solid #cccccc;
    padding: 4px 10px;
}

table.list {
    border-collapse: collapse;
    overflow-x: auto;
}
table.list thead {
    cursor: default;
    /*position: sticky;
    top: 0;
    z-index: 1000;*/
}
table.list th {
    text-align: left;
    font-weight: bold;
    color: #000;/*#777*/
}
table.list tr {
    background-color: #ffffff;
    color: #000;
}
table.list tr.selected {
    background-color: #dddddd;
    color: #000;
}
table.list tr.s {
    text-decoration: line-through;
}
div.red table.list tr {
    background-color: #f44;
    color: #ff0;
}
table.list thead tr {
    background-color: #ffffff;
}
table.list tbody tr {
    background-color: #ffffff;
}
table.list > tbody > tr:hover {
    background-color: #eeeeee;
}
table.list td,
table.list th {
    border: 0;
    padding: 4px 10px;
}

table.sidebar tbody table.list {
    width: 100%;
}
table.sidebar tbody table.list tr {
    background-color: #eeeeee;
}
table.sidebar tbody table.list tbody tr:hover {
    background-color: #dddddd;
}
table.sidebar tbody table.list tr.selected {
    background-color: #dddddd;
    color: #000;
}


table.clist {
    border-collapse: collapse;
}
table.clist th {
    text-align: left;
}
table.clist tr {
    background-color: #ffffff;
    color: #000;
}
table.clist tr.s {
    text-decoration: line-through;
}
table.clist thead tr {
    background-color: #ffffff;
}
table.clist tbody tr {
    background-color: #ffffff;
}
table.clist tbody tr:hover {
    background-color: #eeeeee;
}
table.clist td,
table.clist th {
    border: 0;
    padding: 0px 0px;
}

table.grid {
    border-collapse: collapse;
    /*margin-left: auto;
    margin-right: auto;*/
}
table.grid > tbody > tr > td {
    padding: 2px 3px;
    white-space: nowrap;
}

table.valign_top > tbody > tr > td {
    vertical-align: top;
}
table.prices > tbody > tr > td {
    padding: 0px 8px;
}

div.cellscroll {/* NOT WORKS! */
    padding: 0 0;
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    /*float: left;
    /*display: table;
    table-layout: fixed;*/
}


a { color:#600; }
a.black { color:#000; text-decoration: none; }
a.grn   { color:#090; text-decoration: none; }
a.red   { color:#900; text-decoration: none; }

/* img */
img.s16 { width:16px; height:16px; }
img.s24 { width:24px; height:24px; }
img.s32 { width:32px; height:32px; }
img.incell { position:relative; top:2px; }
img.needhover       { filter:saturate(10%)  opacity(25%); }
img.needhover:hover { filter:saturate(100%) opacity(100%); }
img.spl { margin-left: 4px; }
img.spr { margin-right: 4px; }
img.invert { filter:invert(1); }

/* multi-level images */
/*
div.s32 { width:32px; height:32px; border:0; margin:0; padding:0; }
div.s24 { width:24px; height:24px; border:0; margin:0; padding:0; }
div.s16 { width:16px; height:16px; border:0; margin:0; padding:0; }
div.s32 img,
div.s24 img,
div.s16 img { width:100%; height:100%; }
img.tl, img.tr, img.bl, img.br { width:50%; height:50%; }
*/

/* tabs */
ul.tabs {
    display: flex;
    list-style: none;
    margin: 4px 0px;
    padding: 0 16px;
    border-bottom: 1px solid var(--col-tabs-border);
}
ul.tabs li {
    cursor: pointer;
    position: relative;
    top: 1px;
    padding: 4px 16px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #fff;
    border-bottom: 1px solid var(--col-tabs-border);
    color: var(--col-tabs-text);
    font-weight: bold;
}
ul.tabs li.selected {
    border-bottom: 1px solid #fff;
    border-left: 1px solid var(--col-tabs-border);
    border-top: 1px solid var(--col-tabs-border);
    border-right: 1px solid var(--col-tabs-border);
    color: var(--col-tabs-text-sel);
}
ul.tabs li:hover {
    color: var(--col-tabs-text-sel);
}

select:disabled,
input[type=text]:disabled,
input[type=number]:disabled {
    border: 1px solid #444;
    background-color: #eee;
    color: #222;
}

/* unfilled mandatory fields or row: */
input.unfilled {
    border: 2px solid #c00000;
    box-shadow: 0px 0px 8px #ff000080;
}
select.unfilled {
    border: 2px solid #c00000;
    box-shadow: 0px 0px 8px #ff000080;
}

/* misc */
.red { color: #e2251d; }
.ptr { cursor: pointer; }
.nodrop { cursor: no-drop; }
.notallowed { cursor: not-allowed; }
.default { cursor: default; }
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.b { font-weight: bold; }
.u { text-decoration: underline; }

li {
    text-align: left;
}

/* code */
code {
    max-height: 60vh;
    overflow-y: auto;
    /*font-family: monospace;*/
    font-style: ;
    /*font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;*/
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: monospace;
    /*font-optical-sizing: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;*/
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    /*
    appearance: auto;
    -webkit-rtl-ordering: logical;
    resize: auto;
    /**/
    cursor: text;
    overflow-wrap: break-word;
    background-color: field;
    /*column-count: initial !important;
    writing-mode: horizontal-tb !important;*/
    margin: 0em;
    border-width: 1px;
    border-style: solid;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    padding: 2px;
    white-space: pre-wrap;
}
code span.func { color:#040; }
code span.sym  { color:#044; }
code span.str  { color:#004; }
code span.err  { color:#600; }

/* headers: */
h1, h2, h3, h4 { text-align: center; }
h3 {
    padding-top: 16px !important;
    padding-bottom: 4px !important;
}
td.draggable > h3 {
    padding: 0 0 !important;
}

p.min {
    margin: 0 0;
    padding: 0 0;
}
p.wait {
    margin: 0 0;
    padding: 0 0;
    min-height: 16px;
}
p.hint {
    margin: 0 0;
    padding: 2px 0;
    font-size: 90%;
}

/* expressions debug related: */
div.eblock {
    padding-left: 32px;
}
table.elex {
    font-size: 8pt;
}
table.elex td {
    vertical-align: top;
}
table.elex th {
    font-weight: normal;
}
samp {
    background-color: #e0e0e0;
}


/* buttons */
.button {
    background-color: #e0e0e0;
    color: #303030;
    border: 1px solid #d0d0d0;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
    padding: 2px;
    margin: 0px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.button.small {
    border: 1px solid #d0d0d0;
    padding: 2px;
    margin: 0px 0px;
}
.button:disabled {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    color: #888 !important;
    filter:saturate(10%);
    cursor: not-allowed;
}
.button:disabled:hover {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    color: #888;
    filter:saturate(10%);
    cursor: not-allowed;
}
.button:hover {
    background-color: #b0b0b0;
    border: 1px solid #a0a0a0;
    color: #000;
}
.button p {
    margin-top: -3px;
	margin-bottom: 0px;
    margin-left: 10px;
	margin-right: 10px;
	font-weight: bold;
}
.button p img {
    margin-right: 5px;
    position: relative;
    top: 3px;
    width: 24px;
    height: 24px;
}
.button p label {
    position: relative;
    top: -4px;
    cursor: inherit;
}
.button:disabled p img {
    -webkit-filter: grayscale(80%);
    -moz-filter:    grayscale(80%);
    -ms-filter:     grayscale(80%);
    -o-filter:      grayscale(80%);
}

.button.green {
    background-color: #c0e0c0;
    color: #003000;
    border: 1px solid #50d050;
}
.button.green:hover {
    background-color: #50d050;
    color: #000000;
    border: 1px solid #10a010;
}
.button.red {
    background-color: #e0c0c0;
    color: #300000;
    border: 1px solid #d05050;
}
.button.red:hover {
    background-color: #d05050;
    color: #000000;
    border: 1px solid #a01010;
}
.button.yellow {
    background-color: #e0d8a0;
    color: #302800;
    border: 1px solid #c0b000;
}
.button.yellow:hover {
    background-color: #c0b020;
    color: #000000;
    border: 1px solid #807000;
}
.button.blue {
    background-color: #c0c0e0;
    color: #000030;
    border: 1px solid #5058d0;
}
.button.blue:hover {
    background-color: #7080d0;
    color: #000000;
    border: 1px solid #3038a0;
}