/*DIV:COLLAPSE-EXPAND*********************************************************/
/*
pixels/16=em, default text size: 1em
1vw = 1%
*/
.collapsibleheader {
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgrey;
    background-color: rgb(110, 226, 255);
    height: _ROWHEIGHT_;
}

.collapsibleheader:hover {
    background-color: rgb(110, 226, 255);
    color: white;
}

.collapsibleheader::before {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 11px;
    color: #FFC;
    float: left;
    margin-right: 5px;
}

.collapsibleheader.active {
    font-weight: bold;
    background-color: deepskyblue;
    color: yellow;
}

.collapsibleheader.active::before {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

.collapsibleheader.sub {
    background-color: deepskyblue;
    color: black;
    font-weight: bold;
}


.collapsiblecontent {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    margin: 0px;
    overflow: auto;
}

.collapsiblecontentexpand {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 0px;
    display: block;
    margin: 0px;
}

.collapsibleheaderbutton {
    background-color: #d3f040;
    cursor: pointer;
    border: #999 1px dotted;
    padding: 4px 8px;
    margin-left: 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

.collapsibleheaderbutton:hover,
.collapsibleheaderbutton:active {
    background-color: #bee114;
    font-weight: bold;
    color: rgb(210, 12, 12);
}

/*****************************************************************************/
html,
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: whitesmoke;
    font-size: 0.925em;
}

body.wait,
body.wait * {
    cursor: wait !important;
}

.footer {
    width: 100%;
    margin-top: 16px;
    height: _ROWHEIGHT_;
    background-color: blue;
}

.home {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
    height: -moz-calc(100% - (42px));
    height: -webkit-calc(100% - (42px));
    height: calc(100% - (42px));
    min-height: -moz-calc(100% - (42px));
    min-height: -webkit-calc(100% - (42px));
    min-height: calc(100% - (42px));
}

.home_menubar {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px auto;
    width: 100%;
    background-color: #1585d7;
    position: relative;
    height: 41px;
    border-bottom: 1px solid #CCC;
}

.alert {
    font-weight: bold;
    color: red;
}

.br {
    font-weight: bold;
    color: red;
}

.bb {
    font-weight: bold;
    color: blue;
}

.bg {
    font-weight: bold;
    color: darkgreen;
}

.bp {
    font-weight: bold;
    color: purple;
}

.bd {
    font-weight: bold;
    color: dodgerblue;
}

/********/
.pane_whole {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.pane_main {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
}

.pane_sub {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    padding: 4px;
}

.pane_block {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    overflow: auto;
    background-color: white;
    border: 4px solid whitesmoke;
}

.pane_block100 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    overflow: auto;
    background-color: white;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.pane_bottom {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    left: 0px;
    display: flex;
    bottom: 0px;
    height: 40px;
    background: transparent;
}

.pane_bottom_gap {
    width: 100%;
    height: 48px;
    clear: both;
}

/********/
.page_head {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: 11pt;
    font-weight: bold;
    padding: 3px;
}

.pageheaderglobal {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11pt;
    margin: 10px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
}

.pageheader_title {
    color: rgb(255, 255, 118);
    padding-left: 16px;
    background-image: url('imgs/bt_reload.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12px;
}

.pageheader_alert {
    color: rgb(255, 255, 118);
    background-image: url('imgs/bt_bell.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    float: right;
    width: 32px;
}

.search {
    background-image: url('imgs/bt_find.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
}

.pageheader_alert_number {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 2px;
    margin-top: 2px;
    float: right;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    font-size: 8pt;
    display: none;
}

.pageheader {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(158, 2, 3);
    height: 28px;
    padding-left: 4px;
    font-weight: bold;
    color: rgb(255, 255, 118);
    width: 100%;
    font-size: 10pt;
    display: flex;
    align-items: center;
}

.pageheader span {
    display: table-cell;
    vertical-align: middle;
}

.pageheader button {
    /* button position */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0px;
    margin-top: 2px;
    margin-right: 4px;
    float: right;
    width: 24px;
    height: 22px;
    border-radius: 50%;
    background: #742894;
    color: #FF0;
    border: 1px solid #bd88d3;
    cursor: pointer;
}

.pageheader button:hover {
    background: rgb(255, 153, 0);
}

.pagecontent {
    padding: 4px;
}

/*********************************/
.row {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-bottom: 1px dotted #fffefe;
}

span.dat {
    font-weight: bold;
    color: #F0F
}

span.dagiao {
    font-weight: bold;
    color: #060;
}

span.conthieu {
    font-weight: bold;
    color: #F00;
}

span.goods_color {
    font-weight: bold;
    color: #C000C0;
}



.goods_low {
    font-weight: bold;
    color: #F00;
}

.goods_stockmax {
    color: darkgreen;
    font-weight: bold;
}

.goods_code {
    font-weight: bold;
    color: violet;
}

.goods_color {
    font-size: 9pt;
    font-style: italic;
    padding-left: 10px;
    font-weight: normal;
    color: #606;
}

.goods_cmdremove {
    margin-right: 4px;
    padding: 2px 6px;
    font-weight: bold;
    background-color: #b2f8f8;
    color: #ff0000;
    border-radius: 20%;
}

.goods_image {
    max-width: 60px;
    max-height: 60px;
}

/*********************************/

table.alter {
    background-color: darkgrey;
}

table.alter tr:nth-child(odd) {
    background: rgb(239, 239, 233);
    border-bottom: 1px dotted gainsboro;
}

table.alter tr:nth-child(even) {
    background: #FFF;
    border-bottom: 1px dotted gainsboro;
}

table.alter tr:hover {
    background: #CCC;
    cursor: pointer;
}

.table.alter tr.heading {
    font-weight: bold;
    background: #06F;
}

table.alter td {
    padding: 4px;
    border-right: 1px dotted gainsboro;
}

table.alter td.heading {
    font-weight: bold;
    background: rgb(110, 226, 255);
    border-right: 1px dotted gainsboro;
}

table.filter_area {
    width: 100%;
    background: #dbffdb;
    border-collapse: collapse;
}

table.filter_area td {
    padding: 4px;
    border-bottom: 1px dotted #ffffff;
}

table.downgap {
    border: 0px;
}

table.downgap td {
    padding-bottom: 6px;
}

table.form td {
    padding: 4px;
}

span.number {
    color: rgb(8, 97, 242);
    font-weight: bold;
}

tr.invoice_sum {
    border: 1px dotted #000000;
    font-family: Arial;
    font-size: 10pt;
    padding: 4px;
    background-color: #CFF;
    color: #000000
}

tr.goods_head {
    border: 1px dotted #000000;
    font-weight: bold;
    background: lightskyblue;
    color: #000;
    height: _ROWHEIGHT_;
    padding: 0px 4px;
}

tr.invoice_head {
    border: 1px dotted #000000;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding: 4px;
    background-color: #0000C0;
    color: #FFFFFF
}

tr.invoice_export {
    border: 1px dotted #000000;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    background-color: #CCFFFF;
    color: #F00
}

tr.invoice_import {
    border: 1px dotted #000000;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    background-color: #FFC;
    color: #060
}

td.cat {
    padding-top: 3px;
    padding-bottom: 3px;
    font-family: Arial;
    font-weight: bold;
    color: #800000;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

td.goods_head {
    border: 1px dotted #999;
    font-weight: bold;
    background-color: lightskyblue;
    vertical-align: middle;
    height: _ROWHEIGHT_;
    padding: 0px 4px;
}

td.goods_item {
    border: #999 1px dotted;
    vertical-align: middle;
    padding: 4px;
}

td.goods_item_collapsible {
    border: #999 1px dotted;
    vertical-align: middle;
    padding: 4px;
    background-color: #FFF;
}

td.goods.import {
    color: #060;
}

td.goods.export {
    color: #F00;
}

td.goods_placeholder {
    background-color: #FFF;
}

td.invoice_head {
    border: 1px dotted #000000;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding: 5px;
    background-color: #0000C0;
    color: #FFFFFF
}

td.invoice_discount {
    background-color: #CCFFFF;
    padding: 2px;
    font-size: 10pt;
}

td.cmd {
    padding: 7px
}

td.quantity {
    width: 50px;
    font-weight: bold;
    background-color: #FFFFC0;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px #C0C0C0 solid
}

td:hover.link {
    background-color: #FFFFCC;
    cursor: hover;
    text-decoration: none;
    color: #FF0000;
    font-size: 10pt
}

td.category {
    background-color: #F2A41C;
    color: #004000;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    width: 50px;
}

td.keyboard {
    background-color: #CCFFFF;
    color: #0000FF;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 10pt;
}

td:hover.keyboard {
    background-color: #FFFFCC;
    cursor: hover;
    cursor: pointer;
    color: #FF0000;
    text-align: center;
    font-size: 10pt;
}

table td.goods {
    font-family: Arial;
    padding: 4px;
    border-bottom: 1px #C0C0C0 solid
}

table td.link {
    background: rgb(218, 249, 218);
    font-size: 10pt;
    cursor: hover;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    width: 50px;
    ;
    border-bottom: 1px #C0C0C0 solid;
    border-left: 1px #FFFFFF solid
}

table td.quantity {
    font-weight: bold;
    text-align: center;
    border-bottom: 1px #C0C0C0 solid
}

table td:hover.link {
    background-color: #FFFFCC;
    cursor: hover;
    text-decoration: none;
    color: #FF0000;
    font-size: 10pt
}

table td.category {
    background-color: #F2A41C;
    color: #004000;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    width: 50px;
}

table td.keyboard {
    background-color: #CCFFFF;
    color: #0000FF;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 10pt;
}

table td:hover.keyboard {
    background-color: #FFFFCC;
    cursor: hover;
    cursor: pointer;
    color: #FF0000;
    text-align: center;
    font-size: 10pt;
}

p.heading {
    text-align: center;
    background-color: #f6b71a;
    padding: 6px;
    margin: 0px;
    color: #0000FF;
    font-weight: bold;
}

p.headingdim {
    background-color: #C0C0C0;
}

p.warning {
    text-align: center;
    color: red;
    padding: 6px;
    margin: 0px;
    font-weight: bold;
    font-size: 12pt;
}

td.longtext {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

textarea {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 2px
}

select {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid #eaeaea;
}

input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid #eaeaea;
}

.input_dropdown {
    background: #F0FC9A url('imgs/bt_sort.gif') no-repeat right center
}

.input_base {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: _ROWHEIGHT_;
}

.input_invoice {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0px;
    border-bottom: 1px solid #BBB;
    height: _ROWHEIGHT_;
}

.input_imagewait {
    background-image: url('imgs/bt_loading.gif');
    background-position: right center;
    padding-right: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
}

.input_imageok {
    background-image: url('imgs/bt_ok.gif');
    background-position: right center;
    padding-right: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
}

.input_imageerror {
    background-image: url('imgs/bt_error.png');
    background-position: right center;
    padding-right: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
}

button {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0px
}

checkbox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 0px
}

/*****************************************************************************/
.checkboxex {
    width: 32px;
    height: 24px;
}

/*****************************************************************************/
a {
    text-decoration: none;
}

input.date {
    padding-left: 5px
}

hr.linebreak {
    border: none;
    border-top: 1px dotted rgb(242, 233, 242);
    color: #fff;
    height: 1px;
    width: 100%;
}

br.large {
    content: "";
    display: block;
    margin: 4px 0px;
}

.paragraph {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px;
    width: 100%;
}

/*****************************************************************************/
.number_highlight {
    border: 2px dotted #c7c7c7;
    color: white;
    background-color: #630159;
    border-radius: 8px;
    padding: 2px 4px;
    margin-right: 4px;
}

.highlight_hour {
    border: 1px #c7c7c7;
    color: #e40a4f;
    border-radius: 50%;
    padding: 4px;
    font-size: 8pt;
    font-weight: bold;
}

.readonly {
    background-color: #FFFFC4;
}

/*****************************************************************************/
.list_item {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px dotted lightgrey;
    white-space: nowrap;
    height: auto;
    overflow-y: auto;
}

.list_item:nth-child(even) {
    background: #FFF
}

.list_item:nth-child(odd) {
    background: rgb(225, 252, 252)
}

.list_item:hover {
    background: #FFC;
}

.list_item.heading {
    font-weight: bold;
    background: rgb(110, 226, 255);
    margin: 0px;
    border: 0px;
}

.list_item.main {
    background-color: #fedcaf;
}

.list_item.sub {
    display: block;
    width: 100%;
    float: left;
    background-color: inherit;
    border-top: 1px dotted lightgrey;
    border-bottom: 1px solid darkgrey;
}

.list_item.rightcmdremove {
    background-image: url("/imgs/bt_remove.png");
    background-repeat: no-repeat;
    background-position: right 4px;
    background-size: 12px;
}

.list_item.collapsible {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_pin.png");
    background-repeat: no-repeat;
    background-position: left 8px;
    background-size: 12px;
    cursor: pointer;
}

.list_item.collapsible.active {
    background: deepskyblue;
    background-image: url("/imgs/bn_pinoff.png");
    background-repeat: no-repeat;
    background-position: left 8px;
    background-size: 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 8px;
    padding: 2px 0px;
    border: 2px deepskyblue solid;
}

.list_item.collapsiblecontent {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px 0px;
    margin: 0px 0px;
    display: none;
    overflow: auto;
    width: calc(100% - 0px);
    border-radius: 0px;
    background: deepskyblue;
}

.listbox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #BBB;
    background-color: #EEE;
    border-radius: 1px;
    height: auto;
    min-height: 40px;
    position: relative;
    display: inline-block;
}

.list_item.title {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    color: #000;
    display: flex;
    align-items: center;
    background-color: rgb(190, 242, 255);
    padding-left: 4px;
}

.list_item.click {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_rightmark.png");
    background-repeat: no-repeat;
    background-position: left 8px;
    background-size: 8px;
    cursor: pointer;
    color: blue;
}

.list_item_content {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 36px;
    border: 1px solid #BBB;
}

.list_item_content.click {
    color: #0000C0;
    background-image: url("/imgs/bt_rightmark.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 8px;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}


.list_item_content.sub {
    display: flex;
    align-items: center;
}

.list_item_content.padding {
    padding: 5px 0px;
}

.list_item_contactinfo {
    padding: 7px 0px;
    color: #600;
    border-top: 1px dotted #CCC;
    border-bottom: 0px dotted #CCC;
}

.list_item_contactinfo.second {
    color: #600;
}

/**************************/
.menu_popup_group {
    clear: both;
    width: 100%;
}

.menu_popup_item {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(192, 242, 255);
    border: 1px dotted #ffffff;
    width: 100%;
    height: 40px;
    float: left;
    font-weight: bold;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.menu_popup_item.w50 {
    width: 50%;
}

.menu_popup_item:hover {
    background: #F29D2E;
}

.menu_popup_item.selected {
    border: 2px white solid;
    color: greenyellow;
    font-weight: bold;
    background: green;
}

.menu_popup_item.add {
    background-image: url('/imgs/bt_add.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.home {
    background-image: url('/imgs/bt_home.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.continue {
    background-image: url('/imgs/bt_rightmark.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.edit {
    background-image: url('/imgs/bt_edit.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.stop {
    background-image: url('/imgs/bt_deny.png');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.print {
    background-image: url('/imgs/bt_print.gif');
    background-position: left center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.share {
    background-image: url('/imgs/bt_share.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.tax {
    background-image: url('/imgs/bt_tax.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.finish {
    background-image: url('/imgs/bt_finish.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.rb {
    border-right: 1px solid white;
}

.menu_popup_item.remove {
    color: red;
    background-image: url('/imgs/bt_remove.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.cancel {
    color: violet;
    background-image: url('/imgs/bt_cancel.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.lookup {
    color: darkblue;
    background-image: url('/imgs/bt_find.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.reset {
    color: darkblue;
    background-image: url('/imgs/bt_reset.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

.menu_popup_item.swap {
    color: darkblue;
    background-image: url('/imgs/bt_replace.png');
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position-x: 16px;
}

/******************************************************/
/* Links inside the dropdown */
.divtablist {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 4px;
    margin: 4px;
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width: calc(50% - 8px);
    height: 40px;
    border: 1px;
    float: left;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 40px;
    background-color: rgb(168, 138, 153);
}

.divtablist:hover {
    background: rgb(222, 189, 205);
    color: #0000C0;
    font-weight: bold;
}

.divtablist.focus {
    font-weight: bold;
    border: 1px dotted #d94646;
    background: #FFC;
    color: #0000C0;
}

.divtablist.focus:hover {
    color: #08a900;
}

.divtablisttitle {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 85%;
    float: left;
}

.divtablistbuttonclose {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    float: right;
    width: 15%;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
    border: 1px dotted #defbde;
    margin-top: 6px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    color: rgba(252, 41, 41, 0.507);
}

.divtablistbuttonclose:hover {
    background: rgba(252, 41, 41, 0.507);
    color: #00C000;
}

/***********/
.divtable {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    overflow: auto;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-left: lightgray 0px dotted;
    border-bottom: lightgray 0px dotted;
}

.divrow {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-row;
    border-top: 0px dotted lightgray;
    width: 100%;
    cursor: pointer;
    height: _ROWHEIGHT_;
}

.divrow.multiline {
    border-bottom: 2px solid darkblue;
}

.divrow.highlight {
    color: darkblue;
    font-weight: bold;
}

.divrow.selected {
    color: darkblue;
    font-weight: bold;
}

.divrow.red {
    color: red;
}

.divrow.dgreen {
    color: #060;
    font-weight: bold;
}

.divrow.material {
    font-style: italic;
    font-size: 90%;
    color: #000;
}

.divrow.mixed {
    font-weight: bold;
    color: darkviolet;
}

.divrow:nth-child(even) {
    background: #FFF
}

.divrow:nth-child(odd) {
    background: rgb(241, 254, 254)
}

.divrow:hover {
    background: rgb(255, 237, 133);
}

.divrow.heading {
    font-weight: bold;
    background: rgb(110, 226, 255);
}

.divrow.headingsub {
    font-weight: bold;
    background: rgb(241, 254, 254);
    color: dimgray;
}

.divrow.heading0 {
    font-weight: bold;
    background: #06F;
}

.divrownofocus {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-row;
    width: 100%;
}

.divcell {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    padding: 4px;
    border-right: lightgray 1px dotted;
    vertical-align: middle;
    position: relative;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.divcell.collapsible {
    background-image: url("/imgs/bt_pin.png");
    background-repeat: no-repeat;
    background-position: left 8px;
    background-size: 12px;
    cursor: pointer;
    padding-left: 16px;
    border-radius: 8px 0px 0px 0px;
}

.divcellmultirowup {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 4px;
    border-right: lightgray 1px dotted;
    font-weight: bold;
    vertical-align: middle;
    position: relative;
}

.divcellmultirowdown {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 2px;
    border-top: lightgray 1px dotted;
    vertical-align: middle;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    width: 100%;
}

.divcell_input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0px;
    color: #0000C0;
    position: absolute;
}

.divcell.padding0 {
    padding: 0px;
}

.divcell.click {
    background-image: url("/imgs/bt_rightmark.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 8px;
    padding-left: 8px;
    min-height: 32px;
}

.divcell_color {
    font-weight: bold;
    text-align: center;
    font-style: italic;
    color: darkmagenta;
}

.divcell.cmd {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    padding: 0px;
    border: #999 1px dotted;
    padding: 0px;
    vertical-align: middle;
    text-align: center;
}

.divcell.bottomborder {
    border: 0px;
    border-bottom: #999 1px dotted;
}

.divcell.right {
    text-align: right;
}

/******************************/
.gridcell {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 4px 8px;
    float: left;
    border-right: 1px dotted lightgray;
    min-height: _ROWHEIGHT_;
    display: flex;
    align-items: center;
    position: relative;
}

.gridcell.padding0 {
    padding: 0px;
}

.gridcell.cmd {
    width: 40px;
    height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px dotted green;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

.gridcell.check {
    text-align: center;
    cursor: pointer;
    justify-content: center;
    font-weight: bold;
    color: blue;
}

.gridcell.checkeditable {
    text-align: center;
    cursor: pointer;
    justify-content: center;
    font-weight: bold;
    color: blue;
    background-image: url("/imgs/bt_edit.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 6px;
}

.gridcell.cmd:hover {
    border: 1px dotted yellow;
    background-color: green;
}

.gridcell.cmd_remove {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_remove.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    cursor: pointer;
}

.gridcell.cmd_edit {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_edit.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    cursor: pointer;
}

.gridcell.cmd_move {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_move.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    cursor: pointer;
}

.gridcell.cmd_tax {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_tax.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    cursor: pointer;
}

.gridcell.click {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_menu.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 8px;
    padding-left: 12px;
    cursor: pointer;
    color: blue;
}



.asdivcell_input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 1px);
    top: 0px;
    color: darkblue;
    background-color: inherit;
    position: absolute;
    border: 0px;
    padding-right: 4px;
    background-image: url("/imgs/bt_edit.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 6px;
}

.asdivcell_input:focus {
    background-color: white;
    color: black;
}




/******************************/
.btnfloatbottom {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(31, 207, 46);
    background-color: #2196F3;
    box-shadow: 0 0 0 1px #bee21c;
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
    bottom: 8px;
    right: 8px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    z-index: 1;
}

.btnfloatbottom:hover {
    font-weight: bold;
    background: #00bd68;
}

.btnfloatbottom:disabled,
.btnfloatbottom[disabled] {
    border: 1px solid #c5c3c3;
    background-color: #0080ff6f;
    color: #b6b1b1;
    cursor: default;
    font-weight: bold;
}


.buttonincell {
    width: 100%;
    height: 100%;
    display: block;
    background: inherit;
    border: 0px dotted rgb(7, 125, 7);
    color: rgb(7, 125, 7);
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
}

.buttonincell:hover {
    background: #F90;
}

.buttonincell.red {
    background: #F00;
}

.buttonincell.remove {
    border: 0px dotted #FF0000;
    color: #F00;
    background: inherit;
    font-size: 12pt;
    font-weight: bold;
}

.buttonincell.addimage {
    background-image: url('/imgs/bt_add.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

.buttonincell.selectimage {
    background-image: url('/imgs/bt_select.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

/******************************/
.btnintext {
    padding: 4px;
    font-weight: bold;
    font-size: 12pt;
    color: red;
    cursor: pointer;
}

.btnintext:hover {
    background-color: rgb(249, 178, 47);
}

/*****************************/
.buttonbig {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: dodgerblue;
    font-weight: bold;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8b7f7f;
    cursor: pointer;
}

.buttonbig.light {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px;
    background-color: rgb(244, 255, 244);
    color: #0000C0;
    border: 1px solid #bdb6b6;
    border-radius: 5px;
}

.buttonbig:hover,
.buttonbig:focus {
    color: #FFFF00;
    background-color: #05982a;
}

.buttonbig:disabled,
.buttonbig[disabled] {
    border: 1px solid #a8a8a8;
    background-color: #71b8ff;
    color: #666666;
    cursor: default;
}

.buttonbig.more {
    background-image: url('/imgs/bt_more.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
}

.buttonbig.share {
    background-image: url('/imgs/bt_share.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 20px;
}

.buttonbig.cart1s {
    background-image: url('/imgs/cart.png');
    background-repeat: no-repeat;
    background-position: left 6px;
    background-size: 20px;
}

.buttonbig.save {
    background-image: url('/imgs/bt_save32.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
    background-color: #060;
}

.buttonbig.print {
    background-image: url('/imgs/bt_print.gif');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.ship {
    background-image: url('/imgs/obj_ship.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.new {
    background-image: url('/imgs/bt_empty.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.add {
    background-image: url('/imgs/bt_add.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.remove {
    background-image: url('/imgs/bt_remove.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
    background-color: lightcoral;
}

.buttonbig.select {
    background-image: url('/imgs/bt_select.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.refresh {
    background-image: url('/imgs/bt_reload.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
}

.buttonbig.edit {
    background-image: url('/imgs/bt_edit.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
    background-color: lightseagreen;
}

.buttonbig.cancel {
    background-image: lightgrey url('/imgs/bt_cancel.png');
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 20px;
    background-color: lightblue;
}

/*******************/
.buttoninheader {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #0080FF;
    color: white;
    padding: 2px 8px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #8b7f7f;
    display: inline-block;
    cursor: pointer;
}

.buttoninheader.add {
    margin-left: 5px;
    padding: 0px 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.buttoninheader.remove {
    margin-right: 5px;
    padding: 0px 4px;
    color: #FFF;
    background-color: #F30;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
}

/* Dropdown button on hover & focus */
.buttoninheader:hover,
.buttoninheader:focus {
    color: #FFFF00;
    background-color: #05982a;
}

.buttonneargoods {
    margin-left: 5px;
    padding: 2px 8px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    background-color: #b3ec57;
    position: relative;
}

/*********/
.btndlg {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: 0px dotted;
    font-weight: bold;
    cursor: pointer;
    background-color: #CCC;
    margin-top: 8px;
}

.btndlg:hover {
    background-color: #EEE;
}

.btndlg.save {
    background-image: url('/imgs/bt_save32.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-color: rgb(174, 244, 174);
    border-right: 1px solid #FFFFFF;
}

.btndlg.rb {
    border-right: 1px solid #FFFFFF;
}

.btndlg.ok {
    float: right;
    text-align: center;
    background-color: rgb(174, 244, 174);
}

.btndlg.okwprint {
    background-color: #fdbaf0;
}

.btndlg.cancel {
    float: left;
    text-align: center;
    background-color: #c9c7c3;
}

.btndlg.default {
    background-color: rgb(169, 216, 250);
    color: #742894;
}

.btndlg.remove {
    background-color: rgb(240, 210, 210);
    color: red;
}

.btnmenu {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #050164;
    padding: 8px 8px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    height: 30px;
    border: 1px dotted #00C000;
    cursor: pointer;
}

.btnmenu:hover,
.btnmenu:focus {
    color: black;
    background-color: #FF9;
}

/**************************************************************/
.btn_mainheader {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: _ROWHEIGHT_;
    border: 1px solid rgb(158, 241, 165);
    background-color: #f3f6ea;
    box-shadow: 0 0 0 0px #bee21c;
    color: #000;
    cursor: pointer;
    font-weight: bold;
}

.btn_mainheader:hover {
    background-color: #0080FF;
    border: 1px solid rgb(236, 244, 15);
}

.btn_mainheader.circle {
    border-radius: 50%;
    float: left;
    margin: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    width: _ROWHEIGHT_;
}

.btn_mainheader.plusminus {
    float: left;
    border-radius: 0px;
    width: 36px;
    background-color: #eaeaea;
    border: 0px;
    box-shadow: 0px;
}

.btn_mainheader.square {
    border-radius: 5px;
    width: auto;
    width: 36px;
}

.btn_mainheader.selected {
    background-color: #bee21c;
    border: 1px solid #C94449;
}

.btn_mainheader.squarebig {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5%;
    width: auto;
    height: 44px;
    width: 30%;
    padding: 4px;
    float: left;
    margin: 5px;
    background-repeat: no-repeat;
    background-position: center top;
    background-position-y: 4px;

    padding-top: 20px;
    background-size: 16px;
}

.btn_mainheader.squarebig.selected {
    background-color: #FFFFC0;
    border: 1px red solid;
}

.btn_mainheader.circle.more {
    float: right;
    background-image: url('/imgs/bt_more.png');
}

/*****************************************************************************/
.pageindex {
    width: 100%;
    height: 32px;
    margin-top: 10px;
    margin-bottom: 10px;
}

a.pageindex {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    float: left;
    margin: 2px;
    border: #FF9 1px solid;
    background: #6FC;
    text-align: center;
    padding-top: 8px;
    font-size: 15px;
    border-radius: 5px;
}

a.pageindex:hover {
    background: rgb(71, 198, 3);
}

a.pageindexfocus {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 2px;
    float: left;
    border: #FF9 1px solid;
    background: #F60;
    font-weight: bold;
    text-align: center;
    padding-top: 8px;
    font-size: 15px;
    color: #fefefe;
    border-radius: 5px;
}


/*****************************************************************************/
.invoice_list_head {
    color: #FFFF00;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background: #800000;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.invoice {
    width: 100%;
    margin-bottom: 8px;
    overflow: auto;
    background-color: #FFFFFF;
}

.invoice_head {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #FFFFC0;
    padding: 4px;
    color: black;
    font-weight: bold;
    overflow: auto;
    width: 100%;
    display: flex;
    align-items: center;
}

.invoice_contact {
    color: #603;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
}

.invoice_head_money {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px;
    color: #ac0165;
    font-weight: bold;
}

.invoice_head_import {
    background: #FFC0C0;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #0000C0;
    font-weight: bold;
    margin-bottom: 5px;
}

.invoice_goodslist {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    height: auto;
    overflow: auto;
    background: rgb(160, 160, 160);
    color: black;
    padding-bottom: 4px;
    min-height: 200px;
    overflow: auto;
    border: solid 1px darkgray;
}

.invoice_goodslist_header {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    font-weight: bold;
    background-color: whitesmoke;
    border-bottom: 1px dotted darkgray;
}

.invoice_goodslist_list {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.invoice_goodslist_list_item {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 4px;
    border-right: 1px dotted darkgray;
}

.sumary {
    color: #400040;
    font-size: 10pt;

    background: #C0FFFF;
    padding-top: 5px;
    padding-bottom: 5px;
}

.item_head {
    padding-top: 15px;
    padding-bottom: 5px;
    font-weight: bold;
    border-top: #F00 dotted 1px;
}

/**********************MODAL***********************/
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    font-size: 10pt;
}

/* Modal Content/Box */
.modal .modal-content {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fefefe;
    margin: 48px auto;
    /* 64px from the top and centered */
    padding: 0px;
    border: 1px solid #888;
    width: 96%;
    /* Could be more or less, depending on screen size */
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
}

/* The head */
.modal .head {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFF;
    float: left;
    font-size: 10pt;
    height: _ROWHEIGHT_;
    font-weight: bold;
    background-image: linear-gradient(to bottom, rgb(21, 133, 215), rgb(155, 211, 251));
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 2px 4px;
}

/* The Close Button */
.modal .button {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #aaa;
    float: right;
    font-size: 20px;
    height: _ROWHEIGHT_;
    font-weight: bold;
    background-image: linear-gradient(to bottom, rgb(21, 133, 215), rgb(155, 211, 251));
    width: 36px;
    text-align: center;
}

.modal .button:hover,
.modal .button:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

.modal .button.share {
    color: greenyellow;
    font-weight: bold;
    margin: 4px;
    border-radius: 4px;
}

.modal .button.share:hover,
.modal .button.share:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

/*********END - MODAL**************/

/****************BASE_UI*******************/
/* Customize the label (the container) */
.checkbox_container {
    display: flex;
    position: relative;
    padding-left: 24px;
    margin: 0px;
    padding-top: 3px;
    font-size: 10pt;
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox_checkmark {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: inherit;
    border: 1px solid #808080;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input~.checkbox_checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked~.checkbox_checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked~.checkbox_checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkbox_checkmark:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 6px;
    top: 4px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*PRINT*/
.print_body {
    background-color: #FFFFFF;
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

.print_header_footer {
    font-size: 11pt;
    font-weight: bold;
}

.print_company {
    font-size: 12pt;
    font-weight: bold;
}

.print_invoice_title {
    font-size: 11pt;
    font-weight: bold;
    margin: 5px;
}

.print_table {
    font-size: 9pt;
}

.print_table td {
    padding: 5px;
}

.print_table_goodslist td {
    font-size: 9pt;
    padding: 5px;
    border: dotted #000 1px;
}

.print_obj_name {
    font-size: 10pt;
    font-weight: bold;
}

.print_goods_head {
    font-weight: bold;
}


.print_row {
    font-size: 9pt;
    display: table-row;
    width: 100%
}

.print_row_hidden {
    font-size: 9pt;
    display: none;
    width: 100%
}

.print_rowb {
    font-size: 9pt;
    display: table-row;
    width: 100%;
    font-weight: bold;
}

.print_sum_rightcol {
    width: 100px;
    display: table-cell;
    float: right;
    text-align: right;
    padding: 3px;
}

.print_sum_leftcol {
    display: table-cell;
    float: left;
    ;
    padding: 3px;
}

/*DIV*/
.filter_area {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background: rgb(220, 254, 254);
    font-weight: bold;
    border-collapse: collapse;
    padding: 4px 0px;
    overflow: auto;
}

.wrapper {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    width: 100%;
    float: left;
    margin: 4px 0px;
}

.wrapper.w50 {
    width: 50%;
}

.wrapper-content {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: white;
    border-radius: 5px;
    border: 1px dotted lightgrey;
    width: 100%;
    height: 100%;
    padding: 4px;
}

.wrapper-content-hightlight {
    font-size: 12pt;
    color: #0000C0;
    font-weight: bold;
    margin: 4px 0px;
    width: 100%;
}

.wrapper-content-popup {
    margin: 4px 0px;
    font-weight: bold;
    color: purple;
    padding: 4px 0px;
    padding-left: 16px;
    border-bottom: 1px dotted #b3ec57;
    border-radius: 4px;
    cursor: pointer;
    background-image: url('imgs/bt_rightmark.png');
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 16px;
}

/******************************************************/
.inputex {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: white;
    padding: 1px;
    border-radius: 1px;
    position: relative;
    display: inline-block;
    width: 100%;
    border: 0px solid #BBB;
    border-bottom: 1px solid #BBB;
    height: _ROWHEIGHT_;
}

.inputex_imagestatus {
    position: absolute;
    left: 2px;
    width: 24px;
    height: 24px;
    background-image: url('imgs/noimage.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0px solid #126060;
}

.inputex_input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0px;
    height: 100%;
    width: 100%;
    padding-left: 4px;
    float: left;
    border: 0px;
}

.inputex_inputex {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0px;
    height: 100%;
    width: calc(100%);
    padding-left: 30px;
    padding-right: 16px;
}

.inputex_autohidegroup {
    /* button position */
    position: absolute;
    right: 1.4px;
    top: 1.3px;
    bottom: 0;
    /* button appearane */
    justify-content: center;
    align-items: center;
    width: auto;
    height: -moz-calc(100% - (3px));
    height: -webkit-calc(100% - (3px));
    height: calc(100% - (3px));
    appearance: none;
    border: 0px solid #000;
    border-radius: 0%;

    margin: 0;

    color: black;

    /* hide the button initially */

    display: none;
}

.inputex_autohidegroup_touched:focus+.inputex_autohidegroup,
.inputex_autohidegroup_touched:hover+.inputex_autohidegroup,
.inputex_autohidegroup_touched+.inputex_autohidegroup:hover {
    display: inline-flex;
}

.inputex_autohidebutton {
    position: relative;
    width: 24px;
    height: 100%;
    border: 0px;
    border-radius: 10%;
    background: #d5e7d5;
    float: right;
    font-size: 13px;
    cursor: pointer;
    margin: 1px;
    padding: 0px;
    line-height: 0px;

}

.inputex_autohidebutton:hover {
    background: rgb(255, 153, 0);
}

.inputex_button {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* button position */
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 0;
    /* button appearane */
    width: 36px;
    height: -moz-calc(100% - 4px);
    height: -webkit-calc(100% - 4px);
    height: calc(100% - (4px));
    border: 0px solid #000;
    border-radius: 10%;
    padding: 0px;
    line-height: 0px;
    margin-right: 2px;
    background: #d5e7d5;
    color: black;

    /* hide the button initially */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputex_button:hover {
    background: rgb(255, 153, 0);
}

.inputex_button.speech {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("/imgs/bt_mic48.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    background-color: inherit;
    cursor: pointer;
}

.inputex_button.speech.selected {
    border: 1px solid green;
}

.inputex_button.speech:hover {
    border: 1px solid green;
}

/*COMBOBOX*****************************************************/
.span-autocut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

/**INVOICE***/
.shippingcode {
    font-style: italic;
    font-weight: normal;
    color: #800000;
}

.shippinguser {
    font-style: italic;
    font-weight: normal;
    color: #F0F;
}

/***********/
.subinfo {
    font-size: 8pt;
    font-weight: 400;
    color: black;
}

.subinfo.bb {
    font-weight: bold;
    color: blue;
}

.subinfo.bp {
    font-weight: bold;
    color: purple;
}

.subinfo.italic {
    font-style: italic;
}

.maininfo {
    font-weight: bold;
}

.highlightinfo {
    color: darkblue;
    border-radius: 4px;
    padding: 4px;
    background-color: orange;
}

/*********/
.list_obj_hor {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    white-space: nowrap;
}

.list_obj_hor::-webkit-scrollbar {
    display: none;
}

.list_obj_hor {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

}

/*RADIO_BUTTON*/
/* The container */
.radio_container {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    margin-right: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
}

/* Hide the browser's default radio button */
.radio_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radio_checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #d5e7d5;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input~.radio_checkmark {
    background-color: #aaa;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked~.radio_checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked~.radio_checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/************************* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/************/
#loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    margin-right: 10px;
}

#loading-text {
    color: green;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}