html, body {

    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
    
    min-width: 100vw;
    min-height: 100vh;

}

body {
    
    background-color: #F7F7F7;
    
    -webkit-font-smoothing: antialiased;
    
}

a:link, a:visited {
    color:#989898;
    text-decoration: none;
}

a:hover, a:active {
    color:#757575;
    text-decoration: none;
}

.red-link a:link, .red-link a:visited, .red-link:link, .red-link:visited {
    color:#B22222;
}

.red-link a:hover, .red-link a:active, .red-link:hover, .red-link:active {
    color:#761515;
}

.green-link a:link, .green-link a:visited, .green-link:link, .green-link:visited {
    color:#228B22;
}

.green-link a:hover, .green-link a:active, .green-link:hover, .green-link:active {
    color:#1a6b1a;
}

.orange-link {
    color:#ff9900;
}

a img {

    border: 0px !important;
    padding: 0;
    margin: 0;

}

.animate-spin:before {

    margin-right: .2em !important;
    margin-left: .2em !important;

}

label {
    display: inline-block;
    cursor: pointer;
}

input[type=radio],
input[type=checkbox] {
    display: none;
}

.radio label:before, .checkbox label:before {

    width: 16px;
    height: 16px;

    content: "";
    display: inline-block;

    text-align: center;
    line-height: 16px;
    vertical-align: middle;

    margin-left: 2px;
    margin-right: 10px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

input[type=radio]:checked + label:before {

    content: "\2022";
    color: #f3f3f3;

    font-size: 30px;

    text-align: center;
    line-height: 17px;
    vertical-align: middle;

}

input[type=checkbox]:checked + label:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    font-size: 22px;
    color: #f3f3f3;
    text-align: center;
}

.radio label:before {
    border-radius: 8px;
}
.checkbox label {
    margin-bottom: 10px;
}
.checkbox label:before {
    border-radius: 3px;
}

table {

    width: 100%;

    padding: 0;

    margin: 0;

    border-collapse: collapse;

    table-layout: fixed;

}

/* Zebra global - aplicado automaticamente a todas as tabelas */
tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

tbody tr.venda_loja_virtual {
    background-color: rgba(124, 248, 190, .3);
}

tbody tr.line1 {
    background-color: rgba(100, 100, 100, .3);
}

tbody tr.line2 {
    background-color: rgba(200, 200, 200, .3);
}

tbody tr.red-line1 {
    background-color: rgba(255, 150, 150, .3);
}

tbody tr.red-line2 {
    background-color: rgba(255, 200, 200, .3);
}

tbody tr.green-line1 {
    background-color: rgba(100, 255, 100, .3);
}

tbody tr.green-line2 {
    background-color: rgba(150, 255, 150, .3);
}

tbody tr.yellow-line1 {
    background-color: rgba(255, 255, 100, .3);
}

tbody tr.yellow-line2 {
    background-color: rgba(255, 255, 150, .3);
}

tbody tr.orange-line1 {
    background-color: rgba(255, 165, 0, .3);
}

tbody tr.orange-line2 {
    background-color: rgba(255, 140, 0, .3);
}

/* Zebra neutra para listagens limpas */
tr.zebra-odd {
    background-color: #ffffff;
}
tr.zebra-even {
    background-color: #f8f9fa;
}

/* Badges de status */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}
.status-badge.status-aberto {
    background-color: #E3F2FD;
    color: #1565C0;
}
.status-badge.status-pendente {
    background-color: #FFF8E1;
    color: #F57F17;
}
.status-badge.status-fechado {
    background-color: #E8F5E9;
    color: #2E7D32;
}
.status-badge.status-cancelado {
    background-color: #FFEBEE;
    color: #C62828;
}
.status-badge.status-andamento {
    background-color: #E0F7FA;
    color: #00838F;
}

tr:hover {
    background-color: #FFFFD5;
}

tr.total {
    font-weight: bold;
}

td {

    border-bottom: 1px solid #bfbfbf;
    padding-top: 5px;
    padding-bottom: 5px;

}

td:first-child {
    padding-left: 5px;
}

td:last-child {
    padding-right: 5px;
}

/* ================================================
   LISTAGEM - Estilo unificado para *_listar.jsp
   Seletor [style*="table-layout"] garante que apenas tabelas
   de listagem (com table-layout:fixed inline) sejam afetadas,
   preservando formulários, combos e clean-tables.
   ================================================ */

/* Células de dados: padding confortável, texto com ellipsis */
.list-content table[style*="table-layout"] tbody td {
    padding: 8px 5px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Hover na linha: destaque visual ao passar o mouse */
.list-content table[style*="table-layout"] tbody tr {
    transition: background-color 0.15s ease;
}
.list-content table[style*="table-layout"] tbody tr:hover {
    background-color: #FFF5EE !important;
}

/* Coluna de opções precisa de overflow visível para menus tooltip */
.list-content table[style*="table-layout"] tbody td.options,
.list-content table[style*="table-layout"] tbody td.checkbox {
    overflow: visible;
    text-overflow: clip;
}

/* Tabelas com formulários embutidos (selects, inputs) que usam table-layout:fixed
   precisam de overflow visível para que combos Chosen.js funcionem */
.list-content table.produto-table tbody td {
    overflow: visible;
    white-space: normal !important;
    text-overflow: unset;
}

/* Elementos visíveis APENAS no mobile (ex: valor embutido na célula do cliente) */
.show-mobile {
    display: none;
}

/* ================================================
   LOW-RES - Ocultar colunas secundárias em telas intermediárias
   Uso: adicionar classe "hide-low-res" em <col>, <td> header e <td> body
   ================================================ */
@media (max-width: 1200px) {
    .hide-low-res {
        display: none !important;
    }
}

/* ================================================
   MOBILE - Ocultar colunas secundárias em telas pequenas
   Uso: adicionar classe "hide-mobile" em <col>, <td> header e <td> body
   Uso: adicionar classe "show-mobile" para exibir apenas no mobile
   ================================================ */
@media (max-width: 800px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
        font-size: 12px;
        color: #388E3C;
        font-weight: 600;
        margin-top: 2px;
    }

    /* Resumo (thead de totais) mais compacto no mobile */
    .list-content table thead td.values {
        font-size: 11px;
        padding: 4px 3px;
    }

    /* Cabeçalho de listagem: esconder botões secundários, manter CTA e impressão */
    .list-options > .button:not(.adicionar-button):not(.cancel-button):not(.confirm-button):not(#btnPrint):not(#btnOpenReportOptions):not(#btnopcoes) {
        display: none !important;
    }

    /* Stats mobile - grid 2x2 compacto */
    .pdv-stats-mobile {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 8px 10px;
        background: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }

    .pdv-stats-mobile-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px 8px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #eee;
    }

    .pdv-stats-mobile-label {
        font-size: 10px;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        font-weight: 600;
    }

    .pdv-stats-mobile-value {
        font-size: 14px;
        font-weight: 700;
        color: #333;
    }

    .pdv-stats-mobile-total {
        border-left: 3px solid #388E3C;
    }
}

.align-left, .text {
    text-align: left;
}

.align-center, .date, .despesa {
    text-align: center;
}

.align-right, .value, .negative-value, .midlle-value, .positive-value, .options {
    text-align: right;
}

.align-left {
    text-align: left;
}

.positive-value {
    color: #228B22 !important;
}

.positive-value a:link, .positive-value a:visited {
    color: #228B22;
    text-decoration: none;
}

.positive-value a:hover, .positive-value a:active {
    color: #228B22;
    text-decoration: none;
}

.negative-value {
    color: #B22222 !important;
}

.negative-value a:link, .negative-value a:visited {
    color: #B22222;
    text-decoration: none;
}

.negative-value a:hover, .negative-value a:active {
    color:#B22222;
    text-decoration: none;
}

.midlle-value {
    color: #FF9648;
}

.header, th.header {

    background-color: #757575;

    color: #fff;

    border: 0px;

}

.subheader, th.subheader {

    background-color: #AAAAAA;

    color: #fff;

    border: 0px;

}

.values {

    padding: 4px;
    padding-bottom: 10px;

    background-color: #FFFFFF;

    font-size: 16px;
    color: #757575;

    border: 0px;

}

td, .values, align-center, .despesa, .text,
.align-right, .value, .negative-value, .midlle-value,
.positive-value, .options {

    white-space: unset !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;

}

.despesa {
    color: #B22222;
}

.receita {
    color: #228B22;
}

.cor-incompleta {
    color: #de9d40;
}

#container {

    position: relative;

    min-height: 100%;

}

#messages-container {

    display: none;

    position: fixed;

    width: 100%;
    /* height: 40px; - Removido para permitir altura dinamica */

    vertical-align: central;

    top: 110px; /* Abaixo do mega menu de 2 linhas (100px header + 10px) */
    left: 0;
    margin: 0;
    padding: 0 20px;

    z-index: 900; /* Abaixo do menu dropdown (1000) */

    pointer-events: none; /* Permite cliques passarem pelo container */

    box-sizing: border-box; /* Evita overflow com padding */

}

#messages-container *,
#messages-container *::before,
#messages-container *::after {
    box-sizing: border-box;
}

#messages-container .gm-alert-banner {
    pointer-events: auto; /* Apenas o banner captura cliques */
}

#messages-container #message-slot {

    position: relative;

    width: 100%;
    max-width: 900px;
    margin: 0 auto;

}

/* Ajustes para o container de alertas inline */
#messages-container .gm-alert-container.gm-alert-inline {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 0;
    margin-top: 0; /* Remove margin extra quando dentro do messages-container */
    margin-bottom: 0;
}

#messages-container #message-close {

    display: none; /* Oculta o botao de fechar antigo - cada banner tem seu proprio */

}

/* Responsividade do messages-container */
@media (max-width: 600px) {
    #messages-container {
        padding: 0 8px;
        top: 70px; /* Ajuste para header mobile menor */
    }

    #messages-container #message-slot {
        max-width: 100%;
    }

    #messages-container .gm-alert-banner {
        padding: 10px 12px;
        gap: 8px;
    }
}

#header {

    position:fixed;

    width:100%;
    height:40px;

    z-index: 4000 !important;

    background-color: #899c6e; /* Old browsers */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#899c6e), to(#9ea5b8)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #899c6e, #9ea5b8); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image:    -moz-linear-gradient(top, #899c6e, #9ea5b8); /* Firefox 3.6+ */
    background-image:     -ms-linear-gradient(top, #899c6e, #9ea5b8); /* IE 10+ */
    background-image:      -o-linear-gradient(top, #899c6e, #9ea5b8); /* Opera 11.10+ */
    background: linear-gradient(to bottom, #899c6e 0%, #9ea5b8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#899c6e', endColorstr='#9ea5b8',GradientType=0 ); /* IE6-8 */

}

#header-separator {

    position: absolute;

    width: 100%;
    height: 10px;

    z-index: 3000 !important;

    top: 85px;

    background: url("../images/blue-separator.png") top center repeat;

}

div#content {

    clear: both;

    position: relative;

    float: left;

    width: 100%;

    padding-bottom: 50px;

}

#footer {

    position:absolute;

    width:100%;
    height:50px;

    bottom:0;

}

#sub-content {
    
    display: flex;
    
    justify-content: center;
    
    align-items: center;

    position: fixed;

    z-index: 950;

    min-width: 100vw;
    min-height: 100vh;
    
    height: auto;

    top: 15px;

    background-color: rgba(0,0,0,0.25);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    cursor: pointer;

}

#sub-content-panel {

    clear: both;

    position: relative;

    overflow: auto;

    max-width: 600px;
    min-height: 170px;
    max-height: 400px;
    overflow-y: auto;

    font-size: 30px;

    text-align: center;

    margin: 20px;
    padding: 14px 24px 24px 24px;

    background-color: #FFFFFF;

    border: 1px solid #E0E0E0;
    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0,0,0,.12);

}

#sub-content-panel-title {

    position: relative;

    width: 100%;
    height: 34px;

    line-height: 34px;

    text-align: left;
    vertical-align: middle;

    float: left;

    cursor: auto;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;

    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 10px;
    margin-bottom: 4px;

    box-sizing: border-box;

}

#sub-content-panel-close {

    position: relative;

    float: right;

    font-size: 20px;
    font-weight: 300;
    color: #999;
    text-decoration: none;

    top: 0;
    padding: 0 2px;

    transition: color 0.15s;

}

#sub-content-panel-close:hover {
    color: #333;
}

#sub-content-panel-content {

    position: relative;

    float: left;

    width: 100%;

    font-family: Arial, Gadget, sans-serif;
    font-size: 14px;

    cursor: auto;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

#sub-content- hr {

    height: 1px;

    border: 0;

    color: #bfbfbf;
    background-color: #bfbfbf;

}

#loading,
#loading2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 950;
    min-width: 100vw;
    min-height: 100vh;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* Container do loading moderno */
.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 50px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: loadingBoxAppear 0.3s ease-out;
}

@keyframes loadingBoxAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Spinner moderno com 3 pontos */
.modern-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.modern-spinner .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    animation: dotPulse 1.4s ease-in-out infinite;
}

.modern-spinner .dot:nth-child(1) {
    animation-delay: 0s;
}

.modern-spinner .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.modern-spinner .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spinner alternativo com anel */
.ring-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(249, 115, 22, 0.2);
    border-top-color: #f97316;
    border-radius: 50%;
    animation: ringSpin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg);
    }
}

#loading-indicator {
    position: relative;
    font-size: 30px;
    text-align: center;
    color: #f97316;
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


.loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: progress;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 75;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.invisible {
    display: none;
}

.loading-content .loading-indicator {

    position: relative;

    top: 50px;

    text-align: center;

    font-size: 30px !important;
    color: #FFFFFF;

}

.loading-content-size {

    clear: both;

    position: relative;

    width: 100%;
    height: 50% !important;
    top: 50%;

    padding: 0;

    text-align: center;

    font-size: 20px;
    color: #757575;

}

#loading-text {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    color: #374151;
    margin-top: 8px;
}

.list-info-message {

    clear: both;

    position: relative;

    width: 100%;
    height: 25px;
    line-height: 25px;

    vertical-align: central;

    text-align: center;

    font-family: Arial, Gadget, sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 1px 1px #555555;

    background-color: #CCCCCC;

}

.list-info-message-more {

    display:none;

    clear: both;

    vertical-align: central;

    text-align: center;

    height: 40px;
    line-height: 40px;

    padding-top: 10px;

    background-color: transparent;

}

#menu-empresa {

    position: absolute;

    font-family: Arial, Gadget, sans-serif;
    font-size: 22px;
    text-shadow: 0.1em 0.1em 0.05em #333;

    color: #FFFFFF;

    float: left;

    margin-left: 15px;

}

#menu-empresas {
    
    flex: 1;
    
}

#menu-container {
    
    clear: both;

    position: relative;
    
    flex: 2;

    height: 40px;

    line-height: 40px !important;
    vertical-align: bottom;

    padding: 0;
    margin: 0;
    margin-right: 27px;

    text-align: right;

    float: right;

}

.panel {

    width: 100%;

    min-height: 100px;
    max-height: 400px;

    overflow: auto;

    float: left;

    margin: 0 1em 1em 0;

}

.filter {

    float: left;

    width: 100%;

}

div.filter {
    clear: both;
}

.list {

    float: left;

    width: 100%;

}

.panel, .list, .filter {

    position: relative;

    min-height: 15px;

    border-radius: 4px;

    padding: 10px;

    border: 1px solid #bfbfbf;

    background-color: #ffffff;

    cursor: auto;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.panel-title, .list-title, .filter-title {

    position: relative;

    height: 30px;

    line-height: 30px;

    vertical-align: middle;

    float: left;

    cursor: auto;

    font-family: Arial, Gadget, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.panel-options, .list-options, .filter-options {

    position:relative;

    height: auto;

    line-height: auto;

    vertical-align: middle;

    float: right;

    cursor: auto;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.panel-content, .list-content, .filter-content {

    position: relative;

    float: left;

    width: 100%;

    font-family: Arial, Gadget, sans-serif;
    font-size: 14px;

    cursor: auto;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.panel-content hr, list-content hr, filter-content hr {

    height: 1px;

    border: 0;

    color: #bfbfbf;
    background-color: #bfbfbf;

}

.panel-footer, .list-footer, .filter-footer {

    position: relative;

    height: 30px;

    line-height: 30px;

    vertical-align: middle;

    float: left;

    cursor: auto;

}

.category {

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #899c6e;

    float: left;

    margin-right: 5px;

}

::-webkit-input-placeholder { color:#AAAAAA; }
::-moz-placeholder { color:#AAAAAA; }
:-ms-input-placeholder { color:#AAAAAA; }
input:-moz-placeholder { color:#AAAAAA; }

.blues {
    color: #fff;
    width: 135px;
    height: 35px;
    cursor: pointer;
    font-family: Arial, Gadget, sans-serif;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border-width: 1px;
    border-color: #71a600 #2fa600 #000;
    background-color: #6891e7;
    background-image: -moz-linear-gradient(top,#c9d2bc 0, #899c6e 100%);
    background-image: -ms-linear-gradient(top,#c9d2bc 0, #899c6e 100%);
    background-image: -o-linear-gradient(top,#c9d2bc 0, #899c6e 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c9d2bc),color-stop(100%, #899c6e));
    background-image: -webkit-linear-gradient(top,#c9d2bc 0,#899c6e 100%);
    background-image: linear-gradient(to bottom,#c9d2bc 0,#899c6e 100%);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
    -moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
    -ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
    -webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
    box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#c9d2bc,EndColorStr=#899c6e);
}

.blues:hover {
    border-color: #002d59 #002d59 #000;
    -moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#9ca98a ,EndColorStr=#899c6e);
    background-image: -moz-linear-gradient(top,#9ca98a 0,#899c6e 100%);
    background-image: -ms-linear-gradient(top,#9ca98a 0,#899c6e 100%);
    background-image: -o-linear-gradient(top,#9ca98a 0,#899c6e 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#9ca98a),color-stop(100%,#899c6e));
    background-image: -webkit-linear-gradient(top,#9ca98a 0,#899c6e 100%);
    background-image: linear-gradient(to bottom,#9ca98a 0,#899c6e 100%);
}

.blues:active {
    border-color: #000 #002d59 #002d59;
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
    -ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#899c6e,EndColorStr=#899c6e);
    background-image: -moz-linear-gradient(top,#899c6e 0,#899c6e 100%);
    background-image: -ms-linear-gradient(top,#899c6e 0,#899c6e 100%);
    background-image: -o-linear-gradient(top,#899c6e 0,#899c6e 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#899c6e),color-stop(100%,#899c6e));
    background-image: -webkit-linear-gradient(top,#899c6e 0,#899c6e 100%);
    background-image: linear-gradient(to bottom,#899c6e 0,#899c6e 100%);
}

.button {

    height: 30px;

    font-family: Arial, Gadget, sans-serif;
    font-weight: 700;
    font-size: 11px;

    color: #333333;

    text-decoration: none;

    cursor: pointer;

    padding: 0 10px;

    border: 1px solid #C6C6C6;
    border-radius: 2px 2px 2px 2px;

    background-color: #F8F8F8;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#ECECEC));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image:      -o-linear-gradient(top, #F8F8F8, #ECECEC);
    background: linear-gradient(to bottom, #F8F8F8 0%, #ECECEC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#ECECEC',GradientType=0 );

}

.button:hover, .button:focus, .button:active {

    border-color: #BBBBBB;

    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#ECECEC));
    background-image: -webkit-linear-gradient(center top, #FFFFFF, #ECECEC);
    background-image:    -moz-linear-gradient(center top, #FFFFFF, #ECECEC);
    background-image:     -ms-linear-gradient(center top, #FFFFFF, #ECECEC);
    background-image:      -o-linear-gradient(center top, #FFFFFF, #ECECEC);
    background: linear-gradient(to bottom, #FFFFFF 0%, #ECECEC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#ECECEC',GradientType=0 );

}

.panel-options .button {

    padding: 0 6px;

}

.small-button {

    height: 25px;

    padding: 0 3px;

}

.confirm-button {

    background-color: #d0f4b8;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#d0f4b8));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #d0f4b8);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #d0f4b8);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #d0f4b8);
    background-image:      -o-linear-gradient(top, #F8F8F8, #d0f4b8);
    background: linear-gradient(to bottom, #F8F8F8 0%, #d0f4b8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#d0f4b8',GradientType=0 );

}

.green-button {
    height: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    color: white;
    padding: 10px 10px 10px 10px;
    border: solid;
    border-color: #6BBF73;
    border-radius: 8px 8px 8px 8px;
    background-image: none;
    background: #6BBF73;
    filter: none;
}

.green-button:hover {

    color: #6BBF73;
    border: solid;
    border-color: #6BBF73;
    background-image: none;
    background: #ffffff;
    filter: none;
}

.login-button {

    position: relative;

    float: right;

    height: 30px;

    font-family: Arial, Gadget, sans-serif;
    font-weight: 700;
    font-size: 11px;

    text-decoration: none;

    cursor: pointer;

    padding: 0 10px;

    border: 1px solid #C6C6C6;
    border-radius: 2px 2px 2px 2px;

    color: #FFFFFF;

    background-color: #F78C40; /* Old browsers */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F78C40), to(#D67632)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(center top, #F78C40, #D67632); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image:    -moz-linear-gradient(center top, #F78C40, #D67632); /* Firefox 3.6+ */
    background-image:     -ms-linear-gradient(center top, #F78C40, #D67632); /* IE 10+ */
    background-image:      -o-linear-gradient(center top, #F78C40, #D67632); /* Opera 11.10+ */
    background: linear-gradient(center top, #F78C40 0%, #D67632 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F78C40', endColorstr='#D67632',GradientType=0 ); /* IE6-8 */

}

.login-button:hover, .login-button:focus, .login-button:active {

    background-color: #FDA361; /* Old browsers */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDA361), to(#F78C40)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(center top, #FDA361, #F78C40); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image:    -moz-linear-gradient(center top, #FDA361, #F78C40); /* Firefox 3.6+ */
    background-image:     -ms-linear-gradient(center top, #FDA361, #F78C40); /* IE 10+ */
    background-image:      -o-linear-gradient(center top, #FDA361, #F78C40); /* Opera 11.10+ */
    background: linear-gradient(center top, #FDA361 0%, #F78C40 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDA361', endColorstr='#F78C40',GradientType=0 ); /* IE6-8 */

}

.confirm-button:hover, .confirm-button:focus, .confirm-button:active {

    border-color: #BBBBBB;

    background-color: #e4fdd3;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#d0f4b8));
    background-image: -webkit-linear-gradient(center top, #FFFFFF, #d0f4b8);
    background-image:    -moz-linear-gradient(center top, #FFFFFF, #d0f4b8);
    background-image:     -ms-linear-gradient(center top, #FFFFFF, #d0f4b8);
    background-image:      -o-linear-gradient(center top, #FFFFFF, #d0f4b8);
    background: linear-gradient(to bottom, #FFFFFF 0%, #d0f4b8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#d0f4b8',GradientType=0 );

}

.cancel-button {

    background-color: #f4bbb8;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#f4bbb8));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #f4bbb8);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #f4bbb8);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #f4bbb8);
    background-image:      -o-linear-gradient(top, #F8F8F8, #f4bbb8);
    background: linear-gradient(to bottom, #F8F8F8 0%, #f4bbb8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#f4bbb8',GradientType=0 );

}

.cancel-button:hover, .cancel-button:focus, .cancel-button:active {

    border-color: #BBBBBB;

    background-color: #fdd2d0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#f4bbb8));
    background-image: -webkit-linear-gradient(center top, #FFFFFF, #f4bbb8);
    background-image:    -moz-linear-gradient(center top, #FFFFFF, #f4bbb8);
    background-image:     -ms-linear-gradient(center top, #FFFFFF, #f4bbb8);
    background-image:      -o-linear-gradient(center top, #FFFFFF, #f4bbb8);
    background: linear-gradient(to bottom, #FFFFFF 0%, #f4bbb8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#f4bbb8',GradientType=0 );

}

.adicionar-button {

    background-color: #b8e4f4;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#b8e4f4));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:      -o-linear-gradient(top, #F8F8F8, #b8e4f4);
    background: linear-gradient(to bottom, #F8F8F8 0%, #b8e4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#b8e4f4',GradientType=0 );

}

.adicionar-button:hover, .adicionar-button:focus, .adicionar-button:active {

    border-color: #BBBBBB;

    background-color: #b8e4f4;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#b8e4f4));
    background-image: -webkit-linear-gradient(center top, #FFFFFF, #b8e4f4);
    background-image:    -moz-linear-gradient(center top, #FFFFFF, #b8e4f4);
    background-image:     -ms-linear-gradient(center top, #FFFFFF, #b8e4f4);
    background-image:      -o-linear-gradient(center top, #FFFFFF, #b8e4f4);
    background: linear-gradient(to bottom, #FFFFFF 0%, #b8e4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#b8e4f4',GradientType=0 );

}

.enviar-button {

    background-color: #b8e4f4;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#b8e4f4));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:      -o-linear-gradient(top, #F8F8F8, #b8e4f4);
    background: linear-gradient(to bottom, #F8F8F8 0%, #bcffa5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#b8e4f4',GradientType=0 );

}

.error-button {

    background-color: #b8e4f4;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#b8e4f4));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:      -o-linear-gradient(top, #F8F8F8, #b8e4f4);
    background: linear-gradient(to bottom, #F8F8F8 0%, #ffbea5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#b8e4f4',GradientType=0 );

}

.pdv-sync-button {

    background-color: #b8e4f4;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#b8e4f4));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:    -moz-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:     -ms-linear-gradient(top, #F8F8F8, #b8e4f4);
    background-image:      -o-linear-gradient(top, #F8F8F8, #b8e4f4);
    background: linear-gradient(to bottom, #F8F8F8 0%, #fff8a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#b8e4f4',GradientType=0 );

}


.shadowfield {
    position: relative;
    width: 100%;
    font-size: 15px;
    font-family: Arial, Gadget, sans-serif;
    font-weight: normal;
    background: #f7f8f8;
    color: #555555;
    line-height: 1.4;
    padding: 6px 10px;
    outline: none;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;

    border-radius: 4px;
    border: 1px solid #bfbfbf;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;  
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}
.shadowfield:focus {
    border-color: #f3bf86; 
    background: #fff;
    box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5); 
    -moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5); 
    -webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5);
}

.alert {

    font-family: Arial, Gadget, sans-serif;

    background-color: #FCF8E3;
    padding: 11px 35px 11px 14px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: bold;

}
.alert, .alert-heading {
    color: #C09853;
}
.alert .close {
    line-height: 18px;
    position: relative;
    right: -21px;
    top: -2px;
}
.alert-success {
    background-color: #DFF0D8;
    border-color: #D6E9C6;
}
.alert-success, .alert-success .alert-heading {
    color: #468847;
}
.alert-danger, .alert-error {
    background-color: #F2DEDE;
    border-color: #EED3D7;
}
.alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading {
    color: #B94A48;
}
.alert-info {
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}
.alert-info, .alert-info .alert-heading {
    color: #3A87AD;
}
.alert-block {
    padding-bottom: 14px;
    padding-top: 14px;
}
.alert-block > p, .alert-block > ul {
    margin-bottom: 0;
}
.alert-block p + p {
    margin-top: 5px;
}

.form {

    padding-top: 10px;

}

.required, .not-required {
    
    display: flex;
    
    flex-direction: row;
    
    align-items: end;
    
    width: 100%;
    
    line-height: 40px;

    vertical-align: middle;

    bottom: 5px;

}

.required, .not-required, .required .label, .not-required .label, .required .field, .not-required .field,
.required .half-field, .not-required .half-field,
.required .small-half-field, .not-required .small-half-field,
.required .date, .not-required .date,
.required .date .shadowfield, .not-required .date .shadowfield,
.required .small, .not-required .small,
.required .small .shadowfield, .not-required .small .shadowfield,
.required .field img, .required .half-field img, .required .date img,
.not-required .field img, .not-required .half-field img, .not-required .date img,
.required .short-label, .not-required .short-label,
.required .short-field, .not-required .short-field,
.required .short-button, .not-required .short-button,
.required .short-combo, .not-required .short-combo,
.required .short-icon, .not-required .short-icon {

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.required .label, .not-required .label {

    float: left;

    text-align: right;

    width: 40%;

}

.required .field, .not-required .field {

    float: left;

    width: 50%;
    
    max-width: 400px;
    
    min-height: 40px;

    text-align: left;

    padding-left: 8px;

}

.big-field {
    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing: border-box;
    width: 40%;
    min-height: 30px;
    margin: 20px;
}


.filter-desc {

    font-weight: bold;

    font-size: 11px !important;

}

.required textarea, .not-required textarea {

    box-sizing: border-box;
    
    width: 100%;
    
    min-height: 130px;
    
    resize: none;

    float: left;
    
    margin: 0;
    
}

.required .half-field, .not-required .half-field, .required .date, .not-required .date {

    float: left;

    /*width: 25%;*/
    min-height: 40px;

    text-align: left;

    padding-left: 8px;

}

.required .small-half-field, .not-required .small-half-field {

    float: left;

    width: 13%;
    min-height: 40px;

    text-align: left;

    padding-left: 8px;

}

.required .date .shadowfield, .not-required .date .shadowfield {

    width: 80%;

}

.required .small, .not-required .small {

    padding: 0px;
    margin: 0px;

}

.required .small .shadowfield, .not-required .small .shadowfield {

    width: 80%;

    padding: 6px 6px;

    font-size: 12px;

    text-align: left;

}

.required .field .shadowfield, .required .half-field .shadowfield, .required .small-half-field .shadowfield, .required .date .shadowfield {

    background: rgba(249, 239, 186, 0.5);

}

.required .field img, .required .half-field img, .required .date img,
.not-required .field img, .not-required .half-field img, .not-required .date img {

    vertical-align: middle;

    padding-left: 5px;

}

.required .short-label, .not-required .short-label {

    float: left;

    text-align: right;

}

.required .short-field, .not-required .short-field {

    float: left;

    text-align: left;

    padding-left: 8px;
    padding-right: 12px;

}

.required .short-button, .not-required .short-button {

    float: right;

    width: auto;

}

.required .short-combo, .not-required .short-combo {

    float: left;

    text-align: left;

    padding-left: 8px;
    padding-right: 12px;

}

.required .short-icon, .not-required .short-icon {

    float: left;

    text-align: center;

    margin-left: -10px;
    margin-right: -10px;

}

.small-field {

    width: 90%;

    padding: 4px 5px;

    font-size: 12px;

}

.smallest-field {

    width: 16%;

    padding: 4px 5px;

    font-size: 12px;

}

.smallest-field-gestao {

    width: 40%;

    padding: 4px 5px;

    font-size: 12px;

}

.labels {

    width: 100%;

    font-size: 12px;
    font-weight: bold;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

#calendarios {
    
    display: flex;
    
    flex-direction: row;
    
    width: 100%;
    
    margin-top: 10px;
    
}

.minimal-date {
    
    display: flex;
    
    flex-direction: column;
    
    align-items: flex-start;
    
    justify-content: center;
    
    line-height: unset !important;
    
}

.minimal-date .label {
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;

    width: 100%;
    
    height: auto;
    
}

.minimal-date .label label {
    
    font-weight: bold;

    vertical-align: bottom !important;

    color: #555555 !important;

}

.minimal-date .date {
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    width: 100%;
    
    height: auto;
    
}
    
.minimal-date .date input {

    width: 80%;

}

.filter-content .field {

    float: left;

    width: 100%;
    min-height: 40px;

    text-align: left;

}

.filter-content #calendar {

    float: left;

    width: 100%;
    min-height: 40px;

    font-size: 12px;
    font-weight: bold;
    text-align: center;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.filter-content #calendar .year {

    width: 100%;

    height: 24px;
    line-height: 24px;

    vertical-align: middle;

    padding-top: 4px;
    padding-bottom: 4px;

    margin-bottom: 4px;

    background-color: #666666;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.filter-content #calendar .year .click {
    color: #FFFFFF;
    font-size: 14px;
}

.filter-content #calendar .year .left-btn, .filter-content #calendar .year .right-btn {

    background: transparent;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    transition: all 0.2s ease;

}

.filter-content #calendar .year .left-btn:hover, .filter-content #calendar .year .right-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.filter-content #calendar .year .left-btn {

    margin-left: 5px;

    padding-left: 4px;
    padding-right: 4px;

}

.filter-content #calendar .year .right-btn {

    margin-right: 5px;

    padding-left: 4px;
    padding-right: 4px;

}

.filter-content #calendar .year #yearbutton {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    height: auto !important;
}

.filter-content #calendar .year #yearbutton:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.filter-content #calendar .months {

    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;

}

.filter-content #calendar .months tr, .filter-content #calendar .months tr:hover {

    background: transparent;

}

.filter-content #calendar .months td {

    box-sizing: border-box;

    width: 33.33%;
    height: 28px;

    color: #555555;
    background-color: #F5F5F5;

    position: relative;

    border: none !important;
    border-radius: 4px;

    font-size: 11px !important;

    padding: 4px 2px !important;

    transition: all 0.2s ease;

}

.filter-content #calendar .months td:hover {

    cursor: pointer;

    background-color: #FFF5EE;
    color: #c45c2c !important;

}

#colorSelector div {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../images/select.png) center;
}

div.msg-warning {

    clear: both;

    padding: 10px;

    font-weight: bold;
    height: 15px;
    text-align: center;

}

div.panel-space-separator {

    clear: both;

    padding: 10px;

    height: 1px;

    visibility:hidden;

}

div.filter-space-separator {

    clear: both;

    visibility:hidden;

}

div.filter-section {

    width: 100%;

    height: 20px;
    line-height: 20px;

    vertical-align: central;

    font-family: Arial, Gadget, sans-serif;
    font-size: 14px;
    color: #FFFFFF;

    padding-top: 2px;
    padding-bottom: 2px;

    margin-bottom: 5px;

    background-color: #757575;

}

div.filter-section span {

    float: left;

    margin-left: 5px;

}

div.filter-section a {

    float: right;

    margin-right: 2px;

}

div.filter-section a:link, div.filter-section a:visited {
    color:#FFFFFF;
    text-decoration: none;
}

div.filter-section a:hover, div.filter-section a:active {
    color:#CCCCCC;
    text-decoration: none;
}

.dashboard {
    
    display: flex;
    
    flex-direction: row;
    
    flex-wrap: wrap;
    
    width: 100%;
    
    height: auto;
    
}

.column-panel, .column-filter, .column-list {

    float: left;

    padding-bottom: 100px;

    margin: 0;
    padding: 10px 10px 0px 10px;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.column-panel {
    
    flex: 1 1 50%;
    
    width: 50%;
    
}

.column-filter {
    width: 25%;
}

.column-list {
    width: 75%;
}

.ui-sortable-placeholder {

    background-color: #fff !important;

    border: 3px dashed #757575 !important;

    visibility: visible !important;

    width: 99% !important;

    height: 100px !important;

}

.ui-sortable-placeholder * {
    visibility: hidden;
}

.full-spectrum .sp-palette {
    max-width: 200px;
}

.percent {

    width: 100%;
    height: 25px;

    border-radius: 4px;

    border: 1px solid #bfbfbf;

    background-color: #ffffff;

}

.percent .inner {

    height: 100%;

    background-color: #BFBFBF;

    overflow: hidden;

}

.overflowed {
    overflow: hidden;
}












.dropdown {

    clear: both;

    position: absolute;

    float: left;

    height: 38px;

    line-height: 20px !important;
    vertical-align: middle;

    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    margin-top: 0px;
    margin-left: 15px;
    text-align: left;

    text-decoration: none;

}

a.current-company {

    cursor: pointer;

    color: #FFFFFF !important;
    text-decoration: none !important;

    z-index: 9200 !important;

    font-family: Arial, Gadget, sans-serif;
    font-size: 18px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);

}

.submenu {

    background: #fff;

    position: absolute;

    top: 0px;
    left: 0px;
    z-index: -1 !important;
    width: 100%;
    display: none;
    padding: 40px 0 0px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

}

.root {

    list-style:none;
    margin:0px;
    padding:0px;
    font-size: 16px !important;
    border-top:1px solid #dedede;

}

.dropdown  li a {

    color: #000000 !important;
    display: block !important;
    padding: 0px !important;
    padding-left: 5px !important;
    cursor: pointer !important;
    text-decoration:none !important;
}

.dropdown li a:hover{

    background: #CCCCCC !important;

    color: #000000 !important;
    text-decoration: none !important;

}


#header-options ul {

    position: relative;

    float: right;

    z-index: 1;

    height: 50px;

    padding: 0;
    margin: 0;
    top: 0;

}

#header-options ul li {

    float: left;

    min-width: 40px;

    margin: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;

    list-style-type: none;

    text-shadow: #AAA 0 0 1px;

    border-right: 1px solid #AAA;

    line-height: 35px;

    color: #FFF;
    text-shadow: 0 -1px 1px #BFBFBF;
    text-align: center;

}

#header-options ul li:first-child {
    border-left: 1px solid #AAA !important;
} 

#header-options ul a {

    top: 4px !important;

    display:block !important;

    text-decoration:none !important;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);

    font-size: 15px;
    color:#fff;

}

/*#header-options ul li:hover {
    background-color:#BFBFBF;
}*/

.menu-activated, .menu-activated:hover, .menu-activated:focus {

    background: #fff !important;

    border-bottom: 1px solid #fff !important;

}

.menu-activated a {

    color:#BFBFBF !important;

}

.submenu-help, .submenu-settings, .submenu-user {

    display: none;

    background: #fff;

    position: absolute;

    z-index: -1 !important;

    top: 40px;

    padding: 10px 0 0px;

    border: 1px solid #AAA;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

}

.submenu-help, .submenu-settings, .submenu-user {

    width: 100%;

    left: 0px;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}

.submenu-help a, .submenu-settings a, .submenu-user a {

    clear: both;

    color: #666666 !important;

    text-shadow: none !important;

}

.submenu-help a:hover, .submenu-settings a:hover, .submenu-user a:hover,
.submenu-help a:focus, .submenu-settings a:focus, .submenu-user a:focus {

    background: #AAAAAA !important;

}

.clean-table {
    margin: 0;
}

.clean-table tr:hover {
    background-color: transparent;
}

.clean-table td, .clean-table td:first-child, .clean-table td:last-child {
    border: 0px;
    padding: 0px;
}

.pdv-button {

    max-width: 135px;
    height: 45px;

    font-size: 13px;

    margin-bottom: 5px;

}

.pdv-field {

    height: 45px;

    font-size: 23px;

    margin-bottom: 5px;

}

.pdv-total-field {

    width: 80%;
    height: 45px;

    font-size: 23px;
    font-weight: bold;

    text-align: center;

    margin-bottom: 5px;

}

.pie-chart {
    float: left;
    width: 45%;
}

.myTreetableGreen {
    padding: 0.3em 1.5em;
    margin:0;
    text-align:right;
    color: #006600;
    clear: both;
}

.myTreetableRed{
    clear: both;
    padding: 0.3em 1.5em;
    margin:0;
    text-align:right;
    color: #B22222;            
}

.myTreetableBlue{
    padding: 0.3em 1.5em;
    margin:0;
    text-align:right;
    color: #0000CC;
    clear: both;
}

.myColumn{
    padding: 0.3em 1.5em;
    margin:0;
    text-align:left;
    font-weight: bold;
    color: #006600;        
    width: 33%;
}


.file-wrapper {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.file-wrapper .button {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    padding: 0px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-wrapper input {
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.file-wrapper input {
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
}

.file-wrapper input {
    font-size: 100px;
}

.mini-help {
    clear:both;
    font-style: italic;
    font-size: 11px;
    color: #888888;
}

.relatorio-values{
    font-size: 18px;
}








.ui-state-default {
    border-top: 4px solid transparent !important;
}

.ui-state-active {
    border-top: 4px solid #E58039 !important;
}

.ui-tabs-nav {
    padding: 2px 2px 0 !important;
}

.ui-tabs-panel {
    margin-left: 2px !important;
    border: 1px solid #BFBFBF !important;
}

.ui-dialog {
    padding-bottom: 0px !important;
}

.ui-dialog-titlebar {
    padding: 0px !important;
    z-index: 1000 !important;
}

.ui-dialog-content {
    top: -20px !important;
    padding-bottom: 0px !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: none repeat scroll 0 center transparent;
}

.ui-icon-circle-triangle-e, .ui-icon-circle-triangle-w {
    font-size: 0px;
}

.dropdown-toggle {

    font-family: Arial, Gadget, sans-serif;
    font-size: 18px;
    text-shadow: 0.1em 0.1em 0.05em #333;

    color: #FFFFFF;

    float: left;

    text-decoration: none;

}

.toggle-options {
    font-size: 14px;
}


.clear-ul {

    /* clear: both; */

    margin: 0;
    padding: 0;
    border: 0;

    list-style:none;

}

.teste {
    position: relative;
}

.dropdown-menu, .dropdown-menu-user {
    position:absolute;
    top:100%;
    left:0;
    z-index:1000;
    display:none;
    float:left;
    min-width:160px;
    padding: 10px;
    margin:2px 0 0;
    list-style:none;
    background-color:#fff;
    border:1px solid #ccc;
    border:1px solid rgba(0,0,0,0.2);
    *border-right-width:2px;
    *border-bottom-width:2px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
    box-shadow:0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box
}

.dropdown-menu .divider, .dropdown-menu-user .divider {
    *width:100%;
    height:1px;
    margin:9px 1px;
    *margin:-5px 0 5px;
    overflow:hidden;
    background-color:#e5e5e5;
    border-bottom:1px solid #fff
}

.dropdown-menu li > a, .dropdown-menu-user li > a {
    display:block;
    padding: 3px 20px;
    clear:both;
    font-weight:normal;
    line-height:20px;
    white-space:nowrap;
    color:#555555 !important;
}

.open {
    *z-index:1000
}

.open>.dropdown-menu, .open>.dropdown-menu-user {
    display:block
}

.dropdown-menu, .dropdown-menu-user {
    margin-left:10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px
}

.dropdown-menu-user {
    margin-left:-11px;
}

.dropdown-menu:before, .dropdown-menu-user:before {
    position:absolute;
    top:-7px;
    left:9px;
    display:inline-block;
    border-right:7px solid transparent;
    border-bottom:7px solid #ccc;
    border-left:7px solid transparent;
    border-bottom-color:rgba(0,0,0,0.2);
    content:''
}

.dropdown-menu:after, .dropdown-menu-user:after {
    position:absolute;
    top:-6px;
    left:10px;
    display:inline-block;
    border-right:6px solid transparent;
    border-bottom:6px solid #fff;
    border-left:6px solid transparent;
    content:''
}

.dropdown-menu-user:before, .dropdown-menu-user:after {
    left:20px;
}

#login-header {

    position:fixed;

    width:100%;
    height: 75px;

    background-color: #E5E5E5;
    border-bottom: 1px solid #DADADA;

    z-index: 100;

}

#login-logo {

    position: relative;

    float: left;

    width:211px;
    height:70px;

    left:100px;
    top:5px;

}

#login-logo {
    background: url("../imagens/granmoney-logo-new.png") top center no-repeat;
}

.field-25{
    width: 25% !important;
}

.field-75{
    width: 75% !important;
}

.field-25 .shadowfield{
    width: 70% !important;
}

#dialog-pdv-fps-content {

    position: relative;

    width: 100%;

    padding: 10px;

}

#dialog-pdv-fps-keys {

    position: relative;

    float: left;

    width: 300px;

    overflow: auto;

    padding: 10px;

    max-height: 225px;

    overflow-y: scroll;

    border-top: 1px solid #555555;
    border-bottom: 1px solid #555555;

}

#dialog-pdv-fps-values {

    position: relative;

    float: left;

    width: 250px;

    margin-left: 100px;

    padding: 10px;

}

#atalhos {

    width: 100%;

    margin: auto;

    padding: 10px;

    cursor: pointer;

}

.fp-selecionada {
    background-color: #F78C40;
}

/* === Preços e planos === */
.planos {

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

}

.planos tr td {
    padding: 10px;
}

.planos .center {
    text-align: center;
}

.planos tr:hover {
    background-color: transparent;
}

p.titulo, span.preco-simbolo {
    font-family: 'Shadows Into Light Two', cursive;
    color: #555555;
}

p#planos-precos, p.help, p.option, span.preco-valor, p.text, p.text2 {
    font-family: 'Rancho', cursive;
    color: #555555;
}

tr.funcionalidades, a.detalhes, span.disponivel {
    font-family: 'Flamenco', cursive;
}

p#planos-precos {
    font-size: 32px;
}

p.help {
    color: #FDA361;
    text-shadow: 1px 1px #555555;
    font-size: 22px;
}

p.text, p.text2 {
    color: #BBBBBB;
    text-shadow: 1px 1px #555555;
    margin: auto;
    text-align: center;
}

p.text {
    font-size: 28px;
}

p.text2 {
    font-size: 24px;
}

p.text strong, p.text2 strong {
    color: #FDA361;
}

p.option {
    font-size: 18px;
    margin-bottom: 3px;
}

tr.funcionalidades {
    color: #555555;
    font-size: 18px;
}

a.detalhes {

    position: relative;

    float: right;

    margin-top: 3px;
    margin-right: 3px;

    font-size: 14px;
    font-weight: 600;
}

span.disponivel {
    color: #228B22;
}

span.indisponivel {
    color: #B22222;
}

span.parcial {
    color: #9F9F09;
}

p.titulo {
    font-size: 16px;
    font-weight: bold;
}

span.preco-valor {
    font-size: 40px;
}

.planos tr td {
    border-left: none;
    border-right: 1px dotted #757575;
    border-bottom: 1px dotted #757575;
}

div.funcionalidades-extras table.planos tbody tr td:first-child {
    padding-left: 25px;
}

.plano-atual {
    background-color: #F8FEF5;
}

div.chart-div {

    position: relative;

    float: left;

    width: auto;

}

div.panel-chart-table {

    position: relative;

    float: right;

    width: 50%;

    margin-top: 7px;

}

div.panel-chart-table div.results {

    max-height: 50px;

    overflow: auto;

}

div.panel-chart-table div.results a {


    color: #000000;

}

button.selecionado {

    background-color: #757575 !important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#757575), to(#757575)) !important;
    background-image: -webkit-linear-gradient(top, #757575, #757575) !important;
    background-image:    -moz-linear-gradient(top, #757575, #757575) !important;
    background-image:     -ms-linear-gradient(top, #757575, #757575) !important;
    background-image:      -o-linear-gradient(top, #757575, #757575) !important;
    background: linear-gradient(to bottom, #757575 0%, #757575 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#757575',GradientType=0 ) !important;

    color: #FFFFFF !important;

}

.content-error-page {

    position: relative;

    width: 1000px;

    margin: auto;
    margin-top: 150px;

    padding-left: 100px;

}

.content-error-page .ops {

    font-family: 'Patrick Hand', cursive;

    font-size: 28px;

}

.content-error-page .procura, .content-error-page a {

    font-family: 'Acme', cursive;

    font-size: 16px;

}

.content-error-page img {

    position: absolute;

    float: right;

    top: 0px;
    right: 110px;

}

.month-selected {
    background-color: #c45c2c !important;
    color: #ffffff !important;
}

.month-selected:hover {
    background-color: #a84d25 !important;
    color: #ffffff !important;
}

.ui-autocomplete {

    height: 200px;

    overflow-y: scroll;
    overflow-x: hidden;

    border: 1px solid #BFBFBF;

}

/* início to-top-bar */
.icons-top {
    background-image: url("../imagens/sprite_icons_topo.png");
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    height: 21px;
    margin-right: 5px;
    position: relative;
    width: 21px;
}

.to-top-bar {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    bottom: 0;
    height: 22px;
    margin: 0;
    padding: 0;
    position: fixed;
    text-indent: -333px;
    width: 100%;
    z-index: 999;
}
.to-top-bar a {
    background-image: url("../imagens/bt-topo.png");
    background-position: right center;
    background-repeat: no-repeat;
    display: block;
    height: 31px;
    margin-right: 50px;
    overflow: hidden;
    padding-left: 11px;
    padding-right: 16px;
    position: relative;
    top: -9px;
    width: 48%;
    float: right;
}
.topo-width {
    max-width: 1024px;
}

.id-orgao {
    color: #99C9D8;
    float: left;
    left: 0;
    position: relative;
    text-indent: 0;
    top: 13px;
}
.id-orgao span {
    color: #FFFFFF;
}

/* fim da to-top-bar */

/* menu */

#menu-div {

    clear: both;

    position: relative;

    height: 40px;
    line-height: 40px;

}

#menu-div2 {

    position: fixed;

    width: 100%;
    height: 40px;

    z-index: 4000;

}

#menu {

    color: #fff;
    font-size:14px;
    font-family:Arial, sans-serif;
    line-height:21px;
    text-align:left;

    list-style:none;

    height:40px;
    width: 100%;

    padding: 0;
    margin: 0;

    background-color: #F78C40; /* Old browsers */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F78C40), to(#D67632)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(center top, #F78C40, #D67632); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image:    -moz-linear-gradient(center top, #F78C40, #D67632); /* Firefox 3.6+ */
    background-image:     -ms-linear-gradient(center top, #F78C40, #D67632); /* IE 10+ */
    background-image:      -o-linear-gradient(center top, #F78C40, #D67632); /* Opera 11.10+ */
    background: linear-gradient(center top, #F78C40 0%, #D67632 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F78C40', endColorstr='#D67632',GradientType=0 ); /* IE6-8 */

}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:first-child {
    margin-left: 15px;
}

#menu li:hover {

    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;

}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("../images/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
    float:right;
    margin-right:50px;
}

#menu .menu_right:last-child {
    margin-right:20px;
}

#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    color: #000;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#menu p {
    line-height:18px;
    margin:0 0 10px 0;
}

#menu li:hover div a {
    font-size:12px;
    color:#015b86;
}
#menu li:hover div a:hover {
    color:#029feb;
}


.strong {
    font-weight:bold;
}
.italic {
    font-style:italic;
}

#menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}

#menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width: 90%;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}

#drop2 {
    float: right;
    margin-right: 25px;
}

/* fim menu */

div#plano-representante {

    position: relative;

    margin-left: 25px;

    font-family: 'Lato', sans-serif;

    font-size: 15px;

}

div#plano-representante span.saudacao {
    display: block;
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 22px;
    color: #f47d35;
}

div#contato-representante {

    position: relative;

    width: 500px;

    margin-left: 25px;

    font-family: 'Lato', sans-serif;

    font-size: 15px;

}

div#contato-representante span {

    font-weight: bold;

}

div#contato-representante span.nome {
    font-size: 18px;
}

.clearLink {

    margin-right: 10px;

    font-size: 11px;
    font-weight: bold;

}

.tour-big {

    font-family: 'Patrick Hand', cursive;

    font-size: 22px;
    font-weight: bold;

    text-align: center;

    text-shadow: 1px 1px #333333;

    color: #ffba87;

}

.tour-medium {

    font-family: 'Patrick Hand', cursive;

    font-size: 15px;
    font-weight: bold;

    text-align: center;

    color: #555555;

}

.welcome-table {

    margin: 5px;

    cursor: pointer;

}

.welcome-table thead tr {
    border-bottom: dashed 2px #CCCCCC;
}

.welcome-table thead tr:hover {
    background-color: transparent;
}

.welcome-table tbody tr {
    border-bottom: dotted 2px #EEEEEE;
}

.welcome-table tbody tr:hover {
    background-color: #EEEEEE;
}

.welcome-table tr.selected {
    background-color: #EEDDDD !important;
}

.welcome-table td, .welcome-table td:first-child, .welcome-table td:last-child {
    border: 0px;
    padding: 5px;
}

.desc-table tr:hover {
    background-color: transparent !important;
}

table.videos-list {

    position: relative;

    width: 70%;

    margin: auto;

    margin-top: 5px;

    border-collapse: collapse

}

table.videos-list td {

    padding: 10px !important;

    font-family: 'Lato', sans-serif !important;

    font-size: 14px !important;

    color: #333333 !important;

}

table.videos-list a {

    font-size: 18px !important;

    font-weight: bold !important;

}

.visao-geral-menu {

    position: relative;

    width: 100%;
    height: 30px;

    margin-top: 5px;

    padding: 5px;

    background-color: #DDDDDD;

}

.visao-geral-menu .left-side {

    position: relative;

    float: left;

    margin-left: 5px;

}

.visao-geral-menu .right-side {

    position: relative;

    float: right;

    margin-right: 15px;

}

.clearable {

    background: #f7f8f8 url("../images/mJotv.gif") no-repeat right 10px center !important;
    padding-right: 20px !important;

}

.required .clearable {

    background: rgba(249, 239, 186, 0.5) url("../images/mJotv.gif") no-repeat right 10px center !important;
    padding-right: 20px !important;

}

.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX { cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

textarea {
    margin-top: 10px;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
    border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
    border-image: none;
    border-radius: 6px 6px 6px 6px;
    border-style: none solid solid none;
    border-width: medium 1px 1px medium;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
    color: #555555;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    line-height: 1.4em;
    padding: 5px 8px;
    transition: background-color 0.2s ease 0s;
}


textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;
}

.notification {
    position: absolute;
    top: 0px;
    border: 1px solid #FFF;
    right: 10px;
    font-size: 12px;
    background: #f44336;
    color: #FFFFFF;
    min-width: 20px;
    padding: 0px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 19px;
    vertical-align: middle;
    display: block;
}
.msg-nova {
    background-color: #FFE4C4;
    /* border: 1px solid #DEB887; */
    margin-bottom: 1px;
    font-family: Arial, Gadget, sans-serif;
    font-size: 14px;
}
.msg-nova .msg-nova-link{
    min-height: 40px !important;
    font-weight: bold !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.msg-nova .msg-nova-link:hover{
    background-color: #DEB887 !important;
}



.msg-antiga {
    background-color: #FFFFFF;
    /* border-bottom: 1px solid #DEDEDE; */
    margin-bottom: 1px;
    font-family: Arial, Gadget, sans-serif;
    font-size: 14px;
}
.msg-antiga .msg-antiga-link{
    min-height: 40px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.msg-see-all {
    background-color: #FFE4C4;
    text-align: center;
    height: 40px;
    width: 100%;
    border: 0px solid;
    cursor: pointer;
    font-weight: bold !important;
}
.msg-see-all:hover{
    background-color: #DEB887 !important;
}
.msg-quebra-linha {
    width: 400px;
    word-break: keep-all;
}

.btn-painel {
    background-color: #2196F3;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-weight: bold !important;
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
}

.flyout{
    position: fixed;
    _position: absolute;
    top:0;
    _top:expression(eval(document()body()scrollTop));
    left:0px;
    width:100%;
    font-size:20px;
    background:#FFFFFF;
    border-bottom:1px solid #FFFFFF;
}

#flyout ul{
    background:#08009B;
    margin:0px;
}
#flyout li{
    float:left;
    line-height:80px;
    height:80px;
    text-align:center;
    font-weight:bold;
    color:#000000;
    list-style:none; 
    margin:0px;
    padding-right:5px;
    padding-left:10px;
    margin-left:5px;
    border-top:5px solid #FFFFFF;
    border-bottom:5px solid #FFFFFF;
    background:#FFFFFF;
    cursor:pointer;
    transition:all 0.1s linear;
    -moz-transition:all 0.1s linear;
    -webkit-transition:all 0.1s linear;
    -o-transition:all 0.1s linear;
}
#flyout li:hover{
    line-height:80px;
    height:80px;
    border-top:5px solid #05005F;
    border-bottom:5px solid #05005F;
}


#powerTip {
    background-color: #FFFFFF;
    padding: 8px 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: left;
    white-space: nowrap;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    min-width: 220px;
}

.icon-cog-1 {
    cursor: pointer;
    padding-right: 3px;
    color: #888888;
    transition: color 0.2s ease;
}

.icon-cog-1:hover {
    color: #c45c2c;
}

.lista i {
    font-style: normal;
    font-size: 15px;
    width: 20px;
    text-align: center;
    color: #888888;
    margin-right: 8px;
    transition: color 0.2s ease;
}

.lista {
    display: flex;
    align-items: center;
    color: #333333;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 1.4;
    list-style: none;
    text-align: left;
    cursor: pointer;
    padding: 10px 16px;
    margin: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.lista:hover {
    background-color: #FFF5EE;
    color: #c45c2c;
}

.lista:hover i {
    color: #c45c2c;
}

.lista:active {
    background-color: #FFE4D6;
}

.info{
    color: #757575;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-style: normal;
    text-align: left;
    white-space: pre-line
}

.descricao {
    width: 20%;
    height: 22px;
    text-align: left;
    font-weight: bold;
    border: none
}

.tributo {
    text-align: left;
    font-weight: bold;
}

.dados {
    border: none;
    width: 80%;
}
.valor{
    text-align: right;
}

.cabecalho-tributos{
    width: 70px;
    background-color: #757575;
    color: white;
    font-weight: normal;
    padding: 5px;
}

.table-tributos{
    margin-top: 20px;
    margin-bottom: 30px;
}

.text-center{
    display: block;
    text-align: center;
}

.container_info_plano_clientes {
    display: block;
    width: 70%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    background: #f7f7f7;
    padding-right: 20px;
    padding-left: 20px;
}

.container_info_plano_clientes tr:hover{
    background: transparent;
}

.container_info_plano_clientes:last-child {
    margin-bottom: 200px;
}

.td_info_plano_cliente { 
    padding: 20px; 
    line-height: 28px;
    border: none;
    width: 76.5%;
}

.info_plano_cliente_dados {
    color: #7A7A7A;
}

.td_info_plano_cliente_buttons {
    border: none;
}


.button-pagar{
    width: 100%;
    cursor: pointer;
    margin-left: auto;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    text-align: left;
    color: white;
    padding: 5px;
    margin-top: 8px;
    border: solid;
    border-color: #f47d35;
    border-radius: 4px;
    background-image: none;
    background: #f47d35;
}

.button-pagar:hover{
    cursor: pointer;
    color: #f47d35;
    border: solid;
    border-color: #f47d35;
    background-image: none;
    background: #ffffff;
    filter: none;
}

.legenda-button {
    color: #7A7A7A;
    font-size: 10px;   
    text-align: right;
    line-height: 14px;
    float: right;
}

.info_plano_dados_bancarios {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 25px;
}

.container_buttons_pagamento_total {
    display: flex;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.button-pagar-total {
    cursor: pointer;
    margin: auto;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: white;
    padding: 10px;
    border: solid;
    border-color: #f47d35;
    border-radius: 4px;
    background-image: none;
    background: #f47d35;
}

.button-pagar-total:hover{
    cursor: pointer;
    color: #f47d35;
    border: solid;
    border-color: #f47d35;
    background-image: none;
    background: #ffffff;
    filter: none;
}

.title-tracking-listar {
    font-size: 12pt;
    font-weight: bold;
}

.tracking-dados-nome {
    line-height: 14pt;
    font-weight: bold;
}

.tracking-dados {
    line-height: 14pt;
    font-weight: normal;
}

.tracking-dados-endereco {
    font-weight: normal;
    margin-left: 85px;
}

.half-field-gestao{
    width: 50%;
}

.shadowfield-small {
    position: relative;
    width: 90%;
    font-size: 14px;
    font-family: Arial, Gadget, sans-serif;
    font-weight: normal;
    background: #f7f8f8;
    color: #555555;
    line-height: 1.4;
    padding: 2px 10px;
    outline: none;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;

    border-radius: 4px;
    border: 1px solid #bfbfbf;

    -moz-box-sizing :border-box;
    -ms-box-sizing :border-box;
    -webkit-box-sizing:border-box;  
    -khtml-box-sizing :border-box;
    box-sizing :border-box;

}
.shadowfield-small:focus {
    border-color: #f3bf86; 
    background: #fff;
    box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5); 
    -moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5); 
    -webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(243, 191, 134, 0.5);
}


.two-row-table tr:hover{
    background-color: initial;
}

.two-row-table {
    border: none;
    vertical-align: middle; 

}

.two-row-table p{
    margin: 2px;
    vertical-align: middle;
}

.bot-line-two-row-table {
    border-bottom: 2px solid #bfbfbf;
    padding-bottom: 15px;
    vertical-align: middle;
}

.top-line-two-row-table {
    vertical-align: top;
    padding-top: 15px;
    border: none;
}

.form-control-feedback {
    
    display: none;
    
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    
    width: auto;
    
    line-height: auto;
    
}

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

.flexible-row {
    
    display: flex;
    
    flex-direction: row;
    
}

.flexible-column {
    
    display: flex;
    
    flex-direction: column;
    
}

.flexible-align-center {
    
    align-items: center;
    
}

.flexible-align-start {
    
    align-items: flex-start;
    
}

.flexible-align-end {
    
    align-items: flex-end;
    
}

.flexible-align-stretch {
    
    align-items: stretch;
    
}

.flexible-justify-center {
    
    justify-content: center;
    
}

.flexible-justify-start {
    
    justify-content: flex-start;
    
}

.flexible-justify-end {
    
    justify-content: flex-end;
    
}

.flexible-justify-around {
    
    justify-content: space-around;
    
}

.flexible-justify-between {
    
    justify-content: space-between;
    
}

.flexible-wrappable {
    
    flex-wrap: wrap;
    
}

.flexible-bordered-bottom {
    
    border-bottom: 1px solid #bfbfbf;
    
    padding: 10px 0px;
    
}

.flexible-font-sizing span {
    
    font-size: 10px !important;
    
    font-weight: bold !important;
    
}

.flexible-font-sizing input {
    
    font-size: 10px !important;
    
    padding: 4px !important;
    
}

.flexible-gap-5 {
    
    gap: 5px;
    
}

.flexible-gap-2 {
    
    gap: 2px;
    
}

.flexible-table-header {
    
    box-sizing: border-box;
    
    width: 100%;
    
    height: 25px;
    
    background: #757575;
    
    color: white;
    
    padding: 5px;
    
}

.video-explicacao {
    
    position: relative;
    
    width:560px;
    
}

.button-tutoriais {
    
    background-color: #FFFF99;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFF66));
    background-image: -webkit-linear-gradient(center top, #FFFFFF, #FFFF66);
    background-image:    -moz-linear-gradient(center top, #FFFFFF, #FFFF66);
    background-image:     -ms-linear-gradient(center top, #FFFFFF, #FFFF66);
    background-image:      -o-linear-gradient(center top, #FFFFFF, #FFFF66);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFF66 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFF66',GradientType=0 );
    
}

.button-tutoriais:hover, .button-tutoriais:focus, .button-tutoriais:active {
    
    background-color: #FFFFCC;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFCC), to(#FFFF99));
    background-image: -webkit-linear-gradient(top, #FFFFCC, #FFFF99);
    background-image:    -moz-linear-gradient(top, #FFFFCC, #FFFF99);
    background-image:     -ms-linear-gradient(top, #FFFFCC, #FFFF99);
    background-image:      -o-linear-gradient(top, #FFFFCC, #FFFF99);
    background: linear-gradient(to bottom, #FFFFCC 0%, #FFFF99 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFCC', endColorstr='#FFFF99',GradientType=0 );
    
}

.tutorial-video {
    
    position: absolute;
    
    top: 0;
    right: 0;
    
    background: #ff7070;
    color: white;
    
    border-radius: 7px;
    
    padding-left: 8px;
    padding-right: 9px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    cursor: pointer;
    
}

.tutorial-video:hover {
    
    background: #ff3030;
    color: white;
    
}

.tutorial-video a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.tutorial-video a:hover {
    color: white;
}

.tutorial-video span {
    font-size: 8px;
    font-weight: bold;
}


.color-cancelado {
    color: #dc3545 !important;
}

.color-pago {
    color: #28a745 !important;
}

.color-pendente {
    color: #ffc107 !important;
}

.color-falha {
    color: #dc3545 !important;
}

.color-reembolsado {
    color: #fd7e14 !important;
}

.pointer {
    cursor: pointer;
}

.underline, .underline:hover, .underline.active {
    text-decoration: underline;
}


.bold-hover:hover {
    font-weight: bold;
}

/* ==================== EMPTY STATE - RESULTADO VAZIO ==================== */
.empty-state {
    text-align: center;
    max-width: 550px;
    margin: 40px auto;
    padding: 20px;
}

.empty-state-illustration {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF3E0;
    border-radius: 50%;
}

.empty-state-illustration i {
    font-size: 48px;
    color: #E65100;
    opacity: 0.8;
}

.empty-state-illustration svg {
    width: 100%;
    height: 100%;
}

.empty-state-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.empty-state-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.6;
}

.empty-state-tips {
    text-align: left;
    margin: 20px 0 28px;
    padding: 0;
}

.empty-state-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.empty-state-tip i {
    color: #4CAF50;
    margin-top: 3px;
    flex-shrink: 0;
}

.empty-state-tip span strong,
.empty-state-tip span b {
    color: #333;
}

.empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
}

.empty-state-btn.primary {
    background: #E65100;
    color: white;
}

.empty-state-btn.primary:hover {
    background: #BF360C;
    transform: translateY(-1px);
}

.empty-state-btn.secondary {
    background: #f0f0f0;
    color: #555;
}

.empty-state-btn.secondary:hover {
    background: #e0e0e0;
}

.empty-state-btn.danger {
    background: #FECACA;
    color: #991B1B;
    border: 1px solid #F87171;
}

.empty-state-btn.danger:hover {
    background: #FCA5A5;
    transform: translateY(-1px);
}

.empty-state-btn.success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #6EE7B7;
}

.empty-state-btn.success:hover {
    background: #A7F3D0;
    transform: translateY(-1px);
}

.empty-state-btn.info {
    background: #DBEAFE;
    color: #1E40AF;
    border: 1px solid #93C5FD;
}

.empty-state-btn.info:hover {
    background: #BFDBFE;
    transform: translateY(-1px);
}

/* Responsividade Empty State */
@media (max-width: 480px) {
    .empty-state {
        padding: 15px;
        margin: 20px auto;
    }

    .empty-state-illustration {
        width: 80px;
        height: 80px;
    }

    .empty-state-illustration i {
        font-size: 36px;
    }

    .empty-state-title {
        font-size: 16px;
    }

    .empty-state-actions {
        flex-direction: column;
    }

    .empty-state-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== GM EMPTY STATE - PAINEIS ==================== */
.gm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    min-height: 200px;
}

.gm-empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.gm-empty-state-icon i {
    font-size: 32px;
    color: #94a3b8;
}

.gm-empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.gm-empty-state-message {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 90%;
}

.gm-empty-state-user {
    font-weight: 600;
    color: #E07020;
}

.gm-empty-state-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
    text-decoration: none;
}

.gm-empty-state-btn i {
    font-size: 12px;
}

.gm-empty-state-btn-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #6EE7B7;
}

.gm-empty-state-btn-success:hover {
    background: #A7F3D0;
    border-color: #34D399;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.gm-empty-state-btn-danger {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #F87171;
}

.gm-empty-state-btn-danger:hover {
    background: #FECACA;
    border-color: #EF4444;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.gm-empty-state-btn-primary {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FDBA74;
}

.gm-empty-state-btn-primary:hover {
    background: #FFEDD5;
    border-color: #F97316;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.2);
}

.gm-empty-state-btn-info {
    background: #DBEAFE;
    color: #1E40AF;
    border: 1px solid #93C5FD;
}

.gm-empty-state-btn-info:hover {
    background: #BFDBFE;
    border-color: #60A5FA;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

/* ── Form Section Divider ── */
.form-section {
    clear: both;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 8px 5px;
}
.form-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
}
.form-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, #ddd, transparent);
}
.form-info {
    clear: both;
    float: left;
    width: 100%;
    padding: 8px 5px 4px 5px;
    color: #888;
    font-size: 12px;
    line-height: 1.6;
}
.form-info i {
    color: #aaa;
    margin-right: 4px;
}

/* ============================
   Tracking Contrato - Histórico
   ============================ */

/* Summary */
.historico-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0;
    margin-bottom: 5px;
}
.historico-summary .count {
    background-color: #f0f0f0;
    padding: 5px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.historico-summary .count i {
    margin-right: 4px;
}

/* Table */
.historico-contrato-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.historico-contrato-table th {
    background-color: #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding: 10px 8px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #555;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-align: left;
}
.historico-contrato-table th.align-center {
    text-align: center;
}
.historico-contrato-table th.align-right {
    text-align: right;
}
.historico-contrato-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 13px;
}
.historico-contrato-table tbody tr:hover {
    background-color: #f9f9f9;
}
.historico-contrato-table .row-ativo {
    background-color: #f0faf0;
    border-left: 4px solid #28a745;
}
.historico-contrato-table .row-ativo:hover {
    background-color: #e5f5e5;
}
.historico-contrato-table .row-inativo {
    opacity: 0.7;
    border-left: 4px solid transparent;
}
.historico-contrato-table .row-inativo:hover {
    opacity: 1;
}
.historico-col-numero {
    color: #999;
    font-size: 11px;
    text-align: center;
    width: 30px;
    max-width: 30px;
}
.historico-col-valor {
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
.historico-col-empty {
    color: #ccc;
    font-size: 11px;
}

/* Status Badges */
.status-badge-ativo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: #28a745;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.status-badge-inativo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: #e0e0e0;
    color: #777;
    font-size: 11px;
    font-weight: 600;
}

/* Feature Tags */
.feature-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}
.feature-tag-comanda {
    background-color: #e8f4fd;
    color: #0277bd;
    border: 1px solid #b3e0f7;
}
.feature-tag-nfse {
    background-color: #fce4ec;
    color: #c62828;
    border: 1px solid #f8bbd0;
}
.feature-tag-loja {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}
.feature-tag-pix {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}
.feature-tag-boleto {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}
.feature-tag-ifood {
    background-color: #fbe9e7;
    color: #bf360c;
    border: 1px solid #ffccbc;
}

/* ==================== PAGAMENTO/RECEBIMENTO DE LANCAMENTO ==================== */
.nfpag-container {
    box-sizing: border-box;
}
.nfpag-container *, .nfpag-container *::before, .nfpag-container *::after {
    box-sizing: border-box;
}

/* Card do lancamento */
.nfpag-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.nfpag-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.nfpag-card-id {
    font-size: 13px;
    color: #989898;
}
.nfpag-card-id b {
    color: #555555;
    font-size: 14px;
}
.nfpag-card-link {
    display: inline-block;
    font-size: 12px;
    color: #E07020;
    text-decoration: none;
    border: 1px solid #E07020;
    border-radius: 4px;
    padding: 4px 10px;
    transition: background 0.15s, color 0.15s;
}
.nfpag-card-link:hover {
    background: #E07020;
    color: #FFFFFF;
}
.nfpag-card-obs {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
    line-height: 1.5;
    word-break: break-word;
}
.nfpag-card-obs b {
    color: #555;
}
.nfpag-card-total {
    font-size: 15px;
    font-weight: bold;
    color: #555;
    padding-top: 8px;
    border-top: 1px solid #F0F0F0;
}
.nfpag-card-total span {
    font-size: 18px;
    color: #333;
}


/* Secao de pagamento */
.nfpag-section-title {
    font-size: 13px;
    font-weight: bold;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #E07020;
    display: inline-block;
}

/* Grid de parcelas */
.nfpag-grid {
    margin-bottom: 20px;
}

/* Area de valores */
.nfpag-values-area {
    background: #FAFAFA;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}
.nfpag-values-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.nfpag-value-group {
    flex: 1;
}
.nfpag-value-group label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

/* Info box do proximo vencimento (pagamento parcial) */
.nfpag-partial-info {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-left: 4px solid #FFA000;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.nfpag-partial-info i {
    color: #F57F17;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.nfpag-partial-info-content {
    flex: 1;
}
.nfpag-partial-info-text {
    font-size: 13px;
    color: #5D4037;
    margin-bottom: 8px;
    line-height: 1.4;
}
.nfpag-partial-date-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nfpag-partial-date-group label {
    font-size: 13px;
    font-weight: bold;
    color: #5D4037;
    white-space: nowrap;
}

/* Botoes */
.nfpag-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

/* Validacao (erro) */
.nfpag-error-card {
    background: #FFF3E0;
    border: 1px solid #FFCC80;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}
.nfpag-error-card i {
    font-size: 24px;
    color: #E07020;
    display: block;
    margin-bottom: 10px;
}
.nfpag-error-card p {
    margin: 6px 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* Footer da tabela de parcelas */
.nfpag-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #F5F5F5;
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-size: 13px;
    color: #757575;
}
.nfpag-table-footer-total {
    font-weight: bold;
    color: #333;
    font-size: 14px;
}