/* ---FONTES--- */

@font-face {
  font-family: "black";
  src: url("../fonts/Roboto-Black.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "bold";
  src: url("../fonts/Roboto-Bold.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "medium";
  src: url("../fonts/Roboto-Medium.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "regular";
  src: url("../fonts/Roboto-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

/* ---CLASSES DO GERADOR--- */

:root {
  /* --color-primary: #A1131B;
	--color-primary-rgb: 161,19,27;
	--color-primary-contrast: #ffffff;
	--color-primary-contrast-rgb: 255,255,255;
	--color-primary-shade: #8e1118;
	--color-primary-tint: #aa2b32; */

  /* --color-secondary: #fed530;
	--color-secondary-rgb: 161,19,27;
	--color-secondary-contrast: #ffffff;
	--color-secondary-contrast-rgb: 255,255,255;
	--color-secondary-shade: #8e1118;
	--color-secondary-tint: #aa2b32; */
}

.min-h-100vh {
  min-height: 100vh !important;
}

.invalid-form,
.invalid-image {
  border: 1px solid #ff0000 !important;
}

.bg-filtrando {
  background-color: rgb(191 214 83 / 14%);
  background-size: cover;
}

.nav-tabs {
  border-bottom: 0px;
}

a {
  text-decoration: none !important;
}

#pager {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 4px;
}
#pager .stepper-before,
#pager .stepper-next,
#pager .stepper {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
}
#pager .stepper-before:hover,
#pager .stepper-next:hover,
#pager .stepper:hover,
#pager .stepper-active {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
}

.custom-link {
    text-decoration: none !important;
}

/* LOGIN */

/* tt = tudotemm */

.bgcolor-tt-green {
  background-color: #40916c;
}

.color-tt-green {
  color: #40916c;
}

.restrito-logo {
  width: 150px;
}

.box-icon-input img {
  width: 15px;
}

.box-icon-input {
  display: flex;
  padding: 0 15px;
  background-color: #fff;
  border-radius: 50px;
}

.box-icon-input input:focus {
  box-shadow: none;
}

.box-icon-input input:-webkit-autofill,
.box-icon-input input:-webkit-autofill:hover,
.box-icon-input input:-webkit-autofill:focus,
.box-icon-input input:-webkit-autofill:active {
  box-shadow: 0 0 0 30px white inset !important;
}

.bg-password-image {
  background-image: url("/img/alphacode_quadrado.jpg");
}

.footer-login p {
  color: #ffffff;
  font-size: small;
}
.footer-login img {
  height: 23px;
}

.btn-painel {
    color: #ffffff !important;
    padding: 0.2rem 0.5rem;
    text-decoration: none !important;
}

.btn-painel:hover {
    color: #ffffff !important;
    border-bottom: 2px solid #ffffff8a;
}

.btn-painel:active {
    color: #ffffff !important;
    background-color: #ffffff1c;
}

/* -------------------------- */

/* --MENU LATERAL-- */

.link-item,
.item-menu i {
  color: #8b8b8b !important;
}

.link-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column !important;
}

.link-item img {
  height: 1.5rem;
  margin-bottom: 4px;
}

.item-menu {
  height: 3rem;
  display: flex;
  margin-bottom: 14px;
}

.item-menu.active {
  background-color: #52b788 !important;
  border-radius: 0 30px 30px 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
  margin-right: -1rem;
}

.item-menu.active > .link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row !important;
}

.item-menu.active > .link-item img {
  height: 1.5rem;
  margin-right: 10px;
  filter: contrast(1.5);
}

.item-menu.active span,
.item-menu.active i {
  color: #ffffff !important;
  font-family: "regular";
}

.logo-menu {
  height: 5rem;
}

/* --CLASSES DE TODOS OS MÓDULOS-- */

.titulo-modulo {
  color: #1e3148 !important;
  font-family: "black" !important;
}

.btn-cadastrar {
  background-color: #1e3148;
  border-radius: 50%;
  border-color: #1e3148;
}

.btn-cadastrar:hover {
  background-color: rgb(20, 39, 62);
  border-color: rgb(20, 39, 62);
}

.btn-cadastrar:focus {
  background-color: rgb(10, 29, 52);
  border-color: rgb(10, 29, 52);
}

.btn-cadastrar:active {
  background-color: rgb(0, 19, 42) !important;
  border-color: rgb(0, 19, 42) !important;
}

.icone-cadastrar {
  color: #ffffff !important;
}

.titulo-card-header {
  color: #ffffff !important;
}

.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #40916c;
  color: #fff;
  font-size: 1em;
}

.btn-filtrar {
  background-color: #c5d86d;
  border-color: #c5d86d;
  border-radius: 50px;
}

.btn-filtrar:hover {
  background-color: rgb(187, 206, 99) !important;
  border-color: rgb(187, 206, 99) !important;
}

.btn-filtrar:focus {
  background-color: rgb(177, 196, 89) !important;
  border-color: rgb(177, 196, 89) !important;
  box-shadow: none !important;
}

.btn-filtrar:active {
  background-color: rgb(167, 186, 79) !important;
  border-color: rgb(167, 186, 79) !important;
}

.btn-limpar-filtro i {
  display: none;
}

.btn-limpar-filtro {
  border-radius: 50px;
}

.btn-limpar-filtro a:focus {
  box-shadow: none !important;
}

.card-table > .table-responsive > p {
  margin: 10px;
}

.card-table {
  padding: 0 !important;
}

.tabela-modulo {
  margin-bottom: 0 !important;
}

.tabela-modulo thead {
  background-color: #1e3148;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
}

.btn-ver {
  background-color: #d6f9dd;
  border-color: #d6f9dd;
  color: #1e3148;
  border-radius: 12px !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-ver:hover {
  background-color: rgb(204, 239, 211);
  border-color: rgb(204, 239, 211);
  color: #1e3148;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-ver:focus {
  background-color: rgb(194, 229, 201);
  border-color: rgb(194, 229, 201);
  color: #1e3148;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-ver:active {
  background-color: rgb(184, 219, 191) !important;
  border-color: rgb(184, 219, 191) !important;
  color: #1e3148 !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-remover {
  background-color: #fb0202;;
  border-color: #fb0202;
  color: #ffffff;
  border-radius: 12px !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-remover:hover {
  background-color: rgba(255, 6, 6, 0.447);
  border-color: rgba(246, 4, 4, 0.878);
  color: #FFFFFF;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-remover:focus {
  background-color: rgb(213, 228, 140);
  border-color: rgb(213, 228, 140);
  color: #1e3148;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-remover:active {
  background-color: rgb(213, 228, 140) !;
  border-color: rgb(213, 228, 140) !important;
  color: #1e3148 !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-salvar {
  background-color: #40916c;
  border-color: #40916c;
  color: #ffffff !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn-salvar:hover {
  background-color: rgb(54, 135, 98);
  border-color: rgb(54, 135, 98);
  color: #ffffff !important;
}

.btn-salvar:focus {
  background-color: rgb(44, 125, 88) !important;
  border-color: rgb(44, 125, 88) !important;
  color: #ffffff !important;
}

.btn-salvar:active {
  background-color: rgb(34, 115, 78) !important;
  border-color: rgb(34, 115, 78) !important;
  color: #ffffff !important;
}

.img-voltar {
  height: 32px;
  width: 60px;
  object-fit: cover;
}

.btn-voltar {
  padding: 0 !important;
  height: 2rem !important;
}

.btn-voltar:focus {
  box-shadow: none !important;
}

.btn-padrao {
  background-color: #40916c;
  border-color: #40916c;
  font-weight: bold;
  color: #FFFFFF;
}

.btn-padrao:hover, .btn-sair:hover {
  background-color: #40916C;
  font-weight: bold;
  color: #FFFFFF;
}

.btn-padrao:focus, .btn-padrao:active, .btn-sair:hover, .btn-sair:active {
  background-color: #4eb184 !important;
  font-weight: bold;
  color: #FFFFFF;
}

.hover {
  display: none;
}

/* Módulo de relatórios */
.btn-export-excel{
  background-color: #1E3148;
  color: #C5D86D;
  border: none;
  border-radius: 20rem;
  padding: 0 0.8rem;
  box-shadow: 0 1px 6px #00000038;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .7rem;
  height: 30px;
  line-height: 32px;
  margin: 0 1rem;
}

/* --DASHBOARD-- */

.div-img-dashboard {
  background-image: url("../img/dashboard.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  height: 19rem;
  border-radius: 16px;
}

.titulo-contador {
  font-family: "regular" !important;
  color: #a4afb7 !important;
}

.texto-contador {
  font-family: "bold" !important;
  color: #40916c !important;
}

.text-titulo {
  font-weight: bold;
  color: #1e3148 !important;
}

.background-header {
  color: #ffffff;
  background-color: #1e3148 !important;
}

/* DASHBOARD - COMÉRCIO */
#slide_dashboard {
  height: 250px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.imagens_avisos_dash {
  height: 210px;

  /* background-position: center; */
  background-repeat: no-repeat;
  background-size: contain;
}

.cupom01 {
  background-image: url(../img/cupons/cupom_01.jpeg);
}

.cupom02 {
  background-image: url(../img/cupons/cupom_02.jpeg);
}

.cupom03 {
  background-image: url(../img/cupons/cupom_03.jpeg);
}

/* --USUÁRIOS DO SISTEMA-- */

#abasModulo a {
  background-color: #eaf4be !important;
  border-color: #eaf4be;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  color: #1e3148;
  font-size: 10px;
}

#abasModulo a.active {
  background-color: #1e3148 !important;
  border-color: #1e3148 !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font-size: 10px;
}

.card-header {
  border-radius: unset !important;
  background-color: #1e3148;
}

#lista-permissoes tbody tr td,
#lista-permissoes thead tr td {
  text-align: center !important;
}

.custom-checkbox {
  text-align: left !important;
}

.custom-control-label::before {
  border-color: #25988b !important;
  border: 2px solid #25988b;
}

.custom-control-label::after {
  border-color: #25988b !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #25988b !important;
  border-radius: 12px;
}

#lista-permissoes0_col_0 {
  color: #25988b;
  font-size: small;
  font-weight: 700;
}

#img-avatar {
  cursor: pointer;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
}

.figure-avatar {
  justify-content: center;
}

/* --COMERCIOS CADASTRADOS-- */

.comercios-cadastrados #img:hover {
  cursor: pointer !important;
}

/* .titulo-ver {
  background-color: #1E3148 !important;
}

.titulo-header-section {
  background-color: #1E3148 !important;
  color: #fff !important;
}

.comercios-cadastrados .btn-voltar {
  height: unset !important;
}

#tabela-lista-comercios-cadastrados *, .formulario-comercios-cadast-filtro * {
  font-size: 13px
}

#tabela-lista-comercios-cadastrados thead {
  background-color: #1E3148 !important;
  color: #fff !important;
}

#btn-alterar, #btn-salvar {
  background-color: #40916C;
  color: #fff;
  border: none;
  font-size: 14px !important;
} */

.btns-control-ver-comercio button {
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
}

#label_upload {
  width: 146px !important;
  height: 91px !important;
  background-color: #7e8185 !important;
  border-radius: 8px !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 100;
  transition: all 0.3s;
}

#label_upload:hover {
  background-color: #636568 !important;
}

/* --BANNERS-- */
#contain-img-banner {
  margin: 15px 0px 15px 0px;
}

#contain-img-banner > .img-banner > label {
  padding: 0 !important;
}

#contain-img-banner > .img-banner > label > img {
  width: 100%;
  height: 130px;
  border-radius: 10px;
}

/* --| MODULO SEGMENTO |-- */

.modulo-segmento .btn-voltar {
  height: unset !important;
}

.modulo-segmento table thead tr {
  background-color: #1e3148 !important;
  color: #fff !important;
}

.modulo-segmento #btn-editar,
.modulo-segmento #btn-salvar {
  background-color: #40916c;
  color: #fff;
  border: none;
}

/* --| FIM MODULO SEGMENTO |-- */

/* --PRESTADORES DE SERVIÇO-- */

.label-cadastrar {
  color: #1e31484d;
  border-bottom: 2px solid #1e314821;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  font-family: "medium";
}

/* Turismo */
.card-turismo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #2b2b2b;
  font-family: "medium";
}

.card-turismo > span:hover {
  text-decoration: underline;
}

.icone-turismo {
  width: 60px;
  object-fit: cover;
  color: #c5d86d;
}

.ck-editor__main div {
  height: 200px;
}

.caixa-disabled {
  background-color: #eaecf4 !important;
  pointer-events: none;
}

.disabled {
  background-color: #eaecf4 !important;
  pointer-events: none;
}

.hability {
  pointer-events: visible;
}

/* --UPLOAD DE IMAGENS NOS MÓDULOS-- */

.container-arquivo {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0;
  padding-left: 23px;
}

.container-arquivo-imagem {
  display: flex;
  justify-content: center;
  width: 250px;
  height: 150px;
  max-width: 250px;
  max-height: 150px;
}

.container-arquivo-imagem figure {
  width: 250px;
  height: 150px;
  max-width: 250px;
  max-height: 150px;
}

.arquivo-imagem {
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.label-imagem {
  font-size: 12px;
}

/* |- usuários do app -| */

.usuarios-app-cadastro-switchs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.shadow-input{
  box-shadow: 0px 2px 7px 1px #dddddd;
  border-radius: 16px;
}

.usuarios-app-cadastro-switchs div {
  justify-self: center;
}

.usuarios-app-cadastro-switchs .custom-control-label:hover {
  cursor: pointer;
}

.usuario-opt-switch {
  min-width: 300px !important;
  max-width: 300px !important;
}

.modulo-usuarios-do-app .custom-control-label::before {
  border-color: #ededed !important;
  border: 2px solid #25988b;
}

.modulo-usuarios-do-app
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #51e191 !important;
}

/* -- Cashback -- */

.select-produto button {
  border: 1px solid #d1d3e2;
  background-color: #fff;
  color: #6e707e;
}

/* -| MODULO DADOS DO COMERCIO: ADMIN COMERCIO |- */

.status-comercio-control label {
  background-color: #f9f9f9;
  color: #1e3148;
  font-weight: bold;
  padding: 10px 70px;
  border-radius: 50px;
  box-shadow: 6px 3px 9px 0px inset #dddddd;
  cursor: pointer;
  transition: all .2s;
}

.status-comercio-control input[name='aberto_fechado'] {
  display: none;
}

.status-comercio-control input[name='aberto_fechado']:checked + label, .comercio_aberto_fechado {
  background-color: #1e3148;
  color: #ffffff;
  box-shadow: 6px 3px 9px 0px inset #172230;
}

.text-yellow{
  color: #f8f40ebd;
}
.tamanhoEstrelas .lista-avaliacao_col_2  {
  /* background-color: #172230 !important; */
  font-size: 9px !important;
  text-align: center;
}
.lista-avaliacao_col_3{
  font-size: 9px !important;
  text-align: center;

}

/* PRODUTOS */
.container-arquivo-imagem-prod {
  display: flex;
  justify-content: center;
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
}

.container-arquivo-imagem-prod figure {
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
}

.container-add {
  width: 100%;

  bottom: 0px;
  /* position: absolute; */
  display: flex;
  align-items: center;

  display: flex;
  justify-content: baseline;
}

.btn-adicionar {
  color: #FFFFFF;
  background-color: #C5D86D;
  border-radius: 12px !important;
}

.btn-adicionar:hover {
  color: #FFFFFF;
  background-color: #d4f058;
}

.btn-adicionar:active {
  border: none;
  background-color: #c4e240;
}

.input-add-color {
  border-radius: 5px;
  border: solid 1px #c7c7c7;

  margin-right: 10px;
}

#input_cor, #input_cor:active, #input_cor::after, #input_cor::before, #input_cor:focus {
  border: none;
  box-shadow: 0 0 0 0;
  outline: 0;
}

#cor {
  -webkit-appearance: none;
  border: none;
  border-radius: 10px;
  width: 20px;
  height: 20px;

  margin-top: 10px;
  padding: 0;

  background-color: #fff;
  cursor: pointer;
}

#cor::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
  padding: 0;
}

#cor::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: 10px;
  padding: 0;
}

#cor:focus{
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
}

/* admin prestador de serviço */
.portfolio-servicos {
  gap: 1rem;
}

.portfolio-servicos label {
  background-color: #eaecf4 !important;
  color: #858796;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;

  position: relative;
}

.portfolio-servicos .servico button.limpa-input-file {
  position: absolute;
  top: -5px;
  right: -5px;
  border: none;
  font-weight: 800;
  width: 25px;
  height: 25px;
  background-color: #ff6161;
  line-height: middle;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: center;
  border: 3px solid #ffa6a6;
  border-radius: 20px;
  /* display: none; */
}

.portfolio-servicos .servico button.apagar-trabalho {
  border: none;
  background-color: #ff6161;
  color: #fff;
  padding: 5px;
}

.orientation{
  flex-direction: row;
}


/* -| Dados do comércio - avaliação |- */
#lista-avaliacoes td {
  border: none !important;
}

#lista-avaliacoes tbody tr {
  border: 1px solid #eee;
  border-radius: 5px;
}

.header-avaliacoes-comercio,
.item-comentario-comercio {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  white-space: nowrap;
}

.item-comentario-comercio {
  border-color: #e9e9e9 !important;
}

.container-avaliacoes-comercio div + div {
  margin-top: 10px;
}
/* Avaliacao */
.card-avaliacao {
  border: 1px solid; 
  display: flex;
  margin-bottom: 5px;
  text-align: center;
  padding: 0.7rem;
  justify-content: center;
  align-items: center;
}
.button-avaliacao{
  
  border-radius: 10px;
  background-color: #919191;
  color: white;
  border: none;
  padding: 5px ;
  width: 100%;
}

.color{
  color: white;
}

.btn-azul-escuro {
  background-color: #1e3148 !important;
  color: #fff !important;
}

.btn-azul-escuro:hover, .btn-azul-escuro:focus {
  background-color: #455e7c !important;
}


/* admin comercio, pedidos */

.badge-pedido
{
  background-color: #f9f9f9;
  color: #1e3148;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 50px;
  box-shadow: 6px 3px 9px 0px inset #dddddd;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}

#preparando:checked ~ label.preparando {
  background-color: #1e3148 !important;
  color: #fff;
  box-shadow: none !important;
}

#retirada:checked ~ label.retirada {
  background-color: #1e3148 !important;
  color: #fff;
  box-shadow: none !important;
}

#saiu:checked ~ label.saiu {
  background-color: #1e3148 !important;
  color: #fff;
  box-shadow: none !important;
}

#entregue:checked ~ label.entregue {
  background-color: #1e3148 !important;
  color: #fff;
  box-shadow: none !important;
}

.container-mensagens{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  

}
.card_mensagens{
  overflow-y: auto;
  max-height: 80vh;
}
.msg_cotainer_send{
      
  background: #CBCBCB41 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  opacity: 1;
  border-radius: 16px 16px 0px 16px;
  width: 15%;
  height: auto;
  padding: 10px;
}
.msg_cotainer{
  background: #F9FBF0 0% 0% no-repeat padding-box;
  opacity: 1;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 16px 16px 16px 0px;
  width: 15%;
  height: auto;
  padding: 10px;
  color: black;
}
.balao_mensagem{
  color: black;

}
.balao_mensagem.dash{
  align-self: flex-end;
}
.mensagem_enviada{
  float: right;
}


/* admin master - chat */
.chat {
  /* display: grid;
  gap: 1rem; */
}

.chat .usuario-perfil {
  gap: 1rem;
}

.chat .usuario-perfil .btn-fechar-perfil-usuario {
  font-size: 1.1rem;
} 

.chat .usuario-perfil .avatar-nome {
  /* gap: 1rem; */
}

.chat .usuario-perfil .avatar-nome p, .chat .usuario-contatos-detalhes {
  font-size: 1rem;
  font-weight: 500;
  color: #1F3147;
}

.usuario-contatos-detalhes {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 2px solid #E9E9F0;
}

.chat .usuario-perfil .container-avatar-usuario {
  width: 70px;
  height: 70px;
  border-radius: 70px;
}

.chat .usuario-perfil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 70px;
}
/* / admin master - chat */
.btn-aceitar, .btn-recusar {
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 100px;
  color: #fff;
}

.btn-aceitar {
  background-color: #40916C;
}

.btn-recusar {
  background-color: #8B8B8B;
}

.btn-aceitar:hover, .btn-recusar:hover {
  color: #fff;
  opacity: 0.8;
}

.container-chat-actions {
}

.chat .mensagens {
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  max-height: 50vh;
  overflow-y: auto;
}

.chat p.mensagem {
  width: 100%;
  padding: 1rem !important;
  font-size: 1rem;
  font-weight: 400;
  color: #4D4F5C;
}

.chat span.time-mensagem {
  font-size: 0.8rem;
  font-weight: 400;
  color: #43425D;
  margin-top: 5px;
}

.chat .container-balao-mensagem {
  width: fit-content;
  max-width: 500px;
}

.chat .container-balao-mensagem.master {
  justify-self: end;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.chat .container-balao-mensagem.dash span {
  align-self: end;
}

.chat p.mensagem.mensagem-dash {
  border-radius: 40px 40px 0 40px;
  background-color: #CBCBCB41;
}

.chat p.mensagem.mensagem-app {
  border-radius: 40px 40px 40px 0;
  background-color: #F9FBF0;
}

.chat .chat-actions input {
  border: none;
  font-size: 1rem;
  font-weight: 400;
  color: #4D4F5C;
  width: 100%;
}

.chat .chat-actions input:focus {
  box-shadow: none;
}

.chat .chat-actions button img {
  width: 15px;
}

.chat .btn-enviar-msg {
  background-color: #C5D86D;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.chat .btn-finalizar-atendimento {
  background-color: #7e8185;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.p-status {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-circle {
  width: 14px;
  height: 14px;
  border-radius: 14px;
  display: inline-block;
  margin-right: 5px;
}

.status-circle.status-andamento {
  background-color: #40916C;
}

.status-circle.status-respondido {
  background-color: #1E3148;
}

/* chat admin comercio */

#chat-comercio
{
  min-height: 80vh;
  max-height: 100vh;
}

#chat-comercio .col-contatos {
  overflow: auto;
  max-height: 100vh;
  background-color: #fff;
  /* height: 100%; */
}

#chat-comercio .busca-container, #chat-comercio .chat-header {
  background-color: #fff;
  height: 70px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#chat-comercio .busca-container input {
  border: none;
  font-weight: 400;
}

#chat-comercio .busca-container input:focus {
  box-shadow: none;
  border-color: none;
}

#chat-comercio .btn-fechar-chat {
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
}

#chat-comercio .lista-contatos li {
  gap: 10px;
  padding: 10px !important;
}

#chat-comercio .lista-contatos li .container-contato-avatar {
  width: 40px !important;
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
}

#chat-comercio .lista-contatos li .container-contato-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chat-comercio .lista-contatos li .contato-infos
{
  flex-grow: 1;
}

#chat-comercio .lista-contatos li .contato-infos .contato-nome {
  color: #4D4F5C;
  font-weight: 500;
  font-size: 1rem;
}

#chat-comercio .lista-contatos li .contato-infos .contato-tempo-mensagem {
  font-size: 0.7rem;
  font-weight: 400;
}

#chat-comercio .lista-contatos li span, #chat-comercio .lista-contatos .contato-previa-msg {
  font-size: 0.8rem;
  font-weight: 400;
  color: #1F3147;
  user-select: none;
}

#chat-comercio .lista-contatos li {
  border-top: 1px solid #eee !important;
}

#chat-comercio .lista-contatos li:hover {
  background-color: #67B7AE1C;
  cursor: pointer;
}

/* chat comercio - col right */

#chat-comercio .chat-inbox {
  display: none;
  /* display: grid; TODO: Trocar para a regra de cima quando o chat estiver pronto */
  grid-template-rows: auto 1fr auto;
  max-height: 100vh;
}

#chat-comercio .chat-header .avatar-nome {
  flex-grow: 1;
  gap: 10px;
}

#chat-comercio .chat-header .avatar-container {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}

#chat-comercio .chat-header .avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chat-comercio .chat-header span {
  font-size: 1rem;
  font-weight: 400;
  color: #1F3147;
}

#chat-comercio .sem-chat-selecionado, #chat-comercio .chat-inbox {
  height: 100%;
  background-color: #fff;
}

#chat-comercio .sem-chat-selecionado {
  display: grid;
  place-items: center;
  /* display: none; TODO: trocar para as regras de cima quando o chat estiver pronto */
  /* border-left: 1px solid #eee; */
}

#chat-comercio .sem-chat-selecionado p {
  font-weight: 400;
  font-size: 0.9rem;
  color: #4D4F5C;
}

#chat-comercio .col-inbox {
  border-left: 1px solid #eee;
}

#chat-comercio .col-inbox .mensagens {
  width: 100%;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 1rem;
  overflow-y: auto;
  height: 100%;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg {
  width: fit-content;
  max-width: 400px;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg.container-balao-dash .hora-msg {
  width: 100%;
  text-align: right;
}

#chat-comercio .col-inbox .mensagens .container-balao-parceiro {
  align-self: flex-end;
  text-align: right;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg .balao-msg {
  padding: 18px;
  font-weight: 400;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  font-size: 0.9rem;
  line-height: 18px;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg .balao-msg.balao-app {
  border-bottom-right-radius: 30px;
  background-color: #F9FBF0;
  color: #4D4F5C;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg .balao-msg.balao-dash {
  border-bottom-left-radius: 30px;
  color: #1F3147;
  background-color: #00000029;
}

#chat-comercio .col-inbox .mensagens .container-balao-msg .hora-msg {
  font-weight: 400;
  display: inline-block;
  font-size: 0.7rem;
  color: #43425D;
}

#chat-comercio .col-inbox .container-enviar-msg {
  padding: 1rem;
}

#chat-comercio .col-inbox .container-enviar-msg .area-msg {
  gap: 10px;
}

#chat-comercio .col-inbox .container-enviar-msg .area-msg textarea {
  width: 100%;
  font-weight: 400;
  color: #000;
  font-size: 1rem;
  height: auto;
}

#chat-comercio .col-inbox .container-enviar-msg .area-msg textarea:focus {
  box-shadow: none !important;
}

#chat-comercio .col-inbox .container-enviar-msg .area-msg button {
  background-color: #C5D86D;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.input-cor {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 100% !important;
  height: 100% !important;
  border: none;
  cursor: pointer;
}

.input-cor::-webkit-color-swatch{
  border: 1px solid #808080;
  border-radius: 10%;
}

.container-input-cores {
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d3e2;
  border-radius: 0.35rem;
}

.container-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-input-disabled {
  background-color: #eaecf4;
  opacity: 1;
}

.pointer-events-none {
  pointer-events: none;
}

.opacity-disabled {
  opacity: 0.5;
}

.card-relatorio-faturamento {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

#pager {
  padding: 1rem !important;
}

#pager .stepper {
  background-color: #e5e5e5;
  color: #5a5a5a !important;
  width: 35px;
}

#pager .stepper:hover {
  background-color: #5ee1a4;
  color: #fff !important;
}

#pager .stepper.stepper-active {
  background-color: #5ee1a4;
  color: #fff !important;
}