body {
    font-family: "FiraCodeMono", monospace;
    margin: 20px;
}
p.p-inline {
    display: inline-block;
    margin: 0;
    padding: 5px;
    line-height:20px;
}
p.p-stack {
    margin: 0;
    text-align: center;
    border: 2px solid #fafafa;
    /* padding: 5px; */
    font-weight: bold;
    height: 18px;
    align-content: center;
}
div#body-wrapper {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;
}
div#body-content {
    display: block;
    position: relative;
    top: 10px;
    left: 10px;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}
div.fw-container {
    position: relative;
    display: block;
    width: 100%;
}

input[type="text"] {
    padding: 8px;
    width: 300px;
    margin-bottom: 10px;
    font-size: 16px;
}

div#tsi-bg {
    font-family: "FiraCodeMono", monospace;
    position: fixed;
    margin: 0;
    background: #eee;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:-1000;
}

img.loader-small {
    display:block;
    width: 20px;
    height:20px;
}
img.loader-medium {
    display:block;
    width: 28px;
    height: 28px;
}
img.loader-medium {
    display:block;
    width: 32px;
    height: 32px;
}

td.datepicker {
    position: relative;
    padding: 0;
    margin: 0;
    width: 200px;
    height: 50px;
}
span.datepicker-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding; 5px;
    border: 1px solid #ccc;
    background: #eee;
}
input.datepicker {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
    padding: 0;
    border: 0;
    text-align: center;
    background: #eee;
    font-weight: bold;
}
input.datepicker:focus {
    outline: none;
    background: #fff;
}

.selected {
    background: #f7ff8a!important;
}
.over-mark {
    /* roxo */
    background: #a900d1 !important;
    border: 1px solid #3b004b !important;
    color: #ffffff;
    font-weight: bold;
}
.ideal-mark {
    /* verde */
    background: #9eff9e!important;
    border: 1px solid #01c501!important;
    color: #006100;
    font-weight: bold;
}
tr.ideal-mark:hover {
    background: #006100!important;
    color: #9eff9e!important;
    font-weight: bold !important;
}
.ideal-mark-light {
    background: #9eff9e!important;
    border: 1px solid #01c501;
    color: #006100;
    font-weight: bold;
}
tr.ideal-mark-light:hover {
    background: #006100!important;
    color: #9eff9e;
    font-weight: bold !important;
}
.good-mark {
    /* azul */
    background: #77ecff!important;
    border: 1px solid #20a1b7!important;
}
.ok-mark {
    /* amarelo */
    background: #ffff00!important;
    border: 1px solid #880!important;
}
.bad-mark {
    /* laranja */
    background: #ffbd79!important;
    border: 1px solid #d17719!important;
}
tr.bad-mark:hover {
    /* laranja mais escuro */
    background: #814200 !important;
    border: 1px solid #d17719 !important;
    color: #ffc876 !important;
    font-weight: bold !important;
}
.crit-mark {
    /* vermelho */
    background: #ff9a9a!important;
    border: 1px solid #c50000!important;
}
tr.crit-mark:hover {
    background: #710000!important;
    color: #ff3d3d;
    font-weight: bold !important;
}
.negative-mark {
    background: #8d2a2a!important;
    border: 1px solid #551616!important;
    color: #fff!important;
}
.spot-mark {
    background: #e57dff !important;
    border: 1px solid #9a3bb3 !important;
}
button.btn-green {
    width: 210px;
    height: 40px;
    cursor: pointer;
    background: #01c700;
    border: 1px solid #018300;
    box-shadow: 1px 1px 5px #016300;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}
button.btn-green:active {
    background: #018b00;
    border: 1px solid #018300;
    box-shadow: -1px -1px 2px #000;
}

/*********************************************************************************
 * AJUDA
 **********************************************************************************/
div#help-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}
div#help-wrapper {
    display: block;
    position: relative;
    width: 1100px;
    height: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
}
div#help-content {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 1060px;
    height: 760px;
    margin: 0 auto;
    background: #fff;
    overflow-y: hidden;
}

div#help-products {
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/*********************************************************************************
 * LOGIN
 **********************************************************************************/
div#login-background {
    font-family: "FiraCodeMono", monospace;
    position: fixed;
    margin: 0;
    background: #eee;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

div#login-content {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

table#login-table thead th {
    font-size: 28px;
    color: #000;
    text-shadow: 1px 1px 2px #444;
    text-transform: uppercase;
}
table#login-table tbody tr {
    height: 60px;
}
table#login-table input {
    width: 200px;
    height: 40px;
    font-size: 16px;
    /* background: #01a300; */
    /* border: 1px solid #fff; */
    border-radius: 5px;
    padding-left: 5px;
    font-weight: bold;

    background: #e0e0e0;
    border: 1px solid #939393;
    box-shadow: -1px -1px 2px #000;
}
table#login-table input::placeholder {
    color: #888;
}

table#login-table input:focus {
    background: #fff;
    border: 1px solid #444;
    outline: none;
    color: #444;
}

table#login-table button {
    width: 210px;
    height: 40px;
    cursor: pointer;
    background: #ddd;
    border: 1px solid #aaa;
    box-shadow: 1px 1px 5px #888;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    color: #888;
}

table#login-table button:hover {
    background: #ccc;
}
table#login-table button:active {
    color: #000;
    background: #aaa;
    border: 1px solid #888;
    box-shadow: -1px -1px 2px #000;
}

table#login-table p#err-msg {
    width: 210px;
    text-align: center;
    line-height: 15px;
    text-transform: uppercase;
    color: #7d0000;
}

/*********************************************************************************
 * INDEX.HTML
 **********************************************************************************/
div#index {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;
}
div#index-wrapper {
    font-family: "FiraCodeMono", monospace;
    position: relative;
    display: block;
    width: 1600px;
    top: 40px;
    left: 0;
    margin: 0 auto;
    padding: 0;
}
div#footer-wrapper {
    position: relative;
    display: block;
    width: 1600px;
    height: 400px;
    background: #fff;
    margin: 0 auto;
    margin-top: 200px;
}
div#menu-wrapper {
    font-family: "FiraCodeMono", monospace;
    position: fixed;
    display: flex;
    height: 40px;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;
    z-index: 1000;
    background: #01a300;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
ul#global-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

ul#global-menu li {
    margin-left: 0px;
}

ul#global-menu li a {
    display: block;
    height: 100%;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    align-content: center;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #008700; /* borda verde escuro */
    border-right: 1px solid #01b900; /* borda verde claro */
}
ul#global-menu li a:hover {
    background: #007600;
}

div#page-menu-wrapper {
    font-family: "FiraCodeMono", monospace;
    position: relative;
    display: flex;
    height: 40px;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;
    background: #8de78d;
    box-shadow: 0 2px 5px rgba(122,122,122,0.4);
    border-radius: 0px 0px 10px 10px;
}
ul#page-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    margin-left: 20px;
}

ul#page-menu li {
    margin-left: 0px;
}

ul#page-menu li a {
    display: block;
    height: 100%;
    color: #005619;
    text-decoration: none;
    transition: background 0.2s;
    align-content: center;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #67d667; /* borda verde escuro */
    border-right: 1px solid #a0ffa0; /* borda verde claro */
}
ul#page-menu li a:hover {
    background: #01a300;
    color: #fff;
}

div.control-panel {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 10px;
    height: 200px;
}

div.index-search {
    display: block;
    position: relative;
    width: 100%;
}

div.index-card {
    font-size: 11px;
    display: block;
    position: relative;
    width: 100%;
    /* border: 1px solid #000; */
    height: 400px;
    overflow: hidden;
    margin-bottom: 10px;
}


/*********************************************************************************
 * Content type wrappers
 **********************************************************************************/
div#list-content {
    display: block;
    position: relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    overflow-x: auto;
}

div#list-title {
    width: 100%;
    height: 100px;
}

div#list-content .dt-button {
}

/*********************************************************************************
 * Tabelas: .awd
 **********************************************************************************/
div.awd-container {
    display: block;
    position: relative;
    width: 100%;
}
table.awd {
    /* display: block; */
    position: relative;
    border-collapse: collapse;
    width: 100%;
    /* max-width: 800px; */
}

table.awd thead th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: #f2f2f2;
}
table.awd thead th.dt-center {
    text-align: center;
}

table.awd tbody {
    border: 1px solid #ccc;
}
table.awd tbody tr {
    height: 40px;
}
table.awd tbody tr.company-sep {
    background: #93c4ff!important;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #ccc;
    color: #000!important;
}
table.awd tbody tr.company-sep:hover {
    background: #93c4ff!important;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #ccc;
    color: #000!important;
}
table.awd tbody tr.company-sep td {
    text-align: center;
}

table.awd tbody tr td {
    font-size: 12px;
    position: relative;
}
table.awd tbody tr td span {
    /* padding: 5px;
    display: block; */
}

table.awd-hover tbody tr:hover {
    background-color: #34cf37!important;
}
table.awd-stripe tbody tr:nth-child(even) {
    background-color: #ddd;
}

table.awd tbody tr td.dt-goal {
    position: relative;
    margin: 0!important;
    /* padding: 0!important; */
    z-index: 1;
}

table.awd tbody tr td div.goal {
    display: flex;
    height: 100%;
    width: 0%;
    background: #9eff9e;
    border: 1px solid #01c501;
    position: absolute;
    inset: 0;
    /* vertical-align: middle; */
    text-align: center;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

table.awd tbody tr td.dt-center {
    text-align: center;
}

table.awd tfoot th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

table.awd tfoot th {
    background-color: #f2f2f2;
}
table.awd tfoot th.dt-center {
    text-align: center;
}


img.fullpage {
    display:block;
    width:100%;
}


table.tbl-display {
}
div.tbl-display-container {
    display: block;
    position: relative;
    width: 100%;
}
table.tbl-display {
    /* display: block; */
    position: relative;
    border-collapse: collapse;
    width: 100%;
    /* max-width: 800px; */
}


table.tbl-display tbody tr {
    height: 40px;
}
table.tbl-display tbody tr:hover {
    background: #34cf37!important;
}

table.tbl-display tbody tr td.label {
    font-weight: bold;
    background: #ddd;
    border: 1px solid #aaa;
    text-align: right;
    padding-right: 10px;
}
table.tbl-display tbody tr td.data {
    background: #eee;
    border: 1px solid #aaa;
    padding-left: 10px;
}


/**********************************************************************
 Commands 
 **********************************************************************/
div.cmd-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    background: url(../img/bg.jpg);
    background-size: cover;
}

div.shadow-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 1001;
    opacity: 0.8;
}

div.input-box {
    position: relative;
    height: 100%;
    width: 90%!important;
    z-index: 1002;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

table.command-align {
    position: relative;
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    border: 0px;
}

table.command-align tbody td {
    border: 0px;
    padding: 5px;
}

table.command-align tbody td.cmd-td-context {
    height: 50px;
}

table.command-align tbody td.cmd-td-context span {
    display:inline;
    padding: 5px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 5px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

table.command-align tbody td.cmd-td-context span.active {
    border: 2px solid #00ffd9;
    background: #00ffd9;
    color: #000;
}

table.command-align tbody td.cmd-td-input {
    height: 50px;
}

div.command-content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 1200px!important;
}

div.input-helper {
    display: block;
    position: relative;
    height: 100%;
    min-height: 700px!important;
    min-width: 400px;
}

input.cmd-input-field {
    position: relative;
    height: 30px;
    width: -webkit-fill-available;
    font-size: 14px;
    font-family: "FiraCodeMono", monospace;
    border-radius: 0px;
    border: 1px solid #666;
    color: #666;
    background: transparent;
    font-weight: normal;
    /* margin-top: 5px; */
    padding-left: 5px;
    margin: 0;
}

input.cmd-input-field:focus {
    border-radius: 0px;
    border: 2px solid #fff;
    /* background: #fff; */
    color: #fff;
    outline: none;
}

table.cmd-person-display {
    /* display:none; */
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    color: #aaa;
    border-collapse: collapse;
}

table.cmd-person-display thead {
}

table.cmd-person-display thead th {
    height: 30px;
    font-weight: bold;
    color: #000;
    border: 1px solid #666;
    background: #aaa;
}

table.cmd-person-display tbody tr.selected {
    background: rgba(0, 241, 255, 0.92);
    color: #000;
    font-weight: bold;
}

table.cmd-person-display tbody tr:hover {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    cursor: pointer;
    font-weight: bold;
}

table.cmd-person-display tbody tr:hover td {
    border: 1px solid #000;
}

table.cmd-person-display tbody tr td {
    border: 1px solid #666;
}

table.cmd-person-display tbody tr td.cmd-display-label {
    font-weight: bold;
    width: 200px;
}

div.content-filter-wrapper {
    position: relative;
    display: block;
    height: 50px;
    width: 100%;
}

div.content-table-wrapper {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    margin-top: 10px;
}

/**********************************************************************
 Dashboard 
 **********************************************************************/
table.cmd-dashboard {
    position: relative;
    width: 100%;
    height: 99%;
}

table.cmd-dashboard tbody {
    height: 100%;
}

table.cmd-dashboard tbody tr {
    height: fill;
}

table.cmd-dashboard tbody tr td {
    border: 1px solid #666;
    width: 33%;
    height: 50%;
}

table.cmd-dashboard tbody tr td.chart-view {
    width: 800px;
    height: 100%;
}

table.cmd-dashboard tbody tr td.selected {
    border: 1px solid #00ffd9;
}

table.cmd-dashboard tbody tr td.sum-table table {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
}

table.cmd-dashboard tbody tr td.sum-table table thead th{
    text-transform: uppercase;
    font-size: 14px;
    border: 1px solid #fff;
}

/**********************************************************************
 Progress Bar

 progress-bar
    prog-header
        prog-title
        prog-subtitle
    prog-bar
        prob-bar-a
        prog-bar-b
 **********************************************************************/

.progress-bar {
    display: block;
    position: relative;
    height: 50px;
    width: 250px;
    /* border: 1px solid #444; */
    /* padding: 5px; */
}

.prog-header {
    display: block;
    width: 100%;
    height: 20px;
    font-size: 12px;
    color: #fff;
    border: 1px solid transparent;
}

.prog-header span {
    display: inline-block;
    width: 50%;
    height: 100%;
    line-height: 20px;
    vertical-align: middle;
}

span.prog-subtitle {
    text-align: right;
}

.prog-bar {
    width: 100%;
    height: 10px;
    display: block;
    position: relative;
    border: 1px solid #fff;
}

.prog-bar-a {
    display: block;
    position: relative;
    width: 0%;
    background: #fff;
    height: 100%;
}

.prog-bar-b {
    display: inline-block;
    height: 100%;
    width: 100%;
    /* background: #444; */
}

/**********************************************************************
 DataTable
 **********************************************************************/
/*.dt-buttons {
    display: block;
    width: 100%;
    background: #eee;
    padding-top: 10px;
    padding-bottom: 10px;
}*/

.dt-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
    width: 100%;

    background: #eee;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
}
.dt-search label {
    white-space: nowrap;
    margin-left: 5px;
    font-weight: bold;
}

.dt-search input {
    min-width: 0;
    flex: 1;
    background: #fff!important;
    border-radius: 3px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
}

/**********************************************************************
 UL LI Menus
 **********************************************************************/
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #01a300;
    border-radius: 6px;
    overflow: hidden;
}

.menu-item {
    margin: 0;
}

.menu-item a {
    display: block;
    padding: 12px 20px;
    color: #ecf0f1;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.menu-item a:hover {
    background-color: #015800;
    color: #ffffff;
}

.menu-item a:active {
    background-color: #1abc9c;
    color: #fff;
}

/**********************************************************************
 Titulos
 **********************************************************************/
h1.client-legal-name {
    display: block;
    background-color: #888;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    color: #eee;
    text-align: center;
}

h1.header-name, h1.header-title {
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #01a300;
    color: #ffffff;
    text-shadow: #34cf37 -1px -1px;
}

h2.client-city {
    display: block;
    width: 100%;
    text-align: center;
    color: #888;
}

h2.header-salesperson, h2.header-subtitle {
    display: block;
    position: relative;
    width: 100%;
    background: #daffda;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #008f00;
    box-shadow: 1px 1px 5px rgb(172 213 172);
    border-radius: 5px;
}

h2.header-switch {
    cursor: pointer;
}
h2.header-switch:hover {
    background: #01a300!important;
    color: #fff!important;
    box-shadow: 1px 1px 5px #006100!important;
}

h3.header-caption {
    display: block;
    position: relative;
    width: 100%;
    background: #daffda;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #008f00;
    box-shadow: 1px 1px 5px rgb(172 213 172);
    border-radius: 5px;
}

/**********************************************************************
 Gráficos
 **********************************************************************/
div.primary-graphs {
    display: flex;
    width: 100%;
    height: 500px;
}
div.revenue-graph {
    flex: 4;
    border: 1px solid #ccc;
    border-right: 0;
}

div.client-revenue-box {
    flex: 3;
    border: 1px solid #ccc;
    border-right: 0;
}
.histogram-box {
    flex: 1;
    border: 1px solid #ccc;
}

.goal-box {
    flex: 1;
    border: 1px solid #ccc;
    padding: 5px;
}

.treemap-box {
    display: block;
    width: 100%;
    height: 800px;
}

/**********************************************************************
 Tabelas de informações
 **********************************************************************/
table.info {
    border-collapse: collapse;
    width: 100%;
}
table.info tbody tr.header {
    background: #01a300;
    color: #ffffff;
    text-shadow: #34cf37 -1px -1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.info tbody tr.header td {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

/**********************************************************************
 Grid de metas para vendedores
 **********************************************************************/
div.revenue-card-list {
    overflow-y: scroll;
    overflow-x: clip;
}
.sp-card {
    font-family: "FiraCodeMono", monospace;
    font-size: 12px;
    position: relative;
    width: 100%;
    height: 50px;
    text-align: center;
    background: #fff;
    margin-bottom: 10px;
    border: 1px solid #ccc;

    cursor:pointer;
}
.sp-card:hover {
    background: #eee;
}

.sp-idx-0 {
    position: sticky;
    background: #01a300;
    .prog-bar { 
        background: rgba(26, 104, 30, 0.5)!important;
        border-color: rgba(0, 255, 0, 0.5)!important;
    }
    .sp-name { color: #fff!important; }
    .sp-part { color: #fff!important; }
    .sp-total {
        .dt-dark { color: #fff!important; }
        .dt-light { color: #ffffffaa!important; }
    }
    /* .sp-goal { color: #daffda!important; } */
    .sp-goal { display: none; }

}
.sp-idx-0:hover {
    background: #017e00!important;
}
.sp-card span.prog-bar {
    background: rgba(158, 255, 158, 0.40);
    border: 1px solid rgba(4, 191, 2, 0.40);
    z-index: 0;
    height: 100%;
}
.sp-card span.sp-name { 
    top: 5px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
    padding: 5px;
    overflow: hidden;
    width: 240px;
    text-align: left;
}

.sp-card span.prog-bar {
    top: -1px;
    left: -1px;
}
.sp-card span.sp-total {
    top: 25px;
    left: 5px;
    padding: 5px;
    color: #ccc;
    font-weight: bold;
}
.sp-card span.sp-total span.dt-dark {
    color: #000;
    font-weight: bold;
}
.sp-card span.sp-total span.dt-light {
    color: #666;
    font-weight: normal;
}
.sp-card span.sp-part { 
    top: 5px; 
    right: 5px; 
    padding: 5px;
    font-weight: bold;
    color: #018300;
}
.sp-card span.sp-goal { 
    top: 25px; 
    right: 5px; 
    padding: 5px;
    font-weight: bold;
    color: #90c390;
}

/**********************************************************************
 Separação
 **********************************************************************/
tr.sep-done {
    background: #96ff96;
}

tr.sep-missing {
    background: #ffc996;
}


/**********************************************************************
 Módulo de Estoque
 **********************************************************************/
div#inv-top {
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
}
div#lot-manual {
    display: block;
    position: absolute;
    width: 580px;
    height: 100%;
    top: 100px;
    left: 0;
}
table#lot-table {
    /* display: block; */
    position: relative;
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    /* max-width: 800px; */
}

table#lot-table thead th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: #f2f2f2;
}
table#lot-table thead th.dt-center {
    text-align: center;
}
table#lot-table tbody tr.lote-ativo {
    /* verde */
    background: #9eff9e;
    border: 1px solid #01c501;
}

table#lot-table tbody tr.lote-atencao {
    /* amarelo */
    background: #ffff00;
    border: 1px solid #880;
}
table#lot-table tbody tr.lote-ok {
    /* azul */
    background: #77ecff;
    border: 1px solid #004e5b;
}
table#lot-table tbody tr.lote-desativado {
    background: #ff9a9a;
    border: 1px solid #c50000;
}
table#lot-table tbody tr td.dt-center {
    text-align: center;
}

div#inv-manual-wrapper {
    display: block;
    position: absolute;
    width: 400px;
    margin: 0 auto;
    top: 100px;
    right: 0;
}

div#inv-manual-wrapper form#manual-count table {
    width: 100%;
    height: 100%;
}

div#inv-manual-wrapper form#manual-count table thead th{
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    background-color: #f2f2f2;
}
div#inv-manual-wrapper form#manual-count table tr {
    height: 50px;
}
div#inv-manual-wrapper form#manual-count table td {
    position: relative;
    height: 40px;
    margin: 0;
    padding: 0;
}

div#inv-manual-wrapper form#manual-count table td.label {
    font-weight: bold;
    width: 120px;

}

div#inv-manual-wrapper form#manual-count input {
    font-family: "FiraCodeMono", monospace;
    height: 33px;
    font-size: 16px;
    width: 98%;
    top: 2px;
    position: absolute;
    display: block;
    border-radius: 5px;
    border: 1px solid #ddd;
}

div#inv-manual-wrapper form#manual-count button {
    height: 40px;
    width: 100%;
    cursor: pointer;
}

/**********************************************************************
 Módulo de Pedidos
 **********************************************************************/
div#quote-container {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
}
div#quote-controls {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
}
div#quote-info {
    display: block;
    position: relative;
    width: 50%;
    height: 100%;
    float: left;
}
div#quote-products {
    display: block;
    position: relative;
    width: 100%;
}
table.quote-tbl {
    /* display: block; */
    position: relative;
    border-collapse: collapse;
    width: 100%;
    /* max-width: 800px; */
}

table.quote-tbl thead th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: #f2f2f2;
}
table.quote-tbl thead th.dt-center {
    text-align: center;
}

table.quote-tbl tbody tr {
    height: 40px;
}
table.quote-tbl tbody tr td {
    font-size: 12px;
}
table.quote-tbl tbody tr td p.p-vd {
    width: 20px;
    font-weight: bold;
    padding: 5px;
}
table.quote-tbl tbody tr td input#query {
    width: 97%;
}
table.quote-tbl tbody tr td input#val-desc {
    width: 97%;
}
table.quote-tbl tbody tr td input#val-desc:disabled {
    background: #eee;
    border: 1px solid #eee;
}
table.quote-tbl tbody tr td input.val-display {
    width: 160px;
    text-align: center;
    font-weight: bold;
}
table.quote-tbl tbody tr td input.val-vd {
    display: inline-block;
    width: 60px!important;
}
table.quote-tbl tbody tr td input.val-display {
}

table.quote-tbl tbody tr td.dt-center {
    text-align: center;
    position: relative;
}
table#quote-table p.asked-qtd {
    display: inline-block;
    padding: 5px;
    color: #ddacac;
    font-weight: bold;
}
table#quote-table p.qtd {
    display: inline-block;
    padding: 5px;
    font-weight: bold;
    color: #009500;
}
table#quote-table tbody tr td {
    background: #fafafa;
    /*border: 1px solid #f0f0f0;*/
}
table#quote-table tbody tr td.td-desc {
    position: relative;
    width:500px;
    height: 85px;
}
table#quote-table tfoot th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

table#quote-table tfoot th {
    background-color: #f2f2f2;
    text-align: center;
}
input#val-global:disabled {
    border: 1px solid #01a300;
    background: #daffda;
    color: #01a300;
}
p.p-desc {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
span.p-pid {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 20px;

    padding: 5px;
    color: #454545;
    border: 1px solid #dbdbdb;
    background: #ffffff;
    text-align: center;
}

span.p-code {
    display: block;
    position: absolute;
    top: 45px;
    left: 10px;
    width: 100px;
    height: 20px;

    color: #002367;
    font-weight: bold;
    padding: 5px;
    border: 1px solid #4084c7;
    background: #92ccff;
    text-align: center;
}
span.p-desc {
    display: block;
    position: absolute;
    top: 10px;
    left: 125px;
    width: 360px;
    height: 55px;

    /*
    border: 1px solid #c9c9c9;
    color: #555555;
    background: #ffffff;
    padding: 5px;
    */

    color: #052f00;
    padding: 5px;
    border: 1px solid #005f0b;
    background: #a5ff8f;
    font-weight: bold;
    font-size: 14px;
}
p.dt-asked-qtd {
    background: #ffe0e0;
    color: #d39e9e;
    border: 2px solid #ffdddd;
    text-shadow: 1px 1px 0px #ffdcdc;
}
p.dt-q-lote-compra {
    background: #fffda7;
    color: #bdb53e;
    border: 2px solid #e9e65f;
    text-shadow: 1px 1px 0px #fff8d9;
}

span.dt-pct {
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    background: #f3bfbf;
    color: #000;
    border: 1px solid #dd4d4d;
}

p.dt-qtd {
    /* verde */
    background: #9eff9e!important;
    border: 1px solid #01c501!important;
    color: #006100;
    font-weight: bold;
}

p.p-inline.qtd-msg {
    color: #2f0000;
}

span.absolute {
    display: block;
    position: absolute;
    height: 15px;
}
span.dt-tl-up {
    top: 5px;
    left: 5px;
}
span.dt-tl-down {
    top: 35px;
    left: 5px;
}
span.dt-tl-up-offset-cnpj {
    top: 5px;
    left: 140px;
}
span.dt-tl-down-offset-cnpj {
    top: 35px;
    left: 140px;
}
span.dt-pessoa-id {
    color: #454545;
    border: 1px solid #dbdbdb;
    background: #ffffff;
    text-align: center;
    width: 140px;
}
span.dt-pessoa-cnpj {
    width: 140px;
    text-align: center;
}
span.dt-pessoa-fantasia {
    width: 420px;
}
span.dt-pessoa-nome {
    width: 420px;
}
span.dt-faturamento {
}
span.dt-data {
    color: #fff;
    border: 1px solid #000;
    background: #000;
    display: block;
    text-align: center;
}
span.dt-dias-uc {
    display: block;
    text-align: center;
}

input.dt-data {
    border: 1px solid #000;
}
input.dt-data:focus {
    border: 2px solid #000;
    outline: none;
}
input.dt-data-changed {
    border: 1px solid #f00;
    background: #ffb3b3;
}
input.dt-data-changed:focus {
    border: 2px solid #f00;
    outline: none;
}

table.edit-table {
    /* display: block; */
    position: relative;
    border-collapse: collapse;
    width: 100%;
    /* max-width: 800px; */
}
table.edit-table tbody tr.editing {
    background: #ddd;
    font-weight: bold;
}
table.edit-table tbody tr td {
    position: relative;
    height: 70px;
}
table.edit-table tbody tr td.dt-input {
    min-width: 500px;
}
table.edit-table tbody tr td.dt-input input {
    width: 700px;
    height: 26px;
    position: absolute;
    top: 14px;
}


/*******************************************************************************
 * FINANCEIRO
 ******************************************************************************/
table.report-table {
    position: relative;
    border-collapse: collapse;
    width: 100%;
}

table.report-table thead th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    background-color: #f2f2f2;
}
table.report-table thead th.dt-center {
    text-align: center;
}

table.report-table tbody tr {
    height: 40px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #fff;
}
table.report-table tbody tr td {
    font-size: 12px;
    position: relative;
}
table.report-table tbody tr td.dt-button {
    width: 400px;
}
table.report-table tbody tr td.dt-button button {
    width: 70%;
    height: 30px;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #000;
}
table.report-table tbody tr td.dt-button button {
    display: block;
    margin: 0 auto;
    width: 85%;
    height: 30px;
    cursor: pointer;
    background: #01c700;
    border: 1px solid #018300;
    box-shadow: 1px 1px 5px #016300;
    border-radius: 5px;
    font-weight: bold;
    color: #fff;
}

table.report-table tbody tr td.dt-button button:active {
    background: #018b00;
    border: 1px solid #018300;
    box-shadow: -1px -1px 2px #000;
}

table.report-table tbody tr td.dt-loader {
    width: 50px;
}
table.report-table tbody tr td span {
    padding: 5px;
}

table.report-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Index: tabela picker *****************************************************************/
table.picker tbody tr {
    border: 1px solid #aaa;
}
table.picker tbody tr td {
    padding: 5px;
    background: #ddd;
}
table.picker tbody tr:hover {
    background: #fff!important;
}
table.picker tbody tr td.datepicker-button button {
    width: 200px!important;
}

/* SALDOS ********************************************************************************/
table.bank-accounts tbody tr td span {
    padding: 5px;
    width: 100px;
    display: block;
    margin: 0 auto;
}
/* CAIXA ********************************************************************************/

span.dt-date {
    display: block;
    padding: 5px;
}

table.stmt thead th.dt-balance {
    display: block;
    /*width: 120px;*/
}
table.stmt tbody tr.mark-commit td span.dt-data {
    background: #1cff1c;
    color: #000;
    border: 1px solid #49d749;
    box-shadow: 1px 1px 2px #001000;
}
table.stmt tbody tr.ideal-mark-commit {
    background: #1cff1c;
    color: #000;
    font-weight: bold;
    border: 1px solid #007100;
}
table.stmt tbody tr.ideal-mark td.dt-money {
    border-right: 1px solid #01c501;
}
table.stmt tbody tr.ideal-mark td.dt-money span {
    font-weight: bold;
    font-size: 12px;
}

table.stmt tbody tr.ideal-mark {
    /* verde */
    background: #9eff9e;
    border: 1px solid #01c501;
    color: #006100;
    font-weight: bold;
}
table.stmt tbody tr.ideal-mark td span.dt-data {
    background: #d1ffd1!important;
    color: #000;
    border: 1px solid #46cd46;
}
table.stmt tbody tr.ideal-mark:hover {
    background: #006100!important;
    color: #9eff9e;
}
table.stmt tbody tr.ideal-mark-commit td.dt-money {
    border-right: 1px solid #007100;
}
table.stmt tbody tr.ideal-mark-commit td span.dt-data {
    color: #d7ffd7;
}
table.stmt tbody tr.ideal-mark-commit:hover {
    background: #000!important;
    color: #1cff1c;
}
/*
table.stmt tbody tr.ideal-mark-commit td span.dt-flux {
    color: #1cff1c;
    border: 1px solid #000;
    background: #000;
    text-align: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}
table.stmt tbody tr.crit-mark-commit td span.dt-flux {
    color: #ff3d3d;
    border: 1px solid #000;
    background: #000;
    text-align: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}
*/
table.stmt tbody tr.crit-mark-commit {
    background: #ff3d3d;
    color: #000;
    font-weight: bold;
    border: 1px solid #710000;
}
table.stmt tbody tr.crit-mark:hover {
    background: #710000!important;
    color: #ff3d3d;
}
table.stmt tbody tr.crit-mark-commit:hover {
    background: #000!important;
    color:#ff3d3d;
}
table.stmt tbody tr.crit-mark td span.dt-data {
    background: #ffd3d3!important;
    color: #000;
    border: 1px solid #af5656;
}
table.stmt tbody tr.crit-mark-commit td span.dt-data {
    color: #ff3d3d;
}
table.stmt tbody tr.crit-mark td.dt-money {
    border-right: 1px solid #c50000;
}
table.stmt tbody tr.crit-mark-commit td.dt-money {
    border-right: 1px solid #710000;
}
table.stmt tbody tr.bank-balance {
    background: #0087ff;
    color: #000000;
    border: 1px solid #0044ff;
}
table.stmt tbody tr.bank-balance:hover {
    background: #0087ff!important;
    color: #000000!important;
}

table.stmt tbody tr.bad-mark:hover {
    background: #d17719!important;
    color: #ffbd79;
}
table.stmt tbody tr.tsi-future-payment {
    background: #ffffa0 !important;
    border: 1px solid #c1c14d;
}
table.stmt tbody tr.tsi-future-payment:hover {
    background: #c1c14d!important;
    color: #ffffa0!important;
}
table.stmt tbody tr.day-break {
    background: #ffffa088 !important;
    border: 1px solid #c1c14d;
    cursor: pointer;
}
table.stmt tbody tr.day-break:hover {
    background: #ffffa0ff !important;
}
table.stmt tbody tr.day-break-commit {
    background: #ffff0088 !important;
    border: 1px solid #c1c14d;
    cursor: pointer;
}
table.stmt tbody tr.day-break-commit:hover {
    background: #ffff00ff !important;
}
table.stmt tbody tr td.msg {
    text-align: center;
    font-weight: bold;
}
table.stmt tbody tr.day-break td span.dt-data {
    background: #ffff00!important;
    color: #000;
    border: 1px solid #b9b900;
}
table.stmt tbody tr td.dt-money {
    padding-right: 15px;
    padding-left: 15px;
}
table.stmt tbody tr td.dt-balance {
    padding-right: 15px;
    padding-left: 15px;
}
table.stmt tbody tr.bad-mark td.dt-money {
    border-right: 1px solid #d17719;
}
div#flux {
    position: relative;
    display: block;
    width: 100%;
}
div#flux div.table-controls {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    background: #eee;
    border: 1px solid #ccc;
}
div#flux div.table-controls table {
    width: 100%;
    height: 100%;
}
div#flux div.table-controls label {
    height: 30px;
    display: block;
    line-height: 20px;
    padding-left: 10px;
    cursor: pointer;
    font-size: 12px;
    width: 300px;
}
div#flux div.table-controls label:hover {
    font-weight: bold;
}
div#flux div.table-controls input[type=text] {
    position: relative;
    height: 20px;
    width: 100px;
    font-size: 12px;
    padding: 2px;
    padding-left: 5px;
}
div#flux div.table-controls table {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div#flux div.table-controls table tbody {
    width: 100%;
    height: 100%;
    display: block;
}
div#flux div.table-controls table tbody tr{
    height: 40px;
    padding: 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
    display: block;
}
div#flux div.table-controls table tbody tr td {
    width: 300px;
}

/* Saldos ********************************************************************************/
table#bank-acc-dashboard tbody tr td {
    border: 1px solid #ccc;
}
table#bank-acc-dashboard tbody tr td.dt-recebimento span {
    padding: 5px;
    border: 1px solid #ccc;
    background: #ddd;
    color: #f00;
    font-weight: bold;
}

/*******************************************************************************
 * ESTOQUE
 ******************************************************************************/
span.dt-qtd {
    display: block;
    width: 80px;
    text-align: center;
    padding: 5px;
    color: #fff;
    font-weight: bold;
    background: #000;
    cursor: pointer;

}

tr.negative-mark .dt-qtd {
    color: #000!important;
    background: #fff!important;
}

/*******************************************************************************
 * Pessoas - Produtos
 ******************************************************************************/
div.person-product-wrapper {
    display: block;
    width: 100%;
    height: 800px;
}

div.person-product-wrapper div.container {
    display: block;
    position: relative;
    width: 1600px;
}

div.person-product-wrapper div.container div.content {
    background: #99ff00;
}

div.person-product-wrapper div.container canvas.graph {
    height: 350px!important;
}