window,
html,
body {
  font-family: sans-serif;
  font-size: 10pt;
  margin: 0;
  padding: 0;
  background-color: var(--background);
  height: 100%;
}

/* LOGIN */
div#login {
  padding: 17px;
  border: 1px solid;
  margin: 5px;
  border-radius: 20px;
}

#div_usuario,
#div_senha {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.inputlogin {
  flex: 1;
}

#div_entrar {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%
  }
}

#sistema {
  border: var(--border) solid brown;
  display: flex;
  flex-direction: row;
  height: 100%;
}

.side_menu {
  border: var(--border) solid red;
  background-color: var(--background_menu);
  color: #fff;
  position: fixed;
  left: 0;
  width: var(--largura_menu) !important;
  height: 100%;
}

#menu {
  padding: var(--padding_padrao);
  padding-top: calc(35px + var(--padding_top) * 2);
  overflow: auto;
  /* height: calc(100% - 50px); */
  height: calc(100% - (35px + var(--padding_top) * 2));
}

.main {
  border: var(--border) solid green;
  flex: 1;
  margin-left: var(--largura_menu) !important;
  /* padding: var(--padding_padrao); */
}

#head {
  border: var(--border) solid blue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  position: fixed;
  top: 0;
  left: 0;
  padding: var(--padding_top);
  background-color: #fff;
  width: calc(100% - var(--padding_top)*2);
}

.head_direito {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.body {
  border: var(--border) solid yellow;
  display: flex;
  flex-direction: column;

  padding: var(--padding_padrao);
  padding-top: calc(35px + var(--padding_top) * 2);
}

.logo {
  height: 25px;
  padding: 2px 0 2px 0;
}

.bt {
  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
}

.btPrincipal {
  background-color: var(--background_bt1);
}

.btDespesa {
  background-color: var(--cor_despesa);
}

.btReceita {
  background-color: var(--cor_receita);
}

.btmenu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07); */
  /* box-shadow: 0 4px 7px -1px rgba(255, 255, 255, .5), 0 2px 4px -1px rgba(255, 255, 255, .7); */
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-bottom: 5px;
}

.btmenu.active {
  background: var(--background_btmenu);
  color: #000;
  box-shadow: 2px 2px 7px -1px rgba(255, 255, 255, .5), 4px 3px 2px -1px rgba(255, 255, 255, .7);
}

.icone {
  display: flex;
  align-items: center;
}

.btmenu.active>.icone {
  background: var(--background_menu);
  color: #fff;
}

.btmenu>.icone {
  background: var(--background_btmenu);
  color: #000;
  padding: 5px;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

._row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.column,
.col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.gap-10 {
  gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;
  background: #ddd;
  /* padding: 1em; */
  border-radius: 1em;
  flex: 1;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  background-color: #fff;
}

.card_head {
  font-weight: 600;
  color: #27272a;
}

.card_pad {
  padding: 1em;
  margin: 0.3em;
}

.card_pad_v {
  padding: 1em 0 1em 0;
}

.card_pad_h {
  padding: 0 1em 0 1em;
}

.card.despesa {
  background: var(--cor_despesa);
}

.card.receita {
  background: var(--cor_receita);
}

.card_left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.card_icone {
  background: #fff;
  padding: 12px;
  border-radius: 15px;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
}

.card_valor {
  font-size: 150%;
  font-family: monospace;
}

.card_valor2 {
  font-size: 90%;
  font-family: monospace;
}

.invisivel {
  display: none !important;
}

.ck {
  cursor: pointer;
}

.campo[disabled="disabled"] {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0;
}

/* .table th, .table td {
  padding: .25rem 1em .25rem 1em;
} */
/* .tb{
  border-collapse: collapse;
}
.tb th {
  padding: 0.5rem 1em 0.5rem 1em;
  border-bottom: 1px solid #e3e3e7;
  font-weight: 700;
  color: #71717a;
  text-align: left;
}
.tb td {
  padding: 0.5rem 1em 0.5rem 1em;
  border-bottom: 1px solid #e3e3e7;
}
.trtotal td {
  border-top: 2px solid #000;
  font-weight: bold;
} */
.t3 {
  font-size: .75rem;
  color: #71717a;
}

.white {
  color: #fff;
}

#ic_banco,
.ic_banco {
  width: 25px;
  border-radius: 5px;
}

.ic {
  font-size: 10pt;
}

.lock {
  opacity: 0.5;
}

.text-success {
  color: #16a34a;
}

.text-danger {
  color: #dc2626;
}

.text-dark {
  color: #000;
}

.btn-link {
  text-decoration: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.receita {
  color: #007c00 !important;
  font-weight: bold;
}

.despesa {
  color: #f00 !important;
  font-weight: bold;
}

.div_bt_ofx {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bt_ofx {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.b {
  font-weight: bold;
}

#btMenuHead {
  font-size: 1.1em;
  padding: 0em 0.5em;
  cursor: pointer;
}

.red {
  color: red;
}

.green {
  color: green;
}

.planoConta {
  font-size: 80%;
  font-style: italic;
}

.centroCusto {
  font-size: 90%;
}

.banco {
  font-size: 90%;
  color: #8e7900;
}

.pagamento {
  font-size: 90%;
  color: #00750c;
}

input[type="checkbox"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

.div_icon_pesquisar {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.nao_selecionar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 576px) {
  #btMenuHead {
    display: none;
  }
}

@media (max-width: 576px) {
  .body {
    /* border: var(--border) solid yellow;
    display: flex;
    flex-direction: column; */
    padding: var(--padding_padrao_menor);
    /* padding-top: calc(35px + var(--padding_top) * 2); */
  }

  .side_menu {
    display: none;
  }

  .main {
    margin-left: 0px !important;
  }

  .side_menu.exibir {
    display: flex;
    z-index: 100;
  }

  #painel,
  #ofx,
  #config,
  #config_banco {
    padding-top: 70px;
  }
}

tr.selecionado {
  background-color: rgb(255 237 0 / 37%);
}

.table>:not(caption)>*>* {
  background-color: transparent;
}

/* menu suspenso */
.m_suspenso {
  z-index: 10000;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid rgb(190 193 195);
  border-radius: 5px;
  min-width: 202px;
  padding: 5px;
  font-size: 14px;
  background-color: rgb(233 228 231);
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
  display: flex;
  flex-direction: column;
}

.m_linha {
  display: flex;
  flex-direction: row;
  padding: 3px;
  border-radius: 5px;
  cursor: pointer;
}

.m_linha>hr {
  width: 100%;
  padding: 0px;
  margin: 4px;
}

.m_ic {
  padding: 3px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  float: left;
  margin-right: 5px;
}

.m_text {
  display: flex;
  align-items: center;
}

.m_linha:hover:not(.m_disabled) {
  background-color: rgb(96 167 255);
  color: #fff;
}

.m_linha.m_disabled>.m_text {
  color: rgb(132 132 132);
}

/* OFX  */
.legenda_ofx {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin: 0 10px;
}

.legenda_ofx>div {
  padding: 5px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.conciliado {
  background-color: #aeffcc !important;
}

.soOFX {
  background-color: #ffdfae !important;
}

.soSISTEMA {
  background-color: rgb(255, 115, 115);
}

/* mensagem  */
#msg {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10000;
}

.msg {
  padding: 15px;
  border-radius: 10px;
}

.cor_msg_0 {
  background-color: #dc2626;
  color: #fff;
}

.cor_msg_1 {
  background-color: #16a34a;
  color: #fff;
}

/* .select2-container {
    z-index: 10000;
} */
.statusSync {
  background: #00f;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 5px;
}