@import url(
  'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
);


:root {
  
  --principal-light: #cfe2ff;
  --principal: #007ab8;
  --secundario-light: #e9ecef;
  --secundario: #c4c8cb;
  --secundario-dark: #6b6b6b;
  --destaque: #ff5050;
  --destaque-light: #f6c0c0;
  --dark: #181818;
  --light: #FEFEFE;
  --light-no-color: #F8F9FA;
  
  --gray-border: #dee2e6;
  --shadow: #0000001a;

  --black: #000000;
  --blue: #0000FF;
  --cyan: #00B7EB;
  --green: #00FF00;
  --gray: #808080;
  --red: #FF0000;
  --yellow: #FFFF00;
  --white: #ffffff;

}


body{
    font-family:"Montserrat", sans-serif;
    margin: 0;
    background-color: var(--light-no-color);
}

.font-body {
  font-size: 18px;
}

.wrapper {
  align-items: stretch;
  display: flex;
  width: 100%;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  transition: all 0.35s ease-in-out;
}

.texto-pequeno{
  font-size: 14px;
}

.margin-left-ex {
  margin-left: 15rem;
}

.titulo-pagina{
  font-size: 16px;
}

.bg-principal-light {
  background-color: var(--principal-light);
}
.bg-destaque {
  background-color: var(--destaque);
}
.bg-dark {
  background-color: var(--dark);
}


/* Detalhes*/
.linha {
  display: inline-block;
  border-bottom: 0.8px solid var(--secundario);
  padding-bottom: 5px;
}

.centered {
  text-align: center;
  vertical-align: middle;
}


.not-visible {
  display: none;
}

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


.form-control-color {
  width: 20rem;
}



#tbody_id tr td span a {
  text-decoration: none;
  color: var(--dark)
}

.col-order {
  cursor: pointer;
}

.sort-arrow {
  font-size: 0.7em;
  color: var(--dark);
}


/* colors */
.red {
  color: var(--red);
}
.yellow {
  color: var(--yellow);
}
.blue {
  color: var(--blue);
}
.cyan {
  color: var(--cyan);
}
.green {
  color: var(--green);
}
.gray {
  color: var(--gray);
}
.white {
  color: var(--white);
}
.black {
  color: var(--black);
}
.dark {
  color: var(--secundario-dark);
}
.destaque {
  color: var(--destaque);
}
.principal {
  color: var(--principal);
}
.principal-light {
  color: var(--principal-light);
}
.destaque-light {
  color: var(--destaque-light);
}


/* Fundos de cor para cada status */

.bg-criado{
  background-color: #9966ff;
}
.bg-disponivel{
  background-color: #d482d5;
}
.bg-aberto{
  background-color: #ff6384;
}
.bg-ematendimento{
  background-color: #ff9f40;
}
.bg-conserto{
  background-color:  #ffcd56;
}
.bg-aguardandofinalizacao{
  background-color:  #4bc0c0;
}
.bg-resolvido{
  background-color:   #36a2eb;
}
.bg-cancelado{
  background-color:   #7994f3;
}
.bg-suspenso{
  background-color:   #c9cbcf;
}

/* dropdown-menu */
.dropdown-menu {
  max-height: 25rem;
  overflow-y: scroll;
}



/* Spinner */
.spinner-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  cursor: pointer;
}

/* indicador */
.card-indicador:hover{
  cursor: pointer;
}

.card-selecionado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  cursor: default;
}

/* text-help */
div > .form-text {
  color: var(--secundario-dark);
}


/* Messages */
ul.messages {
  padding: 0;
}

ul.messages li {
  list-style: none;
}


/* formulário */
.fundo-formulario {
  background-color: var(--light);
  border-radius: 0.8%;
}

/* Frame painel */
.fundo-frame {
  background-color: var(--light);
  border-radius: 0.8%;
}

.frame-scroll {
  overflow-y: auto; 
  overflow-x: hidden;
  max-height: 35rem; 
  max-width: 100%;
}

/*variable-list*/
.variable-list li:hover {
  background-color: var(--secundario-light);
  cursor: pointer;
}

/* table */
td a {
  text-decoration: none;
}


/* Breadcrumb */
.breadcrumb-item a{
  text-decoration: none;
  color: var(--dark);
}
.active a{
  text-decoration: none;
  color: var(--dark);;
}
.active a:hover{
  cursor: default;
}

/* readonluy input */
.readonly-input {
  background-color: var(--secundario-light) !important;
  border-color: var(--gray-border);
}
.readonly-input:focus {
  background-color: var(--secundario-light);
}

.caixa-informacao {
  background-color: var(--light-no-color);
  border: 1px solid var(--gray-border);
  border-radius: 10px;
  box-shadow: 0px 5px 10px var(--shadow); /* Adiciona uma sombra para dar efeito de profundidade */
  padding: 20px;
  width: 300px;
}


/* personaliza checkbox */

.form-check-input {
  margin: 0 0.5em 0 0;
  appearance: auto;
}


/* select input filter */
.input-select-dropdown {
  position: relative;
}


/* Input image field */
input[type="file"] {
  display: none;
}
.custom-file-upload {
  border: 1px solid var(--light);
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

.file_field_figure {
  display: flex;
} 

/* tooltip */
.custom-tooltip {
  --bs-tooltip-bg: var(--destaque);
  --bs-tooltip-color: var(--light);
}


/* botões */
.btn-principal {
  background-color: var(--principal);
  border: 1px solid var(--principal);
  color: var(--light);
}

.btn-principal:hover {
  background-color: var(--principal-light);
  color: var(--dark);
}

.btn-slim-principal {
  color: var(--principal);
  font-size: 1.15rem;
}

.btn-slim-principal:hover {
  color: var(--principal-light);
  font-size: 1.15rem;
}

.slim-principal {
  color: var(--principal);
  font-size: 1.15rem;
}

.btn-outline-principal{
  color: var(--principal);
  border: 1px solid var(--principal);
}
.btn-outline-principal:hover{
  background-color: var(--principal);
  border: 1px solid var(--principal);
  color: var(--light);
} 

.btn-sem-acao:hover {
  background-color: var(--white);
  color: var(--principal);
  border: 1px solid var(--principal);
}

.btn-destaque {
  background-color: var(--destaque);
  border: 1px solid var(--destaque);
  color: var(--light);
}

.btn-destaque:hover {
  background-color: var(--destaque-light);
  color: var(--dark);
}

.btn-slim-secundario {
  color: var(--destaque);
  font-size: 1.15rem;
}

.btn-slim-secundario:hover {
  color: var(--secundario);
  font-size: 1.15rem;
}

.slim-secundario {
  color: var(--destaque);
  font-size: 1.15rem;
}

.btn-new {
  font-size: 2.6rem;
  border-color: var(--principal);
  color: var(--principal);
}
.btn-icon-light {
  border-color: var(--principal);
  color: var(--light);
}
.btn-new:hover {
  color: var(--principal-light);
  border-color: var(--principal-light);
}


.btn-principal-color {
  color: var(--principal);
}

.btn-principal-color:hover {
  color: var(--principal-light);
}

.desabilitado {
  color: var(--secundario-light);
  font-size: 1.15rem;
}

.botao-redondo{
  border-radius: 50%;
  border-color: var(--principal);
  width: 2.5rem;
  height: 2.5rem; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.botao-redondo:hover{
  border-color: var(--principal-light);
}

.btn-filtro:hover {
  background-color: gainsboro;
}
.btn-filtro div:hover {
  background-color:aliceblue;
}


/* sidebar */

#sidebar {
  background-color:var(--light);
  max-width: 264px;
  min-width: 264px;
  transition: all 0.35s ease-in-out;
  z-index: 1111;

}

.sidebar-logo {
  padding: 1.15rem 1.5rem;
  border-bottom: var(--destaque) solid 1px;
}

.sidebar-logo a {
  color: var(--light);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.sidebar-logo p {
  color: var(--light);
  font-size: 1.25rem;
  font-weight: 600;
}

.sidebar-item {
  list-style: none;
}

.sidebar-nav {
  padding: 0;
}

#sidebar.collapsed {
  margin-left: -264px;
}

.sidebar-header {
  color: var(--light);
  font-size: .95rem;
  padding: 1.5rem 1.5rem .375rem;
}

a.sidebar-link {
  padding: .625rem 1.625rem;
  color: var(--dark);
  position: relative;
  display: block;
  font-size: 1rem;
  text-decoration: none;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
  border: solid;
  border-width: 0 .075rem .075rem 0;
  content: "";
  display: inline-block;
  padding: 2px;
  position: absolute;
  right: 1.5rem;
  top: 1.4rem;
  transform: rotate(-135deg);
  transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
  color: var(--dark);
  transform: rotate(45deg);
  transition: all .2s ease-out;
}

.sidebar-link:hover {
  background-color: var(--principal-light);
}

#nome-estabelecimento{
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
  color: var(--dark);
}


/* Customize DataTable Pagination */

.pagination {
  /* Mudar a cor da seleção das páginas do dataTable */
  margin-top: 2rem !important;
}

.page-item.active .page-link {
  /* Mudar a cor da seleção das páginas do dataTable */
  columns: var(--secundario);
  background-color: var(--principal);
  border: 1px sold var(--principal);
  color: var(--light);
}

.page-item.active .page-link:hover {
  /* Mudar a cor da seleção das páginas do dataTable */
  columns: var(--secundario);
  background-color: var(--principal-light );
  border: 1px sold var(--principal);
}

.pagination > li > a {
  /* Mudar a cor da seleção das páginas do dataTable */
  background-color: var(--light);
  color: var(--dark);
}

.pagination > li > a:hover,
.pagination > span > a:hover {
  /* Mudar a cor da seleção das páginas do dataTable */
  color: var(--dark);
  background-color: var(--principal-light);
  border: 1px solid var(--principal-light);
  box-shadow: none;
}

.pagination > li > a:focus,
.pagination > span > a:focus {
    /* Mudar a cor da seleção das páginas do dataTable */
    color: var(--dark);
    /* background-color: var(--principal-light); */
    border: 1px solid var(--light);
    box-shadow: none;
}

table.dataTable {
  background-color: var(--light);
}

 
/* Responsive */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .titulo-pagina{
    font-size: 18px;
  }
  .font-body {
    font-size: 22px;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .titulo-pagina{
    font-size: 20px;
  }
  .font-body {
    font-size: 14px;
  }
  .dataTables_length {
      margin-bottom: 1rem;
      display: block;
  }
  
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .titulo-pagina{
    font-size: 22px;
  }
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .titulo-pagina{
    font-size: 24px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  .titulo-pagina{
    font-size: 26px;
  }
}