/** ********************************************************************************************************************
 * Reset
 */
 :root{
    --preto: #000000;
    --branco: #FFFFFF;
    --borda:#A6A6A6; /* Utilizado para bordas escuras de componentes, pode usar tamb�m: #A0A0A0, #A6A6A6, #C2C2C2  */
    --primaria: #9D1515;
    --cor1 : #E8E8E8; /* Utilizado para cores de fundo e bordas (indicado uma tonalidade levemente escura) */
    --cor2: #F7F7F7; /* Utilizado para cores de fundo e bordas (indicado uma tonalidade clara) */
    --cor3: #D8D8D8;
    --cor4: #606060;
  }

 * {
  box-sizing: border-box;
}

/* Barra de Rolagem on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #e8e8e8 #EFEFEF;
}

/* Barra de Rolagem on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 50px;
}

*::-webkit-scrollbar-track {
  background: #e8e8e8;
}

*::-webkit-scrollbar-thumb {
  background-color: #EFEFEF;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #606060;
}
*::-webkit-scrollbar-thumb:hover {
  border-bottom: 2px solid #9D1515;
}

iframe {border: none !important}

html {
  padding: 0px;
  margin: 0px;
  font-family: Verdana;
  font-size: 20px;
  color: #606060;
  box-sizing: border-box !important;
  background-color: #E8E8E8;

  /* N�o permite selecionar os textos */
  -webkit-touch-callout: none;  /* iPhone OS, Safari */
	-webkit-user-select: none;    /* Chrome, Safari 3  */
	-khtml-user-select: none;     /* Safari 2          */
	-moz-user-select: none;       /* Firefox           */
	-ms-user-select: none;        /* IE10+             */
	user-select: none;
}

body {
  padding: 0px;
  margin: 0px
}

p, h1, h2, h3, h4, h5, h6, ul, li, form {
  margin: 0;
  padding: 0;
  border: 0;
}

ul, li {
  list-style: none;
}
ul.inline li {
  display: inline-block;
  margin-right: 25px
}

hr {
  border-top: 1px solid #c4d0ca;
}

img {
  /* N�o permite arrastar as imagens */
  -webkit-user-drag: none;
  height: auto; 
  width: auto;
}

/** ********************************************************************************************************************
 * Layout
 */

.block {
  display: block !important;
  clear: both;
}

label.block {
  padding-left: 0px;
}

label {
  margin-top: 7px !important;
  /* cursor: pointer; */
}
.component {
  background: #F7F7F7;
  border: 1px solid #C2C2C2;
  width: 1000px;
  height: 700px;
  padding: 0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Media query para monitores widescreen */
@media (min-width: 1200px) {
  .component {
    width: 1200px;
  }
}

.subcomponent {
  background: #F7F7F7;
  border: 1px solid #C2C2C2;
  width: 850px;
  height: 550px;
  padding: 0px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  
  position: fixed;
  left: 50%;
  top: 50%; 
  margin-left: -426px;
  margin-top: -276px;

  z-index: 999;
}

.component.modal {
  margin: 0px !important;
  width: auto !important;
}

.component .head, .component .header, .subcomponent .head , .subcomponent .header {
  background-color: #E8E8E8;
  width: 100%;
  margin: 0px;
  border: 0px;
  -webkit-border-radius: 2px 2px 0px 0px;
  -moz-border-radius: 2px 2px 0px 0px;
  border-radius: 2px 2px 0px 0px;
  overflow: hidden;
  vertical-align: middle;
  line-height: 60px;
}

.component .body, .subcomponent .body {
  margin: 0px;
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
}

.subcomponent .body {
  font-size: 16px;
}

.component .footer, .subcomponent .footer {
  background-color: #E8E8E8;
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
  overflow: hidden;
  height: 60px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0px;
  border: 0px;
  vertical-align: middle;
  padding: 0 5px 0 5px;
}

.row {
  margin-right: -5px;
  margin-left: -5px;
  clear: both;
}

.row-button{
  padding: 10px 5px 10px 5px !important;
  min-height: 38px !important;
}

.mensagem {
  display: none;
}

.border {
  border-radius: 2px;
  border: 1px solid #606060; 
  padding: 0 !important;
}

[class*='col-'] {
  padding: 0 5px 0 5px;
  float: left;
  position: relative;
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.none {
  display: none !important;
}

.hidden {
  visibility: hidden !important
}

.col-1 {
  width: 8.333333% !important;
}
.col-2 {
  width: 16.666667% !important;
}
.col-3 {
  width: 25% !important;
}
.col-4 {
  width: 33.333333% !important;
}
.col-5 {
  width: 41.666667% !important;
}
.col-6 {
  width: 50% !important;
}
.col-7 {
  width: 58.333333% !important;
}
.col-8 {
  width: 66.666667% !important;
}
.col-9 {
  width: 75% !important;
}
.col-10 {
  width: 83.333333% !important;
}
.col-11 {
  width: 91.666667% !important;
}
.col-12 {
  width: 100% !important;
}


.push-1 {
  margin-left: 8.333333%;
}
.push-2 {
  margin-left: 16.666667%;
}
.push-3 {
  margin-left: 25%;
}
.push-4 {
  margin-left: 33.333333%;
}
.push-5 {
  margin-left: 41.666667%;
}
.push-6 {
  margin-left: 50%;
}
.push-7 {
  margin-left: 58.333333%;
}
.push-8 {
  margin-left: 66.666667%;
}
.push-9 {
  margin-left: 75%;
}
.push-10 {
  margin-left: 83.333333%;
}
.push-11 {
  margin-left: 91.666667%;
}

.top-1 {
  margin-top: 8.333333%;
}
.top-2 {
  margin-top: 16.666667%;
}
.top-3 {
  margin-top: 25%;
}
.top-4 {
  margin-top: 33.333333%;
}
.top-5 {
  margin-top: 41.666667%;
}
.top-6 {
  margin-top: 50%;
}
.top-7 {
  margin-top: 58.333333%;
}
.top-8 {
  margin-top: 66.666667%;
}
.top-9 {
  margin-top: 75%;
}
.top-10 {
  margin-top: 83.333333%;
}
.top-11 {
  margin-top: 91.666667%;
}

/** ********************************************************************************************************************
 * Elements
 */

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.text {
  padding: 5px;
  position: relative;
  overflow: auto;
  display: inline-block;
}

.text-center {
  text-align: center !important;
  justify-content: center !important;
}

.text-left {
  text-align: left !important;
  justify-content: left !important;
}

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

.text-right {
  text-align: right !important;
  justify-content: right !important;
}

.bold {
  font-weight: bold;
}

input[type=text].field, input[type=password].field, select.field {
  background-color: #FFFFFF;
  color: #606060;
  border: 1px solid #606060;
  width: 100%;
  height: 50px;
  font-size: 20px;
  margin-bottom: 15px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

input[type=text].field:disabled,
input[type=text].field.disabled,
input[type=text].field.disabled:focus,
input[type=number].field:disabled,
input[type=number].field.disabled,
input[type=number].field.disabled:focus,
input[type=password].field.disabled,
input[type=password].field.disabled:focus,
select.field.disabled,
select.field.disabled:focus {
  background-color: #C2C2C2;
  color: #606060;
  padding: 5px;
  width: 100%;
  margin: 0px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-bottom: 5px;
  cursor: not-allowed !important;
  margin-bottom: 15px;
}

input[type=text].field:hover,
input[type=password].field:hover,
select.field:hover {
  border-bottom: 2px solid #9D1515;
}

input[type=text].field:focus,
input[type=password].field:focus,
select.field:focus {
  background-color: #fffbf5;
  border-bottom: 2px solid #9D1515;
  outline: none;
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
}

input[type=text].field::placeholder, input[type=password].field::placeholder {
  color: #C3C3C3;
}

[id*='dv_pagamento_']>div>input[type=text].required::placeholder, input[type=password].required::placeholder {
  font-size: 17.5px;
}

select {
  text-align: left !important;
}

option {
  font-size: 150%;
}

.icon-left {
  margin: 0 5px 0 0;
}

.icon-right {
  margin: 0 0 0 5px;
}

/* Bot�es */
.btn {
  color: #606060;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #606060;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-top: 5px;
  width: 100%;
  height: 50px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  -webkit-box-shadow: 1px 1px 1px -1px rgba(5,5,5,1);
  -moz-box-shadow: 1px 1px 1px -1px rgba(5,5,5,1);
  box-shadow: 1px 1px 1px -1px rgba(5,5,5,1);
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  background: white;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.btn:hover {
  border-bottom: 3px solid var(--primaria);
  background: white;
  -webkit-box-shadow: 2px 2px 9px 0px rgb(50 50 50 / 25%);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.25);
  box-shadow: 2px 2px 9px 0px rgb(50 50 50 / 25%);
  letter-spacing: 0.1px;
}

.btn:focus {
  background-color: #fffbf5;
  border-bottom: 3px solid var(--primaria);
  outline: none;
  cursor: pointer;
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
}

.btn.warning {
  border: 1px solid #9c8623;
  background-color: #fff74c;
  color: #544c25;
}

.btn.warning:hover {
  border: 1px solid #d4ca00;
  background-color: #fdf322;
}

.btn.warning:active {
  color: #606060;
  background-color: #F3FCCC;
}

.success {
  color: #44AB22;
}

.danger {
  color: #9D1515;
}

/* .btn.danger:hover {
  background-color: #9D1515;
  color: #fff;
} */

/* .btn.danger:focus {
  color: #fff;
  background-color: #F3FCCC;
} */

.btn.success {
  color: #FFF;
  border: 1px solid #009851;
  background-color: #009851;
}

.btn.success:hover {
  border: 1px solid #198653;
  background-color: #198653;
}

.btn.success:active {
  color: #009851;
  background-color: #F3FCCC;
}

.btn.disabled, .btn:disabled {
  color: #C2C2C2 !important;
  border: 1px solid #606060 !important;
  cursor: not-allowed !important;
  /* background-color: #C2C2C2 !important; */
  opacity: 0.5 !important;
  /* background: #C2C2C2 !important; */
}

.disabled img {
  opacity: 0.7;
}

.btn.help {
  width: 39px;
  margin: 0px;
}

.btn.data {
  background: url(../imagens/icone/calendario.svg);
  padding: 0px;
  color: transparent;
  border: none;
  margin: 0px;
  width: 28px !important;
  height: 27px !important;
  background-position: center;
  background-size: cover;
}

.voltar:before {
  content: ' \2770';
}

.btn.pesquisar {
  background: url(../imagens/icone/pesquisar.svg);
  padding: 0px;
  color: transparent;
  border: none;
  margin: 0;
  width: 28px !important;
  height: 27px !important;
  background-position: center;
  background-size: cover;
}

textarea.field {
  background-color: #FFFFFF;
  color: #606060;
  padding: 5px 4px;
  border: 1px solid #606060;
  width: 100%;
  margin: 0px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: Verdana;
  font-size: 20px;
  resize: none;
}

textarea.hover:focus {
  border-bottom: 2px solid #9D1515;
}

textarea.field:focus {
  background-color: #fffbf5;
  border-bottom: 2px solid #9D1515;
  outline: none;
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
}

/*Fields Group*/

.group input.field, .group .btn {
  border-radius: 0px !important;
}

.group > label + input.field, .group > label + .btn {
  border-radius: 2px 0px 0px 2px !important;
}

.group input.field:last-child, .group .btn:last-child {
  border-radius: 0px 2px 2px 0px !important;
}

/** ********************************************************************************************************************
 * List
 */

.list-wrapper {
  height: 577px;
  overflow: auto;
  background: #FFF;
}

.list-wrapper .list {
  background: #FFF;
}

.list-wrapper ul {
  display: table;
  width: 100%;
}

.list-wrapper ul.list-head {
  background: #c7c7c7;
  position: sticky;
  top: 0;
  /* z-index: 1; */
}

.list-wrapper ul.list-head li {
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  margin: 0;
  align-items: center;
  display: flex;
  height: 55px;
}

.list-wrapper ul.list-item li {
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  margin: 0;
  align-items: center;
  display: flex;
  height: 52px;
}

.list-wrapper ul.list-item:nth-child(even) {
  background-color: #E8E8E8;
}

.list-wrapper ul.list-item:nth-child(even):hover {
  background-color: #d8d8d8;
}

.list-wrapper ul.list-item:hover {
  background-color: #d8d8d8;
}

.list-wrapper ul.list-item:focus {
  background-color: blue;
  color: white;
}

.list-head input[type="checkbox"], .list-item input[type="checkbox"]{
  margin: 7px 10px 0 10px;
}

.list-wrapper ul li {
  display: table-cell;
  padding: 5px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}

li .btn {
  height: 42px;
  margin: 0px;
}

/****** Loading *****/
.loader {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.85);
}

.loader>.loader-msg {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 190px;
  display: block;
  top: 37%;
  text-align: center;
}

.loader-msg>img {
  display: block;
  margin: 0 auto;
}

/*********** Checkbox e Radio ***********/

input[type="checkbox"]+label.text {
  padding: 8px 0px 0px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

input[type='checkbox']:after {
  line-height: 1.5em;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  margin-left: -4px;
  background-color: #ffffff;
  border: 1px solid #606060;
}

input[type='checkbox']:checked:after {
  background-color: #EFEFEF;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23606060' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>");
  font-size: 11px;
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/*Radio Button*/

input[type="radio"]+label.text {
  padding: 5px 0px 0px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

input[type='radio']:after {
  line-height: 1.5em;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  margin-left: -4px;
  background-color: #ffffff;
  border: 1px solid #606060;
  border-radius: 20px;
}

input[type='radio']:checked:after {
  background-color: #EFEFEF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='99' width='99' %3E%3Ccircle cx='50' cy='50' r='40' fill='%23606060' /%3E%3C/svg%3E");
  font-size: 11px;
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/*Divider*/

.divider {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
  margin-bottom: 5px;
}

.divider>p {
  position: relative;
  display: inline-block;
}

.divider>p:before, .divider>p:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #606060;
}

.divider>p:before {
  right: 100%;
  margin-right: 15px;
}

.divider>p:after {
  left: 100%;
  margin-left: 15px;
}

/* Divider hr */
.hr {
  display: flex;
  align-items: center;
}
.hr hr {
  flex: 1;
  border-color: #606060;
  margin-left: .5em;
}

@media print{
  #lista-titulo-selecionar{
    height: auto;
  }
  #data-titulo-pesquisar{
    width: 251px !important;
  } 
  #vencimento-titulo-pesquisar{
    width: 251px !important;
  } 
  .btn{
    display: none;
  }
  ul{
    border: 1px solid #000
  }
  .component{
    border: 0px !important;
    background-color: #fff !important;
  }
  .body{
    background-color: #fff !important;
  }
}

/* TECLADO VIRTUAL */
#dv_mover_teclado {
  display: none; 
  position:absolute; 
  /*left: 0px;
  top: 0px;*/
  left: 50%; 
  top: 50%; 
  margin-left:-512px; 
  margin-top:-370px; 
  height:368px; 
  width:1024px;
  border: 1px;
  padding-top: 440px;
  padding-left: 20px;
}

#dv_teclado {
  background-color: #F7F7F7;
  position: relative; 
  display: block; 
  width: 985px; 
  height: auto; 
  margin: 0px; 
  z-index: 2; 
  cursor: move;
}

-webkit-scrollbar {
  width: 50px;
}

.btn_teclado {
  border: 1px solid #ccc; 
  padding: 10px; 
  padding-right: 18px; 
  padding-left: 18px;
  font-weight: bold;
  font-size: 17px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #606060;

  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
}

#teclado fieldset {
  width: 720px; 
  text-align: center; 
  float: left;
}

#teclado {
  /* border: 1px solid #000; */
  padding: 10px 0px 10px 0px;

  -webkit-border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
}

#dv_teclado #numeros {
  float: right; 
  width: 165px; 
  padding: 0px; 
  border: none;
  margin-right: 70px;
}

#teclado .linha_1 {
  text-align: left; 
  float: left; 
  padding: 0px; 
  border: none;
}

#teclado .linha_2 {
  text-align: left; 
  float: left; 
  padding: 5px 0 0 10px; 
  border: none;
}

#teclado .linha_3 {
  text-align: left; 
  float: left; 
  padding: 5px 0 0 20px; 
  border: none;
}

#teclado .linha_4 {
  text-align: center; float: left; 
  padding: 5px 0 0 0; 
  border: none;
}

#teclado .fechar {
  position: absolute; 
  top: 10px;
  left: 930px;
  float: right; 
  width: 5px; 
  padding: 0px; 
  border: none;
}

.btn_teclado:focus {
  cursor: pointer;
  background-color: #353535;
  border: 1px inset #F7F7F7;
  -webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.75);
}

/* TABELA */
.tb-head {
  background-color: #E8E8E8;
  color: #606060;
  text-align: center;
  border: 1px solid #F7F7F7;
  font-size: 18px;
  padding: 0 5px !important;
}

.tb-body-normal {
  background-color: #F7F7F7;
  color: #606060;
  border-bottom: 1px solid #E8E8E8;
  font-size: 18px;
  padding: 0 5px !important;
}

.tb-body-normal:hover {
  background-color: #d8d8d8;
}

.tb-body-foco {
  background-color: #E8E8E8;
}

.tb-body-none {
  /*color: transparent;*/
  background-color: transparent;
  border: 0px none;
}

.input-text{
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
}

.input-hidden {
  color: var(--preto);
  background-color: var(--cor2);
  font-weight: bold;
  font-family: Verdana;
  font-size: 18px;
  height: 30px;
  width: 90px;
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
  border: var(--cor3);
  border-width: 2px;
  border-style: solid;
}

.input-hidden:hover{
  cursor: pointer;
  background: var(--branco);
  border-radius: 5%;
  box-shadow: 4px 5px 5px 3px rgba(0,0,0,0.12);
}

.input-hidden:focus{
  color: var(--branco);
  background: var(--cor4);
  outline: 0;
  box-shadow: 0 0 0 0;
  border-radius: 5%;
}

#lista_opcoes {
  background-color: #F7F7F7;
}

.middle-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: auto;
  background-color:var(--cor2);
  border: 1px solid var(--borda);
  padding:25px;
  z-index: 2;
}

.alert-modal-message {
  font-size: 15px;
  padding: 0px 0 10px 0;
  color: var(--primaria);
  font-weight: bold;
}

#scroll-promissoria {  
  height: 450px;  
  overflow: scroll;  
  border: 1px solid;
}

.pointer:hover{cursor: pointer;}
.pull-1{margin-right: 8.333333% !important;}.pull-2{margin-right: 16.666667% !important;}.pull-3{margin-right: 25% !important;}.pull-4{margin-right: 33.33333%  !important;}
.t-5{top: 5px !important;}
.mr-1p{margin-right:1%}.ml-1p{margin-left:1%}
.mr-5{margin-right:5px;}
.mb-50{margin: 0px 0 50px 0px;}.mb-25{margin: 0px 0 25px 0px;}
.ml-5{margin-left:5px;}
.mv-10{margin-top: 10px !important;margin-bottom: 10px !important;}
.altura-50{height: 50px;}.largura-150{width: 150px;}.largura-500{width: 525px !important;}
.semScroll{overflow-x: hidden !important; overflow-y: hidden !important;}.semScrollH{overflow-x: hidden !important;}
.rotate-90{transform: rotate(90deg)}
.colorMain{color: var(--primaria) !important;}
.fillMain{fill:var(--primaria) !important;}.fillDone{fill:#5d9d1d !important;}
.fs-15{font-size: 15px !important;}.fs-25{font-size: 25px !important;}
.text-end{text-align: end !important;}
.flex-center{display: flex !important;justify-content: center !important;}.flex-between{display:flex;justify-content: space-between;}

.tituloDDO {
  height: 75px;
  background: var(--cor1);
  border: 1px solid var(--cor2);
  padding: 25px;
  /* box-shadow: 1px 1px 5px 0px rgb(50 50 50 / 75%); */
}

.textoTituloDDO{
  font-weight: bold;
  font-size: 25px;
  text-transform: uppercase;
}

.tituloDDO label {
  margin: 0px !important;
}

.corpoDDO {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 600px;
  border: 1px solid var(--borda);
}

.grupoBotoesDDO{
  display:flex;
  justify-content: space-between;
  flex-direction:column;
}

.containerMensagemColunaDDO{
  display: flex;
  flex-direction: column;
  margin-top: 5em;
}

.containerFormColunaDDO{
  display: flex;
  flex-direction: column;
  margin-top: 3em;
  margin-left: 30px;
  margin-right: 30px;
}

.containerInputCentroDDO{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  padding: 0;
  margin: 0;
}

.textoGrandeDestaqueDDO{
  font-size: 70px;
  font-weight: bold;
}

.rodapeDDO{
  display: flex;
  justify-content: space-between;
  left: 0px;
  height: 100px;
  width: 100%;
  border: 1px solid var(--cor2);
  background-color: var(--cor1);
  padding-bottom: 4px;
}

.btnMenuDDO {
  margin-bottom: 19px !important;
  height: 60px;
  justify-content: left !important;
  padding: 0 15px 0 15px;
  /* border: none !important; */
  /* font-size: 20px; */
}

.estrutura_paginas_ocultas{
  display: none;
  font-size: 25px;
  width: 1000px;
  height: 740px;
  background-color: var(--cor2);
  margin-left: auto ;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--borda);
  overflow: auto;
}

.tabelaDDO {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 600px;
  border: 1px solid var(--borda);
}

.btnTabelaDDO{
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  /* height: 30px; */
  height: 40px;
}

/* PAGINA��O */
.itensPaginacao{
  height: 35px;
  width: 30px;
  margin: 8px 4px 0 4px !important;
}
.btnPagina{
  background: var(--branco);
  font-size: 14px;
  display:flex;
  flex-direction:row;
  width: 45px;
  height: 45px;
  margin: 8px 4px 0 4px !important;
}
.btnPaginaAtiva {
  background: var(--primaria);
  color:var(--branco);
  border: none;
}
.btnPaginaAtiva:hover {
  background: var(--primaria);
}
.btnPaginaAtiva:focus {
  color:var(--branco);
}
.btnDirecionais{
  display: flex;
  flex-direction: row;
  background: var(--branco);
}
/* PAGINA��O */

.btnAcaoDDO {
  top: -10px;
  width: 40px;
  height: 50px;
  margin: 0px;
  padding: 0px;
  border: 1px solid var(--borda);
  background: var(--branco);
}

.containerBtnMenuDDO {
  margin: 30px 60px 0px 60px;
}

/* MODAL */
.btnModalAdded{
  display: flex;
  justify-content: left !important;
  margin-bottom: 10px;
  min-height: 60px;
}
.btn_modal_alt{
  background-color: var(--primaria) !important;
  color: var(--branco) !important;
}
.btn_fechar_modalDDO{
  border: none !important;
  box-shadow: none !important;
  background-color: inherit !important;
}
.cabecalhoModal{
  display: flex;
  flex-direction: row-reverse !important;
  right: -15px;
}
.btnCabecalhoModal{
  height:40px;
  z-index:1;
  top: -15px;
}
.fundoModal{
  height: 100%;
  position: absolute;
  background: var(--preto);
  width: 100%;
  z-index: 1;
  opacity: 0.6;
}
/* MODAL */

/* TELA INICIAL */
.iconesMenuDDO{
  height: 65px;
  width: 65px;
}
.btnMenuPrincipalDDO {
  height: 70px;
  justify-content: space-between !important;
  padding: 0 15px 0 15px;
  border: none !important;
  font-size: 20px;
}
.btnMenuPrincipalDDO:hover {
  filter: brightness(1.2);
}
/* #btn_cadastrar_usuario_menu{background: #852d4a;color: var(--branco);}#btn_cadastrar_usuario_menu:focus{background: #852d4a;color: var(--branco);} */
#btn_cadastrar_usuario_menu,#btn_cadastrar_usuario_menu:focus {background:linear-gradient(to right, rgb(133,45,74,0.8), #852d4a 40%);color: var(--branco);}
#btn_configurar_comanda_menu,#btn_configurar_comanda_menu:focus{background: linear-gradient(to right, rgb(75,126,133,0.8),#4b7e85 40%);color: var(--branco);}
#btn_configurar_comanda_menu_auto_atendimento,#btn_configurar_comanda_menu_auto_atendimento:focus{background: linear-gradient(to right, rgb(135,34,34,0.8), #872226 40%);color: var(--branco);}
#btn_gerenciar_caixa,#btn_gerenciar_caixa:focus{background: linear-gradient(to right, rgb(36,60,103,0.8),#203c67 40%);color: var(--branco);}
#btn_abrir_comanda_venda,#btn_abrir_comanda_venda:focus{background: linear-gradient(to right, rgb(90,65,52,0.8),#5a4134 40%);color: var(--branco);}
#btn_mercadorias_menu,#btn_mercadorias_menu:focus{background: linear-gradient(to right, rgb(157,88,24,0.8),#9d5818 40%);color: var(--branco);}
#btn_cfe,#btn_cfe:focus {background: linear-gradient(to right, rgb(98,98,98,0.8), #626262 40%);color: var(--branco);}
#btn_exportar_venda,#btn_exportar_venda:focus {background: linear-gradient(to right, rgb(168,76,142,0.8), #a84c8e 40%);color: var(--branco);}
#btn_vendas_para_entregar,#btn_vendas_para_entregar:focus {background:linear-gradient(to right, rgb(157,64,40,0.8), #9d4028 40%);color: var(--branco);}
#btn_configuracao,#btn_configuracao:focus{background: linear-gradient(to right, rgb(54,54,92,0.8), #36365c 40%);color: var(--branco);}
#btn_perifericos,#btn_perifericos:focus{background: linear-gradient(to right, rgb(45,140,74,0.8),#2d8c4a 40%);color: var(--branco);}
/* TELA INICIAL */

/* GERENCIAR CAIXA */
#btn_abrir_caixa_menu{background:#023e7d;color: var(--branco)}
#btn_fechar_caixa_menu{background:#1a5795;color: var(--branco)}
#btn_adicionar_dinheiro_menu{background:#005425;color: var(--branco)}
#btn_retirar_valor_menu{background:#4f7a2d;color: var(--branco)}
#btn_comanda_venda_menu{background:#7e2743;color: var(--branco)}
#btn_relatorio_caixa_menu{background:#834516;color: var(--branco)}
#btn_imprimir_promissoria_menu{background:#264653;color: var(--branco)}
#btn_imprimir_duplicata_menu{background:#246564;color: var(--branco)}
#btn_imprimir_pedido{background:#027F6A;color: var(--branco)}
#btn_vendas_delivery_menu{background:#540804;color: var(--branco)}
#btn_retirar_cheque_menu{background:#708627;color: var(--branco)}
#btn_cancelar_delivery_menu{background:#872226;color: var(--branco)}
#btn_consultar_destinatario_menu{background:#494771;color: var(--branco)}
#btn_menu_perifericos {background-color: #545454;color: white;border-radius: 15px;}
#btn_menu_perifericos:focus,#btn_menu_perifericos:hover{
  filter: brightness(1.2) !important;
  border: none;
}
/* GERENCIAR CAIXA */

/* CADASTRO MERCADORIA */
.iconesMercadoriaDDO{
  height: 60px;
  width: 60px;
}

.imagemMercadoriaDDO{
  height: 200px;
  width: 200px;
  object-fit: contain;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btnCadastroMercadoriaDDO {
  height: 65px;
  justify-content: space-between !important;
  padding: 0 5px 0 5px;
  border: none !important;
  font-size: 18px;
}
.btnCadastromercadoriaDDO:hover {
  filter: brightness(1.2);
}

#btn_pesquisar_mercadoria_menu{background: #203c67;color: var(--branco);}#btn_pesquisar_mercadoria_menu:focus{background: #203c67;color: var(--branco);}
#btn_cadastro_mercadoria_menu{background: #494771;color: var(--branco);}#btn_cadastro_mercadoria_menu:focus{background: #494771;color: var(--branco);}
#btn_importar_mercadoria_menu{background: #540804;color: var(--branco);}#btn_importar_mercadoria_menu:focus{background: #540804;color: var(--branco);}
#btn_exportar_mercadoria_menu{background: #2d8c4a;color: var(--branco);}#btn_exportar_mercadoria_menu:focus{background: #2d8c4a;color: var(--branco);}

#btn_salvar_mercadoria_menu{background: #203c67;color: var(--branco);}#btn_pesquisar_mercadoria_menu:focus{background: #203c67;color: var(--branco);}
#btn_remover_mercadoria_menu{background: #540804;color: var(--branco);}#btn_importar_mercadoria_menu:focus{background: #540804;color: var(--branco);}

#btn_dados_item{background: #45557c;color: var(--branco);}#btn_dados_item:focus{background: #45557c;color: var(--branco);}
#btn_impostos_item{background: #A6A6A6;color: var(--branco);}#btn_impostos_item:focus{background: #45557c;color: var(--branco);}
#btn_imagens{background: #A6A6A6;color: var(--branco);}#btn_impostos_item:focus{background: #45557c;color: var(--branco);}

/* CADASTRO MERCADORIA */

/* VENDA */
.btnVendaMenu{
  width: 330px !important;
}
/* VENDA */

.tb-middle-cell{
  padding-right: 10px; min-width:100px;
}

.btn-comanda-auto_atendimento{
  cursor: pointer;
  color: var(--branco);
  border: 0px;
  border: 1px solid #A6A6A6;
  width: 50px;
  height: 50px;
  background-color: var(--primaria);
}

.message-centered{
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  width: 100%;
}
.message-content{
  display: flex;
  flex-direction: column;
  top: 80px;
  left: 250px;
  width: 100%;
  border: 1px solid #A6A6A6;
  padding: 50px;
}
.message-btn-area{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* Classes para o Loader no elemento */
.custom-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader-message {
  margin-top: 10px;
  font-size: 14px;
}