/*
 *  Copyright© 02/2016 - Logique Sistemas®.
 *  All rights reserved
 */
/**
  Folha de estilo em comum a todas as páginas do BR-PlantExpert

  Define algumas classes comuns ao projeto e alterações que foram realizadas no template
*/

/**
    Layouts gerais do template
 */

input::placeholder{
    color: #7676767d;
}

.wrapper {
    padding: 16px !important;
}

.wrapper .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.row-small-paddding-multiline > [class*='col-'] {
    padding-left: 4px;
    padding-right: 4px;
}
.row-small-padding-sempre > [class*='col-'] {
    padding-left: 4px;
    padding-right: 4px;
}

.row-small-padding-sempre > [class*='col-']:first-child {
    padding-left: 16px;
    padding-right: 4px;
}

.row-small-padding-sempre > [class*='col-']:last-child {
    padding-left: 4px;
    padding-right: 16px;
}

.columns-small-padding > [class*='column'] {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0;
}

.columns-small-padding > [class*='column']:first-child {
    padding-left: 8px;
    padding-right: 8px;
}

.columns-small-padding > [class*='column']:last-child {
    padding-left: 8px;
    padding-right: 8px;
}

@media(min-width:992px){
    .row-small-padding > [class*='col-'] {
        padding-left: 4px;
        padding-right: 4px;
    }

    .row-small-padding > [class*='col-']:first-child {
        padding-left: 16px;
        padding-right: 16px;
    }

    .row-small-padding > [class*='col-']:last-child {
        padding-left: 4px;
        padding-right: 16px;
    }

    .row-small-padding > [class*='col-']:only-child {
        padding-left: 16px;
        padding-right: 16px;
    }
}

ul.sidebar-menu li a {
    color: #ddd;
}

.versaoProjeto {
    color: #FEFFFF;
    position: fixed;
    z-index: 1;
    top: 95%;
    right: 1.8%;
}

/* bordas */
.default-shadow {
    transition: box-shadow .25s;
    -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

.borda-cinza {
    border: 1px solid #ddd;
}

/** Margin e padding */
.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.no-margin-bottom {
    margin-left: 0 !important;
}

.m-b-4 {
    margin-bottom: 4px !important;
}

.m-b-8 {
    margin-bottom: 8px !important;
}

.m-b-16 {
    margin-bottom: 16px !important;
}

.m-t--4 {
    margin-top: -4px !important;
}

.m-t-8 {
    margin-top: 8px !important;
}

.m-t-16 {
    margin-top: 16px !important;
}

.p-b-16 {
    padding-bottom: 16px !important;
}

.p-t-16 {
    padding-top: 16px !important;
}

.p-2 {
    padding-top: 2px !important;
}

/**
    Componente Hero (antigo breadcrumb)
 */
.container-hero {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
}

.hero {
    padding: 8px 16px;
 /*   display: flex;
    justify-content: space-between;
    align-items: center;*/
}

.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
    margin: 0;
}

.hero .hero-subtitulo {
    margin-bottom: 8px;
}

.hero .hero-link {
    color: #1f90b5;
}

.hero-react {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

.hero-conteudo-direita {
    text-align: right;
}

.hero-conteudo-direita-react {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* caixa-pontilhada */
.caixa-pontilhada {
    border: 1px dashed #ccc;
    margin-bottom: 16px;
    text-align: center;
    padding: 24px 8px;
    color: rgb(53, 105, 141);
    display: flex;
    align-items: center;
    justify-content: center;
}

.caixa-pontilhada-pouco-padding {
    padding: 12px 0;
}

.caixa-pontilhada-no-flex {
    display: block;
}

.caixa-pontilhada-number {
    font-weight: 600;
}

.caixa-pontilhada-title {
    font-size: 1em;
}

.caixa-pontilhada-label-esquerda{
    float: left;
}

.caixa-pontilhada-height-100pc{
    height:100%;
}

.no-danger {
    color: #767676;
}

.right-side-accordion .cinza-bg {
    background: #424249;
    color: #fff;
}

/* buttons */
.btn-cor-primaria {
    background-color: #1f90b5;
    border-color: #1f90b5;
}

.btn-cor-primaria:hover {
    background-color: #21a6ce;
    border-color: #21a6ce;
}

.block-button{
    margin-top: 7px;
    display: inline-block;
}

.m-s{
    margin: 0 15px 0 15px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > li.active > a,
.pagination > li.active > a:hover {
    background-color: #21a6ce;
    border-color: #21a6ce;
    color: #fff;
}


/* Tabela de listagem */
table.tabela-listagem {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.tabela-listagem td a {
    color: #1f90b5 !important;
}

.tabela-listagem td .label {
    padding: 0.2em 0.6em !important;
}

.tabela-listagem thead > tr > th,
.tabela-listagem tbody > tr > td {
    padding: 4px;
}

.tabela-listagem.small-padding thead > tr > th,
.tabela-listagem.small-padding tbody > tr > td {
    padding: 2px;
}

.tabela-listagem.header-center thead > tr > th {
    text-align: center !important;
}

.tabela-listagem > thead > tr > th,
.tabela-listagem > thead > tr > td {
    border-bottom-width: 1px;
}

/* Estilo de tabela em um painel */
.panel-tabela-listagem {
    margin-bottom: 8px;
    border-radius: 0;
}

.panel-tabela-listagem .panel-heading {
    padding: 8px 16px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.panel-tabela-listagem .panel-body {
    padding: 16px 16px;
}

.panel-tabela-listagem .panel-tabela-listagem-titulo {
    font-weight: 600;
}

/* estilo do breadcrumb */
.breadcrumb-layout {
    margin: 0 -10px;
}

.breadcrumb h1 {
    font-size: 28px;
}

.nav-header {
    padding: 33px 5px !important;
}

.label-linkDropdown {
    display: initial;
    margin-bottom: 0;
    font-weight: 400;
}

.nav-header img {
    width: 190px;
    margin-left: 5px;
}

/* Formulários */

.label-primary {
    background-color: #21a6ce;
}

.label-primary a {
    color: white;
}

.tools a {
    font-size: 10px;
}

.tools.label-primary {
    background-color: #21a6ce;
}

.form-horizontal .ibox-heading {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 20px;
}

.form-horizontal .ibox-heading h3 {
    margin-bottom: 5px;
}

.invisivel {
    display: none;
    min-height: 0 !important;
    min-width: 0 !important;
}

.invisivel div[name="notificacoes"] {
    margin: 0;
}

.clicavel {
    cursor: pointer;
}

.form-padding-top {
    padding-top: 7px;
}

th.colunaAcoes {
    min-width: 82px !important;
    width: 93px !important;
}

p.detalhes {
    background-color: #FFFFFF;
    color: inherit;
    display: block;
    padding: 6px 12px;
    width: 100%;
    font-size: 14px;
}

span.acoes a {
    text-decoration: none !important;
    outline: none !important;
    color: #32323A !important;
    margin-right: 10px;
    font-size: 14px;
}

span.acoes a:hover {
    color: #1AB394 !important;
}

.meio-comprimento {
    width: 50%;
}

/**
  Atributos que estavam adicionados como style no template
**/
.navbar {
    margin-bottom: 0;
}

/**
  Sobrescreve margin-bottom do botão de navegação no topo da página
**/

.navbar-header {
    margin-bottom: 10px !important;
}

.datetimepicker-top {
    margin: 14px 10px 0 0;
    font-size: 14px;
}

.datetimepicker-top .fa {
    margin-right: 5px;
}

.datetimepicker-top .caret {
    margin-left: 5px;
}

/**
    Escurece background do template
**/
.gray-bg {
    background: #ebebed !important;
}

@media screen and (min-width: 769px), print {
    .cadastro-rapido-button {
        margin-top: 24px;
    }
}

@media (max-width: 783px) {
    .navbar-right li {
        margin-right: 40px !important;
    }
}

@media (max-width: 768px) {
    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }

    .datetimepicker-top {
        padding: 4px 12px 4px 12px;
        margin-left: 10px;
    }

    .datetimepicker-top .fa {
        margin-right: 0;
    }

    .datetimepicker-top .caret {
        display: none;
    }

    .navbar-right span {
        display: none;
    }
}

.ibox-title {
    border-color: #d8d8dc !important;
}

.overflow-overlay {
    overflow: auto;
}

.groupbutton-separator {
    padding-bottom: 15px;
}

.dataTables_empty {
    text-align: center;
}

/*
.pagination > li.active > a,
.pagination > li.active > a:hover {
    background-color: #1f90b5;
    border-color: #1f90b5;
    color: #fff;
}
*/

.btn-group {
    margin-bottom: 16px;
}

table {
    font-size: 13px;
}

.btn-subir {
    padding: 6px 12px;
}

.left-bar-separador {

    color: #fff !important;
    display: block !important;
    font-family: 'Open Sans', sans-serif !important;
    padding: 12px 0 12px 25px !important;
    text-transform: uppercase !important;
}

.item-selecionado{
    background:#28282e;
}

.seguranca-processo > .left-bar-separador > a {
    font-size: 11px !important;
    padding: 12px 0 12px 25px !important;
}

.dropdown-left-bar{
    font-size: 12px !important;
    padding: 30px !important;
}

.col-sm-2 {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
}

.col-sm-4-inline {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    width: 33.33333333333333%;
    float: left;
}

.full-width {
    width: 100% !important;
}

/* RegraEventos Cadastro */

div.tagsinput {
    border-color: #e2e2e4 !important;
    border-radius: 4px !important;
    height: 100px !important;
}

div.tagsinput div input {
    width: 125px !important;
}

.comprimentoCompleto {
    width: 100%
}

.titulo_sublinhado {
    color: rgb(118, 118, 118);
    font-size: 20px;
    margin: 20px 15px 10px 15px;
    display: block;

    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    border-bottom: 1px solid rgb(238, 238, 238);
}

.subtitulo-formulario {
    color: #767676;
    font-size: 20px;
    margin: 15px 0px 15px 0px;
    display: block;
    width: 100%;
    border-bottom: 1px solid rgb(238, 238, 238);
}

.tooltiptext-icon {
    z-index: 3;
}

.subtitulo-formulario .tooltip-icon .tooltiptext-icon {
    font-size: 13px;
    width: 150px;
    background-color: black;
    font-weight: normal;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.subtitulo-formulario i {
    margin-top: 9px;
}

.subtitulo-formulario span {
    margin-left: -72px !important;
}

.icone-espacado {
    padding-right: 5px;
}

.icone-m-r {
    margin-right: 5px;
}

.prog-row .icone-right-bar {
    color: #fff;
}

.icone-right-bar {
    font-size: 2em;
}

.icone-header-left-bar {
    margin-left: 0.7em;
    font-size: 16px !important;
}

.header-automacao { font-size: 11px !important;}

/* Right-bar */
.alarmes-sistema-automacao-menu {
    display: none;
    background-color: rgb(60, 60, 68);
}

.alarmes-sistema-automacao-menu a {
    border-bottom: 1px solid rgb(80, 80, 88);
}

/* Tooltips de Ajuda */
.tooltip {
    text-transform: none;
    font-weight: normal !important;
}

label .text-danger {
    margin-bottom: 0;
}

.m-l-xs {
    margin-left: 3px !important;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 15px;
}

.m-r-m {
    margin-right: 20px;
}

.m-l-m {
    margin-left: 17px;
}

.m-t-xs {
    margin-top: 10px;
}

.m-t-m {
    margin-top: 17px;
}

.ajuda {
    vertical-align: top;
    color: #32323A;
    font-size: 13px;
    margin-top: 4px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.ajuda:hover {
    color: #444;
}

.dica {
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.titulo-com-ajuda {
    margin-bottom: 15px;
    border-bottom: #bbbbbb 1px solid;
}

/* Dashboard */
.widget {
    transition: box-shadow .25s;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.user-heading.alt:hover {
    background-color: #1f90b5;
}

.link-right-menu-thin {
    padding: 10px 0 7px 0;
}

.user-thumb-small {
    height: 20px;
    width: 21px;
}

.user-details-small h4 {
    font-size: 12px;
}

.user-details-small p {
    font-size: 7px;
}

.right-site-accordion-small.head {
    padding: 14px;
}

.terques-bg {
    background-color: #1f90b5 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-bold {
    font-weight: 400 !important;
}


/* Ajustes em bibliotecas */

.icheck div {
    float: none;
}

.swal2-modal .swal2-title {
    font-size: 24px !important;
}

.tdcp-red {
    background-color: #ce6060;
    font-weight: bolder;
    color: black;
}

.tdcp-green {
    background-color: #6ebb6e;
    font-weight: bolder;
    color: black;
}

.tdcp-yellow {
    background-color: #f1ee5f;
    font-weight: bolder;
    color: black;
}

.tdcp-number-red h3{
    color: #ce6060;
    font-weight: bolder;
}

.tdcp-number-green h3{
    color: #6ebb6e;
    font-weight: bolder;
}

.tdcp-number-yellow h3{
    color: #f1ee5f;
    font-weight: bolder;
}

.link-painel {
    color: #428bca;
    font-weight: bold;
}

.tag-ativo {
    border:none;
    background: none;
    letter-spacing: 0.5px;
}

.tag-ativo:hover {
    font-weight: bold;
    letter-spacing: 0.3px;
}

.infoModal {
    display: grid;
    grid-template-columns: 50% 50%;
}
.infoGeral{
    padding-left: 20px;
    font-family: 'Open Sans', sans-serif;
    margin: 5px;
}
.infoValue{
    color: grey;
}
#modalCabeca{
    background-color: #00a8c6;
    color: #fff;
}

.label-painel-tabelas{
    margin: -16px -16px 15px -1px;
    padding: 8px 16px;
    color: #31708f;
    background-color: #d9edf7;
    outline-color: #bce8f1;
    border-color: #bce8f1;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.label-tabela-configuracao{
    margin-left: -16px;

}

/*--------------------Início Classes voltadas para o padrão react-table----------------------*/


.rt-th{
    padding: 5px 4px 2px 4px !important;
    outline: none !important;
    overflow: unset !important;
    white-space: pre-line !important;
    word-wrap: break-word;
}
.rt-td{
    border-collapse: collapse;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-right: 1px solid #ddd !important;

}
.rt-tr{
    border-bottom: 1px solid #ddd !important;
}

.ReactTable{
    border-collapse: collapse !important;
}

.ReactTable .rt-thead.-header{
    box-shadow: None !important;
}

.ReactTable .-pagination{
    box-shadow: None !important;
}

/*Classes para que a tabela tenha como símbolo de ordenação o triângulo lateral*/
.arrow-sort .-cursor-pointer {
    background:url("../template/css/data-tables/images/sort_both.png") no-repeat center right ;
}

.arrow-sort .-sort-desc {
    box-shadow: none !important;
    background:url("../template/css/data-tables/images/sort_desc.png") no-repeat center right ;
}


.arrow-sort .-sort-asc {
    box-shadow: none !important;
    background: url("../template/css/data-tables/images/sort_asc.png") no-repeat center right ;
}
/*...Especificamente para MGT, esse ícone fica melhor alinhado ao bottom*/
.arrow-sort-bottom .-cursor-pointer {
    background:url("../template/css/data-tables/images/sort_both.png") no-repeat bottom right ;
}

.arrow-sort-bottom .-sort-desc {
    box-shadow: none !important;
    background:url("../template/css/data-tables/images/sort_desc.png") no-repeat bottom right ;
}


.arrow-sort-bottom .-sort-asc {
    box-shadow: none !important;
    background: url("../template/css/data-tables/images/sort_asc.png") no-repeat bottom right ;
}

/*--------------------Fim Classes voltadas para o padrão react-table----------------------*/
.Select-value-label {
    white-space: pre-wrap;
}

.Select-option {
    white-space: pre-line;
}
.has-error .select__control {
    border-color: #a94442 !important;
}

.input-has-erro {
    border-color: #a94442 !important;
}

.actions-link{
    letter-spacing: 15px;
}

.loader-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.loader-brplantexpert {
    display: inline-block !important;
    background: url("./../imagens/logo-brplantexpert.svg") 50% 50% no-repeat !important;
    background-size: 70px 70px !important;
    height: 100px !important;
    width: 100px !important;
    margin: 0px auto !important;
}
.loader-brplantexpert-mini {
    display: inline-block !important;
    background: url("./../imagens/logo-brplantexpert.svg") 50% 50% no-repeat !important;
    background-size: 18px 18px !important;
    height: 18px !important;
    width: 18px !important;
    margin: 0px auto !important;
}

.loader-brplantexpert-medium {
    display: inline-block !important;
    background: url("./../imagens/logo-brplantexpert.svg") 50% 50% no-repeat !important;
    background-size: 3em 3em !important;
    height: 3em !important;
    width: 3em !important;
    margin-top: -5px !important;
    margin-right: -5px !important;
}

.loader-text {
    margin-top: 8px;
    font-size: 18px;
    color:rgb(53, 105, 141);
}

.quebra-palavra {
    word-break: break-all;
}

.sub-menu-header {
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 5px;
    background-color: rgb(53, 105, 141);
}

.sub-menu-seguranca-processo {
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 17px;
}

.dif{
    margin-top: 5px;
}
@media (min-width: 1200px){
    .col-mgt {
        width: 70%;
    }
}
@media (min-width: 1200px) and (max-width: 1750px) {
    .col-mgt {
        width: 108%;
    }
}
@media (min-width: 992px) and (max-width: 1200px){
    .col-mgt {
        width: 107%;
    }
}

.controles-tabela-eventos {
    display: grid;
    grid-template-columns: auto fit-content(100%);
}

.react-filter-box {
    height: 35px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.color-label {
    border-radius: 4px;
    padding-top: 4px !important;
}

.input-decimal-unidade input{
    border-radius: 4px 0 !important;
}

.form-grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

@media (max-width: 768px)
{
    .form-grid-2-cols
  {
      grid-template-columns: none;
      grid-column-gap: 0;
  }
}

.valor-direita-painel-tier-tres > h4 {
    font-size: 15px;
    margin-top: 10px;
}

.center-fields-form {
    display: grid;
    grid-template-columns: 75%;
    justify-content: center;
}

@media (max-width: 768px)
{
    .center-fields-form
    {
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
    }
}

.widget-collapsible {
    margin-left: 5px;
    margin-top: 0;
}

/*start scrollbar style*/
/* width */
::-webkit-scrollbar {
    width: 6px;
    padding: 0px 2px 0px 2px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff00;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 58, 0.65);
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #00a8c6;
}
/*end scrollbar style*/

.indeterminate input[type=checkbox] {
    -webkit-appearance: button !important;
    -moz-appearance: button !important;
    appearance: auto !important;
    border-color: #CCCCCC;
}

.checkbox-three-states input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    border-color: #d9d9d9;
    background-color: #ffffff;
    transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkbox-three-states input[type=checkbox]:checked {
    border-color: #3dbcf6;
    background-color: #3dbcf6;
}
.checkbox-three-states input[type=checkbox]:checked:after {
    content: ' ';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 4px;
    top: 1px;
    display: table;
    width: 5px;
    height: 8px;
    border: 2px solid #ffffff;
    border-top: 0;
    border-left: 0;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-duration: 0.3s;
    animation-name: amCheckboxOut;
}