* {
  margin: 0;
  padding: 0;
  font-size: 12pt;
}
:root {
  --verde: #556956;
  --backgroud: #f7f2ec;
}
a {
  text-decoration: none;
}
.main {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-image: url("backgrande.jpg"); /* Imagem padrão (acima de 700px) */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (max-width: 700px) and (min-width: 451px) {
  .main {
    background-image: url("backmedio.jpg"); /* Imagem para largura entre 451px e 700px */
  }
}

@media (max-width: 450px) {
  .main {
    background-image: url("backcel.jpg"); /* Imagem para largura até 450px */
  }
}

.conteudo {
  width: 700px;
  height: calc(100vh - 20px);
  padding: 0px 5px;
}
@media (max-width: 701px) {
  .conteudo {
    width: 100%;
  }
}

h1 {
  margin-top: 20px;
  height: 32px;
  width: 100%;
  text-align: center;
  font-size: 20pt;
  color: var(--verde);
  background-color: whitesmoke;
  background: radial-gradient(circle, whitesmoke 70%, transparent);
}
p {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12pt;
  color: rgba(0, 0, 0, 0.959);
  background: radial-gradient(circle, whitesmoke 70%, transparent);
}

.div-tabela {
  width: 100%;
  height: calc(100vh - 322px); /*222 - 322*/
  overflow: visible;
  padding: 2px;
  border-bottom: 2px solid var(--verde);
  background-color: whitesmoke;
  background: radial-gradient(circle, whitesmoke 90%, transparent);
}

.tabela th:nth-child(2),
.tabela td:nth-child(2) {
    width: 100px; /* Define um tamanho mínimo para essas colunas */
    white-space: nowrap; /* Impede que o texto quebre */
    text-align: center;
}
.tabela th:nth-child(3),
.tabela td:nth-child(3) {
    width: 50px; /* Define um tamanho mínimo para essas colunas */
    white-space: nowrap; /* Impede que o texto quebre */
}
.thitem {
  width: calc(100% - 300px) !important; /* Prioridade para esta coluna */
}

.tabela thead, .tabela tbody {
  width: 100%;
}
thead {
  position: sticky;
  top: 0;
  background-color: whitesmoke; /* Fundo fixo para o cabeçalho */
  z-index: 1; /* Garante que o cabeçalho fique acima do tbody */
  border-radius: 5px;
  z-index: 2;
}
tbody {
  display: block;
  max-height: calc(
    100vh - 375px
  ); /*275 - 175*/
  overflow-y: auto;
  width: 100%;
}
.div-cores{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% - 6px);
  margin: auto;
  height: 50px;
  border: 1px solid var(--verde);
  border-radius: 5px;
}
.div-cores z {
  color: var(--verde);
}

tbody tr {
  display: table;
  table-layout: fixed; /* Garante que as colunas tenham a mesma largura */
  width: 100%;
  border-bottom: 1px solid var(--verde);
  border-left: 1px solid var(--verde);
  border-right: 1px solid var(--verde);
  height: 46px;
}
thead tr {
  display: table;
  width: calc(100% - 15px);
  table-layout: fixed; /* Garante alinhamento com tbody */
}
@media (max-width: 400px) {
  thead tr{
    width: calc(100% - 10px);
  }
}


.tabela {
  border-collapse: collapse;
  /*border: 1px solid yellowgreen;*/
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  table-layout: fixed;
}
thead {
  background-color: var(--verde);
  color: white;
}
th {
  height: 46px;
  text-align: left;
  padding: 0px 10px;
  border-bottom: 1px solid whitesmoke;
}

.thmarcar {
  font-size: 12pt;
  text-align: left;
  padding: 0;
}
tr {
  height: 30px;
  border-radius: 5px;
}
tr:hover {
  background-color: #5569563a;
}
.tditem {
  padding-left: 5px;
}
.tdstatus {
  padding-right: 5px;
}
.disponivel {
  color: var(--verde);
}
.comprado {
  color: gray;
  text-decoration: line-through;
}
.tdcheck {
  padding: 0; /* Remove qualquer padding para facilitar o preenchimento */
}
.tdcheckcomprado {
  padding: 0; /* Remove qualquer padding para facilitar o preenchimento */
  position: relative; /* Garante que elementos internos sigam o tamanho do TD */
}

.tdcheck a {
  width: 100%; /* Garante que o <a> preencha toda a largura do TD */
  text-align: center; /* Centraliza o texto do link */
  text-decoration: none; /* Remove sublinhados */
}

.tdcheck a span {
  width: 100%; /* Preenche toda a largura do <a> */
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--verde); /* Cor do texto */
  color: var(--backgroud);
  border: 1px solid whitesmoke;
  border-radius: 5px;
}
.tdcheck a span:hover {
  background-color: var(--backgroud);
  color: var(--verde);
  border: 1px solid var(--verde);
}