/* Sumário de blocos de alterações do CSS
*
*  1.   Importa arquivos CSS externos
*  2.   Importa fonts do Google
*  3.   Cores
*  4.   Global settings
*  5.   Spinner com a logo da Focus
*  6.   Estilo do Scroll
*  7.   Botões
*  8.   Inputs
*  9.   Tables
*  10.  Animação do border-bottom hover
*  11.  Título padrão
*  12.  Tabela com resultados de busca
*  13.  Campo de pesquisa - geral
*  14.  Novos cadastros
*  15.  Cards de informações
*  16.  Caixa que sobrepões outras informações quando o toggle está ativo
*  17.  Pages
*     17.1    Pages - Dashboard index
*     17.2.   Pages - Busca Referência
*     17.3.   Pages - Empresas - New
*     17.4.   Page - Configs - Index
*     17.5.   Page - Pós-reports
*     17.6.   Page - Reports
*          17.6.1.   Page - Reports - Index
*          17.6.2.   Page - Reports - DRE
*     17.7.   Page - Card-company-configs - new/edit
*     17.8.   Page - Sales - New/edit
*  18.   Toast Alert - Mensagens de aviso
*  19.   Manual Entr
*  20.   Financeiro Self Service
*  21.   Back to top
*  100.  Media Print modal with table
----------------------------- */


/* 1.   Importa arquivos CSS externos
   ----------------------------- */
@import url("components/input-autocomplete.css");
@import url("menu-principal.css");
@import url("entrar-domains.css");
@import url("components/emissao-nfe.css");
@import url("components/stores-dashboard.css");
@import url("components/waybill.css");
@import url("grid.css");


/* 2.   Importa fonts do Google
   ----------------------------- */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');


/* 3.   Cores
   ----------------------------- */
:root{
  --black: #333;
  --white: #ffffff;
  --success: #25c16f;
  --danger: #ed5550;
  --warning: #e8900f;
  --primary: #4398d0;
  --secondary: #f1f1f1;
  --info: #5acceb;
}

/* Cor padrão para textos */
.text-danger{
  color: var(--danger) !important;
}
.text-info{
  color: var(--info) !important;
}
.text-primary{
  color: var(--primary) !important;
}

.text-danger.bordered.button--configs:hover{
  background-color: #bf0000;
  color: #fff;
  border-color: #bf0000;
}


/* 4.   Global settings
   ----------------------------- */
html, body{
  overflow: hidden;
  font-family: 'lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body{
  background-color: var(--white);
  color: #555;
}
.modal{
  z-index: 1041;
}
.alert{
  margin-top: 15px;
  white-space: normal;
}
.table>tbody>tr>td{
  vertical-align: middle;
}
.w--100{
  width: 100%;
}
.d-block{
  display: block;
}
.d-inline{
  display: inline-block;
}
.font-weight-bold{
  font-weight: 700;
}
.font-weight-bolder{
  font-weight: 900;
}
.p--0{
  padding: 0;
}
.pointer{
  cursor: pointer;
}
.font--16{
  font-size: 16px;
}
.clear-10{
	margin-bottom: 10px;
}
.clear-15{
  margin-bottom: 15px;
}
.clear-20{
	margin-bottom: 20px;
}
.clear-25{
	margin-bottom: 25px;
}
.clear-35{
	margin-bottom: 35px;
}
.clear-50{
	margin-bottom: 50px;
}
.pt-0, .py-0{
  padding-top: 0rem !important;
}
.pb-0, .py-0{
  padding-bottom: 0rem !important;
}
.pr-0, .px-0{
  padding-right: 0rem !important;
}
.pl-0, .px-0{
  padding-left: 0rem !important;
}
.pt-1, .py-1{
  padding-top: .25rem !important;
}
.pb-1, .py-1{
  padding-bottom: .25rem !important;
}
.pr-1, .px-1{
  padding-right: .25rem !important;
}
.pl-1, .px-1{
  padding-left: .25rem !important;
}
.pt-2, .py-2{
  padding-top: .5rem !important;
}
.pb-2, .py-2{
  padding-bottom: .5rem !important;
}
.pr-2, .px-2{
  padding-right: .5rem !important;
}
.pl-2, .px-2{
  padding-left: .5rem !important;
}
.pt-3, .py-3{
  padding-top: 1rem !important;
}
.pb-3, .py-3{
  padding-bottom: 1rem !important;
}
.pr-3, .px-3{
  padding-right: 1rem !important;
}
.pl-3, .px-3{
  padding-left: 1rem !important;
}
.pt-4, .py-4{
  padding-top: 1.5rem !important;
}
.pb-4, .py-4{
  padding-bottom: 1.5rem !important;
}
.pr-4, .px-4{
  padding-right: 1.5rem !important;
}
.pl-4, .px-4{
  padding-left: 1.5rem !important;
}
.pt-5, .py-5{
  padding-top: 3rem !important;
}
.pb-5, .py-5{
  padding-bottom: 3rem !important;
}
.pr-5, .px-5{
  padding-right: 3rem !important;
}
.pl-5, .px-5{
  padding-left: 3rem !important;
}
.mt-0, .my-0{
  margin-top: 0rem !important;
}
.mb-0, .my-0{
  margin-bottom: 0rem !important;
}
.mr-0, .mx-0{
  margin-right: 0rem !important;
}
.ml-0, .mx-0{
  margin-left: 0rem !important;
}
.mt-1, .my-1{
  margin-top: .25rem !important;
}
.mb-1, .my-1{
  margin-bottom: .25rem !important;
}
.mr-1, .mx-1{
  margin-right: .25rem !important;
}
.ml-1, .mx-1{
  margin-left: .25rem !important;
}
.mt-2, .my-2{
  margin-top: .5rem !important;
}
.mb-2, .my-2{
  margin-bottom: .5rem !important;
}
.mr-2, .mx-2{
  margin-right: .5rem !important;
}
.ml-2, .mx-2{
  margin-left: .5rem !important;
}
.mt-3, .my-3{
  margin-top: 1rem !important;
}
.mb-3, .my-3{
  margin-bottom: 1rem !important;
}
.mr-3, .mx-3{
  margin-right: 1rem !important;
}
.ml-3, .mx-3{
  margin-left: 1rem !important;
}
.mt-4, .my-4{
  margin-top: 1.5rem !important;
}
.mb-4, .my-4{
  margin-bottom: 1.5rem !important;
}
.mr-4, .mx-4{
  margin-right: 1.5rem !important;
}
.ml-4, .mx-4{
  margin-left: 1.5rem !important;
}
.mt-5, .my-5{
  margin-top: 3rem !important;
}
.mb-5, .my-5{
  margin-bottom: 3rem !important;
}
.mr-5, .mx-5{
  margin-right: 3rem !important;
}
.ml-5, .mx-5{
  margin-left: 3rem !important;
}
.cursor-pointer{
  cursor: pointer;
}
#painelFocus{
  position: relative;
  margin-left: 150px;
  background-color: #fafbfc;
  border-top: 1px solid #e7e7e7;
}
.painelFocus__container{
  width: 100%;
  height: calc(100vh - 65px);
}
.painelFocus__content{
  width: 100%;
  height: 100%;
}
.widthTelasGrandes{
  max-width: 1200px;
  margin: 0px auto 0;
}
.box__background__border{
  background: #fff;
  border-radius: 6px;
  padding: 30px 15px 10px;
  border: 1px solid #eee;
  margin-bottom: 15px;
}
.float--left{
  float: left;
}

@media(max-width: 767px){
  #painelFocus{
    width: 100%;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}



/* 5.   Spinner com a logo da Focus
   ----------------------------- */
.ajax-loader {
  -moz-transition: ease-out 750ms;
  -o-transition: ease-out 750ms;
  -webkit-transition: ease-out 750ms;
  transition: ease-out 750ms;
  z-index: 50;
}
.ajax-loader .ajax-loader-logo {
  position: absolute;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}
.ajax-loader .ajax-loader-circle {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-animation: ajaxLoaderSpin 1.4s linear infinite;
  -webkit-animation: ajaxLoaderSpin 1.4s linear infinite;
  animation: ajaxLoaderSpin 1.4s linear infinite;
}
.ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
  -webkit-animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
  animation: ajaxLoaderDashSpin 1.4s ease-in-out infinite;
}
.ajax-loader .ajax-loader-circle circle {
  -moz-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  -webkit-animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  animation: ajaxLoaderColors 5.6s ease-in-out infinite, ajaxLoaderDash 1.4s ease-in-out infinite;
  stroke-dasharray: 1570;
  stroke-dashoffset: 392.5;
  stroke: #FF2918;
  stroke-width: 19;
  fill: none;
}

@-moz-keyframes ajaxLoaderSpin {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-webkit-keyframes ajaxLoaderSpin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes ajaxLoaderSpin {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes ajaxLoaderColors {
  0% {
    stroke: #36b1ca;
  }
  25% {
    stroke: #FF2918;
  }
  50% {
    stroke: #36b1ca;
  }
  75% {
    stroke: #FF2918;
  }
  100% {
    stroke: #36b1ca;
  }
}
@-webkit-keyframes ajaxLoaderColors {
  0% {
    stroke: #36b1ca;
  }
  25% {
    stroke: #FF2918;
  }
  50% {
    stroke: #36b1ca;
  }
  75% {
    stroke: #FF2918;
  }
  100% {
    stroke: #36b1ca;
  }
}
@keyframes ajaxLoaderColors {
  0% {
    stroke: #36b1ca;
  }
  25% {
    stroke: #FF2918;
  }
  50% {
    stroke: #36b1ca;
  }
  75% {
    stroke: #FF2918;
  }
  100% {
    stroke: #36b1ca;
  }
}
@-moz-keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@-webkit-keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@keyframes ajaxLoaderDash {
  0% {
    stroke-dashoffset: 1413;
  }
  50% {
    stroke-dashoffset: 392.5;
  }
  100% {
    stroke-dashoffset: 1413;
  }
}
@-moz-keyframes ajaxLoaderDashSpin {
  50% {
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -moz-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
@-webkit-keyframes ajaxLoaderDashSpin {
  50% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
@keyframes ajaxLoaderDashSpin {
  50% {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    -moz-transform: rotate(450deg);
    -ms-transform: rotate(450deg);
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}
.ajax-loader,
.ajax-loader .ajax-loader-circle,
.ajax-loader .ajax-loader-circle .ajax-loader-circle-spinner,
.ajax-loader .ajax-loader-circle circle {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}
.ajax-loader {
  display: flex;
  align-items: center;
  position: fixed;
  height: calc(100vh - 65px);
  width: calc(100% - 150px);
  top: 65px;
  left: 150px;
  background: rgba(255, 255, 255, 0.8);
}
.ajax-loader-letters{
  height: 100%;
}
.ajax-loader-letters #Camada_1{
  margin-top: 0;
    width: 110px;
    height: 110%;
    position: relative;
    left: -5px;
    bottom: 5px;
}

@media (max-width: 767px){
  .ajax-loader{
    width: 100%;
    left: 0;
  }
}


/* 6.   Estilo do Scroll
   ----------------------------- */
.scrollStyle{
  overflow-y: auto;
}
.scrollStyle::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.scrollStyle::-webkit-scrollbar-thumb{
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.scrollStyle::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
@media(max-width: 767px){
  .scrollStyle{
    overflow-y: auto;
  }
}


/* 7.   Botões
   ----------------------------- */
.btn--default{
  font-size: 15px;
  padding: 10px 16px;
  line-height: 1;
  font-weight: 500;
  white-space: normal;
  margin-bottom: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
  outline: 0;
  color: var(--white);
  margin-right: 5px;
}
.btn--default:hover,
.btn--default:focus{
  color: var(--white);
  outline: 0;
}
.btn--default:active:focus,
.btn--default:focus{
  outline: none;
  outline-offset: 0;
}
.btn--default[disabled]{
  opacity: .25;
}
.input-group-btn .btn--default{
  white-space: nowrap;
}
.input-group-btn .btn--default{
  font-size: 14px;
  padding: 6px 16px;
  line-height: 1.42857143;
}
.btn--success{
  background: var(--success);
  border-color: var(--success);
}
.btn--success:focus{
  box-shadow: 0 0 0 0.4rem rgba(37,193,111, .5);
}
.btn--danger{
  background: var(--danger);
  border-color: var(--danger);
}
.btn--danger:focus{
  box-shadow: 0 0 0 0.4rem rgba(237, 85, 80, .5);
}
.btn--warning{
  background: var(--warning);
  border-color: var(--warning);
}
.btn--warning:focus{
  box-shadow: 0 0 0 0.4rem rgba(232, 144, 15, .5);
}
.btn--primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn--primary:focus{
  box-shadow: 0 0 0 0.4rem rgba(67, 152, 208, .5);
}
.btn--info{
  background: var(--info);
  border-color: var(--info);
}
.btn--info:focus{
  box-shadow: 0 0 0 0.4rem rgba(90, 204, 235, .5);
}
.btn--secondary{
  background-color: var(--secondary);
  color: #777;
  border-color: var(--secondary);
}
.btn--secondary:focus{
  box-shadow: 0 0 0 0.4rem rgba(108,117,125,.5)
}
.btn--secondary:hover,
.btn--secondary:focus{
  color: #777;
}
.btn--square{
  white-space: normal;
  padding: 10px 7px;
}
.btn--square i{
  width: 100%;
  margin-bottom: 5px;
}
.btn--sm{
  padding: 4px 7px !important;
  font-size: 13px !important;
}
.btn--md{
  padding: 7px 12px !important;
  font-size: 14px !important;
}
.btn--mr{
  margin-right: 5px;
}
.btn--ml{
  margin-left: 5px;
}
.no-link,
.no-link:hover,
.no-link:focus{
  text-decoration: none;
  color: var(--black);
  font-weight: 700;
}
.btn--popover{
  border-radius: 50px;
  padding: 2px 7px;
  margin-left: 3px;
  transition: .1s ease-in;
}
.btn--popover:focus{
  outline: none;
}
.dropdownButton__list .divider:last-child{
  display: none;
}

/* Button Toggle */
.switch {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  /*width: 50%;*/
  margin-bottom: 10px;
  z-index: 5;
  margin-top: 10px;
}
.switch input {
  background: none;
  border: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 50px;
  display: block;
  height: 100%;
  opacity: 0;
  z-index: 1;
  top: 0;
  cursor: pointer;
  margin: 0;
}
.switch input + label {
  border-radius: 50px;
  font-weight: 700;
  height: 30px;
  min-width: 50px;
  outline: none;
  position: relative;
  user-select: none;
  vertical-align: middle;
  margin: 0;
}
.switch > label{
  display: flex;
  align-items: center;
}
.switch label span{
  margin-left: 55px;
  position: relative;
  display: block;
}

.switch input + label::before,
.switch input + label::after {
  bottom: 0;
  display: block;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 50px;
}
.switch input + label::before {
  background-color: #95989A;
  border-radius: 50px;
  right: 0;
  transition: 0.2s all;
}
.switch input + label::after {
  background-color: var(--white);
  border-radius: 50%;
  height: 25px;
  left: 2px;
  top: 2.5px;
  transition: 0.2s all;
  width: 25px;
}
.switch input:checked + label::before {
  background-color: var(--primary);
}
.switch input:checked + label::after {
  margin-left: 20px;
}
.switch input:focus + label::before {
  outline: none;
}
.switch input:disabled + label {
  cursor: not-allowed;
  color: #95989A;
}
.switch input:disabled + label::before {
  background-color: #C5C5C7;
}
.toggle--button:focus-within label span{
  box-shadow: 0 0 0 0.4rem rgba(67, 152, 208, .5);
}

@media(max-width: 767px){
  .btn--default{
    font-size: 14px;
    padding: 7px 10px;
    margin-bottom: 10px;
  }
  .btn--default .fas{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  .input-group-btn .btn--default{
    padding: 6px 8px;
  }
}


/* 8.   Inputs
   ----------------------------- */

/* Input Number - Remove as flechas cima e baixo de dentro do input */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
textarea{
  resize: none;
}
label{
  margin: 10px 0 5px;
  font-weight: 900;
  font-size: 15px;
}

/* Input autocomplete */
.input-group{
  min-width: 115px;
}
.autocomplete-group{
  max-width: 100%;
}
.input__group-suggest{
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100%;
  width: 100%;
}
.input__group-suggest.input-group{
  grid-template-columns: 1fr 58px;
}
.input-autocomplete .autocomplete-group .autocomplete-button{
  position: absolute;
  width: 100%;
  max-width: 100%;
  margin: 0;
  top: 0;
  padding: 0;
  grid-column: 1/2;
  display: grid;
  grid-template-columns: 1fr 30px;
  height: 100%;
}
.input-autocomplete .autocomplete-group .autocomplete-button:active{
  box-shadow: none;
}
.input-autocomplete .autocomplete-group .autocomplete-button .textless,
.input-autocomplete .autocomplete-group .autocomplete-button i{
  height: 100%;
  background: transparent !important;
  margin: 0 !important;
  border: none;
}
.input__group-suggest .textless span{
  display: none;
}
.input-autocomplete .autocomplete-group .autocomplete-button i{
  background: #eee !important;
  padding: 6px 8px !important;
  font-size: 18px;
}
.input__group-suggest .input-group-btn .btn{
  margin: 0;
  border-radius: 0 3px 3px 0;
}
.dx-texteditor.dx-editor-outlined{
  min-width: 120px;
}

/* Define um width mínimo para os inputs de variações de produtos */
@media (max-width: 991px){
  #productVariantsTable input,
  #productsVariantsType .selectWidth{
    min-width: 100px;
  }
}

/* Input date */
.dx-texteditor-buttons-container{
  right: -2px;
}
.dx-dropdowneditor-button{
  padding: 0;
}
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon{
  background-color: var(--secondary);
}
.dx-datebox-wrapper-calendar .dx-calendar{
  margin: 10px;
}
.dx-button{
  border: none;
}
.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content{
  display: flex;
  align-items: center;
  padding: 0;
  justify-content: center;
  text-transform: none;
  font-size: 15px;
}
.dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content,
.dx-calendar-navigator-next-view.dx-button .dx-icon,
.dx-calendar-navigator-next-month.dx-button .dx-icon,
.dx-calendar-navigator-previous-view.dx-button .dx-icon,
.dx-calendar-navigator-previous-month.dx-button .dx-icon,
.dx-calendar-body thead tr th{
  color: #000;
}
.dx-button-mode-contained.dx-state-hover,
.dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon{
  background-color: var(--secondary)
}
.dx-calendar-body thead tr th{
  box-shadow: none;
  font-size: 12px;
  text-transform: none;
}
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-contoured-date,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today.dx-calendar-contoured-date{
  box-shadow: none;
  background-color: var(--primary);
  font-weight: bolder;
}
.dx-calendar-cell{
  padding: 2px 8px 0;
  font-weight: 400;
  font-size: 13px;
}
.dx-calendar-cell.dx-calendar-today{
  box-shadow: inset 0px 0px 0px 1px var(--primary);
}
.btnGroup__sticky{
  position: -webkit-sticky;
    position: sticky;
  bottom: 0;
  background-color: #fafbfc;
  padding: 10px 0 15px;
  border-top: 1px solid #c3c3c3;
  z-index: 5;
  margin-top: 20px;
}
@media(min-width: 992px){
  .btnGroup__sticky>.row{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
}
@media(max-width: 767px){
  .btnGroup__sticky .btnGroup__sticky--global-buttons{
    text-align: left;
    width: 100%;
    display: inline-block;
  }
}
.btnGroup__sticky .btn--default:last-child{
  margin-right: 0;
}

/* Deixa o input com aparência de desabilitado */
.input--disabled-style input{
  background-color: #eee;
  opacity: 1;
  cursor: not-allowed;
}
.input--disabled-style input:focus{
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Input Focus */
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea.form-control:focus,
.dx-texteditor.dx-editor-outlined:focus-within{
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.dx-texteditor.dx-editor-outlined input:focus{
  border-color: transparent;
  box-shadow: none;
}



/* 9.   Tables
   ----------------------------- */
.table th{
  white-space: nowrap;
}


/* 10.    Animação do border-bottom hover
   ----------------------------- */
.animationLink{
  display: inline-block;
  color: #000;
  text-decoration: none;
}
.animationLink::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #333;
  transition: width .5s;
  -webkit-transition: width .5s;
  -moz-transition: width .5s;
  -ms-transition: width .5s;
  -o-transition: width .5s;
}
.animationLink:hover::after {
  width: 100%;
  transition: width .5s;
  -webkit-transition: width .5s;
  -moz-transition: width .5s;
  -ms-transition: width .5s;
  -o-transition: width .5s;
}


/* 11.    Título padrão
   ----------------------------- */
  .apiPanel__tit{
  margin-bottom: 60px;
}
.apiPanel__tit h1{
  font-weight: 900;
  font-size: 50px;
}
@media(max-width: 767px){
  .apiPanel__tit h1{
    font-size: 36px;
  }
}


/* 12.    Tabela com resultados de busca
    ----------------------------- */
.apiPanel__button--box{
  display: table-cell;
}
.apiPanel__button--box a{
  text-decoration: none;
  color: var(--black);
  box-shadow: none;
}
.apiPanel__button--box .btn--default{
  font-size: 15px;
  padding: 8px 12px;
  margin-bottom: 0;
  color: var(--white);
}
.apiPanel__itensPointer{
  display: block;
  padding: 15px 8px;
  text-decoration: none;
  color: #3c3c3c;
}
.apiPanel__itensPointer:hover{
  text-decoration: none;
  color: #3c3c3c;
}
.apiPanel__itensPointer{
  display: block;
  padding: 15px 8px;
  text-decoration: none;
  color: #3c3c3c;
}
.apiPanel__itensPointer:hover{
  text-decoration: none;
  color: var(--black);
}
.apiPanel__dropdown__button--list li a{
  font-size: 16px;
  padding: 5px 20px;
  color: var(--black);
}
.apiPanel__dropdown__button--list li a i{
  font-size: 16px;
  margin-right: 5px;
}
.apiPanel-table__with-inputs table tr td{
  padding: 7px 5px;
  vertical-align: middle;
}
@media (min-width: 992px){
  .apiPanel__table table tr td{
    padding: 0;
    vertical-align: middle;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .apiPanel__table table tr td{
    white-space: nowrap;
  }
}

/* 13.    Campo de pesquisa - geral
    ----------------------------- */
.titleFormGroup{
  float: none;
  margin: 0 auto;
}
.titleFormGroup .input-group{
  width: 100%
}
.titleFormGroup .form-group{
  min-height: 35px;
  margin-bottom: 0;
}
.titleFormGroup input.titleFormGroup__box{
  padding: 6px 0px;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  position: relative;
  padding: 0;
  width: 99%;
  top: 0;
  min-height: 35px;
  border: none;
  border-bottom: 1px solid #ddd;
  box-shadow: none;
  font-weight: 500;
  transition: .2s ease-in;
}
.titleFormGroup input.titleFormGroup__box:focus{
  border-bottom: 2px solid var(--danger);
}

.titleFormGroup.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.titleFormGroup .input-group-btn .btn{
  border-radius: 4px !important;
}
.search__button .btn--secondary{
  margin-right: 5px;
}
.titleFormGroup .search__button .search__button--refinements{
  left: 10px;
  width: auto;
  padding: 10px 12px;
  color: #fff;
}
.titleFormGroup .search__button .search__button--refinements:hover{
  color: #fff;
}
.titleFormGroup .titleFormGroup__box input:focus{
  z-index: 0;
  outline: none;
  border-bottom: 2px solid #d9534f;
}
.titleFormGroup .titleFormGroup.filter--inLine{
  float: left;
}
.groupButton__cadastro-empresa{
  width: 160px;
}


/* 14.    Novos cadastros
    ----------------------------- */
.menuNavTabs .nav{
  margin-bottom: 20px;
}
.menuNavTabs .nav>li>a{
  padding: 10px 7px;
  font-size: 13px;
}
.borderBottom{
  border-bottom: 1px solid #ddd;
  margin: 15px 0;
}
.form__container label, .titleFormGroup label{
  font-size: 15px;
  margin-right: 20px;
}
.form__container .form__box .dx-texteditor-container input,
.form__container .form__box .input-autocomplete input,
.form__container .form__box .input-group input{
  margin-bottom: 0px;
  border-radius: 4px 0 0 4px;
}
.form__container .form__box .input-group button{
  border-radius: 0 4px 4px 0 !important;
  position: relative;
  bottom: .8px;
}
.form__container .form__box .dx-selectbox,
.form__container .form__box .input-group{
  margin-bottom: 10px;
}
.form__container .form__box .dx-selectbox,
.form__container .form__box .input-autocomplete input{
  border: 1px solid #ccc;
}
.form__container .btn{
  margin-bottom: 10px !important;
}
.autocomplete-group .dropdown-menu{
  left: auto;
  right: 0;
}
#a_invoice_tab .switch{
  margin-top: 0;
}


/* 15.    Cards de informações
    ----------------------------- */
.dashboard__card, .dashboard__card--collapsed{
  background-color: #fff;
  border: 1px solid #ddd;
  transition: all .6s cubic-bezier(.25,.8,.25,1);
  min-height: 280px;
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 3px;
}
.dashboard__card:hover{
  -webkit-transition: all .6s cubic-bezier(.25,.8,.25,1);
    -o-transition: all .6s cubic-bezier(.25,.8,.25,1);
    transition: all .6s cubic-bezier(.25,.8,.25,1);
  -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,.07), 0 4px 10px rgba(0,0,0,.05);
    box-shadow: 0 1px 7px 0 rgba(0,0,0,.07), 0 4px 10px rgba(0,0,0,.05);
  transform: translateY(-5px);
}
.dashboard__card:hover .dashboard__card--actions{
  display: block;
}
.dashboard__card--header{
  margin: 15px 0 25px;
}
.dashboard__card--header h4{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.dashboard__card--actions{
  position: absolute;
  top: 12px;
  right: 10px;
  background-color: #fcfcfc;
  border-radius: 50px 0 0 50px;
  text-align: right;
  display: none;
}
.dashboard__card--actions a{
  font-size: 16px;
  margin-left: 12px;
  color: #777;
}
.dashboard__card--content{
  position: relative;
  display: block;
  height: 180px;
}
.dashboard__card--content span,
.dashboard__card--content .dashboard__card--info{
  margin: 10px 15px 5px;
}
.dashboard__card--graphic{
  height: 95%;
}
.dashboard__card .dashboard__card--info{
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
  height: 180px;
}
.dashboard__card .dashboard__card--info span{
  font-size: 60px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  margin: 0;
}

.dashboard__card .dashboard__card--footer{
  padding: 5px 0;
  border-top: 1px solid #ddd;
}
.dashboard__card .dashboard__card--footer .footer--info{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
}
.dashboard__card .dashboard__card--footer .footer--info span{
  font-weight: 700;
}
.dashboard__card .dashboard__card--footer .footer--info span:last-child{
  font-size: 20px;
  margin-left: 2px;
}
.dashboard__card--collapsed{
  min-height: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard__card--collapsed .dashboard__card--header {
  margin: 0;
}


/* 16.    Caixa que sobrepões outras informações quando o toggle está ativo
*  Condições comerciais
    ----------------------------- */
.toggleInputs__box{
  position: absolute;
  background-color: var(--white);
  padding: 10px;
  top: -10px;
  right: 13px;
  max-width: 97%;
  z-index: 1;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, .15);
}
@media (max-width: 767px){
  .toggleInputs__box{
    right: 2.5%;
    max-width: 95%;
    top: -9px;
    margin-bottom: 100px;
  }
}


/* 17.    Pages
   ----------------------------- */

/* 17.1.    Pages - Dashboard index
   ----------------------------- */
.box-nfs-emitidas{
  margin-bottom: 3.5em;
}
.box-nfs-emitidas h2{
  font-size: 75px;
}
.box-nfs-emitidas .nfs-emitidas{
  color: #22CC77;
}
.box-nfs-emitidas .nfs-canceladas{
  color: #FF4426;
}
.box-nfs-emitidas .cnpj{
  color: #9322CC;
}
.box-nfs-emitidas p{
  font-size: 25px;
}
.box-ultimas-emissoes table tr td{
  vertical-align: middle;
}
.nf-mensagem{
  font-size: 22px;
  font-weight: bold;
  margin-top: 100px;
}

@media (min-width: 768px) and (max-width: 991px){
  .box-nfs-emitidas h2{
    font-size: 55px;
  }
  .box-nfs-emitidas p{
    font-size: 20px;
  }
}
@media (min-width: 992px){
  .box-nfs-emitidas a{
    font-size: 22px;
    margin-top: 20px;
  }
}

/* 17.2.   Pages - Busca Referência
   ----------------------------- */
.box-busca-nf{
  width: 100%;
}
.box-busca-nf .busca-tit{
  font-size: 18px;
  vertical-align: text-top;
}
.detalhes-accordion{
  padding: 1em 1em 0;
}
.button-carregar-mais{
  margin-bottom: 2em;
}
#grid-busca-referencias-tabela .index-filtros a:hover{
  text-decoration: none;
}
#cmb-regime-tributario .dropdown-menu>li>a{
  white-space: normal;
}


/* 17.3.   Pages - Empresas - New
   ----------------------------- */
#img-logo-upload{
  cursor: pointer;
  width: 90px;
}
.button-upload-logo{
  vertical-align: bottom;
  font-weight: 600;
}


/* 17.4.   Page - Configs - Index
   ----------------------------- */
#breadcrumbs{
  padding: 10px 0 0;
}
#treeview-nodes .tree-node-principal:nth-child(even){
  background-color: rgba(245, 245, 245, 1);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.tree-node-principal{
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0;
  margin-top: 5px;
  cursor: pointer;
}
.tree-node-principal > span{
  padding: 10px 15px;
  font-size: 16px;
  display: block;
  font-weight: 500;
}
.tree-node-child{
  padding: 10px 0 10px 15px;
  font-weight: 300;
}
.tree-node-principal .tree-node-child:last-child{
  padding-bottom: 20px;
}
.tree-node-child span{
  display: block;
  margin-left: 15px;
  cursor: pointer;
}
.tree-edit-elements-child h3{
  font-weight: 900;
  text-transform: uppercase;
  margin: 15px 0 0px;
  line-height: 1.6;
}
.tree-edit-elements-child h3:before{
  font-size: 18px;
}
.tree-edit-elements-child .row > .col-sm-6:nth-child(2n+2){
  clear: left;
}
.tree-edit-elements-child .elements-child-box{
  margin: 10px 0;
}
.tree-edit-elements-child .btnGroup__sticky{
  margin-top: 50px;
}
.tree-node-principal.treenode-selected{
  background-color: rgba(127, 126, 126, .8) !important;
  border-radius: 3px;
  color: var(--white);
}
.tree-node-principal.treenode-selected > span{
  font-weight: 500;
}
.tree-node-principal.treenode-selected.tree-node-plus > span{
  border-bottom: 1px solid;
}
.tree-node-child.treenode-selected > span{
  font-weight: 700;
  letter-spacing: 1px;
}
.tree-node-principal.tree-node-plus > span:after{
  float: right;
  margin-right: 0 !important;
}
@media (min-width: 992px){
  .treeView--scroll, .tree-edit-elements{
    max-height: calc(100vh - 310px);
    overflow-x: hidden;
    padding-bottom: 20px;
  }
  .tree__box{
    max-width: 100%;
    margin: 0 auto;
  }
  .treeView--scroll{
    padding-left: 0;
  }
}


/* 17.5.   Page - Pós-reports
   ----------------------------- */
.panel-heading .panel-title a{
  display: block;
  width: 100%;
  text-decoration: none;
}
.panel-heading .panel-title a .fa{
  float: right;
}
.posReport__panel > .panel:nth-child(even) {
  background: rgba(245, 245, 245, 1);
}
.posReport__panel > .panel:nth-child(even) .panel-collapse.in,
.posReport__panel > .panel:nth-child(even) .panel-collapse.in .panel-body{
  border-top: 1px solid #fff;
}
.posReport__panel .panel-heading{
  padding: 0;
}
.posReport__panel .panel-heading .panel-title a{
  padding: 10px 15px;
}
.posReport__panel .panel-heading .panel-title a .posReport__panel__list--icon{
  margin-left: 5px;
}
.posReport__card{
  background-color: #FCFCFC;
  border: 1px solid #ddd;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 3px;
  padding: 10px;
}
.posReport__card .posReport__title, .posReport__card .posReport__check{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 71px;
}
.posReport__card .posReport__title h4{
  font-weight: bold;
  margin: 0;
}
.tree-edit-elements-child small{
  display: inline-block;
  margin-top: 5px;
}
.tree-edit-elements-child .elements-child-title small{
  font-size: 14px;
  margin-bottom: 20px;
}
.data-suggest{
  margin-top: -37px;
}
.table-selected-products{
  margin-bottom: 0;
}
.table-selected-products th{
  min-width: 77px;
}
@media(min-width: 768px){
  .reportDre__content .dx-treelist-container{
    max-height: 600px;
  }
  .reportDre__content .dx-treelist-container tr td:first-child{
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  .reportDre__content .dx-treelist-headers tr:nth-child(2) td{
    position: relative;
    z-index: 0;
  }
}


/* 17.6.   Page - Reports
   ----------------------------- */

/* 17.6.1   Page - Reports - Index
   ----------------------------- */
.posReport__panel .posReport__links{
  padding-left: 0;
}
.posReport__panel .posReport__links li{
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: 10px;
}

.form__box .button-upload-logo{
  margin-bottom: 0 !important;
}
@media(max-width: 361px){
  .form__box .button-upload-logo{
    margin-top: 10px;
  }
}


/* 17.6.2   Page - Reports - DRE
   ----------------------------- */
.reportDre__content .dx-treelist-borders > .dx-treelist-headers{
  border-radius: 6px 6px 0 0;
}
.reportDre__content .dx-header-row > td{
  padding: 7px !important;
}
.reportDre__content .dx-treelist-table .dx-header-row:first-child td{
  text-align: center !important;
  vertical-align: middle;
}
.reportDre__content .dx-treelist-table .dx-header-row .dx-treelist-text-content{
  font-weight: 700;
  color: var(--black);
}
.reportDre__content .dx-treelist-table .dx-header-row .dx-treelist-text-content i{
  cursor: pointer;
}
.reportDre__content .dx-treelist-table .dx-header-row > td{
  text-align: center !important;
}
.reportDre__content .dx-treelist-rowsview .dx-row:hover{
  background-color: rgba(127, 206, 255, .4);
  -webkit-transition: 0.1s ease-in;
  -moz-transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  -ms-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
}
.reportDre__content .dx-treelist-rowsview .dx-row:focus-within{
  background-color: rgba(127, 206, 255, 1);
  color: #fff;
}
.reportDre__content .dx-scrollable-wrapper .dx-treelist-content .dx-treelist-table .dx-row > td{
  text-align: right !important;
}
.reportDre__content .dx-scrollable-wrapper .dx-treelist-content .dx-treelist-table .dx-row > td:first-child{
  text-align: left !important;
}
.reportDre__content .dx-treelist .dx-row > td{
  padding: 0;
}
.reportDre__content .dx-treelist-rowsview .dx-treelist-table-fixed .dx-treelist-icon-container{
  padding: 7px 0 7px 7px;
}
.reportDre__content .reportDre__content--cell{
  padding: 7px;
}
.reportDre__content--results{
  font-weight: 700;
}
.reportDre__content .dx-treelist-rowsview .dx-row:focus-within:focus-within .reportDre__content--results{
  color: var(--black);
}
.reportDre__spinner{
  font-size: 36px;
  color: var(--primary);
  padding: 30px 10px;
}

/* 17.7.   Page - Card-company-configs - new/edit
   ----------------------------- */
.popover .popover-content{
  padding-bottom: 0;
}
 .popover .popover-content ul{
   padding-left: 15px;
   list-style: circle;
 }
 .popover .popover-content ul li{
   margin-bottom: 5px;
 }
 .cardCompany__bandeiras .cardCompany__bandeiras--titulo{
   font-size: 26px;
   margin: 15px 0 30px;
   font-weight: 900;
 }
.cardCompany__bandeiras .cardCompany__bandeiras--inputGroups{
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.cardCompany__bandeiras--inputGroups .inputGroups--stores{
  padding-left: 15px;
}
.cardCompany__bandeiras--inputsGroups .inputGroups--titulo label span{
  font-size: 18px;
}


/* 17.8.   Page - Sales - New/edit
   ----------------------------- */
.posWeb__products{
  margin: 20px 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding-top: 10px;
}
.posWeb__payment .posWeb__payment__wrapper{
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  padding: 20px 15px 25px;
  border-radius: 8px;
}
.posWeb__columns{
  display: grid;
  grid-gap: 10px;
  align-items: flex-end;
}
.posWeb__columns.posWeb__columns--debito{
  grid-template-columns: 50px 1fr 1fr 1fr;
}
.posWeb__columns .posWeb__columns__wrapper .btn--danger{
  margin: 0;
  padding: 10px;
  font-size: 11px;
  margin-bottom: 1px;
}
.posWeb__columns.posWeb__columns--cartao{
  grid-template-columns: 50px 1fr 1fr 1fr 1fr;
}
.posWeb__columns.posWeb__columns--cartao .posWeb__columns__wrapper:first-child{
  grid-column: 2 / 3;
}
.posWeb__columns.posWeb__columns--cheque{
  grid-template-columns: 50px 1fr 1fr 1fr;
}
.posWeb__columns.posWeb__columns--cheque .posWeb__columns__wrapper:first-child{
  grid-column: 2 / 3;
}
.posWeb__columns.posWeb__columns--cheque--botao .posWeb__columns__wrapper:first-child{
  grid-column: 2 / 4;
}
.posWeb__columns.posWeb__columns--cheque--favorecido{
  grid-template-columns: 50px 1fr;
}
.posWeb__columnn--border{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
  grid-gap: 5px 10px;
}
.posWeb__columnn--border .posWeb__columns__wrapper:nth-child(5){
  grid-column: 2 / 4;
}
.posWeb__columns.posWeb__columns--cheque--favorecido .posWeb__columns__wrapper:last-child{
  padding: 0;
}
.posWeb__columns.posWeb__columns--cheque--botao{
  display: grid;
  grid-template-columns: 50px 150px;
  grid-gap: 10px;
  padding-top: 20px;
}
.posWeb__columns.posWeb__columns--carnet{
  grid-template-columns: 50px 1fr 1fr 1fr;
}
.posWeb__columns.posWeb__columns--carnet .posWeb__columns__wrapper:first-child{
  grid-column: 2 / 3;
}
.posWeb__baseForm{
  width: 60%;
  float: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  min-height: 30px;
  align-items: center;
}
.posWeb__baseForm p{
  font-size: 20px;
  margin: 0;
  font-weight: 300;
}
.posWeb__baseForm p span{
  font-weight: 700;
}

@media (min-width: 768px) and (max-width: 991px){
  .posWeb__columns{
    grid-template-columns: 50px 1fr 1fr !important;
  }
  .posWeb__columns.posWeb__columns--cheque--favorecido{
    grid-template-columns: 50px 1fr !important;
  }
  .posWeb__columnn--border{
    grid-template-columns: 1fr 1fr;
  }
  .posWeb__columns.posWeb__columns--debito .posWeb__columns__wrapper:nth-child(4),
  .posWeb__columns.posWeb__columns--cartao .posWeb__columns__wrapper:nth-child(3){
    grid-column: 2 / 3;
  }
  .posWeb__columnn--border .posWeb__columns__wrapper:nth-child(5){
    grid-column: auto;
  }
}
@media (max-width: 991px){
  .posWeb__baseForm p{
    font-size: 14px;
  }
}
@media (max-width: 767px){
  .posWeb__columns.posWeb__columns--debito{
    grid-template-columns: 50px 1fr;
  }
  .posWeb__columns.posWeb__columns--debito{
    grid-template-columns: 50px 1fr;
  }
  .posWeb__columns.posWeb__columns--debito .posWeb__columns__wrapper:nth-child(3),
  .posWeb__columns.posWeb__columns--debito .posWeb__columns__wrapper:nth-child(4){
    grid-column: 1 / 3;
  }
  .posWeb__columns.posWeb__columns--cartao{
    grid-template-columns: 1fr;
  }
  .posWeb__columns.posWeb__columns--cartao .posWeb__columns__wrapper:first-child{
    grid-column: auto;
  }
  .posWeb__columns.posWeb__columns--cheque{
    grid-template-columns: 1fr;
  }
  .posWeb__columns.posWeb__columns--cheque .posWeb__columns__wrapper{
    grid-column: auto !important;
  }
  .posWeb__columns.posWeb__columns--cheque--favorecido,
  .posWeb__columnn--border{
    grid-template-columns: 1fr;
  }
  .posWeb__columns.posWeb__columns--cheque--favorecido .posWeb__columns__wrapper:nth-child(5){
    grid-column: auto;
  }
  .posWeb__columns.posWeb__columns--cheque--botao{
    grid-template-columns: 1fr;
  }
  .posWeb__columns.posWeb__columns--cheque--botao .posWeb__columns__wrapper:first-child{
    grid-column: auto;
  }
  .posWeb__columns.posWeb__columns--carnet{
    grid-template-columns: 1fr;
  }
  .posWeb__columns.posWeb__columns--carnet .posWeb__columns__wrapper:first-child{
    grid-column: auto;
  }
  .posWeb__baseForm{
    float: none;
    width: 100%;
    grid-gap: 10px;
    text-align: center;
    margin-bottom: 20px;
  }
  .posWeb__baseForm p{
    font-size: 16px;
  }
  .posWeb__baseForm p span{
    display: block;
  }
}


/* 18.    Toast Alert - Mensagens de aviso
   ----------------------------- */
#toast-container{
  bottom: 20px;
  padding: 0 15px;
  min-width: 400px;
  max-width: 400px;
}
#toast-container .toast{
  width: 100% !important;
  opacity: 1;
  -moz-box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  -webkit-box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  max-width: 400px;
  display: flex;
  flex-direction: row;
  background-color: var(--white);
  color: var(--black);
  align-items: center;
}
#toast-container > .toast{
  background-image: none !important;
  padding: 15px 15px 20px 20px;
  border-radius: 6px;
}
#toast-container .toast:before{
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 45px;
  width: 45px;
}
#toast-container .toast-error:before{
  font-weight: 900;
  content: "\f057";
  color: var(--danger);
}
#toast-container .toast-success:before{
  font-weight: 900;
  content: "\f058";
  color: var(--success);
}
#toast-container .toast-warning:before{
  font-weight: 900;
  content: "\f06a";
  color: var(--warning);
}
#toast-container .toast-info:before{
  font-weight: 900;
  content: "\f05a";
  color: var(--info);
}

#toast-container .toast-error .toast-message::before{
  color: var(--danger);
}
#toast-container .toast-success .toast-message::before{
  color: var(--success);
}
#toast-container .toast-warning .toast-message::before{
  color: var(--warning);
}
#toast-container .toast-info .toast-message::before{
  color: var(--info);
}

#toast-container .toast .toast-message{
  display: inline-grid;
  margin-left: 10px;
  order: 2;
  word-break: break-word;
  width: calc(100% - 65px);
}
#toast-container .toast .toast-message::before{
  font-size: 18px;
  font-weight: 900;
}
#toast-container .toast-error .toast-message::before{
  content: "Erro";
}
#toast-container .toast-success .toast-message::before{
  content: "Sucesso";
}
#toast-container .toast-warning .toast-message::before{
  content: "Atenção";
}
#toast-container .toast-info .toast-message::before{
  content: "Informação";
}

#toast-container button.toast-close-button{
  color: var(--black);
  order: 3;
  align-self: start;
  width: 20px;
}
#toast-container > div:hover {
  -moz-box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  -webkit-box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  box-shadow: 0 2px 10px 1px rgba(51,51,51,.25);
  cursor: pointer;
}

@media (max-width: 767px){
  #toast-container{
    min-width: 100%;
    max-width: 100%;
    left: 0;
    bottom: 10px;
  }
}

/* 19.    Manual Entry
   ----------------------------- */
.manual-entry__entrada-saida{
  display: grid;
  grid-template-columns: 75px 175px 20px 175px 50px;
  grid-column-gap: 15px;
}

@media (max-width: 767px){
  .manual-entry__entrada-saida{
    grid-template-columns: 1fr;
  }
}

/* 20.    Financeiro Self Service
   ----------------------------- */
.box__background__border .box__background__border--titulo h2{
  font-size: 20px;
}
.box__background__border .box__background__border--conteudo h3{
  font-size: 30px;
  color: var(--success);
}
.box__background__border .box__background__border--conteudo .fin-self-service__config-data{
  width: 50px;
  height: 30px;
}
.fin-self-service__table-box{
  min-height: 300px;
  max-height: 300px;
  border: none;
}
#detail-invoice-modal-content .modal-body a{
  word-break: break-all;
}

/* 21.    Back to top
   ----------------------------- */
.back-to-top{
  position: fixed;
  right: 30px;
  bottom: 15px;
  background: var(--black);
  border-radius: 100px;
  padding: 11px 15px;
  color: var(--white);
  font-size: 15px;
  display: none;
}
.back-to-top:focus,
.back-to-top:hover{
  color: var(--white);
}

/* 100.    Media Print modal with table
   ----------------------------- */
@media print {
  @page {
    margin: 0.5cm;
  }
  * {
    background:transparent !important;
    color:#000 !important;
    text-shadow:none !important;
    filter:none !important;
    -ms-filter:none !important;
  }    
  body {
    margin:0;
    padding:0;
    line-height: 1.4em;
  }
  .modal-content{
    border: 0;
  }
  .modal-header{
    padding: 0 0 15px 0;
  }
  .modal-header .close{
      display: none;
  }
  .modal-body{
    padding: 0;
    border: 0;
  }
  .table{
    font-size: 10px;
    border: 0;
  }
  .table th,
  .table td{
    padding: 1px !important;
    font-size: 10px;
    word-break: break-all;
    width: 100px !important;
  }
}