/* Cores do Registro.br */
/* :root {
  --color1:  #95C11E;
  --color1-light: #CFDF9A;
  --color2: #9D9D9C;
  --color2-light: #DADADA; 
  --color3: #FEEB15; 
  --text-color: #333;
} */

:root {
  --color1:  #4364F7; /*Verde escuro*/
  --color1-light: #5775fe; /*Verde Claro*/
  --color2: #95C11E; /*Cinza escuro*/
  --color2-light: #CFDF9A; /*Cinza claro*/
  --color3: #FEEB15;  /*Amarelo*/
  --text-color: #333;
  --outline: 1px dashed rgba(130, 130, 130, 0.5);
  --radius-inside: 8px;
  --radius-outside: 24px;
}



body {
  
  font-size: 18px;
  background-color: var(--color1);
  font-family: sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;

  /* background: url("https://img.freepik.com/free-psd/3d-illustration-man-with-binoculars-top-cloud-topped-mountain_1150-53639.jpg?w=1480&t=st=1708824201~exp=1708824801~hmac=a4d73f61d62b442d5ee7138137bbeec73fb594531f02f816e9f77b930f897476") var(--color1) no-repeat; */
}

body, h1, h2, h3 form, button,p {
  margin: 0;
  padding: 0;
}
p {
  line-height: 1.4em;
}

p + p {
  margin-top: 6px;
}



/* Centraliza o conteúdo */
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: auto;
}

#content {
  /* outline: var(--outline); */
  max-width: 780px;
}

header {
  color: #fff;
  padding: 12px;
  text-align: center;
  /* outline: var(--outline); */
}

button {
  font-size: 18px;
  padding: 10px 20px;
  background-color: var(--color2);
  color: #fff;
  border: 1px solid var(--color2);
  border-radius: var(--radius-inside);
  cursor: pointer;
}

button:hover {
  background-color: #7ea21b;
}

.style-box {
  padding: 12px;
  background-color: rgba(245, 245, 245, 0.85);
  border-radius: 12px;
  box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);

  backdrop-filter: blur(10px);
  /* transition: all 300ms ease-in; */
}


.style-box.style-box-outline {
  color: #d1daff;
  background-color: transparent;
  border: 2px solid #6984ff;
  box-shadow: none;
}

.search-container,
.response-container {
  padding: 12px;
  /* outline: var(--outline); */
}

.search-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.search-box input, .search-box select {
  padding: 16px 10px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: var(--radius-inside);
  font-size: 18px;
  border: 1px solid #ccc;
}

.search-box button {
  padding: 16px 20px 17px;
}

form .group-field,
form .group-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.no-gap {
  gap: 0px!important; 
}



#posicao {
  width: 150px;
  border-radius:   var(--radius-inside) 0 0 var(--radius-inside);
}
#termo {
  width: 200px;
  border-radius:  0  var(--radius-inside) var(--radius-inside) 0;
  border-left: none;
}
#extensao {width: 120px;}
#qtd_caracteres{width: 50px;}



@media (max-width: 768px) {
  .search-box {
      flex-direction: column;
      align-items: stretch;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

table, th, td {
  padding: 8px 6px;
  border: 1px solid #aab9ff;
}

th, td {
  text-align: left;
}

tr {
  transition: background 200ms ease-in;
}
tr:hover {
  background-color: whitesmoke;
  border-radius: 4px;
}

th:first-child, td:first-child {
  text-align: right;
}

th:last-child, td:last-child {
  text-align: center;
}





.loader {
  border: 4px solid #f3f3f3; /* Cor de fundo */
  border-top: 4px solid #3498db; /* Cor do círculo */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}