main {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;

}

main button {
  padding: 1rem;
  border-radius: .3rem;
  border-color: transparent;
  cursor: pointer;
}

/* CABECALHO */

main .cabecalho {
  display: grid;
  width: 100%;
  grid-template-columns: 3rem max-content 1fr max-content max-content;
  grid-template-rows: 4rem;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1rem;
  position: relative;
}

main .cabecalho i {
  font-size: var(--main-cabecalho-icone-font-size);
  width: 100%;
}

main .cabecalho a {
  text-decoration: underline;
  cursor: pointer;
}

main .cabecalho h1 {
  font-size: var(--main-cabecalho-titulo-font-size);
  font-weight: 300;
  line-height: 100%;
  align-items: center;
}

main .cabecalho h2.voltar {
  font-size: var(--main-cabecalho-titulo-font-size);
  font-weight: 900;
  text-decoration: underline;
  grid-column: 2;
  align-items: center;
  line-height: 100%;
  cursor: pointer;
}

main .cabecalho h2 {
  font-size: var(--main-cabecalho-quantidade-font-size);
  font-weight: 300;
  grid-column: 3;
  align-items: center;
  line-height: 100%;
}
main .cabecalho button {
  font-size: var(--main-cabecalho-botao-novo-font-size);
  background: var(--main-cabecalho-botao-novo-background);
  color: var(--main-cabecalho-botao-novo-color);
  grid-column: 4;
}
main .cabecalho button.voltar {
  font-size: var(--main-cabecalho-botao-voltar-font-size);
  background: var(--main-cabecalho-botao-voltar-background);
  color: var(--main-cabecalho-botao-voltar-color);
  grid-column: 5;
  width: 5rem;
  height: 100%;
}

main .cabecalho button.voltar i {
  font-size: var(--main-cabecalho-botao-voltar-font-size);
}

main .cabecalho button.salvar {
  background: var(--main-form-section-botao-salvar-background);
  color: var(--main-form-section-botao-salvar-color);
  font-size: var(--main-form-section-botao-salvar-font-size);
}


main button.download {
  background: var(--main-form-section-botao-salvar-background);
  color: var(--main-form-section-botao-salvar-color);
  font-size: var(--main-form-section-botao-salvar-font-size);
  width: fit-content;
  display: flex;
  gap: 1rem;
}




main button:hover {
  opacity: .8;
  transition: opacity .25s ease-in-out;
}


/* SECTION DE FILTROS */

main section, .grid section {
  background: var(--main-section-background);
  border: solid .1rem transparent;
  border-radius: .2rem;
  padding: 1rem;
  box-shadow: 0px 0px 1rem  var(--main-section-border-color);
  width: 100%;
}

main section.info {
  background: var(--main-section-info-background);
  /* box-shadow: 0px 0px 1rem  var(--main-section-info-border-color); */
  border: dashed .1rem var(--main-section-info-border-color);
  padding: 1rem;
}

main section.info h2 {
  font-weight: 500;
  padding: .4rem;
  line-height: 1.4rem;
  font-size: 1.4rem;
  align-items: center;
  display: flex;
  gap: .5rem;
}

main section.info h2.negrito {
  font-weight: bold;
}

main section.info button {
  background: var(--main-form-section-botao-info-background);
  color: var(--main-form-section-botao-info-color);
  font-size: var(--main-form-section-botao-info-font-size);
}

main section .filtros{
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: 1rem;
  grid-template-rows: 4rem;
}

main section .filtros form
{
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  background: #FFF;
  border: solid .1rem #EBEBEB;
  border-radius: .1rem;
  justify-content: center;
  align-items: center;

}

main section .filtros form i{
  font-size: 1.4rem;
  width: 100%;
  margin: auto .5rem;
  color: #CCC;
}

main section .filtros form input{
  font-size: 1.3rem;
  height: 100%;
  border: none;
  padding: .5rem;
}

main section .filtros .paginacao button {
  font-size: var(--main-section-botao-paginacao-font-size);
  background: var(--main-section-botao-paginacao-background);
  color: var(--main-section-botao-paginacao-color);
  padding: 1rem;
  border-radius: .3rem;
  border-color: transparent;
  cursor: pointer;
}

/* REGISTROS */

main section .registros {
  display: grid;
  width: 100%;
  grid-template-rows: 5rem 1fr;
}

main section .registros header,
main section .registros article
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  align-items: center;
}

main section .registros header span,
main section .registros article span
{
  padding: 1rem;
}


main section .registros header {
  border-bottom: solid .1rem #DDD;
}

main section .registros article {
  border-bottom: solid .1rem #EEE;
}

main section .registros article:hover {
  background: #EEE;
}

main section .registros header span
{
  font-size: 1.4rem;
  color: #343434;
  font-weight: 600;
}

main section .registros article span
{
  font-size: 1.4rem;
}

main section .registros article.desabilitado span
{
  color: #C4C4C4;
}

main section .registros article h5
{
  font-size: 1.2rem;
  padding: .6rem 0;
  font-family: var(--font-family-light);
}
main section .registros article h6
{
  font-size: 1.1rem;
  padding: .6rem 0;
  font-family: var(--font-family-light);
}
main section .registros article img {
  object-fit: contain;
  max-width: 5rem;
  margin: .5rem auto;
  max-height: 4rem;
}



/* REGISTROS APENAS COM A IMAGEM NO COMEÇO DA LINHA  */
/* main section .registros header.imagem,
main section .registros article.imagem
{
  display: grid;
  grid-template-columns: 10rem repeat(auto-fit, minmax(1rem, 1fr));
  align-items: center;
}
main section .registros header.imagem span:nth-child(-n+1),
main section .registros article.imagem span:nth-child(-n+1)
{
  text-align: center;
}
 */

/* REGISTROS COM ID E IMAGEM NO COMEÇO DA LINHA  */

/* main section .registros header.id_e_imagem,
main section .registros article.id_e_imagem
{
  display: grid;
  grid-template-columns: 8rem 10rem repeat(auto-fit, minmax(1rem, 1fr));
  align-items: center;
}


main section .registros header.id_e_imagem span:nth-child(-n+2),
main section .registros article.id_e_imagem span:nth-child(-n+2)
{
  text-align: center;
} */

/* OPÇÕES DO REGISTRO */

main section .registros article button {
  padding: 1rem;
  border-radius: .3rem;
  border-color: transparent;
  background: transparent;
  cursor: pointer;
  font-size: 1.6rem
}

main section .registros article button.adicionar {
  padding: 1rem;
  border-radius: .3rem;
  border-color: transparent;
  background: var(--main-section-registros-botao-adicionar-background);
  color: var(--main-section-registros-botao-adicionar-color);
  cursor: pointer;
  font-size: 1.6rem
}

main section .registros article button[disabled] i{ color:inherit ;opacity: .6; }
/* Produtos */

main section .registros article button .fa-suitcase { color: #0523b9; }

/* Status */

main section .registros article button .fa-eye { color: green; }

main section .registros article button .fa-eye-slash { color: grey; }

/* Editar */

main section .registros article button .fa-edit { color: orange; }


/* Deletar */

main section .registros article button .fa-trash-alt { color: red; }
main section .registros article button .fa-trash-alt.disabled { color: #CCC; }

/* Ordenação */

main section .registros article button .fa-arrow-up,
main section .registros article button .fa-arrow-down {color:crimson;}